stek29/vacuum_manual_control.html

## vacuum_manual_control.html
<!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>

## x_nginx.conf
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;
  }
}
	<!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;
	}
	}