fork_mon_premier_robot/client/index.html

99 lines
2.3 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
2024-06-25 11:19:53 +02:00
<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 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 = {}
2024-06-25 11:19:53 +02:00
window.onload = function () {
storeInput()
}
2024-06-25 11:19:53 +02:00
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()
})
2024-06-25 11:19:53 +02:00
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>
2024-06-25 11:19:53 +02:00
</html>