Web-gesteuerter Joystick mit Arduino UNO & WiFi Shield erstellen

Komponenten und Zubehör

Arduino UNO	×	1
PHPoC WiFi Shield für Arduino	×	1
Seeed SG90 Mikro-Servomotor	×	2
Jumper-Kabel	×	1 Set

Über dieses Projekt

Wenn Sie Anfänger sind, lernen Sie hier:

• Arduino – Servomotor ansteuern
• Arduino – Joystick auslesen

Mit diesem Projekt lässt sich prinzipiell alles steuern; als Beispiel dienen zwei Servomotoren.

Demo

Ein Web-basierter Joystick steuert zwei Servos in Echtzeit über WebSocket.

Verkabelung

• PHPoC WiFi Shield auf den Arduino aufstecken
• GND und VCC beider Servos an GND und 5 V des Arduino anschließen (Pin IOREF kann wie 5 V genutzt werden)
• Signalleitungen der Servos an Pin 8 und Pin 9 des Arduino anschließen

Datenfluss

Webbrowser → PHPoC WiFi Shield → Arduino

Die Web-App im Browser sendet die Koordinaten (skaliert) von Touch- oder Klickereignissen per WebSocket an den PHPoC Shield. Dieser leitet die Daten automatisch an den Arduino weiter. Der Arduino steuert die beiden Servomotoren entsprechend der empfangenen Daten.

Hinweis: Der PHPoC Shield verfügt über ein integriertes Programm zur Datenweiterleitung vom Browser zum Arduino. Sie müssen sich darum nicht kümmern.

Was zu tun ist

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

WLAN-Informationen für PHPoC Shield einrichten

Siehe diese Anleitung.

Neue Web-UI auf PHPoC Shield hochladen

• PHPoC-Quellcode remote_joystick.php herunterladen (im Code-Bereich)
• Per PHPoC Debugger auf den Shield hochladen (Anleitung beachten)

Arduino-Code schreiben

• PHPoC-Bibliothek für Arduino in der Arduino IDE installieren (Anleitung)
• Quellcode im Code-Bereich beachten

Testen

• Seriellen Monitor in der Arduino IDE öffnen, um die IP-Adresse zu sehen
• Im Webbrowser https://<IP-Adresse>/remote_joystick.php aufrufen
• Auf „Connect“ klicken und testen

Ähnliches Projekt, andere Hardware-Plattform

Dieses Projekt erfüllt den gleichen Zweck, nutzt aber eine andere Hardware-Basis.

Funktionsreferenzen

• Arduino – Servo Library
• Servo.attach()
• Servo.write()
• Servo.writeMicroseconds()
• Servo.read()
• Servo.attached()
• Servo.detach()
• Serial.begin()
• Serial.println()

Code

Arduino-Code

#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);
      // Skalierung von [-100, 100] auf [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);
    }
  }
}

Web-Benutzeroberfläche (remote_joystick.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>
// ... (JavaScript-Code für Joystick-Canvas und WebSocket-Handling)
// Vollständiger Code im Original-Projekt verfügbar
</script>
</head>
<body>
  <h1>Arduino - Web-basierter Joystick</h1>
  <canvas id="remote"></canvas>
  <h2>
    <p>WebSocket: <span id="ws_state">null</span></p>
    <button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
  </h2>
</body>
</html>

Schaltplan