Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Valetudo manual control frontend
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<style>
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;
}
</style>
<div class="container">
<a></a>
<a d-action="move" d-command="forward">⬆️</a>
<a></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></a>
<a d-action="move" d-command="backward">⬇️</a>
<a></a>
</div>
<script>
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 = e.target;
if (target && target.nodeName == "A") {
e.preventDefault();
const action = target.getAttribute('d-action');
switch (action) {
case 'move':
const command = target.getAttribute('d-command');
moveControl(action, command);
break;
case 'enable':
case 'disable':
moveControl(action);
target.classList.add('hidden');
const other = action === 'enable' ? 'disable' : 'enable';
document.querySelector(`a[d-action="${other}"]`).classList.remove('hidden');
}
};
});
</script>
</body>
</html>
server {
listen 80;
server_name some.name;
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