|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<style>
|
|
:root {
|
|
--translucent-high: rgba(255, 255, 255, 0.8);
|
|
--translucent-low: rgba(255, 255, 255, 0.4);
|
|
--padding: 0.5rem;
|
|
--padding-half: calc(var(--padding) / 2);
|
|
--border-size: 0.2rem;
|
|
--max-width: min(calc(100dvw - 1rem), 700px);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background-color: rgb(247, 234, 219);
|
|
height: 100dvh;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
main {
|
|
padding: var(--padding);
|
|
height: 100%;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.touch-controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--padding);
|
|
padding: var(--padding);
|
|
|
|
button {
|
|
height: 5.5rem;
|
|
font-size: 3rem;
|
|
border-radius: var(--padding);
|
|
}
|
|
}
|
|
|
|
button {
|
|
border: solid var(--border-size) var(--translucent-high);
|
|
background: var(--translucent-high);
|
|
border-radius: var(--padding-half);
|
|
transition: all 0.2s ease;
|
|
height: 100%;
|
|
font-size: 110%;
|
|
|
|
&:active {
|
|
border-color: var(--translucent-low);
|
|
background-color: var(--translucent-low);
|
|
}
|
|
}
|
|
|
|
.input-controls,
|
|
.settings {
|
|
padding: var(--padding);
|
|
display: flex;
|
|
gap: var(--padding);
|
|
border: solid var(--border-size) var(--translucent-high);
|
|
border-radius: var(--padding-half);
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.inputs {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
|
|
width: 100%;
|
|
}
|
|
|
|
.infos {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
|
|
flex-wrap: wrap;
|
|
gap: var(--padding);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
label {
|
|
display: grid;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
input {
|
|
border: solid var(--border-size) var(--translucent-high);
|
|
background: var(--translucent-low);
|
|
border-radius: var(--padding-half);
|
|
transition: all 0.2s ease;
|
|
height: 100%;
|
|
padding: var(--padding-half);
|
|
font-family: 'Courier New', Courier, monospace;
|
|
outline: none;
|
|
|
|
&:focus {
|
|
background-color: var(--translucent-high);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
var ipInput = "";
|
|
var valueRot = "";
|
|
var valueLength ="";
|
|
var keyMap ={};
|
|
|
|
function forward() {
|
|
const url = keyMap[38];
|
|
console.log(url);
|
|
sendCommand(url)
|
|
}
|
|
function backward() {
|
|
const url = keyMap[40];
|
|
console.log(url);
|
|
sendCommand(url)
|
|
}
|
|
function right() {
|
|
const url = keyMap[39];
|
|
console.log(url);
|
|
sendCommand(url)
|
|
}
|
|
function left() {
|
|
const url = keyMap[37];
|
|
console.log(url);
|
|
sendCommand(url)
|
|
}
|
|
function stop() {
|
|
const url = keyMap[32];
|
|
console.log(url);
|
|
sendCommand(url)
|
|
}
|
|
window.onload = function(){
|
|
storeInput();
|
|
}
|
|
|
|
document.addEventListener('keydown',(event) =>{
|
|
const key = event.keyCode;
|
|
const url = keyMap[key];
|
|
console.log(url);
|
|
sendCommand(url)
|
|
});
|
|
|
|
function sendCommand(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>
|
|
<title>Contrôle du robot</title>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<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>
|
|
<section class="infos">
|
|
<div>
|
|
<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>
|
|
</div>
|
|
</section>
|
|
<section class="inputs">
|
|
<form >
|
|
<label>
|
|
<span>Adresse IP du robot</span>
|
|
<input
|
|
type="text"
|
|
name="ip-address"
|
|
id = "ip"
|
|
title="Adresse IP du robot (ex: 192.168.0.1)"
|
|
pattern="\d+\.\d+\.\d+\.\d+(:\d+)?"
|
|
placeholder="192.168.0.0"
|
|
onchange="storeInput()"
|
|
oninput="storeInput()"
|
|
required
|
|
/>
|
|
</label>
|
|
</form>
|
|
<form>
|
|
<label>
|
|
<span>Rotation en degrés</span>
|
|
<input
|
|
id="valueRot"
|
|
type="number"
|
|
title="Rotation en degrés (-360° à 360°)"
|
|
min="-360"
|
|
max="360"
|
|
step="1"
|
|
placeholder="90"
|
|
onchange="storeInput()"
|
|
oninput="storeInput()"
|
|
/>
|
|
</label>
|
|
</form>
|
|
<form>
|
|
<label>
|
|
<span>Distance en cm</span>
|
|
<input
|
|
id="valueLength"
|
|
type="number"
|
|
title="Distance en cm (-2^31 à 2^31)"
|
|
min="-2147483647"
|
|
step="1"
|
|
max="2147483647"
|
|
placeholder="10"
|
|
onchange="storeInput()"
|
|
oninput="storeInput()"
|
|
/>
|
|
</label>
|
|
</form>
|
|
</section>
|
|
<section>
|
|
<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, ou alors utilisez les flêches ci-dessous !
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section class="touch-controls">
|
|
<span class="placeholder"></span>
|
|
<button title="Avancer" id="forward" onclick="forward()">
|
|
⬆️
|
|
</button>
|
|
<span class="placeholder"></span>
|
|
<button
|
|
title="Tourner à gauche"
|
|
id="left"
|
|
onclick="left()"
|
|
>
|
|
⬅️
|
|
</button>
|
|
<button title="Arrêter" id="stop" onclick="stop()">
|
|
⏸️
|
|
</button>
|
|
<button
|
|
title="Tourner à droite"
|
|
id="right"
|
|
onclick="right()"
|
|
>
|
|
➡️
|
|
</button>
|
|
<span class="placeholder"></span>
|
|
<button title="Reculer" id="backward" onclick="backward()">
|
|
⬇️
|
|
</button>
|
|
<span class="placeholder"></span>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|
