refactor(client): ♻️ update head viewport and format document

This commit is contained in:
Julien Oculi 2024-06-25 11:21:25 +02:00
parent 2844c9b1e1
commit e7ebd17334

View file

@ -1,72 +1,98 @@
<!doctype html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contrôle du robot</title> <title>Contrôle du robot</title>
</head> </head>
<body> <body>
<h1> <h1>Contrôle du robot sans fils</h1>
Contrôle du robot sans fils
</h1>
<p> <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. 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> </p>
<h2> <h2>Paramètres de contrôle</h2>
Paramètres de contrôle
</h2>
<p> <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é. 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> </p>
<form id="form"> <form id="form">
<label for="ip">Adresse IP du robot</label> <label for="ip">Adresse IP du robot</label>
<input type="text" id="ip" placeholder="192.168.0.0" oninput="storeInput()"><br> <input
type="text"
id="ip"
placeholder="192.168.0.0"
oninput="storeInput()"
/><br />
<label for="valueRot">Rotation en degrés</label> <label for="valueRot">Rotation en degrés</label>
<input type="text" id="valueRot" placeholder="90" oninput="storeInput()"><br> <input
type="text"
id="valueRot"
placeholder="90"
oninput="storeInput()"
/><br />
<label for="valueLength">Longueur en cm</label> <label for="valueLength">Longueur en cm</label>
<input type="text" id="valueLength" placeholder="10" oninput="storeInput()"> <input
type="text"
id="valueLength"
placeholder="10"
oninput="storeInput()"
/>
</form> </form>
<h2> <h2>Contrôle</h2>
Contrôle
</h2>
<p> <p>
Amusez vous ! Pour contrôler le robot, utilisez les flèches directionnelles pour le diriger et la barre espace pour le stopper. Amusez vous ! Pour contrôler le robot, utilisez les flèches
directionnelles pour le diriger et la barre espace pour le stopper.
</p> </p>
</body> </body>
<script> <script>
var ipInput = ""; var ipInput = ''
var valueRot = ""; var valueRot = ''
var valueLength =""; var valueLength = ''
var keyMap ={}; var keyMap = {}
window.onload = function(){ window.onload = function () {
storeInput(); storeInput()
} }
document.addEventListener('keydown',(event) =>{ document.addEventListener('keydown', (event) => {
const key = event.keyCode; const key = event.keyCode
const url = keyMap[key]; const url = keyMap[key]
console.log(url); console.log(url)
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest()
xhr.open('GET',url); xhr.open('GET', url)
xhr.onload = () => { xhr.onload = () => {
const response = xhr.responseText; const response = xhr.responseText
console.log(response); console.log(response)
}; }
xhr.send(); xhr.send()
}); })
function storeInput() { function storeInput() {
ipInput = document.getElementById("ip").value; ipInput = document.getElementById('ip').value
valueRot = document.getElementById("valueRot").value; valueRot = document.getElementById('valueRot').value
valueLength = document.getElementById("valueLength").value; valueLength = document.getElementById('valueLength').value
keyMap={ keyMap = {
38: 'http://'+ipInput+'/get?command=forward&value='+valueLength, 38:
40: 'http://'+ipInput+'/get?command=backward&value='+valueLength, 'http://' +
37: 'http://'+ipInput+'/get?command=left&value='+valueRot, ipInput +
39: 'http://'+ipInput+'/get?command=right&value='+valueRot, '/get?command=forward&value=' +
32: 'http://'+ipInput+'/get?command=stop', 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> </script>
</html> </html>