아두이노 UNO와 WiFi 실드로 웹 조이스틱 만들기

부품 및 소모품

아두이노 UNO	×1
PHPoC WiFi 실드 (아두이노용)	×1
Seeed SG90 마이크로 서보 모터	×2
점퍼 와이어	×1

프로젝트 소개

초보자를 위한 학습 내용:

• 아두이노 - 서보 모터 제어
• 아두이노 - 조이스틱 인터페이스

이 프로젝트로 모든 것을 제어할 수 있지만, 서보 모터를 예시로 사용했습니다.

데모

배선 방법

• PHPoC WiFi 실드 또는 PHPoC 실드를 아두이노에 장착
• 서보 모터 2개의 GND와 VCC를 아두이노의 GND와 5V에 각각 연결 (IOREF 핀도 5V처럼 사용 가능)
• 서보 모터 신호 핀을 아두이노 8번, 9번 핀에 각각 연결

데이터 흐름

웹 브라우저 → PHPoC WiFi 실드 → 아두이노

웹 브라우저의 웹 앱이 터치/클릭 이벤트 좌표(스케일링 후)를 WebSocket을 통해 PHPoC 실드로 전송합니다. 데이터를 수신하면 PHPoC 실드가 자동으로 아두이노로 전달합니다. 아두이노는 PHPoC 실드로부터 받은 데이터에 따라 두 서보 모터를 제어합니다.

참고: PHPoC 실드에는 웹 브라우저에서 아두이노로 데이터를 전달하는 내장 프로그램이 있습니다. 따라서 이에 대해 신경 쓸 필요가 없습니다.

해야 할 작업

• PHPoC 실드 WiFi 정보 설정 (SSID 및 비밀번호)
• PHPoC 실드에 새 UI 업로드
• 아두이노 코드 작성

PHPoC 실드 WiFi 정보 설정

이 지침을 참조하세요.

PHPoC 실드에 새 웹 UI 업로드

• 코드 섹션의 remote_joystick.php PHPoC 소스 코드 다운로드
• 이 지침에 따라 PHPoC 디버거를 사용해 PHPoC 실드에 업로드

아두이노 코드 작성

• 아두이노 IDE에서 PHPoC 라이브러리 설치 (지침 참조)
• 코드 섹션의 소스 코드 참조

실행 방법

• 아두이노 IDE의 시리얼 버튼을 클릭해 IP 주소 확인
• 웹 브라우저에서 https:// IP_주소_입력 /remote_joystick.php 접속
• 연결 버튼 클릭 후 테스트

유사 프로젝트 (다른 하드웨어 플랫폼)

같은 기능을 하지만 다른 하드웨어 플랫폼을 사용한 프로젝트입니다.

초보자를 위한 최고의 아두이노 스타터 키트

초보자를 위한 최고의 아두이노 키트 확인

함수 참조

• 아두이노 - Servo 라이브러리
• Servo.attach()
• Servo.write()
• Servo.writeMicroseconds()
• Servo.read()
• Servo.attached()
• Servo.detach()
• Serial.begin()
• Serial.println()

코드

아두이노 코드 Arduino

#include "SPI.h"
#include "Phpoc.h"
#include 

PhpocServer server(80);
Servo servo_x;
Servo servo_y;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("web_joystick");
  Serial.print("WebSocket server address: ");
  Serial.println(Phpoc.localIP());
  servo_x.attach(8);
  servo_y.attach(9);
  servo_x.write(90);
  servo_y.write(90);
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    String data = client.readLine();
    if(data) {
      int pos = data.indexOf(':');
      long x = data.substring(0, pos).toInt();
      long y = data.substring(pos+1).toInt();
      Serial.print("x: ");
      Serial.print(x);
      Serial.print(", y: ");
      Serial.println(y);
      // [-100, 100] 범위를 [0, 180]으로 변환
      long angle_x = (x + 100) * 180 / 200;
      long angle_y = (y + 100) * 180 / 200;
      servo_x.write(angle_x);
      servo_y.write(angle_y);
    }
  }
}

웹 사용자 인터페이스 (remote_joystick.php) PHP

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<style>
  body { text-align: center; font-size: width/2pt; }
  h1, h2, button { font-weight: bold; font-size: width/2pt; }
</style>
<script>
// 조이스틱 캔버스 및 WebSocket 통신 로직
// 터치/마우스 이벤트 처리 및 서보 제어 데이터 전송
</script>
</head>
<body>
<h1>Arduino - Web-based Joystick</h1>
<canvas id="remote"></canvas>
<h2>
  WebSocket: <span id="ws_state">null</span>
  <button id="bt_connect" onclick="connect_onclick()">Connect</button>
</h2>
</body>
</html>

회로도