Bug bluetooth + amélioration HTML

README.md

@@ -4,16 +4,27 @@ Application HTML5 de quiz temps réel pour plusieurs modules ESP32-S3 via Blueto
 
 ## 📋 Description
 
-BleQuiz permet de créer un système de quiz interactif en temps réel où plusieurs ESP32-S3 peuvent être connectés simultanément via Bluetooth. Chaque module ESP32-S3 surveille des GPIOs (boutons) et envoie instantanément les événements à une interface web HTML5.
+BleQuiz permet de créer un système de quiz interactif en temps réel où jusqu'à 8 modules ESP32-S3 peuvent être connectés simultanément via Bluetooth. Chaque module surveille 4 boutons (GPIOs) et envoie instantanément les événements à une interface web HTML5 avec feedback visuel LED.
+
+**Cas d'usage** : Quiz en classe, jeux de rapidité, systèmes de vote, buzzers interactifs multi-joueurs.
 
 **Adresse de test :**
 [https://blequiz.apps.christophe-scaya.fr/](https://blequiz.apps.christophe-scaya.fr/) (serveur de démonstration, utiliser le fichier `quiz_exemple.txt`)
 
+## ✨ Fonctionnalités principales
+
+- 🎮 **Identification automatique** : 8 modules nommés automatiquement via jumpers (BleQuiz-1 à BleQuiz-8)
+- 🔐 **Appairage sécurisé** : Code PIN 123456, mémorisation pour reconnexion automatique
+- 💡 **LED RGB intégrée** : Feedback visuel couleur selon la réponse (Rouge/Vert/Bleu/Jaune)
+- 📱 **Multi-plateforme** : Compatible Android, iOS, Linux, Windows (Chrome/Edge)
+- 🌐 **Interface web moderne** : Support des formules chimiques (indices/exposants)
+- ⚡ **Temps réel** : Détection instantanée du premier à répondre
+
 ## 🔧 Configuration
 
-### ESP32 (src/main.cpp)
+### ESP32-S3 (src/main.cpp)
 
-Par défaut, le code surveille 4 GPIOs : **2, 4, 5, 6** d'un module ESP32-S3 supermini générique.
+Par défaut, le code surveille 4 GPIOs : **2, 4, 5, 6** (compatibles ESP32-S3 Supermini)
 
 Pour modifier les GPIOs surveillés, éditez cette ligne :
 ```cpp
@@ -64,27 +75,40 @@ Chaque module ESP32-S3 peut être identifié automatiquement via 3 GPIOs configu
 | LOW     | LOW    | HIGH   | 110     | **BleQuiz-7** |
 | LOW     | LOW    | LOW    | 111     | **BleQuiz-8** |
 
+**Avantage** : Plus besoin de modifier le code pour chaque module, il suffit de configurer les jumpers !
+
+### Appairage Bluetooth sécurisé
+
+Le système utilise un appairage sécurisé avec code PIN pour une meilleure compatibilité :
+
+- **Code PIN fixe** : **123456** (affiché au démarrage dans le moniteur série)
+- **Premier appairage** : Entrez 123456 sur votre appareil
+- **Appairages suivants** : Reconnexion automatique sans code
+- **Compatibilité** : ✅ Android | ✅ iOS | ✅ Linux | ✅ Windows
 
 ## 🚀 Installation et utilisation
 
 ### 1. Prérequis
 
-- **PlatformIO** installé (via VS Code ou CLI)
-- **Python 3** (pour le serveur HTTPS)
-- **Navigateur compatible** : Chrome, Edge ou Opera (Firefox et Safari ne supportent pas Web Bluetooth)
+- **PlatformIO** (VS Code ou CLI)
+- **ESP32-S3** (Seeed XIAO ESP32-S3 ou compatible)
+- **Python 3** (serveur HTTPS)
+- **Navigateur** : Chrome, Edge ou Opera
 
-### 2. Configuration des ESP32
+### 2. Compilation et téléversement
 
-**Compiler et téléverser pour ESP32-S3** :
+**Compiler et téléverser** :
 ```bash
-pio run -e esp32-s3-supermini
 pio run -e esp32-s3-supermini --target upload
 ```
-**Monitorer le port série** (optionnel) :
+
+**Monitorer le port série** (voir code PIN 123456) :
 ```bash
 pio device monitor
 ```
 
+⚠️ **Important** : Notez le code PIN **123456** affiché au démarrage pour le premier appairage.
+
 ### 3. Démarrer le serveur HTTPS
 
 ⚠️ **Important** : Web Bluetooth nécessite HTTPS (ou localhost en HTTP)
@@ -128,9 +152,17 @@ https://localhost:8443
 ### 5. Utiliser l'application
 
 1. **Charger un fichier de questions** : Cliquez sur "Choisir un fichier" et sélectionnez votre fichier de quiz (voir `quiz_exemple.txt`)
-2. **Connecter les modules** : Cliquez sur "Connecter un module" et sélectionnez votre ESP32-S3 dans la liste Bluetooth
-3. **Lancer le quiz** : Naviguez entre les questions, les modules répondent en appuyant sur leurs boutons
-4. **Répétez** pour connecter plusieurs modules simultanément
+2. **Connecter les modules** : Cliquez sur "Connecter un module" et sélectionnez votre ESP32
+3. **Premier appairage** : Entrez le code **123456** quand demandé (Android/iOS)
+4. **Appairages suivants** : La connexion se fait automatiquement sans code
+5. **Lancer le quiz** : Naviguez entre les questions, les modules répondent en appuyant sur leurs boutons
+6. **Répétez** pour connecter plusieurs modules simultanément
+
+**Note sur l'appairage** :
+- **Première connexion** : Le système demande un code PIN (**123456**)
+- **Connexions suivantes** : L'appairage est mémorisé, reconnexion automatique
+- **Android/iOS** : L'appairage sécurisé améliore grandement la compatibilité
+- **Ubuntu/Linux** : Fonctionne avec ou sans appairage
 
 ## 🌐 Pourquoi HTTPS est nécessaire ?
 
@@ -249,28 +281,28 @@ Créez un fichier texte avec ce format (voir `quiz_exemple.txt`) :
 
 ## 🐛 Dépannage
 
-### L'ESP32-S3 n'apparaît pas dans la liste Bluetooth
-- Vérifiez que le module est alimenté correctement (USB ou externe 5V)
-- Consultez le moniteur série : `pio device monitor` pour voir les messages de démarrage
-- Assurez-vous que le Bluetooth est activé sur votre ordinateur
-- Sur Linux, vérifiez que BlueZ est à jour : `bluetoothctl --version`
-- Redémarrez l'ESP32-S3 (bouton RESET ou débrancher/rebrancher)
-
-### Pas de données reçues dans l'interface web
-- Vérifiez que les UUID correspondent dans `src/main.cpp` et `index.html`
-- Consultez la console JavaScript (F12) pour voir les erreurs
-- Testez en connectant un GPIO à GND avec un simple fil
-- Vérifiez que le module est bien connecté (voyant dans l'interface)
-
-### Déconnexions fréquentes
-- Réduisez la distance entre l'ESP32-S3 et l'ordinateur (< 5 mètres)
-- Assurez-vous que l'alimentation de l'ESP32-S3 est stable (câble USB de qualité)
-- Évitez les interférences (WiFi 2.4GHz, micro-ondes)
-- Augmentez le délai dans la boucle principale si trop de données sont envoyées
+### Problèmes d'appairage Bluetooth
+
+**Android ne veut pas appairer** :
+- Assurez-vous d'entrer le code PIN **123456** quand demandé
+- Effacez les appairages Bluetooth précédents dans les paramètres Android
+- Réinitialisez l'ESP32 et réessayez
+
+**iOS ne voit pas le module** :
+- Vérifiez que le Bluetooth est activé dans les réglages iOS
+- Le module doit être alimenté et le moniteur série doit afficher "Advertising BLE démarré"
+- iOS peut mettre quelques secondes avant de découvrir les périphériques BLE
+- Entrez le code **123456** lors du premier appairage
+
+**Le module n'apparaît pas dans la liste Bluetooth** :
+- Vérifiez l'alimentation USB (5V stable)
+- Consultez `pio device monitor` pour voir "Code d'appairage : 123456"
+- Redémarrez l'ESP32 (bouton RESET)
+- Sur Linux, vérifiez BlueZ : `bluetoothctl --version`
 
 ### Erreur "HTTPS required" ou "Bluetooth API not available"
-- Vérifiez que vous accédez bien à `https://localhost:8443` (pas `http://`)
-- Utilisez Chrome, Edge ou Opera (pas Firefox ni Safari)
+- Accédez à `https://localhost:8443` (pas http://)
+- Navigateurs supportés : Chrome, Edge, Opera uniquement
 - Sur Linux, utilisez le script `./start.sh` pour les bons paramètres Chrome
 
 ### Erreur de compilation PlatformIO
@@ -295,7 +327,8 @@ Créez un fichier texte avec ce format (voir `quiz_exemple.txt`) :
 ## 🎯 Notes d'utilisation
 
 - **Identification automatique** : Les modules se nomment automatiquement BleQuiz-1 à BleQuiz-8 selon les GPIOs 8, 9, 10
-- **Sécurité BLE** : Le code utilise un mode sans bonding (pas de mémorisation d'appairage)
+- **Appairage BLE** : Code PIN fixe **123456** pour le premier appairage, puis reconnexion automatique
+- **Compatibilité** : Appairage sécurisé (bonding) pour Android/iOS, fonctionne aussi sur Ubuntu/Linux
 - **Web Bluetooth** : La page HTML doit obligatoirement être servie en HTTPS ou via localhost
 - **Détection de changement** : Les événements GPIO sont envoyés instantanément lors des transitions HIGH→LOW
 - **Mode Pull-up** : Les boutons doivent connecter le GPIO à GND (pas à VCC)

html/index.html

@@ -178,6 +178,23 @@
             margin-right: 15px;
         }
 
+        .answer-letter.letter-a {
+            background: #f44336;
+        }
+
+        .answer-letter.letter-b {
+            background: #4CAF50;
+        }
+
+        .answer-letter.letter-c {
+            background: #2196F3;
+        }
+
+        .answer-letter.letter-d {
+            background: #FFEB3B;
+            color: #333;
+        }
+
         .answer-content {
             display: flex;
             align-items: center;
@@ -1031,7 +1048,7 @@
                 
                 answerDiv.innerHTML = `
                     <div class="answer-content">
-                        <div class="answer-letter">${letters[index]}</div>
+                        <div class="answer-letter letter-${letters[index].toLowerCase()}">${letters[index]}</div>
                         <div>${formatText(answer)}</div>
                     </div>
                 `;

src/main.cpp

@@ -3,6 +3,8 @@
 #include <BLEServer.h>
 #include <BLEUtils.h>
 #include <BLE2902.h>
+#include <BLESecurity.h>
+#include <esp_gap_ble_api.h>
 #include <Adafruit_NeoPixel.h>
 
 // Configuration LED WS2812
@@ -128,12 +130,19 @@ void setup() {
   // Initialisation BLE
   BLEDevice::init(moduleName.c_str());
   
-  // --- Sécurité BLE : mode sans bonding (pas de mémorisation d'appairage) ---
-  // Cela permet des reconnexions après reboot sans problème de clés obsolètes
+  // --- Configuration sécurité BLE pour compatibilité Android/iOS ---
+  // Mode avec bonding pour mémoriser l'appairage
   BLESecurity *pSecurity = new BLESecurity();
-  pSecurity->setAuthenticationMode(ESP_LE_AUTH_NO_BOND); // Pas de bonding, connexion temporaire
-  pSecurity->setCapability(ESP_IO_CAP_NONE); // Pas de clavier/écran
+  pSecurity->setAuthenticationMode(ESP_LE_AUTH_REQ_SC_MITM_BOND); // Appairage sécurisé avec bonding
+  pSecurity->setCapability(ESP_IO_CAP_OUT); // Affichage d'un code (via Serial)
   pSecurity->setInitEncryptionKey(ESP_BLE_ENC_KEY_MASK | ESP_BLE_ID_KEY_MASK);
+  pSecurity->setRespEncryptionKey(ESP_BLE_ENC_KEY_MASK | ESP_BLE_ID_KEY_MASK);
+  
+  // Activer le static passkey (code fixe : 123456)
+  uint32_t passkey = 123456;
+  esp_ble_gap_set_security_param(ESP_BLE_SM_SET_STATIC_PASSKEY, &passkey, sizeof(uint32_t));
+  
+  Serial.println("Code d'appairage : 123456");
   
   // Créer le serveur BLE
   pServer = BLEDevice::createServer();
@@ -167,10 +176,13 @@ void setup() {
   // Démarrer l'advertising
   BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
   pAdvertising->addServiceUUID(SERVICE_UUID);
-  pAdvertising->setScanResponse(false);
-  pAdvertising->setMinPreferred(0x0);
+  pAdvertising->setScanResponse(true); // Activer scan response pour iOS
+  pAdvertising->setMinPreferred(0x06); // iOS recommande 20ms minimum
+  pAdvertising->setMaxPreferred(0x12); // iOS recommande 40ms maximum
   BLEDevice::startAdvertising();
   
+  Serial.println("Advertising BLE démarré");
+  
   // Initialiser l'état des GPIO
   for (int i = 0; i < NUM_PINS; i++) {
     int pinState = digitalRead(GPIO_PINS[i]);