ESP Home Documentation
LOGIN

Row Types

Single Line

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here
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

enter image description here
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

enter image description here
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

enter image description here
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

enter image description here
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

enter image description here

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.