#9 adjusting labels for wraping

renaming datafiles
going on for numbers

examples/gui/data/css/style.css

@@ -78,6 +78,12 @@
     background-color: #999999;
     margin-bottom: 10px;
   }
+  
+  .label-wrap {
+    width: 90%;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
 
   .label.color-blue {
     background-color: #6f9ad1;

examples/gui/data/js/controls.js

@@ -1,14 +1,31 @@
 const UI_TITEL = 0;
+
 const UI_LABEL = 1;
+const UPDATE_LABEL = 6;
+
 const UI_BUTTON = 2;
+
 const UI_SWITCHER = 3;
+const UPDATE_SWITCHER = 7;
+
 const UI_PAD = 4;
 const UI_CPAD = 5;
-const UPDATE_LABEL = 6;
-const UPDATE_SWITCHER = 7;
+
 const UI_SLIDER = 8;
 const UPDATE_SLIDER = 9;
 
+
+
+const UI_NUMBER = 10;
+const UPDATE_NUMBER = 11;
+
+const UI_TEXT_INPUT = 12;
+const UPDATE_TEXT_INPUT = 13;
+
+const UI_GRAPH = 14;
+const CLEAR_GRAPH = 15;
+const ADD_GRAPH_POINT = 16;
+
 const FOR = 0;
 const BACK = 1;
 const LEFT = 2;
@@ -97,7 +114,7 @@ function start() {
                 $('#mainHeader').html(data.label);
                 break;
             case UI_LABEL:
-                $('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label'>" + data.value + "</span></div>");
+                $('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label label-wrap'>" + data.value + "</span></div>");
                 break;
             case UI_BUTTON:
                 $('#row').append("<div class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/><button onmousedown='buttonclick(" + data.id + ", true)' onmouseup='buttonclick(" + data.id + ", false)' id='" + data.id + "'>" + data.value + "</button></div>");
@@ -234,6 +251,33 @@ function start() {
             case UPDATE_SLIDER:
                 slider_move($('#sl' + data.id), data.value, '100', false);
                 break;
+
+            case UI_NUMBER:
+                $('#row').append(
+                    "<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
+                    "<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
+                    "<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
+                    "</div>"
+                );
+                break;
+
+            case UPDATE_NUMBER:
+                $('#num' + data.id).val(data.value);
+                break;
+
+            case UI_TEXT_INPUT:
+                $('#row').append(
+                    "<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
+                    "<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
+                    "<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
+                    "</div>"
+                );
+                break;
+
+            case UPDATE_TEXT_INPUT:
+                $('#num' + data.id).val(data.value);
+                break;
+
             default:
                 console.error('Unknown type or event');
                 break;
@@ -241,6 +285,12 @@ function start() {
     };
 }
 
+function numberchange(number) {
+    var val = $('#num' + data.id).val();
+    websock.send("nchange:" + number + ":" + val);
+    console.log(val);
+}
+
 
 function buttonclick(number, isdown) {
     if (isdown) websock.send("bdown:" + number);

examples/gui/gui.ino

@@ -144,6 +144,10 @@ void setup(void) {
   ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30");
   ESPUI.slider("Slider two", &slider, COLOR_NONE, "100");
 
+  /*
+     .begin loads and serves all files from PROGMEM directly.
+     If you want to serve the files from SPIFFS use .beginSPIFFS (.prepareFileSystem has to be run in an empty sketch before)
+   */
   ESPUI.begin("ESPUI Control");
 }
 

keywords.txt

@@ -20,8 +20,10 @@ pad	KEYWORD2
 slider	KEYWORD2
 
 begin	KEYWORD2
+beginSPIFFS	KEYWORD2
 print	KEYWORD2
 updateSwitcher	KEYWORD2
+updateSlider	KEYWORD2
 
 #######################################
 # Instances (KEYWORD2)

src/ESPUI.cpp

@@ -1,13 +1,13 @@
 #include "ESPUI.h"
 
-#include "uploadDataIndex.h"
+#include "dataIndexHTML.h"
 
-#include "uploadDataNormalize.h"
-#include "uploadDataStyle.h"
+#include "dataNormalizeCSS.h"
+#include "dataStyleCSS.h"
 
-#include "uploadDataControls.h"
-#include "uploadDataSlider.h"
-#include "uploadDataZepto.h"
+#include "dataControlsJS.h"
+#include "dataSliderJS.h"
+#include "dataZeptoJS.h"
 
 #include <ESPAsyncWebServer.h>
 #include <functional>
@@ -586,7 +586,7 @@ void ESPUIClass::beginSPIFFS(const char *_title) {
 
   // Heap for general Servertest
   server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
-    request->send(200, "text/plain", String(ESP.getFreeHeap()+ " In SPIFFSmode"));
+    request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In SPIFFSmode");
   });
 
   server->onNotFound(
@@ -655,7 +655,7 @@ void ESPUIClass::begin(const char *_title) {
 
   // Heap for general Servertest
   server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
-    request->send(200, "text/plain", String(ESP.getFreeHeap() + " In Memorymode"));
+    request->send(200, "text/plain", String(ESP.getFreeHeap())+ " In Memorymode");
   });
 
   server->onNotFound(

src/ESPUI.h

@@ -41,20 +41,31 @@ typedef struct Control {
 
 // Message Types (and control types)
 #define UI_TITEL 0
+
 #define UI_LABEL 1
+#define UPDATE_LABEL 6
+
 #define UI_BUTTON 2
+
 #define UI_SWITCHER 3
+#define UPDATE_SWITCHER 7
+
 #define UI_PAD 4
 #define UI_CPAD 5
-#define UPDATE_LABEL 6
-#define UPDATE_SWITCHER 7
+
+
 #define UI_SLIDER 8
 #define UPDATE_SLIDER 9
+
 #define UI_NUMBER 10
 #define UPDATE_NUMBER 11
-#define UI_GRAPH 12
-#define CLEAR_GRAPH 13
-#define ADD_GRAPH_POINT 14
+
+#define UI_TEXT_INPUT 12
+#define UPDATE_TEXT_INPUT 13
+
+#define UI_GRAPH 14
+#define CLEAR_GRAPH 15
+#define ADD_GRAPH_POINT 16
 
 
 // Values