Crea un joystick web con Arduino UNO y Shield WiFi PHPoC

Componentes y suministros

Arduino UNO	×1
PHPoC WiFi Shield para Arduino	×1
Servomotor Seeed SG90 Micro	×2
Cables jumper	×1

Sobre el proyecto

Si eres principiante, puedes aprender:

• Arduino - Servomotor
• Arduino - Joystick

Podemos controlar cualquier cosa con este proyecto, pero usé servomotores como ejemplo.

Demo

Un joystick virtual en el navegador controla dos servos en tiempo real mediante WebSocket.

Cableado

• Apila el PHPoC WiFi Shield (o PHPoC Shield) sobre el Arduino.
• Conecta GND y VCC de los dos servos a GND y 5V del Arduino respectivamente (el pin IOREF también sirve como 5V).
• Conecta los pines de señal de los servos a los pines 8 y 9 del Arduino.

Flujo de datos

Navegador web → PHPoC WiFi Shield → Arduino

La aplicación web en el navegador envía las coordenadas (escaladas) del evento táctil o clic al shield PHPoC vía WebSocket. Al recibir los datos, el shield los pasa automáticamente al Arduino. Este controla los dos servomotores según los datos recibidos.

Nota: El shield PHPoC tiene un programa integrado para pasar datos del navegador al Arduino, así que no nos preocupamos por esa parte.

Qué necesitamos hacer

• Configurar la información WiFi del shield PHPoC (SSID y contraseña).
• Subir la nueva interfaz web (UI) al shield PHPoC.
• Escribir el código de Arduino.

Configurar información WiFi para PHPoC Shield

Consulta esta instrucción.

Subir nueva Web UI al PHPoC Shield

• Descarga el código fuente PHPoC remote_joystick.php (en la sección de código).
• Súbelo al shield PHPoC usando PHPoC Debugger según esta instrucción.

Escribir código Arduino

• Instala la librería PHPoC para Arduino en el IDE de Arduino (ver instrucción).
• Consulta el código fuente en la sección de código.

Pruébalo

• Haz clic en el botón Serial en el IDE de Arduino para ver la dirección IP.
• Abre el navegador web, escribe https:// reemplaza_direccion_ip /remote_joystick.php
• Haz clic en el botón Conectar y pruébalo.

Proyecto similar pero diferente plataforma hardware

Este proyecto hace lo mismo pero usa otra plataforma hardware.

El mejor kit de inicio Arduino para principiantes

Ver El mejor kit Arduino para principiantes.

Referencias de funciones

• Arduino - Librería Servo
• Servo.attach()
• Servo.write()
• Servo.writeMicroseconds()
• Servo.read()
• Servo.attached()
• Servo.detach()
• Serial.begin()
• Serial.println()

Código

Código 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("Dirección servidor 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);
      // Escalar de [-100; 100] a [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);
    }
  }
}

Interfaz Web de Usuario (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>
// ... (código JavaScript completo para joystick virtual con WebSocket)
// Incluye: inicialización canvas, conexión WebSocket, manejo eventos touch/mouse,
// escalado coordenadas [-100,100], envío datos formato "x:y\r\n",
// dibujo dinámico del joystick con gradiente radial y eje deformable.
</script>
</head>
<body>
<h1>Arduino - Joystick basado en Web</h1>
<canvas id="remote"></canvas>
<h2>
  <p> WebSocket : <span id="ws_state">null</span> </p>
  <button id="bt_connect" type="button" onclick="connect_onclick();">Conectar</button>
</h2>
</body>
</html>

Esquemáticos