Merge pull request #14 from mariolukas/feature/sdbrowser

Feature/sdbrowser
5 years ago · 03b1766fcb
5 changed files with 1177 additions and 1175 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,3 +4,9 @@
 .vscode/launch.json
 .vscode/ipch
 .DS_Store
 .idea/
 CMakeLists.txt
 CMakeListsPrivate.txt
 cmake-build-az-delivery-devkit-v4/
 cmake-build-debug/
 venv/
--- a/html/website.html
+++ b/html/website.html
--- a/html/websiteMgmt.h
+++ b/html/websiteMgmt.h
@ -1,263 +0,0 @@
 static const char mgtWebsite[] PROGMEM = "<!DOCTYPE html>\
 <html lang=\"de\">\
  <head>\
    <title>ESPuino-Konfiguration</title>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
    <link rel=\"stylesheet\" href=\"https://ts-cs.de/css/bootstrap.min.css\">\
    <script src=\"https://ts-cs.de/js/jquery.min.js\"></script>\
    <script src=\"https://ts-cs.de/js/popper.min.js\"></script>\
    <script src=\"https://ts-cs.de/js/bootstrap.min.js\"></script>\
  </head>\
  <body>\
    <nav class=\"navbar navbar-expand-sm bg-primary navbar-dark\">\
      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\
        <span class=\"navbar-toggler-icon\"></span>\
      </button>\
      <a class=\"navbar-brand\">\
        <img src=\"./tonuino_logo.png\" width=\"30\" height=\"30\" class=\"d-inline-block align-top\" alt=\"\" />\
        Tonuino\
      </a>\
      <div class=\"collapse navbar-collapse\" id=\"collapsibleNavbar\">\
        <ul class=\"navbar-nav mr-auto\">\
          <li class=\"nav-item\">\
            <a class=\"nav-link\" href=\"#wifiConfig\">WLAN</a>\
          </li>\
          <li class=\"nav-item\">\
            <a class=\"nav-link\" href=\"#rfidMusicTags\">RFID-Zuweisungen</a>\
          </li>\
          <li class=\"nav-item\">\
            <a class=\"nav-link\" href=\"#rfidModTags\">RFID-Modifikationen</a>\
          </li>\
          <li class=\"nav-item\">\
            <a class=\"nav-link\" href=\"#mqttConfig\">MQTT</a>\
          </li>\
          <li class=\"nav-item\">\
            <a class=\"nav-link\" href=\"#ftpConfig\">FTP</a>\
          </li>\
          <li class=\"nav-item\">\
            <a class=\"nav-link\" href=\"#generalConfig\">Allgemein</a>\
          </li>\
        </ul>\
      </div>\
    </nav>\
    <br />\
    <div class=\"container\" id=\"wifiConfig\">\
      <h2>WLAN-Konfiguration</h2>\
      <form action=\"#wifiConfig\" method=\"GET\">\
        <div class=\"form-group col-md-6\">\
          <label for=\"SSID\">WLAN-Name (SSID):</label>\
          <input type=\"text\" class=\"form-control\" id=\"SSID\" placeholder=\"SSID\" name=\"SSID\" required>\
          <div class=\"invalid-feedback\">\
            Bitte SSID des WLANs eintragen.\
          </div>\
          <label for=\"pwd\">Passwort:</label>\
          <input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Passwort\" name=\"pwd\" required>\
        </div>\
        <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
        <button type=\"submit\" class=\"btn btn-primary\" onclick=\"wifiConfig()\">Absenden</button>\
      </form>\
    </div>\
    <div class=\"container my-5\" id=\"rfidMusicTags\">\
        <h2>RFID-Zuweisungen</h2>\
        <form action=\"#rfidMusicTags\" method=\"GET\">\
            <div class=\"form-group col-md-6\">\
                <label for=\"rfidIdMusic\">RFID-Chip-Nummer</label>\
                <input type=\"text\" class=\"form-control\" id=\"rfidIdMusic\" maxlength=\"12\" pattern=\"[0-9]{12}\" placeholder=\"012345678912\" name=\"rfidIdMusic\" required>\
                <label for=\"fileOrUrl\">Datei, Verzeichnis oder URL (URL nur für Webradio)</label>\
                <input type=\"text\" class=\"form-control\" id=\"fileOrUrl\" maxlength=\"255\" placeholder=\"z.B. /mp3/Hoerspiele/Yakari/Yakari_und_seine_Freunde.mp3\" name=\"fileOrUrl\" required>\
                <label for=\"playMode\">Abspielmodus</label>\
                <select class=\"form-control\" id=\"playMode\" name=\"playMode\">\
                    <option value=\"1\">Einzelner Titel</option>\
                    <option value=\"2\">Einzelner Titel (Endlosschleife)</option>\
                    <option value=\"3\">Hörbuch</option>\
                    <option value=\"4\">Hörbuch (Endlosschleife)</option>\
                    <option value=\"5\">Alle Titel eines Verzeichnis (sortiert)</option>\
                    <option value=\"6\">Alle Titel eines Verzeichnis (zufällig)</option>\
                    <option value=\"7\">Alle Titel eines Verzeichnis (sortiert, Endlosschleife)</option>\
                    <option value=\"8\">Alle Titel eines Verzeichnis (zufällig, Endlosschleife)</option>\
                    <option value=\"9\">Webradio</option>\
                </select>\
          </div>\
          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
          <button type=\"submit\" class=\"btn btn-primary\" onclick=\"rfidAssign()\">Absenden</button>\
        </form>\
    </div>\
    <div class=\"container my-5\" id=\"rfidModTags\">\
        <h2>RFID-Modifkationen</h2>\
        <form class=\"needs-validation\" action=\"#rfidModTags\" method=\"GET\" novalidate>\
            <div class=\"form-group col-md-6\">\
                <label for=\"rfidIdMod\">RFID-Chip-Nummer</label>\
                <input type=\"text\" class=\"form-control\" id=\"rfidIdMod\" maxlength=\"12\" pattern=\"[0-9]{12}\" placeholder=\"012345678912\" name=\"rfidIdMod\" required>\
                <div class=\"invalid-feedback\">\
                  Bitte eine 12-stellige Zahl eingeben.\
                </div>\
                <label for=\"modId\">Abspielmodus</label>\
                <select class=\"form-control\" id=\"modId\" name=\"modId\">\
                    <option value=\"100\">Tastensperre</option>\
                    <option value=\"101\">Schlafen nach 15 Minuten</option>\
                    <option value=\"102\">Schlafen nach 30 Minuten</option>\
                    <option value=\"103\">Schlafen nach 1 Stunde</option>\
                    <option value=\"104\">Schlafen nach 2 Stunden</option>\
                    <option value=\"105\">Schlafen nach Ende des Titels</option>\
                    <option value=\"106\">Schlafen nach Ende der Playlist</option>\
                    <option value=\"110\">Wiederhole Playlist (endlos)</option>\
                    <option value=\"111\">Wiederhole Titel (endlos)</option>\
                    <option value=\"112\">Dimme LEDs (Nachtmodus)</option>\
                </select>\
          </div>\
          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
          <button type=\"submit\" class=\"btn btn-primary\" onclick=\"rfidMods()\">Absenden</button>\
        </form>\
    </div>\
    <div class=\"container my-5\" id=\"mqttConfig\">\
        <h2>MQTT-Konfiguration</h2>\
        <form class=\"needs-validation\" action=\"#mqttConfig\" method=\"GET\" novalidate>\
            <div class=\"form-check col-md-6\">\
                <input class=\"form-check-input\" type=\"checkbox\" value=\"1\" id=\"mqttEnable\" name=\"mqttEnable\" %MQTT_ENABLE%>\
                <label class=\"form-check-label\" for=\"mqttEnable\">\
                  MQTT aktivieren\
                </label>\
            </div>\
            <div class=\"form-group my-2 col-md-6\">\
                <label for=\"mqttServer\">MQTT-Server (IP-Adresse)</label>\
                <input type=\"text\" class=\"form-control\" id=\"mqttServer\" pattern=\"^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$\" minlength=\"7\" maxlength=\"15\" placeholder=\"z.B. 192.168.2.89\" name=\"mqttServer\" value=\"%MQTT_SERVER%\">\
                <div class=\"invalid-feedback\">\
                  Bitte eine gültige IPv4-Adresse eingeben, z.B. 192.168.2.89.\
                </div>\
            </div>\
          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
          <button type=\"submit\" class=\"btn btn-primary\" onclick=\"mqttSettings()\">Absenden</button>\
        </form>\
    </div>\
    <div class=\"container\" id=\"ftpConfig\">\
        <h2>FTP-Konfiguration</h2>\
        <form action=\"#ftpConfig\" method=\"GET\">\
          <div class=\"form-group col-md-6\">\
            <label for=\"ftpUser\">FTP-Benutzername:</label>\
            <input type=\"text\" class=\"form-control\" id=\"ftpUser\" maxlength=\"32\" placeholder=\"Benutzername\" name=\"ftpUser\" value=\"%FTP_USER%\" required>\
            <label for=\"pwd\">Passwort:</label>\
            <input type=\"password\" class=\"form-control\" id=\"ftpPwd\" maxlength=\"32\" placeholder=\"Passwort\" name=\"ftpPwd\" value=\"%FTP_PWD%\" required>\
          </div>\
          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
          <button type=\"submit\" class=\"btn btn-primary\" onClick=\"ftpSettings()\">Absenden</button>\
        </form>\
    </div>\
    <div class=\"container my-5\" id=\"generalConfig\">\
        <h2>Allgemeine Konfiguration</h2>\
        <form action=\"#generalConfig\" method=\"GET\">\
            <div class=\"form-group col-md-6\">\
                <label for=\"initialVolume\">Lautstärke nach dem Einschalten</label>\
                <input type=\"number\" min=\"1\" max=\"21\" class=\"form-control\" id=\"initialVolume\" name=\"initialVolume\" value=\"%INIT_VOLUME%\" required>\
                <label for=\"maxVolume\">Maximale Lautstärke</label>\
                <input type=\"number\" min=\"1\" max=\"21\" class=\"form-control\" id=\"maxVolume\" name=\"maxVolume\" value=\"%MAX_VOLUME%\" required>\
            </div>\
            <div class=\"form-group col-md-6\">\
                <label for=\"initBrightness\">Neopixel-Helligkeit nach dem Einschalten</label>\
                <input type=\"number\" min=\"0\" max=\"255\" class=\"form-control\" id=\"initBrightness\" name=\"initBrightness\" value=\"%INIT_LED_BRIGHTBESS%\" required>\
                <label for=\"nightBrightness\">Neopixel-Helligkeit im Nachtmodus</label>\
                <input type=\"number\" min=\"0\" max=\"255\" class=\"form-control\" id=\"nightBrightness\" name=\"nightBrightness\" value=\"%NIGHT_LED_BRIGHTBESS%\" required>\
            </div>\
            <div class=\"form-group col-md-6\">\
                <label for=\"inactivityTime\">Deep-Sleep nach Inaktivität (Minuten)</label>\
                <input type=\"number\" min=\"1\" max=\"1440\" class=\"form-control\" id=\"inactivityTime\" name=\"inactivityTime\" value=\"%MAX_INACTIVITY%\" required>\
            </div>\
          <button type=\"reset\" class=\"btn btn-secondary\">Reset</button>\
          <button type=\"submit\" class=\"btn btn-primary\" onClick=\"genSettings()\">Absenden</button>\
        </form>\
        <script>\
          (function() {\
            'use strict';\
            window.addEventListener('load', function() {\
              // Fetch all the forms we want to apply custom Bootstrap validation styles to\
              var forms = document.getElementsByClassName('needs-validation');\
              // Loop over them and prevent submission\
              var validation = Array.prototype.filter.call(forms, function(form) {\
                form.addEventListener('submit', function(event) {\
                  if (form.checkValidity() === false) {\
                    event.preventDefault();\
                    event.stopPropagation();\
                  }\
                  form.classList.add('was-validated');\
                }, false);\
              });\
            }, false);\
          });\
 \
          let socket = new WebSocket(\"ws://%IPv4%:81/ws\");\
 \
          function genSettings() {\
 \
            var myObj = {\
              \"general\": {\
                iVol: document.getElementById('initialVolume').value,\
                mVol: document.getElementById('maxVolume').value,\
                iBright: document.getElementById('initBrightness').value,\
                nBright: document.getElementById('nightBrightness').value,\
                iTime: document.getElementById('inactivityTime').value\
              }\
            };\
            var myJSON = JSON.stringify(myObj);\
            socket.send(myJSON);\
          }\
 \
          function ftpSettings() {\
            var myObj = {\
              \"ftp\": {\
                ftpUser: document.getElementById('ftpUser').value,\
                ftpPwd: document.getElementById('ftpPwd').value\
              }\
            };\
            var myJSON = JSON.stringify(myObj);\
            socket.send(myJSON);\
          }\
 \
          function mqttSettings() {\
            var myObj = {\
              \"mqtt\": {\
                enable: document.getElementById('mqttEnable').value,\
                server: document.getElementById('mqttServer').value\
              }\
            };\
            var myJSON = JSON.stringify(myObj);\
            socket.send(myJSON);\
          }\
 \
          function rfidMods() {\
            var myObj = {\
              \"rfidMod\": {\
                rfidId: document.getElementById('rfidIdMod').value,\
                modId: document.getElementById('modId').value\
              }\
            };\
            var myJSON = JSON.stringify(myObj);\
            socket.send(myJSON);\
          }\
 \
          function rfidAssign() {\
            var myObj = {\
              \"rfidAssign\": {\
                rfidId: document.getElementById('rfidIdMusic').value,\
                fileOrUrl: document.getElementById('fileOrUrl').value,\
                playmode: document.getElementById('playMode').value\
              }\
            };\
            var myJSON = JSON.stringify(myObj);\
            socket.send(myJSON);\
          }\
 \
          function wifiConfig() {\
            var myObj = {\
              \"wifiConfig\": {\
                ssid: document.getElementById('SSID').value,\
                pwd: document.getElementById('pwd').value\
              }\
            };\
            var myJSON = JSON.stringify(myObj);\
            socket.send(myJSON);\
          }\
        </script>\
    </div>\
  </body>\
 </html>\
 ";
--- a/src/main.cpp
+++ b/src/main.cpp
@ -367,6 +367,7 @@ static const char restartWebsite[] PROGMEM = "<p>Der Tonuino wird neu gestartet.
 SPIClass spiSD(HSPI);
 TaskHandle_t mp3Play;
 TaskHandle_t rfid;
 TaskHandle_t fileTaskHandle;
 #ifdef NEOPIXEL_ENABLE
    TaskHandle_t LED;
 #endif
@ -553,6 +554,14 @@ void createFile(fs::FS &fs, const char * path, const char * message){
    file.close();
 }
 bool fileExists(fs::FS &fs, const char *file){
    if (fs.exists(file)) {
        return true;
    } else {
        return false;
    }
 }
 /**
 * Appends raw input to a file
 * @param fs
@ -610,6 +619,7 @@ void appendNodeToJSONFile(fs::FS &fs, const char * path, const char *filename, c
    file.print("\"\n  }");
    // i/o is timing critical keep all stuff running
    esp_task_wdt_reset();
    yield();
    file.close();
    if(isFirstJSONtNode){
@ -638,11 +648,16 @@ bool pathValid(const char *_fileItem) {
 * @param parent
 * @param levels
 */
 char fileNameBuf[255];
 bool notifyOverWebsocket = true;
 //FIXME: This function blocks the websocket connection
 void parseSDFileList(fs::FS &fs, const char * dirname, const char * parent, uint8_t levels){
    char fileNameBuf[255];
    // i/o is timing critical keep all stuff running
    esp_task_wdt_reset();
    yield();
    File root = fs.open(dirname);
    if(!root){
@ -672,9 +687,10 @@ void parseSDFileList(fs::FS &fs, const char * dirname, const char * parent, uint
        }
        strncpy(fileNameBuf, (char *) file.name(), sizeof(fileNameBuf) / sizeof(fileNameBuf[0]));
        // we have a folder
        if(file.isDirectory()){
            esp_task_wdt_reset();
            if (pathValid(fileNameBuf)){
                appendNodeToJSONFile(SD, DIRECTORY_INDEX_FILE, fileNameBuf, parent, "folder" );
@ -696,23 +712,33 @@ void parseSDFileList(fs::FS &fs, const char * dirname, const char * parent, uint
 }
 // TODO: maybe this is not save with asyncWebserver
 bool indexingIsRunning = false;
 uint8_t runFileIndexing = 0;
 uint8_t fileIndexingDone = 0;
 /**
 *  Public function for creating file index json on SD-Card.
 *  It notifies the user client via websockets when the indexing
 *  is done.
 */
 void createJSONFileList(){
    createFile(SD, DIRECTORY_INDEX_FILE, "[\n");
    parseSDFileList(SD,  "/", NULL, FS_DEPTH);
    appendToFile(SD, DIRECTORY_INDEX_FILE, "]");
    isFirstJSONtNode  =  true;
    sendWebsocketData(0, 30);
 }
 void fileHandlingTask(void *arguments){
    while(true) {
    if(!indexingIsRunning){
        indexingIsRunning = true;
        createFile(SD, DIRECTORY_INDEX_FILE, "[\n");
        parseSDFileList(SD, "/", NULL, FS_DEPTH);
        appendToFile(SD, DIRECTORY_INDEX_FILE, "]");
        isFirstJSONtNode  =  true;
        sendWebsocketData(0, 30);
        indexingIsRunning = false;
        if(runFileIndexing){
            runFileIndexing = 0;
            //createJSONFileList();
            fileIndexingDone = 1;
        }
        esp_task_wdt_reset();
        vTaskDelay(portTICK_PERIOD_MS*150);
    }
 }
@ -3002,7 +3028,6 @@ bool getWifiEnableStatusFromNVS(void) {
        prefsSettings.putUInt("enableWifi", 1);
        wifiStatus = 1;
    }
    return wifiStatus;
 }
@ -3290,6 +3315,8 @@ bool processJsonRequest(char *_serialJson) {
        sendWebsocketData(0, 20);
        return false;
    } else if (doc.containsKey("refreshFileList")) {
        //createJSONFileList();
        runFileIndexing = 1;
        createJSONFileList();
    }
@ -3313,8 +3340,12 @@ void sendWebsocketData(uint32_t client, uint8_t code) {
        object["pong"] = "pong";
    } else if (code == 30){
        object["refreshFileList"] = "ready";
    }else if (code == 31){
        object["indexingState"] = fileNameBuf;
        esp_task_wdt_reset();
    }
    char jBuf[50];
    char jBuf[255];
    serializeJson(doc, jBuf, sizeof(jBuf) / sizeof(jBuf[0]));
    if (client == 0) {
@ -3322,6 +3353,7 @@ void sendWebsocketData(uint32_t client, uint8_t code) {
    } else {
        ws.printf(client, jBuf);
    }
    notifyOverWebsocket = true;
 }
@ -3897,6 +3929,18 @@ void setup() {
        1 /* Core where the task should run */
    );
    /**
     * SD Card File Indexing Task
     */
    xTaskCreatePinnedToCore(
        fileHandlingTask, /* Function to implement the task */
        "fileHandlingTask", /* Name of the task */
        2000,  /* Stack size in words */
        NULL,  /* Task input parameter */
        3,  /* Priority of the task */
        &fileTaskHandle,  /* Task handle. */
        1 /* Core where the task should run */
    );
    //esp_sleep_enable_ext0_wakeup((gpio_num_t) DREHENCODER_BUTTON, 0);
@ -3924,10 +3968,18 @@ void setup() {
    lastTimeActiveTimestamp = millis();     // initial set after boot
    /**
     * Create empty Index json file when no file exists.
     */
    if(!fileExists(SD,DIRECTORY_INDEX_FILE)){
        createFile(SD,DIRECTORY_INDEX_FILE,"[]");
        ESP.restart();
    }
    bootComplete = true;
    Serial.print(F("Free heap: "));
    Serial.println(ESP.getFreeHeap());
 }
@ -3945,6 +3997,13 @@ void loop() {
    sleepHandler();
    deepSleepManager();
    rfidPreferenceLookupHandler();
    /*
    if(fileIndexingDone){
        fileIndexingDone = 0;
        sendWebsocketData(0,30);
    }*/
    if (wifiManager() == WL_CONNECTED) {
        #ifdef MQTT_ENABLE
            if (enableMqtt) {
@ -3965,6 +4024,7 @@ void loop() {
    #ifdef PLAY_LAST_RFID_AFTER_REBOOT
        recoverLastRfidPlayed();
    #endif
    ws.cleanupClients();
 }
--- a/src/websiteMgmt.h
+++ b/src/websiteMgmt.h