Bump version for release

README.md

@@ -1,6 +1,5 @@
 # ESPUI
-![ESPUI Controlpad](https://github.com/s00500/ESPUI/blob/master/docs/controlpad.png)
+![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png)
-![ESPUI Switch](https://github.com/s00500/ESPUI/blob/master/docs/switch.png)
 
 
 ESPUI is a simple library to make a web user interface for your projects using the **ESP32**
@@ -14,6 +13,34 @@ I completely rewrote the EasyUI Library created by ayushsharma82 [Here](https://
 Now it uses ESPAsyncWebserver and is mainly to be used with the ESP32 Processor.
 ESP8266 support will be interesting maybe in the future.
 
+## Dependencies
+This library is dependent on the following libraries to function properly.
+  - [ESP32 Core Library](https://github.com/espressif/arduino-esp32)
+  - [ESPAsyncWebserver](https://github.com/me-no-dev/ESPAsyncWebServer)
+  - [ArduinoJson](https://github.com/bblanchon/ArduinoJson)
+
+
+## How to Install
+
+Make sure all the dependencies are installed, then install like so:
+
+#### Directly Through Arduino IDE
+
+You can find this Library in the Arduino IDE library manager
+Go to Sketch > Include Library > Library Manager > Search for "EasyUI" > Install
+
+#### Manual Install
+
+For Windows: Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip) and extract the .zip in Documents>Arduino>Libraries>{Place "ESPUI" folder Here}
+
+For Linux: Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip) and extract the .zip in Sketchbook/Libraries/{Place "ESPUI" folder Here}
+
+For macOs: Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip) and extract the .zip in ~/Documents/Arduino/libraries/{Place "ESPUI" folder Here}
+
+#### Manually through IDE
+
+Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip), Go to Sketch>Include Library>Add .zip Library> Select the Downloaded .zip File.
+
 ## Getting started (Filesystem upload)
 
 ESPUI **NEEDS** its files burnt on the SPIFFS filesystem on the ESP. **Without this ESPUI will NOT work at all**
@@ -23,35 +50,6 @@ To do this download and install me-no-devs wonderful [ESP32 sketch data uploader
 Then open the example sketch and select "ESP32 Upload Sketch Data" from the Tools menu.
 Now you are set to go and use any code you want to with this library
 
-
-
-
-## How to Install
-###### Directly Through Arduino IDE
-
-THIS IS NOT DONE YET
-~~Go to Sketch > Include Library > Library Manager > Search for "EasyUI" > Install~~
-
-###### Manual Install
-
-For Windows: Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip) and extract the .zip in Documents>Arduino>Libraries>{Place "ESPUI" folder Here}
-
-For Linux: Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip) and extract the .zip in Sketchbook/Libraries/{Place "ESPUI" folder Here}
-
-For macOs: Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip) and extract the .zip in ~/Documents/Arduino/libraries/{Place "ESPUI" folder Here}
-
-###### Manually through IDE
-
-Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip), Go to Sketch>Include Library>Add .zip Library> Select the Downloaded .zip File.
-
-## Dependencies
-This library is dependent on the following libraries to function properly.
-  - [ESP32 Core Library](https://github.com/espressif/arduino-esp32)
-  - [ESPAsyncWebserver](https://github.com/me-no-dev/ESPAsyncWebServer)
-  (There is still an open issue because there is a mistake in the current version that creates an error, please wait until that is done or checkout the [issue](https://github.com/me-no-dev/ESPAsyncWebServer/issues/234))
-  - [ArduinoJson](https://github.com/bblanchon/ArduinoJson)
-
-
 ## User interface Elements
   - Label (updateable)
   - Button
@@ -78,5 +76,42 @@ ESPUI's frontend is based on [Skeleton CSS](http://getskeleton.com/) and jQuery-
 ESPUI does not need network access and can be used in standalone access point mode.
 All assets are loaded from the internal SPIFFS filesystem of the ESP32.
 
+This section will explain in detail how the Library is to be used from the Arduino code side. As of now the Facilino blocks are not implemented.
+In the arduino setup() routine the interface can be customised by adding UI Elements. This is done by calling the corresponding library methods on the Library object ESPUI. Eg: ESPUI.button(“button”, &myCallback); creates a button in the interface that calls the “my-Callback” function when changed. All buttons and items call their callback whenever there is a state change from them. This means the button will call the callback when it is pressed and also again when it is released. To seperate different events an integer number with the event name is passed to the callback function that can be handled in a switch(){}case{} statement. Here is an overview of the currently implemented different elements of the UI library:
+
+
+#### Button
+
+![Buttons](https://github.com/s00500/ESPUI/blob/master/docs/ui_button.png)
+
+Buttons have a name and a callback value. They have one event for press and one for release.
+
+
+#### Switch
+
+![Switches](https://github.com/s00500/ESPUI/blob/master/docs/ui_switches.png)
+
+Switches sync their state on all connected devices. This means when you change their value they change visibly on all tablets or computers that currently display the interface. They also have two types of events: one for turning on and one for turning off.
+
+
+#### Buttonpad
+
+![control pads](https://github.com/s00500/ESPUI/blob/master/docs/ui_controlpad.png)
+
+Button pads come in two flavours: with or without a center button. They are very useful for con-trolling all kinds of movements of vehicles or also of course our walking robots. They use a single callback per pad and have 8 or 10 different event types to differentiate the button actions.
+
+
+#### Labels
+
+![labels](https://github.com/s00500/ESPUI/blob/master/docs/ui_labels.png)
+
+Labels are a nice tool to get information from the robot to the user interface. This can be done to show states, values of sensors and configuration parameters. To send data from the code use ESP.print(labelId, “Text”); . Labels get a name on creation and a initial value. The name is not changeable once the UI initialized.
+
+#### Initialization of the UI
+
+After all the elements are configured you can use ESPUI.begin(“Some Title”); to start the UI interface. The web interface can then be used from multiple devices at once and also shows an connection status in the top bar.
+The library is designed to be easy to use and can still be extended with a lot of more functionality.
+
+
 # Contribute
-Liked this Library? You can Support me by sending me a :coffee: [Coffee](https://paypal.me/lukasbachschwell/3).
+Liked this Library? You can **support** me by sending me a :coffee: [Coffee](https://paypal.me/lukasbachschwell/3).

blocks.js

@@ -0,0 +1,176 @@
+// This is a block definition for projects like roboblocks
+// 
+// Main Block
+Blockly.Blocks['espui'] = {
+    category: Facilino.locales.getKey('LANG_CATEGORY_BLOCKS'),
+    helpUrl: Facilino.getHelpUrl('espui'),
+    tags: ['webinterface'],
+    examples: ['lol.bly'],
+    init: function() {
+        this.appendDummyInput()
+            .appendField('ESPUI Title:')
+            .appendField(new Blockly.FieldTextInput('string'), 'ui_name');
+        this.appendStatementInput('ui_elements')
+            .setCheck('ui_element');
+        this.setColour("#37d1f9");
+        this.setTooltip("Creates a webinterface on the ESP32");
+    }
+};
+
+Blockly.Arduino['espui'] = function(block) {
+    var ui_name = block.getFieldValue('ui_name');
+    var ui_elements = Blockly.Arduino.statementToCode(block, 'ui_elements');
+    Blockly.Arduino.definitions_['define_wifi_h'] = '#include <WiFi.h>';
+    Blockly.Arduino.definitions_['define_espui_h'] = '#include <ESPUI.h>';
+    Blockly.Arduino.setups_['setup_espui'] = ui_elements;
+    Blockly.Arduino.setups_['setup_espui'] += '\nESPUI.begin("' + ui_name + '");\n';
+    return null;
+};
+
+//Elements
+
+Blockly.Blocks['espui_button'] = {
+    category: Facilino.locales.getKey('LANG_CATEGORY_BLOCKS'),
+    helpUrl: Facilino.getHelpUrl('espui'),
+    tags: ['webinterface'],
+    examples: ['lol.bly'],
+    init: function() {
+        var colorOptions = [
+            ['none', 'COLOR_NONE'],
+            ['turquoise', 'COLOR_TURQUOISE'],
+            ['emerald', 'COLOR_EMERALD'],
+            ['peterriver', 'COLOR_PETERRIVER'],
+            ['wet asphalt', 'COLOR_WETASPHALT'],
+            ['sunflower', 'COLOR_SUNFLOWER'],
+            ['carrot', 'COLOR_CARROT'],
+            ['alizarin', 'COLOR_ALIZARIN'],
+        ];
+        this.appendDummyInput()
+            .appendField('ESPUI Button')
+            .appendField(new Blockly.FieldTextInput('name'), 'ui_name');
+        this.appendDummyInput()
+            .appendField('UI Color')
+            .appendField(new Blockly.FieldDropdown(colorOptions), 'ui_color');
+        this.setColour("#3357c7");
+        this.setPreviousStatement(true, 'ui_element');
+        this.setNextStatement(true, 'ui_element');
+        this.setTooltip('A web interface button');
+        this.appendStatementInput('on_down')
+            .appendField('Pressed:')
+            .setCheck(null);
+        this.appendStatementInput('on_up')
+            .appendField('Released:')
+            .setCheck(null);
+    }
+};
+
+Blockly.Arduino['espui_button'] = function(block) {
+    var ui_name = block.getFieldValue('ui_name');
+    var ui_color = block.getFieldValue('ui_color');
+    var ui_name_clean = ui_name.replace(' ', '_');
+    var on_down = Blockly.Arduino.statementToCode(block, 'on_down');
+    var on_up = Blockly.Arduino.statementToCode(block, 'on_up');
+    Blockly.Arduino.definitions_['define_ui_button_' + ui_name_clean] =
+        'void button_' + ui_name_clean + '(Control c, int type) {\nswitch(type){\ncase B_DOWN:\n' +
+        on_down + '\nbreak;\n' +
+        'case B_UP:\n' +
+        on_up + '\nbreak;\n' +
+        '}\n';
+
+    var code = 'ESPUI.button("' + ui_name + '",&button_' + ui_name_clean + ', ' + ui_color + ');\n';
+    return code;
+};
+
+Blockly.Blocks['espui_label'] = {
+    category: Facilino.locales.getKey('LANG_CATEGORY_BLOCKS'),
+    helpUrl: Facilino.getHelpUrl('espui'),
+    tags: ['webinterface'],
+    examples: ['lol.bly'],
+    init: function() {
+        var colorOptions = [
+            ['none', 'COLOR_NONE'],
+            ['turquoise', 'COLOR_TURQUOISE'],
+            ['emerald', 'COLOR_EMERALD'],
+            ['peterriver', 'COLOR_PETERRIVER'],
+            ['wet asphalt', 'COLOR_WETASPHALT'],
+            ['sunflower', 'COLOR_SUNFLOWER'],
+            ['carrot', 'COLOR_CARROT'],
+            ['alizarin', 'COLOR_ALIZARIN'],
+        ];
+        this.appendDummyInput()
+            .appendField('ESPUI Label')
+            .appendField(new Blockly.FieldTextInput('label'), 'ui_name');
+        this.appendDummyInput()
+            .appendField('UI Color')
+            .appendField(new Blockly.FieldDropdown(colorOptions), 'ui_color');
+        this.appendDummyInput()
+            .appendField('Initial Value:')
+            .appendField(new Blockly.FieldTextInput('value'), 'start_value');
+        this.setColour("#3357c7");
+        this.setPreviousStatement(true, 'ui_element');
+        this.setNextStatement(true, 'ui_element');
+        this.setTooltip('A web interface label you can update from your code');
+    }
+};
+
+Blockly.Arduino['espui_label'] = function(block) {
+    var ui_name = block.getFieldValue('ui_name');
+    var ui_color = block.getFieldValue('ui_color');
+    var ui_name_clean = ui_name.replace(' ', '_');
+    var start_value = block.getFieldValue('start_value');
+
+    var code = 'ESPUI.label("' + ui_name + '", ' + ui_color + ', "' + start_value + '");\n';
+    return code;
+};
+
+Blockly.Blocks['espui_switcher'] = {
+    category: Facilino.locales.getKey('LANG_CATEGORY_BLOCKS'),
+    helpUrl: Facilino.getHelpUrl('espui'),
+    tags: ['webinterface'],
+    examples: ['lol.bly'],
+    init: function() {
+        var colorOptions = [
+            ['none', 'COLOR_NONE'],
+            ['turquoise', 'COLOR_TURQUOISE'],
+            ['emerald', 'COLOR_EMERALD'],
+            ['peterriver', 'COLOR_PETERRIVER'],
+            ['wet asphalt', 'COLOR_WETASPHALT'],
+            ['sunflower', 'COLOR_SUNFLOWER'],
+            ['carrot', 'COLOR_CARROT'],
+            ['alizarin', 'COLOR_ALIZARIN'],
+        ];
+        this.appendDummyInput()
+            .appendField('ESPUI Switcher')
+            .appendField(new Blockly.FieldTextInput('name'), 'ui_name');
+        this.appendDummyInput()
+            .appendField('UI Color')
+            .appendField(new Blockly.FieldDropdown(colorOptions), 'ui_color');
+        this.setColour("#3357c7");
+        this.setPreviousStatement(true, 'ui_element');
+        this.setNextStatement(true, 'ui_element');
+        this.setTooltip('A web interface button');
+        this.appendStatementInput('on_on')
+            .appendField('When swithed on:')
+            .setCheck(null);
+        this.appendStatementInput('on_off')
+            .appendField('When swithed off:')
+            .setCheck(null);
+    }
+};
+
+Blockly.Arduino['espui_switcher'] = function(block) {
+    var ui_name = block.getFieldValue('ui_name');
+    var ui_color = block.getFieldValue('ui_color');
+    var ui_name_clean = ui_name.replace(' ', '_');
+    var on_on = Blockly.Arduino.statementToCode(block, 'on_down');
+    var on_off = Blockly.Arduino.statementToCode(block, 'on_up');
+    Blockly.Arduino.definitions_['define_ui_switcher_' + ui_name_clean] =
+        'void switcher_' + ui_name_clean + '(Control c, int type) {\nswitch(type){\ncase S_ACTIVE:\n' +
+        on_on + '\nbreak;\n' +
+        'case S_INACTIVE:\n' +
+        on_off + '\nbreak;\n' +
+        '}\n';
+
+    var code = 'ESPUI.switcher("' + ui_name + '",&switcher_' + ui_name_clean + ', ' + ui_color + ', false);\n';
+    return code;
+};

examples/gui/data/css/style.css

@@ -1,24 +1,64 @@
-  body{
+  body {
-    background-color: #F4F3EF;
+    font-family: 'Open Sans', sans-serif;
+    background-color: #ecf0f1;
   }
+
   .container {
     position: relative;
     width: 79%;
     margin: 20px;
-    box-sizing: border-box; }
+    box-sizing: border-box;
-  .column,
+  }
-  .columns {
-    width: 100%;
-    float: left; }
 
-    .card{
+  .column, .columns {
+    width: 100%;
+    float: left;
+  }
+
+  .card {
     margin-top: 2%;
     border-radius: 6px;
-    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+    box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
     padding-left: 20px;
     padding-right: 20px;
     margin-bottom: 10px;
     min-width: 150px;
+    color: #fff;
+  }
+
+  .turquoise {
+    background: #1abc9c;
+    border-bottom: #16a085 3px solid;
+  }
+
+  .emerald {
+    background: #2ecc71;
+    border-bottom: #27ae60 3px solid;
+  }
+
+  .peterriver {
+    background: #3498db;
+    border-bottom: #2980b9 3px solid;
+  }
+
+  .wetasphalt {
+    background: #34495e;
+    border-bottom: #2c3e50 3px solid;
+  }
+
+  .sunflower {
+    background: #f1c40f;
+    border-bottom: #E6BB0F 3px solid;
+  }
+
+  .carrot {
+    background: #e67e22;
+    border-bottom: #d35400 3px solid;
+  }
+
+  .alizarin {
+    background: #e74c3c;
+    border-bottom: #c0392b 3px solid;
   }
 
   .label {
@@ -37,446 +77,428 @@
     position: relative;
     top: -0.15em;
     background-color: #999999;
-    margin-bottom: 10px;}
+    margin-bottom: 10px;
+  }
 
-    .label.color-blue { background-color: #6f9ad1; }
+  .label.color-blue {
-    .label.color-red { background-color: #d37c7c; }
+    background-color: #6f9ad1;
-    .label.color-green { background-color: #9bc268; }
+  }
-    .label.color-orange { background-color: #dea154; }
+
-    .label.color-yellow { background-color: #e9d641; }
+  .label.color-red {
-    .label.color-purple { background-color: #9f83d1; }
+    background-color: #d37c7c;
+  }
+
+  .label.color-green {
+    background-color: #9bc268;
+  }
+
+  .label.color-orange {
+    background-color: #dea154;
+  }
+
+  .label.color-yellow {
+    background-color: #e9d641;
+  }
+
+  .label.color-purple {
+    background-color: #9f83d1;
+  }
 
   /* For devices larger than 400px */
+
   @media (min-width: 400px) {
     .container {
-    width: 84%;}
+      width: 84%;
-
+    }
   }
 
   /* For devices larger than 550px */
+
   @media (min-width: 630px) {
     .container {
-      width: 98%; }
+      width: 98%;
-    .column,
+    }
-    .columns {
+    .column, .columns {
-      margin-right: 2%; }
+      margin-right: 2%;
-    .column:first-child,
+    }
-    .columns:first-child {
+    .column:first-child, .columns:first-child {
-      margin-left: 0; }
+      margin-left: 0;
-
+    }
-    .one.column,
+    .one.column, .one.columns {
-    .one.columns                    { width: 4.66666666667%; }
+      width: 4.66666666667%;
-    .two.columns                    { width: 13.3333333333%; }
+    }
-    .three.columns                  { width: 22%;            }
+    .two.columns {
-    .four.columns                   { width: 30.6666666667%; }
+      width: 13.3333333333%;
-    .five.columns                   { width: 39.3333333333%; }
+    }
-    .six.columns                    { width: 48%;            }
+    .three.columns {
-    .seven.columns                  { width: 56.6666666667%; }
+      width: 22%;
-    .eight.columns                  { width: 65.3333333333%; }
+    }
-    .nine.columns                   { width: 74.0%;          }
+    .four.columns {
-    .ten.columns                    { width: 82.6666666667%; }
+      width: 30.6666666667%;
-    .eleven.columns                 { width: 91.3333333333%; }
+    }
-    .twelve.columns                 { width: 100%; margin-left: 0; }
+    .five.columns {
-
+      width: 39.3333333333%;
-    .one-third.column               { width: 30.6666666667%; }
+    }
-    .two-thirds.column              { width: 65.3333333333%; }
+    .six.columns {
-
+      width: 48%;
-    .one-half.column                { width: 48%; }
+    }
-
+    .seven.columns {
-    /* Offsets */
+      width: 56.6666666667%;
-    .offset-by-one.column,
+    }
-    .offset-by-one.columns          { margin-left: 8.66666666667%; }
+    .eight.columns {
-    .offset-by-two.column,
+      width: 65.3333333333%;
-    .offset-by-two.columns          { margin-left: 17.3333333333%; }
+    }
-    .offset-by-three.column,
+    .nine.columns {
-    .offset-by-three.columns        { margin-left: 26%;            }
+      width: 74.0%;
-    .offset-by-four.column,
+    }
-    .offset-by-four.columns         { margin-left: 34.6666666667%; }
+    .ten.columns {
-    .offset-by-five.column,
+      width: 82.6666666667%;
-    .offset-by-five.columns         { margin-left: 43.3333333333%; }
+    }
-    .offset-by-six.column,
+    .eleven.columns {
-    .offset-by-six.columns          { margin-left: 52%;            }
+      width: 91.3333333333%;
-    .offset-by-seven.column,
+    }
-    .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+    .twelve.columns {
-    .offset-by-eight.column,
+      width: 100%;
-    .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+      margin-left: 0;
-    .offset-by-nine.column,
+    }
-    .offset-by-nine.columns         { margin-left: 78.0%;          }
+    .one-third.column {
-    .offset-by-ten.column,
+      width: 30.6666666667%;
-    .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+    }
-    .offset-by-eleven.column,
+    .two-thirds.column {
-    .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+      width: 65.3333333333%;
-
+    }
-    .offset-by-one-third.column,
+    .one-half.column {
-    .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+      width: 48%;
-    .offset-by-two-thirds.column,
+    }
-    .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+    /* Offsets */
-
+    .offset-by-one.column, .offset-by-one.columns {
-    .offset-by-one-half.column,
+      margin-left: 8.66666666667%;
-    .offset-by-one-half.columns     { margin-left: 52%; }
+    }
-
+    .offset-by-two.column, .offset-by-two.columns {
+      margin-left: 17.3333333333%;
+    }
+    .offset-by-three.column, .offset-by-three.columns {
+      margin-left: 26%;
+    }
+    .offset-by-four.column, .offset-by-four.columns {
+      margin-left: 34.6666666667%;
+    }
+    .offset-by-five.column, .offset-by-five.columns {
+      margin-left: 43.3333333333%;
+    }
+    .offset-by-six.column, .offset-by-six.columns {
+      margin-left: 52%;
+    }
+    .offset-by-seven.column, .offset-by-seven.columns {
+      margin-left: 60.6666666667%;
+    }
+    .offset-by-eight.column, .offset-by-eight.columns {
+      margin-left: 69.3333333333%;
+    }
+    .offset-by-nine.column, .offset-by-nine.columns {
+      margin-left: 78.0%;
+    }
+    .offset-by-ten.column, .offset-by-ten.columns {
+      margin-left: 86.6666666667%;
+    }
+    .offset-by-eleven.column, .offset-by-eleven.columns {
+      margin-left: 95.3333333333%;
+    }
+    .offset-by-one-third.column, .offset-by-one-third.columns {
+      margin-left: 34.6666666667%;
+    }
+    .offset-by-two-thirds.column, .offset-by-two-thirds.columns {
+      margin-left: 69.3333333333%;
+    }
+    .offset-by-one-half.column, .offset-by-one-half.columns {
+      margin-left: 52%;
+    }
   }
-
 
   /* Base Styles
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  /* NOTE
+
-  html is set to 62.5% so that all the REM measurements throughout Skeleton
-  are based on 10px sizing. So basically 1.5rem = 15px :) */
   html {
-    font-size: 62.5%; }
+    font-size: 62.5%;
+  }
+
   body {
     margin: 0;
-    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+    font-size: 1.5em;
+    /* currently ems cause chrome bug misinterpreting rems on body element */
     line-height: 1.0;
     font-weight: 400;
     font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #222; }
+    color: #222;
-
+  }
 
   /* Typography
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
+
   h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
     margin-bottom: 0.5rem;
-    font-weight: 300; }
+    font-weight: 300;
-  h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+  }
-  h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+
-  h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+  h1 {
-  h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+    font-size: 4.0rem;
-  h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+    line-height: 1.2;
-  h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+    letter-spacing: -.1rem;
+  }
+
+  h2 {
+    font-size: 3.6rem;
+    line-height: 1.25;
+    letter-spacing: -.1rem;
+  }
+
+  h3 {
+    font-size: 3.0rem;
+    line-height: 1.3;
+    letter-spacing: -.1rem;
+  }
+
+  h4 {
+    font-size: 2.4rem;
+    line-height: 1.35;
+    letter-spacing: -.08rem;
+  }
+
+  h5 {
+    font-size: 1.8rem;
+    line-height: 1.5;
+    letter-spacing: -.05rem;
+  }
+
+  h6 {
+    font-size: 1.5rem;
+    line-height: 1.6;
+    letter-spacing: 0;
+  }
 
   /* Larger than phablet */
+
   @media (min-width: 630px) {
-    h1 { font-size: 5.0rem; }
+    h1 {
-    h2 { font-size: 4.2rem; }
+      font-size: 5.0rem;
-    h3 { font-size: 3.6rem; }
+    }
-    h4 { font-size: 3.0rem; }
+    h2 {
-    h5 { font-size: 2.0rem; }
+      font-size: 4.2rem;
-    h6 { font-size: 1.5rem; }
+    }
+    h3 {
+      font-size: 3.6rem;
+    }
+    h4 {
+      font-size: 3.0rem;
+    }
+    h5 {
+      font-size: 2.0rem;
+    }
+    h6 {
+      font-size: 1.5rem;
+    }
   }
 
   p {
-    margin-top: 0; }
+    margin-top: 0;
-
+  }
 
   /* Links
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  a {
-    color: #1EAEDB; }
-  a:hover {
-    color: #0FA0CE; }
 
+  a {
+    color: #1EAEDB;
+  }
+
+  a:hover {
+    color: #0FA0CE;
+  }
 
   /* Buttons
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  .button,
+
-  button,
+  button {
-  input[type="submit"],
-  input[type="reset"],
-  input[type="button"] {
     display: inline-block;
-    height: 38px;
+    padding: 10px;
-    padding: 0 30px;
+    border-radius: 3px;
-    color: #555;
+    color: #fff;
-    text-align: center;
-    font-size: 11px;
-    font-weight: 600;
-    line-height: 38px;
-    letter-spacing: .1rem;
-    text-transform: uppercase;
-    text-decoration: none;
-    white-space: nowrap;
-    background-color: transparent;
-    border-radius: 4px;
-    border: 1px solid #bbb;
-    cursor: pointer;
-    box-sizing: border-box; }
-  .button:hover,
-  button:hover,
-  input[type="submit"]:hover,
-  input[type="reset"]:hover,
-  input[type="button"]:hover,
-  .button:focus,
-  button:focus,
-  input[type="submit"]:focus,
-  input[type="reset"]:focus,
-  input[type="button"]:focus {
-    color: #333;
-    border-color: #888;
-    outline: 0; }
-  .button.button-primary,
-  button.button-primary,
-  input[type="submit"].button-primary,
-  input[type="reset"].button-primary,
-  input[type="button"].button-primary {
-    color: #FFF;
-    background-color: #33C3F0;
-    border-color: #33C3F0; }
-  .button.button-primary:hover,
-  button.button-primary:hover,
-  input[type="submit"].button-primary:hover,
-  input[type="reset"].button-primary:hover,
-  input[type="button"].button-primary:hover,
-  .button.button-primary:focus,
-  button.button-primary:focus,
-  input[type="submit"].button-primary:focus,
-  input[type="reset"].button-primary:focus,
-  input[type="button"].button-primary:focus {
-    color: #FFF;
-    background-color: #1EAEDB;
-    border-color: #1EAEDB; }
-
-
-  /* Forms
-  –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  input[type="email"],
-  input[type="number"],
-  input[type="search"],
-  input[type="text"],
-  input[type="tel"],
-  input[type="url"],
-  input[type="password"],
-  textarea,
-  select {
-    height: 38px;
-    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-    background-color: #fff;
-    border: 1px solid #D1D1D1;
-    border-radius: 4px;
-    box-shadow: none;
-    box-sizing: border-box; }
-  /* Removes awkward default styles on some inputs for iOS */
-  input[type="email"],
-  input[type="number"],
-  input[type="search"],
-  input[type="text"],
-  input[type="tel"],
-  input[type="url"],
-  input[type="password"],
-  textarea {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none; }
-  textarea {
-    min-height: 65px;
-    padding-top: 6px;
-    padding-bottom: 6px; }
-  input[type="email"]:focus,
-  input[type="number"]:focus,
-  input[type="search"]:focus,
-  input[type="text"]:focus,
-  input[type="tel"]:focus,
-  input[type="url"]:focus,
-  input[type="password"]:focus,
-  textarea:focus,
-  select:focus {
-    border: 1px solid #33C3F0;
-    outline: 0; }
-  label,
-  legend {
-    display: block;
-    margin-bottom: .5rem;
-    font-weight: 600; }
-  fieldset {
-    padding: 0;
-    border-width: 0; }
-  input[type="checkbox"],
-  input[type="radio"] {
-    display: inline; }
-  label > .label-body {
-    display: inline-block;
-    margin-left: .5rem;
-    font-weight: normal; }
-
-  #mainHeader{
-    display:inline-block;
   }
-  #conStatus{
+
-    position:inherit;
+  #mainHeader {
+    display: inline-block;
+  }
+
+  #conStatus {
+    position: inherit;
     font-size: 0.75em;
   }
 
-  /* Code
-  –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  code {
-    padding: .2rem .5rem;
-    margin: 0 .2rem;
-    font-size: 90%;
-    white-space: nowrap;
-    background: #F1F1F1;
-    border: 1px solid #E1E1E1;
-    border-radius: 4px; }
-  pre > code {
-    display: block;
-    padding: 1rem 1.5rem;
-    white-space: pre; }
-
-
   /* Tables
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  th,
+
-  td {
+  th, td {
     padding: 12px 15px;
     text-align: left;
-    border-bottom: 1px solid #E1E1E1; }
+    border-bottom: 1px solid #E1E1E1;
-  th:first-child,
+  }
-  td:first-child {
-    padding-left: 0; }
-  th:last-child,
-  td:last-child {
-    padding-right: 0; }
 
+  th:first-child, td:first-child {
+    padding-left: 0;
+  }
+
+  th:last-child, td:last-child {
+    padding-right: 0;
+  }
 
   /* Spacing
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
-  button,
-  .button {
-    margin-bottom: 1rem; }
-  input,
-  textarea,
-  select,
-  fieldset {
-    margin-bottom: 1.5rem; }
-  pre,
-  blockquote,
-  dl,
-  figure,
-  table,
-  p,
-  ul,
-  ol,
-  form {
-    margin-bottom: 2.5rem; }
 
+  button, .button {
+    margin-bottom: 1rem;
+  }
+
+  input, textarea, select, fieldset {
+    margin-bottom: 1.5rem;
+  }
+
+  pre, blockquote, dl, figure, table, p, ul, ol, form {
+    margin-bottom: 2.5rem;
+  }
 
   /* Utilities
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
+
   .u-full-width {
     width: 100%;
-    box-sizing: border-box; }
+    box-sizing: border-box;
+  }
+
   .u-max-full-width {
     max-width: 100%;
-    box-sizing: border-box; }
+    box-sizing: border-box;
-  .u-pull-right {
+  }
-    float: right; }
-  .u-pull-left {
-    float: left; }
 
+  .u-pull-right {
+    float: right;
+  }
+
+  .u-pull-left {
+    float: left;
+  }
+
+  .tcenter {
+    text-align: center;
+  }
 
   /* Misc
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
+
   hr {
     margin-top: 0.5rem;
     margin-bottom: 1.2rem;
     border-width: 0;
-    border-top: 1px solid #E1E1E1; }
+    border-top: 1px solid #E1E1E1;
-
+  }
 
   /* Clearing
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
   /* Self Clearing Goodness */
-  .container:after,
+
-  .row:after,
+  .container:after, .row:after, .u-cf {
-  .u-cf {
     content: "";
     display: table;
-    clear: both; }
+    clear: both;
+  }
 
   /* ButtonPad
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
   .control {
     background-color: #ddd;
-  background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
+    background-image: linear-gradient(hsla(0, 0%, 0%, .1), hsla(0, 0%, 100%, .1));
     border-radius: 50%;
-  box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5),
+    box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, .5), 0 0 1px 1px hsla(0, 0%, 100%, .75), 0 0 1px 2px hsla(0, 0%, 100%, .25), 0 0 1px 3px hsla(0, 0%, 100%, .25), 0 0 1px 4px hsla(0, 0%, 100%, .25), 0 0 1px 6px hsla(0, 0%, 0%, .75);
-              0 0 1px 1px hsla(0,0%,100%,.75),
-              0 0 1px 2px hsla(0,0%,100%,.25),
-              0 0 1px 3px hsla(0,0%,100%,.25),
-              0 0 1px 4px hsla(0,0%,100%,.25),
-              0 0 1px 6px hsla(0,0%,0%,.75);
     height: 9em;
     margin: 3em auto;
     position: relative;
     width: 9em;
-}
+  }
-.control ul {
+
+  .control ul {
     height: 100%;
     padding: 0;
     transform: rotate(45deg);
-}
+  }
-.control li {
+
+  .control li {
     border-radius: 100% 0 0 0;
-  box-shadow: inset -1px -1px 1px hsla(0,0%,100%,.5),
+    box-shadow: inset -1px -1px 1px hsla(0, 0%, 100%, .5), 0 0 1px hsla(0, 0%, 0%, .75);
-              0 0 1px hsla(0,0%,0%,.75);
     display: inline-block;
     height: 50%;
     overflow: hidden;
     width: 50%;
-}
+  }
-.control ul li:nth-child(2) {
+
+  .control ul li:nth-child(2) {
     transform: rotate(90deg);
-}
+  }
-.control ul li:nth-child(3) {
+
+  .control ul li:nth-child(3) {
     transform: rotate(-90deg);
-}
+  }
-.control ul li:nth-child(4) {
+
+  .control ul li:nth-child(4) {
     transform: rotate(180deg);
-}
+  }
-.control ul a {
+
+  .control ul a {
     height: 200%;
     position: relative;
     transform: rotate(-45deg);
     width: 200%;
-}
+  }
-.control a:hover,
+
-.control a:focus {
+  .control a:hover, .control a:focus {
-  background-color: hsla(0,0%,100%,.25);
+    background-color: hsla(0, 0%, 100%, .25);
-}
+  }
-.control a {
+
+  .control a {
     border-radius: 50%;
     color: #333;
     display: block;
     font: bold 1em/3 sans-serif;
     text-align: center;
     text-decoration: none;
-  text-shadow: 0 1px 1px hsla(0,0%,100%,.4);
+    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .4);
     transition: .15s;
-}
+  }
-.control .confirm {
+
+  .control .confirm {
     background-color: #ddd;
-  background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,100%,.25));
+    background-image: linear-gradient(hsla(0, 0%, 0%, .15), hsla(0, 0%, 100%, .25));
-  box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5),
+    box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, .5), 0 0 1px 1px hsla(0, 0%, 100%, .25), 0 0 1px 2px hsla(0, 0%, 100%, .25), 0 0 1px 3px hsla(0, 0%, 100%, .25), 0 0 1px 4px hsla(0, 0%, 100%, .25), 0 0 1px 6px hsla(0, 0%, 0%, .85);
-              0 0 1px 1px hsla(0,0%,100%,.25),
-              0 0 1px 2px hsla(0,0%,100%,.25),
-              0 0 1px 3px hsla(0,0%,100%,.25),
-              0 0 1px 4px hsla(0,0%,100%,.25),
-              0 0 1px 6px hsla(0,0%,0%,.85);
     left: 50%;
     line-height: 3;
     margin: -1.5em;
     position: absolute;
     top: 50%;
     width: 3em;
-}
+  }
-.control .confirm:hover,
+
-.control .confirm:focus {
+  .control .confirm:hover, .control .confirm:focus {
     background-color: #eee;
-}
+  }
 
-
+  /* Switch
-
-/* Switch
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
-
+  .switch {
-.switch {
+    display: inline-block !important;
     background-color: #bebebe;
     border-radius: 4px;
-	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     color: #fff;
     cursor: pointer;
     display: block;
@@ -490,11 +512,13 @@
     -o-transition: background-color 0.2s ease-in-out;
     -ms-transition: background-color 0.2s ease-in-out;
     transition: background-color 0.2s ease-in-out;
-}
+  }
-.switch.checked {
+
+  .switch.checked {
     background-color: #76d21d;
-}
+  }
-.switch input[type="checkbox"] {
+
+  .switch input[type="checkbox"] {
     cursor: pointer;
     height: 10px;
     left: 12px;
@@ -506,52 +530,57 @@
     -ms-transition: left 0.05s ease-in-out;
     transition: left 0.05s ease-in-out;
     width: 10px;
-}
+  }
-.switch.checked input[type="checkbox"] {
+
+  .switch.checked input[type="checkbox"] {
     left: 38px;
-}
+  }
-.switch input:before {
+
+  .switch input:before {
     background: #fff;
     background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f0f0f0));
-	background: -webkit-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+    background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -o-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+    background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -ms-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+    background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: linear-gradient(to bottom, #fff 0%,#f0f0f0 100%);
+    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
     border: 1px solid #fff;
     border-radius: 2px;
-	box-shadow: 0 0 4px rgba(0,0,0,0.3);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
     content: '';
     height: 18px;
     position: absolute;
     top: -5px;
     left: -9px;
     width: 26px;
-}
+  }
-.switch input:after {
+
+  .switch input:after {
     background: #f0f0f0;
     background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#fff));
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #fff));
-	background: -webkit-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+    background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
-	background: -o-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+    background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
-	background: -ms-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+    background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
-	background: linear-gradient(to bottom, #f0f0f0 0%,#fff 100%);
+    background: linear-gradient(to bottom, #f0f0f0 0%, #fff 100%);
     border-radius: 10px;
     content: '';
     height: 12px;
     margin: -1px 0 0 -1px;
     position: absolute;
     width: 12px;
-}
+  }
-.switch .icon-ok,
+
-.switch .icon-remove {
+  .switch .icon-ok, .switch .icon-remove {
     line-height: 28px;
-	text-shadow: 0 -2px 0 rgba(0,0,0,0.2);
+    text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2);
     margin: 0 9px;
-}
+  }
-.switch .icon-ok {
+
+  .switch .icon-ok {
     float: left;
-}
+  }
-.switch .icon-remove {
+
+  .switch .icon-remove {
     float: right;
-}
+  }

examples/gui/data/index.htm

@@ -1,16 +1,20 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
   <meta charset="utf-8">
   <title>Control</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"/>
+  <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"
+  />
   <link rel="stylesheet" href="/css/normalize.css">
   <link rel="stylesheet" href="/css/style.css">
-    </head>
+</head>
-    <body onload="javascript:start();">
 
-      <div><h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
+<body onload="javascript:start();">
+
+  <div>
+    <h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
   <hr />
   <div class="container">
     <div id="row" class="row u-full-width">
@@ -19,5 +23,6 @@
 
   <script src="/js/zepto.js"></script>
   <script src="/js/controls.js"></script>
-    </body>
+</body>
+
 </html>

examples/gui/data/js/controls.js

@@ -13,6 +13,56 @@ const LEFT = 2;
 const RIGHT = 3;
 const CENTER = 4;
 
+// Colors
+const C_TURQUOISE = 0;
+const C_EMERALD = 1;
+const C_PETERRIVER = 2;
+const C_WETASPHALT = 3;
+const C_SUNFLOWER = 4;
+const C_CARROT = 5;
+const C_ALIZARIN = 6;
+const C_NONE = 7;
+
+function colorClass(colorId) {
+    colorId = Number(colorId);
+    switch (colorId) {
+        case C_TURQUOISE:
+            return "turquoise";
+            break;
+
+        case C_EMERALD:
+            return "emerald";
+            break;
+
+        case C_PETERRIVER:
+            return "peterriver";
+            break;
+
+        case C_WETASPHALT:
+            return "wetasphalt";
+            break;
+
+        case C_SUNFLOWER:
+            return "sunflower";
+            break;
+
+        case C_CARROT:
+            return "carrot"
+            break;
+
+        case C_ALIZARIN:
+            return "alizarin"
+            break;
+
+        case C_NONE:
+            return ""
+            break;
+
+        default:
+            return "";
+    }
+}
+
 var websock;
 
 function start() {
@@ -39,67 +89,127 @@ function start() {
         var data = JSON.parse(evt.data);
         var e = document.body;
         var center = "";
-    switch(data.type){
+        switch (data.type) {
             case UI_TITEL:
                 document.title = data.label;
                 $('#mainHeader').html(data.label);
                 break;
             case UI_LABEL:
-        $('#row').append("<div class='two columns card'><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'>" + data.value + "</span></div>");
                 break;
             case UI_BUTTON:
-        $('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'></button></div>");
+                $('#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>");
-        $('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } });
+                $('#' + data.id).on({
-        $('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        buttonclick(data.id, true)
+                    }
+                });
+                $('#' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        buttonclick(data.id, false)
+                    }
+                });
                 break;
             case UI_SWITCHER:
-      var label = "<label id='sl"+data.id+"' class='switch checked'>";
+                var label = "<label id='sl" + data.id + "' class='switch checked'>";
-      var input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' checked>";
+                var input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked>";
-      if(data.value == "0"){
+                if (data.value == "0") {
-        label = "<label id='sl"+data.id+"' class='switch'>";
+                    label = "<label id='sl" + data.id + "' class='switch'>";
-        input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' >";
+                    input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' >";
                 }
                 $('#row').append(
-      "<div id='"+data.id+"' class='two columns card'><h5>"+data.label+"</h5><hr/>" +
+                    "<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
                     label + "<i class='icon-ok'></i>" +
                     "<i class='icon-remove'></i>" + input +
                     "</label>" +
                     "</div>");
                 break;
             case UI_CPAD:
-      center = "<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='c"+data.id+"'>OK</a>";
+                center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
                 //NO BREAK
             case UI_PAD:
                 $('#row').append(
-      "<div class='two columns card'><h5>"+data.label+"</h5><hr/>"+
+                    "<div class='two columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
-      "<nav class='control'>"+
+                    "<nav class='control'>" +
-      "<ul>"+
+                    "<ul>" +
-      "<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='pf"+data.id+"'>▲</a></li>" +
+                    "<li><a onmousedown='padclick(FOR, " + data.id + ", true)' onmouseup='padclick(FOR, " + data.id + ", false)' href='#' id='pf" + data.id + "'>▲</a></li>" +
-      "<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='pr"+data.id+"'>▲</a></li>" +
+                    "<li><a onmousedown='padclick(RIGHT, " + data.id + ", true)' onmouseup='padclick(RIGHT, " + data.id + ", false)' href='#' id='pr" + data.id + "'>▲</a></li>" +
-      "<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='pl"+data.id+"'>▲</a></li>" +
+                    "<li><a onmousedown='padclick(LEFT, " + data.id + ", true)' onmouseup='padclick(LEFT, " + data.id + ", false)' href='#' id='pl" + data.id + "'>▲</a></li>" +
-      "<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='pb"+data.id+"'>▲</a></li>" +
+                    "<li><a onmousedown='padclick(BACK, " + data.id + ", true)' onmouseup='padclick(BACK, " + data.id + ", false)' href='#' id='pb" + data.id + "'>▲</a></li>" +
-      "</ul>"+
+                    "</ul>" +
                     center +
-      "</nav>"+
+                    "</nav>" +
                     "</div>");
 
-      $('#pf'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
+                $('#pf' + data.id).on({
-      $('#pf'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
+                    'touchstart': function(e) {
-      $('#pl'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
+                        e.preventDefault();
-      $('#pl'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
+                        padclick(FOR, data.id, true)
-      $('#pr'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
+                    }
-      $('#pr'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
+                });
-      $('#pb'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
+                $('#pf' + data.id).on({
-      $('#pb'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
+                    'touchend': function(e) {
-      $('#pc'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
+                        e.preventDefault();
-      $('#pc'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
+                        padclick(FOR, data.id, false)
+                    }
+                });
+                $('#pl' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(LEFT, data.id, true)
+                    }
+                });
+                $('#pl' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(LEFT, data.id, false)
+                    }
+                });
+                $('#pr' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(RIGHT, data.id, true)
+                    }
+                });
+                $('#pr' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(RIGHT, data.id, false)
+                    }
+                });
+                $('#pb' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(BACK, data.id, true)
+                    }
+                });
+                $('#pb' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(BACK, data.id, false)
+                    }
+                });
+                $('#pc' + data.id).on({
+                    'touchstart': function(e) {
+                        e.preventDefault();
+                        padclick(CENTER, data.id, true)
+                    }
+                });
+                $('#pc' + data.id).on({
+                    'touchend': function(e) {
+                        e.preventDefault();
+                        padclick(CENTER, data.id, false)
+                    }
+                });
 
                 break;
             case UPDATE_LABEL:
-      $('#l'+data.id).html(data.value);
+                $('#l' + data.id).html(data.value);
                 break;
             case UPDATE_SWITCHER:
-      if(data.value == "0")
+                if (data.value == "0")
                     switcher(data.id, 0);
                 else
                     switcher(data.id, 1);
@@ -113,50 +223,50 @@ function start() {
 
 
 function buttonclick(number, isdown) {
-  if(isdown)websock.send("bdown:"+number);
+    if (isdown) websock.send("bdown:" + number);
-  else websock.send("bup:"+number);
+    else websock.send("bup:" + number);
 }
 
 function padclick(type, number, isdown) {
-  switch(type){
+    switch (type) {
         case CENTER:
-      if(isdown)websock.send("pcdown:"+number);
+            if (isdown) websock.send("pcdown:" + number);
-      else websock.send("pcup:"+number);
+            else websock.send("pcup:" + number);
             break;
         case FOR:
-      if(isdown)websock.send("pfdown:"+number);
+            if (isdown) websock.send("pfdown:" + number);
-      else websock.send("pfup:"+number);
+            else websock.send("pfup:" + number);
             break;
         case BACK:
-      if(isdown)websock.send("pbdown:"+number);
+            if (isdown) websock.send("pbdown:" + number);
-      else websock.send("pbup:"+number);
+            else websock.send("pbup:" + number);
             break;
         case LEFT:
-      if(isdown)websock.send("pldown:"+number);
+            if (isdown) websock.send("pldown:" + number);
-      else websock.send("plup:"+number);
+            else websock.send("plup:" + number);
             break;
         case RIGHT:
-      if(isdown)websock.send("prdown:"+number);
+            if (isdown) websock.send("prdown:" + number);
-      else websock.send("prup:"+number);
+            else websock.send("prup:" + number);
             break;
 
     }
 }
 
-function switcher(number, state){
+function switcher(number, state) {
-  if(state == null){
+    if (state == null) {
-    if($('#s'+number).is(':checked')){
+        if ($('#s' + number).is(':checked')) {
-      websock.send("sactive:"+number);
+            websock.send("sactive:" + number);
-      $('#sl'+number).addClass('checked');
+            $('#sl' + number).addClass('checked');
-    }else {
+        } else {
-      websock.send("sinactive:"+number);
+            websock.send("sinactive:" + number);
-      $('#sl'+number).removeClass('checked');
+            $('#sl' + number).removeClass('checked');
         }
-  }else if(state == 1){
+    } else if (state == 1) {
-    $('#sl'+number).addClass('checked');
+        $('#sl' + number).addClass('checked');
-    $('#sl'+number).prop( "checked", true );
+        $('#sl' + number).prop("checked", true);
-  }else if(state == 0){
+    } else if (state == 0) {
-    $('#sl'+number).removeClass('checked');
+        $('#sl' + number).removeClass('checked');
-    $('#sl'+number).prop( "checked", false );
+        $('#sl' + number).prop("checked", false);
     }
 }

examples/gui/gui.ino

@@ -1,17 +1,18 @@
-#include <WiFi.h>
 #include <ESPUI.h>
+#include <WiFi.h>
 
-const char* ssid = "ESP32";
+const char *ssid = "ESP32";
-const char* password = "";
+const char *password = "";
 
 long oldTime = 0;
+bool switchi = false;
 
 void setup(void) {
   Serial.begin(115200);
   WiFi.mode(WIFI_AP);
   WiFi.setHostname(ssid);
   WiFi.softAP(ssid);
-  //WiFi.softAP(ssid, password);
+  // WiFi.softAP(ssid, password);
   Serial.println("");
   Serial.print("IP address: ");
   Serial.println(WiFi.softAPIP());
@@ -31,27 +32,28 @@ void setup(void) {
     Serial.println(WiFi.localIP());
   */
 
-  ESPUI.label("Status: Stop");
+  ESPUI.label("Status:", COLOR_TURQUOISE, "Stop");
-  ESPUI.label("0");
+  ESPUI.label("Millis:", COLOR_EMERALD, "0");
-  ESPUI.button("Push Button", &buttonCallback);
+  ESPUI.button("Push Button", &buttonCallback, COLOR_PETERRIVER);
-  ESPUI.button("Push Button", &buttonExample);
+  ESPUI.button("Other Button", &buttonExample, COLOR_WETASPHALT, "Press");
-  ESPUI.pad("center", true, &padExample);
+  ESPUI.pad("Pad with center", true, &padExample, COLOR_SUNFLOWER);
-  ESPUI.pad("NoCenter", false, &padExample);
+  ESPUI.pad("Pad without center", false, &padExample, COLOR_CARROT);
-  ESPUI.switcher("Switch one", false, &switchExample);
+  ESPUI.switcher("Switch one", false, &switchExample, COLOR_ALIZARIN);
-  ESPUI.switcher("Switch two", true, &otherSwitchExample);
+  ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
 
   ESPUI.begin("ESP32 Control");
-
 }
 
 void loop(void) {
   if (millis() - oldTime > 5000) {
-    ESPUI.print(1, String(millis()));
+    ESPUI.print("Millis:", String(millis()));
+    switchi = !switchi;
+    ESPUI.updateSwitcher("Switch one", switchi);
     oldTime = millis();
   }
 }
 
-void buttonCallback(int id, int type) {
+void buttonCallback(Control sender, int type) {
   switch (type) {
   case B_DOWN:
     Serial.println("Button DOWN");
@@ -60,10 +62,9 @@ void buttonCallback(int id, int type) {
     Serial.println("Button UP");
     break;
   }
-
 }
 
-void buttonExample(int id, int type) {
+void buttonExample(Control sender, int type) {
   switch (type) {
   case B_DOWN:
     Serial.println("Status: Start");
@@ -75,7 +76,7 @@ void buttonExample(int id, int type) {
     break;
   }
 }
-void padExample(int id, int value) {
+void padExample(Control sender, int value) {
   switch (value) {
   case P_LEFT_DOWN:
     Serial.print("left down");
@@ -109,10 +110,10 @@ void padExample(int id, int value) {
     break;
   }
   Serial.print(" ");
-  Serial.println(id);
+  Serial.println(sender.id);
 }
 
-void switchExample(int id, int value) {
+void switchExample(Control sender, int value) {
   switch (value) {
   case S_ACTIVE:
     Serial.print("Active:");
@@ -122,10 +123,10 @@ void switchExample(int id, int value) {
     break;
   }
   Serial.print(" ");
-  Serial.println(id);
+  Serial.println(sender.id);
 }
 
-void otherSwitchExample(int id, int value) {
+void otherSwitchExample(Control sender, int value) {
   switch (value) {
   case S_ACTIVE:
     Serial.print("Active:");
@@ -135,5 +136,5 @@ void otherSwitchExample(int id, int value) {
     break;
   }
   Serial.print(" ");
-  Serial.println(id);
+  Serial.println(sender.id);
 }

library.properties

@@ -1,5 +1,5 @@
 name=ESPUI
-version=1.1.1
+version=1.2.0
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
 sentence=ESP32 Web Interface Library

src/ESPUI.cpp

@@ -3,144 +3,248 @@
 #include <functional>
 
 // Handle Websockets Communication
-void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len){
+void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
-    switch(type) {
+               AwsEventType type, void *arg, uint8_t *data, size_t len) {
+  switch (type) {
   case WS_EVT_DISCONNECT:
+    if (debug)
       Serial.printf("Disconnected!\n");
     break;
-        case WS_EVT_CONNECT:
+  case WS_EVT_CONNECT: {
-            {
+    if (debug)
       Serial.println("Connected");
     ESPUI.jsonDom(client);
+    if (debug)
       Serial.println("JSON Data Sent to Client!");
-            }
+  } break;
-            break;
   case WS_EVT_DATA:
     String msg = "";
     for (size_t i = 0; i < len; i++) {
-            msg += (char) data[i];
+      msg += (char)data[i];
     }
-          if(msg.startsWith("bdown:")){
+    if (msg.startsWith("bdown:")) {
-            ESPUI.controls[msg.substring(6).toInt()]->callback(msg.substring(6).toInt(), B_DOWN);
+      Control *c = ESPUI.controls[msg.substring(6).toInt()];
-          }else if(msg.startsWith("bup:")){
+      c->callback(*c, B_DOWN);
-            ESPUI.controls[msg.substring(4).toInt()]->callback(msg.substring(4).toInt(), B_UP);
+    } else if (msg.startsWith("bup:")) {
-          }else if(msg.startsWith("pfdown:")){
+      Control *c = ESPUI.controls[msg.substring(4).toInt()];
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_FOR_DOWN);
+      c->callback(*c, B_UP);
-          }else if(msg.startsWith("pfup:")){
+    } else if (msg.startsWith("pfdown:")) {
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_FOR_UP);
+      Control *c = ESPUI.controls[msg.substring(7).toInt()];
-          }else if(msg.startsWith("pldown:")){
+      c->callback(*c, P_FOR_DOWN);
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_LEFT_DOWN);
+    } else if (msg.startsWith("pfup:")) {
-          }else if(msg.startsWith("plup:")){
+      Control *c = ESPUI.controls[msg.substring(5).toInt()];
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_LEFT_UP);
+      c->callback(*c, P_FOR_UP);
-          }else if(msg.startsWith("prdown:")){
+    } else if (msg.startsWith("pldown:")) {
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_RIGHT_DOWN);
+      Control *c = ESPUI.controls[msg.substring(7).toInt()];
-          }else if(msg.startsWith("prup:")){
+      c->callback(*c, P_LEFT_DOWN);
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_RIGHT_UP);
+    } else if (msg.startsWith("plup:")) {
-          }else if(msg.startsWith("pbdown:")){
+      Control *c = ESPUI.controls[msg.substring(5).toInt()];
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_BACK_DOWN);
+      c->callback(*c, P_LEFT_UP);
-          }else if(msg.startsWith("pbup:")){
+    } else if (msg.startsWith("prdown:")) {
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_BACK_UP);
+      Control *c = ESPUI.controls[msg.substring(7).toInt()];
-          }else if(msg.startsWith("pcdown:")){
+      c->callback(*c, P_RIGHT_DOWN);
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_CENTER_DOWN);
+    } else if (msg.startsWith("prup:")) {
-          }else if(msg.startsWith("pcup:")){
+      Control *c = ESPUI.controls[msg.substring(5).toInt()];
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_CENTER_UP);
+      c->callback(*c, P_RIGHT_UP);
-          }else if(msg.startsWith("sactive:")){
+    } else if (msg.startsWith("pbdown:")) {
-            ESPUI.updateSwitcher(msg.substring(8).toInt(), true);
+      Control *c = ESPUI.controls[msg.substring(7).toInt()];
-            ESPUI.controls[msg.substring(8).toInt()]->callback(msg.substring(8).toInt(), S_ACTIVE);
+      c->callback(*c, P_BACK_DOWN);
-          }else if(msg.startsWith("sinactive:")){
+    } else if (msg.startsWith("pbup:")) {
-            ESPUI.updateSwitcher(msg.substring(10).toInt(), false);
+      Control *c = ESPUI.controls[msg.substring(5).toInt()];
-            ESPUI.controls[msg.substring(10).toInt()]->callback(msg.substring(10).toInt(), S_INACTIVE);
+      c->callback(*c, P_BACK_UP);
+    } else if (msg.startsWith("pcdown:")) {
+      Control *c = ESPUI.controls[msg.substring(7).toInt()];
+      c->callback(*c, P_CENTER_DOWN);
+    } else if (msg.startsWith("pcup:")) {
+      Control *c = ESPUI.controls[msg.substring(5).toInt()];
+      c->callback(*c, P_CENTER_UP);
+    } else if (msg.startsWith("sactive:")) {
+      Control *c = ESPUI.controls[msg.substring(8).toInt()];
+      ESPUI.updateSwitcher(c->id, true);
+      c->callback(*c, S_ACTIVE);
+    } else if (msg.startsWith("sinactive:")) {
+      Control *c = ESPUI.controls[msg.substring(10).toInt()];
+      ESPUI.updateSwitcher(c->id, false);
+      c->callback(*c, S_INACTIVE);
     }
     break;
   }
 }
 
-void ESPUIClass::label(const char* label, String value){
+void ESPUIClass::label(const char *label, int color, String value) {
-  Control* newL = new Control();
+  if (labelExists(label)) {
+    if (debug)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return;
+  }
+
+  Control *newL = new Control();
   newL->type = UI_LABEL;
   newL->label = label;
-  if(value != "") newL->value = value; // Init with labeltext
+  newL->color = color;
-  else newL->value = String(label);
+  if (value != "")
+    newL->value = value; // Init with labeltext
+  else
+    newL->value = String(label);
   newL->callback = NULL;
+  newL->id = cIndex;
   controls[cIndex] = newL;
   cIndex++;
 }
 
-void ESPUIClass::button(const char* label, void(* callBack)(int, int)){
+void ESPUIClass::button(const char *label, void (*callBack)(Control, int),
-  Control* newB = new Control();
+                        int color, String value) {
+  if (labelExists(label)) {
+    if (debug)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return;
+  }
+
+  Control *newB = new Control();
   newB->type = UI_BUTTON;
   newB->label = label;
+  newB->color = color;
+
+  if (value != "")
+    newB->value = value; // Init with labeltext
+  else
+    newB->value = String(label);
+
   newB->callback = callBack;
+  newB->id = cIndex;
   controls[cIndex] = newB;
   cIndex++;
 }
 
-void ESPUIClass::switcher(const char* label, bool startState, void(* callBack)(int, int)){
+void ESPUIClass::switcher(const char *label, bool startState,
-  Control* newS = new Control();
+                          void (*callBack)(Control, int), int color) {
+  if (labelExists(label)) {
+    if (debug)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return;
+  }
+
+  Control *newS = new Control();
   newS->type = UI_SWITCHER;
   newS->label = label;
+  newS->color = color;
   newS->value = String(startState);
   newS->callback = callBack;
+  newS->id = cIndex;
   controls[cIndex] = newS;
   cIndex++;
 }
 
-void ESPUIClass::pad(const char* label, bool center, void(* callBack)(int, int)){
+void ESPUIClass::pad(const char *label, bool center,
-  Control* newP = new Control();
+                     void (*callBack)(Control, int), int color) {
-  if(center)newP->type = UI_CPAD;
+  if (labelExists(label)) {
-  else newP->type = UI_PAD;
+    if (debug)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return;
+  }
+
+  Control *newP = new Control();
+  if (center)
+    newP->type = UI_CPAD;
+  else
+    newP->type = UI_PAD;
   newP->label = label;
+  newP->color = color;
   newP->callback = callBack;
+  newP->id = cIndex;
   controls[cIndex] = newP;
   cIndex++;
 }
 
-void ESPUIClass::print(int id, String value){
+void ESPUIClass::print(int id, String value) {
-  if(id<cIndex && controls[id]->type == UI_LABEL){
+  if (id < cIndex && controls[id]->type == UI_LABEL) {
     controls[id]->value = value;
     String json;
     StaticJsonBuffer<200> jsonBuffer;
-    JsonObject& root = jsonBuffer.createObject();
+    JsonObject &root = jsonBuffer.createObject();
     root["type"] = UPDATE_LABEL;
     root["value"] = value;
     root["id"] = String(id);
     root.printTo(json);
     this->ws->textAll(json);
-  }else{
+  } else {
-    Serial.println(String("Error: ")+ String(id) +String(" is no label"));
+    if (debug)
+      Serial.println(String("Error: ") + String(id) + String(" is no label"));
   }
 }
 
-void ESPUIClass::updateSwitcher(int id, bool nValue){
+void ESPUIClass::print(String label, String value) {
-  if(id<cIndex && controls[id]->type == UI_SWITCHER){
+  if (!labelExists(label)) {
-    controls[id]->value = nValue?1:0;
+    if (debug)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  print(getIdByLabel(label), value);
+}
+
+void ESPUIClass::updateSwitcher(int id, bool nValue) {
+  if (id < cIndex && controls[id]->type == UI_SWITCHER) {
+    controls[id]->value = nValue ? 1 : 0;
     String json;
     StaticJsonBuffer<200> jsonBuffer;
-    JsonObject& root = jsonBuffer.createObject();
+    JsonObject &root = jsonBuffer.createObject();
     root["type"] = UPDATE_SWITCH;
-    root["value"] = nValue?1:0;
+    root["value"] = nValue ? 1 : 0;
     root["id"] = String(id);
     root.printTo(json);
     this->ws->textAll(json);
-  }else{
+  } else {
-    Serial.println(String("Error: ")+ String(id) +String(" is no switcher"));
+    if (debug)
+      Serial.println(String("Error: ") + String(id) +
+                     String(" is no switcher"));
   }
 }
 
+void ESPUIClass::updateSwitcher(String label, bool nValue) {
+  if (!labelExists(label)) {
+    if (debug)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateSwitcher(getIdByLabel(label), nValue);
+}
+
+int ESPUIClass::getIdByLabel(String label) {
+  for (int i = 0; i < cIndex; i++) {
+    if (String(controls[i]->label) == label)
+      return i;
+  }
+  return -1; // failed, nonexistant
+}
+
+bool ESPUIClass::labelExists(String label) {
+  for (int i = 0; i < cIndex; i++) {
+    if (String(controls[i]->label) == label)
+      return true;
+  }
+  return false;
+}
 
 // Convert & Transfer Arduino elements to JSON elements
-void ESPUIClass::jsonDom(AsyncWebSocketClient * client){
+void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
-  for(int i=-1; i<cIndex; i++){
+  for (int i = -1; i < cIndex; i++) {
     String json;
     StaticJsonBuffer<200> jsonBuffer;
-    JsonObject& root = jsonBuffer.createObject();
+    JsonObject &root = jsonBuffer.createObject();
-    if(i == -1){
+    if (i == -1) {
       root["type"] = UI_TITEL;
       root["label"] = String(ui_title);
-    }else{
+    } else {
       root["type"] = controls[i]->type;
       root["label"] = String(controls[i]->label);
       root["value"] = String(controls[i]->value);
+      root["color"] = String(controls[i]->color);
       root["id"] = String(i);
     }
     root.printTo(json);
@@ -148,8 +252,7 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient * client){
   }
 }
 
-
+void ESPUIClass::begin(const char *_title) {
-void ESPUIClass::begin(const char * _title){
   ui_title = _title;
   server = new AsyncWebServer(80);
   ws = new AsyncWebSocket("/ws");
@@ -158,16 +261,16 @@ void ESPUIClass::begin(const char * _title){
   server->addHandler(ws);
   server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
 
-  //Heap for general Servertest
+  // Heap for general Servertest
-  server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request){
+  server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
     request->send(200, "text/plain", String(ESP.getFreeHeap()));
   });
 
-  server->onNotFound([](AsyncWebServerRequest *request){
+  server->onNotFound(
-    request->send(404);
+      [](AsyncWebServerRequest *request) { request->send(404); });
-  });
 
   server->begin();
+  if (debug)
     Serial.println("UI Initialized");
 }
 

src/ESPUI.h

@@ -3,25 +3,28 @@
 
 #define HARDWARE "esp32"
 
-//ifdef 8266
+#define debug true
+
+// ifdef 8266
 //#include "Hash.h"
 
 #include "Arduino.h"
-#include "stdlib_noniso.h"
 #include "ArduinoJson.h"
 #include "FS.h"
 #include "SPIFFS.h"
 #include "WiFi.h"
+#include "stdlib_noniso.h"
 
 #include <AsyncTCP.h>
 #include <ESPAsyncWebServer.h>
 
-typedef struct Control
+typedef struct Control {
-{
   unsigned int type;
+  unsigned int id; // just mirroring the id here for practical reasons
   const char *label;
-    void (*callback)(int, int);
+  void (*callback)(Control, int);
   String value;
+  unsigned int color;
 } Control;
 
 // Types
@@ -52,31 +55,50 @@ typedef struct Control
 #define S_INACTIVE 7
 
 
+// Colors
+#define COLOR_TURQUOISE 0
+#define COLOR_EMERALD 1
+#define COLOR_PETERRIVER 2
+#define COLOR_WETASPHALT 3
+#define COLOR_SUNFLOWER 4
+#define COLOR_CARROT 5
+#define COLOR_ALIZARIN 6
+#define COLOR_NONE 6
 
-class ESPUIClass{
+
+class ESPUIClass {
 
 public:
-  void begin(const char* _title);   // Setup servers and page
+  void begin(const char *_title); // Setup servers and page
 
   // Creating Elements
-  void label(const char* label, String value = ""); // Create Label
+  void label(const char *label, int color, String value = ""); // Create Label
-  void button(const char* label, void(* callBack)(int, int));   // Create Event Button
+  void button(const char *label, void (*callBack)(Control, int), int color,
-  void switcher(const char* label, bool startState, void(* callBack)(int, int));   // Create Toggle Button
+              String value = ""); // Create Event Button
-  void pad(const char* label, bool centerButton, void(* callBack)(int, int));   // Create Pad Control
+  void switcher(const char *label, bool startState,
+                void (*callBack)(Control, int),
+                int color); // Create Toggle Button
+  void pad(const char *label, bool centerButton, void (*callBack)(Control, int),
+           int color); // Create Pad Control
 
   // Update Elements
   void print(int id, String value);
+  void print(String label, String value);
+
   void updateSwitcher(int id, bool nValue);
+  void updateSwitcher(String label, bool nValue);
 
   // Variables ---
-  const char* ui_title = "ESPUI"; // Store UI Title and Header Name
+  const char *ui_title = "ESPUI"; // Store UI Title and Header Name
-  int cIndex;   // Control index
+  int cIndex = 0;                 // Control index
-  Control* controls[25];
+  Control *controls[25];
-  void jsonDom(AsyncWebSocketClient * client);
+  void jsonDom(AsyncWebSocketClient *client);
+  int getIdByLabel(String label);
+  bool labelExists(String label);
 
 private:
-  AsyncWebServer* server;
+  AsyncWebServer *server;
-  AsyncWebSocket* ws;
+  AsyncWebSocket *ws;
 };
 
 extern ESPUIClass ESPUI;

src/HTML_PAGE.h

@@ -1,30 +0,0 @@
-const char HTML_HEAD1[] PROGMEM = R"=====(
-  <!DOCTYPE html>
-  <html lang="en">
-  <head>
-  )=====";
-
-const char HTML_HEAD2[] PROGMEM = R"=====(
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"/>
-
-  <link rel="stylesheet" href="/css/normalize.css">
-  <link rel="stylesheet" href="/css/style.css">
-  </head>
-  <body>
-  <div class="container">
-  )=====";
-
-const char HTML_BODY[] PROGMEM = R"=====(
-  <div class="container">
-    <div id="row" class="row u-full-width">
-    </div>
-  </div>
-  )=====";
-
-const char HTML_END[] PROGMEM = R"=====(
- <script src="/js/sockets.js"></script>
-  </body>
-  </html>
-
-)=====";

src/uploadData.h

@@ -0,0 +1,21 @@
+const char INDEX[] PROGMEM = R"=====(
+  <!DOCTYPE html>
+  <html lang="en">
+  </html>
+)=====";
+
+const char CSS_NORMALIZE[] PROGMEM = R"=====(
+  <style></style>
+)=====";
+
+const char CSS_STYLE[] PROGMEM = R"=====(
+  <style></style>
+)=====";
+
+const char JS_ZEPTO[] PROGMEM = R"=====(
+ <script></script>
+)=====";
+
+const char JS_CONTROLS[] PROGMEM = R"=====(
+ <script></script>
+)=====";