diff --git a/README.md b/README.md index 8fb2e27..e5319c9 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,8 @@ ESPUI is a simple library to make a web-based user interface for your projects using 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 + +ol, 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 @@ -27,6 +28,7 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker, * [Slider](#slider) * [Number Input](#number-input) * [Text Input](#text-input) + * [Date, Time, Colour and Password Input](#date-time-colour-and-password-input) * [Select control](#select-control) * [Getting the Time](#getting-the-time) * [Separators](#separators) @@ -58,6 +60,7 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker, - Transport layer rework by @iangray001 - Time control by @iangray001 - Vertical controls by @iangray001 +- Time/date/password/color input types by @pcbbc ## Roadmap @@ -133,6 +136,7 @@ more program memory to work with. - Control pad - Slider - Text Input +- Date, Time, Colour and Password Input - Numberinput - Option select - Separator @@ -289,6 +293,36 @@ Events: - `T_VALUE` - Fired when a text value changes. +#### Date, Time, Colour and Password Input + +![text](docs/ui_inputtypes.png) + +As an extension to the text input control, you can also specify the type attribute to be used for the HTML input element. +This allows you to easily create input controls for Date, Time, Colour and Passwords, or indeed any other +[HTML Input Types](https://www.w3schools.com/html/html_form_input_types.asp) supported by your browser. + +``` +text_date = ESPUI.text("Date", callback, ControlColor::Dark, "2022-05-24"); +ESPUI.setInputType(text_date, "date"); + +text_time = ESPUI.text("Time", callback, ControlColor::Dark, "13:00"); +ESPUI.setInputType(text_time, "time"); + +text_colour = ESPUI.text("Colour", callback, ControlColor::Dark, "#FF0000"); +ESPUI.setInputType(text_colour, "color"); + +text_password = ESPUI.text("Password", callback, ControlColor::Dark, "tiddles123"); +ESPUI.setInputType(text_password, "password"); +``` + +*Important!* This function should be called _before_ `ESPUI.begin` or results will be unreliable. + +Note that not all browsers support all input types, and that the control displayed to edit the input is browser dependent. + +However even with a type set, user input should still be validated +because it is easy to bypass client-side checks. Never trust user input. + + #### Select control ![option1](docs/ui_select1.png) diff --git a/data/js/controls.js b/data/js/controls.js index e394c9f..fb791ac 100644 --- a/data/js/controls.js +++ b/data/js/controls.js @@ -212,7 +212,7 @@ function start() { window.location.port != 443 ) { websock = new WebSocket( - "ws://" + window.location.hostname + ":" + window.location.port + "/ws" + "ws://" + window.location.hostname + ":" + window.location.port + "/ws" ); } else { websock = new WebSocket("ws://" + window.location.hostname + "/ws"); @@ -532,6 +532,9 @@ function start() { if(data.hasOwnProperty('elementStyle')) { $("#text" + data.id).attr("style", data.elementStyle); } + if(data.hasOwnProperty('inputType')) { + $("#text" + data.id).attr("type", data.inputType); + } break; case UPDATE_SELECT: @@ -769,6 +772,7 @@ var addToHTML = function(data) { var elementHTML = function(data) { var id = data.id var elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : ""; + var inputType = data.hasOwnProperty('inputType') ? " type='" + data.inputType + "' " : ""; switch(data.type) { case UI_LABEL: return ""; case UI_TEXT_INPUT: - return ""; case UI_SELECT: return "";case UI_TEXT_INPUT:return"";case UI_TEXT_INPUT:return"";case UI_SELECT:return"";case UI_ACCEL:return"ACCEL // Not implemented fully!
0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="
"+data.value+"";case UI_BUTTON:return"";case UI_SWITCHER:return"
";case UI_NUMBER:return"";case UI_TEXT_INPUT:return"";case UI_TEXT_INPUT:return"";case UI_SELECT:return"";case UI_ACCEL:return"ACCEL // Not implemented fully!