Arduino UNO Web-Servo-Steuerung mit PHPoC WiFi Shield

Komponenten und Zubehör

	Arduino UNO	×	1
	PHPoC WiFi Shield für Arduino	×	1
	Seeed Servomotor	×	1
	Jumper Wires	×	1

Über dieses Projekt

Einführung

Für Einsteiger empfehle ich, sich über Arduino-Servomotoren und Arduino-WiFi zu informieren. Um Arduino ins Internet zu bringen, benötigt man ein Internet-Shield: Ethernet, WiFi, PHPoC oder PHPoC WiFi Shield. Das Besondere am PHPoC Shield: Es bietet nicht nur Internetzugang, sondern auch einen eingebauten Webserver, der Steuerung und Überwachung per Webbrowser ermöglicht. Zudem unterstützt es WebSocket für Echtzeitsteuerung ohne Neuladen. PHPoC Shield bringt fertige Webanwendungen mit (Details: Handbuch).

In diesem Projekt habe ich die Benutzeroberfläche der Webanwendung Web Remote Control/Slide angepasst und Arduino-Code geschrieben, der den Servowinkel entsprechend dem vom Browser empfangenen Winkel dreht.

Verdrahtung

• PHPoC Shield auf Arduino stecken
• Servo GND, VCC, Signal an Arduino GND, 5V, Pin 9 anschließen

Datenfluss

Webbrowser → PHPoC Shield → Arduino

Web-App berechnet Winkel aus Touch/Mouse-Event, sendet per WebSocket an PHPoC Shield. Dieser leitet an Arduino weiter. Arduino dreht Servo entsprechend.

Was zu tun ist

• WLAN-Informationen für PHPoC Shield einrichten (SSID, Passwort)
• Neue UI auf PHPoC Shield hochladen
• Arduino-Code schreiben

WLAN-Info für PHPoC Shield einrichten

Anleitung: https://www.phpoc.com/support/manual/p4s-347_user_manual/contents.php?id=network_first_setup

Neue UI auf PHPoC Shield hochladen

• PHPoC-Quellcode remote_rotate.php herunterladen (Code-Bereich)
• Per PHPoC Debugger hochladen (Anleitung beachten)

Arduino-Code schreiben

• PHPoC-Bibliothek für Arduino in Arduino IDE installieren (Anleitung) und IDE neu starten.
• In Arduino IDE: Datei → Beispiele → Phpoc → WebRemoteSlide und Datei → Beispiele → Servo → sweep öffnen.
• Beide Beispiele kombinieren → Code für Servosteuerung per Webseite (Quellcode im Code-Bereich).

Testen

• Serieller Monitor in Arduino IDE → IP-Adresse anzeigen
• Browser: https://IP_ADRESSE_ERSETZEN/remote_rotate.php
• Verbinden-Button klicken und testen

Das beste Arduino-Starterkit für Einsteiger

Suchst du ein Arduino-Kit? Siehe Bestes Arduino Kit für Anfänger.

Funktionsreferenzen

• Arduino - Servo Library
• Servo.attach(), Servo.write(), Servo.writeMicroseconds(), Servo.read(), Servo.attached(), Servo.detach()
• Serial.begin(), Serial.println(), delay()
• for-Schleife, while-Schleife, if-else
• loop(), setup()
• String.toInt()

Code

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 = "<?echo _SERVER("HTTP_HOST")?>"; 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; } var 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-Code (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);
    }
  }
}