<!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>
var ipInput = ''
var valueRot = ''
var valueLength = ''
var keyMap = {}
window.onload = function () {
storeInput()
}
document.addEventListener('keydown', (event) => {
const key = event.keyCode
const url = keyMap[key]
console.log(url)
const xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.onload = () => {
const response = xhr.responseText
console.log(response)
}
xhr.send()
})
function storeInput() {
ipInput = document.getElementById('ip').value
valueRot = document.getElementById('valueRot').value
valueLength = document.getElementById('valueLength').value
keyMap = {
38:
'http://' +
ipInput +
'/get?command=forward&value=' +
valueLength,
40:
'http://' +
ipInput +
'/get?command=backward&value=' +
valueLength,
37: 'http://' + ipInput + '/get?command=left&value=' + valueRot,
39:
'http://' +
ipInput +
'/get?command=right&value=' +
valueRot,
32: 'http://' + ipInput + '/get?command=stop',
}
}
</script>
</html>