基于 Web 界面的 6 自由度机械臂远程控制：Arduino + PHPoC WiFi Shield

元件清单

系统架构

• 客户端：浏览器打开 Web 页面（HTML5 Canvas + JavaScript），触摸/鼠标拖动四个控制区（A: 大臂/小臂/手腕；B: 底座旋转；C: 夹爪旋转；D: 夹爪开合）。
• 服务端：PHPoC Shield 运行 PHP WebSocket 服务（remote_arm.php），接收角度指令，转发给 Arduino。
• Arduino：驱动 6 路舵机，按插值算法平滑同步运动至目标角度。

Web 界面交互设计

• 区域 A：圆形工作区，拖动计算末端坐标，经几何逆运动学解算出电机 2/3/4 角度。
• 区域 B/C：圆形飞轮，拖动旋转控制电机 1/5 角度。
• 区域 D：垂直滑块控制电机 6（夹爪开合）。
• WebSocket 实时推送角度数组 "a1,a2,a3,a4,a5,a6\r\n" 到 Shield。

逆运动学几何计算（区域 A）

已知：基座固定点 C，用户目标点 D，连杆长 b=CB, a=BA, d=AD。假设 ∠B = ∠A = α，引入辅助点 E，推导二次方程求 α，再由余弦定理求 γ，最终得电机角度：

电机2角度 = δ + γ
电机3角度 = β = 180° - α
电机4角度 = β

详细推导见文中图示与公式。

Arduino 平滑运动算法

为使 6 个舵机同步到达，采用定步数插值：

stepNum = max_i(|cur[i] - dest[i]| / stepSize[i]);
每 20 ms 循环：
  for i=0..5:
    cur[i] += (dest[i] - cur[i]) / stepNum;
    限幅后 servo[i].write(cur[i]);
  stepNum--;

stepSize[] 为各电机单步角度（度），决定速度与平滑度。

核心代码

Arduino 端（RobotArmWeb.ino）

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

int angle_init[]   = {90, 101, 165, 153, 90, 120};
int angle_offset[] = {0, 11, -15, -27, 0, 137};
int cur_angles[6], dest_angles[6];
int angle_max[] = {180,180,160,120,180,137};
int angle_min[] = {0,0,0,20,0,75};
int dir[] = {1,1,1,1,1,-1};
int stepSize[] = {3,2,2,2,4,4};

Servo servo[6];
PhpocServer server(80);
int stepNum = 0;

void setup() {
  Serial.begin(9600);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("remote_arm");
  for(int i=0;i<6;i++) {
    servo[i].attach(i+2); // D2-D7
    servo[i].write(angle_init[i]);
    cur_angles[i] = angle_init[i];
  }
}

void loop() {
  PhpocClient client = server.available();
  if(client) {
    String line = client.readLine();
    if(line.length()) {
      // 解析 "a1,a2,a3,a4,a5,a6"
      int p1=-1, p2;
      for(int i=0;i<5;i++) {
        p2 = line.indexOf(',', p1+1);
        int ang = line.substring(p1+1, p2).toInt();
        dest_angles[i] = ang * dir[i] + angle_offset[i];
        p1 = p2;
      }
      dest_angles[5] = line.substring(p1+1).toInt() * dir[5] + angle_offset[5];
      // 计算步数
      stepNum = 0;
      for(int i=0;i<6;i++) {
        int dif = abs(cur_angles[i] - dest_angles[i]);
        int steps = dif / stepSize[i];
        if(stepNum < steps) stepNum = steps;
      }
    }
  }
  // 插值运动
  if(stepNum > 0) {
    for(int i=0;i<6;i++) {
      int delta = (dest_angles[i] - cur_angles[i]) / stepNum;
      cur_angles[i] += delta;
      cur_angles[i] = constrain(cur_angles[i], angle_min[i], angle_max[i]);
      servo[i].write(cur_angles[i]);
    }
    stepNum--;
    delay(20);
  }
}

Web 端（remote_arm.php）

包含 HTML5 Canvas 绘制机械臂实时姿态、触摸/鼠标事件处理、逆运动学解算、WebSocket 通信。完整代码约 400 行，关键函数：geometric_calculation()、event_handler()、update_view()、angles_change_notice()。需将 flywheel.png 上传至 PHPoC Shield 文件系统。

原理图

需外接舵机电源，共地。

扩展建议

• 增加位置记忆/轨迹回放功能。
• 引入逆运动学库（如 IKFast）支持任意末端位姿。
• 加装力反馈传感器实现柔性抓取。
• 用 ESP32 替代 PHPoC Shield 降低成本。