Merge branch 'development' of https://github.com/s00500/ESPUI

README.md

@@ -102,12 +102,9 @@ Now you are set to go and use any code you want to with this library
 - Datagraph output -> *WIP*
 - Number input -> *WIP*
 - Text input -> *WIP*
-- Document slider
-- New images in docu
 - proper return value (as int and not as string) for slider
-- Maybe a slider range setting, meanwhile please use map()
+- Maybe a slider range setting, meanwhile please use *map()*
 - Improve slider stability
-- Improve general stability
 
 ## Documentation
 
@@ -151,7 +148,9 @@ Labels automatically wrap your text. If you want them to have multiple lines use
 
 #### Slider
 
-There is also an slider component now, needs to be documented though
+![labels](https://github.com/s00500/ESPUI/blob/master/docs/ui_slider.png)
+
+The Slider can be used to slide through a value from 1 to 100. Slides provide realtime data, are touch compatible and can be used to for example control a Servo. The current value is shown while the slider is dragged in a little bubble over the handle.
 
 #### Initialisation of the UI
 

examples/gui/data/css/style.css

@@ -79,6 +79,12 @@
     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 "dataNormalizeCSS.h"
-#include "uploadDataStyle.h"
+#include "dataStyleCSS.h"
 
-#include "uploadDataControls.h"
+#include "dataControlsJS.h"
-#include "uploadDataSlider.h"
+#include "dataSliderJS.h"
-#include "uploadDataZepto.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 UI_TEXT_INPUT 12
-#define ADD_GRAPH_POINT 14
+#define UPDATE_TEXT_INPUT 13
+
+#define UI_GRAPH 14
+#define CLEAR_GRAPH 15
+#define ADD_GRAPH_POINT 16
 
 
 // Values