1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-10 19:00:54 +00:00

Updated documentation

This commit is contained in:
pcbbc 2022-05-24 11:21:34 +01:00
parent b47d595194
commit a3b253665d
5 changed files with 35 additions and 1 deletions

View File

@ -58,6 +58,7 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker,
- Transport layer rework by @iangray001 - Transport layer rework by @iangray001
- Time control by @iangray001 - Time control by @iangray001
- Vertical controls by @iangray001 - Vertical controls by @iangray001
- Time/date/password/color input types by @pcbbc
## Roadmap ## Roadmap
@ -289,6 +290,34 @@ Events:
- `T_VALUE` - Fired when a text value changes. - `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");
```
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 #### Select control
![option1](docs/ui_select1.png) ![option1](docs/ui_select1.png)

3
data/js/controls.js vendored
View File

@ -532,6 +532,9 @@ function start() {
if(data.hasOwnProperty('elementStyle')) { if(data.hasOwnProperty('elementStyle')) {
$("#text" + data.id).attr("style", data.elementStyle); $("#text" + data.id).attr("style", data.elementStyle);
} }
if(data.hasOwnProperty('inputType')) {
$("#text" + data.id).attr("type", data.inputType);
}
break; break;
case UPDATE_SELECT: case UPDATE_SELECT:

View File

@ -36,6 +36,7 @@ break;case UPDATE_SLIDER:$("#sl"+data.id).attr("value",data.value)
slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);} slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#num"+data.id).attr("style",data.elementStyle);} break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#num"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#text"+data.id).attr("style",data.elementStyle);} break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);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:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);} break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);$("#btn"+data.id).text(data.value);if(data.hasOwnProperty('elementStyle')){$("#btn"+data.id).attr("style",data.elementStyle);} break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);$("#btn"+data.id).text(data.value);if(data.hasOwnProperty('elementStyle')){$("#btn"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);} break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}

BIN
docs/ui_inputtypes.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

File diff suppressed because one or more lines are too long