Créer un joystick piloté par web avec Arduino UNO et shield WiFi

Composants et fournitures

Arduino UNO	×	1
Shield WiFi PHPoC pour Arduino	×	1
Moteur servo Seeed SG90 (micro servo)	×	2
Fils de connexion (jumper wires)	×	1

À propos de ce projet

Si vous êtes débutant, vous apprendrez :

• Arduino - Moteur servo
• Arduino - Joystick

Nous pouvons tout contrôler avec ce projet, mais j'ai pris les moteurs servo comme exemple.

Démonstration

Câblage

• Empilez le shield WiFi PHPoC (ou shield PHPoC) sur l'Arduino.
• Connectez les broches GND et VCC des deux servos aux GND et 5V de l'Arduino respectivement (la broche IOREF de l'Arduino peut servir de 5V).
• Connectez les broches de signal des deux servos aux broches 8 et 9 de l'Arduino respectivement.

Flux de données

Navigateur web → Shield WiFi PHPoC → Arduino

L'application web dans le navigateur envoie les coordonnées (après mise à l'échelle) de l'événement tactile ou clic au shield PHPoC via WebSocket. À la réception des données, le shield les transmet automatiquement à l'Arduino. L'Arduino contrôle les deux servos selon les données reçues.

Note : Le shield PHPoC possède un programme intégré pour transférer les données du navigateur vers l'Arduino. Nous n'avons donc pas à nous en soucier.

Ce qu'il faut faire

• Configurer les informations WiFi pour le shield PHPoC (SSID et mot de passe).
• Téléverser la nouvelle interface utilisateur (UI) sur le shield PHPoC.
• Écrire le code Arduino.

Configuration WiFi du shield PHPoC

Voir cette instruction.

Téléverser la nouvelle interface web sur le shield PHPoC

• Téléchargez le code source PHPoC remote_joystick.php (dans la section code).
• Téléversez-le sur le shield PHPoC via PHPoC Debugger selon cette instruction.

Écrire le code Arduino

• Installez la bibliothèque PHPoC pour Arduino dans l'IDE Arduino (voir l'instruction).
• Consultez le code source dans la section code.

Essayer

• Cliquez sur le bouton série dans l'IDE Arduino pour voir l'adresse IP.
• Ouvrez un navigateur web, tapez https:// remplacer_adresse_ip/remote_joystick.php
• Cliquez sur le bouton Connecter et testez.

Projet similaire mais plateforme matérielle différente

Ce projet fait la même chose mais utilise une autre plateforme matérielle.

Le meilleur kit de démarrage Arduino pour débutant

Voir Le meilleur kit Arduino pour débutants.

Références des fonctions

• Arduino - Bibliothèque Servo
• Servo.attach()
• Servo.write()
• Servo.writeMicroseconds()
• Servo.read()
• Servo.attached()
• Servo.detach()
• Serial.begin()
• Serial.println()

Code

Code Arduino 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("Adresse serveur WebSocket : ");
  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);
      // Mise à l'échelle de [-100; 100] vers [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);
    }
  }
}

Interface utilisateur web (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 { 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> ... (code JavaScript complet pour l'interface joystick web) ... </script> </head> <body> <p> <h1>Arduino - Joystick Web</h1> </p> <canvas id="remote"></canvas> <h2> <p> WebSocket : <span id="ws_state">null</span> </p> <button id="bt_connect" type="button" onclick="connect_onclick();">Connecter</button> </h2> </body> </html>

Schéma