marin.gerard/moniks_bot
1
0
Fork 0
forked from julien.oculi/fork_mon_premier_robot
Code Pull requests Activity

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

Browse source
This commit is contained in:
Julien Oculi 2024-06-25 11:21:25 +02:00
parent 2844c9b1e1
commit e7ebd17334
1 changed files with 93 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
client/index.html
View file

@ -1,70 +1,96 @@
<!doctype html>
<!DOCTYPE html>
<html lang="fr">
<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>
</head>
<body>
<h1>
Contrôle du robot sans fils
</h1>
<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.
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>
<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é.
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>
<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>
<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()">
<input
type="text"
id="valueLength"
placeholder="10"
oninput="storeInput()"
/>
</form>
<h2>
Contrôle
</h2>
<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.
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 ={};
var ipInput = ''
var valueRot = ''
var valueLength = ''
var keyMap = {}
window.onload = function () {
storeInput();
storeInput()
}
document.addEventListener('keydown', (event) => {
const key = event.keyCode;
const url = keyMap[key];
console.log(url);
const xhr = new XMLHttpRequest();
xhr.open('GET',url);
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();
});
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;
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,
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,
39:
'http://' +
ipInput +
'/get?command=right&value=' +
valueRot,
32: 'http://' + ipInput + '/get?command=stop',
}
}