Веб-управляемый джойстик на Arduino UNO и WiFi Shield

Компоненты и материалы

Arduino UNO	1
PHPoC WiFi Shield для Arduino	1
Сервопривод Seeed SG90 (микро)	2
Перемычки (набор)	1

О проекте

Проект для начинающих. Научитесь:

• Управлять сервоприводами с Arduino
• Работать с джойстиком

В качестве примера управляется пара сервоприводов, но принцип применим к любым устройствам.

Демонстрация

Управление сервоприводами через веб-интерфейс в браузере.

Схема подключения

• Установите PHPoC WiFi Shield на Arduino
• GND и VCC обоих сервоприводов → GND и 5V Arduino (пин IOREF тоже подходит)
• Сигнальные провода сервоприводов → пины 8 и 9 Arduino

Поток данных

Веб-браузер → PHPoC WiFi Shield → Arduino

Веб-приложение отправляет координаты касания/клика (после масштабирования) на PHPoC Shield через WebSocket. Shield автоматически передаёт данные в Arduino. Arduino управляет сервоприводами согласно полученным данным.

Важно: В PHPoC Shield встроена программа передачи данных от браузера к Arduino. Вам не нужно о ней заботиться.

Что нужно сделать

• Настроить WiFi на PHPoC Shield (SSID и пароль)
• Загрузить веб-интерфейс (remote_joystick.php) на Shield через PHPoC Debugger
• Написать и загрузить код на Arduino

Настройка WiFi на PHPoC Shield

См. инструкцию.

Загрузка веб-интерфейса

• Скачайте remote_joystick.php (в разделе кода)
• Загрузите на Shield через PHPoC Debugger по инструкции

Код для Arduino

• Установите библиотеку PHPoC для Arduino IDE (см. инструкцию)
• Используйте исходный код из раздела «Код»

Запуск

• Откройте монитор порта в Arduino IDE — там будет IP-адрес
• В браузере перейдите по адресу https:///remote_joystick.php
• Нажмите «Connect» и тестируйте

Похожие проекты на других платформах

Этот же функционал реализован на другом железе.

Лучший стартовый набор Arduino для новичка

См. обзор лучших наборов Arduino для начинающих.

Справочник функций

• Библиотека Servo: attach(), write(), writeMicroseconds(), read(), attached(), detach()
• Serial: begin(), println()

Код

Код для 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("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);
      // Масштаб [-100; 100] → [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);
    }
  }
}

Веб-интерфейс (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>
  // ... (полный JS-код виртуального джойстика с Canvas и WebSocket)
  // Инициализация холста, обработка touch/mouse, отправка координат по WS
</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" onclick="connect_onclick()">Connect</button>
  </h2>
</body>
</html>

Схемы