mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-10 19:00:54 +00:00
Updated documentation
This commit is contained in:
parent
b47d595194
commit
a3b253665d
29
README.md
29
README.md
@ -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
3
data/js/controls.js
vendored
@ -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:
|
||||||
|
1
data/js/controls.min.js
vendored
1
data/js/controls.min.js
vendored
@ -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
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
Loading…
Reference in New Issue
Block a user