110 lines
2.7 KiB
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>
|