Maintenant que votre projet PlatformIO est bien configuré avec Git, nous allons intégrer votre programme Arduino opérationnel. L’objectif est de transférer le code, en l’adaptant à la structure de PlatformIO, et de préparer l’utilisation de LittleFS pour l’interface web.

1. Mettre à jour platformio.ini pour les librairies

La première étape est de vous assurer que PlatformIO gérera les librairies nécessaires.

1. Ouvrez le fichier platformio.ini à la racine de votre projet PlatformIO dans VS Code.

2. Dans la section [env:esp32dev] (ou le nom de votre carte), assurez-vous que la ligne lib_deps = contient les librairies suivantes :

   Ini, TOML

   [env:esp32dev]
   ; ... (autres paramètres)
   lib_deps =
       https://github.com/lathoub/Arduino-BLE-MIDI.git ; Pour BLEMidi de lathoub
       WebServer
       WiFi
       LittleFS ; Pour la gestion des fichiers HTML
   

   • Nous spécifions l’URL directe pour Arduino-BLE-MIDI de lathoub pour être sûr d’avoir la bonne version.

   • WiFi et WebServer sont des librairies standards pour l’ESP32.

   • LittleFS est nécessaire pour charger votre index.html depuis le système de fichiers.

2. Préparer le fichier source src/main.cpp

Votre code Arduino (le fichier .ino) sera copié dans src/main.cpp. Dans PlatformIO, les fichiers .cpp (ou .ino) sont compilés comme du C++. Cela signifie que toutes vos fonctions auxiliaires doivent être déclarées avant d’être utilisées si elles sont définies après setup() et loop().

1. Ouvrez le fichier src/main.cpp dans votre projet PlatformIO.

2. Copiez tout le contenu de votre programme Arduino existant dans ce fichier src/main.cpp.

3. Déclarer les fonctions auxiliaires (Prototypes)

Puisque main.cpp est compilé comme du C++, vous devez déclarer les prototypes de vos fonctions auxiliaires (telles que playTimedDrumBeat(), manage_Signal_Data_Aquisition_And_Storage(), etc.) en haut du fichier, avant setup().

Ajoutez ces lignes juste après vos déclarations de variables globales et avant la fonction setup():

// ---------------------------------------------------------------------------------------------------------------------
// DÉCLARATIONS DES FONCTIONS AUXILIAIRES (Prototypes)
// ---------------------------------------------------------------------------------------------------------------------
void playTimedDrumBeat();
void playDiv_Notes(int Div);
void manage_Signal_Data_Aquisition_And_Storage();
void manage_Signals_Mapping();
void manage_Serial_Out_Display();
void trigger_Mapping_Event(int i);
void setupBeats();
void Add_Note_To_Player(byte tune_id, byte Meas, byte Beat, byte SubBeat, byte Note, byte Vel, byte Chan, int Dur);
void onConnected();
void onDisconnected();

• Cela indique au compilateur l’existence de ces fonctions avant qu’il ne les rencontre dans setup() ou loop().

4. Intégrer LittleFS pour le fichier HTML

Nous allons modifier votre code pour charger index.html depuis le système de fichiers LittleFS, plutôt que de le stocker en mémoire RAM (avec PROGMEM).

1. Supprimez complètement la variable const char index_html[] PROGMEM = R"rawliteral(...)"; de votre code src/main.cpp. Elle ne sera plus nécessaire.

2. Ajoutez l’inclusion de la librairie LittleFS en haut de src/main.cpp :

   C++

   #include <LittleFS.h>
   

3. Modifiez la fonction setup() dans src/main.cpp pour initialiser LittleFS et servir le fichier HTML :

   C++

   void setup() {
     pinMode(LED_BUILTIN, OUTPUT);
     digitalWrite(LED_BUILTIN, LOW);
   
     Serial.begin(115200);
   
     // --- INITIALISATION LITTLEFS ---
     if (!LittleFS.begin()) {
       Serial.println("Erreur lors du montage de LittleFS. Le serveur web ne fonctionnera pas.");
       return; // Arrête si LittleFS ne peut pas être monté
     } else {
       Serial.println("LittleFS monté avec succès.");
       // Optionnel: Lister les fichiers pour vérifier
       // File root = LittleFS.open("/");
       // File file = root.openNextFile();
       // while(file){
       //   Serial.print("  FILE: ");
       //   Serial.println(file.name());
       //   file = root.openNextFile();
       // }
     }
     // --- FIN INITIALISATION LITTLEFS ---
   
     // Connect to Wi-Fi
     WiFi.mode(WIFI_STA);
     WiFi.disconnect(true);
     WiFi.begin(ssid, password);
     int attempts = 0;
     while (WiFi.status() != WL_CONNECTED && attempts < 30) {
       delay(500);
       Serial.print(".");
       attempts++;
     }
   
     if (WiFi.status() != WL_CONNECTED) {
       Serial.println("\nFailed to connect to WiFi.");
       Serial.print("Status code: ");
       Serial.println(WiFi.status());
     } else {
       Serial.println("\nWiFi connected!");
       Serial.print("IP address: ");
       Serial.println(WiFi.localIP());
     }
   
     // Set up web server routes
     server.on("/", HTTP_GET, [](){
       server.send(200, "text/html", LittleFS.open("/index.html", "r")); // Chargement depuis LittleFS
     });
     server.on("/velocity", HTTP_GET, [](){
       if (server.hasArg("value")) {
         masterVelocity = server.arg("value").toInt();
       }
       server.send(200, "text/plain", "OK");
     });
     server.begin();
   
     // Clear sensor value buffer
     for (int i = 0; i < nbcapteurs; i++) {
       for (int j = 0; j < BufferSize; j++) {
         sensorVal[i][j] = 0;
       }
     }
   
     // Set up BLE-MIDI callbacks
     BLEMidiServer.setOnConnectCallback(onConnected);
     BLEMidiServer.setOnDisconnectCallback(onDisconnected);
   
     Serial.println("Initializing Bluetooth...");
     BLEMidiServer.begin("ESP32 MIDI Instrument"); // Name your BLE device
     Serial.println("Waiting for connections...");
   
     setupBeats();
   }
   

5. Créer le dossier data/ et l’index.html

1. À la racine de votre projet PlatformIO (le même niveau que src/ et platformio.ini), créez un nouveau dossier nommé data.

2. À l’intérieur de ce dossier data, créez un fichier nommé index.html.

3. Collez le contenu HTML (tout ce qui se trouvait entre R"rawliteral(...)rawliteral") dans ce nouveau fichier data/index.html.

   HTML

   <!DOCTYPE HTML><html>
   <head>
     <title>MIDI Controller</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
       body { font-family: Arial; text-align: center; margin:auto; padding-top: 20px;}
       .slider { width: 300px; }
       input[type=text] { width: 100px; }
     </style>
   </head>
   <body>
     <h1>MIDI Pads Control</h1>
     <h3>Master Velocity</h3>
     <input type="range" class="slider" min="0" max="127" id="velocitySlider" oninput="updateVelocity(this.value)">
     <p>Velocity: <span id="velocityValue">100</span></p>
     <script>
       function updateVelocity(val) {
         document.getElementById('velocityValue').innerHTML = val;
         var xhr = new XMLHttpRequest();
         xhr.open('GET', '/velocity?value=' + val, true);
         xhr.send();
       }
     </script>
   </body>
   </html>
   

6. Mettre les identifiants Wi-Fi dans un fichier séparé (bonne pratique)

Pour éviter de pousser vos identifiants Wi-Fi sur GitHub, nous allons les mettre dans un fichier séparé.

1. Dans le dossier src/, créez un nouveau fichier nommé credentials.h.

2. Copiez-y les lignes suivantes, en remplaçant par vos vrais identifiants :

   C++

   #ifndef WIFI_CREDENTIALS_H
   #define WIFI_CREDENTIALS_H
   
   const char* ssid = "ClubInternet24G"; // Votre SSID
   const char* password = "5148856187"; // Votre mot de passe
   
   #endif // WIFI_CREDENTIALS_H
   

3. Dans votre src/main.cpp, supprimez les lignes const char* ssid = ... et const char* password = ....

4. À la place, ajoutez cette ligne en haut de src/main.cpp, juste après les autres #include :

   C++

   #include "credentials.h"
   

5. Mettez à jour votre .gitignore pour inclure cette ligne afin que credentials.h ne soit jamais poussé sur GitHub :

   Extrait de code

   # ... (autres lignes existantes)
   # Local config files
   src/credentials.h
   

7. Compiler et Téléverser dans PlatformIO

Maintenant, vous êtes prêt à tester !

1. Dans VS Code, cliquez sur l’icône PlatformIO dans la barre d’activités.

2. Dans la section “Project Tasks” (Tâches du projet) :

   • Sous votre environnement (par exemple, esp32dev), cliquez sur “Upload Filesystem Image”. Cela enverra votre data/index.html à l’ESP32.

   • Ensuite, cliquez sur “Upload”. Cela compilera et téléversera votre code C++ (src/main.cpp) sur l’ESP32.

3. Ouvrez le “Serial Monitor” de PlatformIO (l’icône de prise électrique dans la barre d’état ou via la vue PlatformIO) pour voir les messages de connexion Wi-Fi et l’adresse IP.

Si tout se passe bien, votre ESP32 devrait se connecter au Wi-Fi, vous donner une adresse IP, et en accédant à cette IP depuis votre navigateur, vous devriez voir votre interface web.