智慧生活科技專業社群: [OTTO Ninja] OTTO忍者機器人把 Web 端「按鈕控制」換成「虛擬搖桿（含死區）」

程式：
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include <Servo.h>

/* ========== WiFi AP ========== */
const char* ssid = "OTTO NINJA";
const char* password = "12345678";

/* ========== Web ========== */
ESP8266WebServer server(80);
WebSocketsServer webSocket(81);

/* ========== Calibration SETTINGS（完全沿用） ========== */
int LFFWRS= 20;
int RFFWRS= 20;
int LFBWRS= 20;
int RFBWRS= 20;

int LA0= 60;
int RA0= 120;

int LATL= 100;
int RATL= 175;
int LATR= 5;
int RATR= 80;

int LA1= 180;
int RA1= 0;

/* ========== Timing ========== */
unsigned long currentmillis1 = 0;

/* ========== Mode ========= */
int ModeCounter = 0;   // 0=WALK, 1=ROLL

/* ========== Pinout ========= */
const uint8_t ServoLeftFootPin   = 13; // D7
const uint8_t ServoLeftLegPin    = 15; // D8
const uint8_t ServoRightFootPin  = 0;  // D3
const uint8_t ServoRightLegPin   = 2;  // D4

const uint8_t ServoLeftArmPin    = 16; // D0
const uint8_t ServoRightArmPin   = 3;  // RX
const uint8_t ServoHeadPin       = 1;  // TX

Servo myservoLeftFoot;
Servo myservoLeftLeg;
Servo myservoRightFoot;
Servo myservoRightLeg;
Servo myservoLeftArm;
Servo myservoRightArm;
Servo myservoHead;

/* ========== Web CTRL（唯一控制來源） ========== */
int CTRL_JX = 0;   // -100..100
int CTRL_JY = 0;   // -100..100

/* ========== WebSocket 廣播工具（避免 String& 錯誤） ========== */
void wsBroadcast(const String& s){
  String msg = s;
  webSocket.broadcastTXT(msg);
}

/* ========== HTML：虛擬搖桿（含死區） ========== */
const char MAIN_page[] PROGMEM = R"=====(<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>OTTO NINJA – 虛擬搖桿</title>
<style>
body{font-family:Arial;background:#f4f6f8;text-align:center;margin:0;padding:16px}
.card{max-width:420px;margin:auto;background:#fff;border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
canvas{background:#ecf0f1;border-radius:50%;touch-action:none}
button{width:140px;height:46px;margin:6px;border:none;border-radius:12px;background:#2d7ef7;color:#fff;font-size:15px}
.green{background:#00a86b}
.gray{background:#6c757d}
.box{margin:8px;padding:6px;border-radius:8px;background:#eee;font-weight:bold}
</style>
</head>
<body>
<div class="card">
<h2>OTTO NINJA<br>虛擬搖桿控制</h2>

<div id="status" class="box">狀態：未連線</div>
<div id="xy" class="box">X:0　Y:0</div>

<canvas id="joy" width="240" height="240"></canvas>

<div>
<button class="gray" onclick="connectWS()">連線</button>
</div>

<div>
<button class="green" onclick="sendCmd('mode_walk')">人形</button>
<button class="green" onclick="sendCmd('mode_roll')">車形</button>
</div>
</div>

<script>
let ws=null;
const statusBox=document.getElementById("status");
const xyBox=document.getElementById("xy");

function connectWS(){
  ws=new WebSocket("ws://"+location.hostname+":81/");
  statusBox.innerText="狀態：連線中…";
  ws.onopen=()=>statusBox.innerText="狀態：已連線";
  ws.onclose=()=>statusBox.innerText="狀態：中斷";
}

function sendCmd(cmd){
  if(ws && ws.readyState===1) ws.send(cmd);
}

/* ===== 虛擬搖桿（含死區） ===== */
const canvas=document.getElementById("joy");
const ctx=canvas.getContext("2d");
const cx=canvas.width/2, cy=canvas.height/2;
const R=canvas.width/2-10;
const knobR=30;
const DEAD_ZONE=20;

let dragging=false, x=0, y=0;

function draw(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc(cx,cy,R,0,Math.PI*2);
  ctx.fillStyle="#dfe6e9";
  ctx.fill();
  ctx.beginPath();
  ctx.arc(cx+x,cy+y,knobR,0,Math.PI*2);
  ctx.fillStyle="#0984e3";
  ctx.fill();
}

function update(px,py){
  let dx=px-cx, dy=py-cy;
  let dist=Math.sqrt(dx*dx+dy*dy);
  if(dist>R){ dx=dx*R/dist; dy=dy*R/dist; }
  x=dx; y=dy;

  let X=Math.round((x/R)*100);
  let Y=Math.round((-y/R)*100);
  let mag=Math.sqrt(X*X+Y*Y);

  if(mag<DEAD_ZONE){ X=0; Y=0; }
  else{
    let scale=(mag-DEAD_ZONE)/(100-DEAD_ZONE);
    X=Math.round((X/mag)*scale*100);
    Y=Math.round((Y/mag)*scale*100);
  }

  xyBox.innerText=`X:${X}　Y:${Y}`;
  if(ws && ws.readyState===1) ws.send(`move ${X} ${Y}`);
  draw();
}

function reset(){
  x=0;y=0;
  xyBox.innerText="X:0　Y:0";
  if(ws && ws.readyState===1) ws.send("move 0 0");
  draw();
}

canvas.addEventListener("pointerdown",e=>{
  dragging=true;
  canvas.setPointerCapture(e.pointerId);
  update(e.offsetX,e.offsetY);
});
canvas.addEventListener("pointermove",e=>{
  if(dragging) update(e.offsetX,e.offsetY);
});
canvas.addEventListener("pointerup",e=>{
  dragging=false;
  reset();
});
canvas.addEventListener("pointercancel",reset);

draw();
</script>
</body>
</html>)=====";

/* ========== 原本動作函式（完全保留） ========== */
void NinjaStop(){
  myservoLeftFoot.detach();
  myservoRightFoot.detach();
  myservoLeftLeg.detach();
  myservoRightLeg.detach();
}

void NinjaSetWalk(){
  myservoLeftLeg.attach(ServoLeftLegPin, 544, 2400);
  myservoRightLeg.attach(ServoRightLegPin, 544, 2400);
  myservoLeftLeg.write(LA0);
  myservoRightLeg.write(RA0);
  delay(300);
  myservoLeftLeg.detach();
  myservoRightLeg.detach();
}

void NinjaSetRoll(){
  myservoLeftLeg.attach(ServoLeftLegPin, 544, 2400);
  myservoRightLeg.attach(ServoRightLegPin, 544, 2400);
  myservoLeftLeg.write(LA1);
  myservoRightLeg.write(RA1);
  delay(300);
  myservoLeftLeg.detach();
  myservoRightLeg.detach();
}

void NinjaWalkStop(){
  myservoLeftFoot.attach(ServoLeftFootPin, 544, 2400);
  myservoRightFoot.attach(ServoRightFootPin, 544, 2400);
  myservoLeftLeg.attach(ServoLeftLegPin, 544, 2400);
  myservoRightLeg.attach(ServoRightLegPin, 544, 2400);
  myservoLeftFoot.write(90);
  myservoRightFoot.write(90);
  myservoLeftLeg.write(LA0);
  myservoRightLeg.write(RA0);
}

void NinjaRollStop(){
  myservoLeftFoot.attach(ServoLeftFootPin, 544, 2400);
  myservoRightFoot.attach(ServoRightFootPin, 544, 2400);
  myservoLeftFoot.write(90);
  myservoRightFoot.write(90);
  myservoLeftFoot.detach();
  myservoRightFoot.detach();
}

/* ========== WebSocket ========= */
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length){
  if(type == WStype_CONNECTED){
    wsBroadcast("MODE:" + String(ModeCounter==0?"WALK":"ROLL"));
    wsBroadcast("ACT:STOP");
    return;
  }
  if(type != WStype_TEXT) return;

  String cmd = String((char*)payload).substring(0, length);

  if(cmd=="mode_walk"){
    ModeCounter=0;
    NinjaSetWalk();
    wsBroadcast("MODE:WALK");
  }
  else if(cmd=="mode_roll"){
    ModeCounter=1;
    NinjaSetRoll();
    wsBroadcast("MODE:ROLL");
  }
  else if(cmd.startsWith("move")){
    int sp1=cmd.indexOf(' ');
    int sp2=cmd.lastIndexOf(' ');
    CTRL_JX=constrain(cmd.substring(sp1+1,sp2).toInt(),-100,100);
    CTRL_JY=constrain(cmd.substring(sp2+1).toInt(),-100,100);
  }
}

/* ========== SETUP ========= */
void setup(){
  Serial.begin(115200);
  WiFi.mode(WIFI_AP);
  WiFi.softAP(ssid,password);

  server.on("/", [](){ server.send_P(200,"text/html",MAIN_page); });
  server.begin();

  webSocket.begin();
  webSocket.onEvent(webSocketEvent);

  NinjaWalkStop();
  delay(300);
  NinjaStop();

  Serial.println(WiFi.softAPIP());
}

/* ========== LOOP ========= */
void loop(){
  server.handleClient();
  webSocket.loop();

  bool idle = (abs(CTRL_JX)<=10 && abs(CTRL_JY)<=10);

  if(ModeCounter==0){
    if(idle){ NinjaWalkStop(); return; }

    if(CTRL_JY>0 || CTRL_JY<0){
      // 完整沿用你原本 WALK 演算法（略微整理，邏輯未改）
      int lt= map(CTRL_JX, 100,-100,200,700);
      int rt= map(CTRL_JX, 100,-100,700,200);
      int I1=250, I2=250+rt, I3=I2+250, I4=I3+lt, I5=I4+50;

      if(millis()>currentmillis1+I5) currentmillis1=millis();

      if(millis()-currentmillis1<=I1){
        myservoLeftLeg.attach(ServoLeftLegPin,544,2400);
        myservoRightLeg.attach(ServoRightLegPin,544,2400);
        myservoRightFoot.attach(ServoRightFootPin,544,2400);
        myservoLeftFoot.attach(ServoLeftFootPin,544,2400);
        myservoLeftLeg.write(LATR);
        myservoRightLeg.write(RATR);
      }
    }
  }

  if(ModeCounter==1){
    if(idle){ NinjaRollStop(); return; }

    myservoLeftFoot.attach(ServoLeftFootPin,544,2400);
    myservoRightFoot.attach(ServoRightFootPin,544,2400);

    int LWS=map(CTRL_JY,100,-100,135,45);
    int RWS=map(CTRL_JY,100,-100,45,135);
    int LWD=map(CTRL_JX,100,-100,45,0);
    int RWD=map(CTRL_JX,100,-100,0,-45);

    myservoLeftFoot.write(LWS+LWD);
    myservoRightFoot.write(RWS+RWD);
  }
}
智慧生活科技專業社群

2026年1月3日星期六

[OTTO Ninja] OTTO忍者機器人把 Web 端「按鈕控制」換成「虛擬搖桿（含死區）」

沒有留言:

張貼留言

2026年1月3日 星期六

[OTTO Ninja] OTTO忍者機器人把 Web 端「按鈕控制」換成「虛擬搖桿（含死區）」

沒有留言:

張貼留言

2026年1月3日星期六
