SimPilot — Vue d'ensemble

SimPilot est une application web installable qui permet au formateur de piloter l’intégralité d’une simulation médicale depuis une tablette ou un smartphone.

• Sélectionner et lancer des scénarios de simulation
• Piloter les paramètres vitaux en temps réel
• Visualiser l’état des nodes connectés (dispositifs biomédicaux)
• Débriefier avec timeline d’événements
• Fonctionner hors-ligne grâce à IndexedDB

Astuce

L’application SimPilot fonctionne en mode autonome (sans SimServer, avec un coordinateur ESP32) ou en mode couplé (avec SimServer). L’interface s’adapte automatiquement au mode détecté.

Deux modes de fonctionnement

Mode Simple (sans SimServer)

Le SimPilot se connecte directement à un coordinateur ESP32-S3 (intégré à un Dinamap, Scope ou DAE) via WebSocket.

graph LR
    SimPilot["SimPilot (tablette)"] <-->|WebSocket| Coord["Coordinateur ESP32-S3"] <-->|ESP-NOW| Nodes["Nodes"]

Fonctionnalités disponibles :

• Sélection et lancement de scénarios
• Contrôle des paramètres vitaux
• Visualisation de l’état des nodes
• Débriefing par les données (timeline, paramètres)
• Fonctionnement offline (IndexedDB)

Non disponible : vidéo, enregistrement, régie.

Mode SimServer (avec SimServer)

Le SimPilot se connecte au SimServer via SocketIO. SimServer remplace le coordinateur comme hub central.

graph LR
    SimPilot["SimPilot (tablette)"] <-->|SocketIO| Studio["SimServer (RPi)"] <-->|ESP-NOW| Nodes["Nodes"]

Fonctionnalités supplémentaires :

• Indicateur d’enregistrement (REC)
• Aperçu des caméras connectées
• Synchronisation des marqueurs avec la régie
• Débriefing vidéo (via SimServer)
• Accès aux diagnostics réseau

Vues principales

Accueil

Liste des scénarios disponibles, filtres par catégorie et difficulté. Prévisualisation des étapes et paramètres.

Simulation

Constantes vitales en temps réel, chronomètre, alarmes, contrôles formateur. Override de paramètres, déclenchement d’événements, marqueurs.

Débriefing

Historique des sessions, timeline d’événements, export JSON/CSV. En mode SimServer : accès au débriefing vidéo.

Paramètres

Connexion au coordinateur/SimServer, mode mock, apparence, langue.

Synchronisation bidirectionnelle

Le SimPilot et SimServer (ou coordinateur) se synchronisent en temps réel. Toute action dans le SimPilot est propagée :

Action SimPilot	→ SimServer	→ Nodes
Démarrer scénario	État régie mis à jour	Commande start ESP-NOW
Modifier paramètre vital	Overlay mis à jour	Override ESP-NOW
Déclencher événement	Log dans journal	Event ESP-NOW
Pause / Reprise	État régie synchronisé	Commande ESP-NOW
Poser un marqueur	Marqueur dans timeline	—

Et inversement, le SimPilot reçoit automatiquement :

• Les mises à jour de paramètres vitaux des nodes
• Les changements d’état des dispositifs (connexion, déconnexion, état machine)
• Les actions de SimServer (enregistrement, changement de scénario)

Auto-découverte

Le SimPilot détecte automatiquement :

• SimServer (via mDNS ou scan réseau)
• Le coordinateur ESP32 (via WiFi AP dédié)
• Les nodes connectés (liste transmise par le coordinateur/SimServer)

Aucune configuration manuelle n’est nécessaire : le SimPilot s’adapte à l’environnement détecté.

Mode offline-first

La PWA fonctionne sans connexion réseau :

1. Scénarios : préchargés dans IndexedDB (Dexie.js)
2. Sessions : sauvegardées localement, synchronisées plus tard
3. Service Worker : cache statique des assets (Workbox)
4. Sync queue : file d’attente pour les opérations différées

Assistance intégrée

L’interface est conçue pour des utilisateurs non initiés :

Type d’aide	Description
Tooltips	Info-bulle sur chaque bouton et contrôle (directive v-tooltip)
Help panel	Panneau d’aide contextuel selon la page courante
Onboarding	Assistant de premier lancement (étapes guidées)
Statut réseau	Indicateur visuel permanent de l’état de connexion
Messages d’erreur	Messages clairs avec suggestion d’action corrective
Documentation	Lien vers la documentation en ligne

Design system

Le SimPilot utilise un design system à 3 niveaux de composants :

Tier	Emplacement	Rôle
Tier 1 (UI)	components/ui/	Composants génériques réutilisables (boutons, champs, modales)
Tier 1.5 (Layout)	components/layout/	Shell, navigation, structure de page
Tier 2 (Domaine)	components/vitals/, scenario/, help/	Composants métier (constantes vitales, contrôle scénario)
Tier 3 (Vues)	views/	Orchestration et routing

Principes UI :

• Touch target 44px minimum sur tout élément interactif
• Design tokens : var(--color-*), jamais de couleurs en dur
• Thème clair/sombre automatique
• Contrastes conformes WCAG 2.1 AA

Stack technique

Composant	Technologie
Framework	Vue.js 3 (Composition API)
Langage	TypeScript
CSS	Tailwind CSS 4
State	Pinia
Offline	IndexedDB (Dexie.js)
PWA	Workbox (Service Worker)
Tests	Vitest + @vue/test-utils + Playwright
i18n	vue-i18n v10

Commandes

cd pwa && npm install       # Installer les dépendances
cd pwa && npm run dev       # Serveur de développement
cd pwa && npm run build     # Build production
cd pwa && npm test          # Tests unitaires
cd pwa && npm run test:e2e  # Tests end-to-end

Communication avec les dispositifs

graph LR
    subgraph simple["Mode simple"]
        B1["SimPilot"] <-->|WebSocket| C1["Coordinateur ESP32"] <-->|ESP-NOW| N1["Nodes"]
    end
    subgraph studio["Mode SimServer"]
        B2["SimPilot"] <-->|SocketIO| S2["SimServer (RPi + ESP32-S3)"] <-->|ESP-NOW| N2["Nodes"]
    end

En mode mock, un MockWebSocket simule le coordinateur et les dispositifs pour le développement sans hardware.