Checkpoint adding fileDisplay object

data/js/controls.js

@@ -60,7 +60,10 @@ const UPDATE_SEPARATOR = 119;
 const UI_TIME = 20;
 const UPDATE_TIME = 120;
 
-const UI_FRAGMENT = 21;
+const UI_FILEDISPLAY = 21;
+const UPDATE_FILEDISPLAY = 121;
+
+const UI_FRAGMENT = 98;
 
 const UP = 0;
 const DOWN = 1;
@@ -80,7 +83,7 @@ const C_DARK = 7;
 const C_NONE = 255;
 
 var controlAssemblyArray = new Object();
-var FragmentAssemblyTimer = new Object();
+var FragmentAssemblyTimer = new Array();
 var graphData = new Array();
 var hasAccel = false;
 var sliderContinuous = false;
@@ -197,8 +200,8 @@ function conStatusError() {
     FragmentAssemblyTimer.forEach(element => {
         clearInterval(element);
     });
-    FragmentAssemblyTimer = new Object();
-    controlAssemblyArray = new Object();
+    FragmentAssemblyTimer = new Array();
+    controlAssemblyArray = new Array();
 
     if (true === websockConnected) {
         websockConnected = false;
@@ -220,10 +223,10 @@ function handleVisibilityChange() {
 }
 
 function start() {
-    let location = window.location.hostname;
-    let port = window.location.port;
-//    let location = "192.168.10.229";
-//    let port = "";
+//    let location = window.location.hostname;
+//    let port = window.location.port;
+    let location = "192.168.10.219";
+    let port = "";
 
     document.addEventListener("visibilitychange", handleVisibilityChange, false);
     if (
@@ -257,8 +260,8 @@ function start() {
         FragmentAssemblyTimer.forEach(element => {
             clearInterval(element);
         });
-        FragmentAssemblyTimer = new Object();
-        controlAssemblyArray = new Object();
+        FragmentAssemblyTimer = new Array();
+        controlAssemblyArray = new Array();
     };
 
     websock.onclose = function (evt) {
@@ -270,8 +273,8 @@ function start() {
         FragmentAssemblyTimer.forEach(element => {
             clearInterval(element);
         });
-        FragmentAssemblyTimer = new Object();
-        controlAssemblyArray = new Object();
+        FragmentAssemblyTimer = new Array();
+        controlAssemblyArray = new Array();
     };
 
     websock.onerror = function (evt) {
@@ -283,8 +286,8 @@ function start() {
         FragmentAssemblyTimer.forEach(element => {
             clearInterval(element);
         });
-        FragmentAssemblyTimer = new Object();
-        controlAssemblyArray = new Object();
+        FragmentAssemblyTimer = new Array();
+        controlAssemblyArray = new Array();
     };
 
     var handleEvent = function (evt) {
@@ -367,7 +370,7 @@ function start() {
                 if (data.visible) addToHTML(data);
                 break;
 
-            /*
+                /*
               These elements must call additional functions after being added to the DOM
             */
             case UI_BUTTON:
@@ -565,6 +568,14 @@ function start() {
                 }
                 break;
 
+            case UI_FILEDISPLAY:
+                if (data.visible)
+                {
+                    addToHTML(data);
+                    FileDisplayUploadFile(data);
+                }
+                break;
+    
             /*
              * Update messages change the value/style of a component without adding new HTML
              */
@@ -639,6 +650,10 @@ function start() {
                 websock.send("time:" + rv + ":" + data.id);
                 break;
 
+            case UPDATE_FILEDISPLAY:
+                FileDisplayUploadFile(data);
+                break;
+        
             case UI_FRAGMENT:
                 let FragmentLen = data.length;
                 let FragementOffset = data.offset;
@@ -770,6 +785,25 @@ function start() {
     websock.onmessage = handleEvent;
 }
 
+function FileDisplayUploadFile(data)
+{
+    let text = downloadFile(data.value);
+    // populate the text object
+} // FileDisplayUploadFile
+
+async function downloadFile(filename) {
+	let response = await fetch(filename);
+		
+	if(response.status != 200) {
+		throw new Error("File Read Server Error: '" + response.status + "'");
+	}
+		
+	// read response stream as text
+	let text_data = await response.text();
+
+	return text_data;
+} // downloadFile
+
 function StartFragmentAssemblyTimer(Id)
 {
     StopFragmentAssemblyTimer(Id);
@@ -930,6 +964,7 @@ var addToHTML = function (data) {
             case UI_GRAPH:
             case UI_GAUGE:
             case UI_ACCEL:
+            case UI_FILEDISPLAY:
                 html = "<div id='id" + data.id + "' " + panelStyle + " class='two columns " + panelwide + " card tcenter " +
                     colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
                     elementHTML(data) +
@@ -1020,8 +1055,6 @@ var elementHTML = function (data) {
     }
 }
 
-
-
 var processEnabled = function (data) {
     //Handle the enabling and disabling of controls
     //Most controls can be disabled through the use of $("#<item>").prop("disabled", true) and CSS will style it accordingly
@@ -1067,6 +1100,8 @@ var processEnabled = function (data) {
         case UI_CPAD:
         case UPDATE_PAD:
         case UPDATE_CPAD:
+        case UI_FILEDISPLAY:
+        case UPDATE_FILEDISPLAY:
             if (data.enabled) {
                 $("#id" + data.id + " nav").removeClass('disabled');
             } else {

pio_examples/gui/platformio.ini

@@ -32,6 +32,9 @@ lib_ignore =
 [env:esp8266]
 platform = espressif8266
 board = nodemcuv2
+upload_port  = COM8
+monitor_port = COM8
+monitor_speed = 115200
 
 [env:esp32]
 platform = espressif32
@@ -41,3 +44,6 @@ board_build.flash_mode = dout
 lib_deps =
     ${env.lib_deps}
     me-no-dev/AsyncTCP
+upload_port  = COM9
+monitor_port = COM9
+monitor_speed = 115200

pio_examples/gui/src/gui.ino

@@ -11,8 +11,8 @@ DNSServer dnsServer;
 #include <ESP8266WiFi.h>
 #endif
 
-const char* ssid = "ESPUI";
-const char* password = "espui";
+const char* ssid = "MaRtInG";
+const char* password = "martinshomenetwork";
 
 const char* hostname = "espui";
 
@@ -238,6 +238,7 @@ void setup(void)
     ESPUI.slider("Slider two", &slider, ControlColor::None, 100);
     ESPUI.text("Text Test:", &textCall, ControlColor::Alizarin, "a Text Field");
     ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10);
+    ESPUI.fileDisplay("Filetest", ControlColor::Turquoise, "DisplayFile.txt");
 
     graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt);
 
@@ -258,7 +259,22 @@ void setup(void)
      * password, for example begin("ESPUI Control", "username", "password")
      */
     ESPUI.sliderContinuous = true;
-    ESPUI.begin("ESPUI Control");
+    ESPUI.beginLITTLEFS("ESPUI Control");
+
+    // create a text file
+    ESPUI.prepareFileSystem();
+    #if defined(ESP32)
+#if (ESP_IDF_VERSION_MAJOR == 4 && ESP_IDF_VERSION_MINOR >= 4) || ESP_IDF_VERSION_MAJOR > 4
+    File testFile = LittleFS.open("/DisplayFile.txt", "w");
+#else
+    File testFile = LITTLEFS.open("/DisplayFile.txt", "w");
+#endif
+#else
+    File testFile = LittleFS.open("/DisplayFile.txt", "w");
+#endif
+    String TestLine = "Test Line\n";
+    testFile.write((const uint8_t*)TestLine.c_str(), TestLine.length());
+    testFile.close();
 }
 
 void loop(void)

src/ESPUI.cpp

@@ -805,6 +805,11 @@ uint16_t ESPUIClass::separator(const char* label)
     return addControl(ControlType::Separator, label, "", ControlColor::Alizarin, Control::noParent, nullptr);
 }
 
+uint16_t ESPUIClass::fileDisplay(const char* label, ControlColor color, String filename)
+{
+    return addControl(ControlType::FileDisplay, label, filename, color, Control::noParent);
+}
+
 uint16_t ESPUIClass::accelerometer(const char* label, std::function<void(Control*, int)> callback, ControlColor color)
 {
     return addControl(ControlType::Accel, label, "", color, Control::noParent, callback);
@@ -1425,6 +1430,14 @@ void ESPUIClass::begin(const char* _title, const char* username, const char* pas
     server->onNotFound([this](AsyncWebServerRequest* request) {
         if (captivePortal)
         {
+            AsyncResponseStream *response = request->beginResponseStream("text/html");
+            String responseText;
+            responseText.reserve(1024);
+            responseText += F("<!DOCTYPE html><html><head><title>Captive Portal</title></head><body>");
+            responseText += ("<p>If site does not re-direct click here <a href='http://" +  WiFi.softAPIP().toString() + "'>this link</a></p>");
+            responseText += ("</body></html><head><meta http-equiv=\"Refresh\" content=\"0; URL='http://" +  WiFi.softAPIP().toString() + "'\" /></head>");
+            response->write(responseText.c_str(), responseText.length());
+            request->send(response);
             request->redirect("/");
         }
         else

src/ESPUI.h

@@ -143,6 +143,7 @@ public:
     uint16_t gauge(const char* label, ControlColor color, int value, int min = 0,
         int max = 100); // Create Gauge display
     uint16_t separator(const char* label); //Create separator
+    uint16_t fileDisplay(const char* label, ControlColor color, String filename);
 
     // Input only
     uint16_t accelerometer(const char* label, std::function<void(Control*, int)> callback, ControlColor color);

src/ESPUIcontrol.cpp

@@ -280,3 +280,4 @@ void Control::onWsEvent(String & cmd, String& data)
         }
     } while (false);
 }
+

src/ESPUIcontrol.h

@@ -30,8 +30,9 @@ enum ControlType : uint8_t
     Accel,
     Separator,
     Time,
+    FileDisplay,
 
-    Fragment,
+    Fragment = 98,
     Password = 99,
     UpdateOffset = 100,
 };
@@ -93,6 +94,7 @@ public:
 private:
     bool _ToBeDeleted = false;
     uint32_t ControlChangeID = 0;
+    String OldValue = emptyString;
 };
 
 #define UI_TITLE            ControlType::Title