Documentation for new filebrowser-feature

README.md

@@ -13,7 +13,8 @@ Currently I'm working on a new Tonuino that is completely based on 3.3V and make
 * 20.11.2020: Added directive `MEASURE_BATTERY_VOLTAGE`: monitoring battery's voltage is now supported.
 * 25.11.2020: WiFi can npw be activated/deactivated instantly by pressing two buttons.
 * 28.11.2020: Battery's voltage can now be visualized by Neopixel by short-press of rotary encoder's burtton.
-* 28.11.2020. Added directive `PLAY_LAST_RFID_AFTER_REBOOT`: Tonuino will recall the last RFID played after reboot.
+* 28.11.2020: Added directive `PLAY_LAST_RFID_AFTER_REBOOT`: Tonuino will recall the last RFID played after reboot.
+* 05.12.2020: Added filebrowser to webgui (thanks @mariolukas for contribution!)
 More to come...
 
 ## Disclaimer
@@ -91,7 +92,7 @@ A lot of wiring is necessary to get ESP32-Tonuino working. After my first experi
 
 
 Optionally, GPIO 17 can be used to drive a NPN-transistor (BC337-40) that pulls a p-channel MOSFET (IRF9520) to GND in order to switch on/off 5V-current. Transistor-circuit is described [here](https://dl6gl.de/schalten-mit-transistoren.html): Just have a look at Abb. 4. Values of the resistors I used: R1: 10k, R2: omitted(!), R4: 10k, R5: 4,7k. <br />
-I also tested this successfully for a 3.3V-setup with IRF530NPBF (N-channel MOSFET) and NDP6020P (P-channel MOSFET). Resistor-values: R1: 100k, R2: omitted(!), R4: 100k, R5: 4,7k. A 3.3V-setup is helpful if you want to battery-power your Tonuino and 5V is not available in battery-mode. For example this is the case when using Wemos Lolin32 with only having LiPo connected. <br />
+I also tested this successfully for a 3.3V-setup with IRF530NPBF (N-channel MOSFET) and NDP6020P (P-channel MOSFET). Resistor-values: R1: 100k, R2: omitted(!), R4: 100k, R5: 1k. A 3.3V-setup is helpful if you want to battery-power your Tonuino and 5V is not available in battery-mode. For example this is the case when using Wemos Lolin32 with only having LiPo connected. <br />
 Advice: When powering a SD-card-reader solely with 3.3V, make sure to use one WITHOUT a voltage regulator. Or at least one with a pin dedicated for 3.3V (bypassing voltage regulator). This is because if 3.3V go through the voltage regulator a small voltage-drop will be introduced, which may lead to SD-malfunction as the resulting voltage is a bit too low. Vice versa if you want to connect your reader solely to 5V, make sure to have one WITH a voltage regulator :-).
 
 ## Wiring (1 SPI-instance) [EXPERIMENTAL, maybe not working!]
@@ -143,7 +144,7 @@ When using a develboard with for example SD-card-reader already integrated (Loli
 * if MQTT=yes, set the IP or hostname of the MQTT-server accordingly and check the MQTT-topics (states and commands)
 * if Neopixel enabled: set NUM_LEDS to the LED-number of your Neopixel-ring and define the Neopixel-type using `#define CHIPSET`
 * If you're using Arduino-IDE please make sure to change ESP32's partition-layout to `No OTA (2MB APP/2MB Spiffs)` as otherwise the sketch won't fit into the flash-memory.
-* Please keep in mind that working SD is mandatory. Unless `SD_NOT_MANDATORY_ENABLE` is not set, Tonuino will never fully start up if SD is not working. Only use `SD_NOT_MANDATORY_ENABLE` for debugging as for normal operational mode, not having SD working doesn't make sense. Even if only webradio-mode is intended, SD would be used to backup RFID-tag-learnings (/backup.txt).
+* Please keep in mind that working SD is mandatory. Unless `SD_NOT_MANDATORY_ENABLE` is not set, Tonuino will never fully start up if SD is not working. Only use `SD_NOT_MANDATORY_ENABLE` for debugging as for normal operational mode, not having SD working doesn't make sense. Even if only webradio-mode is intended, SD would be used to backup RFID-tag-learnings (/backup.txt) or JSON-file-index (files.json).
 * If you want to monitor battery's voltage, make sure to enable `MEASURE_BATTERY_VOLTAGE`. Use a voltage-divider as voltage of a LiPo is way too high for ESP32 (only 3.3V supported!). For my tests I connected VBat with a serial connection of 130k + 390k resistors (VBat(+)--130k--X--390k--VBat(-)). X is the measure-point where to connect the GPIO to. If using Lolin D32 or Lolin D32 pro, make sure to adjust both values to 100k each and change GPIO to 35 as this is already integrated and wired fixed.
 Please note: via GUI upper and lower voltage cut-offs for visualisation of battery-voltage (Neopixel) is available. Additional GUI-configurable values are interval (in minutes) for checking battery voltage and the cut off-voltage below whose a warning is shown via Neopixel.
 * If you're using a headphone-pcb with a [headphone jack](https://www.conrad.de/de/p/cliff-fcr1295-klinken-steckverbinder-3-5-mm-buchse-einbau-horizontal-polzahl-3-stereo-schwarz-1-st-705830.html) that has a pin to indicate if there's a plug, you can use this signal along with the feature `HEADPHONE_ADJUST_ENABLE` to limit the maximum headphone-voltage automatically. As per default you have to invert this signal (with a P-channel MOSFET) and connect it to GPIO22.
@@ -184,13 +185,17 @@ Webgui #4:
 Webgui #5:
 <img src="https://raw.githubusercontent.com/biologist79/Tonuino-ESP32-I2S/master/pictures/Mgmt-GUI5.jpg" width="300">
 
+Webgui #6:
+<img src="https://raw.githubusercontent.com/biologist79/Tonuino-ESP32-I2S/master/pictures/Mgmt-GUI5.jpg" width="300">
+
 Webgui: websocket broken:
 <img src="https://raw.githubusercontent.com/biologist79/Tonuino-ESP32-I2S/master/pictures/Mgmt-GUI_connection_broken.jpg" width="300">
 
 Webgui: action ok:
 <img src="https://raw.githubusercontent.com/biologist79/Tonuino-ESP32-I2S/master/pictures/Mgmt_GUI_action_ok.jpg" width="300">
 
-Please note: as you apply a RFID-tag to the RFID-reader, the corresponding ID is pushed to the GUI (and flashes a few times; so you can't miss it). So there's no need to enter such IDs manually (unless you want to).
+Please note: as you apply a RFID-tag to the RFID-reader, the corresponding ID is pushed to the GUI. So there's no need to enter such IDs manually (unless you want to). Filepath can be filled out by selecting a file/directory in the tree.
+IMPORTANT: Every time you add, delete or rename stuff on the SD-card, it's necessary to re-index. Simply click on the refresh-button below the filetree and wait until it's done.
 
 ## Interacting with Tonuino
 ### Playmodes

html/website.html

@@ -375,7 +375,7 @@
                         $('#filetree').on("click", function () {
                             refreshFileList();
                         });
-                        toastr.error("Die Verzeichnis Liste konnte nicht geladen werden.");
+                        toastr.error("Die Verzeichnis-Liste konnte nicht geladen werden.");
                     }
                 },
 
@@ -398,7 +398,7 @@
         }).bind('loaded.jstree', function (event, data) {
             postRendering(event, data);
             if ((data.instance._model.data['#']['children'].length == 0)) {
-                toastr.info("Der SD Karten Index muss erzeugt werden.");
+                toastr.info("Der SD-Karten-Index muss erzeugt werden.");
             }
         }).bind('refresh.jstree', function (event, data) {
             postRendering(event, data);
@@ -435,12 +435,12 @@
         }
     });
 
-    function showFileIndexingState(){
+    function showFileIndexingState() {
         $("#indexing-progress").show();
         $("#refreshAction").hide();
     }
 
-    function hideFileIndexingState(){
+    function hideFileIndexingState() {
         $("#indexing-progress").hide();
         $("#refreshAction").show();
     }
@@ -486,13 +486,13 @@
               if (socketMsg.pong == 'pong') {
                   pong();
               }
-          } if ("refreshFileList" in socketMsg){
+          } if ("refreshFileList" in socketMsg) {
               hideFileIndexingState();
-              toastr.info("Die Datei Liste wurde neu erzeugt!");
+              toastr.info("Die Dateiliste wurde neu erzeugt!");
               $('#filetree').jstree(true).refresh();
 
           }
-          if ("indexingState" in socketMsg){
+          if ("indexingState" in socketMsg) {
               if(socketMsg.indexingState != null) {
                   $("#currentProcessedFile").text(socketMsg.indexingState);
                   console.log(socketMsg.indexingState);

src/websiteMgmt.h

@@ -375,7 +375,7 @@ static const char mgtWebsite[] PROGMEM = "<!DOCTYPE html>\
                         $('#filetree').on(\"click\", function () {\
                             refreshFileList();\
                         });\
-                        toastr.error(\"Die Verzeichnis Liste konnte nicht geladen werden.\");\
+                        toastr.error(\"Die Verzeichnis-Liste konnte nicht geladen werden.\");\
                     }\
                 },\
 \
@@ -398,7 +398,7 @@ static const char mgtWebsite[] PROGMEM = "<!DOCTYPE html>\
         }).bind('loaded.jstree', function (event, data) {\
             postRendering(event, data);\
             if ((data.instance._model.data['#']['children'].length == 0)) {\
-                toastr.info(\"Der SD Karten Index muss erzeugt werden.\");\
+                toastr.info(\"Der SD-Karten-Index muss erzeugt werden.\");\
             }\
         }).bind('refresh.jstree', function (event, data) {\
             postRendering(event, data);\
@@ -435,12 +435,12 @@ static const char mgtWebsite[] PROGMEM = "<!DOCTYPE html>\
         }\
     });\
 \
-    function showFileIndexingState(){\
+    function showFileIndexingState() {\
         $(\"#indexing-progress\").show();\
         $(\"#refreshAction\").hide();\
     }\
 \
-    function hideFileIndexingState(){\
+    function hideFileIndexingState() {\
         $(\"#indexing-progress\").hide();\
         $(\"#refreshAction\").show();\
     }\
@@ -486,13 +486,13 @@ static const char mgtWebsite[] PROGMEM = "<!DOCTYPE html>\
               if (socketMsg.pong == 'pong') {\
                   pong();\
               }\
-          } if (\"refreshFileList\" in socketMsg){\
+          } if (\"refreshFileList\" in socketMsg) {\
               hideFileIndexingState();\
-              toastr.info(\"Die Datei Liste wurde neu erzeugt!\");\
+              toastr.info(\"Die Dateiliste wurde neu erzeugt!\");\
               $('#filetree').jstree(true).refresh();\
 \
           }\
-          if (\"indexingState\" in socketMsg){\
+          if (\"indexingState\" in socketMsg) {\
               if(socketMsg.indexingState != null) {\
                   $(\"#currentProcessedFile\").text(socketMsg.indexingState);\
                   console.log(socketMsg.indexingState);\