Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Valetudo manual control frontend
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Manual Control</title>
div.container {
display: grid;
grid-template-columns: 50px 50px 50px;
user-select: none;
gap: 5px 5px;
grid-auto-flow: row;
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
a {
display: inline-block;
font-size: 50px;
width: 50px;
height: 50px;
.hidden {
display: none;
<div class="container">
<a d-action="move" d-command="forward">⬆️</a>
<a d-action="move" d-command="rotate_counterclockwise">🔄</a>
<a d-action="enable">▶️</a>
<a d-action="disable" class="hidden">⏸️</a>
<a d-action="move" d-command="rotate_clockwise">🔃</a>
<a d-action="move" d-command="backward">⬇️</a>
const url = '/api/v2/robot/capabilities/ManualControlCapability';
let moveControl = async function (action, movementCommand = null) {
let body = { action };
if (movementCommand) {
body.movementCommand = movementCommand;
const response = await fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
body: JSON.stringify(body),
document.body.addEventListener("click", function (e) {
const target =;
if (target && target.nodeName == "A") {
const action = target.getAttribute('d-action');
switch (action) {
case 'move':
const command = target.getAttribute('d-command');
moveControl(action, command);
case 'enable':
case 'disable':
const other = action === 'enable' ? 'disable' : 'enable';
server {
listen 80;
location = /manual.html {
root /var/www/home;
location / {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_pass http://robot.ip:80;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment