Arduino UNO + WiFi 盾打造网页端虚拟摇杆，远程控制舵机

硬件清单

项目概述

本项目演示如何利用 PHPoC WiFi Shield 内置的 WebSocket 功能，在网页端构建一个虚拟摇杆，通过浏览器触摸/鼠标拖动即可实时控制两个舵机转动。适合初学者理解“Web → WiFi → 单片机 → 执行器”的完整数据链路。

核心学习点

• Arduino 舵机库基础用法（attach/write/read）
• 摇杆坐标映射：[-100, 100] → [0°, 180°]
• PHPoC Shield 免代码透传 WebSocket 数据
• 前端 Canvas 绘制摇杆 UI 与触摸/鼠标事件处理

接线指南

1. 将 PHPoC WiFi Shield 直接插在 Arduino UNO 顶部
2. 两个舵机的 VCC 接 5V（或 IOREF），GND 接地
3. 舵机信号线分别接 Arduino D8（X 轴）和 D9（Y 轴）

数据流向

浏览器（HTML/JS） → WebSocket → PHPoC Shield → 串口 → Arduino → 舵机

注意： PHPoC Shield 固件已内置 WebSocket ↔ 串口透传逻辑，用户无需编写 Shield 端网络代码，仅需上传网页文件 remote_joystick.php 即可。

软件准备步骤

1. 配置 WiFi 信息

通过 PHPoC Debugger 设置 SSID 与密码，详见官方文档。

2. 上传网页 UI

下载 remote_joystick.php，用 PHPoC Debugger 上传至 Shield 文件系统。

3. 编写 Arduino 代码

• Arduino IDE 安装 PHPoC 库（库管理器搜索安装）
• 参考下方完整代码上传至 UNO

运行测试

1. 打开 Arduino 串口监视器（波特率 9600），记录输出的 IP 地址
2. 手机/电脑浏览器访问 https://<IP>/remote_joystick.php
3. 点击 “Connect” 按钮，WebSocket 状态变为 CONNECTED
4. 拖动屏幕摇杆，观察两个舵机实时跟随转动

核心代码

Arduino 端

#include <SPI.h>
#include <Phpoc.h>
#include <Servo.h>

PhpocServer server(80);
Servo servo_x, 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: ");
  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.length()) {
      int idx = data.indexOf(':');
      long x = data.substring(0, idx).toInt();
      long y = data.substring(idx + 1).toInt();
      // [-100,100] → [0,180]
      long ax = (x + 100) * 180 / 200;
      long ay = (y + 100) * 180 / 200;
      servo_x.write(ax);
      servo_y.write(ay);
      Serial.print("x:"); Serial.print(x);
      Serial.print(" y:"); Serial.println(y);
    }
  }
}

网页端 remote_joystick.php（关键片段）

<canvas id="remote"></canvas>
<button id="bt_connect" onclick="connect_onclick()">Connect</button>
<script>
// 摇杆参数
var canvas_width = 500, canvas_height = 500;
var radius_base = 150, radius_handle = 72, radius_shaft = 120;
var range = canvas_width/2 - 10, step = 18;
var ws, joystick = {x:0, y:0}, click_state = 0, ratio = 1;

function init() { /* 响应式缩放、Canvas 初始化、事件绑定 */ }
function connect_onclick() { /* 建立 WebSocket 连接 ws://host/web_joystick */ }
function send_data() {
  // 坐标归一化 [-100,100] 并发送 "x:y\r\n"
  var jx = Math.round(joystick.x * 100 / (range - radius_handle));
  var jy = Math.round(-joystick.y * 100 / (range - radius_handle));
  if (ws) ws.send(jx + ":" + jy + "\r\n");
}
function update_view() { /* Canvas 重绘：底盘、轴、摇杆手柄、径向渐变 */ }
function process_event(e) { /* 统一处理 mouse/touch 坐标 */ }
function mouse_down(e) { /* 命中测试，进入拖拽状态 */ }
function mouse_move(e) { /* 拖拽中更新坐标并发送 */ }
function mouse_up(e) { /* 释放拖拽 */ }
window.onload = init;
</script>

原理图

同类项目扩展

• 将舵机替换为电机驱动板，控制小车底盘
• 增加加速度计数据回传，实现手机姿态控制
• 结合 Node-RED / MQTT 接入 Home Assistant 智能家居

常用函数速查

• Servo.attach(pin) / write(angle) / read() / detach()
• Serial.begin(baud) / println()
• Phpoc.begin() / server.beginWebSocket(name) / client.readLine()