<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contrôle du robot</title>
</head>
<body>
<h1>Contrôle du robot sans fils</h1>
<p>
Cette page permet de contrôler le robot depuis un PC portable
connecté au WiFi du robot. Elle est destinée aux personnes n'ayant
pas de smartphone.
</p>
<h2>Paramètres de contrôle</h2>
<p>
Ici vous pourrez paramétrer les contrôles du robot, rentrer son
adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle
de rotation désiré.
</p>
<form class="settings" onsubmit="setEndpoint()">
<label>
<span>Adresse IP du robot</span>
<input
type="text"
title="Adresse IP du robot (ex: 192.168.0.1)"
pattern="\d+\.\d+\.\d+\.\d+"
placeholder="192.168.0.0"
required
/>
</label>
<button>Se connecter</button>
</form>
<div class="controls">
<label>
<span>Rotation en degrés</span>
<input
type="number"
title="Rotation en degrés (0° - 360°)"
min="0"
max="360"
step="1"
placeholder="90"
onchange="rotate()"
/>
</label>
<label>
<span>Longueur en cm</span>
<input
type="number"
title="Longueur en cm (0 - 2^31)"
min="-2147483647"
step="1"
max="2147483647"
placeholder="10"
onchange="move()"
/>
</label>
</div>
<h2>Contrôle</h2>
<p>
Amusez vous ! Pour contrôler le robot, utilisez les flèches
directionnelles pour le diriger et la barre espace pour le stopper.
</p>
</body>
<script type="module">
/**
* A command string.
* @typedef {('forward' | 'backward' | 'left' | 'right' | 'stop')} Command
*/
/**
* Send command to the robot.
*
* @param {string} endpoint Address IP of the robot
* @param {Command} command Command to send.
* @param {number} value Value of the command if needed.
*/
async function sendCommand(endpoint, command, value) {
const response = await fetch(
`http://${endpoint}/get?command=${command}&value=${value}`
)
const text = await response.text()
console.log(text)
}
document.addEventListener('keydown', (event) => {
const key = event.keyCode
const { command, value } = keyMap[key]
sendCommand(endpoint, command, value)
})
function storeInput() {
ipInput = document.getElementById('ip').value
valueRot = document.getElementById('valueRot').value
valueLength = document.getElementById('valueLength').value
keyMap = {
38: { command: 'forward', value: valueLength },
40: { command: 'backward', value: valueLength },
37: { command: 'left', value: valueRot },
39: { command: 'right', value: valueRot },
32: { command: 'stop', value: 0 },
}
}
</script>
</html>