Note on Arduino JSON

- Also authing websockets
- Implemented on begin and beginSpiffs
- Added notes to Gui example

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.gitignore

@@ -26,3 +26,13 @@
 Network Trash Folder
 Temporary Items
 .apdisk
+
+# Linux
+# =========================
+
+# Backup files produced by some editors
+*~
+*.bak
+
+
+.vscode/

ESPUI_blocks.js

@@ -0,0 +1,279 @@
+// This is a block definition for projects like roboblocks
+//
+// Main Block
+Facilino.LANG_COLOUR_HTML = '#BDBDBD';
+Facilino.LANG_COLOUR_ESPUI = '#B1B1B1';
+
+Blockly.Blocks['espui'] = {
+	category: Facilino.locales.getKey('LANG_CATEGORY_HTML'),
+	subcategory: Facilino.locales.getKey('LANG_SUBCATERGORY_ESPUI'),
+	helpUrl: Facilino.getHelpUrl('espui'),
+	tags: ['webinterface'],
+	examples: ['lol.bly'],
+	category_colour: Facilino.LANG_COLOUR_HTML,
+	colour: Facilino.LANG_COLOUR_ESPUI,
+	init: function() {
+		var wifiOptions = [['No', false],['Yes', true]];
+		this.appendDummyInput().appendField('UI Title:').appendField(new Blockly.FieldTextInput(Facilino.locales.getKey('LANG_ESPUI_ESPUI_TITLE')), 'ui_name');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_ESPUI_HOTSPOT')).appendField(new Blockly.FieldDropdown(wifiOptions), 'wifi_option');
+		this.appendStatementInput('ui_elements').setCheck('ui_element');
+		this.setColour(Facilino.LANG_COLOUR_ESPUI);
+		this.setTooltip(Facilino.locales.getKey('LANG_ESPUI_ESPUI_TOOLTIP'));
+	}
+};
+
+Blockly.Arduino['espui'] = function(block) {
+	var ui_name = block.getFieldValue('ui_name');
+	var wifi_option = block.getFieldValue('wifi_option');
+	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'] = '\n';
+	if(wifi_option){
+		Blockly.Arduino.setups_['setup_espui'] +=
+		'    Serial.begin(115200);\n\n' +
+		'    WiFi.mode(WIFI_AP);\n' +
+		'    WiFi.softAP("' + ui_name + '");\n' +
+		'    Serial.print("IP address: ");\n' +
+		'    Serial.println(WiFi.softAPIP());\n\n';
+	}
+	Blockly.Arduino.setups_['setup_espui'] += ui_elements;
+	Blockly.Arduino.setups_['setup_espui'] += '    ESPUI.begin("' + ui_name + '");\n';
+	return null;
+};
+
+//Elements
+
+Blockly.Blocks['espui_button'] = {
+	category: Facilino.locales.getKey('LANG_CATEGORY_HTML'),
+	subcategory: Facilino.locales.getKey('LANG_SUBCATERGORY_ESPUI'),
+	helpUrl: Facilino.getHelpUrl('espui_button'),
+	tags: ['webinterface'],
+	examples: ['lol.bly'],
+	category_colour: Facilino.LANG_COLOUR_HTML,
+	colour: Facilino.LANG_COLOUR_ESPUI,
+	init: function() {
+		var colour = new Blockly.FieldColour('#000000');
+		colour.setColours(['#000000','#40e0d0','#50c878','#3498dc','#687894','#e4d422','#eb8921','#e32636']).setColumns(2);
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_BUTTON_BUTTON')).appendField(new Blockly.FieldTextInput(Facilino.locales.getKey('LANG_ESPUI_NAME')), 'ui_name');
+		//this.appendDummyInput().appendField('UI Color').appendField(new Blockly.FieldDropdown(colorOptions), 'ui_color');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_COLOR')).appendField(colour, 'ui_color');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_TEXT')).appendField(new Blockly.FieldTextInput(Facilino.locales.getKey('LANG_ESPUI_TEXT')), 'button_text');
+		this.setColour(Facilino.LANG_COLOUR_ESPUI);
+		this.setPreviousStatement(true, 'ui_element');
+		this.setNextStatement(true, 'ui_element');
+		this.setTooltip(Facilino.locales.getKey('LANG_ESPUI_BUTTON_TOOLTIP'));
+		this.appendStatementInput('on_down').appendField(new Blockly.FieldImage('img/blocks/button_pressed.svg', 24*options.zoom, 24*options.zoom)).setCheck(null);
+		this.appendStatementInput('on_up').appendField(new Blockly.FieldImage('img/blocks/button_released.svg', 24*options.zoom, 24*options.zoom)).setCheck(null);
+	}
+};
+
+Blockly.Arduino['espui_button'] = function(block) {
+	var ui_name = block.getFieldValue('ui_name');
+	var color = block.getFieldValue('ui_color');
+	var colorOptions = {"#000000": "COLOR_NONE", "#40e0d0": "COLOR_TURQUOISE", "#50c878": "COLOR_EMERALD", "#3498dc": "COLOR_PETERRIVER", "#687894": "COLOR_WETASPHALT", "#e4d422": "COLOR_SUNFLOWER", "#eb8921": "COLOR_CARROT", "#e32636": "COLOR_ALIZARIN"};
+	var ui_color = colorOptions[color];
+	var button_text = block.getFieldValue('button_text');
+	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) {\n' +
+	' switch(type){\n' +
+	'  case B_DOWN:\n' +
+	on_down + '\n    break;\n' +
+	'  case B_UP:\n' +
+	on_up + '\n    break;\n' +
+	' }\n' +
+	'}\n';
+	var code = '  ESPUI.button("' + ui_name + '", &button_' + ui_name_clean + ', ' + ui_color + ', "' + button_text + '");\n';
+	return code;
+};
+
+Blockly.Blocks['espui_label'] = {
+	category: Facilino.locales.getKey('LANG_CATEGORY_HTML'),
+	subcategory: Facilino.locales.getKey('LANG_SUBCATERGORY_ESPUI'),
+	helpUrl: Facilino.getHelpUrl('espui_label'),
+	tags: ['webinterface'],
+	examples: ['lol.bly'],
+	category_colour: Facilino.LANG_COLOUR_HTML,
+	colour: Facilino.LANG_COLOUR_ESPUI,
+	init: function() {
+		var colour = new Blockly.FieldColour('#000000');
+		colour.setColours(['#000000','#40e0d0','#50c878','#3498dc','#687894','#e4d422','#eb8921','#e32636']).setColumns(2);
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_LABEL_LABEL')).appendField(new Blockly.FieldTextInput(Facilino.locales.getKey('LANG_ESPUI_NAME')), 'ui_name');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_COLOR')).appendField(colour, 'ui_color');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_TEXT')).appendField(new Blockly.FieldTextInput('value'), 'start_value');
+		this.setColour(Facilino.LANG_COLOUR_ESPUI);
+		this.setPreviousStatement(true, 'ui_element');
+		this.setNextStatement(true, 'ui_element');
+		this.setTooltip(Facilino.locales.getKey('LANG_ESPUI_LABEL_TOOLTIP'));
+	}
+};
+
+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_HTML'),
+	subcategory: Facilino.locales.getKey('LANG_SUBCATERGORY_ESPUI'),
+	helpUrl: Facilino.getHelpUrl('espui_switcher'),
+	tags: ['webinterface'],
+	examples: ['lol.bly'],
+	category_colour: Facilino.LANG_COLOUR_HTML,
+	colour: Facilino.LANG_COLOUR_ESPUI,
+	init: function() {
+		var colour = new Blockly.FieldColour('#000000');
+		colour.setColours(['#000000','#40e0d0','#50c878','#3498dc','#687894','#e4d422','#eb8921','#e32636']).setColumns(2);
+		var stateOptions = [['Off', 'false'],['On', 'true']];
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_SWITCH_SWITCH')).appendField(new Blockly.FieldTextInput(Facilino.locales.getKey('LANG_ESPUI_NAME')), 'ui_name');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_COLOR')).appendField(colour, 'ui_color');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_STATE')).appendField(new Blockly.FieldDropdown(stateOptions), 'switcher_state');
+		this.setColour(Facilino.LANG_COLOUR_ESPUI);
+		this.setPreviousStatement(true, 'ui_element');
+		this.setNextStatement(true, 'ui_element');
+		this.setTooltip('A web interface button');
+		this.appendStatementInput('on_on').appendField(new Blockly.FieldImage('img/blocks/switch_on.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_off').appendField(new Blockly.FieldImage('img/blocks/switch_off.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+	}
+};
+
+Blockly.Arduino['espui_switcher'] = function(block) {
+	var ui_name = block.getFieldValue('ui_name');
+	var color = block.getFieldValue('ui_color');
+	var colorOptions = {"#000000": "COLOR_NONE", "#40e0d0": "COLOR_TURQUOISE", "#50c878": "COLOR_EMERALD", "#3498dc": "COLOR_PETERRIVER", "#687894": "COLOR_WETASPHALT", "#e4d422": "COLOR_SUNFLOWER", "#eb8921": "COLOR_CARROT", "#e32636": "COLOR_ALIZARIN"};
+	var ui_color = colorOptions[color];
+	var switcher_state = block.getFieldValue('switcher_state');
+	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) {\n' +
+	' switch(type){\n' +
+	'  case S_ACTIVE:\n' +
+	on_on + '\n    break;\n' +
+	'  case S_INACTIVE:\n' +
+	on_off + '\n    break;\n' +
+	' }\n' +
+	'}\n';
+	var code = '  ESPUI.switcher("' + ui_name + '", ' + switcher_state + ', &switcher_' + ui_name_clean + ', ' + ui_color + ');\n';
+	return code;
+};
+
+Blockly.Blocks['espui_pad'] = {
+	category: Facilino.locales.getKey('LANG_CATEGORY_HTML'),
+	subcategory: Facilino.locales.getKey('LANG_SUBCATERGORY_ESPUI'),
+	helpUrl: Facilino.getHelpUrl('espui_pad'),
+	tags: ['webinterface'],
+	examples: ['lol.bly'],
+	category_colour: Facilino.LANG_COLOUR_HTML,
+	colour: Facilino.LANG_COLOUR_ESPUI,
+	init: function() {
+		var colour = new Blockly.FieldColour('#000000');
+		colour.setColours(['#000000','#40e0d0','#50c878','#3498dc','#687894','#e4d422','#eb8921','#e32636']).setColumns(2);
+		var centerOptions = [['Yes', 'false'],['No', 'true']];
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_PAD_PAD')).appendField(new Blockly.FieldTextInput(Facilino.locales.getKey('LANG_ESPUI_NAME')), 'ui_name');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_COLOR')).appendField(colour, 'ui_color');
+		this.appendDummyInput().appendField(Facilino.locales.getKey('LANG_ESPUI_PAD_CENTER')).appendField(new Blockly.FieldDropdown(centerOptions), 'pad_center');
+		this.setColour(Facilino.LANG_COLOUR_ESPUI);
+		this.setPreviousStatement(true, 'ui_element');
+		this.setNextStatement(true, 'ui_element');
+		this.setTooltip('A web interface button');
+		this.appendStatementInput('on_down_for').appendField(new Blockly.FieldImage('img/blocks/controller_up_pressed.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_up_for').appendField(new Blockly.FieldImage('img/blocks/controller_up_released.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_down_back').appendField(new Blockly.FieldImage('img/blocks/controller_down_pressed.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_up_back').appendField(new Blockly.FieldImage('img/blocks/controller_down_released.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_down_left').appendField(new Blockly.FieldImage('img/blocks/controller_right_pressed.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_up_left').appendField(new Blockly.FieldImage('img/blocks/controller_right_released.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_down_right').appendField(new Blockly.FieldImage('img/blocks/controller_left_pressed.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_up_right').appendField(new Blockly.FieldImage('img/blocks/controller_left_released.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_down_center').appendField(new Blockly.FieldImage('img/blocks/controller_center_pressed.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.appendStatementInput('on_up_center').appendField(new Blockly.FieldImage('img/blocks/controller_center_released.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+		this.lastOption=this.getFieldValue('pad_center');
+	},
+	onchange() {
+		if (this.lastOption!==this.getFieldValue('pad_center'))
+		{
+		if (this.getFieldValue('pad_center')==='false')
+		{
+			try{
+				
+				this.removeInput('on_down_center');
+				this.removeInput('on_up_center');
+				this.appendStatementInput('on_down_center').appendField(new Blockly.FieldImage('img/blocks/controller_center_pressed.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+				this.appendStatementInput('on_up_center').appendField(new Blockly.FieldImage('img/blocks/controller_center_released.svg', 24*options.zoom, 24*options.zoom)).setCheck('code');
+			}
+			catch(e)
+			{
+			}
+		}
+		else
+		{
+			try{
+				this.removeInput('on_down_center');
+				this.removeInput('on_up_center');
+			}
+			catch(e)
+			{
+			}
+		}
+		this.lastOption=this.getFieldValue('pad_center');
+		}
+	}
+};
+
+Blockly.Arduino['espui_pad'] = function(block) {
+	var ui_name = block.getFieldValue('ui_name');
+	var color = block.getFieldValue('ui_color');
+	var colorOptions = {"#000000": "COLOR_NONE", "#40e0d0": "COLOR_TURQUOISE", "#50c878": "COLOR_EMERALD", "#3498dc": "COLOR_PETERRIVER", "#687894": "COLOR_WETASPHALT", "#e4d422": "COLOR_SUNFLOWER", "#eb8921": "COLOR_CARROT", "#e32636": "COLOR_ALIZARIN"};
+	var ui_color = colorOptions[color];
+	var pad_center = block.getFieldValue('pad_center');
+	var ui_name_clean = ui_name.replace(' ', '_');
+	var on_down_for = Blockly.Arduino.statementToCode(block, 'on_down_for');
+	var on_up_for = Blockly.Arduino.statementToCode(block, 'on_up_for');
+	var on_down_back = Blockly.Arduino.statementToCode(block, 'on_down_back');
+	var on_up_back = Blockly.Arduino.statementToCode(block, 'on_up_back');
+	var on_down_left = Blockly.Arduino.statementToCode(block, 'on_down_left');
+	var on_up_left = Blockly.Arduino.statementToCode(block, 'on_up_left');
+	var on_down_right = Blockly.Arduino.statementToCode(block, 'on_down_right');
+	var on_up_right = Blockly.Arduino.statementToCode(block, 'on_up_right');
+	var on_down_center = Blockly.Arduino.statementToCode(block, 'on_down_center');
+	var on_up_center = Blockly.Arduino.statementToCode(block, 'on_up_center');
+	Blockly.Arduino.definitions_['define_ui_pad_' + ui_name_clean] =
+	'void pad_' + ui_name_clean + '(Control c, int type) {\n' +
+	' switch(type){\n' +
+	'   case P_FOR_DOWN:\n' +
+	on_down_for + '\n    break;\n' +
+	'   case P_FOR_UP:\n' +
+	on_up_for + '\n    break;\n' +
+
+	'   case P_BACK_DOWN:\n' +
+	on_down_back + '\n    break;\n' +
+	'   case P_BACK_UP:\n' +
+	on_up_back + '\n   break;\n' +
+
+	'   case P_RIGHT_DOWN:\n' +
+	on_down_left + '\n    break;\n' +
+	'   case P_RIGHT_UP:\n' +
+	on_up_left + '\n    break;\n' +
+
+	'  case P_LEFT_DOWN:\n' +
+	on_down_right + '\n    break;\n' +
+	'  case P_LEFT_UP:\n' +
+	on_up_right + '\n    break;\n' +
+
+	'  case P_CENTER_DOWN:\n' +
+	on_down_center + '\n    break;\n' +
+	'  case P_CENTER_UP:\n' +
+	on_up_center + '\n    break;\n' +
+	' }\n' +
+	'}\n';
+	var code = '  ESPUI.pad("' + ui_name + '", ' + pad_center + ', &pad_' + ui_name_clean + ', ' + ui_color + ');\n';
+	return code;
+};

README.md

@@ -1,82 +1,250 @@
 # ESPUI
-![ESPUI Controlpad](https://github.com/s00500/ESPUI/blob/master/docs/controlpad.png)
-![ESPUI Switch](https://github.com/s00500/ESPUI/blob/master/docs/switch.png)
 
+![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png)
 
-ESPUI is a simple library to make a web user interface for your projects using the **ESP32**
+ESPUI is a simple library to make a web user interface for your projects using
-It uses web sockets and lets you create, control, and update elements on your GUI through multiple devices like phones and tablets.
+the **ESP8266** or the **ESP32** It uses web sockets and lets you create,
+control, and update elements on your GUI through multiple devices like phones
+and tablets.
 
-ESPUI uses simple Arduino-style syntax for creating a solid, functioning user interface without too much boilerplate code.
+ESPUI uses simple Arduino-style syntax for creating a solid, functioning user
+interface without too much boilerplate code.
 
-So if you either don't know how or just don't want to waste time: this is your simple solution user interface without the need of internet connectivity or any additional servers.
+So if you either don't know how or just don't want to waste time: this is your
+simple solution user interface without the need of internet connectivity or any
+additional servers.
 
-I completely rewrote the EasyUI Library created by ayushsharma82 [Here](https://github.com/ayushsharma82/)
+I completely rewrote the EasyUI Library created by ayushsharma82
-Now it uses ESPAsyncWebserver and is mainly to be used with the ESP32 Processor.
+[Here](https://github.com/ayushsharma82/) Now it uses ESPAsyncWebserver and is
-ESP8266 support will be interesting maybe in the future.
+mainly to be used with the ESP32 Processor.
 
-## Getting started (Filesystem upload)
+# Important notes
 
-ESPUI **NEEDS** its files burnt on the SPIFFS filesystem on the ESP. **Without this ESPUI will NOT work at all**
+Currently ESPUI only supports ArduinoJSON 5.x, please keep that in mind! Version
-
+6 support is work in progress
-To do this download and install me-no-devs wonderful [ESP32 sketch data uploader](https://github.com/me-no-dev/arduino-esp32fs-plugin)
-
-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)
 
+This library is dependent on the following libraries to function properly.
+
+- [ESPAsyncWebserver](https://github.com/me-no-dev/ESPAsyncWebServer)
+- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) **(VERSIONS 5.x only
+  currently)**
+
+**Plus for ESP8266**
+
+- [ESPAsyncTCP](https://github.com/me-no-dev/ESPAsyncTCP)
+
+**Additionally necessary for ESP32**
+
+- [AsyncTCP](https://github.com/me-no-dev/AsyncTCP)
+
+## How to Install
+
+Make sure all the dependencies are installed, then install like so:
+
+#### Directly Through Arduino IDE (_recommended_)
+
+You can find this Library in the Arduino IDE library manager Go to Sketch >
+Include Library > Library Manager > Search for "ESPUI" > 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
+
+ESPUI serves several files to the browser to build up its webinterface. This can
+be achieved in 2 ways: _PROGMEM_ or _SPIFFS_
+
+_When `ESPUI.begin()` is called the default is serving files from Memory and
+ESPUI should work out of the box!_
+
+But if this causes your program to _use too much memory_ you can burn the files
+into the SPIFFS filesystem on the ESP. There are now two ways to do this: you
+can either use the ESP file upload tool or you use the library function
+`ESPUI.prepareFileSystem()`
+
+#### Simple filesystem preparation (_recommended_)
+
+Just open the example sketch **prepareFileSystem** and run it on the ESP, (give
+it up to 30 seconds, you can see the status on the Serial Monitor), The library
+will create all needed files. Congratulations, you are done, from now on you
+just need to to this again when there is a library update, or when you want to
+use another chip :-) Now you can upload your normal sketch, when you do not call
+the `ESPUI.prepareFileSystem()` function the compiler will strip out all the
+unnecessary that is already saved in the chip's filesystem and you have more
+programm memory to work with.
+
+#### Manual way (mainly for development)
+
+To do this download and install me-no-devs wonderful
+[ESP32 sketch data uploader](https://github.com/me-no-dev/arduino-esp32fs-plugin)
+or for ESP8266
+[ESP8266 sketch data uploader](https://github.com/esp8266/arduino-esp8266fs-plugin)
+
+Then open the **gui** example sketch and select "Upload Sketch Data" from the
+Tools menu for your processor. Now you are set to go and use any code you want
+to with this library
 
 ## User interface Elements
-  - Label (updateable)
-  - Button
-  - Switch (updateable)
-  - Control pad
-  - Control pad with center button
 
-  Checkout the example for the usage
+- Label (updateable)
+- Button
+- Switch (updateable)
+- Control pad
+- Control pad with center button
+- Slider
+- Text Input (updateable)
+- Numberinput (updateable)
+
+Checkout the example for the usage
+
+## Available colors:
+
+- COLOR_TURQUOISE
+- COLOR_EMERALD
+- COLOR_PETERRIVER
+- COLOR_WETASPHALT
+- COLOR_SUNFLOWER
+- COLOR_CARROT
+- COLOR_ALIZARIN
+- COLOR_NONE
 
 ## Roadmap :
 
-- refactor id system
+- ~~Setup SPIFFS using values in program memory~~
-- make button colour customisable
+- ~~ESP8266 support~~
-- do a proper redesign
+- ~~PlattformIO Integration~~
-- cleanup unnecessary CSS
+- ~~Multiline Labels~~
-- gzip files to make them load faster
+- ~~GZip Files and serve from memory~~
-- setup spiffs using values in program memory ? (if you have feedback to this idea let me know)
+- Datagraph output -> _WIP_
-- ESP8266 support
+- ~~Number input ~~
+- ~~Text input ~~
+- Dokumentation for Text and number widget
+- Number min and max value
+- proper return value (as int and not as string) for slider
+- Maybe a slider range setting, meanwhile please use _map()_
 
 ## Documentation
 
-The heart of ESPUI is [ESPAsyncWebserver](https://github.com/me-no-dev/ESPAsyncWebServer).
+The heart of ESPUI is
-ESPUI's frontend is based on [Skeleton CSS](http://getskeleton.com/) and jQuery-like lightweight [zepto.js](https://zeptojs.com/) for Handling Click Events Etc. The communication between the *ESP32* and the client browser works using web sockets.
+[ESPAsyncWebserver](https://github.com/me-no-dev/ESPAsyncWebServer). ESPUI's
-ESPUI does not need network access and can be used in standalone access point mode.
+frontend is based on [Skeleton CSS](http://getskeleton.com/) and jQuery-like
-All assets are loaded from the internal SPIFFS filesystem of the ESP32.
+lightweight [zepto.js](https://zeptojs.com/) for Handling Click Events Etc. The
+communication between the _ESP32_ and the client browser works using web
+sockets. 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 “myCallback” 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 separate 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
+initialised.
+
+Labels automatically wrap your text. If you want them to have multiple lines use
+the normal `<br>` tag in the string you print to the label
+
+#### Slider
+
+![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
+
+After all the elements are configured you can use `ESPUI.begin(“Some Title”);`
+to start the UI interface. (Or `ESPUI.beginSPIFFS(“Some Title”);` respectively)
+Make sure you setup a working network connection or AccesPoint **before** (See
+example). 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.
+
+# Notes for Development
+
+If you want to work on the HTML/CSS/JS files, do make changes in the
+`examples/gui/data` directory. When you need to transfer that code to the ESP,
+run `tools/prepare_static_ui_sources.py -a` (this script needs python3 with the
+modules htmlmin, jsmin and csscompressor). This will generate a) minified files
+next to the original files to be uploaded with the ESP32 sketch data uploader
+mentioned above and b) the C header files in `src` that contain the minified and
+gzipped HTML/CSS/JS data (which are used by the **prepareFileSystem** example
+sketch or when they are served from PROGMEM; see above in the section "Getting
+started"). Alternatively, you can duplicate the `examples/gui` directory and
+work on the copy. Then specify the `--source` and `--target` arguments to the
+`prepare_static_ui_sources.py` script (run the script without arguments for
+help).
+
+If you don't have a python environment, you need to minify and gzip the
+HTML/CSS/JS files manually. I wrote a little useful jsfiddle for this,
+[see here](https://jsfiddle.net/s00500/yvLbhuuv/).
+
+If you change something in HTML/CSS/JS and want to create a pull request, please
+do include the minified versions and corresponding C header files in your
+commits.
 
 # 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).

examples/gui/data/css/normalize.min.css

@@ -0,0 +1 @@
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

examples/gui/data/index.htm

@@ -1,23 +1,28 @@
 <!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>
-    <body onload="javascript:start();">
 
-      <div><h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
+  <script src="/js/zepto.min.js"></script>
+  <script src="/js/slider.js"></script>
+  <script src="/js/controls.js"></script>
+</head>
+
+<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">
     </div>
   </div>
+</body>
 
-     <script src="/js/zepto.js"></script>
-     <script src="/js/controls.js"></script>
-    </body>
 </html>

examples/gui/data/index.min.htm

@@ -0,0 +1 @@
+<!DOCTYPE html><html> <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=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/controls.js></script></head> <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"> </div> </div> </body> </html> 

examples/gui/data/js/controls.js

@@ -1,11 +1,29 @@
+const UI_INITIAL_GUI = 100;
 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;
@@ -13,150 +31,457 @@ 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;
+const C_DARK = 8;
+
+function colorClass(colorId) {
+  colorId = Number(colorId);
+  switch (colorId) {
+    case C_TURQUOISE:
+      return "turquoise";
+
+    case C_EMERALD:
+      return "emerald";
+
+    case C_PETERRIVER:
+      return "peterriver";
+
+    case C_WETASPHALT:
+      return "wetasphalt";
+
+    case C_SUNFLOWER:
+      return "sunflower";
+
+    case C_CARROT:
+      return "carrot";
+
+    case C_ALIZARIN:
+      return "alizarin";
+
+    case C_NONE:
+      return "dark";
+    default:
+      return "";
+  }
+}
+
 var websock;
+var websockConnected = false;
+
+function restart() {
+  $(document)
+    .add("*")
+    .off();
+  $("#row").html("");
+  websock.close();
+  start();
+}
+
+function conStatusError() {
+  websockConnected = false;
+  $("#conStatus").removeClass("color-green");
+  $("#conStatus").addClass("color-red");
+  $("#conStatus").html("Error / No Connection ↻");
+  $("#conStatus").off();
+  $("#conStatus").on({
+    click: restart
+  });
+}
+
+function handleVisibilityChange() {
+  if (!websockConnected && !document.hidden) {
+    restart();
+  }
+}
 
 function start() {
-  websock = new WebSocket('ws://' + window.location.hostname + '/ws');
+  document.addEventListener("visibilitychange", handleVisibilityChange, false);
+  websock = new WebSocket("ws://" + window.location.hostname + "/ws");
   websock.onopen = function(evt) {
-    console.log('websock open');
+    console.log("websock open");
     $("#conStatus").addClass("color-green");
     $("#conStatus").text("Connected");
+    websockConnected = true;
   };
+
   websock.onclose = function(evt) {
-    console.log('websock close');
+    console.log("websock close");
-    $("#conStatus").removeClass("color-green");
+    conStatusError();
-    $("#conStatus").addClass("color-red");
-    $("#conStatus").text("Error / No Connection");
   };
+
   websock.onerror = function(evt) {
     console.log(evt);
-    $("#conStatus").removeClass("color-green");
+    conStatusError();
-    $("#conStatus").addClass("color-red");
-    $("#conStatus").text("Error / No Connection");
   };
-  websock.onmessage = function(evt) {
+
-    console.log(evt);
+  var handleEvent = function(evt) {
+    //console.log(evt);
     var data = JSON.parse(evt.data);
     var e = document.body;
     var center = "";
-    switch(data.type){
+    switch (data.type) {
+      case UI_INITIAL_GUI:
+        data.controls.forEach(element => {
+          var fauxEvent = {
+            data: JSON.stringify(element)
+          };
+          handleEvent(fauxEvent);
+        });
+        break;
       case UI_TITEL:
         document.title = data.label;
-        $('#mainHeader').html(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 label-wrap'>" +
+            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(
-        $('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } });
+          "<div class='one columns card tcenter " +
-        $('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
+            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({
+          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 =
-      if(data.value == "0"){
+          "<div class='in'><input type='checkbox' id='s" +
-        label = "<label id='sl"+data.id+"' class='switch'>";
+          data.id +
-        input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' >";
+          "' onClick='switcher(" +
+          data.id +
+          ",null)' checked></div>";
+        if (data.value == "0") {
+          label = "<label id='sl" + data.id + "' class='switch'>";
+          input =
+            "<div class='in'><input type='checkbox' id='s" +
+            data.id +
+            "' onClick='switcher(" +
+            data.id +
+            ",null)' ></div>";
         }
-      $('#row').append(
+        $("#row").append(
-      "<div id='"+data.id+"' class='two columns card'><h5>"+data.label+"</h5><hr/>" +
+          "<div id='" +
-      label + "<i class='icon-ok'></i>" +
+            data.id +
-      "<i class='icon-remove'></i>" + input +
+            "' class='one columns card tcenter " +
+            colorClass(data.color) +
+            "'><h5>" +
+            data.label +
+            "</h5><hr/>" +
+            label +
+            input +
             "</label>" +
-      "</div>");
+            "</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(
+        $("#row").append(
-      "<div class='two columns card'><h5>"+data.label+"</h5><hr/>"+
+          "<div class='two columns card tcenter " +
-      "<nav class='control'>"+
+            colorClass(data.color) +
-      "<ul>"+
+            "'><h5>" +
-      "<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='pf"+data.id+"'>▲</a></li>" +
+            data.label +
-      "<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='pr"+data.id+"'>▲</a></li>" +
+            "</h5><hr/>" +
-      "<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='pl"+data.id+"'>▲</a></li>" +
+            "<nav class='control'>" +
-      "<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='pb"+data.id+"'>▲</a></li>" +
+            "<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(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(BACK, " +
+            data.id +
+            ", true)' onmouseup='padclick(BACK, " +
+            data.id +
+            ", false)' href='#' id='pb" +
+            data.id +
+            "'>▲</a></li>" +
+            "</ul>" +
             center +
-      "</nav>"+
+            "</nav>" +
-      "</div>");
+            "</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);
-        switcher(data.id, 0);
+        else switcher(data.id, 1);
-      else
-        switcher(data.id, 1);
         break;
+      case UI_SLIDER:
+        $("#row").append(
+          "<div class='two columns card tcenter card-slider " +
+            colorClass(data.color) +
+            "'>" +
+            "<h5 id='" +
+            data.id +
+            "'>" +
+            data.label +
+            "</h5><hr />" +
+            "<div id='sl" +
+            data.id +
+            "' class='rkmd-slider slider-discrete slider-" +
+            colorClass(data.color) +
+            "'>" +
+            "<input type='range' min='0' max='100' value='" +
+            data.value +
+            "'>" +
+            "</div>" +
+            "</div>"
+        );
+        $("#row").append(
+          "<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
+        );
+        break;
+
+      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 style='color:black;' 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 style='color:black;' id='text" +
+            data.id +
+            "' value='" +
+            data.value +
+            "' onchange='textchange(" +
+            data.id +
+            ")' />" +
+            "</div>"
+        );
+        break;
+
+      case UPDATE_TEXT_INPUT:
+        $("#text" + data.id).val(data.value);
+        break;
+
       default:
-        console.error('Unknown type or event');
+        console.error("Unknown type or event");
         break;
     }
   };
+
+  websock.onmessage = handleEvent;
 }
 
+function numberchange(number) {
+  var val = $("#num" + number).val();
+  websock.send("nvalue:" + val + ":" + number);
+  console.log(val);
+}
+
+function textchange(number) {
+  var val = $("#text" + number).val();
+  websock.send("tvalue:" + val + ":" + number);
+  console.log(val);
+}
 
 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/data/js/controls.min.js

@@ -0,0 +1,142 @@
+const UI_INITIAL_GUI=100;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 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;const RIGHT=3;const CENTER=4;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;const C_DARK=8;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
+var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
+function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});}
+function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
+function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#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 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>");$("#"+data.id).on({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 input="<div class='in'><input type='checkbox' id='s"+
+data.id+
+"' onClick='switcher("+
+data.id+
+",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+
+data.id+
+"' onClick='switcher("+
+data.id+
+",null)' ></div>";}
+$("#row").append("<div id='"+
+data.id+
+"' class='one columns card tcenter "+
+colorClass(data.color)+
+"'><h5>"+
+data.label+
+"</h5><hr/>"+
+label+
+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='pc"+
+data.id+
+"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+
+colorClass(data.color)+
+"'><h5>"+
+data.label+
+"</h5><hr/>"+
+"<nav class='control'>"+
+"<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(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(BACK, "+
+data.id+
+", true)' onmouseup='padclick(BACK, "+
+data.id+
+", false)' href='#' id='pb"+
+data.id+
+"'>▲</a></li>"+
+"</ul>"+
+center+
+"</nav>"+
+"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(FOR,data.id,true);}});$("#pf"+data.id).on({touchend:function(e){e.preventDefault();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);break;case UPDATE_SWITCHER:if(data.value=="0")switcher(data.id,0);else switcher(data.id,1);break;case UI_SLIDER:$("#row").append("<div class='two columns card tcenter card-slider "+
+colorClass(data.color)+
+"'>"+
+"<h5 id='"+
+data.id+
+"'>"+
+data.label+
+"</h5><hr />"+
+"<div id='sl"+
+data.id+
+"' class='rkmd-slider slider-discrete slider-"+
+colorClass(data.color)+
+"'>"+
+"<input type='range' min='0' max='100' value='"+
+data.value+
+"'>"+
+"</div>"+
+"</div>");$("#row").append("<script>"+"rkmd_rangeSlider('#sl"+data.id+"');"+"</script>");break;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 style='color:black;' 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 style='color:black;' id='text"+
+data.id+
+"' value='"+
+data.value+
+"' onchange='textchange("+
+data.id+
+")' />"+
+"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;}
+function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);}
+function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);}
+function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
+function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case FOR:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case BACK:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
+function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}

examples/gui/data/js/slider.js

@@ -0,0 +1,125 @@
+/* -----------------------------------------------------
+  Material Design Sliders
+  CodePen URL: https://codepen.io/rkchauhan/pen/xVGGpR
+  By: Ravikumar Chauhan
+-------------------------------------------------------- */
+function rkmd_rangeSlider(selector) {
+    var self, slider_width, slider_offset, curnt, sliderDiscrete, range, slider;
+    self = $(selector);
+    slider_width = self.width();
+    slider_offset = self.offset().left;
+    sliderDiscrete = self;
+
+    sliderDiscrete.each(function(i, v) {
+        curnt = $(this);
+        curnt.append(sliderDiscrete_tmplt());
+        range = curnt.find('input[type="range"]');
+        slider = curnt.find('.slider');
+        slider_fill = slider.find('.slider-fill');
+        slider_handle = slider.find('.slider-handle');
+        slider_label = slider.find('.slider-label');
+
+        var range_val = parseInt(range.val());
+        slider_fill.css('width', range_val + '%');
+        slider_handle.css('left', range_val + '%');
+        slider_label.find('span').text(range_val);
+    });
+
+    self.on('mousedown touchstart', '.slider-handle', function(e) {
+        if (e.button === 2) {
+            return false;
+        }
+        var parents = $(this).parents('.rkmd-slider');
+        var slider_width = parents.width();
+        var slider_offset = parents.offset().left;
+        var check_range = parents.find('input[type="range"]').is(':disabled');
+        if (check_range === true) {
+            return false;
+        }
+        $(this).addClass('is-active');
+        var moveFu =
+            function(e) {
+                var pageX = e.pageX || e.changedTouches[0].pageX;
+                var slider_new_width = pageX - slider_offset;
+                if (slider_new_width <= slider_width && !(slider_new_width < '0')) {
+                    slider_move(parents, slider_new_width, slider_width, true);
+                }
+            };
+        var upFu =
+            function(e) {
+                $(this).off(handlers);
+                parents.find('.is-active').removeClass('is-active');
+            };
+
+        var handlers = {
+            mousemove: moveFu,
+            touchmove: moveFu,
+            mouseup: upFu,
+            touchend: upFu
+        };
+        $(document).on(handlers);
+    });
+
+    self.on('mousedown touchstart', '.slider', function(e) {
+        if (e.button === 2) {
+            return false;
+        }
+
+        var parents = $(this).parents('.rkmd-slider');
+        var slider_width = parents.width();
+        var slider_offset = parents.offset().left;
+        var check_range = parents.find('input[type="range"]').is(':disabled');
+
+        if (check_range === true) {
+            return false;
+        }
+
+        var slider_new_width = e.pageX - slider_offset;
+        if (slider_new_width <= slider_width && !(slider_new_width < '0')) {
+            slider_move(parents, slider_new_width, slider_width, true);
+        }
+        var upFu =
+        function(e) {
+            $(this).off(handlers);
+        };
+
+        var handlers = {
+            mouseup: upFu,
+            touchend: upFu
+        };
+        $(document).on(handlers);
+
+    });
+};
+
+function sliderDiscrete_tmplt() {
+    var tmplt = '<div class="slider">' +
+        '<div class="slider-fill"></div>' +
+        '<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>' +
+        '</div>';
+
+    return tmplt;
+}
+
+function slider_move(parents, newW, sliderW, send) {
+    var slider_new_val = parseInt(Math.round(newW / sliderW * 100));
+
+    var slider_fill = parents.find('.slider-fill');
+    var slider_handle = parents.find('.slider-handle');
+    var range = parents.find('input[type="range"]');
+
+    slider_fill.css('width', slider_new_val + '%');
+    slider_handle.css({
+        'left': slider_new_val + '%',
+        'transition': 'none',
+        '-webkit-transition': 'none',
+        '-moz-transition': 'none'
+    });
+
+    range.val(slider_new_val);
+    if (parents.find('.slider-handle span').text() != slider_new_val) {
+        parents.find('.slider-handle span').text(slider_new_val);
+        var number = parents.attr('id').substring(2);
+        if (send) websock.send('slvalue:' + slider_new_val + ':' + number);
+    }
+}

examples/gui/data/js/slider.min.js

@@ -0,0 +1,10 @@
+function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find('.slider');slider_fill=slider.find('.slider-fill');slider_handle=slider.find('.slider-handle');slider_label=slider.find('.slider-label');var range_val=parseInt(range.val());slider_fill.css('width',range_val+'%');slider_handle.css('left',range_val+'%');slider_label.find('span').text(range_val);});self.on('mousedown touchstart','.slider-handle',function(e){if(e.button===2){return false;}
+var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
+$(this).addClass('is-active');var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find('.is-active').removeClass('is-active');};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on('mousedown touchstart','.slider',function(e){if(e.button===2){return false;}
+var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
+var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}
+var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});};function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
+'<div class="slider-fill"></div>'+
+'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
+'</div>';return tmplt;}
+function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round(newW/sliderW*100));var slider_fill=parents.find('.slider-fill');var slider_handle=parents.find('.slider-handle');var range=parents.find('input[type="range"]');slider_fill.css('width',slider_new_val+'%');slider_handle.css({'left':slider_new_val+'%','transition':'none','-webkit-transition':'none','-moz-transition':'none'});range.val(slider_new_val);if(parents.find('.slider-handle span').text()!=slider_new_val){parents.find('.slider-handle span').text(slider_new_val);var number=parents.attr('id').substring(2);if(send)websock.send('slvalue:'+slider_new_val+':'+number);}}

examples/gui/gui.ino

@@ -1,57 +1,29 @@
-#include <WiFi.h>
+#include <DNSServer.h>
-#include <EasyUI.h>
+#include <ESPUI.h>
 
-const char* ssid = "ESP32";
+const byte DNS_PORT = 53;
-const char* password = "";
+IPAddress apIP(192, 168, 1, 1);
+DNSServer dnsServer;
+
+#if defined(ESP32)
+#include <WiFi.h>
+#else
+#include <ESP8266WiFi.h>
+#endif
+
+const char *ssid = "ESPUI";
+const char *password = "";
 
 long oldTime = 0;
+bool switchi = false;
 
-void setup(void) {
+void numberCall(Control sender, int type) { Serial.println(sender.value); }
-  Serial.begin(115200);
-  WiFi.mode(WIFI_AP);
-  WiFi.setHostname(ssid);
-  WiFi.softAP(ssid);
-  //WiFi.softAP(ssid, password);
-  Serial.println("");
-  Serial.print("IP address: ");
-  Serial.println(WiFi.softAPIP());
 
-  // change the beginning to this if you want to join an existing network
+void textCall(Control sender, int type) { Serial.println(sender.value); }
-  /*
-    Serial.begin(115200);
-    WiFi.begin(ssid, password);
-    Serial.println("");
-    // Wait for connection
-    while (WiFi.status() != WL_CONNECTED) {
-    delay(500);
-    Serial.print(".");
-    }
-    Serial.println("");
-    Serial.print("IP address: ");
-    Serial.println(WiFi.localIP());
-  */
 
-  EasyUI.label("Status: Stop");
+void slider(Control sender, int type) { Serial.println(sender.value); }
-  EasyUI.label("0");
-  EasyUI.button("Push Button", &buttonCallback);
-  EasyUI.button("Push Button", &buttonExample);
-  EasyUI.pad("center", true, &padExample);
-  EasyUI.pad("NoCenter", false, &padExample);
-  EasyUI.switcher("Switch one", false, &switchExample);
-  EasyUI.switcher("Switch two", true, &otherSwitchExample);
 
-  EasyUI.begin("ESP32 Control");
+void buttonCallback(Control sender, int type) {
-
-}
-
-void loop(void) {
-  if (millis() - oldTime > 5000) {
-    EasyUI.print(1, String(millis()));
-    oldTime = millis();
-  }
-}
-
-void buttonCallback(int id, int type) {
   switch (type) {
     case B_DOWN:
       Serial.println("Button DOWN");
@@ -60,22 +32,21 @@ 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");
-      EasyUI.print(0, "Status: Start");
+      ESPUI.print(0, "Status: Start");
       break;
     case B_UP:
       Serial.println("Status: Stop");
-      EasyUI.print(0, "Status: Stop");
+      ESPUI.print(0, "Status: Stop");
       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 +80,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 +93,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 +106,80 @@ void otherSwitchExample(int id, int value) {
       break;
   }
   Serial.print(" ");
-  Serial.println(id);
+  Serial.println(sender.id);
+}
+
+void setup(void) {
+  Serial.begin(115200);
+  WiFi.mode(WIFI_AP);
+  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+  /*
+  #if defined(ESP32)
+    WiFi.setHostname(ssid);
+  #else
+    WiFi.hostname(ssid);
+  #endif
+  */
+
+  WiFi.softAP(ssid);
+  // WiFi.softAP(ssid, password);
+  Serial.println("");
+  Serial.print("IP address: ");
+  Serial.println(WiFi.softAPIP());
+
+  // change the beginning to this if you want to join an existing network
+  /*
+     Serial.begin(115200);
+     WiFi.begin(ssid, password);
+     Serial.println("");
+     // Wait for connection
+     while (WiFi.status() != WL_CONNECTED) {
+     delay(500);
+     Serial.print(".");
+     }
+     Serial.println("");
+     Serial.print("IP address: ");
+     Serial.println(WiFi.localIP());
+   */
+
+  ESPUI.label("Status:", COLOR_TURQUOISE, "Stop");
+  ESPUI.label("Millis:", COLOR_EMERALD, "0");
+  ESPUI.button("Push Button", &buttonCallback, COLOR_PETERRIVER);
+  ESPUI.button("Other Button", &buttonExample, COLOR_WETASPHALT, "Press");
+  ESPUI.pad("Pad with center", true, &padExample, COLOR_SUNFLOWER);
+  ESPUI.pad("Pad without center", false, &padExample, COLOR_CARROT);
+  ESPUI.switcher("Switch one", false, &switchExample, COLOR_ALIZARIN);
+  ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
+  ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30");
+  ESPUI.slider("Slider two", &slider, COLOR_NONE, "100");
+  ESPUI.text("Text Test:", &textCall, COLOR_ALIZARIN, "a Text Field");
+  ESPUI.number("Numbertest", &numberCall, COLOR_ALIZARIN, 5, 0, 10);
+
+  /*
+     .begin loads and serves all files from PROGMEM directly.
+     If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
+     (.prepareFileSystem has to be run in an empty sketch before)
+   */
+
+  dnsServer.start(DNS_PORT, "*", apIP);
+
+  /*
+   * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+   SECURE way of limiting access.
+   * Anyone who is able to sniff traffic will be able to intercept your password
+   since it is transmitted in cleartext ESPUI.begin("ESPUI Control", "myuser",
+   "mypassword");
+  */
+  ESPUI.begin("ESPUI Control");
+}
+
+void loop(void) {
+  dnsServer.processNextRequest();
+
+  if (millis() - oldTime > 5000) {
+    ESPUI.print("Millis:", String(millis()));
+    switchi = !switchi;
+    ESPUI.updateSwitcher("Switch one", switchi);
+    oldTime = millis();
+  }
 }

examples/prepareFilesystem/prepareFilesystem.ino

@@ -0,0 +1,9 @@
+#include <ESPUI.h>
+
+void setup(void) {
+  Serial.begin(115200);
+  ESPUI.prepareFileSystem();
+}
+
+void loop() {
+}

img/blocks/acknowledgements.html

@@ -0,0 +1,2 @@
+<div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
+<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>

img/blocks/button_pressed.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 297 297" style="enable-background:new 0 0 297 297;" xml:space="preserve">
+<g>
+	<path d="M252.07,167.87c-4.949-29.482-26.585-35.193-35.98-36.267c-6.673-8.979-16.33-13.892-27.432-13.892
+		c-2.664,0-5.165,0.28-7.412,0.697c-6.587-7.587-15.832-11.686-26.139-11.686c-0.209,0-0.906,0.002-0.906,0.005v-9.013
+		c15-9.416,24.883-25.934,24.883-44.716c0-29.225-23.635-53-52.859-53S73.066,23.775,73.066,53c0,18.65,10.135,35.069,24.135,44.518
+		v43.873l-0.429-1.012c-5.388-8.765-13.937-13.786-23.688-13.787c-10.507-0.001-20.581,5.932-25.753,15.112
+		c-4.941,8.77-4.662,18.985,0.701,28.089l62.342,119.392c2.486,4.759,7.382,7.815,12.751,7.815h87.757
+		c7.578,0,13.879-6.025,14.343-13.59l2.04-33.263C249.032,216.644,256.227,192.64,252.07,167.87z M85.136,53
+		c0-22.607,18.508-41,41.115-41s40.776,18.393,40.776,41c0,11.592-4.826,22.066-12.826,29.531V69.753
+		c0-3.05-0.842-8.673-0.842-8.673c0.761-2.562,1.259-5.271,1.259-8.08c0-15.649-12.643-28.335-28.293-28.335
+		c-15.648,0-28.313,12.686-28.313,28.335c0,2.568,0.364,5.053,1.005,7.419c-0.017,0.052-0.199,0.101-0.216,0.152
+		c-0.909,2.859-1.599,5.939-1.599,9.182v12.484C90.201,74.793,85.136,64.438,85.136,53z M215.832,245.648
+		c-0.228,0.345-0.364,0.747-0.39,1.16l-2.196,35.866c-0.076,1.25-1.112,2.325-2.365,2.325h-87.757c-0.883,0-1.692-0.591-2.1-1.373
+		L58.539,163.986c-7.93-13.086,3.246-25.37,14.658-25.369c5.049,0,10.146,2.388,13.653,8.176l7.994,12.275
+		c1.653,2.54,3.943,3.674,6.438,3.674c4.107,0,7.918-3.088,7.918-8.077V69.753c0-11.035,8.224-16.552,16.5-16.552
+		c8.276,0,16.5,5.517,16.5,16.552v48.273c0,1.346,1.381,2.376,2.637,2.376c0.236,0,0.618-0.037,0.86-0.114
+		c2.311-0.744,5.794-1.564,9.619-1.564c6.569,0,14.385,2.422,19.857,11.809c0.462,0.792,1.311,1.262,2.181,1.262
+		c0.278,0,0.57-0.049,0.845-0.15c2.201-0.81,6.048-1.932,10.454-1.932c6.133,0,13.357,2.176,18.744,10.4
+		c1.285,1.962,3.461,3.149,5.801,3.282c7.438,0.422,23.267,4.01,27.036,26.462C243.853,191.414,237.617,212.653,215.832,245.648z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

img/blocks/button_released.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 285.328 285.328" style="enable-background:new 0 0 285.328 285.328;" xml:space="preserve">
+<g>
+	<path d="M230.71,155.764c-2.799-16.547-11.149-25.21-17.662-29.563c-6.352-4.246-12.953-5.882-18.102-6.433
+		c-6.64-8.881-16.195-13.73-27.209-13.73c-2.417-0.001-4.878,0.231-7.351,0.69c-5.867-6.705-13.708-10.661-22.569-11.403
+		c12.83-9.682,21.14-25.049,21.14-42.324c0-29.225-23.775-53-53-53s-53,23.775-53,53c0,18.704,9.748,35.163,24.421,44.599
+		l0.017,13.992l0.041,33.745c-7.59,4.057-12.837,10.48-15.269,18.749c-3.746,12.739-0.76,29.147,9.13,50.16
+		c6.509,13.827,14.322,25.924,18.062,31.44l1.658,22.07c0.74,9.854,9.061,17.572,18.942,17.572l78.646-0.097
+		c9.489-0.012,17.576-7.115,18.812-16.523l3.054-23.263C229.043,216.331,235.851,186.165,230.71,155.764z M77.33,58.413L77.36,82.34
+		C69.716,74.889,64.957,64.492,64.957,53c0-22.607,18.393-41,41-41c22.607,0,41,18.393,41,41c0,11.683-4.919,22.23-12.785,29.706
+		l-0.029-24.361c-0.011-8.464-3.266-16.01-9.166-21.25c-5.172-4.593-12.005-7.123-19.238-7.123c-7.751,0-15.192,2.999-20.414,8.228
+		C80.085,43.445,77.321,50.436,77.33,58.413z M199.797,239.861c-0.565,0.873-0.939,1.863-1.075,2.895l-3.202,24.389
+		c-0.456,3.479-3.419,6.249-6.928,6.254l-78.623,0.265c-0.003,0-0.006,0-0.009,0c-3.66,0-6.702-2.989-6.976-6.64l-1.76-23.493
+		c-0.093-1.235-0.509-2.46-1.211-3.48c-7.197-10.457-47.38-71.494-14.839-85.098c2.59-1.082,4.268-3.631,4.265-6.438
+		c-0.021-16.613-0.086-71.755-0.109-90.112c-0.014-10.948,8.197-16.429,16.408-16.429c8.195,0,16.391,5.458,16.404,16.385
+		l0.05,42.287c0.005,3.916,3.194,6.986,6.974,6.986c0.362,0,0.729-0.028,1.1-0.087c1.39-0.219,2.9-0.36,4.48-0.36
+		c5.907,0,12.798,1.978,18.078,9.293c1.312,1.816,3.41,2.811,5.589,2.811c0.611,0,1.23-0.079,1.839-0.239
+		c2.07-0.548,4.661-1.014,7.484-1.013c6.169,0,13.447,2.225,18.814,10.681c1.076,1.695,2.904,2.752,4.911,2.824
+		c7.09,0.256,23.55,3.362,27.416,26.223C222.461,178.954,220.811,207.381,199.797,239.861z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

img/blocks/controller_center_pressed.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_center_pressed.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_center_released.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_center_released.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_down_pressed.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_down_pressed.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_down_released.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_down_released.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_left_pressed.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_left_pressed.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:#000000;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_left_released.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_left_released.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_right_pressed.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_right_pressed.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:#000000;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_right_released.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_right_released.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_up_pressed.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_up_pressed.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:#000000;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/controller_up_released.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 480.00001 480.00001"
+   xml:space="preserve"
+   sodipodi:docname="controller_up_released.svg"
+   inkscape:version="0.92.1 r15371"
+   width="480"
+   height="480"><metadata
+     id="metadata47"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs45" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview43"
+     showgrid="false"
+     inkscape:zoom="0.54742791"
+     inkscape:cx="-10.370455"
+     inkscape:cy="215.5535"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1"
+     units="px" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="m 232.419,191.328 c 2.418,2.548 5.663,3.951 9.134,3.951 3.471,0 6.716,-1.403 9.134,-3.951 l 52.122,-54.912 c 3.923,-4.133 6.881,-11.547 6.881,-17.245 V 17.893 c 0,-7.168 -5.832,-12.9999996 -13,-12.9999996 H 186.417 c -7.168,0 -13,5.8319996 -13,12.9999996 V 119.17 c 0,5.698 2.958,13.112 6.881,17.245 z m 9.135,-165.276 c 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.282,-36.369 36.369,-36.369 z"
+     style="fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="m 250.687,289.565 c -2.418,-2.548 -5.662,-3.95 -9.133,-3.95 -3.471,0 -6.715,1.402 -9.134,3.95 l -52.122,54.913 c -3.923,4.133 -6.881,11.547 -6.881,17.245 V 463 c 0,7.168 5.832,13 13,13 H 296.69 c 7.168,0 13,-5.832 13,-13 V 361.723 c 0,-5.698 -2.958,-13.112 -6.881,-17.245 z m -9.133,165.276 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 464.107,172.31001 H 362.83 c -5.699,0 -13.112,2.958 -17.244,6.881 l -54.914,52.122 c -2.548,2.418 -3.951,5.662 -3.951,9.134 0,3.472 1.403,6.716 3.951,9.135 l 54.913,52.12 c 4.132,3.924 11.546,6.882 17.245,6.882 h 101.277 c 7.168,0 13,-5.832 13,-13 v -110.274 c 0,-7.168 -5.832,-13 -13,-13 z m -44.528,104.506 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 0,20.086 -16.283,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
+     inkscape:connector-curvature="0"
+     id="path8"
+     d="m 196.386,240.44701 c 0,-3.472 -1.403,-6.716 -3.951,-9.135 l -54.913,-52.12 c -4.132,-3.924 -11.546,-6.882 -17.245,-6.882 H 19 c -7.168,0 -13,5.832 -13,13 v 110.273 c 0,7.168 5.832,13 13,13 h 101.277 c 5.699,0 13.112,-2.958 17.244,-6.881 l 54.914,-52.122 c 2.548,-2.417 3.951,-5.662 3.951,-9.133 z m -132.858,36.369 c -20.086,0 -36.369,-16.283 -36.369,-36.369 0,-20.086 16.283,-36.369 36.369,-36.369 20.086,0 36.369,16.283 36.369,36.369 10e-4,20.086 -16.282,36.369 -36.369,36.369 z"
+     style="fill:none;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><g
+     id="g12"
+     transform="translate(0,48.893005)" /><g
+     id="g14"
+     transform="translate(0,48.893005)" /><g
+     id="g16"
+     transform="translate(0,48.893005)" /><g
+     id="g18"
+     transform="translate(0,48.893005)" /><g
+     id="g20"
+     transform="translate(0,48.893005)" /><g
+     id="g22"
+     transform="translate(0,48.893005)" /><g
+     id="g24"
+     transform="translate(0,48.893005)" /><g
+     id="g26"
+     transform="translate(0,48.893005)" /><g
+     id="g28"
+     transform="translate(0,48.893005)" /><g
+     id="g30"
+     transform="translate(0,48.893005)" /><g
+     id="g32"
+     transform="translate(0,48.893005)" /><g
+     id="g34"
+     transform="translate(0,48.893005)" /><g
+     id="g36"
+     transform="translate(0,48.893005)" /><g
+     id="g38"
+     transform="translate(0,48.893005)" /><g
+     id="g40"
+     transform="translate(0,48.893005)" /><ellipse
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#808080;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+     id="path4599-2"
+     cx="242.02635"
+     cy="240.7314"
+     rx="38.337769"
+     ry="37.802738" /></svg>

img/blocks/switch_off.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 60 60"
+   style="enable-background:new 0 0 60 60;"
+   xml:space="preserve"
+   sodipodi:docname="switch_off.svg"
+   inkscape:version="0.92.1 r15371"><metadata
+     id="metadata45"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs43" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview41"
+     showgrid="false"
+     inkscape:zoom="3.9333333"
+     inkscape:cx="30"
+     inkscape:cy="30"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1" /><path
+     inkscape:connector-curvature="0"
+     id="path2"
+     d="M 14,20 C 8.486,20 4,24.486 4,30 4,35.514 8.486,40 14,40 19.514,40 24,35.514 24,30 24,24.486 19.514,20 14,20 Z m 0,18 c -4.411,0 -8,-3.589 -8,-8 0,-4.411 3.589,-8 8,-8 4.411,0 8,3.589 8,8 0,4.411 -3.589,8 -8,8 z" /><path
+     inkscape:connector-curvature="0"
+     id="path4"
+     d="M 46,16 H 14 C 6.28,16 0,22.28 0,30 0,37.72 6.28,44 14,44 H 46 C 53.72,44 60,37.72 60,30 60,22.28 53.72,16 46,16 Z m 0,26 H 14 C 7.383,42 2,36.617 2,30 2,23.383 7.383,18 14,18 h 32 c 6.617,0 12,5.383 12,12 0,6.617 -5.383,12 -12,12 z" /><g
+     id="g10" /><g
+     id="g12" /><g
+     id="g14" /><g
+     id="g16" /><g
+     id="g18" /><g
+     id="g20" /><g
+     id="g22" /><g
+     id="g24" /><g
+     id="g26" /><g
+     id="g28" /><g
+     id="g30" /><g
+     id="g32" /><g
+     id="g34" /><g
+     id="g36" /><g
+     id="g38" /></svg>

img/blocks/switch_on.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 60 60"
+   style="enable-background:new 0 0 60 60;"
+   xml:space="preserve"
+   sodipodi:docname="switch_on.svg"
+   inkscape:version="0.92.1 r15371"><metadata
+     id="metadata45"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs43" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview41"
+     showgrid="false"
+     inkscape:zoom="3.9333333"
+     inkscape:cx="30"
+     inkscape:cy="30"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1" /><path
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="M 14,44 H 46 C 53.72,44 60,37.72 60,30 60,22.28 53.72,16 46,16 H 14 C 6.28,16 0,22.28 0,30 0,37.72 6.28,44 14,44 Z M 46,20 c 5.514,0 10,4.486 10,10 0,5.514 -4.486,10 -10,10 -5.514,0 -10,-4.486 -10,-10 0,-5.514 4.486,-10 10,-10 z" /><g
+     id="g10" /><g
+     id="g12" /><g
+     id="g14" /><g
+     id="g16" /><g
+     id="g18" /><g
+     id="g20" /><g
+     id="g22" /><g
+     id="g24" /><g
+     id="g26" /><g
+     id="g28" /><g
+     id="g30" /><g
+     id="g32" /><g
+     id="g34" /><g
+     id="g36" /><g
+     id="g38" /></svg>

keywords.txt

@@ -1,8 +1,50 @@
-EasyUI KEYWORD1
+#######################################
+# Syntax Coloring Map For ESPUI
+#######################################
+
+#######################################
+# Datatypes (KEYWORD1)
+#######################################
+
+ESPUI	KEYWORD1
+
+
+#######################################
+# Methods and Functions (KEYWORD2)
+#######################################
 
-detectCDN KEYWORD2
-title KEYWORD2
-begin KEYWORD2
 label	KEYWORD2
-toggleButton KEYWORD2
+button	KEYWORD2
-loop KEYWORD2
+switcher	KEYWORD2
+pad	KEYWORD2
+slider	KEYWORD2
+
+begin	KEYWORD2
+beginSPIFFS	KEYWORD2
+print	KEYWORD2
+updateSwitcher	KEYWORD2
+updateSlider	KEYWORD2
+
+#######################################
+# Instances (KEYWORD2)
+#######################################
+
+#######################################
+# Constants (LITERAL1)
+#######################################
+
+B_DOWN	LITERAL1
+B_UP	LITERAL1
+P_LEFT_DOWN	LITERAL1
+P_LEFT_UP	LITERAL1
+P_RIGHT_DOWN	LITERAL1
+P_RIGHT_UP	LITERAL1
+P_FOR_DOWN	LITERAL1
+P_FOR_UP	LITERAL1
+P_BACK_DOWN	LITERAL1
+P_BACK_UP	LITERAL1
+P_CENTER_DOWN	LITERAL1
+P_CENTER_UP	LITERAL1
+S_ACTIVE	LITERAL1
+S_INACTIVE	LITERAL1
+SL_VALUE	LITERAL1

lang/ESPUI.json

@@ -0,0 +1,27 @@
+{
+	"langs": 
+	{
+		"en-GB": 
+		{
+			"keys": 
+			{
+				"LANG_SUBCATERGORY_ESPUI": "User Interface",
+				"LANG_ESPUI_ESPUI_TITLE": "Title",
+				"LANG_ESPUI_ESPUI_HOTSPOT": "Enable Wifi Hotspot Code",
+				"LANG_ESPUI_ESPUI_TOOLTIP": "Creates a webinterface on the ESP32/ESP8266",
+				"LANG_ESPUI_BUTTON_BUTTON": "UI Button",
+				"LANG_ESPUI_NAME": "name",
+				"LANG_ESPUI_COLOR": "Color",
+				"LANG_ESPUI_TEXT": "Text",
+				"LANG_ESPUI_BUTTON_TOOLTIP": "A web interface button",
+				"LANG_ESPUI_LABEL_LABEL": "UI Label",
+				"LANG_ESPUI_LABEL": "Label",
+				"LANG_ESPUI_LABEL_TOOLTIP": "A web interface label you can update from your code",
+				"LANG_ESPUI_STATE": "State",
+				"LANG_ESPUI_SWITCH_SWITCH": "UI Switch",
+				"LANG_ESPUI_PAD_PAD": "UI Pad",
+				"LANG_ESPUI_PAD_CENTER": "Center button?"
+			}
+		}
+	}
+}

library.json

@@ -1,15 +1,32 @@
 {
   "name": "ESPUI",
-  "keywords": "ESPUI, esp32, ui, espui, user, interface, gui, iot, arduino, Wifi, server, webinterface, web",
+  "keywords": "espressif web interface iot control simple easy ui userinterface",
-  "description": "Quickly create an user interface on an ESP32",
+  "description": "ESP32 and ESP8266 Web Interface Library",
-  "repository":
+  "repository": {
-  {
     "type": "git",
     "url": "https://github.com/s00500/ESPUI.git"
   },
+  "authors": [
+    {
+      "name": "Lukas Bachschwell",
+      "email": "lukas@lbsfilm.at",
+      "url": "https://lbsfilm.at",
+      "maintainer": true
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "ESP Async WebServer",
+      "authors": "Hristo Gochkov",
+      "frameworks": "arduino"
+    },
+    {
+      "name": "ArduinoJson",
+      "authors": "Benoit Blanchon",
+      "frameworks": "arduino"
+    }
+  ],
+  "version": "1.6.2",
   "frameworks": "arduino",
-  "platforms":
+  "platforms": "*"
-  [
-    "espressif"
-  ]
 }

library.properties

@@ -1,9 +1,9 @@
 name=ESPUI
-version=1.0
+version=1.6.2
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
-sentence=ESP32 Web Interface Library
+sentence=ESP32 and ESP8266 Web Interface Library
-paragraph=A simple library that implements a web graphical user interface for ESP32. It is simple to use and works side by side with your sketch.
+paragraph=A simple library that implements a web graphical user interface for ESP32 and ESP8266. It is simple to use and works side by side with your sketch.
 category=Communication
 url=https://github.com/s00500/ESPUI
 architectures=*

src/ESPUI.cpp

@@ -1,174 +1,830 @@
 #include "ESPUI.h"
+
+#include "dataIndexHTML.h"
+
+#include "dataNormalizeCSS.h"
+#include "dataStyleCSS.h"
+
+#include "dataControlsJS.h"
+#include "dataSliderJS.h"
+#include "dataZeptoJS.h"
+
 #include <ESPAsyncWebServer.h>
 #include <functional>
 
+// ################# Spiffs functions
+#if defined(ESP32)
+void listDir(const char *dirname, uint8_t levels) {
+  Serial.printf("Listing directory: %s\n", dirname);
+
+  File root = SPIFFS.open(dirname);
+
+  if (!root) {
+    Serial.println("Failed to open directory");
+    return;
+  }
+
+  if (!root.isDirectory()) {
+    Serial.println("Not a directory");
+    return;
+  }
+
+  File file = root.openNextFile();
+
+  while (file) {
+    if (file.isDirectory()) {
+      Serial.print("  DIR : ");
+      Serial.println(file.name());
+      if (levels) {
+        listDir(file.name(), levels - 1);
+      }
+    } else {
+      Serial.print("  FILE: ");
+      Serial.print(file.name());
+      Serial.print("  SIZE: ");
+      Serial.println(file.size());
+    }
+
+    file = root.openNextFile();
+  }
+}
+#else
+
+void listDir(const char *dirname, uint8_t levels) {
+  // ignoring levels for esp8266
+  Serial.printf("Listing directory: %s\n", dirname);
+
+  String str = "";
+  Dir dir = SPIFFS.openDir("/");
+  while (dir.next()) {
+    Serial.print("  FILE: ");
+    Serial.print(dir.fileName());
+    Serial.print("  SIZE: ");
+    Serial.println(dir.fileSize());
+  }
+}
+
+#endif
+
+void ESPUIClass::list() {
+  if (!SPIFFS.begin()) {
+    Serial.println("SPIFFS Mount Failed");
+    return;
+  }
+  listDir("/", 1);
+#if defined(ESP32)
+  Serial.println(SPIFFS.totalBytes());
+  Serial.println(SPIFFS.usedBytes());
+#else
+  FSInfo fs_info;
+  SPIFFS.info(fs_info);
+
+  Serial.println(fs_info.totalBytes);
+  Serial.println(fs_info.usedBytes);
+#endif
+}
+
+void deleteFile(const char *path) {
+  if (DEBUG_ESPUI) Serial.print(SPIFFS.exists(path));
+  if (!SPIFFS.exists(path)) {
+    Serial.printf("File: %s does not exist, not deleting\n", path);
+    return;
+  }
+
+  Serial.printf("Deleting file: %s\n", path);
+
+  if (SPIFFS.remove(path)) {
+    Serial.println("File deleted");
+  } else {
+    Serial.println("Delete failed");
+  }
+}
+
+void writeFile(const char *path, const char *data) {
+  Serial.printf("Writing file: %s\n", path);
+
+  File file = SPIFFS.open(path, FILE_WRITE);
+  if (!file) {
+    Serial.println("Failed to open file for writing");
+    return;
+  }
+#if defined(ESP32)
+  if (file.print(data)) {
+    Serial.println("File written");
+  } else {
+    Serial.println("Write failed");
+  }
+#else
+  if (file.print(FPSTR(data))) {
+    Serial.println("File written");
+  } else {
+    Serial.println("Write failed");
+  }
+#endif
+  file.close();
+}
+
+// end Spiffs functions
+
+void ESPUIClass::prepareFileSystem() {
+  // this function should only be used once
+
+  Serial.println("About to prepare filesystem...");
+
+#if defined(ESP32)
+  SPIFFS.format();
+  if (!SPIFFS.begin(true)) {
+    Serial.println("SPIFFS Mount Failed");
+    return;
+  }
+  listDir("/", 1);
+  Serial.println("SPIFFS Mount ESP32 Done");
+#else
+  SPIFFS.format();
+  SPIFFS.begin();
+  Serial.println("SPIFFS Mount ESP8266 Done");
+#endif
+
+  deleteFile("/index.htm");
+
+  deleteFile("/css/style.css");
+  deleteFile("/css/normalize.css");
+
+  deleteFile("/js/zepto.min.js");
+  deleteFile("/js/controls.js");
+  deleteFile("/js/slider.js");
+
+  Serial.println("Cleanup done");
+
+  // Now write
+  writeFile("/index.htm", HTML_INDEX);
+
+  writeFile("/css/style.css", CSS_STYLE);
+  writeFile("/css/normalize.css", CSS_NORMALIZE);
+
+  writeFile("/js/zepto.min.js", JS_ZEPTO);
+  writeFile("/js/controls.js", JS_CONTROLS);
+  writeFile("/js/slider.js", JS_SLIDER);
+
+  Serial.println("Done Initializing filesystem :-)");
+
+#if defined(ESP32)
+  if (DEBUG_ESPUI) listDir("/", 1);
+#endif
+
+  SPIFFS.end();
+}
+
 // 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) {
-        case WS_EVT_DISCONNECT:
+  switch (type) {
-            Serial.printf("Disconnected!\n");
+    case WS_EVT_DISCONNECT: {
+      if (DEBUG_ESPUI) Serial.printf("Disconnected!\n");
       break;
-        case WS_EVT_CONNECT:
+    }
-            {
+    case WS_EVT_PONG: {
-				      Serial.println("Connected");
+      if (DEBUG_ESPUI) Serial.printf("Received PONG!\n");
+      break;
+    }
+    case WS_EVT_ERROR: {
+      if (DEBUG_ESPUI) Serial.printf("WebSocket Error!\n");
+      break;
+    }
+    case WS_EVT_CONNECT: {
+      if (DEBUG_ESPUI) {
+        Serial.print("Connected: ");
+        Serial.println(client->id());
+      }
+
       ESPUI.jsonDom(client);
+      if (DEBUG_ESPUI) {
         Serial.println("JSON Data Sent to Client!");
       }
-            break;
+    } break;
-        case WS_EVT_DATA:
+    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:")){
+
-            ESPUI.controls[msg.substring(6).toInt()]->callback(msg.substring(6).toInt(), B_DOWN);
+      int id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
-          }else if(msg.startsWith("bup:")){
+      if (id >= ESPUI.cIndex) {
-            ESPUI.controls[msg.substring(4).toInt()]->callback(msg.substring(4).toInt(), B_UP);
+        if (DEBUG_ESPUI) Serial.println("Maleformated id in websocket message");
-          }else if(msg.startsWith("pfdown:")){
+        return;
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_FOR_DOWN);
-          }else if(msg.startsWith("pfup:")){
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_FOR_UP);
-          }else if(msg.startsWith("pldown:")){
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_LEFT_DOWN);
-          }else if(msg.startsWith("plup:")){
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_LEFT_UP);
-          }else if(msg.startsWith("prdown:")){
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_RIGHT_DOWN);
-          }else if(msg.startsWith("prup:")){
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_RIGHT_UP);
-          }else if(msg.startsWith("pbdown:")){
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_BACK_DOWN);
-          }else if(msg.startsWith("pbup:")){
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_BACK_UP);
-          }else if(msg.startsWith("pcdown:")){
-            ESPUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_CENTER_DOWN);
-          }else if(msg.startsWith("pcup:")){
-            ESPUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_CENTER_UP);
-          }else if(msg.startsWith("sactive:")){
-            ESPUI.updateSwitcher(msg.substring(8).toInt(), true);
-            ESPUI.controls[msg.substring(8).toInt()]->callback(msg.substring(8).toInt(), S_ACTIVE);
-          }else if(msg.startsWith("sinactive:")){
-            ESPUI.updateSwitcher(msg.substring(10).toInt(), false);
-            ESPUI.controls[msg.substring(10).toInt()]->callback(msg.substring(10).toInt(), S_INACTIVE);
       }
+
+      Control *c =
+          ESPUI.controls[msg.substring(msg.lastIndexOf(':') + 1).toInt()];
+
+      if (msg.startsWith("bdown:")) {
+        c->callback(*c, B_DOWN);
+      } else if (msg.startsWith("bup:")) {
+        c->callback(*c, B_UP);
+      } else if (msg.startsWith("pfdown:")) {
+        c->callback(*c, P_FOR_DOWN);
+      } else if (msg.startsWith("pfup:")) {
+        c->callback(*c, P_FOR_UP);
+      } else if (msg.startsWith("pldown:")) {
+        c->callback(*c, P_LEFT_DOWN);
+      } else if (msg.startsWith("plup:")) {
+        c->callback(*c, P_LEFT_UP);
+      } else if (msg.startsWith("prdown:")) {
+        c->callback(*c, P_RIGHT_DOWN);
+      } else if (msg.startsWith("prup:")) {
+        c->callback(*c, P_RIGHT_UP);
+      } else if (msg.startsWith("pbdown:")) {
+        c->callback(*c, P_BACK_DOWN);
+      } else if (msg.startsWith("pbup:")) {
+        c->callback(*c, P_BACK_UP);
+      } else if (msg.startsWith("pcdown:")) {
+        c->callback(*c, P_CENTER_DOWN);
+      } else if (msg.startsWith("pcup:")) {
+        c->callback(*c, P_CENTER_UP);
+      } else if (msg.startsWith("sactive:")) {
+        ESPUI.updateSwitcher(c->id, true);
+        c->callback(*c, S_ACTIVE);
+      } else if (msg.startsWith("sinactive:")) {
+        ESPUI.updateSwitcher(c->id, false);
+        c->callback(*c, S_INACTIVE);
+      } else if (msg.startsWith("slvalue:")) {
+        int value =
+            msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
+        ESPUI.updateSlider(c->id, value, client->id());
+        c->callback(*c, SL_VALUE);
+      } else if (msg.startsWith("nvalue:")) {
+        int value =
+            msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
+        ESPUI.updateNumber(c->id, value, client->id());
+        c->callback(*c, N_VALUE);
+      } else if (msg.startsWith("tvalue:")) {
+        String value =
+            msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
+        ESPUI.updateText(c->id, value, client->id());
+        c->callback(*c, T_VALUE);
+      }
+    } break;
+    default:
       break;
   }
 }
 
-void ESPUIClass::label(const char* label, String value){
+int ESPUIClass::label(const char *label, int color, String value) {
-  Control* newL = new Control();
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  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++;
+  return cIndex - 1;
 }
 
-void ESPUIClass::button(const char* label, void(* callBack)(int, int)){
+int ESPUIClass::graph(const char *label, int color) {
-  Control* newB = new Control();
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  Control *newG = new Control();
+  newG->type = UI_GRAPH;
+  newG->label = label;
+  newG->color = color;
+  newG->id = cIndex;
+  controls[cIndex] = newG;
+  cIndex++;
+  return cIndex - 1;
+}
+
+// TODO: this still needs a range setting
+int ESPUIClass::slider(const char *label, void (*callBack)(Control, int),
+                       int color, String value) {
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  Control *newSL = new Control();
+  newSL->type = UI_SLIDER;
+  newSL->label = label;
+  newSL->color = color;
+  if (value != "")
+    newSL->value = value;
+  else
+    newSL->value = "";  // TODO: init with half value
+  newSL->callback = callBack;
+  newSL->id = cIndex;
+  controls[cIndex] = newSL;
+  cIndex++;
+  return cIndex - 1;
+}
+
+int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
+                       int color, String value) {
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  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++;
+  return cIndex - 1;
 }
 
-void ESPUIClass::switcher(const char* label, bool startState, void(* callBack)(int, int)){
+int ESPUIClass::switcher(const char *label, bool startState,
-  Control* newS = new Control();
+                         void (*callBack)(Control, int), int color) {
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  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++;
+  return cIndex - 1;
 }
 
-void ESPUIClass::pad(const char* label, bool center, void(* callBack)(int, int)){
+int 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_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  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++;
+  return cIndex - 1;
 }
 
-void ESPUIClass::print(int id, String value){
+// TODO: min and max need to be saved, they also need to be sent to the frontend
-  if(id<cIndex && controls[id]->type == UI_LABEL){
+int ESPUIClass::number(const char *label, void (*callBack)(Control, int),
+                       int color, int number, int min, int max) {
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  Control *newN = new Control();
+  newN->type = UI_NUMBER;
+  newN->label = label;
+  newN->color = color;
+  newN->value = String(number);
+  newN->callback = callBack;
+  newN->id = cIndex;
+  controls[cIndex] = newN;
+  cIndex++;
+  return cIndex - 1;
+}
+
+int ESPUIClass::text(const char *label, void (*callBack)(Control, int),
+                     int color, String value) {
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  Control *newT = new Control();
+  newT->type = UI_TEXT_INPUT;
+  newT->label = label;
+  newT->color = color;
+  newT->value = value;
+  newT->callback = callBack;
+  newT->id = cIndex;
+  controls[cIndex] = newT;
+  cIndex++;
+  return cIndex - 1;
+}
+
+void ESPUIClass::print(int id, String value) {
+  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_ESPUI)
+      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_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  print(getIdByLabel(label), value);
+}
+
+void ESPUIClass::updateSlider(int id, int nValue, int clientId) {
+  if (id < cIndex && controls[id]->type == UI_SLIDER) {
+    controls[id]->value = nValue;
     String json;
     StaticJsonBuffer<200> jsonBuffer;
-    JsonObject& root = jsonBuffer.createObject();
+    JsonObject &root = jsonBuffer.createObject();
-    root["type"] = UPDATE_SWITCH;
+    root["type"] = UPDATE_SLIDER;
-    root["value"] = nValue?1:0;
+    root["value"] = nValue;
     root["id"] = String(id);
     root.printTo(json);
-    this->ws->textAll(json);
+    textThem(json, clientId);
-  }else{
+  } else {
-    Serial.println(String("Error: ")+ String(id) +String(" is no switcher"));
+    if (DEBUG_ESPUI)
+      Serial.println(String("Error: ") + String(id) + String(" is no slider"));
   }
 }
 
+void ESPUIClass::updateSlider(String label, int nValue, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateSlider(getIdByLabel(label), nValue, clientId);
+}
 
-// Convert & Transfer Arduino elements to JSON elements
+void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
-void ESPUIClass::jsonDom(AsyncWebSocketClient * client){
+  if (id < cIndex && controls[id]->type == UI_SWITCHER) {
-  for(int i=-1; i<cIndex; i++){
+    controls[id]->value = nValue ? 1 : 0;
     String json;
     StaticJsonBuffer<200> jsonBuffer;
-    JsonObject& root = jsonBuffer.createObject();
+    JsonObject &root = jsonBuffer.createObject();
-    if(i == -1){
+    root["type"] = UPDATE_SWITCHER;
-      root["type"] = UI_TITEL;
+    root["value"] = nValue ? 1 : 0;
-      root["label"] = String(ui_title);
+    root["id"] = String(id);
-    }else{
-      root["type"] = controls[i]->type;
-      root["label"] = String(controls[i]->label);
-      root["value"] = String(controls[i]->value);
-      root["id"] = String(i);
-    }
     root.printTo(json);
-    client->text(json);
+    textThem(json, clientId);
+  } else {
+    if (DEBUG_ESPUI)
+      Serial.println(String("Error: ") + String(id) +
+                     String(" is no switcher"));
   }
 }
 
+void ESPUIClass::updateSwitcher(String label, bool nValue, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateSwitcher(getIdByLabel(label), nValue, clientId);
+}
 
-void ESPUIClass::begin(const char * _title){
+void ESPUIClass::updateNumber(int id, int number, int clientId) {
+  if (id < cIndex && controls[id]->type == UI_NUMBER) {
+    controls[id]->value = number;
+    String json;
+    StaticJsonBuffer<200> jsonBuffer;
+    JsonObject &root = jsonBuffer.createObject();
+    root["type"] = UPDATE_NUMBER;
+    root["value"] = String(number);
+    root["id"] = String(id);
+    root.printTo(json);
+    textThem(json, clientId);
+  } else {
+    if (DEBUG_ESPUI)
+      Serial.println(String("Error: ") + String(id) + String(" is no number"));
+  }
+}
+
+void ESPUIClass::updateNumber(String label, int number, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateNumber(getIdByLabel(label), number, clientId);
+}
+
+void ESPUIClass::updateText(int id, String text, int clientId) {
+  if (id < cIndex && controls[id]->type == UI_TEXT_INPUT) {
+    controls[id]->value = text;
+    String json;
+    StaticJsonBuffer<200> jsonBuffer;
+    JsonObject &root = jsonBuffer.createObject();
+    root["type"] = UPDATE_TEXT_INPUT;
+    root["value"] = String(text);
+    root["id"] = String(id);
+    root.printTo(json);
+    textThem(json, clientId);
+  } else {
+    if (DEBUG_ESPUI)
+      Serial.println(String("Error: ") + String(id) + String(" is no number"));
+  }
+}
+
+void ESPUIClass::updateText(String label, String text, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateText(getIdByLabel(label), text, clientId);
+}
+
+// This is a hacky workaround because ESPAsyncWebServer does not have a function
+// like this and it's clients array is private
+void ESPUIClass::textThem(String text, int clientId) {
+  int tryId = 0;
+  for (int count = 0; count < this->ws->count();) {
+    if (this->ws->hasClient(tryId)) {
+      if (clientId != tryId) {
+        this->ws->client(tryId)->text(text);
+      }
+      count++;
+    }
+    tryId++;
+  }
+}
+
+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
+Initially this function used to send the control element data individually.
+Due to a change in the ESPAsyncWebserver library this had top be changed to be
+sent as one blob at the beginning. Therefore a new type is used as well
+*/
+void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
+  String json;
+  DynamicJsonBuffer jsonBuffer(2000);
+  JsonObject &root = jsonBuffer.createObject();
+  root["type"] = UI_INITIAL_GUI;
+  JsonArray &items = jsonBuffer.createArray();
+
+  for (int i = -1; i < cIndex; i++) {
+    JsonObject &item = jsonBuffer.createObject();
+
+    if (i == -1) {
+      item["type"] = UI_TITEL;
+      item["label"] = String(ui_title);
+    } else {
+      item["type"] = controls[i]->type;
+      item["label"] = String(controls[i]->label);
+      item["value"] = String(controls[i]->value);
+      item["color"] = String(controls[i]->color);
+      item["id"] = String(i);
+    }
+    items.add(item);
+  }
+
+  // Send as one big bunch
+  root["controls"] = items;
+  root.printTo(json);
+  client->text(json);
+}
+
+void ESPUIClass::beginSPIFFS(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
+
+void ESPUIClass::beginSPIFFS(const char *_title, const char *username,
+                             const char *password) {
   ui_title = _title;
   server = new AsyncWebServer(80);
   ws = new AsyncWebSocket("/ws");
-  SPIFFS.begin();
+
+  if (!SPIFFS.begin()) {
+    Serial.println(
+        "SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
+        "PREPARE YOUR ESP!!!!!!!");
+    return;
+  }
+  listDir("/", 1);
+
+  if (!SPIFFS.exists("/index.htm")) {
+    Serial.println(
+        "Please read the README!!!!!!!, Make sure to "
+        "ESPUI.prepareFileSystem() once in an empty sketch");
+    return;
+  }
+
   ws->onEvent(onWsEvent);
   server->addHandler(ws);
+
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+    server->serveStatic("/", SPIFFS, "/")
+        .setDefaultFile("index.htm")
+        .setAuthentication(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  } else {
     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()));
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    request->send(200, "text/plain",
+                  String(ESP.getFreeHeap()) + " In SPIFFSmode");
   });
 
-  server->onNotFound([](AsyncWebServerRequest *request){
+  server->onNotFound(
-    request->send(404);
+      [](AsyncWebServerRequest *request) { request->send(404); });
-  });
 
   server->begin();
-  Serial.println("UI Initialized");
+  if (DEBUG_ESPUI) Serial.println("UI Initialized");
+}
+
+void ESPUIClass::begin(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
+
+void ESPUIClass::begin(const char *_title, const char *username,
+                       const char *password) {
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
+
+  ui_title = _title;
+
+  server = new AsyncWebServer(80);
+  ws = new AsyncWebSocket("/ws");
+
+  ws->onEvent(onWsEvent);
+  server->addHandler(ws);
+
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
+
+  server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response =
+        request->beginResponse_P(200, "text/html", HTML_INDEX);
+    request->send(response);
+  });
+
+  // Javascript files
+
+  server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response = request->beginResponse_P(
+        200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
+    response->addHeader("Content-Encoding", "gzip");
+    request->send(response);
+  });
+
+  server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response =
+        request->beginResponse_P(200, "application/javascript",
+                                 JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
+    response->addHeader("Content-Encoding", "gzip");
+    request->send(response);
+  });
+
+  server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response = request->beginResponse_P(
+        200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
+    response->addHeader("Content-Encoding", "gzip");
+    request->send(response);
+  });
+
+  // Stylesheets
+
+  server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response = request->beginResponse_P(
+        200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
+    response->addHeader("Content-Encoding", "gzip");
+    request->send(response);
+  });
+
+  server->on(
+      "/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
+        if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                      ESPUI.basicAuthPassword))
+          return request->requestAuthentication();
+        AsyncWebServerResponse *response = request->beginResponse_P(
+            200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
+        response->addHeader("Content-Encoding", "gzip");
+        request->send(response);
+      });
+
+  // Heap for general Servertest
+  server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    request->send(200, "text/plain",
+                  String(ESP.getFreeHeap()) + " In Memorymode");
+  });
+
+  server->onNotFound(
+      [](AsyncWebServerRequest *request) { request->send(404); });
+
+  server->begin();
+  if (DEBUG_ESPUI) Serial.println("UI Initialized");
 }
 
 ESPUIClass ESPUI;

src/ESPUI.h

@@ -1,38 +1,72 @@
 #ifndef ESPUI_h
 #define ESPUI_h
 
-#define HARDWARE "esp32"
+#define DEBUG_ESPUI true
-
+#define WS_AUTHENTICATION false
-//ifdef 8266
-//#include "Hash.h"
 
 #include "Arduino.h"
-#include "stdlib_noniso.h"
 #include "ArduinoJson.h"
 #include "FS.h"
-#include "SPIFFS.h"
+#include "stdlib_noniso.h"
-#include "WiFi.h"
+
+#if defined(ESP32)
 
 #include <AsyncTCP.h>
 #include <ESPAsyncWebServer.h>
+#include "SPIFFS.h"
+#include "WiFi.h"
 
-typedef struct Control
+#else
-{
+
+#include <ArduinoOTA.h>
+#include <ESP8266WiFi.h>
+#include <ESP8266mDNS.h>
+#include <ESPAsyncTCP.h>
+#include <ESPAsyncWebServer.h>
+#include <FS.h>
+#include <Hash.h>
+#include <SPIFFSEditor.h>
+
+#define FILE_WRITE "w"
+
+#endif
+
+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
+// Message Types (and control types)
+#define UI_INITIAL_GUI 100
 #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_SWITCH 7
+#define UI_SLIDER 8
+#define UPDATE_SLIDER 9
+
+#define UI_NUMBER 10
+#define UPDATE_NUMBER 11
+
+#define UI_TEXT_INPUT 12
+#define UPDATE_TEXT_INPUT 13
+
+#define UI_GRAPH 14
+#define CLEAR_GRAPH 15
+#define ADD_GRAPH_POINT 16
 
 // Values
 #define B_DOWN -1
@@ -48,35 +82,94 @@ typedef struct Control
 #define P_BACK_UP 5
 #define P_CENTER_DOWN -6
 #define P_CENTER_UP 6
+
 #define S_ACTIVE -7
 #define S_INACTIVE 7
 
+#define SL_VALUE 8
+#define N_VALUE 9
+#define T_VALUE 10
 
+// 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 7
 
-class ESPUIClass{
+class ESPUIClass {
+ public:
+  void begin(const char *_title);  // Setup servers and page in Memorymode
+  void begin(const char *_title, const char *username, const char *password);
 
-public:
+  void beginSPIFFS(const char *_title);  // Setup servers and page in SPIFFSmode
-  void begin(const char* _title);   // Setup servers and page
+  void beginSPIFFS(const char *_title, const char *username,
+                   const char *password);
 
+  void prepareFileSystem();  // Initially preps the filesystem and loads a lot
+                             // of stuff into SPIFFS
+  void list();
   // Creating Elements
-  void label(const char* label, String value = ""); // Create Label
+
-  void button(const char* label, void(* callBack)(int, int));   // Create Event Button
+  int 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
+  int switcher(const char *label, bool startState,
+               void (*callBack)(Control, int),
+               int color);  // Create Toggle Button
+  int pad(const char *label, bool centerButton, void (*callBack)(Control, int),
+          int color);  // Create Pad Control
+  int slider(const char *label, void (*callBack)(Control, int), int color,
+             String value);  // Create Slider Control
+  int number(const char *label, void (*callBack)(Control, int), int color,
+             int number, int min, int max);  // Create a Number Input Control
+  int text(const char *label, void (*callBack)(Control, int), int color,
+           String value = "");  // Create a Text Input Control
+
+  // Output only
+  int label(const char *label, int color, String value = "");  // Create Label
+  int graph(const char *label, int color);  // Create Graph display
 
   // Update Elements
   void print(int id, String value);
-  void updateSwitcher(int id, bool nValue);
+  void print(String label, String value);
+
+  void updateSwitcher(int id, bool nValue, int clientId = -1);
+  void updateSwitcher(String label, bool nValue, int clientId = -1);
+
+  void updateSlider(int id, int nValue, int clientId = -1);
+  void updateSlider(String label, int nValue, int clientId = -1);
+
+  void updateNumber(int id, int nValue, int clientId = -1);
+  void updateNumber(String label, int nValue, int clientId = -1);
+
+  void updateText(int id, String nValue, int clientId = -1);
+  void updateText(String label, String nValue, int clientId = -1);
+
+  void clearGraph(int id, int clientId = -1);
+  void clearGraph(String label, int clientId = -1);
+
+  void addGraphPoint(int id, int nValue, int clientId = -1);
+  void addGraphPoint(String label, int nValue, int clientId = -1);
+
+  void textThem(String text, int clientId);
 
   // 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:
+ private:
-  AsyncWebServer* server;
+  const char *basicAuthUsername;
-  AsyncWebSocket* ws;
+  const char *basicAuthPassword;
+  bool basicAuth = true;
+  AsyncWebServer *server;
+  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/dataIndexHTML.h

@@ -0,0 +1,5 @@
+const char HTML_INDEX[] PROGMEM = R"=====(
+<!DOCTYPE html><html> <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=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/controls.js></script></head> <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"> </div> </div> </body> </html> 
+)=====";
+
+const uint8_t HTML_INDEX_GZIP[863] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,133,84,109,115,170,56,20,254,43,172,159,118,231,222,22,17,107,219,123,197,153,160,96,171,34,2,130,226,183,0,169,4,195,75,73,16,245,215,111,34,189,179,187,179,51,187,204,36,231,237,57,207,57,132,112,198,191,205,236,233,54,220,24,82,202,114,50,25,223,119,105,156,34,152,76,198,57,98,80,138,83,88,83,196,180,134,125,60,188,76,198,12,51,130,38,211,178,96,117,73,198,114,103,118,200,2,230,72,59,99,212,86,101,205,164,152,67,80,193,180,94,139,19,150,106,9,58,227,24,61,220,141,239,18,46,48,195,144,60,208,24,18,164,41,189,201,152,224,226,36,213,136,104,61,154,242,244,184,97,18,230,20,61,41,173,209,135,150,64,6,127,224,28,30,145,92,21,199,159,17,164,104,52,252,142,3,221,118,219,254,114,126,44,1,127,214,158,159,26,254,145,107,186,48,129,51,5,150,144,229,202,121,221,10,69,159,39,250,214,55,0,88,205,55,83,249,146,234,14,119,78,245,204,51,23,107,30,29,45,120,238,241,157,59,55,130,111,10,70,124,79,68,166,93,9,214,81,206,55,83,157,198,13,49,94,4,223,198,212,173,192,240,239,88,37,216,185,3,229,211,25,16,236,170,230,167,88,158,26,52,174,26,112,189,147,246,64,201,189,129,210,120,247,24,95,92,95,12,230,75,135,231,113,60,199,152,162,174,46,171,243,230,89,240,27,133,235,109,137,5,244,18,168,167,141,222,222,94,240,211,242,134,203,203,113,184,14,98,95,109,140,197,219,253,77,119,139,149,219,119,0,6,126,226,221,29,164,245,76,114,19,103,162,180,0,204,146,88,119,48,142,208,61,150,244,61,95,49,245,111,134,105,164,177,97,125,123,171,194,86,28,132,30,122,190,171,7,122,182,77,67,121,49,163,224,56,53,60,54,36,213,94,62,191,102,43,231,176,24,125,154,175,76,61,165,224,154,41,151,189,191,140,156,161,30,148,237,172,253,180,195,163,113,57,157,118,67,28,142,200,6,154,253,145,251,105,189,132,239,204,110,220,200,130,183,209,37,139,104,67,103,96,39,39,117,69,244,227,240,57,219,140,94,71,241,222,120,137,54,64,65,254,12,45,7,162,187,197,222,53,119,111,238,41,220,187,196,206,215,215,195,206,236,31,28,112,181,102,134,186,218,2,101,181,53,134,193,236,253,102,103,160,111,103,254,101,121,3,87,174,183,23,227,233,21,181,226,83,4,125,55,72,251,135,57,207,219,86,44,26,184,213,161,56,1,43,3,151,245,181,223,174,189,254,197,54,157,171,117,43,219,245,172,84,44,143,182,86,86,182,214,202,223,94,226,88,180,112,72,140,32,76,204,245,249,80,184,106,184,95,16,240,150,168,201,245,169,138,114,118,11,7,102,123,240,158,206,113,142,162,231,172,133,247,35,53,136,185,61,121,141,147,79,167,127,187,201,148,93,9,162,41,66,172,187,196,114,76,169,92,148,117,14,9,190,161,71,110,253,31,248,238,236,128,52,174,113,197,36,90,199,154,156,81,249,134,42,86,62,230,184,120,204,120,80,238,162,255,66,81,130,19,84,255,39,36,238,254,100,250,79,144,124,31,0,210,56,42,147,171,84,22,164,132,137,150,193,51,236,226,63,40,131,53,251,253,143,159,28,145,224,179,152,23,195,137,208,36,156,104,57,196,197,27,207,70,245,95,83,162,3,209,10,22,2,193,75,122,12,178,134,74,49,129,148,106,4,70,136,76,236,143,15,126,24,136,247,192,97,162,3,78,249,149,152,214,93,161,47,188,104,153,23,65,191,188,156,178,46,219,175,96,79,168,205,195,71,67,72,55,108,122,28,245,197,243,75,136,183,18,178,27,118,127,2,173,245,31,70,3,5,0,0 };

src/dataNormalizeCSS.h

@@ -0,0 +1,5 @@
+const char CSS_NORMALIZE[] PROGMEM = R"=====(
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
+)=====";
+
+const uint8_t CSS_NORMALIZE_GZIP[861] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,149,84,237,142,155,58,16,125,149,104,171,74,183,146,137,216,237,199,94,25,221,39,137,242,99,176,7,112,227,47,217,38,155,20,241,238,119,12,132,36,219,108,165,254,2,6,123,230,204,57,103,166,75,70,15,141,179,169,104,192,40,125,230,17,108,44,34,6,213,84,133,137,69,194,83,42,162,250,133,5,200,159,125,76,252,185,44,63,87,197,27,214,7,149,30,255,29,107,39,207,131,129,208,42,203,203,17,66,82,66,35,131,168,36,50,137,9,148,142,172,81,173,0,159,148,179,249,181,15,200,26,231,18,6,214,33,200,252,104,131,235,61,51,160,44,51,104,123,102,225,200,34,138,233,70,236,13,165,63,15,82,69,175,225,204,107,237,196,97,132,94,42,199,4,216,35,68,230,131,107,3,198,200,142,84,213,173,39,149,213,202,98,49,93,168,142,152,161,129,46,64,171,214,242,26,34,230,191,115,34,110,93,250,103,39,136,153,224,116,220,127,89,83,88,103,177,234,80,181,93,162,238,118,157,146,18,237,158,37,52,244,59,225,221,185,17,134,26,196,33,247,98,101,33,156,118,129,167,64,12,123,8,104,211,8,28,168,163,35,145,195,59,71,112,6,215,167,12,33,211,86,215,97,151,84,210,184,31,106,23,136,147,162,118,41,57,195,159,253,105,35,233,21,229,88,179,72,240,108,59,43,248,54,131,170,157,150,163,108,236,28,140,233,172,145,171,68,61,138,177,123,94,130,36,25,127,65,83,45,42,109,127,188,162,217,148,35,125,30,110,16,243,79,77,83,86,51,236,79,101,89,142,209,128,214,55,41,254,37,181,99,79,40,122,127,19,125,253,254,185,154,104,190,176,84,121,23,85,86,142,7,36,142,168,225,15,185,207,153,146,243,188,216,126,71,147,115,15,75,215,197,246,37,71,148,105,23,58,136,163,120,108,39,153,120,32,239,124,25,50,131,141,118,111,124,214,100,156,141,117,113,226,51,117,248,173,244,167,177,11,67,97,220,47,162,243,148,241,42,219,242,44,51,233,145,67,213,7,225,85,113,79,41,215,74,208,39,55,10,71,198,62,212,146,76,135,44,130,241,119,3,101,156,117,164,183,64,182,190,85,87,174,8,213,88,247,212,161,101,202,250,62,49,231,211,108,125,34,132,236,206,242,136,145,89,96,152,101,80,182,163,217,76,83,134,245,99,157,181,57,211,21,222,81,69,85,107,188,84,152,83,14,211,212,78,54,108,92,48,179,81,151,19,29,173,131,205,4,100,151,206,30,255,123,154,227,79,123,118,27,164,193,194,244,46,70,82,25,69,193,225,178,27,192,123,4,42,34,144,207,73,42,209,135,72,45,120,167,136,214,176,148,220,209,188,0,97,148,251,219,226,107,112,88,46,73,108,160,215,105,185,196,249,164,96,227,68,31,11,101,45,45,140,233,222,239,241,213,44,149,7,41,179,168,229,56,29,29,110,29,106,137,7,208,227,109,63,162,67,113,32,225,223,183,14,180,27,158,242,72,174,46,89,167,243,244,190,198,114,199,246,166,198,240,180,39,116,11,55,19,180,34,122,101,139,91,241,63,60,79,107,225,254,252,176,0,159,252,119,39,3,113,46,186,199,50,100,221,27,133,90,86,127,242,255,229,226,95,141,199,67,12,87,252,115,164,16,25,134,126,212,242,135,87,36,10,23,32,239,142,71,29,77,214,157,90,34,67,94,164,206,251,49,58,173,228,38,42,77,147,176,142,199,230,197,95,37,218,126,165,117,178,217,254,120,153,30,175,121,183,104,108,209,202,71,142,89,135,240,126,240,47,179,250,251,250,77,217,189,151,189,77,147,171,193,71,228,151,151,106,249,145,151,193,82,64,178,212,13,215,130,255,3,4,241,118,208,151,7,0,0 };

src/dataSliderJS.h

@@ -0,0 +1,14 @@
+const char JS_SLIDER[] PROGMEM = R"=====(
+function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find('.slider');slider_fill=slider.find('.slider-fill');slider_handle=slider.find('.slider-handle');slider_label=slider.find('.slider-label');var range_val=parseInt(range.val());slider_fill.css('width',range_val+'%');slider_handle.css('left',range_val+'%');slider_label.find('span').text(range_val);});self.on('mousedown touchstart','.slider-handle',function(e){if(e.button===2){return false;}
+var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
+$(this).addClass('is-active');var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find('.is-active').removeClass('is-active');};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on('mousedown touchstart','.slider',function(e){if(e.button===2){return false;}
+var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
+var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}
+var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});};function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
+'<div class="slider-fill"></div>'+
+'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
+'</div>';return tmplt;}
+function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round(newW/sliderW*100));var slider_fill=parents.find('.slider-fill');var slider_handle=parents.find('.slider-handle');var range=parents.find('input[type="range"]');slider_fill.css('width',slider_new_val+'%');slider_handle.css({'left':slider_new_val+'%','transition':'none','-webkit-transition':'none','-moz-transition':'none'});range.val(slider_new_val);if(parents.find('.slider-handle span').text()!=slider_new_val){parents.find('.slider-handle span').text(slider_new_val);var number=parents.attr('id').substring(2);if(send)websock.send('slvalue:'+slider_new_val+':'+number);}}
+)=====";
+
+const uint8_t JS_SLIDER_GZIP[865] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,237,86,207,111,155,48,20,190,247,175,72,163,174,134,149,184,89,143,33,238,101,211,164,29,118,218,164,77,170,170,200,1,83,172,16,131,176,73,182,209,252,239,123,254,1,1,66,170,110,167,29,118,194,246,251,252,252,222,247,62,243,156,84,34,82,60,23,147,114,179,141,87,37,21,79,236,75,198,99,86,122,146,101,44,82,121,233,215,59,90,78,96,150,4,210,88,86,123,30,171,180,153,228,73,34,153,10,162,170,20,202,173,125,224,50,42,153,98,129,113,231,22,67,237,129,92,29,221,134,93,111,68,91,177,25,122,173,197,186,182,38,59,246,124,156,177,68,133,253,115,12,98,176,134,25,141,82,47,113,217,121,60,216,249,181,137,17,66,80,41,151,126,104,102,152,22,5,19,177,215,223,188,82,219,34,131,195,252,208,100,64,44,52,225,0,68,92,20,149,122,80,63,11,70,166,198,58,125,68,77,196,61,32,182,107,173,113,149,240,44,35,118,220,135,204,180,229,136,75,169,136,51,54,142,180,182,35,54,163,107,118,198,169,49,1,82,87,207,4,186,218,209,140,20,180,148,236,147,80,158,89,194,176,164,211,236,68,136,35,41,61,100,42,129,130,118,223,13,122,51,12,208,2,117,57,206,225,76,4,46,42,89,80,129,124,172,216,15,119,180,70,251,225,193,15,109,121,133,135,182,121,37,89,156,239,197,68,229,85,148,74,69,75,112,61,76,61,104,107,202,252,154,39,30,195,235,74,169,92,16,66,238,252,26,170,7,37,152,36,52,147,44,60,92,232,220,33,99,38,148,108,234,142,221,28,136,210,146,159,181,85,50,42,239,74,210,1,91,85,118,0,78,153,13,162,47,78,141,139,82,22,109,236,117,106,81,47,232,7,115,136,103,17,115,73,215,25,139,33,24,72,172,235,130,16,85,86,236,36,189,38,37,26,199,239,51,170,203,193,229,140,2,59,59,230,18,218,230,59,246,177,34,93,206,44,39,79,236,59,97,216,124,159,159,161,150,169,62,39,254,170,137,103,242,97,254,104,77,221,156,5,219,183,196,128,105,214,163,66,7,60,196,45,73,151,206,235,235,203,83,4,154,35,223,175,221,178,142,213,115,100,5,67,104,255,223,99,216,8,15,7,19,95,85,12,50,108,104,129,208,60,171,154,18,238,123,191,12,184,195,20,46,153,62,123,132,66,123,64,227,131,212,70,162,26,187,176,196,6,70,169,221,5,131,168,138,133,14,202,90,225,247,98,102,135,240,202,139,243,168,218,66,20,190,22,252,49,180,215,223,130,255,242,31,164,119,34,78,39,234,127,65,158,23,127,160,206,81,165,253,133,142,14,97,115,214,100,188,167,153,251,111,198,4,45,99,190,155,68,90,246,100,106,209,211,123,116,115,49,178,110,90,212,244,126,121,11,150,115,16,27,7,128,78,77,166,19,128,69,119,129,251,249,242,214,124,173,179,142,75,59,10,93,149,77,140,64,226,32,159,126,29,160,0,223,28,247,240,5,138,220,107,229,88,158,94,211,251,76,85,138,203,188,2,37,234,157,183,110,231,219,119,243,185,223,83,184,233,213,131,63,70,191,89,119,192,174,97,143,195,219,142,221,246,225,215,220,136,179,29,185,159,217,185,182,92,219,190,188,56,69,7,72,193,33,146,107,70,209,2,137,92,64,75,69,179,61,91,111,184,154,141,218,182,249,175,17,195,193,61,142,204,19,162,127,142,185,191,47,177,49,233,190,6,252,75,50,216,94,191,122,239,240,92,205,177,168,182,107,120,138,53,62,168,82,37,144,12,127,21,44,171,181,84,37,23,79,222,157,9,209,232,5,50,151,121,180,193,122,2,207,148,12,252,84,108,129,110,134,212,193,146,245,172,251,206,111,101,146,232,206,54,11,0,0 };

tools/prepare_static_ui_sources.py

@@ -0,0 +1,134 @@
+#!/usr/bin/env python3
+
+from jsmin import jsmin as jsminify
+from htmlmin import minify as htmlminify
+from csscompressor import compress as cssminify
+import gzip
+import sys
+import os.path
+import argparse
+import re
+from glob import glob
+
+TARGET_TEMPLATE = '''const char {constant}[] PROGMEM = R"=====(
+{minidata}
+)=====";
+
+const uint8_t {constant}_GZIP[{gziplen}] PROGMEM = {{ {gzipdata} }};
+'''
+
+def parse_arguments(args=None):
+    parser = argparse.ArgumentParser(
+        description="Prepares ESPUI header files by minifying and gzipping HTML, JS and CSS source files.")
+    parser.add_argument("--auto", "--all", "-a", dest="auto", action="store_true",
+                        help="Automatically find all source files in examples/gui/data/ and write C header files to src/")
+    parser.add_argument("--source", "--sources", "-s", dest="sources", default=None,
+                        help="Sources directory containing CSS or JS files OR one specific file to minify")
+    parser.add_argument("--target", "-t", dest="target", default=None,
+                        help="Target directory containing C header files OR one C header file")
+    parser.add_argument("--nostoremini", "-m", action="store_false", dest="storemini",
+                        help="Do not store intermediate minified files next to the originals (i.e. only write to the C header files)")
+    args = parser.parse_args(args)
+    if not args.auto and (not args.sources or not args.target):
+        print("ERROR: You need to specify either --auto or both --source and --target\n")
+        parser.print_help()
+        sys.exit(1)
+    return args
+
+def get_context(infile, outfile):
+    infile	= os.path.realpath(infile)
+    dir, name, type 	= (os.path.basename(os.path.dirname(infile)), os.path.basename(infile).split(os.path.extsep)[0], os.path.basename(infile).split(os.path.extsep)[-1] )
+    type = type.strip(".").lower()
+    if dir.lower() == type:
+        dir = os.path.basename(os.path.dirname(os.path.dirname(infile)))
+    if type == "htm":
+        type = 'html'
+    name = os.path.basename(name)
+    indir	= os.path.dirname(infile)
+    if os.path.isdir(outfile):
+        outdir 	= os.path.realpath(outfile)
+        outfilename	= "%s%s%s.h" % (dir, name.capitalize(), type.upper())
+        outfile	= os.path.realpath(os.path.sep.join([outdir, outfilename]))
+    else:
+        outfile	= os.path.realpath(outfile)
+        outdir	= os.path.dirname(outfile)
+        outfilename	= os.path.basename(outfile)
+    minifile	= re.sub('\.([^.]+)$', '.min.\\1', infile) if not ".min." in infile else infile
+    constant	= '%s_%s' % (type.upper(), name.upper())
+    return locals()
+    
+def perform_gzip(c):
+    compressed = gzip.compress(bytes(c['minidata'], 'utf-8'))
+    c['gzipdata'] = ','.join([ str(b) for b in compressed ])
+    c['gziplen'] = len(compressed)
+    print("  GZIP data length: %s" % c['gziplen'])
+    return c
+    
+def perform_minify(c):
+    with open(c['infile']) as infile:
+        minifier = {
+            'css': cssminify, 
+            'js': jsminify, 
+            'html': htmlminify
+        }.get(c['type']) or htmlminify
+        print("  Using %s minifier" % c['type'])
+        c['minidata'] = minifier(infile.read())
+    return perform_gzip(c)
+
+def process_file(infile, outdir, storemini=True):
+    print("Processing file %s" % infile)
+    c = get_context(infile, outdir)
+    c = perform_minify(c)
+    if storemini:
+        if c['infile'] == c['minifile']:
+            print("  Original file is already minified, refusing to overwrite it")
+        else:
+            print("  Writing minified file %s" % c['minifile'])
+            with open(c['minifile'], 'w+') as minifile:
+                minifile.write(c['minidata'])
+    with open(c['outfile'], 'w+') as outfile:
+        print("  Using C constant names %s and %s_GZIP" % (c['constant'], c['constant']))
+        print("  Writing C header file %s" % c['outfile'])
+        outfile.write(TARGET_TEMPLATE.format(**c))
+        
+def filenamefilter(pattern, strings):
+    return filter(re.compile(pattern).search, strings)        
+        
+def process_dir(sourcedir, outdir, recursive=True, storemini=True):
+    pattern = r'/*\.(css|js|htm|html)$'
+    files = glob(sourcedir + "/**/*", recursive=True)+glob(sourcedir + "/*") if recursive else glob(sourcedir + "/*")
+    files = filenamefilter(pattern, files)
+    for f in set(files):
+        if not '.min.' in f:
+            process_file(f, outdir, storemini)
+        elif not os.path.isfile(f.replace(".min.", ".")):
+            process_file(f, outdir, storemini)
+            
+def check_args(args):
+    abort = 0
+    if not os.path.exists(args.sources):
+        print("ERROR: Source %s does not exist" % args.sources)
+        abort += 2
+    if not os.path.isdir(os.path.dirname(args.target)):
+        print("ERROR: Parent directory of target %s does not exist" % args.target)
+        abort += 4
+    if os.path.isdir(args.sources) and not os.path.isdir(args.target):
+        print("ERROR: Source %s is a directory, target %s is not" % (args.sources, args.target))
+        abort += 8
+    if abort > 0:
+        print("Aborting.")
+        sys.exit(abort)
+
+def main(args):
+    args.sources = os.path.realpath(args.sources or os.sep.join((os.path.dirname(os.path.realpath(__file__)), "..", "examples", "gui", "data")))
+    args.target  = os.path.realpath(args.target  or os.sep.join((os.path.dirname(os.path.realpath(__file__)), "..", "src")))
+    check_args(args)
+    if os.path.isfile(args.sources):
+        print("Source %s is a file, will process one file only." % args.sources)
+        process_file(args.sources, args.target, storemini = args.storemini)
+    elif os.path.isdir(args.sources):
+        print("Source %s is a directory, searching for files recursively..." % args.sources)
+        process_dir(args.sources, args.target, recursive = True, storemini = args.storemini)
+
+if __name__ == "__main__" and "get_ipython" not in dir():
+    main(parse_arguments())