<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<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 id="form">
<label for="ip">Adresse IP du robot</label>
<input type="text" id="ip" placeholder="192.168.0.0" oninput="storeInput()"><br>
<label for="valueRot">Rotation en degrés</label>
<input type="text" id="valueRot" placeholder="90" oninput="storeInput()"><br>
<label for="valueLength">Longueur en cm</label>
<input type="text" id="valueLength" placeholder="10" oninput="storeInput()">
</form>
<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>