added web-ui-control
This commit is contained in:
max
parent
ac4425bb42
commit
3b07486e32
36
README.md
36
README.md
|
|
@ -180,4 +180,40 @@ slow backward
|
||||||
|
|
||||||
r 60
|
r 60
|
||||||
|
|
||||||
|
## Web Control
|
||||||
|
|
||||||
|
### Setup
|
||||||
|
|
||||||
|
ln -s /opt/helva-robot/drive/opt/drive-ctl/ /opt/
|
||||||
|
sudo apt update
|
||||||
|
sudo apt install -y python3-venv
|
||||||
|
python3 -m venv /opt/drive-ctl-venv
|
||||||
|
source /opt/drive-ctl-venv/bin/activate
|
||||||
|
pip install fastapi uvicorn pyserial
|
||||||
|
|
||||||
|
|
||||||
|
### Activate Web Control Interface
|
||||||
|
|
||||||
|
sudo ln -s /opt/helva-robot/drive/etc/nginx/sites-available/drive /etc/nginx/sites-enabled/drive
|
||||||
|
sudo nginx -t && sudo systemctl reload nginx
|
||||||
|
|
||||||
|
|
||||||
|
### Systemd Service for Backend
|
||||||
|
|
||||||
|
ln -s /opt/helva-robot/drive/etc/systemd/system/drive-ctl.service /etc/systemd/system/
|
||||||
|
sudo systemctl daemon-reload
|
||||||
|
sudo systemctl enable --now drive-ctl
|
||||||
|
sudo systemctl status drive-ctl --no-pager -l
|
||||||
|
|
||||||
|
Check Serial device is stable, otherwise create a udev rule
|
||||||
|
|
||||||
|
ls -l /dev/ttyACM0 /dev/ttyUSB0
|
||||||
|
dmesg | tail -n 50
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Open Web Control UI
|
||||||
|
|
||||||
|
http://pi-ip/drive/
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
// ===== Arduino UNO: Differential Drive über 2x BTS7960 =====
|
||||||
|
// Serial command format: "L <int> R <int>\n" where int in [-255..255]
|
||||||
|
// Soft-start ramping + watchdog stop
|
||||||
|
|
||||||
|
// --- Left BTS7960 pins ---
|
||||||
|
const uint8_t L_RPWM = 5; // PWM
|
||||||
|
const uint8_t L_LPWM = 6; // PWM
|
||||||
|
const uint8_t L_REN = 7; // enable
|
||||||
|
const uint8_t L_LEN = 8; // enable
|
||||||
|
|
||||||
|
// --- Right BTS7960 pins ---
|
||||||
|
const uint8_t R_RPWM = 9; // PWM
|
||||||
|
const uint8_t R_LPWM = 10; // PWM
|
||||||
|
const uint8_t R_REN = 11; // enable
|
||||||
|
const uint8_t R_LEN = 12; // enable
|
||||||
|
|
||||||
|
// Ramping
|
||||||
|
const uint8_t RAMP_STEP = 6; // speed change per loop (0..255)
|
||||||
|
const uint16_t LOOP_MS = 15; // ramp update interval
|
||||||
|
const uint16_t CMD_TIMEOUT_MS = 300; // stop if no command within x ms
|
||||||
|
|
||||||
|
int targetL = 0, targetR = 0;
|
||||||
|
int currentL = 0, currentR = 0;
|
||||||
|
|
||||||
|
unsigned long lastCmdMs = 0;
|
||||||
|
unsigned long lastLoopMs = 0;
|
||||||
|
|
||||||
|
void setupPins() {
|
||||||
|
pinMode(L_RPWM, OUTPUT); pinMode(L_LPWM, OUTPUT);
|
||||||
|
pinMode(L_REN, OUTPUT); pinMode(L_LEN, OUTPUT);
|
||||||
|
|
||||||
|
pinMode(R_RPWM, OUTPUT); pinMode(R_LPWM, OUTPUT);
|
||||||
|
pinMode(R_REN, OUTPUT); pinMode(R_LEN, OUTPUT);
|
||||||
|
|
||||||
|
digitalWrite(L_REN, HIGH); digitalWrite(L_LEN, HIGH);
|
||||||
|
digitalWrite(R_REN, HIGH); digitalWrite(R_LEN, HIGH);
|
||||||
|
|
||||||
|
analogWrite(L_RPWM, 0); analogWrite(L_LPWM, 0);
|
||||||
|
analogWrite(R_RPWM, 0); analogWrite(R_LPWM, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
static int clamp255(int v) {
|
||||||
|
if (v > 255) return 255;
|
||||||
|
if (v < -255) return -255;
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
|
||||||
|
void driveOne(int speed, uint8_t rpwm, uint8_t lpwm) {
|
||||||
|
speed = clamp255(speed);
|
||||||
|
if (speed > 0) {
|
||||||
|
analogWrite(rpwm, (uint8_t)speed);
|
||||||
|
analogWrite(lpwm, 0);
|
||||||
|
} else if (speed < 0) {
|
||||||
|
analogWrite(rpwm, 0);
|
||||||
|
analogWrite(lpwm, (uint8_t)(-speed));
|
||||||
|
} else {
|
||||||
|
analogWrite(rpwm, 0);
|
||||||
|
analogWrite(lpwm, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static int rampTowards(int current, int target, uint8_t step) {
|
||||||
|
if (current < target) {
|
||||||
|
int n = current + step;
|
||||||
|
return (n > target) ? target : n;
|
||||||
|
}
|
||||||
|
if (current > target) {
|
||||||
|
int n = current - step;
|
||||||
|
return (n < target) ? target : n;
|
||||||
|
}
|
||||||
|
return current;
|
||||||
|
}
|
||||||
|
|
||||||
|
bool parseLine(const String& line, int &outL, int &outR) {
|
||||||
|
// expected: "L <int> R <int>"
|
||||||
|
int idxL = line.indexOf('L');
|
||||||
|
int idxR = line.indexOf('R');
|
||||||
|
if (idxL < 0 || idxR < 0) return false;
|
||||||
|
|
||||||
|
// crude parse; robust enough for our simple format
|
||||||
|
String partL = line.substring(idxL + 1, idxR);
|
||||||
|
String partR = line.substring(idxR + 1);
|
||||||
|
|
||||||
|
partL.trim();
|
||||||
|
partR.trim();
|
||||||
|
|
||||||
|
outL = partL.toInt();
|
||||||
|
outR = partR.toInt();
|
||||||
|
outL = clamp255(outL);
|
||||||
|
outR = clamp255(outR);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
void setup() {
|
||||||
|
Serial.begin(115200);
|
||||||
|
setupPins();
|
||||||
|
lastCmdMs = millis();
|
||||||
|
lastLoopMs = millis();
|
||||||
|
}
|
||||||
|
|
||||||
|
void loop() {
|
||||||
|
// --- read serial lines ---
|
||||||
|
while (Serial.available()) {
|
||||||
|
String line = Serial.readStringUntil('\n');
|
||||||
|
line.trim();
|
||||||
|
if (line.length() == 0) continue;
|
||||||
|
|
||||||
|
int l, r;
|
||||||
|
if (parseLine(line, l, r)) {
|
||||||
|
targetL = l;
|
||||||
|
targetR = r;
|
||||||
|
lastCmdMs = millis();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- watchdog stop ---
|
||||||
|
if (millis() - lastCmdMs > CMD_TIMEOUT_MS) {
|
||||||
|
targetL = 0;
|
||||||
|
targetR = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- ramp update ---
|
||||||
|
if (millis() - lastLoopMs >= LOOP_MS) {
|
||||||
|
lastLoopMs = millis();
|
||||||
|
|
||||||
|
currentL = rampTowards(currentL, targetL, RAMP_STEP);
|
||||||
|
currentR = rampTowards(currentR, targetR, RAMP_STEP);
|
||||||
|
|
||||||
|
driveOne(currentL, L_RPWM, L_LPWM);
|
||||||
|
driveOne(currentR, R_RPWM, R_LPWM);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
|
||||||
|
location /drive/ {
|
||||||
|
alias /opt/helva-robot/drive/var/www/drive/;
|
||||||
|
try_files $uri $uri/ /drive/index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /drive-ws {
|
||||||
|
proxy_pass http://127.0.0.1:8002/ws;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection "Upgrade";
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /drive-health {
|
||||||
|
proxy_pass http://127.0.0.1:8002/health;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
[Unit]
|
||||||
|
Description=Robot Drive Controller (FastAPI -> Serial)
|
||||||
|
After=network.target
|
||||||
|
|
||||||
|
[Service]
|
||||||
|
WorkingDirectory=/opt/drive-ctl
|
||||||
|
ExecStart=/opt/drive-ctl-venv/bin/uvicorn server:app --host 127.0.0.1 --port 8002 --app-dir /opt/drive-ctl
|
||||||
|
Restart=always
|
||||||
|
RestartSec=1
|
||||||
|
|
||||||
|
[Install]
|
||||||
|
WantedBy=multi-user.target
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -0,0 +1,65 @@
|
||||||
|
import asyncio
|
||||||
|
import json
|
||||||
|
import time
|
||||||
|
import serial
|
||||||
|
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
|
||||||
|
from fastapi.responses import HTMLResponse
|
||||||
|
|
||||||
|
SERIAL_PORT = "/dev/ttyACM0" # ggf. /dev/ttyUSB0
|
||||||
|
BAUD = 115200
|
||||||
|
|
||||||
|
# Safety: if websocket stops sending, we also stop.
|
||||||
|
STOP_AFTER_SEC = 0.35
|
||||||
|
|
||||||
|
app = FastAPI()
|
||||||
|
|
||||||
|
ser = serial.Serial(SERIAL_PORT, BAUD, timeout=0)
|
||||||
|
|
||||||
|
last_msg_ts = 0.0
|
||||||
|
|
||||||
|
def clamp255(v: int) -> int:
|
||||||
|
return max(-255, min(255, int(v)))
|
||||||
|
|
||||||
|
def send_lr(l: int, r: int):
|
||||||
|
l = clamp255(l)
|
||||||
|
r = clamp255(r)
|
||||||
|
line = f"L {l} R {r}\n".encode("ascii")
|
||||||
|
ser.write(line)
|
||||||
|
|
||||||
|
@app.get("/health")
|
||||||
|
def health():
|
||||||
|
return {"ok": True, "serial": SERIAL_PORT}
|
||||||
|
|
||||||
|
@app.websocket("/ws")
|
||||||
|
async def ws(websocket: WebSocket):
|
||||||
|
global last_msg_ts
|
||||||
|
await websocket.accept()
|
||||||
|
|
||||||
|
async def watchdog():
|
||||||
|
while True:
|
||||||
|
await asyncio.sleep(0.05)
|
||||||
|
if time.time() - last_msg_ts > STOP_AFTER_SEC:
|
||||||
|
send_lr(0, 0)
|
||||||
|
|
||||||
|
wd_task = asyncio.create_task(watchdog())
|
||||||
|
|
||||||
|
try:
|
||||||
|
while True:
|
||||||
|
msg = await websocket.receive_text()
|
||||||
|
last_msg_ts = time.time()
|
||||||
|
|
||||||
|
try:
|
||||||
|
data = json.loads(msg)
|
||||||
|
l = clamp255(data.get("l", 0))
|
||||||
|
r = clamp255(data.get("r", 0))
|
||||||
|
send_lr(l, r)
|
||||||
|
except Exception:
|
||||||
|
# On parse errors: stop
|
||||||
|
send_lr(0, 0)
|
||||||
|
|
||||||
|
await websocket.send_text("ok")
|
||||||
|
except WebSocketDisconnect:
|
||||||
|
send_lr(0, 0)
|
||||||
|
finally:
|
||||||
|
wd_task.cancel()
|
||||||
|
|
||||||
|
|
@ -0,0 +1,315 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
|
<title>Robot Dual Stick</title>
|
||||||
|
<style>
|
||||||
|
html, body { height: 100%; margin: 0; background: #0b0f14; color: #e8eef6; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
|
||||||
|
.wrap { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 14px; gap: 12px; }
|
||||||
|
.top { display:flex; align-items:center; justify-content:space-between; gap: 10px; }
|
||||||
|
.badge { padding: 8px 12px; border-radius: 999px; background: #152033; font-weight: 700; }
|
||||||
|
.status { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
|
||||||
|
|
||||||
|
.panel { background:#101826; border-radius: 18px; padding: 12px; }
|
||||||
|
.sticks {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
touch-action: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.stickBox { width: min(46vw, 340px); aspect-ratio: 1/1; }
|
||||||
|
canvas { width: 100%; height: 100%; background:#0f1726; border-radius: 22px; }
|
||||||
|
|
||||||
|
.row { display:flex; gap: 12px; align-items:center; justify-content:space-between; flex-wrap: wrap; }
|
||||||
|
.btn { padding: 14px 16px; border-radius: 14px; border: 0; background:#1e2b44; color:#fff; font-weight: 800; font-size: 16px; }
|
||||||
|
.btn:active { transform: scale(0.98); }
|
||||||
|
.btnStop { background:#7a1f2a; }
|
||||||
|
|
||||||
|
input[type="range"]{ width: 220px; }
|
||||||
|
.small { opacity: 0.85; font-size: 14px; }
|
||||||
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
|
||||||
|
.hint { margin-top: 8px; opacity: 0.85; font-size: 14px; text-align: center; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="top">
|
||||||
|
<div class="badge">🎮 Dual Stick Drive</div>
|
||||||
|
<div class="badge status" id="status">offline</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="sticks">
|
||||||
|
<div class="stickBox">
|
||||||
|
<canvas id="leftStick" width="600" height="600"></canvas>
|
||||||
|
<div class="hint">Links: Gas (↑/↓)</div>
|
||||||
|
</div>
|
||||||
|
<div class="stickBox">
|
||||||
|
<canvas id="rightStick" width="600" height="600"></canvas>
|
||||||
|
<div class="hint">Rechts: Lenken (←/→)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel row">
|
||||||
|
<div>
|
||||||
|
<div style="font-weight:900">Max Speed: <span id="maxv">180</span></div>
|
||||||
|
<input id="max" type="range" min="60" max="255" value="180">
|
||||||
|
<div class="small mono" id="readout">T 0 | Turn 0 → L 0 | R 0</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; gap:10px">
|
||||||
|
<button class="btn" id="btnConnect">Connect</button>
|
||||||
|
<button class="btn btnStop" id="btnStop">STOP</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="small" style="text-align:center; opacity:0.8">
|
||||||
|
Loslassen = STOP. Wenn Verbindung/Tab weg: STOP (Watchdog).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(() => {
|
||||||
|
const statusEl = document.getElementById('status');
|
||||||
|
const maxEl = document.getElementById('max');
|
||||||
|
const maxvEl = document.getElementById('maxv');
|
||||||
|
const readoutEl = document.getElementById('readout');
|
||||||
|
const btnConnect = document.getElementById('btnConnect');
|
||||||
|
const btnStop = document.getElementById('btnStop');
|
||||||
|
|
||||||
|
const cL = document.getElementById('leftStick');
|
||||||
|
const cR = document.getElementById('rightStick');
|
||||||
|
const gL = cL.getContext('2d');
|
||||||
|
const gR = cR.getContext('2d');
|
||||||
|
|
||||||
|
let ws = null;
|
||||||
|
let connected = false;
|
||||||
|
|
||||||
|
// Stick states (normalized)
|
||||||
|
// Left stick: throttle in [-1..1] (up = +1)
|
||||||
|
// Right stick: turn in [-1..1] (right = +1)
|
||||||
|
let throttle = 0;
|
||||||
|
let turn = 0;
|
||||||
|
|
||||||
|
// For touch handling
|
||||||
|
function makeStick(canvas, mode /* 'throttle' or 'turn' */) {
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const cx = canvas.width / 2;
|
||||||
|
const cy = canvas.height / 2;
|
||||||
|
const radius = canvas.width * 0.32;
|
||||||
|
|
||||||
|
let active = false;
|
||||||
|
let px = cx, py = cy;
|
||||||
|
|
||||||
|
function clamp(v, a, b){ return Math.max(a, Math.min(b, v)); }
|
||||||
|
|
||||||
|
function pointerPos(evt){
|
||||||
|
const r = canvas.getBoundingClientRect();
|
||||||
|
return {
|
||||||
|
x: (evt.clientX - r.left) * (canvas.width / r.width),
|
||||||
|
y: (evt.clientY - r.top) * (canvas.height / r.height),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function apply(nx, ny) {
|
||||||
|
// nx, ny in [-1..1] where ny is +down
|
||||||
|
if (mode === 'throttle') {
|
||||||
|
// Up should be +throttle, so invert ny
|
||||||
|
throttle = clamp(-ny, -1, 1);
|
||||||
|
} else {
|
||||||
|
turn = clamp(nx, -1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopSelf() {
|
||||||
|
active = false;
|
||||||
|
px = cx; py = cy;
|
||||||
|
if (mode === 'throttle') throttle = 0;
|
||||||
|
if (mode === 'turn') turn = 0;
|
||||||
|
draw();
|
||||||
|
updateAndSend(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDown(evt){
|
||||||
|
evt.preventDefault();
|
||||||
|
active = true;
|
||||||
|
canvas.setPointerCapture(evt.pointerId);
|
||||||
|
onMove(evt);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMove(evt){
|
||||||
|
if (!active) return;
|
||||||
|
evt.preventDefault();
|
||||||
|
const p = pointerPos(evt);
|
||||||
|
const dx = p.x - cx;
|
||||||
|
const dy = p.y - cy;
|
||||||
|
const dist = Math.hypot(dx, dy);
|
||||||
|
const k = dist > radius ? (radius / dist) : 1;
|
||||||
|
|
||||||
|
px = cx + dx * k;
|
||||||
|
py = cy + dy * k;
|
||||||
|
|
||||||
|
const nx = clamp((px - cx) / radius, -1, 1);
|
||||||
|
const ny = clamp((py - cy) / radius, -1, 1);
|
||||||
|
|
||||||
|
apply(nx, ny);
|
||||||
|
draw();
|
||||||
|
updateAndSend(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onUp(evt){
|
||||||
|
evt.preventDefault();
|
||||||
|
stopSelf();
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener('pointerdown', onDown);
|
||||||
|
canvas.addEventListener('pointermove', onMove);
|
||||||
|
canvas.addEventListener('pointerup', onUp);
|
||||||
|
canvas.addEventListener('pointercancel', onUp);
|
||||||
|
canvas.addEventListener('contextmenu', e => e.preventDefault());
|
||||||
|
|
||||||
|
function drawBase() {
|
||||||
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||||
|
|
||||||
|
// Outer circle
|
||||||
|
ctx.lineWidth = 10;
|
||||||
|
ctx.strokeStyle = "#24324d";
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(cx, cy, radius, 0, Math.PI*2);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Crosshair
|
||||||
|
ctx.lineWidth = 4;
|
||||||
|
ctx.strokeStyle = "#1c263b";
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(cx, cy - radius); ctx.lineTo(cx, cy + radius);
|
||||||
|
ctx.moveTo(cx - radius, cy); ctx.lineTo(cx + radius, cy);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Mode hint line
|
||||||
|
ctx.lineWidth = 6;
|
||||||
|
ctx.strokeStyle = "#152033";
|
||||||
|
ctx.beginPath();
|
||||||
|
if (mode === 'throttle') {
|
||||||
|
ctx.moveTo(cx, cy - radius); ctx.lineTo(cx, cy + radius);
|
||||||
|
} else {
|
||||||
|
ctx.moveTo(cx - radius, cy); ctx.lineTo(cx + radius, cy);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawKnob() {
|
||||||
|
// Knob
|
||||||
|
ctx.fillStyle = "#3b82f6";
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(px, py, canvas.width*0.065, 0, Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Inner dot
|
||||||
|
ctx.fillStyle = "#0b0f14";
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(px, py, canvas.width*0.03, 0, Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(){
|
||||||
|
drawBase();
|
||||||
|
drawKnob();
|
||||||
|
}
|
||||||
|
|
||||||
|
draw();
|
||||||
|
return { draw, stopSelf };
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(txt, ok=false){
|
||||||
|
statusEl.textContent = txt;
|
||||||
|
statusEl.style.background = ok ? "#16331d" : "#3a1a1a";
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp(v, a, b){ return Math.max(a, Math.min(b, v)); }
|
||||||
|
|
||||||
|
// Mix throttle + turn to left/right [-1..1]
|
||||||
|
function mix(throttle, turn) {
|
||||||
|
let l = throttle + turn;
|
||||||
|
let r = throttle - turn;
|
||||||
|
|
||||||
|
// normalize to keep within [-1..1]
|
||||||
|
const m = Math.max(1, Math.abs(l), Math.abs(r));
|
||||||
|
l /= m; r /= m;
|
||||||
|
return { l, r };
|
||||||
|
}
|
||||||
|
|
||||||
|
let lastSend = 0;
|
||||||
|
let lastL = 0, lastR = 0;
|
||||||
|
|
||||||
|
function sendLR(l, r, force=false){
|
||||||
|
const now = performance.now();
|
||||||
|
if (!connected) return;
|
||||||
|
if (!force && (now - lastSend < 35)) return; // ~28Hz
|
||||||
|
lastSend = now;
|
||||||
|
|
||||||
|
try { ws.send(JSON.stringify({l, r})); } catch(e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAndSend(force) {
|
||||||
|
const maxSpeed = parseInt(maxEl.value, 10);
|
||||||
|
const m = mix(throttle, turn);
|
||||||
|
|
||||||
|
const L = Math.round(clamp(m.l, -1, 1) * maxSpeed);
|
||||||
|
const R = Math.round(clamp(m.r, -1, 1) * maxSpeed);
|
||||||
|
|
||||||
|
lastL = L; lastR = R;
|
||||||
|
readoutEl.textContent = `T ${throttle.toFixed(2)} | Turn ${turn.toFixed(2)} → L ${L} | R ${R}`;
|
||||||
|
|
||||||
|
sendLR(L, R, force);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hardStop() {
|
||||||
|
throttle = 0; turn = 0;
|
||||||
|
updateAndSend(true);
|
||||||
|
left.stopSelf();
|
||||||
|
right.stopSelf();
|
||||||
|
}
|
||||||
|
|
||||||
|
function connect(){
|
||||||
|
if (connected) return;
|
||||||
|
const proto = (location.protocol === "https:") ? "wss" : "ws";
|
||||||
|
const url = `${proto}://${location.host}/drive-ws`;
|
||||||
|
ws = new WebSocket(url);
|
||||||
|
|
||||||
|
ws.onopen = () => { connected = true; setStatus("online", true); updateAndSend(true); };
|
||||||
|
ws.onclose = () => { connected = false; setStatus("offline", false); hardStop(); };
|
||||||
|
ws.onerror = () => { connected = false; setStatus("error", false); hardStop(); };
|
||||||
|
ws.onmessage = () => {};
|
||||||
|
}
|
||||||
|
|
||||||
|
btnConnect.addEventListener('click', connect);
|
||||||
|
btnStop.addEventListener('click', hardStop);
|
||||||
|
|
||||||
|
maxEl.addEventListener('input', () => {
|
||||||
|
maxvEl.textContent = maxEl.value;
|
||||||
|
updateAndSend(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create sticks
|
||||||
|
const left = makeStick(cL, 'throttle');
|
||||||
|
const right = makeStick(cR, 'turn');
|
||||||
|
|
||||||
|
// Auto-connect
|
||||||
|
connect();
|
||||||
|
setStatus("connecting...", false);
|
||||||
|
|
||||||
|
// Safety: stop when page hidden
|
||||||
|
document.addEventListener("visibilitychange", () => {
|
||||||
|
if (document.hidden) hardStop();
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -30,5 +30,7 @@ server {
|
||||||
|
|
||||||
add_header Cache-Control no-cache;
|
add_header Cache-Control no-cache;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
include /opt/helva-robot/drive/etc/nginx/snippets/drive.conf;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue