Crie um Joystick Web com Arduino UNO e Shield WiFi PHPoC

Componentes e Materiais

Componente	Quantidade
Arduino UNO	1
PHPoC WiFi Shield para Arduino	1
Servomotor Seeed SG90 Micro	2
Jumpers (fios de conexão)	1 conjunto

Sobre o Projeto

Se você é iniciante, pode aprender:

• Arduino - Servomotor
• Arduino - Joystick

Podemos controlar diversos dispositivos com este projeto, mas usei servomotores como exemplo.

Demonstração

Um joystick virtual no navegador controla dois servomotores em tempo real via WebSocket.

Ligação (Wiring)

• Encaixe o PHPoC WiFi Shield (ou PHPoC Shield) sobre o Arduino
• Conecte GND e VCC dos dois servomotores ao GND e 5V do Arduino, respectivamente (o pino IOREF do Arduino também pode ser usado como 5V)
• Conecte os pinos de sinal dos servomotores aos pinos 8 e 9 do Arduino, respectivamente

Fluxo de Dados

Navegador Web → PHPoC WiFi Shield → Arduino

O aplicativo web no navegador envia as coordenadas (após escalonamento) do evento de toque ou clique para o PHPoC Shield via WebSocket. Ao receber os dados, o PHPoC Shield os repassa automaticamente ao Arduino. O Arduino controla os dois servomotores conforme os dados recebidos.

Nota: O PHPoC Shield possui um programa interno para passar dados do navegador ao Arduino. Portanto, não precisamos nos preocupar com essa parte.

O que Precisamos Fazer

• Configurar informações WiFi no PHPoC Shield (SSID e senha)
• Carregar nova interface Web (UI) no PHPoC Shield
• Escrever o código do Arduino

Configuração WiFi do PHPoC Shield

Consulte esta instrução.

Carregar Nova UI Web no PHPoC Shield

• Baixe o código fonte PHPoC remote_joystick.php (na seção de código)
• Carregue-o no PHPoC Shield usando o PHPoC Debugger conforme esta instrução

Escrever Código do Arduino

• Instale a biblioteca PHPoC para Arduino na Arduino IDE (veja a instrução)
• Veja o código fonte na seção de código

Testando

• Clique no botão Serial na Arduino IDE para ver o endereço IP
• No navegador, acesse https:// substitua_pelo_endereço_ip /remote_joystick.php
• Clique no botão "Connect" e teste

Projeto Similar com Outra Plataforma de Hardware

Este projeto realiza a mesma função mas utiliza outra plataforma de hardware.

O Melhor Kit Inicial Arduino para Iniciantes

Veja O Melhor Kit Arduino para Iniciantes

Referências de Funções

• Biblioteca Servo do Arduino
• Servo.attach()
• Servo.write()
• Servo.writeMicroseconds()
• Servo.read()
• Servo.attached()
• Servo.detach()
• Serial.begin()
• Serial.println()

Código

Código do Arduino

#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("Endereço do 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);
      // Escalonar de [-100; 100] para [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 Web do Usuário (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>
// ... (código JavaScript completo para o joystick virtual via WebSocket)
// O código implementa:
// - Canvas responsivo com joystick visual
// - Conexão WebSocket com o PHPoC Shield
// - Envio de coordenadas X/Y escalonadas (-100 a 100)
// - Tratamento de eventos touch e mouse
</script>
</head>
<body>
<p> <h1>Arduino - Joystick Baseado na 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();">Connect</button>
</h2>
</body>
</html>

Esquemáticos