moniks_bot/client/index.html

110 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script type="module" src="app.js"></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>
<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.
</p>
</div>
</section>
<section class="inputs">
<form class="settings" id="settings">
<label>
<span>Adresse IP du robot</span>
<input
type="text"
name="ip-address"
title="Adresse IP du robot (ex: 192.168.0.1)"
pattern="\d+\.\d+\.\d+\.\d+(:\d+)?"
placeholder="192.168.0.0"
required
/>
</label>
<button>Se connecter</button>
</form>
<div class="input-controls">
<label>
<span>Rotation en degrés</span>
<input
id="rotate-input"
type="number"
title="Rotation en degrés (-360° à 360°)"
min="-360"
max="360"
step="1"
placeholder="90"
/>
</label>
<label>
<span>Distance en cm</span>
<input
id="move-input"
type="number"
title="Distance en cm (-2^31 à 2^31)"
min="-2147483647"
step="1"
max="2147483647"
placeholder="10"
/>
</label>
</div>
</section>
<section class="touch-controls" id="touch-controls">
<span class="placeholder"></span>
<button title="Avancer" data-command="forward" data-value="2">
⬆️
</button>
<span class="placeholder"></span>
<button
title="Tourner à gauche"
data-command="left"
data-value="5"
>
⬅️
</button>
<button title="Arrêter" data-command="stop" data-value="0">
⏸️
</button>
<button
title="Tourner à droite"
data-command="right"
data-value="5"
>
➡️
</button>
<span class="placeholder"></span>
<button title="Reculer" data-command="backward" data-value="2">
⬇️
</button>
<span class="placeholder"></span>
</section>
</main>
</body>
</html>