아두이노 우노 웹 기반 서보 제어 - PHPoC WiFi 실드 활용

부품 및 소모품

아두이노 우노 (Arduino UNO)	1개
PHPoC WiFi 실드 (PHPoC WiFi Shield for Arduino)	1개
씨드 서보 모터 (Seeed Servo motor)	1개
점퍼 와이어	1세트

프로젝트 개요

소개

초보자라면 아두이노 - 서보 모터와 아두이노 - WiFi 관련 자료를 먼저 읽어보시길 권장합니다.

아두이노를 인터넷에 연결하려면 이더넷 실드, WiFi 실드, PHPoC 실드, PHPoC WiFi 실드 같은 인터넷 실드가 필요합니다.

PHPoC 실드의 뛰어난 점은 이더넷/WiFi 실드처럼 인터넷 연결을 제공할 뿐만 아니라, 내장 웹 서버를 통해 웹 브라우저에서 아두이노를 제어/모니터링할 수 있다는 것입니다. 또한 WebSocket을 지원해 웹페이지 새로고침 없이 실시간 제어/모니터링이 가능합니다.

PHPoC 실드에는 몇 가지 내장 웹 애플리케이션이 있습니다. 자세한 내용은 이 링크를 참조하세요.

이 프로젝트에서는 웹 원격 제어/슬라이드(Web Remote Control/Slide) 웹 애플리케이션의 UI를 변경하고, 웹 브라우저에서 수신한 각도에 따라 서보 모터를 회전시키는 아두이노 코드를 작성했습니다.

배선

PHPoC 실드를 아두이노에 장착
서보 모터의 GND, VCC, 신호 핀을 아두이노 GND, 5V, 9번 핀에 각각 연결

데이터 흐름

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

웹 앱에서 터치/마우스 이벤트 기반으로 각도 계산 → WebSocket으로 PHPoC 실드 전송 → PHPoC 실드가 아두이노로 전달 → 아두이노가 서보 모터를 해당 각도로 회전

해야 할 작업

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

PHPoC 실드 WiFi 정보 설정

설명서 참조: https://www.phpoc.com/support/manual/p4s-347_user_manual/contents.php?id=network_first_setup

PHPoC 실드에 새 UI 업로드

PHPoC 소스 코드 remote_rotate.php 다운로드 (코드 섹션 참조)
PHPoC 디버거로 실드에 업로드 (이 설명서 참조)

아두이노 코드 작성

아두이노 IDE에 PHPoC 라이브러리 설치 (설명서 참조) 후 IDE 재시작
아두이노 IDE에서 파일 → 예제 → Phpoc → WebRemoteSlide와 파일 → 예제 → Servo → sweep 열기
두 예제를 합쳐 웹페이지로 서보 제어하는 코드 작성 (코드 섹션의 소스 코드 참조)

테스트

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

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

아두이노 키트를 찾고 있다면 초보자를 위한 최고의 아두이노 키트를 참고하세요.

함수 레퍼런스

아두이노 - Servo 라이브러리
Servo.attach()
Servo.write()
Servo.writeMicroseconds()
Servo.read()
Servo.attached()
Servo.detach()
Serial.begin()
Serial.println()
delay()
for 루프
while 루프
if else
loop()
setup()
String.toInt()

코드

remote_rotate.php (PHP)

<!DOCTYPE html>
<html>
<head>
  <title>PHPoC Shield - Web Remote Control for Arduino</title>
  <meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
  <style>
    body { text-align: center; font-size: 15pt; }
    h1 { font-weight: bold; font-size: 25pt; }
    h2 { font-weight: bold; font-size: 15pt; }
    button { font-weight: bold; font-size: 15pt; }
  </style>
  <script>
    var canvas_width = 400, canvas_height = 400;
    var plate_radius = 160;
    var click_state = 0;
    var last_plate_angle = 0;
    var plate_angle = 0, last_angle = 0;
    var ws;
    function init() {
      var canvas = document.getElementById("remote");
      canvas.addEventListener("touchstart", mouse_down);
      canvas.addEventListener("touchend", mouse_up);
      canvas.addEventListener("touchmove", mouse_move);
      canvas.addEventListener("mousedown", mouse_down);
      canvas.addEventListener("mouseup", mouse_up);
      canvas.addEventListener("mousemove", mouse_move);
      var ctx = canvas.getContext("2d");
      ctx.translate(canvas_width / 2, canvas_height / 2);
      rotate_plate(0);
    }
    function connect_onclick() {
      if (ws == null) {
        var ws_host_addr = "";
        var debug = document.getElementById("debug");
        if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
          ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
          ws_host_addr = ws_host_addr.replace(/:/g, "-");
          ws_host_addr += ".ipv6-literal.net";
        }
        ws = new WebSocket("ws://" + ws_host_addr + "/remote_slide", "text.phpoc");
        document.getElementById("ws_state").innerHTML = "CONNECTING";
        ws.onopen = ws_onopen;
        ws.onclose = ws_onclose;
        ws.onmessage = ws_onmessage;
      } else {
        ws.close();
      }
    }
    function ws_onopen() {
      document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>";
      document.getElementById("bt_connect").innerHTML = "Disconnect";
    }
    function ws_onclose() {
      document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
      document.getElementById("bt_connect").innerHTML = "Connect";
      ws.onopen = null; ws.onclose = null; ws.onmessage = null; ws = null;
    }
    function ws_onmessage(e_msg) {
      e_msg = e_msg || window.event;
      alert("msg : " + e_msg.data);
    }
    function rotate_plate(angle) {
      var canvas = document.getElementById("remote");
      var ctx = canvas.getContext("2d");
      ctx.clearRect(-canvas_width / 2, -canvas_height / 2, canvas_width, canvas_height);
      ctx.rotate(angle / 180 * Math.PI);
      ctx.strokeStyle = "red"; ctx.fillStyle = "red";
      ctx.beginPath(); ctx.arc(0, 0, plate_radius, Math.PI, Math.PI * 1.5);
      ctx.lineTo(0, 0); ctx.lineTo(-plate_radius, 0); ctx.fill(); ctx.stroke();
      ctx.strokeStyle = "blue"; ctx.fillStyle = "blue";
      ctx.beginPath(); ctx.arc(0, 0, plate_radius, 0, Math.PI / 2);
      ctx.lineTo(0, 0); ctx.lineTo(plate_radius, 0); ctx.fill(); ctx.stroke();
      ctx.strokeStyle = "black"; ctx.arc(0, 0, plate_radius, 0, Math.PI * 2); ctx.stroke();
      ctx.rotate(-angle / 180 * Math.PI);
    }
    function mouse_down() {
      if (ws == null) return;
      var dist_min, dist_max, dist;
      event.preventDefault();
      if (event.offsetX) {
        x = event.offsetX - canvas_width / 2;
        y = canvas_height / 2 - event.offsetY;
        dist_min = 40; dist_max = plate_radius;
      } else if (event.layerX) {
        x = event.layerX - canvas_width / 2;
        y = canvas_height / 2 - event.layerY;
        dist_min = 40; dist_max = canvas_width / 2;
      } else {
        x = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - canvas_width / 2;
        y = canvas_height / 2 - (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop));
        dist_min = 40; dist_max = canvas_width / 2;
      }
      dist = Math.round(Math.sqrt(x * x + y * y));
      if ((dist > dist_min) && (dist < dist_max)) {
        click_state = 1;
        last_angle = Math.round(Math.atan2(y, x) / Math.PI * 180);
      }
    }
    function mouse_up() {
      if (ws == null) return;
      event.preventDefault();
      click_state = 0;
    }
    function mouse_move() {
      if (ws == null) return;
      var dist_min, dist_max, angle, dist;
      event.preventDefault();
      if (!click_state) return;
      if (event.offsetX) {
        x = event.offsetX - canvas_width / 2;
        y = canvas_height / 2 - event.offsetY;
        dist_min = 40; dist_max = plate_radius;
      } else if (event.layerX) {
        x = event.layerX - canvas_width / 2;
        y = canvas_height / 2 - event.layerY;
        dist_min = 40; dist_max = canvas_width / 2;
      } else {
        x = (Math.round(event.touches[0].pageX - event.touches[0].target.offsetLeft)) - canvas_width / 2;
        y = canvas_height / 2 - (Math.round(event.touches[0].pageY - event.touches[0].target.offsetTop));
        dist_min = 40; dist_max = canvas_width / 2;
      }
      angle = Math.round(Math.atan2(y, x) / Math.PI * 180);
      dist = Math.round(Math.sqrt(x * x + y * y));
      if ((dist < dist_min) || (dist > dist_max)) {
        click_state = 0; return;
      }
      if ((Math.abs(angle) > 90) && (angle * last_angle < 0)) {
        if (last_angle > 0) last_angle = -180;
        else last_angle = 180;
      }
      plate_angle += (angle - last_angle);
      last_angle = angle;
      if (plate_angle > 180) plate_angle = 180;
      if (plate_angle < 0) plate_angle = 0;
      rotate_plate(-plate_angle);
      if (plate_angle != last_plate_angle) {
        if (ws && ws.readyState) {
          ws.send("C" + plate_angle.toString() + "\r\n");
          last_plate_angle = plate_angle;
          debug = document.getElementById("debug");
          debug.innerHTML = plate_angle;
        }
      }
    }
    window.onload = init;
  </script>
</head>
<body>
  <p><h1>Web Remote Control / Rotate</h1></p>
  <canvas id="remote" width="400" height="400"></canvas>
  <h2>
    <p>
      WebSocket : <span id="ws_state">null</span><br>
      Angle : <span id="debug">0</span>
    </p>
    <button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
  </h2>
</body>
</html>

아두이노 코드 (Arduino)

/* arduino web server - remote control (slide switch) */
#include "SPI.h"
#include "Phpoc.h"
#include <Servo.h>

PhpocServer server(80);
Servo myservo;
char slideName;
int slideValue;

void setup() {
  Serial.begin(9600);
  while (!Serial) ;
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_slide");
  Serial.print("WebSocket server address : ");
  Serial.println(Phpoc.localIP());
  myservo.attach(9);
  myservo.write(1);
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    String slideStr = client.readLine();
    if (slideStr) {
      slideValue = slideStr.substring(1).toInt();
      myservo.write(slideValue);
      Serial.print("Angle: ");
      Serial.println(slideValue);
    }
  }
}

아두이노 기반 고급 ECG 모니터 - 실시간 심박수 감지 올인원 태양광 파워 허브: 충전 컨트롤러, 인버터, 파워뱅크 & LED 램프 통합

제조공정

3D 프린팅

자동화 제어 시스템

산업기술