Maak een web-bediene joystick met Arduino UNO en WiFi Shield

Onderdelen en benodigdheden

Over dit project

Als beginner leer je hier:

• Arduino - Servomotor aansturing
• Arduino - Joystick-interfaces

Met dit project kun je allerlei dingen besturen, maar we gebruiken servomotoren als voorbeeld.

Demo

Een web-interface op je smartphone of computer fungeert als virtuele joystick die twee servomotoren bestuurt via WiFi.

Aansluitschema

• Plaats de PHPoC WiFi Shield op de Arduino
• Verbind GND en VCC van beide servomotoren met GND en 5V van de Arduino (de IOREF-pin kan ook als 5V dienen)
• Verbind de signaalpinnen van de servomotoren met pin 8 en pin 9 van de Arduino

Dataflow

Webbrowser → PHPoC WiFi Shield → Arduino

De web-app in de browser stuurt de coördinaten (na schaling) van een touch- of klikgebeurtenis naar de PHPoC Shield via WebSocket. De shield geeft deze data automatisch door aan de Arduino, die de twee servomotoren aanstuurt op basis van de ontvangen data.

Let op: De PHPoC Shield heeft een ingebouwd programma om data van de browser door te sturen naar de Arduino. Je hoeft je er niet om te bekomen.

Wat we moeten doen

• WiFi-instellingen configureren voor de PHPoC Shield (SSID en wachtwoord)
• Nieuwe web-interface (UI) uploaden naar de PHPoC Shield
• Arduino-code schrijven en uploaden

WiFi-instellingen configureren

Volg deze instructie.

Web UI uploaden naar PHPoC Shield

• Download de PHPoC-broncode remote_joystick.php (in de code-sectie)
• Upload het naar de PHPoC Shield met de PHPoC Debugger volgens deze instructie

Arduino-code schrijven

• Installeer de PHPoC-bibliotheek voor Arduino in de Arduino IDE (zie instructie)
• Bekijk de broncode in de code-sectie

Uitproberen

• Open de Seriële Monitor in de Arduino IDE om het IP-adres te zien
• Open een webbrowser, ga naar https://<ip-adres>/remote_joystick.php
• Klik op de "Connect"-knop en test het

Vergelijkbaar project, ander hardware-platform

Dit project doet hetzelfde maar gebruikt een ander hardware-platform.

De beste Arduino-starterskit voor beginners

Bekijk de beste Arduino-kit voor beginners.

Functiereferenties

• Arduino - Servo-bibliotheek
• 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 <Servo.h>

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 adres: ");
  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);
      // Schaal van [-100; 100] naar [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 User Interface (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 { font-weight: bold; font-size: width/2pt; }
  h2 { font-weight: bold; font-size: width/2pt; }
  button { font-weight: bold; font-size: width/2pt; }
</style>
<script>
  // ... (volledige JavaScript-code voor de virtuele joystick op canvas)
  // Zie origineel voor complete implementatie
</script>
</head>
<body>
  <h1>Arduino - Web-based 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>

Schema's