Row Types
Single Line
A simple row with one line of text.
Property | Description |
---|---|
value | Get or set the text to be shown as value |
value_color | Get or set color of the text in form of #RRGGBBAA. |
Example to set the value:
ESP.updateRow('default', 'my_row', 'value' , 'Text To Show');
Example to get the value:
var rowValue = ESP.getRowValue('default', 'my_row', 'value');
Key Value
A row with key on left and value on right.
Property | Description |
---|---|
key | Get or set the text to be shown as Key |
value | Get or set the text to be shown as value |
key_color | Get or set color of the key in form of #RRGGBBAA. |
value_color | Get or set color of the value in form of #RRGGBBAA. |
Key Icon
A row with key on left and an icon on right.
Property | Description |
---|---|
key | Get or set the text to be shown as Key |
icon | Get or set the icon, possible values can be found here. |
key_color | Get or set color of the key in form of #RRGGBBAA. |
icon_color | Get or set color of the icon in form of #RRGGBBAA. |
Key Value Picker
A row with key on left and value on right that allows user to pick value from a pre-defined list of values.
Property | Description |
---|---|
key | Get or set the text to be shown as Key |
value | Get or set the value |
clear_all | Remove all values from picker drop down list |
add_value | Adds a new value to drop down |
key_color | Get or set color of the key in form of #RRGGBBAA. |
value_color | Get or set color of the value in form of #RRGGBBAA. |
To setup the list of values to pick, you can use these actions as property of ESP.updateRow.
- clear_all removes all values from menu.
- add_value adds a new value to list.
For “Key Value Picker” you can subscribe to ESP.onValueChanged function to get notified when user changes the value.
Example:
ESP.updateRow('default','my_control','key',"Mode");
ESP.updateRow('default','my_control','value',"Loading...");
ESP.updateRow('default','my_control','clear_all',"");
ESP.updateRow('default','my_control','add_value',"AUTO");
ESP.updateRow('default','my_control','add_value',"WHITE");
ESP.updateRow('default','my_control','add_value',"BLUE");
ESP.updateRow('default','my_control','add_value',"OFF");
Key Value Time Picker
A row with key on left and value on right that allows user to pick value from time.
Property | Description |
---|---|
key | Get or set the text to be shown as Key |
value | Get or set the value as time in form of 05:19 |
key_color | Get or set color of the key in form of #RRGGBBAA. |
value_color | Get or set color of the value in form of #RRGGBBAA. |
For “Key Value Time Picker” you can subscribe to ESP.onValueChanged function to get notified when used changes the value.When you want to set the default value, set it in 24 hours format with leading zeros like 05:19. On getRowValue
this function returns the time in same format (leading zero in 24 hours format).
Text Field
A row with key on left and an edit box on right.
Property | Description |
---|---|
key | Get or set the text to be shown as Key |
value | Get or set the value of editable text box |
key_color | Get or set color of the key in form of #RRGGBBAA. |
value_color | Get or set color of the value (text box contents) in form of #RRGGBBAA. |
Switch
A row with key on left and a switch control on right.
Property | Description |
---|---|
key | Get or set the text to be shown as Key |
value | Get or set the state of the switch, ‘y’ is ON and ‘n’ is OFF |
key_color | Get or set color of the key in form of #RRGGBBAA. |
switch_border_color | Get or set color of the switch’s border in form of #RRGGBBAA. |
switch_on_color | Get or set color of the switch when turned on in form of #RRGGBBAA. |
To turn on the switch, set the value property using updateRow
to ‘y’ (lowercase). You can get the value using getRowValue
, if switch is on property ‘value’ will be ‘y’ and if switch is off value will be ‘n’.
Segment
A row with key on left and a segment control on right.
Property | Description |
---|---|
key | Get or set the text to be shown as Key |
count | Get or set number of segments, minimum 2 and maximum 8 |
segment_X | Get or set title for segment index X, first segment has index of 0, second segment has index of 1 and so on. |
selected_index | Get or set current selected index, first segment has index of 0, second segment has index of 1 and so on. |
key_color | Get or set color of the key in form of #RRGGBBAA. |
segment_color | Get or set color of the segment in form of #RRGGBBAA. |
Example:
ESP.updateRow('default','test_segment','key','Test Segment');
ESP.updateRow('default','test_segment','count',3);
ESP.updateRow('default','test_segment','selected_index',0);
ESP.updateRow('default','test_segment','segment_0','My First');
ESP.updateRow('default','test_segment','segment_1','My Second');
ESP.updateRow('default','test_segment','segment_2','My Last');
ESP.onValueChanged('default','test_segment', function(newValue, page_id, row_id){
console.log("New index: "+newValue);
});
Long Text
A row to show large text contents like log rows.
Property | Description |
---|---|
value | Get or set the row content |
height | Get or set the row height, default height is 120 |
value_color | Get or set color of the text in form of #RRGGBBAA. |
Image
A row to show an image.
Property | Description |
---|---|
image | Set binary data of the image |
height | Get or set the row height, default height is 120 |
fill_mode | Get or set the fill mode of the image. Possible values are described bellow. |
image_png | Get content of the image in png format. |
image_jpg | Get content of the image in jpg format. |
Fill modes are:
Fill Mode | Description |
---|---|
scale_to_fill | Scale the image to fill the entire container regardless of aspect ratio. |
aspect_fit | Fits the image into container preserving aspect ratio. |
aspect_fill | Fills the image into container preserving aspect ratio. |
center | Position the image center in container keeping original size. |
left | Position the image left in container and middle vertically keeping original size. |
right | Position the image right in container and middle vertically keeping original size. |
top | Position the image top in container and center horizontally keeping original size. |
bottom | Position the image bottom in container and center horizontally keeping original size. |
top_left | Position the image top-left in container keeping original size. |
top_right | Position the image top-right in container keeping original size. |
bottom_left | Position the image bottom-left in container keeping original size. |
bottom_right | Position the image bottom-right in container keeping original size. |