Skip to content

README.md

Latest commit

 

History

History
152 lines (102 loc) · 3.76 KB

README.md

File metadata and controls

152 lines (102 loc) · 3.76 KB
Raw

Web Control Interface

Ce dossier contient un mini-serveur HTTP en Python ainsi qu’une interface Web permettant :

  • d’afficher le flux caméra envoyé par un robot,
  • de communiquer en WebSocket pour envoyer des commandes,
  • de contrôler le robot via un joystick virtuel,
  • d’activer un mode automatique,
  • de transmettre une clé d’authentification et une position initiale.

📁 Contenu du projet

1. HTTP_server.py

Un serveur HTTP très simple, basé sur les bibliothèques standard de Python. Il sert les fichiers statiques situés dans le même répertoire que le script.

Fonctionnement :

  • Le serveur écoute sur 0.0.0.0:8080.
  • Le répertoire est automatiquement positionné sur celui du script.
  • Il sert index.html, script.js, style.css, images, etc.
  • Aucune logique métier n’est incluse : il fournit uniquement les fichiers.

Lancer le serveur :

python3 HTTP_server.py

Ensuite accéder à :

http://<ip_du_serveur>:8080

2. index.html

Page principale de l’interface Web. Elle constitue l’interface utilisateur permettant d’interagir avec le robot.

Fonctionnalités de la page :

  • Affichage du flux caméra (via WebSocket).

  • Indication d’état : connexion, batterie.

  • Console d’événements serveur.

  • Boutons :

    • Stop du robot
    • Auto (démarrage mode automatique et affichage plein écran)
    • Connect (envoi d’une clé au serveur)

  • Zone de saisie de position initiale.

  • Joystick virtuel (canvas HTML).

  • Système de "boîte de vitesse" : 3 modes sélectionnables.

  • Mode plein écran automatique.

Scripts chargés :

  • hammer.min.js : gestion du joystick tactile.
  • script.js : toute la logique.

3. script.js

Contient toute la logique de communication WebSocket, d’affichage, et de gestion du joystick.

🔗 WebSocket

Connexion au serveur WebSocket situé à :

ws://robotpi-62.enst.fr:8765

Événements gérés :

  • onopen : connexion établie
  • onclose : connexion perdue
  • onerror : erreur réseau
  • onmessage : réception de données JSON

Les types de messages reçus :

  • battery → met à jour le pourcentage affiché
  • camera_frame → affiche l’image JPEG (base64)
  • auto_started → active le mode plein écran caméra

Les messages envoyés :

  • stop_server
  • start_auto (+ init_pos si précisée)
  • key
  • command (contrôle joystick)

🎮 Joystick virtuel

Basé sur un <canvas> + HammerJS.

  • Calcule angle / distance / x / y normalisés.
  • Envoie des commandes toutes les 50ms si changement.
  • Retour au neutre lorsque l’utilisateur relâche.

🖥 Console serveur intégrée

Affiche :

  • Horodatage
  • Messages envoyés
  • Messages reçus (hors flux caméra)

🚀 Démarrage rapide

  1. Lancer le serveur HTTP :
python3 HTTP_server.py
  1. Ouvrir la page dans un navigateur.
  2. La page tente immédiatement d’ouvrir un WebSocket avec le robot.
  3. Le joystick, les boutons et la console deviennent actifs lorsque WebSocket est connecté.

📡 Architecture de communication

Navigateur Web
   │
   ├── HTTP → Serveur Python (HTTP_server.py)
   │       Sert index.html, script.js, style.css, images.
   │
   └── WebSocket → Serveur robot (port 8765)
           Échange commandes / images / données batterie.

Le serveur HTTP ne gère pas les commandes : tout passe par WebSocket directement vers le robot.

📌 Notes

  • Le serveur HTTP est hébergé sur le Raspberry Pi.
  • Le WebSocket doit être disponible pour permettre le pilotage.
  • Le flux caméra est reçu en base64.
  • Le mode plein écran fonctionne automatiquement en mode "auto".
  • L’interface a été conçue pour fonctionner sur mobile comme sur ordinateur.