diff --git a/0.7.0/commands/configuration/index.html b/0.7.0/commands/configuration/index.html
index ea6f4baf6..cb1f8c3a1 100644
--- a/0.7.0/commands/configuration/index.html
+++ b/0.7.0/commands/configuration/index.html
@@ -2419,8 +2419,8 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#nodename" class="md-nav__link">
-    nodename
+  <a href="#hostname" class="md-nav__link">
+    hostname
   </a>
   
 </li>
@@ -2684,8 +2684,8 @@
       <ul class="md-nav__list">
         
           <li class="md-nav__item">
-  <a href="#nodename" class="md-nav__link">
-    nodename
+  <a href="#hostname" class="md-nav__link">
+    hostname
   </a>
   
 </li>
@@ -2758,10 +2758,10 @@ <h3 id="ssid"><code>ssid</code><a class="headerlink" href="#ssid" title="Permane
 <h3 id="pass"><code>pass</code><a class="headerlink" href="#pass" title="Permanent link">~</a></h3>
 <p>Set the optional password for the access point to connect to.</p>
 <h2 id="mqtt">MQTT<a class="headerlink" href="#mqtt" title="Permanent link">~</a></h2>
-<h3 id="nodename"><code>nodename</code><a class="headerlink" href="#nodename" title="Permanent link">~</a></h3>
-<p>Set the nodename of the device and mqtt topic for the node to <code>hasp/&lt;nodename&gt;/</code></p>
+<h3 id="hostname"><code>hostname</code><a class="headerlink" href="#hostname" title="Permanent link">~</a></h3>
+<p>Set the hostname of the device and mqtt topic for the node to <code>hasp/&lt;nodename&gt;/</code></p>
 <h3 id="mqtthost"><code>mqtthost</code><a class="headerlink" href="#mqtthost" title="Permanent link">~</a></h3>
-<p>Set the IP address or nodename of the mqtt broker.</p>
+<p>Set the IP address or hostname of the mqtt broker.</p>
 <h3 id="mqttport"><code>mqttport</code><a class="headerlink" href="#mqttport" title="Permanent link">~</a></h3>
 <p>Set the port of the mqtt broker.</p>
 <h3 id="mqttuser"><code>mqttuser</code><a class="headerlink" href="#mqttuser" title="Permanent link">~</a></h3>
diff --git a/0.7.0/commands/index.html b/0.7.0/commands/index.html
index 8ecdff4d2..83b857126 100644
--- a/0.7.0/commands/index.html
+++ b/0.7.0/commands/index.html
@@ -3064,10 +3064,10 @@ <h4 id="ssid"><code>ssid</code><a class="headerlink" href="#ssid" title="Permane
 <h4 id="pass"><code>pass</code><a class="headerlink" href="#pass" title="Permanent link">~</a></h4>
 <p>Set the optional password for the access point to connect to.</p>
 <h3 id="mqtt">MQTT<a class="headerlink" href="#mqtt" title="Permanent link">~</a></h3>
-<h4 id="nodename"><code>nodename</code><a class="headerlink" href="#nodename" title="Permanent link">~</a></h4>
-<p>Set the nodename of the device and mqtt topic for the node to <code>hasp/&lt;nodename&gt;/</code></p>
+<h4 id="hostname"><code>hostname</code><a class="headerlink" href="#hostname" title="Permanent link">~</a></h4>
+<p>Set the hostname of the device and mqtt topic for the node to <code>hasp/&lt;nodename&gt;/</code></p>
 <h4 id="mqtthost"><code>mqtthost</code><a class="headerlink" href="#mqtthost" title="Permanent link">~</a></h4>
-<p>Set the IP address or nodename of the mqtt broker.</p>
+<p>Set the IP address or hostname of the mqtt broker.</p>
 <h4 id="mqttport"><code>mqttport</code><a class="headerlink" href="#mqttport" title="Permanent link">~</a></h4>
 <p>Set the port of the mqtt broker.</p>
 <h4 id="mqttuser"><code>mqttuser</code><a class="headerlink" href="#mqttuser" title="Permanent link">~</a></h4>
diff --git a/0.7.0/search/search_index.json b/0.7.0/search/search_index.json
index 78b04da2c..8384af355 100644
--- a/0.7.0/search/search_index.json
+++ b/0.7.0/search/search_index.json
@@ -1 +1 @@
-{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"openHASP Control your home-automation devices from a customizable touchscreen UI connected via MQTT. openHASP is a re-implementation of the popular HASwitchPlate sketch created by aderusha. The HASPone project uses a Wemos D1 mini and requires a Nextion/TJC HMI display. This project is a complete rewrite and implements the Light and Versatile Graphics Library on the MCU to drive a commodity display. openHASP uses an ESP32 to take advantage of the additional hardware capabilities. Demo Screens ~ Click on the demo screen to show the example configuration: Quotes ~ kazimir Hey man, openHASP is amazing. Currently running 12 pieces of Lanbon L8 plates in my house with your firmware. danielo Oh man, integrating this with Home Assistant was super easy. Lucky you can't see me getting hyped about turning on/off my office lights from a tinny screen (and doing it like 3 or 4 times on a row...) Support ~ For support using openHASP you can find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum Donate ~ The firmware is opensource and free to use! If you like this project you can show your appreciation by making a small donation. This will help with ofssetting the cost of the different hardware devices we support.","title":"Overview"},{"location":"#demo-screens","text":"Click on the demo screen to show the example configuration:","title":"Demo Screens"},{"location":"#quotes","text":"kazimir Hey man, openHASP is amazing. Currently running 12 pieces of Lanbon L8 plates in my house with your firmware. danielo Oh man, integrating this with Home Assistant was super easy. Lucky you can't see me getting hyped about turning on/off my office lights from a tinny screen (and doing it like 3 or 4 times on a row...)","title":"Quotes"},{"location":"#support","text":"For support using openHASP you can find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum","title":"Support"},{"location":"#donate","text":"The firmware is opensource and free to use! If you like this project you can show your appreciation by making a small donation. This will help with ofssetting the cost of the different hardware devices we support.","title":"Donate"},{"location":"commands/","text":"Commands are not related to an object on the screen but can get or set global properties or invoke system commands on the device. MQTT Topics ~ hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub. Issuing commands ~ Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it. Batch processing ~ Commands can be processed in batch one after another from .cmd script files located in the flash storage of the plate. General rules when creating .cmd batch scripts: can contain any command empty lines are ignored # or // can be used for comments space or tab in front of a command is ignored lines starting with { are processed as jsonl payloads lines starting with [ are processed as json payloads other lines are processed as <command> <payload> CR , LF or CRLF line endings allowed UTF8 encoding is required for special characters To start a batch script, use run command. System scripts ~ If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost This makes it possible to disable or hide buttons, load a special offline page, etc. See example . Global commands ~ run ~ accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl jsonl ~ accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects . json ~ accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer. page ~ accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page . clearpage ~ accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command. backlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%. moodlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 GPIO pins as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts boolean values to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts color values to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels. idle ~ accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the Display Settings . You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic. output[x] ~ where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly. input[x] ~ where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" } System Commands ~ antiburn ~ accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the automation example to make it run on a regular basis. calibrate ~ Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost. discovery ~ Trigger the sending of the discovery payload. sensors ~ Trigger the sending of the sensor data. factoryreset ~ Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function! reboot or restart ~ Saves any changes in the configuration file and reboots the device. screenshot ~ Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten. service ~ Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization . statusupdate ~ Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 } unzip ~ Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip update ~ accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful. Configuration Settings ~ Wi-FI ~ ssid ~ Set network name of the access point to connect to. pass ~ Set the optional password for the access point to connect to. MQTT ~ nodename ~ Set the nodename of the device and mqtt topic for the node to hasp/<nodename>/ mqtthost ~ Set the IP address or nodename of the mqtt broker. mqttport ~ Set the port of the mqtt broker. mqttuser ~ Set the optional username for the mqtt broker. mqttpass ~ Set the optional password for the mqtt broker. config/submodule ~ You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"Commands"},{"location":"commands/#mqtt-topics","text":"hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub.","title":"MQTT Topics"},{"location":"commands/#issuing-commands","text":"Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it.","title":"Issuing commands"},{"location":"commands/#batch-processing","text":"Commands can be processed in batch one after another from .cmd script files located in the flash storage of the plate. General rules when creating .cmd batch scripts: can contain any command empty lines are ignored # or // can be used for comments space or tab in front of a command is ignored lines starting with { are processed as jsonl payloads lines starting with [ are processed as json payloads other lines are processed as <command> <payload> CR , LF or CRLF line endings allowed UTF8 encoding is required for special characters To start a batch script, use run command.","title":"Batch processing"},{"location":"commands/#system-scripts","text":"If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost This makes it possible to disable or hide buttons, load a special offline page, etc. See example .","title":"System scripts"},{"location":"commands/#global-commands","text":"","title":"Global commands"},{"location":"commands/#run","text":"accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl","title":"run"},{"location":"commands/#jsonl","text":"accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects .","title":"jsonl"},{"location":"commands/#json","text":"accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer.","title":"json"},{"location":"commands/#page","text":"accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page .","title":"page"},{"location":"commands/#clearpage","text":"accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command.","title":"clearpage"},{"location":"commands/#backlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%.","title":"backlight"},{"location":"commands/#moodlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 GPIO pins as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts boolean values to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts color values to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels.","title":"moodlight"},{"location":"commands/#idle","text":"accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the Display Settings . You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic.","title":"idle"},{"location":"commands/#outputx","text":"where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly.","title":"output[x]"},{"location":"commands/#inputx","text":"where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" }","title":"input[x]"},{"location":"commands/#system-commands","text":"","title":"System Commands"},{"location":"commands/#antiburn","text":"accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the automation example to make it run on a regular basis.","title":"antiburn"},{"location":"commands/#calibrate","text":"Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost.","title":"calibrate"},{"location":"commands/#discovery","text":"Trigger the sending of the discovery payload.","title":"discovery"},{"location":"commands/#sensors","text":"Trigger the sending of the sensor data.","title":"sensors "},{"location":"commands/#factoryreset","text":"Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function!","title":"factoryreset"},{"location":"commands/#reboot-or-restart","text":"Saves any changes in the configuration file and reboots the device.","title":"reboot or restart"},{"location":"commands/#screenshot","text":"Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten.","title":"screenshot"},{"location":"commands/#service","text":"Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization .","title":"service"},{"location":"commands/#statusupdate","text":"Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 }","title":"statusupdate"},{"location":"commands/#unzip","text":"Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip","title":"unzip"},{"location":"commands/#update","text":"accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful.","title":"update"},{"location":"commands/#configuration-settings","text":"","title":"Configuration Settings"},{"location":"commands/#wi-fi","text":"","title":"Wi-FI"},{"location":"commands/#mqtt","text":"","title":"MQTT"},{"location":"commands/#configsubmodule","text":"You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"config/submodule"},{"location":"gallery/","text":"","title":"Gallery"},{"location":"assets/buy/waveshare-tft-touch-shield/","text":"<!-- No line breaks allowed! Use \\t to \\n -> Buy Amazon US Amazon UK Waveshare.com Buy Amazon US Amazon UK AliExpress Waveshare.com Buy Amazon US Amazon UK AliExpress Waveshare.com","title":"Waveshare tft touch shield"},{"location":"assets/buy/wishlist/","text":"Devices ~ Displays ~ Development Boards ~ Assorted Links ~ Note This page contains affiliate links which may pay us a small commission.","title":"Wishlist"},{"location":"assets/buy/wishlist/#devices","text":"","title":"Devices"},{"location":"assets/buy/wishlist/#displays","text":"","title":"Displays"},{"location":"assets/buy/wishlist/#development-boards","text":"","title":"Development Boards"},{"location":"assets/buy/wishlist/#assorted-links","text":"Note This page contains affiliate links which may pay us a small commission.","title":"Assorted Links"},{"location":"assets/users/icons/","text":"For assets usable by endusers.","title":"Icons"},{"location":"assets/videos/videos/","text":"directory for videos","title":"Videos"},{"location":"commands/configuration/","text":"Wi-FI ~ ssid ~ Set network name of the access point to connect to. pass ~ Set the optional password for the access point to connect to. MQTT ~ nodename ~ Set the nodename of the device and mqtt topic for the node to hasp/<nodename>/ mqtthost ~ Set the IP address or nodename of the mqtt broker. mqttport ~ Set the port of the mqtt broker. mqttuser ~ Set the optional username for the mqtt broker. mqttpass ~ Set the optional password for the mqtt broker. config/submodule ~ You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"Configuration Settings"},{"location":"commands/configuration/#wi-fi","text":"","title":"Wi-FI"},{"location":"commands/configuration/#ssid","text":"Set network name of the access point to connect to.","title":"ssid"},{"location":"commands/configuration/#pass","text":"Set the optional password for the access point to connect to.","title":"pass"},{"location":"commands/configuration/#mqtt","text":"","title":"MQTT"},{"location":"commands/configuration/#nodename","text":"Set the nodename of the device and mqtt topic for the node to hasp/<nodename>/","title":"nodename"},{"location":"commands/configuration/#mqtthost","text":"Set the IP address or nodename of the mqtt broker.","title":"mqtthost"},{"location":"commands/configuration/#mqttport","text":"Set the port of the mqtt broker.","title":"mqttport"},{"location":"commands/configuration/#mqttuser","text":"Set the optional username for the mqtt broker.","title":"mqttuser"},{"location":"commands/configuration/#mqttpass","text":"Set the optional password for the mqtt broker.","title":"mqttpass"},{"location":"commands/configuration/#configsubmodule","text":"You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"config/submodule"},{"location":"commands/global/","text":"run ~ accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl jsonl ~ accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects . json ~ accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer. page ~ accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page . clearpage ~ accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command. backlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%. moodlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 [GPIO pins][3] as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts [boolean values][2] to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts [color values][1] to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels. idle ~ accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the [Display Settings][4]. You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic. output[x] ~ where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly. input[x] ~ where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" }","title":"Global Commands"},{"location":"commands/global/#run","text":"accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl","title":"run"},{"location":"commands/global/#jsonl","text":"accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects .","title":"jsonl"},{"location":"commands/global/#json","text":"accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer.","title":"json"},{"location":"commands/global/#page","text":"accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page .","title":"page"},{"location":"commands/global/#clearpage","text":"accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command.","title":"clearpage"},{"location":"commands/global/#backlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%.","title":"backlight"},{"location":"commands/global/#moodlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 [GPIO pins][3] as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts [boolean values][2] to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts [color values][1] to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels.","title":"moodlight"},{"location":"commands/global/#idle","text":"accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the [Display Settings][4]. You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic.","title":"idle"},{"location":"commands/global/#outputx","text":"where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly.","title":"output[x]"},{"location":"commands/global/#inputx","text":"where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" }","title":"input[x]"},{"location":"commands/mqtt/","text":"MQTT Topics ~ hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub. Issuing commands ~ Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it.","title":"Mqtt"},{"location":"commands/mqtt/#mqtt-topics","text":"hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub.","title":"MQTT Topics"},{"location":"commands/mqtt/#issuing-commands","text":"Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it.","title":"Issuing commands"},{"location":"commands/scripts/","text":"Commands can be processed in batch one after another from .cmd script files located in the flash storage of the plate. General rules when creating .cmd batch scripts: can contain any command empty lines are ignored # or // can be used for comments space or tab in front of a command is ignored lines starting with { are processed as jsonl payloads lines starting with [ are processed as json payloads other lines are processed as <command> <payload> CR , LF or CRLF line endings allowed UTF8 encoding is required for special characters To start a batch script, use run command. System scripts ~ If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost L:/idle_off.cmd will be executed after idle state change to off (wakeup) L:/idle_short.cmd will be executed after idle state change to short L:/idle_long.cmd will be executed after idle state change to long This makes it possible to disable or hide buttons, load a special offline page, dimming background, etc. See example .","title":"Batch Processing"},{"location":"commands/scripts/#system-scripts","text":"If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost L:/idle_off.cmd will be executed after idle state change to off (wakeup) L:/idle_short.cmd will be executed after idle state change to short L:/idle_long.cmd will be executed after idle state change to long This makes it possible to disable or hide buttons, load a special offline page, dimming background, etc. See example .","title":"System scripts"},{"location":"commands/system/","text":"antiburn ~ accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the [automation example][6] to make it run on a regular basis. calibrate ~ Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost. discovery ~ Trigger the sending of the discovery payload. sensors ~ Trigger the sending of the sensor data. factoryreset ~ Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function! reboot or restart ~ Saves any changes in the configuration file and reboots the device. screenshot ~ Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten. service ~ Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization . statusupdate ~ Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 } unzip ~ Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip update ~ accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful.","title":"System Commands"},{"location":"commands/system/#antiburn","text":"accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the [automation example][6] to make it run on a regular basis.","title":"antiburn"},{"location":"commands/system/#calibrate","text":"Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost.","title":"calibrate"},{"location":"commands/system/#discovery","text":"Trigger the sending of the discovery payload.","title":"discovery"},{"location":"commands/system/#sensors","text":"Trigger the sending of the sensor data.","title":"sensors "},{"location":"commands/system/#factoryreset","text":"Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function!","title":"factoryreset"},{"location":"commands/system/#reboot-or-restart","text":"Saves any changes in the configuration file and reboots the device.","title":"reboot or restart"},{"location":"commands/system/#screenshot","text":"Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten.","title":"screenshot"},{"location":"commands/system/#service","text":"Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization .","title":"service"},{"location":"commands/system/#statusupdate","text":"Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 }","title":"statusupdate"},{"location":"commands/system/#unzip","text":"Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip","title":"unzip"},{"location":"commands/system/#update","text":"accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful.","title":"update"},{"location":"design/characters/","text":"Languages ~ Encoding ~ The character sets are encoded in UTF-8. All character sets contain the ASCII 0x20-0x7E characters and the non-braking-space (NBSP). Each set contains roughly the same extended characters from its equivalent iso-8859 standard . For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands. All character sets also contain about 100 standaard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts. Ascii ~ Includes all ASCII 0x20-0x7E characters extended with these 11 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022 Latin 1 ~ Includes all characters and symbols from the ASCII range above. Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e Latin 2 ~ Includes all characters and symbols from the ASCII range above. Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b Chinese ~ Includes all characters and symbols from the ASCII range above, plus 650 most common CJK radicals: \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13 \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13 Characters ~ UTF-8 Char Description CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A0 Non-breaking space CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A1 \u00a1 Inverted exclamation mark ES 00A2 \u00a2 Cent sign 00A3 \u00a3 Pound sign 00A4 \u00a4 Currency sign 00A5 \u00a5 Yen sign 00A6 \u00a6 Broken bar 00A7 \u00a7 Section sign 00A8 \u00a8 Diaeresis 00A9 \u00a9 Copyright sign 00AA \u00aa Feminine Ordinal Indicator 00AB \u00ab Left-pointing double angle quotation mark 00AC \u00ac Not sign 00AD \u00ad Soft hyphen 00AE \u00ae Registered sign 00AF \u00af Macron 00B0 \u00b0 Degree symbol CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B1 \u00b1 Plus-minus sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B2 \u00b2 Superscript two 00B3 \u00b3 Superscript three 00B4 \u00b4 Acute accent DA 00B5 \u00b5 Micro sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B6 \u00b6 Pilcrow sign 00B7 \u00b7 Middle dot CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B8 \u00b8 Cedilla 00B9 \u00b9 Superscript one 00BA \u00ba Masculine ordinal indicator 00BB \u00bb Right-pointing double-angle quotation mark 00BC \u00bc Vulgar fraction one quarter CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BD \u00bd Vulgar fraction one half CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BE \u00be Vulgar fraction three quarters CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BF \u00bf Inverted question mark ES 00C0 \u00c0 Capital A with grave PT IT FR 00C1 \u00c1 Capital A with acute HU ES PT FR 00C2 \u00c2 Capital A with circumflex RO NO PT FR 00C3 \u00c3 Capital A with tilde PT 00C4 \u00c4 Capital A with diaeresis DE SV FI DA 00C5 \u00c5 Capital A with ring above SV FI DA NO 00C6 \u00c6 Capital AE DA NO 00C7 \u00c7 Capital C with cedilla PT FR 00C8 \u00c8 Capital E with grave NO IT FR 00C9 \u00c9 Capital E with acute NO HU ES PT IT FR 00CA \u00ca Capital E with circumflex NO PT FR 00CB \u00cb Capital E with diaeresis FR 00CC \u00cc Capital I with grave IT 00CD \u00cd Capital I with acute HU ES PT 00CE \u00ce Capital I with circumflex RO FR 00CF \u00cf Capital I with diaeresis FR 00D0 \u00d0 Capital Eth 00D1 \u00d1 Capital N with tilde ES 00D2 \u00d2 Capital O with grave NO IT 00D3 \u00d3 Capital O with acute NO HU ES PT 00D4 \u00d4 Capital O with circumflex NO PT FR 00D5 \u00d5 Capital O with tilde PT FR 00D6 \u00d6 Capital O with diaeresis DE SV FI DA HU 00D7 \u00d7 Multiplication sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00D8 \u00d8 Capital O with stroke DA NO 00D9 \u00d9 Capital U with grave IT 00DA \u00da Capital U with acute HU ES PT 00DB \u00db Capital U with circumflex 00DC \u00dc Capital U with diaeresis DE DA HU ES PT 00DD \u00dd Capital Y with acute CZ ES 00DE \u00de Capital Thorn 00DF \u00df Small sharp S DE 00E0 \u00e0 Small A with grave PT IT FR 00E1 \u00e1 Small A with acute HU ES PT FR 00E2 \u00e2 Small A with circumflex RO NO PT FR 00E3 \u00e3 Small A with tilde PT 00E4 \u00e4 Small A with diaeresis DE SV FI DA 00E5 \u00e5 Small A with ring above SV FI DA NO 00E6 \u00e6 Small AE DA NO 00E7 \u00e7 Small C with cedilla PT FR 00E8 \u00e8 Small E with grave NO IT FR 00E9 \u00e9 Small E with acute DA NO HU ES PT IT FR 00EA \u00ea Small E with circumflex NO PT FR 00EB \u00eb Small E with diaeresis 00EC \u00ec Small I with grave IT 00ED \u00ed Small I with acute HU ES PT FR 00EE \u00ee Small I with circumflex RO FR 00EF \u00ef Small I with diaeresis FR 00F0 \u00f0 Small Eth 00F1 \u00f1 Small N with tilde ES EN NL 00F2 \u00f2 Small O with grave NO IT 00F3 \u00f3 Small O with acute NO HU ES PT FR 00F4 \u00f4 Small O with circumflex NO PT FR 00F5 \u00f5 Small O with tilde PT 00F6 \u00f6 Small O with diaeresis DE SV FI DA HU 00F7 \u00f7 Division sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00F8 \u00f8 Small O with stroke DA NO 00F9 \u00f9 Small U with grave IT FR 00FA \u00fa Small U with acute HU ES PT FR 00FB \u00fb Small U with circumflex FR 00FC \u00fc Small U with diaeresis DE DA HU ES PT 00FD \u00fd Small Y with acute ES 00FE \u00fe Small Thorn 00FF \u00ff Small Y with diaeresis 0100 \u0100 Capital A with macron 0101 \u0101 Small A with macron 0102 \u0102 Capital A with breve RO 0103 \u0103 Small A with breve RO 0104 \u0104 Capital A with ogonek 0105 \u0105 Small A with ogonek 0106 \u0106 Capital C with acute 0107 \u0107 Small C with acute 0108 \u0108 Capital C with circumflex 0109 \u0109 Small C with circumflex 010A \u010a Capital C with dot above 010B \u010b Small C with dot above 010C \u010c Capital C with caron SL 010D \u010d Small C with caron SL 010E \u010e Capital D with caron 010F \u010f Small D with caron 0110 \u0110 Capital D with stroke 0111 \u0111 Small D with stroke 0112 \u0112 Capital E with macron 0113 \u0113 Small E with macron 0114 \u0114 Capital E with breve CZ 0115 \u0115 Small E with breve CZ 0116 \u0116 Capital E with dot above 0117 \u0117 Small E with dot above 0118 \u0118 Capital E with ogonek 0119 \u0119 Small E with ogonek 011A \u011a Capital E with caron 011B \u011b Small E with caron 011C \u011c Capital G with circumflex 011D \u011d Small G with circumflex 011E \u011e Capital G with breve 011F \u011f Small G with breve 0120 \u0120 Capital G with dot above 0121 \u0121 Small G with dot above 0122 \u0122 Capital G with cedilla 0123 \u0123 Small G with cedilla 0124 \u0124 Capital H with circumflex 0125 \u0125 Small H with circumflex 0126 \u0126 Capital H with stroke 0127 \u0127 Small H with stroke 0128 \u0128 Capital I with tilde 0129 \u0129 Small I with tilde 012A \u012a Capital I with macron 012B \u012b Small I with macron 012C \u012c Capital I with breve 012D \u012d Small I with breve 012E \u012e Capital I with ogonek 012F \u012f Small I with ogonek 0130 \u0130 Capital I with dot above 0131 \u0131 Small dotless I 0132 \u0132 Capital Ligature IJ 0133 \u0133 Small Ligature IJ 0134 \u0134 Capital J with circumflex 0135 \u0135 Small J with circumflex 0136 \u0136 Capital K with cedilla 0137 \u0137 Small K with cedilla 0138 \u0138 Small Kra 0139 \u0139 Capital L with acute 013A \u013a Small L with acute 013B \u013b Capital L with cedilla 013C \u013c Small L with cedilla 013D \u013d Capital L with caron 013E \u013e Small L with caron 013F \u013f Capital L with middle dot 0140 \u0140 Small L with middle dot 0141 \u0141 Capital L with stroke 0142 \u0142 Small L with stroke 0143 \u0143 Capital N with acute 0144 \u0144 Small N with acute 0145 \u0145 Capital N with cedilla 0146 \u0146 Small N with cedilla 0147 \u0147 Capital N with caron CZ 0148 \u0148 Small N with caron CZ 0149 \u0149 Small N preceded by apostrophe 014A \u014a Capital Eng 014B \u014b Small Eng 014C \u014c Capital O with macron 014D \u014d Small O with macron 014E \u014e Capital O with breve 014F \u014f Small O with breve 0150 \u0150 Capital O with double acute HU 0151 \u0151 Small O with double acute HU 0152 \u0152 Capital Ligature OE FR 0153 \u0153 Small Ligature OE FR 0154 \u0154 Capital R with acute 0155 \u0155 Small R with acute 0156 \u0156 Capital R with cedilla 0157 \u0157 Small R with cedilla 0158 \u0158 Capital R with caron 0159 \u0159 Small R with caron 015A \u015a Capital S with acute 015B \u015b Small S with acute 015C \u015c Capital S with circumflex 015D \u015d Small S with circumflex 015E \u015e Capital S with cedilla RO 015F \u015f Small S with cedilla RO 0160 \u0160 Capital S with caron SL FI 0161 \u0161 Small S with caron SL FI 0162 \u0162 Capital T with cedilla RO 0163 \u0163 Small T with cedilla RO 0164 \u0164 Capital T with caron 0165 \u0165 Small T with caron 0166 \u0166 Capital T with stroke 0167 \u0167 Small T with stroke 0168 \u0168 Capital U with tilde 0169 \u0169 Small U with tilde 016A \u016a Capital U with macron 016B \u016b Small U with macron 016C \u016c Capital U with breve 016D \u016d Small U with breve 016E \u016e Capital U with ring above CZ 016F \u016f Small U with ring above CZ 0170 \u0170 Capital U with double acute HU 0171 \u0171 Small U with double acute HU 0172 \u0172 Capital U with ogonek 0173 \u0173 Small U with ogonek 0174 \u0174 Capital W with circumflex 0175 \u0175 Small W with circumflex 0176 \u0176 Capital Y with circumflex 0177 \u0177 Small Y with circumflex 0178 \u0178 Capital Y with diaeresis 0179 \u0179 Capital Z with acute 017A \u017a Small Z with acute 017B \u017b Capital Z with dot above 017C \u017c Small Z with dot above 017D \u017d Capital Z with caron SL FI 017E \u017e Small Z with caron SL FI 017F \u017f Small long S 01C4 \u01c4 Capital DZ with Caron HR 01C5 \u01c5 Capital D with Small Z with Caron HR 01C6 \u01c6 Small DZ with Caron HR 01C7 \u01c7 Capital LJ HR 01C8 \u01c8 Capital L with Small J HR 01C9 \u01c9 Small LJ HR 01CA \u01ca Capital NJ HR 01CB \u01cb Capital N with Small J HR 01CC \u01cc Small NJ HR 01CD \u01cd Capital A with Caron RO 01CE \u01ce Small A with Caron RO 01CF \u01cf Capital I with Caron 01D0 \u01d0 Small I with Caron 01D1 \u01d1 Capital O with Caron 01D2 \u01d2 Small O with Caron 01D3 \u01d3 Capital U with Caron 01D4 \u01d4 Small U with Caron 01D5 \u01d5 Capital U with Diaeresis and Macron 01D6 \u01d6 Small U with Diaeresis and Macron 01D7 \u01d7 Capital U with Diaeresis and Acute 01D8 \u01d8 Small U with Diaeresis and Acute 01D9 \u01d9 Capital U with Diaeresis and Caron 01DA \u01da Small U with Diaeresis and Caron 01DB \u01db Capital U with Diaeresis and Grave 01DC \u01dc Small U with Diaeresis and Grave 01DD \u01dd Small Turned E 01DE \u01de Capital A with Diaeresis and Macron 01DF \u01df Small A with Diaeresis and Macron 01E0 \u01e0 Capital A with Dot Above and Macron 01E1 \u01e1 Small A with Dot Above and Macron 01E2 \u01e2 Capital AE with Macron 01E3 \u01e3 Small AE with Macron 01E4 \u01e4 Capital G with Stroke 01E5 \u01e5 Small G with Stroke 01E6 \u01e6 Capital G with Caron 01E7 \u01e7 Small G with Caron 01E8 \u01e8 Capital K with Caron 01E9 \u01e9 Small K with Caron 01EA \u01ea Capital O with Ogonek 01EB \u01eb Small O with Ogonek 01EC \u01ec Capital O with Ogonek and Macron 01ED \u01ed Small O with Ogonek and Macron 01EE \u01ee Capital Ezh with Caron 01EF \u01ef Small Ezh with Caron 01F0 \u01f0 Small J with Caron 01F1 \u01f1 Capital DZ 01F2 \u01f2 Capital D with Small Z 01F3 \u01f3 Small DZ 01F4 \u01f4 Capital G with Acute 01F5 \u01f5 Small G with Acute 01F6 \u01f6 Capital Hwair 01F7 \u01f7 Capital Wynn 01F8 \u01f8 Capital N with Grave 01F9 \u01f9 Small N with Grave 01FA \u01fa Capital A with Ring Above and Acute 01FB \u01fb Small A with Ring Above and Acute 01FC \u01fc Capital AE with Acute 01FD \u01fd Small AE with Acute 01FE \u01fe Capital O with Stroke and Acute 01FF \u01ff Small O with Stroke and Acute 0200 \u0200 Capital A with Double Grave HR SL 0201 \u0201 Small A with Double Grave HR SL 0202 \u0202 Capital A with Inverted Breve RO HR SL 0203 \u0203 Small A with Inverted Breve RO HR SL 0204 \u0204 Capital E with Double Grave HR SL 0205 \u0205 Small E with Double Grave HR SL 0206 \u0206 Capital E with Inverted Breve HR SL 0207 \u0207 Small E with Inverted Breve HR SL 0208 \u0208 Capital I with Double Grave HR SL 0209 \u0209 Small I with Double Grave HR SL 020A \u020a Capital I with Inverted Breve RO HR SL 020B \u020b Small I with Inverted Breve RO HR SL 020C \u020c Capital O with Double Grave HR SL 020D \u020d Small O with Double Grave HR SL 020E \u020e Capital O with Inverted Breve HR SL 020F \u020f Small O with Inverted Breve HR SL 0210 \u0210 Capital R with Double Grave HR SL 0211 \u0211 Small R with Double Grave HR SL 0212 \u0212 Capital R with Inverted Breve HR SL 0213 \u0213 Small R with Inverted Breve HR SL 0214 \u0214 Capital U with Double Grave HR SL 0215 \u0215 Small U with Double Grave HR SL 0216 \u0216 Capital U with Inverted Breve HR SL 0217 \u0217 Small U with Inverted Breve HR SL 0218 \u0218 Capital S with Comma Below RO 0219 \u0219 Small S with Comma Below RO 021A \u021a Capital T with Comma Below RO 021B \u021b Small T with Comma Below RO 021C \u021c Capital Yogh 021D \u021d Small Yogh 021E \u021e Capital H with Caron 021F \u021f Small H with Caron 0220 \u0220 Capital N with Long Right Leg 0221 \u0221 Small D with Curl 0222 \u0222 Capital OU 0223 \u0223 Small OU 0224 \u0224 Capital Z with Hook 0225 \u0225 Small Z with Hook 0226 \u0226 Capital A with Dot Above 0227 \u0227 Small A with Dot Above 0228 \u0228 Capital E with Cedilla 0229 \u0229 Small E with Cedilla 022A \u022a Capital O with Diaeresis and Macron 022B \u022b Small O with Diaeresis and Macron 022C \u022c Capital O with Tilde and Macron 022D \u022d Small O with Tilde and Macron 022E \u022e Capital O with Dot Above 022F \u022f Small O with Dot Above 0230 \u0230 Capital O with Dot Above and Macron 0231 \u0231 Small O with Dot Above and Macron 0232 \u0232 Capital Y with Macron 0233 \u0233 Small Y with Macron 0234 \u0234 Small L with Curl 0235 \u0235 Small N with Curl 0236 \u0236 Small T with Curl 0237 \u0237 Small Dotless J 0238 \u0238 Small DB Digraph 0239 \u0239 Small QP Digraph 023A \u023a Capital A with Stroke 023B \u023b Capital C with Stroke 023C \u023c Small C with Stroke 023D \u023d Capital L with Bar 023E \u023e Capital T with Diagonal Stroke 023F \u023f Small S with Swash Tail 0240 \u0240 Small Z with Swash Tail 0241 \u0241 Capital Glottal Stop 0242 \u0242 Small Glottal Stop 0243 \u0243 Capital B with Stroke 0244 \u0244 Capital U Bar 0245 \u0245 Capital Turned V 0246 \u0246 Capital E with Stroke 0247 \u0247 Small E with Stroke 0248 \u0248 Capital J with Stroke 0249 \u0249 Small J with Stroke 024A \u024a Capital Q with Hook Tail 024B \u024b Small Q with Hook Tail 024C \u024c Capital R with Stroke 024D \u024d Small R with Stroke 024E \u024e Capital Y with Stroke 024F \u024f Small Y with Stroke 1E9E \u1e9e Capital Letter Sharp S DE","title":"Languages"},{"location":"design/characters/#languages","text":"","title":"Languages"},{"location":"design/characters/#encoding","text":"The character sets are encoded in UTF-8. All character sets contain the ASCII 0x20-0x7E characters and the non-braking-space (NBSP). Each set contains roughly the same extended characters from its equivalent iso-8859 standard . For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands. All character sets also contain about 100 standaard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts.","title":"Encoding"},{"location":"design/characters/#ascii","text":"Includes all ASCII 0x20-0x7E characters extended with these 11 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022","title":"Ascii"},{"location":"design/characters/#latin-1","text":"Includes all characters and symbols from the ASCII range above. Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e","title":"Latin 1"},{"location":"design/characters/#latin-2","text":"Includes all characters and symbols from the ASCII range above. Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b","title":"Latin 2"},{"location":"design/characters/#chinese","text":"Includes all characters and symbols from the ASCII range above, plus 650 most common CJK radicals: \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13 \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13","title":"Chinese"},{"location":"design/characters/#characters","text":"UTF-8 Char Description CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A0 Non-breaking space CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A1 \u00a1 Inverted exclamation mark ES 00A2 \u00a2 Cent sign 00A3 \u00a3 Pound sign 00A4 \u00a4 Currency sign 00A5 \u00a5 Yen sign 00A6 \u00a6 Broken bar 00A7 \u00a7 Section sign 00A8 \u00a8 Diaeresis 00A9 \u00a9 Copyright sign 00AA \u00aa Feminine Ordinal Indicator 00AB \u00ab Left-pointing double angle quotation mark 00AC \u00ac Not sign 00AD \u00ad Soft hyphen 00AE \u00ae Registered sign 00AF \u00af Macron 00B0 \u00b0 Degree symbol CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B1 \u00b1 Plus-minus sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B2 \u00b2 Superscript two 00B3 \u00b3 Superscript three 00B4 \u00b4 Acute accent DA 00B5 \u00b5 Micro sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B6 \u00b6 Pilcrow sign 00B7 \u00b7 Middle dot CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B8 \u00b8 Cedilla 00B9 \u00b9 Superscript one 00BA \u00ba Masculine ordinal indicator 00BB \u00bb Right-pointing double-angle quotation mark 00BC \u00bc Vulgar fraction one quarter CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BD \u00bd Vulgar fraction one half CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BE \u00be Vulgar fraction three quarters CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BF \u00bf Inverted question mark ES 00C0 \u00c0 Capital A with grave PT IT FR 00C1 \u00c1 Capital A with acute HU ES PT FR 00C2 \u00c2 Capital A with circumflex RO NO PT FR 00C3 \u00c3 Capital A with tilde PT 00C4 \u00c4 Capital A with diaeresis DE SV FI DA 00C5 \u00c5 Capital A with ring above SV FI DA NO 00C6 \u00c6 Capital AE DA NO 00C7 \u00c7 Capital C with cedilla PT FR 00C8 \u00c8 Capital E with grave NO IT FR 00C9 \u00c9 Capital E with acute NO HU ES PT IT FR 00CA \u00ca Capital E with circumflex NO PT FR 00CB \u00cb Capital E with diaeresis FR 00CC \u00cc Capital I with grave IT 00CD \u00cd Capital I with acute HU ES PT 00CE \u00ce Capital I with circumflex RO FR 00CF \u00cf Capital I with diaeresis FR 00D0 \u00d0 Capital Eth 00D1 \u00d1 Capital N with tilde ES 00D2 \u00d2 Capital O with grave NO IT 00D3 \u00d3 Capital O with acute NO HU ES PT 00D4 \u00d4 Capital O with circumflex NO PT FR 00D5 \u00d5 Capital O with tilde PT FR 00D6 \u00d6 Capital O with diaeresis DE SV FI DA HU 00D7 \u00d7 Multiplication sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00D8 \u00d8 Capital O with stroke DA NO 00D9 \u00d9 Capital U with grave IT 00DA \u00da Capital U with acute HU ES PT 00DB \u00db Capital U with circumflex 00DC \u00dc Capital U with diaeresis DE DA HU ES PT 00DD \u00dd Capital Y with acute CZ ES 00DE \u00de Capital Thorn 00DF \u00df Small sharp S DE 00E0 \u00e0 Small A with grave PT IT FR 00E1 \u00e1 Small A with acute HU ES PT FR 00E2 \u00e2 Small A with circumflex RO NO PT FR 00E3 \u00e3 Small A with tilde PT 00E4 \u00e4 Small A with diaeresis DE SV FI DA 00E5 \u00e5 Small A with ring above SV FI DA NO 00E6 \u00e6 Small AE DA NO 00E7 \u00e7 Small C with cedilla PT FR 00E8 \u00e8 Small E with grave NO IT FR 00E9 \u00e9 Small E with acute DA NO HU ES PT IT FR 00EA \u00ea Small E with circumflex NO PT FR 00EB \u00eb Small E with diaeresis 00EC \u00ec Small I with grave IT 00ED \u00ed Small I with acute HU ES PT FR 00EE \u00ee Small I with circumflex RO FR 00EF \u00ef Small I with diaeresis FR 00F0 \u00f0 Small Eth 00F1 \u00f1 Small N with tilde ES EN NL 00F2 \u00f2 Small O with grave NO IT 00F3 \u00f3 Small O with acute NO HU ES PT FR 00F4 \u00f4 Small O with circumflex NO PT FR 00F5 \u00f5 Small O with tilde PT 00F6 \u00f6 Small O with diaeresis DE SV FI DA HU 00F7 \u00f7 Division sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00F8 \u00f8 Small O with stroke DA NO 00F9 \u00f9 Small U with grave IT FR 00FA \u00fa Small U with acute HU ES PT FR 00FB \u00fb Small U with circumflex FR 00FC \u00fc Small U with diaeresis DE DA HU ES PT 00FD \u00fd Small Y with acute ES 00FE \u00fe Small Thorn 00FF \u00ff Small Y with diaeresis 0100 \u0100 Capital A with macron 0101 \u0101 Small A with macron 0102 \u0102 Capital A with breve RO 0103 \u0103 Small A with breve RO 0104 \u0104 Capital A with ogonek 0105 \u0105 Small A with ogonek 0106 \u0106 Capital C with acute 0107 \u0107 Small C with acute 0108 \u0108 Capital C with circumflex 0109 \u0109 Small C with circumflex 010A \u010a Capital C with dot above 010B \u010b Small C with dot above 010C \u010c Capital C with caron SL 010D \u010d Small C with caron SL 010E \u010e Capital D with caron 010F \u010f Small D with caron 0110 \u0110 Capital D with stroke 0111 \u0111 Small D with stroke 0112 \u0112 Capital E with macron 0113 \u0113 Small E with macron 0114 \u0114 Capital E with breve CZ 0115 \u0115 Small E with breve CZ 0116 \u0116 Capital E with dot above 0117 \u0117 Small E with dot above 0118 \u0118 Capital E with ogonek 0119 \u0119 Small E with ogonek 011A \u011a Capital E with caron 011B \u011b Small E with caron 011C \u011c Capital G with circumflex 011D \u011d Small G with circumflex 011E \u011e Capital G with breve 011F \u011f Small G with breve 0120 \u0120 Capital G with dot above 0121 \u0121 Small G with dot above 0122 \u0122 Capital G with cedilla 0123 \u0123 Small G with cedilla 0124 \u0124 Capital H with circumflex 0125 \u0125 Small H with circumflex 0126 \u0126 Capital H with stroke 0127 \u0127 Small H with stroke 0128 \u0128 Capital I with tilde 0129 \u0129 Small I with tilde 012A \u012a Capital I with macron 012B \u012b Small I with macron 012C \u012c Capital I with breve 012D \u012d Small I with breve 012E \u012e Capital I with ogonek 012F \u012f Small I with ogonek 0130 \u0130 Capital I with dot above 0131 \u0131 Small dotless I 0132 \u0132 Capital Ligature IJ 0133 \u0133 Small Ligature IJ 0134 \u0134 Capital J with circumflex 0135 \u0135 Small J with circumflex 0136 \u0136 Capital K with cedilla 0137 \u0137 Small K with cedilla 0138 \u0138 Small Kra 0139 \u0139 Capital L with acute 013A \u013a Small L with acute 013B \u013b Capital L with cedilla 013C \u013c Small L with cedilla 013D \u013d Capital L with caron 013E \u013e Small L with caron 013F \u013f Capital L with middle dot 0140 \u0140 Small L with middle dot 0141 \u0141 Capital L with stroke 0142 \u0142 Small L with stroke 0143 \u0143 Capital N with acute 0144 \u0144 Small N with acute 0145 \u0145 Capital N with cedilla 0146 \u0146 Small N with cedilla 0147 \u0147 Capital N with caron CZ 0148 \u0148 Small N with caron CZ 0149 \u0149 Small N preceded by apostrophe 014A \u014a Capital Eng 014B \u014b Small Eng 014C \u014c Capital O with macron 014D \u014d Small O with macron 014E \u014e Capital O with breve 014F \u014f Small O with breve 0150 \u0150 Capital O with double acute HU 0151 \u0151 Small O with double acute HU 0152 \u0152 Capital Ligature OE FR 0153 \u0153 Small Ligature OE FR 0154 \u0154 Capital R with acute 0155 \u0155 Small R with acute 0156 \u0156 Capital R with cedilla 0157 \u0157 Small R with cedilla 0158 \u0158 Capital R with caron 0159 \u0159 Small R with caron 015A \u015a Capital S with acute 015B \u015b Small S with acute 015C \u015c Capital S with circumflex 015D \u015d Small S with circumflex 015E \u015e Capital S with cedilla RO 015F \u015f Small S with cedilla RO 0160 \u0160 Capital S with caron SL FI 0161 \u0161 Small S with caron SL FI 0162 \u0162 Capital T with cedilla RO 0163 \u0163 Small T with cedilla RO 0164 \u0164 Capital T with caron 0165 \u0165 Small T with caron 0166 \u0166 Capital T with stroke 0167 \u0167 Small T with stroke 0168 \u0168 Capital U with tilde 0169 \u0169 Small U with tilde 016A \u016a Capital U with macron 016B \u016b Small U with macron 016C \u016c Capital U with breve 016D \u016d Small U with breve 016E \u016e Capital U with ring above CZ 016F \u016f Small U with ring above CZ 0170 \u0170 Capital U with double acute HU 0171 \u0171 Small U with double acute HU 0172 \u0172 Capital U with ogonek 0173 \u0173 Small U with ogonek 0174 \u0174 Capital W with circumflex 0175 \u0175 Small W with circumflex 0176 \u0176 Capital Y with circumflex 0177 \u0177 Small Y with circumflex 0178 \u0178 Capital Y with diaeresis 0179 \u0179 Capital Z with acute 017A \u017a Small Z with acute 017B \u017b Capital Z with dot above 017C \u017c Small Z with dot above 017D \u017d Capital Z with caron SL FI 017E \u017e Small Z with caron SL FI 017F \u017f Small long S 01C4 \u01c4 Capital DZ with Caron HR 01C5 \u01c5 Capital D with Small Z with Caron HR 01C6 \u01c6 Small DZ with Caron HR 01C7 \u01c7 Capital LJ HR 01C8 \u01c8 Capital L with Small J HR 01C9 \u01c9 Small LJ HR 01CA \u01ca Capital NJ HR 01CB \u01cb Capital N with Small J HR 01CC \u01cc Small NJ HR 01CD \u01cd Capital A with Caron RO 01CE \u01ce Small A with Caron RO 01CF \u01cf Capital I with Caron 01D0 \u01d0 Small I with Caron 01D1 \u01d1 Capital O with Caron 01D2 \u01d2 Small O with Caron 01D3 \u01d3 Capital U with Caron 01D4 \u01d4 Small U with Caron 01D5 \u01d5 Capital U with Diaeresis and Macron 01D6 \u01d6 Small U with Diaeresis and Macron 01D7 \u01d7 Capital U with Diaeresis and Acute 01D8 \u01d8 Small U with Diaeresis and Acute 01D9 \u01d9 Capital U with Diaeresis and Caron 01DA \u01da Small U with Diaeresis and Caron 01DB \u01db Capital U with Diaeresis and Grave 01DC \u01dc Small U with Diaeresis and Grave 01DD \u01dd Small Turned E 01DE \u01de Capital A with Diaeresis and Macron 01DF \u01df Small A with Diaeresis and Macron 01E0 \u01e0 Capital A with Dot Above and Macron 01E1 \u01e1 Small A with Dot Above and Macron 01E2 \u01e2 Capital AE with Macron 01E3 \u01e3 Small AE with Macron 01E4 \u01e4 Capital G with Stroke 01E5 \u01e5 Small G with Stroke 01E6 \u01e6 Capital G with Caron 01E7 \u01e7 Small G with Caron 01E8 \u01e8 Capital K with Caron 01E9 \u01e9 Small K with Caron 01EA \u01ea Capital O with Ogonek 01EB \u01eb Small O with Ogonek 01EC \u01ec Capital O with Ogonek and Macron 01ED \u01ed Small O with Ogonek and Macron 01EE \u01ee Capital Ezh with Caron 01EF \u01ef Small Ezh with Caron 01F0 \u01f0 Small J with Caron 01F1 \u01f1 Capital DZ 01F2 \u01f2 Capital D with Small Z 01F3 \u01f3 Small DZ 01F4 \u01f4 Capital G with Acute 01F5 \u01f5 Small G with Acute 01F6 \u01f6 Capital Hwair 01F7 \u01f7 Capital Wynn 01F8 \u01f8 Capital N with Grave 01F9 \u01f9 Small N with Grave 01FA \u01fa Capital A with Ring Above and Acute 01FB \u01fb Small A with Ring Above and Acute 01FC \u01fc Capital AE with Acute 01FD \u01fd Small AE with Acute 01FE \u01fe Capital O with Stroke and Acute 01FF \u01ff Small O with Stroke and Acute 0200 \u0200 Capital A with Double Grave HR SL 0201 \u0201 Small A with Double Grave HR SL 0202 \u0202 Capital A with Inverted Breve RO HR SL 0203 \u0203 Small A with Inverted Breve RO HR SL 0204 \u0204 Capital E with Double Grave HR SL 0205 \u0205 Small E with Double Grave HR SL 0206 \u0206 Capital E with Inverted Breve HR SL 0207 \u0207 Small E with Inverted Breve HR SL 0208 \u0208 Capital I with Double Grave HR SL 0209 \u0209 Small I with Double Grave HR SL 020A \u020a Capital I with Inverted Breve RO HR SL 020B \u020b Small I with Inverted Breve RO HR SL 020C \u020c Capital O with Double Grave HR SL 020D \u020d Small O with Double Grave HR SL 020E \u020e Capital O with Inverted Breve HR SL 020F \u020f Small O with Inverted Breve HR SL 0210 \u0210 Capital R with Double Grave HR SL 0211 \u0211 Small R with Double Grave HR SL 0212 \u0212 Capital R with Inverted Breve HR SL 0213 \u0213 Small R with Inverted Breve HR SL 0214 \u0214 Capital U with Double Grave HR SL 0215 \u0215 Small U with Double Grave HR SL 0216 \u0216 Capital U with Inverted Breve HR SL 0217 \u0217 Small U with Inverted Breve HR SL 0218 \u0218 Capital S with Comma Below RO 0219 \u0219 Small S with Comma Below RO 021A \u021a Capital T with Comma Below RO 021B \u021b Small T with Comma Below RO 021C \u021c Capital Yogh 021D \u021d Small Yogh 021E \u021e Capital H with Caron 021F \u021f Small H with Caron 0220 \u0220 Capital N with Long Right Leg 0221 \u0221 Small D with Curl 0222 \u0222 Capital OU 0223 \u0223 Small OU 0224 \u0224 Capital Z with Hook 0225 \u0225 Small Z with Hook 0226 \u0226 Capital A with Dot Above 0227 \u0227 Small A with Dot Above 0228 \u0228 Capital E with Cedilla 0229 \u0229 Small E with Cedilla 022A \u022a Capital O with Diaeresis and Macron 022B \u022b Small O with Diaeresis and Macron 022C \u022c Capital O with Tilde and Macron 022D \u022d Small O with Tilde and Macron 022E \u022e Capital O with Dot Above 022F \u022f Small O with Dot Above 0230 \u0230 Capital O with Dot Above and Macron 0231 \u0231 Small O with Dot Above and Macron 0232 \u0232 Capital Y with Macron 0233 \u0233 Small Y with Macron 0234 \u0234 Small L with Curl 0235 \u0235 Small N with Curl 0236 \u0236 Small T with Curl 0237 \u0237 Small Dotless J 0238 \u0238 Small DB Digraph 0239 \u0239 Small QP Digraph 023A \u023a Capital A with Stroke 023B \u023b Capital C with Stroke 023C \u023c Small C with Stroke 023D \u023d Capital L with Bar 023E \u023e Capital T with Diagonal Stroke 023F \u023f Small S with Swash Tail 0240 \u0240 Small Z with Swash Tail 0241 \u0241 Capital Glottal Stop 0242 \u0242 Small Glottal Stop 0243 \u0243 Capital B with Stroke 0244 \u0244 Capital U Bar 0245 \u0245 Capital Turned V 0246 \u0246 Capital E with Stroke 0247 \u0247 Small E with Stroke 0248 \u0248 Capital J with Stroke 0249 \u0249 Small J with Stroke 024A \u024a Capital Q with Hook Tail 024B \u024b Small Q with Hook Tail 024C \u024c Capital R with Stroke 024D \u024d Small R with Stroke 024E \u024e Capital Y with Stroke 024F \u024f Small Y with Stroke 1E9E \u1e9e Capital Letter Sharp S DE","title":"Characters"},{"location":"design/convert/","text":"Convert JSONL ~ Save a copy of the original code to your computer first, just in case. Paste your jsonl or yaml code into the textarea. Click the convert button to replace the old icon codes to the new UTF-16 format. Copy/paste the code back to your configuration. Warning Convert function convert(){ let ta = document.getElementById(\"jsonl\"); let jsonl = ta.value; let data = JSON.parse('{\"E12C\":[\"DB80\",\"DD2C\"],\"E140\":[\"DB80\",\"DD40\"],\"E141\":[\"DB80\",\"DD41\"],\"E142\":[\"DB80\",\"DD42\"],\"E143\":[\"DB80\",\"DD43\"],\"E156\":[\"DB80\",\"DD56\"],\"E045\":[\"DB80\",\"DC45\"],\"E04D\":[\"DB80\",\"DC4D\"],\"E054\":[\"DB80\",\"DC54\"],\"E05D\":[\"DB80\",\"DC5D\"],\"E2DC\":[\"DB80\",\"DEDC\"],\"E374\":[\"DB80\",\"DF74\"],\"E415\":[\"DB81\",\"DC15\"],\"E717\":[\"DB81\",\"DF17\"],\"E60C\":[\"DB81\",\"DE0C\"],\"E599\":[\"DB81\",\"DD99\"],\"E5A8\":[\"DB81\",\"DDA8\"],\"E335\":[\"DB80\",\"DF35\"],\"E6E8\":[\"DB81\",\"DEE8\"],\"E50F\":[\"DB81\",\"DD0F\"],\"E58E\":[\"DB81\",\"DD8E\"],\"E594\":[\"DB81\",\"DD94\"],\"F40B\":[\"DB85\",\"DC0B\"],\"E5A9\":[\"DB81\",\"DDA9\"],\"E11C\":[\"DB80\",\"DD1C\"],\"E425\":[\"DB81\",\"DC25\"],\"E769\":[\"DB81\",\"DF69\"],\"E81B\":[\"DB82\",\"DC1B\"],\"F0AF\":[\"DB84\",\"DCAF\"],\"E81C\":[\"DB82\",\"DC1C\"],\"E322\":[\"DB80\",\"DF22\"],\"E6A5\":[\"DB81\",\"DEA5\"],\"E150\":[\"DB80\",\"DD50\"],\"F2D4\":[\"DB84\",\"DED4\"],\"F2D3\":[\"DB84\",\"DED3\"],\"F11C\":[\"DB84\",\"DD1C\"],\"F11D\":[\"DB84\",\"DD1D\"],\"F11E\":[\"DB84\",\"DD1E\"],\"E10B\":[\"DB80\",\"DD0B\"],\"E33E\":[\"DB80\",\"DF3E\"],\"EFC6\":[\"DB83\",\"DFC6\"],\"F054\":[\"DB84\",\"DC54\"],\"E70D\":[\"DB81\",\"DF0D\"],\"E99D\":[\"DB82\",\"DD9D\"],\"E01B\":[\"DB80\",\"DC1B\"],\"E026\":[\"DB80\",\"DC26\"],\"E09A\":[\"DB80\",\"DC9A\"],\"E30B\":[\"DB80\",\"DF0B\"],\"E32A\":[\"DB80\",\"DF2A\"],\"E438\":[\"DB81\",\"DC38\"],\"EAD7\":[\"DB82\",\"DED7\"],\"E68A\":[\"DB81\",\"DE8A\"],\"E4AD\":[\"DB81\",\"DCAD\"],\"E4AE\":[\"DB81\",\"DCAE\"],\"E502\":[\"DB81\",\"DD02\"],\"E0AC\":[\"DB80\",\"DCAC\"],\"F011\":[\"DB84\",\"DC11\"],\"E70E\":[\"DB81\",\"DF0E\"],\"E565\":[\"DB81\",\"DD65\"],\"EA70\":[\"DB82\",\"DE70\"],\"E75F\":[\"DB81\",\"DF5F\"],\"E4B9\":[\"DB81\",\"DCB9\"],\"E004\":[\"DB80\",\"DC04\"],\"E2E3\":[\"DB80\",\"DEE3\"],\"E64A\":[\"DB81\",\"DE4A\"],\"E9A0\":[\"DB82\",\"DDA0\"],\"E606\":[\"DB81\",\"DE06\"],\"F020\":[\"DB84\",\"DC20\"],\"E8DD\":[\"DB82\",\"DCDD\"],\"E6B5\":[\"DB81\",\"DEB5\"],\"E456\":[\"DB81\",\"DC56\"],\"E457\":[\"DB81\",\"DC57\"],\"E458\":[\"DB81\",\"DC58\"],\"F1F3\":[\"DB84\",\"DDF3\"],\"E49D\":[\"DB81\",\"DC9D\"],\"E49E\":[\"DB81\",\"DC9E\"],\"E4C3\":[\"DB81\",\"DCC3\"],\"EA7A\":[\"DB82\",\"DE7A\"],\"F1E1\":[\"DB84\",\"DDE1\"],\"E57E\":[\"DB81\",\"DD7E\"],\"E91C\":[\"DB82\",\"DD1C\"],\"E0AF\":[\"DB80\",\"DCAF\"],\"E493\":[\"DB81\",\"DC93\"],\"E210\":[\"DB80\",\"DE10\"],\"E238\":[\"DB80\",\"DE38\"],\"E3E4\":[\"DB80\",\"DFE4\"],\"E40A\":[\"DB81\",\"DC0A\"],\"E4DB\":[\"DB81\",\"DCDB\"],\"E4DE\":[\"DB81\",\"DCDE\"],\"E580\":[\"DB81\",\"DD80\"],\"E72A\":[\"DB81\",\"DF2A\"],\"E917\":[\"DB82\",\"DD17\"],\"EAAC\":[\"DB82\",\"DEAC\"],\"E28F\":[\"DB80\",\"DE8F\"],\"EC99\":[\"DB83\",\"DC99\"],\"E95F\":[\"DB82\",\"DD5F\"],\"E5F1\":[\"DB81\",\"DDF1\"],\"E9AB\":[\"DB82\",\"DDAB\"],\"E58C\":[\"DB81\",\"DD8C\"],\"E176\":[\"DB80\",\"DD76\"],\"F2BA\":[\"DB84\",\"DEBA\"],\"E51B\":[\"DB81\",\"DD1B\"],\"F1DB\":[\"DB84\",\"DDDB\"],\"E08E\":[\"DB80\",\"DC8E\"],\"E6A1\":[\"DB81\",\"DEA1\"],\"E96B\":[\"DB82\",\"DD6B\"],\"E5FA\":[\"DB81\",\"DDFA\"],\"E75A\":[\"DB81\",\"DF5A\"],\"E58F\":[\"DB81\",\"DD8F\"],\"E6C0\":[\"DB81\",\"DEC0\"],\"E6C3\":[\"DB81\",\"DEC3\"],\"F2A3\":[\"DB84\",\"DEA3\"],\"F2A1\":[\"DB84\",\"DEA1\"],\"F2A2\":[\"DB84\",\"DEA2\"],\"E0ED\":[\"DB80\",\"DCED\"],\"E7AE\":[\"DB81\",\"DFAE\"],\"E2DA\":[\"DB80\",\"DEDA\"],\"E1D9\":[\"DB80\",\"DDD9\"],\"E1FA\":[\"DB80\",\"DDFA\"],\"EF5F\":[\"DB83\",\"DF5F\"]}'); for (key in data) { let search = '\\\\\\\\u'+key; let searchRegExp = new RegExp(search, 'gi'); jsonl = jsonl.replaceAll(searchRegExp, '\\\\u'+data[key][0]+'\\\\u'+data[key][1]); } ta.value = jsonl; }","title":"Convert JSONL"},{"location":"design/convert/#convert-jsonl","text":"Save a copy of the original code to your computer first, just in case. Paste your jsonl or yaml code into the textarea. Click the convert button to replace the old icon codes to the new UTF-16 format. Copy/paste the code back to your configuration. Warning Convert function convert(){ let ta = document.getElementById(\"jsonl\"); let jsonl = ta.value; let data = JSON.parse('{\"E12C\":[\"DB80\",\"DD2C\"],\"E140\":[\"DB80\",\"DD40\"],\"E141\":[\"DB80\",\"DD41\"],\"E142\":[\"DB80\",\"DD42\"],\"E143\":[\"DB80\",\"DD43\"],\"E156\":[\"DB80\",\"DD56\"],\"E045\":[\"DB80\",\"DC45\"],\"E04D\":[\"DB80\",\"DC4D\"],\"E054\":[\"DB80\",\"DC54\"],\"E05D\":[\"DB80\",\"DC5D\"],\"E2DC\":[\"DB80\",\"DEDC\"],\"E374\":[\"DB80\",\"DF74\"],\"E415\":[\"DB81\",\"DC15\"],\"E717\":[\"DB81\",\"DF17\"],\"E60C\":[\"DB81\",\"DE0C\"],\"E599\":[\"DB81\",\"DD99\"],\"E5A8\":[\"DB81\",\"DDA8\"],\"E335\":[\"DB80\",\"DF35\"],\"E6E8\":[\"DB81\",\"DEE8\"],\"E50F\":[\"DB81\",\"DD0F\"],\"E58E\":[\"DB81\",\"DD8E\"],\"E594\":[\"DB81\",\"DD94\"],\"F40B\":[\"DB85\",\"DC0B\"],\"E5A9\":[\"DB81\",\"DDA9\"],\"E11C\":[\"DB80\",\"DD1C\"],\"E425\":[\"DB81\",\"DC25\"],\"E769\":[\"DB81\",\"DF69\"],\"E81B\":[\"DB82\",\"DC1B\"],\"F0AF\":[\"DB84\",\"DCAF\"],\"E81C\":[\"DB82\",\"DC1C\"],\"E322\":[\"DB80\",\"DF22\"],\"E6A5\":[\"DB81\",\"DEA5\"],\"E150\":[\"DB80\",\"DD50\"],\"F2D4\":[\"DB84\",\"DED4\"],\"F2D3\":[\"DB84\",\"DED3\"],\"F11C\":[\"DB84\",\"DD1C\"],\"F11D\":[\"DB84\",\"DD1D\"],\"F11E\":[\"DB84\",\"DD1E\"],\"E10B\":[\"DB80\",\"DD0B\"],\"E33E\":[\"DB80\",\"DF3E\"],\"EFC6\":[\"DB83\",\"DFC6\"],\"F054\":[\"DB84\",\"DC54\"],\"E70D\":[\"DB81\",\"DF0D\"],\"E99D\":[\"DB82\",\"DD9D\"],\"E01B\":[\"DB80\",\"DC1B\"],\"E026\":[\"DB80\",\"DC26\"],\"E09A\":[\"DB80\",\"DC9A\"],\"E30B\":[\"DB80\",\"DF0B\"],\"E32A\":[\"DB80\",\"DF2A\"],\"E438\":[\"DB81\",\"DC38\"],\"EAD7\":[\"DB82\",\"DED7\"],\"E68A\":[\"DB81\",\"DE8A\"],\"E4AD\":[\"DB81\",\"DCAD\"],\"E4AE\":[\"DB81\",\"DCAE\"],\"E502\":[\"DB81\",\"DD02\"],\"E0AC\":[\"DB80\",\"DCAC\"],\"F011\":[\"DB84\",\"DC11\"],\"E70E\":[\"DB81\",\"DF0E\"],\"E565\":[\"DB81\",\"DD65\"],\"EA70\":[\"DB82\",\"DE70\"],\"E75F\":[\"DB81\",\"DF5F\"],\"E4B9\":[\"DB81\",\"DCB9\"],\"E004\":[\"DB80\",\"DC04\"],\"E2E3\":[\"DB80\",\"DEE3\"],\"E64A\":[\"DB81\",\"DE4A\"],\"E9A0\":[\"DB82\",\"DDA0\"],\"E606\":[\"DB81\",\"DE06\"],\"F020\":[\"DB84\",\"DC20\"],\"E8DD\":[\"DB82\",\"DCDD\"],\"E6B5\":[\"DB81\",\"DEB5\"],\"E456\":[\"DB81\",\"DC56\"],\"E457\":[\"DB81\",\"DC57\"],\"E458\":[\"DB81\",\"DC58\"],\"F1F3\":[\"DB84\",\"DDF3\"],\"E49D\":[\"DB81\",\"DC9D\"],\"E49E\":[\"DB81\",\"DC9E\"],\"E4C3\":[\"DB81\",\"DCC3\"],\"EA7A\":[\"DB82\",\"DE7A\"],\"F1E1\":[\"DB84\",\"DDE1\"],\"E57E\":[\"DB81\",\"DD7E\"],\"E91C\":[\"DB82\",\"DD1C\"],\"E0AF\":[\"DB80\",\"DCAF\"],\"E493\":[\"DB81\",\"DC93\"],\"E210\":[\"DB80\",\"DE10\"],\"E238\":[\"DB80\",\"DE38\"],\"E3E4\":[\"DB80\",\"DFE4\"],\"E40A\":[\"DB81\",\"DC0A\"],\"E4DB\":[\"DB81\",\"DCDB\"],\"E4DE\":[\"DB81\",\"DCDE\"],\"E580\":[\"DB81\",\"DD80\"],\"E72A\":[\"DB81\",\"DF2A\"],\"E917\":[\"DB82\",\"DD17\"],\"EAAC\":[\"DB82\",\"DEAC\"],\"E28F\":[\"DB80\",\"DE8F\"],\"EC99\":[\"DB83\",\"DC99\"],\"E95F\":[\"DB82\",\"DD5F\"],\"E5F1\":[\"DB81\",\"DDF1\"],\"E9AB\":[\"DB82\",\"DDAB\"],\"E58C\":[\"DB81\",\"DD8C\"],\"E176\":[\"DB80\",\"DD76\"],\"F2BA\":[\"DB84\",\"DEBA\"],\"E51B\":[\"DB81\",\"DD1B\"],\"F1DB\":[\"DB84\",\"DDDB\"],\"E08E\":[\"DB80\",\"DC8E\"],\"E6A1\":[\"DB81\",\"DEA1\"],\"E96B\":[\"DB82\",\"DD6B\"],\"E5FA\":[\"DB81\",\"DDFA\"],\"E75A\":[\"DB81\",\"DF5A\"],\"E58F\":[\"DB81\",\"DD8F\"],\"E6C0\":[\"DB81\",\"DEC0\"],\"E6C3\":[\"DB81\",\"DEC3\"],\"F2A3\":[\"DB84\",\"DEA3\"],\"F2A1\":[\"DB84\",\"DEA1\"],\"F2A2\":[\"DB84\",\"DEA2\"],\"E0ED\":[\"DB80\",\"DCED\"],\"E7AE\":[\"DB81\",\"DFAE\"],\"E2DA\":[\"DB80\",\"DEDA\"],\"E1D9\":[\"DB80\",\"DDD9\"],\"E1FA\":[\"DB80\",\"DDFA\"],\"EF5F\":[\"DB83\",\"DF5F\"]}'); for (key in data) { let search = '\\\\\\\\u'+key; let searchRegExp = new RegExp(search, 'gi'); jsonl = jsonl.replaceAll(searchRegExp, '\\\\u'+data[key][0]+'\\\\u'+data[key][1]); } ta.value = jsonl; }","title":"Convert JSONL"},{"location":"design/data-types/","text":"Data Types ~ There are 5 major data types that openHASP uses when communicating over MQTT: Boolean ~ Properties with a boolean data type accept these values and are case insensitive: true / ON / 1 / yes false / OFF / 0 / no The return value will be either 1 / 0 or on / off depending on the context. Integer ~ Numeric properties have integer values with a variable minimum and maximum input value. Certain object properties also support negative values. Details int8 (signed) supports values ranging from -128 to 127. uint8 (unsigned) supports values ranging from 0 to 255. int16 (signed) supports values ranging from -32768 to 32767. uint16 (unsigned) supports values ranging from 0 to 65535. String ~ Properties that accept textual input. When sending raw text in the MQTT payload or as command parameter no quotes are needed. Only when a text value is included in a jsonl or json command, it needs to be quoted accoring to JSON rules. JSON Object ~ Some properties can be set or retrieved in JSON format too. The JSON object has several keys that have a boolean, integer or string data type. Example: {\"cover\":\"cover.my_room\",\"position\":\"50\"} Colors ~ Color values can be: Short names (from table below) RGB hex code ( #rrggbb ) Short hex code ( #rgb ) RGB565 number format ( 0..65535 ) Hex Code Short Name Hex Code Short Name #00FFFF Cyan or Aqua #FFC0CB Pink #00FF00 Lime #DDA0DD Plum #008000 Green #DA70D6 Orchid #008080 Teal #EE82EE Violet #0000FF Blue #FF00FF Magenta or Fuchsia #000080 Navy #800080 Purple #808000 Olive #4B0082 Indigo #CD853F Peru #B00000 Blush #A0522D Sienna #FF0000 Red #A52A2A Brown #FF6347 Tomato #800000 Maroon #FA8072 Salmon #FFFFFF White #FF7F50 Coral #FFFAFA Snow #FFA500 Orange #FFFFF0 Ivory #FFD700 Gold #FAF0E6 Linen #FFFF00 Yellow #F5F5DC Beige #F0E68C Khaki #F0FFFF Azure #FFE4C4 Bisque #C0C0C0 Silver #F5DEB3 Wheat #808080 Gray or Grey #D2B48C Tan #000000 Black Setting Color ~ Examples: 1 2 3 4 p 0 b 2. value_color= 13891 p 1 b 5. te x t _color=silver p 2 b 3. bg_color=#C 042 A 3 p 2 b 4. border_color=# 9 f 9 Return values ~ When retrieving the color of an object, both the HTML representation as the RGB values are returned separately. The format will be a json object with components: color : 6 digit hexadecimal code preceeded by a hash # sign. r : byte value for red ( 0..255 ) g : byte value for green ( 0..255 ) b : byte value for blue ( 0..255 ) For example, the color returned by a color picker change event is: 1 { \"color\" : \"#00fff6\" , \"r\" : 0 , \"g\" : 255 , \"b\" : 246 } Variables ~ Some properties can be set with variable data at plate runtime. Use the strings below to retrieve data: %ip% - IP address of the plate %hostname% - hostname (nodename) %ssid% - SSID of the network connected to %model% - plate model (set in the firmware) %version% - firmware version number","title":"Data Types"},{"location":"design/data-types/#data-types","text":"There are 5 major data types that openHASP uses when communicating over MQTT:","title":"Data Types"},{"location":"design/data-types/#boolean","text":"Properties with a boolean data type accept these values and are case insensitive: true / ON / 1 / yes false / OFF / 0 / no The return value will be either 1 / 0 or on / off depending on the context.","title":"Boolean"},{"location":"design/data-types/#integer","text":"Numeric properties have integer values with a variable minimum and maximum input value. Certain object properties also support negative values. Details int8 (signed) supports values ranging from -128 to 127. uint8 (unsigned) supports values ranging from 0 to 255. int16 (signed) supports values ranging from -32768 to 32767. uint16 (unsigned) supports values ranging from 0 to 65535.","title":"Integer"},{"location":"design/data-types/#string","text":"Properties that accept textual input. When sending raw text in the MQTT payload or as command parameter no quotes are needed. Only when a text value is included in a jsonl or json command, it needs to be quoted accoring to JSON rules.","title":"String"},{"location":"design/data-types/#json-object","text":"Some properties can be set or retrieved in JSON format too. The JSON object has several keys that have a boolean, integer or string data type. Example: {\"cover\":\"cover.my_room\",\"position\":\"50\"}","title":"JSON Object"},{"location":"design/data-types/#colors","text":"Color values can be: Short names (from table below) RGB hex code ( #rrggbb ) Short hex code ( #rgb ) RGB565 number format ( 0..65535 ) Hex Code Short Name Hex Code Short Name #00FFFF Cyan or Aqua #FFC0CB Pink #00FF00 Lime #DDA0DD Plum #008000 Green #DA70D6 Orchid #008080 Teal #EE82EE Violet #0000FF Blue #FF00FF Magenta or Fuchsia #000080 Navy #800080 Purple #808000 Olive #4B0082 Indigo #CD853F Peru #B00000 Blush #A0522D Sienna #FF0000 Red #A52A2A Brown #FF6347 Tomato #800000 Maroon #FA8072 Salmon #FFFFFF White #FF7F50 Coral #FFFAFA Snow #FFA500 Orange #FFFFF0 Ivory #FFD700 Gold #FAF0E6 Linen #FFFF00 Yellow #F5F5DC Beige #F0E68C Khaki #F0FFFF Azure #FFE4C4 Bisque #C0C0C0 Silver #F5DEB3 Wheat #808080 Gray or Grey #D2B48C Tan #000000 Black","title":"Colors"},{"location":"design/data-types/#setting-color","text":"Examples: 1 2 3 4 p 0 b 2. value_color= 13891 p 1 b 5. te x t _color=silver p 2 b 3. bg_color=#C 042 A 3 p 2 b 4. border_color=# 9 f 9","title":"Setting Color"},{"location":"design/data-types/#return-values","text":"When retrieving the color of an object, both the HTML representation as the RGB values are returned separately. The format will be a json object with components: color : 6 digit hexadecimal code preceeded by a hash # sign. r : byte value for red ( 0..255 ) g : byte value for green ( 0..255 ) b : byte value for blue ( 0..255 ) For example, the color returned by a color picker change event is: 1 { \"color\" : \"#00fff6\" , \"r\" : 0 , \"g\" : 255 , \"b\" : 246 }","title":"Return values"},{"location":"design/data-types/#variables","text":"Some properties can be set with variable data at plate runtime. Use the strings below to retrieve data: %ip% - IP address of the plate %hostname% - hostname (nodename) %ssid% - SSID of the network connected to %model% - plate model (set in the firmware) %version% - firmware version number","title":"Variables"},{"location":"design/file-editor/","text":"File Editor ~ There is a file browser included in the web UI of the plate. You can use it to upload, edit, download and delete files on the flash partition of the ESP32. Click on the File Editor button on the Main Webpage: Upload Files ~ Create Files ~ Type a new filename into the path field and click the Create button. The file will appear in the filelist. For example, type /pages.jsonl and click Create button. Edit Files ~ To change the Font size or settings of the Editor, click inside the text field and type F1 . Save Files ~ To save changes in the File Editor to flash type Ctrl + S on a PC or Cmd + S on Mac. Delete Files ~ Right-click on any file in the list and select Delete from the pop-up menu to remove that file from the ESP32 filesystem.","title":"File Editor"},{"location":"design/file-editor/#file-editor","text":"There is a file browser included in the web UI of the plate. You can use it to upload, edit, download and delete files on the flash partition of the ESP32. Click on the File Editor button on the Main Webpage:","title":"File Editor"},{"location":"design/file-editor/#upload-files","text":"","title":"Upload Files"},{"location":"design/file-editor/#create-files","text":"Type a new filename into the path field and click the Create button. The file will appear in the filelist. For example, type /pages.jsonl and click Create button.","title":"Create Files"},{"location":"design/file-editor/#edit-files","text":"To change the Font size or settings of the Editor, click inside the text field and type F1 .","title":"Edit Files"},{"location":"design/file-editor/#save-files","text":"To save changes in the File Editor to flash type Ctrl + S on a PC or Cmd + S on Mac.","title":"Save Files"},{"location":"design/file-editor/#delete-files","text":"Right-click on any file in the list and select Delete from the pop-up menu to remove that file from the ESP32 filesystem.","title":"Delete Files"},{"location":"design/fonts/","text":".md-typeset table:not([class]) td { padding: 0.5em 0.25m; line-height: 1.25; vertical-align: middle; } .md-typeset table:not([class]) th { min-width: 5%; padding: 0.5em 0.25m; } th:nth-child(3n+1) { width: 8%; text-align: center;} th:nth-child(3n+2) { width: 8%; text-align: center;} th:nth-child(3n+3) { width: 34%; text-align: left; } td:nth-child(3n+2) { white-space: nowrap; } Fonts ~ Built-in ~ The ESP32 firmware includes these built-in fonts: Unscii with font size 8pt Roboto Condensed only in these fixed font sizes 12, 16, 24 and 32pt Roboto Condensed TrueType font , i.e. any size can be set as of 0.7.0 The default font in pre-compiled binaries is Roboto-Condensed-Regular which includes these character sets: Ascii , Cyrillic , Latin-1 , Latin-2 , Greek and Viernamese . It also includes 146 MaterialDesign icons listed below. The built-in fonts can be set by using the pointsize as parameter. For example: 1 2 3 p 4 b 1. te x t _ f o nt = 24 p 4 b 2. value_ f o nt = 12 p 4 b 3. te x t _ f o nt = 64 < -- Uses t he TrueType f o nt Note On Devices that do not have PSRAM, you may notice that changing pages/drawing new pages may take a bit longer on version 0.7.0 . Icons ~ The icons in the list below are included with the built-in font sizes. Included are a range of arrows, navigation, climate, controls, devices, energy, lights, places, presence, security, sound, time and wireless icons. Icon Code Name Icon Code Name E045 arrow-down F2A3 battery-high E6C0 arrow-down-box F2A1 battery-low E04D arrow-left F2A2 battery-medium E054 arrow-right E08E battery-outline E05D arrow-up E5F1 ev-station E6C3 arrow-up-box E32A leaf E140 chevron-down F40B lightning-bolt E141 chevron-left E425 power E142 chevron-right E6A5 power-plug E143 chevron-up E769 ceiling-light E60C subdirectory-arrow-left F020 coach-lamp E01B air-conditioner E95F desk-lamp E957 cloud-search-outline E8DD floor-lamp E238 fire E6B5 lamp E438 radiator E335 lightbulb EAD7 radiator-disabled E6E8 lightbulb-on E717 snowflake F054 outdoor-lamp E50F thermometer F2BA string-lights E58C water F1E1 vanity-light E58E water-percent E91C wall-sconce E590 weather-cloudy E12C check E591 weather-fog E156 close E592 weather-hail E493 cog E593 weather-lightning E1D9 dots-vertical E67E weather-lightning-rainy E2DC home E594 weather-night E6A1 home-outline E595 weather-partly-cloudy E374 minus E596 weather-pouring E415 plus E597 weather-rainy E2E3 bed E598 weather-snowy E10B car E67F weather-snowy-rainy E176 coffee E599 weather-sunny E606 pool E59D weather-windy E9A0 shower E59E weather-windy-variant EA70 silverware-fork-knife E5A8 white-balance-sunny E4B9 sofa E0ED calendar E9AB toilet E150 clock-outline E004 account E2DA history E64A human-greeting E51B timer-outline E70E run E0AF bluetooth E026 alert E5A9 wifi E7AE cctv E0AC blinds E81B door-closed F011 blinds-open F0AF door-closed-lock F2D4 garage-open-variant E81C door-open F2D3 garage-variant E30B key-variant F11C window-shutter E33E lock F11D window-shutter-alert EFC6 lock-open-variant F11E window-shutter-open E565 shield-check E09A bell E68A shield-home E11C cellphone E99D shield-lock EAAC dishwasher F1DB window-closed-variant E1FA engine EF5F monitor-speaker E210 fan E75A music E96B fountain E3E4 pause E28F fridge-outline E40A play E5FA kettle E456 repeat E322 laptop E457 repeat-off EC99 microwave E458 repeat-once F39D recycle-variant E49D shuffle F1F3 robot-mower-outline E49E shuffle-disabled E70D robot-vacuum E4AD skip-next E4DE stove E4AE skip-previous E502 television E4C3 speaker EA7A trash-can-outline E4DB stop E917 tumble-dryer E57E volume-high E72A washing-machine E580 volume-medium E58F water-pump E75F volume-mute Custom Fonts ~ TrueType ~ Warning You should only load TTF fonts on a device that has PSRAM You can use any TrueType font containing characters or icons. Upload any .ttf (in lowercase) TrueType font file to the flash partition of your plate. If you want to use other styles than Regular like Italic or Bold, make sure you use a font which provides separate, optimized versions for these. You can upload and use multiple font files, but within a property you can only select one font. In the jsonl code use the filename of the font without the extension and the desired font size added to it. So for example to have a text rendered in Arial 20px, you upload arial.ttf to the plate and use \"text_font\":\"arial20\" or command p1b2.text_font=arial20 . Note If you get an error when you upload the TTF file to the plate, make sure to use shorter filenames. Tip You can use different fonts for different properties of the same objects, like \"text_font\":\"mdi32\",\"value_font\":\"robotocondensed19\" . To use MDI icons, get the latest webfont build from their site . From the unzipped archive you need the .ttf Warning Use as few as possible separate TTF fonts in parrallel, because each of them is loaded in memory, which will exhaust faster. With the open source FontForge tool you can combine glyphs and icons from different fonts into one single TTF file and create your custom collection based on your needs. Binary ~ With the online Font Converter tool you can create binary font files from any TTF, OTF or WOFF font. You can select custom ranges of Unicode characters and specify the bpp (bits-per-pixel). The font converter is designed to be compatible with LVGL. An offline version of the converter is also available here . Online Font Converter ~ How to use the font converter? Give a name to the binary font. E.g. \"arial_20\" Specify the height in pixels Set the bpp (bits-per-pixel). Higher values result in a smoother (anti-aliased) font but will require more flash and memory. Choose a TTF, OTF or WOFF source font file Set a range of Unicode characters to include in your font or list the characters in the Symbols field Optionally choose another font too and specify the ranges and/or symbols for it as well. The characters will be merged into the final binary font. Click the Convert button to download the resulting .bin file. Name Size Bpp 1 bit-per-pixel 2 bit-per-pixel 3 bit-per-pixel (Needs compression enabled) 4 bit-per-pixel 8 bit-per-pixel Enable font compression (reduces size) No subpixel hinting Horizontal subpixel hinting (may improve font quality, requires 6.1+) Vertical subpixel hinting Try to use glyph color info from font to create grayscale icons. Since gray tones are emulated via transparency, result will be good on contrast background only. Source font Ranges & Codepoints Symbols & Characters You can use both \"Ranges\" and \"Symbols\" or only one of them Include another font Usage ~ Upload the resulting arial_20.bin binary font file to the flash partition of your plate. In the jsonl code use \"text_font\":\"arial_20\" without the extension or use command p1b2.text_font=arial_20 Warning The entire binary font is cached into memory when it is first used. PSram is highly recommended to use binary fonts. Note If both a arial_20.bin and arial.ttf file are present, the binary file is prefered over the TrueType file. Encoding ~ The encoding of the icons depends on how they are sent to the plate: 1. As JSON payload ~ To use an icon in a json or jsonl payload you need to prefix the UTF-8 character code with \\u . ArduinoJSON will correctly decode the text into it's UTF-8 representation while parsing the JSON object: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } json example: 1 [ \"p2b1.text=\\uE64A Hello world!\" ] If the icon codepoint is larger than 0xFFFF you need to convert the codepoint to its surrogate pair first! Then include both UTF-16 surrogate characters in the payload like this: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uDB81\\uDC25 Hello world!\" } json example: 1 [ \"p2b1.text=\\uDB81\\uDC25 Hello world!\" ] 2. As raw payload ~ Raw payloads are directly passed to the LVGL text rendering engine without any conversion on the MCU. You need to make sure the string is properly encoded into UTF-8 by the application sending the payload ! How this is accomplished depends on the Home Automation tool: Home Assistant ~ Code points up to 0xFFFF should be encoded as \"\\uE6E8\" in the template. Note: Use lowercase \\u and exactly 4 hexadecimal digits. Code points above 0xFFFF must be encoded as \"\\U0001F5E9\" in the template. Note: Use capital \\U and exactly 8 hexadecimal digits. At the end of the template you must indicate that Home Assistant needs encoded the string before sending it by appending |e (pipe symbol + e ) at the end. 1 2 3 - obj : \"p1b2\" # light-switch toggle button properties : \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.x\",\"on\") else \"\\U0001F5E9\" |e }}' Tip For MDI icons, use this modified cheatsheet to get the raw and the surrogate paired codepoints ready to use. Note that the cheatsheet may not contain the very latest icons. Character Sets ~ The characters are encoded in UTF-8. All character sets include the Ascii 0x20-0x7E characters, the non-braking-space ( NBSP ) and 12 universal symbols. Each set contains roughly the same extended characters from its equivalent iso-8859 standard . All character sets also contain about 130 standard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts. For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands. Ascii ~ Includes all ASCII 0x20-0x7E characters extended with a non-breaking space and 10 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022 \u2030 \u2031 Latin 1 ~ Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Albanian (sq), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e Latin 2 ~ Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian (sb) \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b Cyrillic ~ Covers the Slavic languages that use a Cyrillic alphabet, including Belarusian, Bulgarian, Macedonian, Russian, Serbian, and Ukrainian \u0400 \u0401 \u0402 \u0403 \u0404 \u0405 \u0406 \u0407 \u0408 \u0409 \u040a \u040b \u040c \u040d \u040e \u040f \u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416 \u0417 \u0418 \u0419 \u041a \u041b \u041c \u041d \u041e \u041f \u0420 \u0421 \u0422 \u0423 \u0424 \u0425 \u0426 \u0427 \u0428 \u0429 \u042a \u042b \u042c \u042d \u042e \u042f \u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436 \u0437 \u0438 \u0439 \u043a \u043b \u043c \u043d \u043e \u043f \u0440 \u0441 \u0442 \u0443 \u0444 \u0445 \u0446 \u0447 \u0448 \u0449 \u044a \u044b \u044c \u044d \u044e \u044f \u0450 \u0451 \u0452 \u0453 \u0454 \u0455 \u0456 \u0457 \u0458 \u0459 \u045a \u045b \u045c \u045d \u045e \u045f Greek ~ Covers the Greek (el) language: \u0386 \u0388 \u0389 \u038a \u038c \u038e \u038f \u0390 \u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397 \u0398 \u0399 \u039a \u039b \u039c \u039d \u039e \u039f \u03a0 \u03a1 \u03a3 \u03a4 \u03a5 \u03a6 \u03a7 \u03a8 \u03a9 \u03ac \u03ad \u03ae \u03af \u03b0 \u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7 \u03b8 \u03b9 \u03ba \u03bb \u03bc \u03bd \u03be \u03bf \u03c0 \u03c1 \u03c2 \u03c3 \u03c4 \u03c5 \u03c6 \u03c7 \u03c8 \u03c9 \u03ca \u03cb \u03cc \u03cd \u03ce Vietnamese ~ Covers the Vietnamese (vi) language: \u00c1 \u00c0 \u00c2 \u0102 \u00c3 \u1ea4 \u1ea6 \u1eae \u1eb0 \u1eaa \u1eb4 \u1ea2 \u1ea8 \u1eb2 \u1ea0 \u1eac \u1eb6 \u0110 \u00c9 \u00c8 \u00ca \u1ebc \u1ebe \u1ec0 \u1ec4 \u1eba \u1ec2 \u1eb8 \u1ec6 \u00cd \u00cc \u0128 \u1ec8 \u1eca \u00d3 \u00d2 \u00d4 \u00d5 \u1ed0 \u1ed2 \u1ed6 \u1ece \u01a0 \u1ed4 \u1ecc \u1eda \u1edc \u1ee0 \u1ed8 \u1ede \u1ee2 \u00da \u00d9 \u0168 \u1ee6 \u01af \u1ee4 \u1ee8 \u1eea \u1eee \u1eec \u1ef0 \u00dd \u1ef2 \u1ef8 \u1ef6 \u1ef4 \u00e1 \u00e0 \u00e2 \u0103 \u00e3 \u1ea5 \u1ea7 \u1eaf \u1eb1 \u1eab \u1eb5 \u1ea3 \u1ea9 \u1eb3 \u1ea1 \u1ead \u1eb7 \u0111 \u00e9 \u00e8 \u00ea \u1ebd \u1ebf \u1ec1 \u1ec5 \u1ebb \u1ec3 \u1eb9 \u1ec7 \u00ed \u00ec \u0129 \u1ec9 \u1ecb \u00f3 \u00f2 \u00f4 \u00f5 \u1ed1 \u1ed3 \u1ed7 \u1ecf \u01a1 \u1ed5 \u1ecd \u1edb \u1edd \u1ee1 \u1ed9 \u1edf \u1ee3 \u00fa \u00f9 \u0169 \u1ee7 \u01b0 \u1ee5 \u1ee9 \u1eeb \u1eef \u1eed \u1ef1 \u00fd \u1ef3 \u1ef9 \u1ef7 \u1ef5 \u20ab","title":"Fonts"},{"location":"design/fonts/#fonts","text":"","title":"Fonts"},{"location":"design/fonts/#built-in","text":"The ESP32 firmware includes these built-in fonts: Unscii with font size 8pt Roboto Condensed only in these fixed font sizes 12, 16, 24 and 32pt Roboto Condensed TrueType font , i.e. any size can be set as of 0.7.0 The default font in pre-compiled binaries is Roboto-Condensed-Regular which includes these character sets: Ascii , Cyrillic , Latin-1 , Latin-2 , Greek and Viernamese . It also includes 146 MaterialDesign icons listed below. The built-in fonts can be set by using the pointsize as parameter. For example: 1 2 3 p 4 b 1. te x t _ f o nt = 24 p 4 b 2. value_ f o nt = 12 p 4 b 3. te x t _ f o nt = 64 < -- Uses t he TrueType f o nt Note On Devices that do not have PSRAM, you may notice that changing pages/drawing new pages may take a bit longer on version 0.7.0 .","title":"Built-in"},{"location":"design/fonts/#icons","text":"The icons in the list below are included with the built-in font sizes. Included are a range of arrows, navigation, climate, controls, devices, energy, lights, places, presence, security, sound, time and wireless icons. Icon Code Name Icon Code Name E045 arrow-down F2A3 battery-high E6C0 arrow-down-box F2A1 battery-low E04D arrow-left F2A2 battery-medium E054 arrow-right E08E battery-outline E05D arrow-up E5F1 ev-station E6C3 arrow-up-box E32A leaf E140 chevron-down F40B lightning-bolt E141 chevron-left E425 power E142 chevron-right E6A5 power-plug E143 chevron-up E769 ceiling-light E60C subdirectory-arrow-left F020 coach-lamp E01B air-conditioner E95F desk-lamp E957 cloud-search-outline E8DD floor-lamp E238 fire E6B5 lamp E438 radiator E335 lightbulb EAD7 radiator-disabled E6E8 lightbulb-on E717 snowflake F054 outdoor-lamp E50F thermometer F2BA string-lights E58C water F1E1 vanity-light E58E water-percent E91C wall-sconce E590 weather-cloudy E12C check E591 weather-fog E156 close E592 weather-hail E493 cog E593 weather-lightning E1D9 dots-vertical E67E weather-lightning-rainy E2DC home E594 weather-night E6A1 home-outline E595 weather-partly-cloudy E374 minus E596 weather-pouring E415 plus E597 weather-rainy E2E3 bed E598 weather-snowy E10B car E67F weather-snowy-rainy E176 coffee E599 weather-sunny E606 pool E59D weather-windy E9A0 shower E59E weather-windy-variant EA70 silverware-fork-knife E5A8 white-balance-sunny E4B9 sofa E0ED calendar E9AB toilet E150 clock-outline E004 account E2DA history E64A human-greeting E51B timer-outline E70E run E0AF bluetooth E026 alert E5A9 wifi E7AE cctv E0AC blinds E81B door-closed F011 blinds-open F0AF door-closed-lock F2D4 garage-open-variant E81C door-open F2D3 garage-variant E30B key-variant F11C window-shutter E33E lock F11D window-shutter-alert EFC6 lock-open-variant F11E window-shutter-open E565 shield-check E09A bell E68A shield-home E11C cellphone E99D shield-lock EAAC dishwasher F1DB window-closed-variant E1FA engine EF5F monitor-speaker E210 fan E75A music E96B fountain E3E4 pause E28F fridge-outline E40A play E5FA kettle E456 repeat E322 laptop E457 repeat-off EC99 microwave E458 repeat-once F39D recycle-variant E49D shuffle F1F3 robot-mower-outline E49E shuffle-disabled E70D robot-vacuum E4AD skip-next E4DE stove E4AE skip-previous E502 television E4C3 speaker EA7A trash-can-outline E4DB stop E917 tumble-dryer E57E volume-high E72A washing-machine E580 volume-medium E58F water-pump E75F volume-mute","title":"Icons"},{"location":"design/fonts/#custom-fonts","text":"","title":"Custom Fonts"},{"location":"design/fonts/#truetype","text":"Warning You should only load TTF fonts on a device that has PSRAM You can use any TrueType font containing characters or icons. Upload any .ttf (in lowercase) TrueType font file to the flash partition of your plate. If you want to use other styles than Regular like Italic or Bold, make sure you use a font which provides separate, optimized versions for these. You can upload and use multiple font files, but within a property you can only select one font. In the jsonl code use the filename of the font without the extension and the desired font size added to it. So for example to have a text rendered in Arial 20px, you upload arial.ttf to the plate and use \"text_font\":\"arial20\" or command p1b2.text_font=arial20 . Note If you get an error when you upload the TTF file to the plate, make sure to use shorter filenames. Tip You can use different fonts for different properties of the same objects, like \"text_font\":\"mdi32\",\"value_font\":\"robotocondensed19\" . To use MDI icons, get the latest webfont build from their site . From the unzipped archive you need the .ttf Warning Use as few as possible separate TTF fonts in parrallel, because each of them is loaded in memory, which will exhaust faster. With the open source FontForge tool you can combine glyphs and icons from different fonts into one single TTF file and create your custom collection based on your needs.","title":"TrueType "},{"location":"design/fonts/#binary","text":"With the online Font Converter tool you can create binary font files from any TTF, OTF or WOFF font. You can select custom ranges of Unicode characters and specify the bpp (bits-per-pixel). The font converter is designed to be compatible with LVGL. An offline version of the converter is also available here .","title":"Binary"},{"location":"design/fonts/#encoding","text":"The encoding of the icons depends on how they are sent to the plate:","title":"Encoding"},{"location":"design/fonts/#1-as-json-payload","text":"To use an icon in a json or jsonl payload you need to prefix the UTF-8 character code with \\u . ArduinoJSON will correctly decode the text into it's UTF-8 representation while parsing the JSON object: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } json example: 1 [ \"p2b1.text=\\uE64A Hello world!\" ] If the icon codepoint is larger than 0xFFFF you need to convert the codepoint to its surrogate pair first! Then include both UTF-16 surrogate characters in the payload like this: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uDB81\\uDC25 Hello world!\" } json example: 1 [ \"p2b1.text=\\uDB81\\uDC25 Hello world!\" ]","title":"1. As JSON payload"},{"location":"design/fonts/#2-as-raw-payload","text":"Raw payloads are directly passed to the LVGL text rendering engine without any conversion on the MCU. You need to make sure the string is properly encoded into UTF-8 by the application sending the payload ! How this is accomplished depends on the Home Automation tool:","title":"2. As raw payload"},{"location":"design/fonts/#character-sets","text":"The characters are encoded in UTF-8. All character sets include the Ascii 0x20-0x7E characters, the non-braking-space ( NBSP ) and 12 universal symbols. Each set contains roughly the same extended characters from its equivalent iso-8859 standard . All character sets also contain about 130 standard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts. For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands.","title":"Character Sets"},{"location":"design/fonts/#ascii","text":"Includes all ASCII 0x20-0x7E characters extended with a non-breaking space and 10 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022 \u2030 \u2031","title":"Ascii"},{"location":"design/fonts/#latin-1","text":"Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Albanian (sq), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e","title":"Latin 1"},{"location":"design/fonts/#latin-2","text":"Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian (sb) \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b","title":"Latin 2"},{"location":"design/fonts/#cyrillic","text":"Covers the Slavic languages that use a Cyrillic alphabet, including Belarusian, Bulgarian, Macedonian, Russian, Serbian, and Ukrainian \u0400 \u0401 \u0402 \u0403 \u0404 \u0405 \u0406 \u0407 \u0408 \u0409 \u040a \u040b \u040c \u040d \u040e \u040f \u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416 \u0417 \u0418 \u0419 \u041a \u041b \u041c \u041d \u041e \u041f \u0420 \u0421 \u0422 \u0423 \u0424 \u0425 \u0426 \u0427 \u0428 \u0429 \u042a \u042b \u042c \u042d \u042e \u042f \u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436 \u0437 \u0438 \u0439 \u043a \u043b \u043c \u043d \u043e \u043f \u0440 \u0441 \u0442 \u0443 \u0444 \u0445 \u0446 \u0447 \u0448 \u0449 \u044a \u044b \u044c \u044d \u044e \u044f \u0450 \u0451 \u0452 \u0453 \u0454 \u0455 \u0456 \u0457 \u0458 \u0459 \u045a \u045b \u045c \u045d \u045e \u045f","title":"Cyrillic"},{"location":"design/fonts/#greek","text":"Covers the Greek (el) language: \u0386 \u0388 \u0389 \u038a \u038c \u038e \u038f \u0390 \u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397 \u0398 \u0399 \u039a \u039b \u039c \u039d \u039e \u039f \u03a0 \u03a1 \u03a3 \u03a4 \u03a5 \u03a6 \u03a7 \u03a8 \u03a9 \u03ac \u03ad \u03ae \u03af \u03b0 \u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7 \u03b8 \u03b9 \u03ba \u03bb \u03bc \u03bd \u03be \u03bf \u03c0 \u03c1 \u03c2 \u03c3 \u03c4 \u03c5 \u03c6 \u03c7 \u03c8 \u03c9 \u03ca \u03cb \u03cc \u03cd \u03ce","title":"Greek"},{"location":"design/fonts/#vietnamese","text":"Covers the Vietnamese (vi) language: \u00c1 \u00c0 \u00c2 \u0102 \u00c3 \u1ea4 \u1ea6 \u1eae \u1eb0 \u1eaa \u1eb4 \u1ea2 \u1ea8 \u1eb2 \u1ea0 \u1eac \u1eb6 \u0110 \u00c9 \u00c8 \u00ca \u1ebc \u1ebe \u1ec0 \u1ec4 \u1eba \u1ec2 \u1eb8 \u1ec6 \u00cd \u00cc \u0128 \u1ec8 \u1eca \u00d3 \u00d2 \u00d4 \u00d5 \u1ed0 \u1ed2 \u1ed6 \u1ece \u01a0 \u1ed4 \u1ecc \u1eda \u1edc \u1ee0 \u1ed8 \u1ede \u1ee2 \u00da \u00d9 \u0168 \u1ee6 \u01af \u1ee4 \u1ee8 \u1eea \u1eee \u1eec \u1ef0 \u00dd \u1ef2 \u1ef8 \u1ef6 \u1ef4 \u00e1 \u00e0 \u00e2 \u0103 \u00e3 \u1ea5 \u1ea7 \u1eaf \u1eb1 \u1eab \u1eb5 \u1ea3 \u1ea9 \u1eb3 \u1ea1 \u1ead \u1eb7 \u0111 \u00e9 \u00e8 \u00ea \u1ebd \u1ebf \u1ec1 \u1ec5 \u1ebb \u1ec3 \u1eb9 \u1ec7 \u00ed \u00ec \u0129 \u1ec9 \u1ecb \u00f3 \u00f2 \u00f4 \u00f5 \u1ed1 \u1ed3 \u1ed7 \u1ecf \u01a1 \u1ed5 \u1ecd \u1edb \u1edd \u1ee1 \u1ed9 \u1edf \u1ee3 \u00fa \u00f9 \u0169 \u1ee7 \u01b0 \u1ee5 \u1ee9 \u1eeb \u1eef \u1eed \u1ef1 \u00fd \u1ef3 \u1ef9 \u1ef7 \u1ef5 \u20ab","title":"Vietnamese"},{"location":"design/objects/","text":".md-typeset__table { min-width: 100%; } table th:first-child{ border-radius:5px 0 0 0; } table th:last-child{ border-radius:0 5px 0 0; } tbody tr:nth-child(even) { background: #88888811; } .md-typeset table:not([class]) { display: table; } .md-typeset table:not([class]) td { padding: 0.5em 1.25em; line-height: 1.25; } Objects There are two ways to create an object on the screen: Uploading a pages.jsonl file onto the internal flash Use the jsonl command (via MQTT, serial or telnet console) Cheatsheet ~ obj Type Description btn Binary Button switch Toggle Switch checkbox Toggle Checkbox label Visual Label led Visual LED spinner Visual Spinner obj Visual Base Object line Visual Line img Visual Image dropdown Selector Dropdown List roller Selector Roller btnmatrix Selector Button Matrix msgbox Selector Messagebox tabview Selector Tabview tab Selector Tab cpicker Selector Color picker bar Range Progress Bar slider Range Slider arc Range Arc linemeter Range Line Meter gauge Range Gauge Common Parameters ~ Common Properties ~ These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Required Default Description id 1..254 yes n/a ID of the object on this page. 0 for the page itself. obj string yes n/a Name of the object type (see below) page 0..12 no n/a ID of the page the object appears on (see below) groupid 0..15 no 0 (none) ID of the GPIO group the object belongs to x int16 no 0 Horizontal position on the page y int16 no 0 Vertical position on the page w int16 no 0 Width of the object h int16 no 0 Height of the object hidden bool no false Object is hidden opacity 0..255 no 255 How much the the object is opaque action string no 0 Command handled locally (see below) swipe bool no false Page navigation using swipe gestures (see below) click bool no true Object is touch/clickable (also see enabled ) ext_click_h 0..255 no 0 Extended horizontal clickable are on the left and right ext_click_v 0..255 no 0 Extended vertical clickable are on the top and bottom parentid 0..255 no 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Pages ~ If the page parameter is not present, the object is placed on the same page as the previous object . If page is not specified for the first object either, the current page being displayed is used. \"page\":0 indicates that the object is visible on all pages. It can be used for example to specify a static menu bar. You can still hide the object on select pages if needed. Objects on page 0 appear on top of any objects on the underlying page. Actions ~ Action commands are supported only by binary or visual type of objects and they are performed locally on the plate. The following actions can be set for these objects: p1 to p12 to switch to the corresponding page numbers directly (for ESP32; in case of ESP8266 it's only p1 to p4 ) prev to switch to the previous page next to switch to the next page back to go back to the home page Check out the example for how to implement actions. You can change the target pages using prev , back and next page attributes operation on the page object pXb0 . Swipe ~ Objects and page area ( p0bY ) support swipe property. Enabling this will process left , right and down swipes on the object as next , prev and back page changes, respectively. The start of the swipe needs to be on the element which has this property enabled for the feature to activate. Note Page id p0b0 is not valid to set this property as it has to be set on real elements. Events ~ All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic. Common Methods ~ These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: p 1 b 5. dele te p 1 b 3. t o_ fr o nt Object Types Each object type is an ID that indicates which object type that line represents. Besides the common properties listed above, each object type can have specific properties. Text Label ~ obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" } Button ~ obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 } Switch ~ obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color1 color 0 changes indicator color bg_color2 color 0 changes knob color radius2 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons. Checkbox ~ obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons. Progress Bar ~ obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values. Slider ~ obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Arc ~ obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle1 0-360 start angle of the arc indicator (see note) end_angle1 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val support also negative values. Tip To adjust the size of the knob, use pad_top2 , pad_bottom2 , pad_left2 , pad_right2 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle1\" : 135 , \"end_angle1\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Dropdown List ~ obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Roller ~ obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Line Meter ~ obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 } Gauge ~ obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value angle 0-360 240 angle between start and end of the scale label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize. Tabview ~ obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top1 and pad_bottom1 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font1 styling property. Read further down to learn now to add tabs to the tabview. Tab ~ obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you wamt them to appear on. Example jsonl { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius2\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" } Color picker ~ obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. By long pressing the inner preview circle, the color picker will through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value. Setting Color ~ Example MQTT commands: hasp/< n ode na me>/comma n d/p 0 b 2. color 13891 hasp/< n ode na me>/comma n d/p 1 b 5. color silver hasp/< n ode na me>/comma n d/p 2 b 3. color #C 0 C 0 C 0 Events ~ While pressing and dragging the cpicker object the following events are sent: down (old color), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"color\" : \"#8300ff\" , \"r\" : 131 , \"g\" : 0 , \"b\" : 255 } { \"event\" : \"changed\" , \"color\" : \"#7300ff\" , \"r\" : 115 , \"g\" : 0 , \"b\" : 255 } { \"event\" : \"changed\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 } { \"event\" : \"up\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 } Spinner ~ obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees line_width int16 20 The width of the background circle line_width1 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color1 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width1\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color1\" : \"green\" } LED Indicator ~ obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ] Button Matrix ~ obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 } Messagebox ~ obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]} Line ~ obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be conter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 } Image ~ obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object Only PNG image files are supported, from flash. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Note The decoding of the images is done in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons. Example jsonl { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"/littlefs/image.png\" , \"auto_size\" : 0 , \"w\" : 50 } Base Object ~ obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Objects"},{"location":"design/objects/#cheatsheet","text":"obj Type Description btn Binary Button switch Toggle Switch checkbox Toggle Checkbox label Visual Label led Visual LED spinner Visual Spinner obj Visual Base Object line Visual Line img Visual Image dropdown Selector Dropdown List roller Selector Roller btnmatrix Selector Button Matrix msgbox Selector Messagebox tabview Selector Tabview tab Selector Tab cpicker Selector Color picker bar Range Progress Bar slider Range Slider arc Range Arc linemeter Range Line Meter gauge Range Gauge","title":"Cheatsheet"},{"location":"design/objects/#common-parameters","text":"","title":"Common Parameters"},{"location":"design/objects/#common-properties","text":"These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Required Default Description id 1..254 yes n/a ID of the object on this page. 0 for the page itself. obj string yes n/a Name of the object type (see below) page 0..12 no n/a ID of the page the object appears on (see below) groupid 0..15 no 0 (none) ID of the GPIO group the object belongs to x int16 no 0 Horizontal position on the page y int16 no 0 Vertical position on the page w int16 no 0 Width of the object h int16 no 0 Height of the object hidden bool no false Object is hidden opacity 0..255 no 255 How much the the object is opaque action string no 0 Command handled locally (see below) swipe bool no false Page navigation using swipe gestures (see below) click bool no true Object is touch/clickable (also see enabled ) ext_click_h 0..255 no 0 Extended horizontal clickable are on the left and right ext_click_v 0..255 no 0 Extended vertical clickable are on the top and bottom parentid 0..255 no 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.)","title":"Common Properties"},{"location":"design/objects/#events","text":"All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic.","title":"Events"},{"location":"design/objects/#common-methods","text":"These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: p 1 b 5. dele te p 1 b 3. t o_ fr o nt","title":"Common Methods"},{"location":"design/objects/#text-label","text":"obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Text Label"},{"location":"design/objects/#button","text":"obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Button"},{"location":"design/objects/#switch","text":"obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color1 color 0 changes indicator color bg_color2 color 0 changes knob color radius2 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/#checkbox","text":"obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/#progress-bar","text":"obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values.","title":"Progress Bar"},{"location":"design/objects/#slider","text":"obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/#arc","text":"obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle1 0-360 start angle of the arc indicator (see note) end_angle1 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val support also negative values. Tip To adjust the size of the knob, use pad_top2 , pad_bottom2 , pad_left2 , pad_right2 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle1\" : 135 , \"end_angle1\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/#dropdown-list","text":"obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/#roller","text":"obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/#line-meter","text":"obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/#gauge","text":"obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value angle 0-360 240 angle between start and end of the scale label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/#tabview","text":"obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top1 and pad_bottom1 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font1 styling property. Read further down to learn now to add tabs to the tabview.","title":"Tabview  "},{"location":"design/objects/#tab","text":"obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you wamt them to appear on. Example jsonl { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius2\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tab  "},{"location":"design/objects/#color-picker","text":"obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. By long pressing the inner preview circle, the color picker will through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value.","title":"Color picker"},{"location":"design/objects/#spinner","text":"obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees line_width int16 20 The width of the background circle line_width1 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color1 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width1\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color1\" : \"green\" }","title":"Spinner"},{"location":"design/objects/#led-indicator","text":"obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/#button-matrix","text":"obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/#messagebox","text":"obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox  "},{"location":"design/objects/#line","text":"obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be conter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line  "},{"location":"design/objects/#image","text":"obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object Only PNG image files are supported, from flash. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Note The decoding of the images is done in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons. Example jsonl { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"/littlefs/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image  "},{"location":"design/objects/#base-object","text":"obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/pages/","text":"Pages ~ The layout of the pages can be defined in several ways: by creating a special file on the flash file system, which will be loaded and the layout with the objects displayed each time HASP starts up. by issuing commands through MQTT to draw/change the objects immediately You can create the file with your favourite text editor and upload it (and other resource assets like fonts) using the web interface HASP Design menu. pages.jsonl ~ The location of this file is /pages.jsonl in the root of the flash filesystem. It uses the JSON Lines format with one json object per line. Each line should contain exactly one valid json object and end with a line-break \\n (not a comma) . The jsonl lines are interpreted line-by-line. When a malformed line is encountered, the processing of the rest of the file stops. If you are missing objects, check the logs to see which line was processed last. You probably have a typo in the following line which blocks parsing the rest of the file. Blank lines are allowed for readability and are ignored. Note The complete file in its entirety is not a valid json file. Each individual line however must be a valid json object. The file extension is .jsonl and not .json . Note The maximum number of pages and objects is limited by the memory available in the MCU, it depends on the microcontroller type you use. File comments ~ If any of the required id or obj properties are missing - and the line is still valid json - then it is interpreted as a comment. When you upload the file to your plate's flash filesystem, you can also use the page parameter in a comment to set the default page for new objects that don't have a page parameter. Example 1: Add a comment on a single line that is ignored. 1 { \"comment\" : \" ----------- Page 1 layout ------------\" } Example 2: Set the default page to 2 for objects in the following lines, besides adding a comment as well. 1 { \"page\" : 2 , \"comment\" : \" ---- My Awesome Color Picker Layout ----\" } If you then omit the page parameter in the lines below this comment, those objects will appear by default on page 2 . Example 3: Insert a comment for an object. 1 { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"obj\" , \"x\" : 40 , \"y\" : 100 , \"w\" : 160 , \"h\" : 160 , \"radius\" : 100 , \"opacity\" : 100 , \"border_opa\" : 160 , \"border_width\" : 4 , \"comment\" : \"touch-catcher\" } Warning If the line is not valid json, the parsing of the rest of the file is also stopped. jsonl command ~ See commands documentation for the jsonl command. The payload of the command corresponds to what's exactly in one line of the pages.jsonl file above, with a minor exception: page numbers are not kept between the commands - you need to specfiy the page with each! Objects ~ Each line in pages.jsonl creates one object on a page and has to be in the json format. The order of the objects also dictates the layer on the page from bottom to top. So the last drawn object will be the topmost. Example Objects: 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 5 , \"y\" : 5 , \"h\" : 50 , \"w\" : 50 , \"text\" : \"Hello\" , \"enabled\" : true , \"hidden\" : false } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 90 , \"h\" : 90 , \"w\" : 50 , \"text\" : \"World\" , \"enabled\" : false , \"hidden\" : false } Once the object is created, you can reference it with pXbY where X is the page number and Y is the id of the object. For example: 1 2 p 1 b 1. w= 100 p 1 b 2. hidde n = true Ids start from 1 on each page. You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Page number 0 refers to an object visible on all pages. An id of 0 refers to the page itself instead of an object. See objects documentation for details. Page attributes ~ A page can have the following attributes: prev : The number of the destination page when performing a page prev action on this page next : The number of the destination page when performing a page next action on this page back : The number of the destination page when performing a page back action on this page By default all pages cycle in a round-robin fashion (after the last page jump back to first), but you can change this behaviour by adjusting the prev , next and back target pages. For example, to limit cycle through page 1-5 only: on page 5, page next action will jump back to page 1: 1 { \"page\" : 5 , \"id\" : 0 , \"next\" : 1 } The corresponding command is p5b0.next=1 . on page 1, page prev action will go to page 5 (instead of default page 12 on an ESP32) 1 { \"page\" : 1 , \"id\" : 0 , \"prev\" : 5 } The corresponding command is p1b0.prev=5 . Tip Page id p0b0 (as all pages) is not valid to set this attribute for. It has to be set individually on each real page starting from 1. back acts like a level up action, so you can jump back to the home or menu page where you came from using page back . You can create a hierarchy of pages and menus this way. Check out the example for how to implement a simple pagination bar.","title":"Pages"},{"location":"design/pages/#pages","text":"The layout of the pages can be defined in several ways: by creating a special file on the flash file system, which will be loaded and the layout with the objects displayed each time HASP starts up. by issuing commands through MQTT to draw/change the objects immediately You can create the file with your favourite text editor and upload it (and other resource assets like fonts) using the web interface HASP Design menu.","title":"Pages"},{"location":"design/pages/#pagesjsonl","text":"The location of this file is /pages.jsonl in the root of the flash filesystem. It uses the JSON Lines format with one json object per line. Each line should contain exactly one valid json object and end with a line-break \\n (not a comma) . The jsonl lines are interpreted line-by-line. When a malformed line is encountered, the processing of the rest of the file stops. If you are missing objects, check the logs to see which line was processed last. You probably have a typo in the following line which blocks parsing the rest of the file. Blank lines are allowed for readability and are ignored. Note The complete file in its entirety is not a valid json file. Each individual line however must be a valid json object. The file extension is .jsonl and not .json . Note The maximum number of pages and objects is limited by the memory available in the MCU, it depends on the microcontroller type you use.","title":"pages.jsonl"},{"location":"design/pages/#file-comments","text":"If any of the required id or obj properties are missing - and the line is still valid json - then it is interpreted as a comment. When you upload the file to your plate's flash filesystem, you can also use the page parameter in a comment to set the default page for new objects that don't have a page parameter. Example 1: Add a comment on a single line that is ignored. 1 { \"comment\" : \" ----------- Page 1 layout ------------\" } Example 2: Set the default page to 2 for objects in the following lines, besides adding a comment as well. 1 { \"page\" : 2 , \"comment\" : \" ---- My Awesome Color Picker Layout ----\" } If you then omit the page parameter in the lines below this comment, those objects will appear by default on page 2 . Example 3: Insert a comment for an object. 1 { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"obj\" , \"x\" : 40 , \"y\" : 100 , \"w\" : 160 , \"h\" : 160 , \"radius\" : 100 , \"opacity\" : 100 , \"border_opa\" : 160 , \"border_width\" : 4 , \"comment\" : \"touch-catcher\" } Warning If the line is not valid json, the parsing of the rest of the file is also stopped.","title":"File comments"},{"location":"design/pages/#jsonl-command","text":"See commands documentation for the jsonl command. The payload of the command corresponds to what's exactly in one line of the pages.jsonl file above, with a minor exception: page numbers are not kept between the commands - you need to specfiy the page with each!","title":"jsonl command"},{"location":"design/pages/#objects","text":"Each line in pages.jsonl creates one object on a page and has to be in the json format. The order of the objects also dictates the layer on the page from bottom to top. So the last drawn object will be the topmost. Example Objects: 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 5 , \"y\" : 5 , \"h\" : 50 , \"w\" : 50 , \"text\" : \"Hello\" , \"enabled\" : true , \"hidden\" : false } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 90 , \"h\" : 90 , \"w\" : 50 , \"text\" : \"World\" , \"enabled\" : false , \"hidden\" : false } Once the object is created, you can reference it with pXbY where X is the page number and Y is the id of the object. For example: 1 2 p 1 b 1. w= 100 p 1 b 2. hidde n = true Ids start from 1 on each page. You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Page number 0 refers to an object visible on all pages. An id of 0 refers to the page itself instead of an object. See objects documentation for details.","title":"Objects"},{"location":"design/pages/#page-attributes","text":"A page can have the following attributes: prev : The number of the destination page when performing a page prev action on this page next : The number of the destination page when performing a page next action on this page back : The number of the destination page when performing a page back action on this page By default all pages cycle in a round-robin fashion (after the last page jump back to first), but you can change this behaviour by adjusting the prev , next and back target pages. For example, to limit cycle through page 1-5 only: on page 5, page next action will jump back to page 1: 1 { \"page\" : 5 , \"id\" : 0 , \"next\" : 1 } The corresponding command is p5b0.next=1 . on page 1, page prev action will go to page 5 (instead of default page 12 on an ESP32) 1 { \"page\" : 1 , \"id\" : 0 , \"prev\" : 5 } The corresponding command is p1b0.prev=5 . Tip Page id p0b0 (as all pages) is not valid to set this attribute for. It has to be set individually on each real page starting from 1. back acts like a level up action, so you can jump back to the home or menu page where you came from using page back . You can create a hierarchy of pages and menus this way. Check out the example for how to implement a simple pagination bar.","title":"Page attributes"},{"location":"design/styling/","text":"Styling Properties ~ You can adjust the appearance of objects by changing the foreground, background and/or border color of each object. Some objects allow for more complex styling, effectively changing the appearance of their sub-components. Suffixes ~ The styling properties below support an optional two-digit suffix to indicate which part and/or state of the object the property applies to. A styling property without suffix will be applied to the default state of the main part of the object (i.e. the background) . Very detailed styling can be applied to each part depending on the state of the object: Parts ~ All objects have at least a main part. Several objects are made up of additional parts which can each be styled separately. To access the properties of the parts use a two-digit suffix appended to the styling properties below. The part indexes are: 00 = main part of the object (i.e. the background) 10 = the indicator or needle, highlighting the the current value 20 = the knob which can be used the change the value 30 = the background of the items/buttons 40 = the items/buttons 50 = the selected item 60 = major ticks of the gauge object 70 = the text cursor 80 = the scrollbar 90 = other special part, not listed above Tip For example the gauge object uses line_width to set the minor ticks thickness, line_width60 for major ticks and line_width10 for the thickness of the needle. States ~ The state indexes: 00 = default styling 01 = styling for toggled state 02 = styling for pressed, not toggled state 03 = styling for pressed and toggled state 04 = styling for disabled not toggled state 05 = styling for disabled and toggled state For example to set the radius of all the buttons in btnmatrix you'd set a value for the property radius30 . Using radius without a suffix will apply the property to the outline background of it. A toggle btn can be made to show text yellow when toggled ON with \"text_color\":\"white\",\"text_color01\":\"yellow\" Inheritance ~ If objects are children of other objects (they have the parentid property set), property inheritance takes place. Some properties (typically that are related to text and opacity) can be inherited from the parent object's styles. Inheritance is applied only if the given property is not set in the initial jsonl of the child object (at first draw). In this case, if the property is inheritable, the property's value will be searched in the parents too until an object specifies a value for the property. The parents will use their own state to detemine the value. So for example if a button is pressed, and the text color comes from here, the pressed text color will be used. ( source ) Inheritance takes place at run time too. When a parent object is deleted, all children will be deleted too. General ~ General styling options. Property Value Default Description radius uint16 depends on theme The radius of the rounded corners of the object: 0 = no radius i.e. square corners 65535 = pill shaped object (true circle if object has same width and height) clip_corner bool false Enable to clip off the overflowed content on the rounded ( radius > 0 ) corners of the object Background ~ The color and gradient used for drawing the background of an object. Property Type Description bg_opa uint8 The background opacity level bg_color color The background color bg_grad_color color The background gradient color bg_grad_dir [0..2] 0 = none (=default) 1 = horizontal 2 = vertical bg_grad_stop uint8 Specifies where the gradient should stop. 0 = at left/top most position 128 = in the center 255 = at right/bottom most position (=default) bg_main_stop uint8 Specifies where should the gradient start 0 = at left/top most position (=default) 128 = in the center 255 = at right/bottom most position To adjust the background style of a page use pXb0 where X is the page number. Border ~ The border is drawn on top of the background. It has radius rounding. Property Type Description border_color color Specifies the color of the border border_opa uint8 Specifies opacity of the border border_width uint8 Set the width of the border border_side uint8 Specifies which sides of the border to draw. 0 = none 1 = bottom 2 = top 4 = left 8 = right 15 = full A sum of these values is also possible to select specific sides. border_post bool If true the border will be drawn after all children have been drawn. Outline ~ The outline is similar to border but is drawn outside of the object. Property Type Description outline_color color Specifies the color of the outline outline_opa uint8 Specifies opacity of the outline outline_width uint8 Set the width of the outline outline_pad int16 The space between the object and the outline. (default=0) Padding and Margin ~ Padding sets the space on the inner sides of the edges. It means \"I don't want my children too close to my sides, so keep this space\". Padding inner sets the \"gap\" between the children. Margin sets the space on the outer side of the edges. It means \"I want this space around me\". Objects use them to set spacing. See the documentation of the objects for the details. Property Type Description pad_top int16 Set the padding on the top pad_bottom int16 Set the padding on the bottom pad_left int16 Set the padding on the left pad_right int16 Set the padding on the right pad_inner int16 Set the padding inside the object between children margin_top int16 Set the margin on the top margin_bottom int16 Set the margin on the bottom margin_left int16 Set the margin on the left margin_right int16 Set the margin on the right Shadow ~ The shadow is a blurred area under the object. Property Type Description shadow_color color Color of the shadow shadow_opa uint8 Specifies opacity of the shadow shadow_width int16 Set the width (blur size) of the outline shadow_ofs_x int16 Set the an X offset for the shadow shadow_ofs_y int16 Set the an Y offset for the shadow shadow_spread uint8 Make the shadow larger than the background in every direction by this value Text ~ Properties applied to the textual elements of the objects. Property Type Description text_color color Color of the text text_opa uint8 Opacity level of the text [0-255] text_font uint8 The Font ID text_letter_space int16 Distance between letters of the text, can be a negative number text_line_space int16 Distance between lines of the text, can be a negative number text_decor uint8 Add text decoration. 0 = none (=default) 1 = underline 2 = strikethrough 3 = underline and strikethrough text_sel_color color Set background color of text selection Value ~ Value is an arbitrary text label drawn on top of an object. It can be a lightweight replacement for creating standalone label objects. Property Type Description value_str string Text to display value_color color Color of the text value_opa uint8 Opacity level of the text [0-255] value_font uint8 The Font ID value_letter_space int16 Distance between letters of the text, can be negative value_line_space int16 Distance between lines of the text, can be negative value_align align Alignment of the text. Can be: none left right top bottom full center (=default) value_ofs_x int16 X offset from the default position of the alignment value_ofs_y int16 Y offset from the default position of the alignment Line ~ Properties for line , line meter objects. Property Type Description line_color color Color of the line line_opa uint8 Opacity level of the line [0-255] line_width int16 Width of a scale line in the active region (also see scale_end_line_width below), or gauge minor ticks thickness line_rounded bool true = draw rounded line endings. Default = false line_dash_width int16 Width of dash. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default) line_dash_gap int16 Gap between two dash line. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default) Scale ~ The properties for styling the scale of line meter , gauge objects. Property Type Description scale_grad_color color Gradient to this color on the scale lines, or gauge minor ticks scale_end_color color Color of the scale lines in the end region, or gauge minor ticks / critical area scale_width int16 Width of the scale in the normal region, or length of gauge minor ticks scale_border_width int16 Width of a border drawn on the outer side of the scale in the normal region scale_end_line_width int16 Width of a scale line in the end region scale_end_border_width int16 Width of a border drawn on the outer side of the scale in the end region Image ~ Property Type Description image_opa uint8 Opacity of the image image_recolor color Color of the overlay color mask image_recolor_opa uint8 Specifies opacity of the overlay color mask","title":"Styling Properties"},{"location":"design/styling/#styling-properties","text":"You can adjust the appearance of objects by changing the foreground, background and/or border color of each object. Some objects allow for more complex styling, effectively changing the appearance of their sub-components.","title":"Styling Properties"},{"location":"design/styling/#suffixes","text":"The styling properties below support an optional two-digit suffix to indicate which part and/or state of the object the property applies to. A styling property without suffix will be applied to the default state of the main part of the object (i.e. the background) . Very detailed styling can be applied to each part depending on the state of the object:","title":"Suffixes"},{"location":"design/styling/#parts","text":"All objects have at least a main part. Several objects are made up of additional parts which can each be styled separately. To access the properties of the parts use a two-digit suffix appended to the styling properties below. The part indexes are: 00 = main part of the object (i.e. the background) 10 = the indicator or needle, highlighting the the current value 20 = the knob which can be used the change the value 30 = the background of the items/buttons 40 = the items/buttons 50 = the selected item 60 = major ticks of the gauge object 70 = the text cursor 80 = the scrollbar 90 = other special part, not listed above Tip For example the gauge object uses line_width to set the minor ticks thickness, line_width60 for major ticks and line_width10 for the thickness of the needle.","title":"Parts"},{"location":"design/styling/#states","text":"The state indexes: 00 = default styling 01 = styling for toggled state 02 = styling for pressed, not toggled state 03 = styling for pressed and toggled state 04 = styling for disabled not toggled state 05 = styling for disabled and toggled state For example to set the radius of all the buttons in btnmatrix you'd set a value for the property radius30 . Using radius without a suffix will apply the property to the outline background of it. A toggle btn can be made to show text yellow when toggled ON with \"text_color\":\"white\",\"text_color01\":\"yellow\"","title":"States"},{"location":"design/styling/#inheritance","text":"If objects are children of other objects (they have the parentid property set), property inheritance takes place. Some properties (typically that are related to text and opacity) can be inherited from the parent object's styles. Inheritance is applied only if the given property is not set in the initial jsonl of the child object (at first draw). In this case, if the property is inheritable, the property's value will be searched in the parents too until an object specifies a value for the property. The parents will use their own state to detemine the value. So for example if a button is pressed, and the text color comes from here, the pressed text color will be used. ( source ) Inheritance takes place at run time too. When a parent object is deleted, all children will be deleted too.","title":"Inheritance"},{"location":"design/styling/#general","text":"General styling options. Property Value Default Description radius uint16 depends on theme The radius of the rounded corners of the object: 0 = no radius i.e. square corners 65535 = pill shaped object (true circle if object has same width and height) clip_corner bool false Enable to clip off the overflowed content on the rounded ( radius > 0 ) corners of the object","title":"General"},{"location":"design/styling/#background","text":"The color and gradient used for drawing the background of an object. Property Type Description bg_opa uint8 The background opacity level bg_color color The background color bg_grad_color color The background gradient color bg_grad_dir [0..2] 0 = none (=default) 1 = horizontal 2 = vertical bg_grad_stop uint8 Specifies where the gradient should stop. 0 = at left/top most position 128 = in the center 255 = at right/bottom most position (=default) bg_main_stop uint8 Specifies where should the gradient start 0 = at left/top most position (=default) 128 = in the center 255 = at right/bottom most position To adjust the background style of a page use pXb0 where X is the page number.","title":"Background"},{"location":"design/styling/#border","text":"The border is drawn on top of the background. It has radius rounding. Property Type Description border_color color Specifies the color of the border border_opa uint8 Specifies opacity of the border border_width uint8 Set the width of the border border_side uint8 Specifies which sides of the border to draw. 0 = none 1 = bottom 2 = top 4 = left 8 = right 15 = full A sum of these values is also possible to select specific sides. border_post bool If true the border will be drawn after all children have been drawn.","title":"Border"},{"location":"design/styling/#outline","text":"The outline is similar to border but is drawn outside of the object. Property Type Description outline_color color Specifies the color of the outline outline_opa uint8 Specifies opacity of the outline outline_width uint8 Set the width of the outline outline_pad int16 The space between the object and the outline. (default=0)","title":"Outline"},{"location":"design/styling/#padding-and-margin","text":"Padding sets the space on the inner sides of the edges. It means \"I don't want my children too close to my sides, so keep this space\". Padding inner sets the \"gap\" between the children. Margin sets the space on the outer side of the edges. It means \"I want this space around me\". Objects use them to set spacing. See the documentation of the objects for the details. Property Type Description pad_top int16 Set the padding on the top pad_bottom int16 Set the padding on the bottom pad_left int16 Set the padding on the left pad_right int16 Set the padding on the right pad_inner int16 Set the padding inside the object between children margin_top int16 Set the margin on the top margin_bottom int16 Set the margin on the bottom margin_left int16 Set the margin on the left margin_right int16 Set the margin on the right","title":"Padding and Margin"},{"location":"design/styling/#shadow","text":"The shadow is a blurred area under the object. Property Type Description shadow_color color Color of the shadow shadow_opa uint8 Specifies opacity of the shadow shadow_width int16 Set the width (blur size) of the outline shadow_ofs_x int16 Set the an X offset for the shadow shadow_ofs_y int16 Set the an Y offset for the shadow shadow_spread uint8 Make the shadow larger than the background in every direction by this value","title":"Shadow"},{"location":"design/styling/#text","text":"Properties applied to the textual elements of the objects. Property Type Description text_color color Color of the text text_opa uint8 Opacity level of the text [0-255] text_font uint8 The Font ID text_letter_space int16 Distance between letters of the text, can be a negative number text_line_space int16 Distance between lines of the text, can be a negative number text_decor uint8 Add text decoration. 0 = none (=default) 1 = underline 2 = strikethrough 3 = underline and strikethrough text_sel_color color Set background color of text selection","title":"Text"},{"location":"design/styling/#value","text":"Value is an arbitrary text label drawn on top of an object. It can be a lightweight replacement for creating standalone label objects. Property Type Description value_str string Text to display value_color color Color of the text value_opa uint8 Opacity level of the text [0-255] value_font uint8 The Font ID value_letter_space int16 Distance between letters of the text, can be negative value_line_space int16 Distance between lines of the text, can be negative value_align align Alignment of the text. Can be: none left right top bottom full center (=default) value_ofs_x int16 X offset from the default position of the alignment value_ofs_y int16 Y offset from the default position of the alignment","title":"Value"},{"location":"design/styling/#line","text":"Properties for line , line meter objects. Property Type Description line_color color Color of the line line_opa uint8 Opacity level of the line [0-255] line_width int16 Width of a scale line in the active region (also see scale_end_line_width below), or gauge minor ticks thickness line_rounded bool true = draw rounded line endings. Default = false line_dash_width int16 Width of dash. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default) line_dash_gap int16 Gap between two dash line. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default)","title":"Line"},{"location":"design/styling/#scale","text":"The properties for styling the scale of line meter , gauge objects. Property Type Description scale_grad_color color Gradient to this color on the scale lines, or gauge minor ticks scale_end_color color Color of the scale lines in the end region, or gauge minor ticks / critical area scale_width int16 Width of the scale in the normal region, or length of gauge minor ticks scale_border_width int16 Width of a border drawn on the outer side of the scale in the normal region scale_end_line_width int16 Width of a scale line in the end region scale_end_border_width int16 Width of a border drawn on the outer side of the scale in the end region","title":"Scale"},{"location":"design/styling/#image","text":"Property Type Description image_opa uint8 Opacity of the image image_recolor color Color of the overlay color mask image_recolor_opa uint8 Specifies opacity of the overlay color mask","title":"Image"},{"location":"design/converter/","text":"With this free online font converter tool you can create C array from any TTF or WOFF font. You can select ranges of Unicode characters and speficy the bpp (bit-per-pixel). The font converter is designed to be compatible with LVGL but with minor modification you can make it compatible with other graphics libraries. The offline version of the converter is available here How to use the font converter? Give name to the output font. E.g. \"arial_40\" Specify the height in px Set the bpp (bit-per-piel). Higher value results smoother (anti-aliased) font Choose a TTF or WOFF font Set a range of Unicode character to include in your font or list the characters in the Symbols field Optionally choose and other font too and specify the ranges and/or symbols for it as well. The characters will be merged into the final C file. Click the Convert button to download the result C file. How to use the generated fonts in LVGL? Copy the result C file into your LVGL project In a C file of your application declare the font as: extern lv_font_t my_font_name; or simply LV_FONT_DECLARE(my_font_name); Set the font in a style: style.text.font = &my_font_name; Name Size Bpp 1 bit-per-pixel 2 bit-per-pixel 3 bit-per-pixel (Needs compression enabled) 4 bit-per-pixel 8 bit-per-pixel Enable font compression (reduces size, requires 6.1+) No subpixel hinting Horizontal subpixel hinting (may improve font quality, requires 6.1+) Vertical subpixel hinting Try to use glyph color info from font to create grayscale icons. Since gray tones are emulated via transparency, result will be good on contrast background only. TTF/WOFF/OTF file Range Symbols Include another font You can use both \"Range\" and \"Symbols\" or only one of them Useful notes Unicode table to pick letters: https://unicode-table.com/ Unicode ranges http://jrgraphix.net/research/unicode.php A pixel perfect font : Terminus . Examples for two-tone or colored fonts : Material Design Icons (two-tone version) , BungeeColor-Regular List of built-in symbols Use this FontAwesome symbol font and copy this list to Range : 61441,61448,61451,61452,61452,61453,61457,61459,61461,61465, 61468,61473,61478,61479,61480,61502,61512,61515,61516,61517, 61521,61522,61523,61524,61543,61544,61550,61552,61553,61556, 61559,61560,61561,61563,61587,61589,61636,61637,61639,61671, 61674,61683,61724,61732,61787,61931,62016,62017,62018,62019, 62020,62087,62099,62212,62189,62810,63426,63650 To learn more about the font handling of LVGL read this Guide","title":"Index"},{"location":"design/objects/","text":".md-typeset__table { min-width: 100%; } table th:first-child{ border-radius:5px 0 0 0; } table th:last-child{ border-radius:0 5px 0 0; } tbody tr:nth-child(even) { background: #88888811; } .md-typeset table:not([class]) { display: table; } .md-typeset table:not([class]) td { padding: 0.5em 1.25em; line-height: 1.25; } Objects ~ There are two ways to create an object on the screen: Uploading a pages.jsonl file onto the internal flash Use the jsonl command (via MQTT, serial or telnet console) Cheatsheet ~ obj Type Description Extra Parts btn Binary Button switch Toggle Switch indicator, knob checkbox Toggle Checkbox indicator label Visual Label led Visual LED spinner Visual Spinner indicator obj Visual Base Object line Visual Line img Visual Image cpicker Selector Color picker knob roller Selector Roller selected dropdown Selector Dropdown List selected, items, scrollbar btnmatrix Selector Button Matrix items msgbox Selector Messagebox items, items_bg tabview Selector Tabview items, items_bg, indicator, selected tab Selector Tab bar Range Progress Bar indicator slider Range Slider indicator, knob arc Range Arc indicator, knob linemeter Range Line Meter gauge Range Gauge indicator, ticks Common Parameters ~ Common Properties ~ These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Default Description id 1..254 n/a Required. ID of the object on this page. 0 for the page itself. obj string n/a Required. Name of the object type (see below) page 0..12 n/a ID of the page the object appears on (see below) groupid 0..15 0 (none) ID of the GPIO group the object belongs to x int16 0 Horizontal position on the page y int16 0 Vertical position on the page w int16 0 Width of the object h int16 0 Height of the object enabled bool true Object is touchable, if false , a disabled style is applied hidden bool false Object is hidden opacity uint8 255 How much the the object is opaque swipe JSONobject null Swipe gestures handled locally (see below) action JSONobject null Touch command handled locally (see below) click bool true Object is touch/clickable (also see enabled ) ext_click_h uint8 0 Extended horizontal clickable are on the left and right ext_click_v uint8 0 Extended vertical clickable are on the top and bottom parentid uint8 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . tag JSONobject n/a Arbitrary attribute data. Once set, it will be included in each event message. For advanced scenarios (more info in an example ). jsonl JSONobject n/a Pseudo-property to set multiple properties of an existing object in one go with a JSON object. Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Pages ~ If the page parameter is not present, the object is placed on the same page as the previous object . If page is not specified for the first object either, the current page being displayed is used. \"page\":0 indicates that the object is visible on all pages. It can be used for example to specify a static menu bar. You can still hide the object on select pages if needed. Objects on page 0 appear on top of any objects on the underlying page. Actions ~ Action commands are supported only by binary or visual type of objects and they are performed locally on the plate. Actions can be of most any command : action has the format of \"action\": {\"<btn event>\": \"<command>\"} *btn events: are found in events . examples are up , down etc. Check out the example for how to implement actions. You can change the target pages using prev , back and next page attributes operation on the page object pXb0 . Swipe ~ Objects and page area ( pXb0 ) support the swipe property. Enabling this will process left , right , up and/or down swipes on the object. The start of the swipe needs to be on the element which has this property enabled for the feature to activate. The default is \"swipe\":null or swipe gestures disabled. To enable the default swipe gestures use \"swipe\":1 . This will change the page to next , prev and back on left , right and down swipes, respectively. It is a shorthand for \"swipe\":{\"down\":\"page back\",\"left\":\"page next\",\"right\":\"page prev\"} . You can customize the gesture to execure different commands if needed. Note Page id p0b0 is not valid to set this property as it has to be set on real elements. Events ~ All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic. Common Methods ~ These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: 1 2 p 1 b 5. dele te p 1 b 3. t o_ fr o nt Object Types ~ Each object type is an ID that indicates which object type that line represents. Besides the common properties listed above, each object type can have specific properties. Text Label ~ obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" } Button ~ obj: btn ![lv_btn]./images/lv_ex_btn_1.png) Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 } Switch ~ obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons. Checkbox ~ obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons. Progress Bar ~ obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Slider ~ obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Arc ~ obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Dropdown List ~ obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Roller ~ obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Line Meter ~ obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 } Gauge ~ obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize. Tabview ~ obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview. Tab ~ obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" } Color picker ~ obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value. Setting Color ~ Example MQTT commands: 1 2 3 4 hasp/< n ode na me>/comma n d/p 0 b 2. color 13891 hasp/< n ode na me>/comma n d/p 1 b 5. color silver hasp/< n ode na me>/comma n d/p 2 b 3. color #C 0 C 0 C 0 hasp/< n ode na me>/comma n d/p 2 b 3. mode sa turat io n Events ~ While pressing and dragging the cpicker object the following events are sent: down (old color), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 { \"event\" : \"down\" , \"color\" : \"#8300ff\" , \"r\" : 131 , \"g\" : 0 , \"b\" : 255 , \"h\" : 271 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#7300ff\" , \"r\" : 115 , \"g\" : 0 , \"b\" : 255 , \"h\" : 267 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"up\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 } Spinner ~ obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" } LED Indicator ~ obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ] Button Matrix ~ obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 } Messagebox ~ obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]} Line ~ obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 } Image ~ obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 } Base Object ~ obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Objects"},{"location":"design/objects/#objects","text":"There are two ways to create an object on the screen: Uploading a pages.jsonl file onto the internal flash Use the jsonl command (via MQTT, serial or telnet console)","title":"Objects"},{"location":"design/objects/#cheatsheet","text":"obj Type Description Extra Parts btn Binary Button switch Toggle Switch indicator, knob checkbox Toggle Checkbox indicator label Visual Label led Visual LED spinner Visual Spinner indicator obj Visual Base Object line Visual Line img Visual Image cpicker Selector Color picker knob roller Selector Roller selected dropdown Selector Dropdown List selected, items, scrollbar btnmatrix Selector Button Matrix items msgbox Selector Messagebox items, items_bg tabview Selector Tabview items, items_bg, indicator, selected tab Selector Tab bar Range Progress Bar indicator slider Range Slider indicator, knob arc Range Arc indicator, knob linemeter Range Line Meter gauge Range Gauge indicator, ticks","title":"Cheatsheet"},{"location":"design/objects/#common-parameters","text":"","title":"Common Parameters"},{"location":"design/objects/#common-properties","text":"These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Default Description id 1..254 n/a Required. ID of the object on this page. 0 for the page itself. obj string n/a Required. Name of the object type (see below) page 0..12 n/a ID of the page the object appears on (see below) groupid 0..15 0 (none) ID of the GPIO group the object belongs to x int16 0 Horizontal position on the page y int16 0 Vertical position on the page w int16 0 Width of the object h int16 0 Height of the object enabled bool true Object is touchable, if false , a disabled style is applied hidden bool false Object is hidden opacity uint8 255 How much the the object is opaque swipe JSONobject null Swipe gestures handled locally (see below) action JSONobject null Touch command handled locally (see below) click bool true Object is touch/clickable (also see enabled ) ext_click_h uint8 0 Extended horizontal clickable are on the left and right ext_click_v uint8 0 Extended vertical clickable are on the top and bottom parentid uint8 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . tag JSONobject n/a Arbitrary attribute data. Once set, it will be included in each event message. For advanced scenarios (more info in an example ). jsonl JSONobject n/a Pseudo-property to set multiple properties of an existing object in one go with a JSON object. Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.)","title":"Common Properties"},{"location":"design/objects/#events","text":"All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic.","title":"Events"},{"location":"design/objects/#common-methods","text":"These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: 1 2 p 1 b 5. dele te p 1 b 3. t o_ fr o nt","title":"Common Methods"},{"location":"design/objects/#object-types","text":"Each object type is an ID that indicates which object type that line represents. Besides the common properties listed above, each object type can have specific properties.","title":"Object Types"},{"location":"design/objects/#text-label","text":"obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Text Label"},{"location":"design/objects/#button","text":"obj: btn ![lv_btn]./images/lv_ex_btn_1.png) Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Button"},{"location":"design/objects/#switch","text":"obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/#checkbox","text":"obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/#progress-bar","text":"obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values.","title":"Progress Bar"},{"location":"design/objects/#slider","text":"obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/#arc","text":"obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/#dropdown-list","text":"obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/#roller","text":"obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/#line-meter","text":"obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/#gauge","text":"obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/#tabview","text":"obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview.","title":"Tabview"},{"location":"design/objects/#tab","text":"obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tab"},{"location":"design/objects/#color-picker","text":"obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value.","title":"Color picker"},{"location":"design/objects/#spinner","text":"obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" }","title":"Spinner"},{"location":"design/objects/#led-indicator","text":"obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/#button-matrix","text":"obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/#messagebox","text":"obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox"},{"location":"design/objects/#line","text":"obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line"},{"location":"design/objects/#image","text":"obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image"},{"location":"design/objects/#base-object","text":"obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/objects/arc/","text":"Arc ~ obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/arc/#arc","text":"obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/bar/","text":"Progress Bar ~ obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values.","title":"Bar"},{"location":"design/objects/bar/#progress-bar","text":"obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values.","title":"Progress Bar"},{"location":"design/objects/btn/","text":"Button ~ obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Examples ~ Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Events ~ Push Button ~ Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle Button ~ Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Button"},{"location":"design/objects/btn/#button","text":"obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right","title":"Button"},{"location":"design/objects/btn/#examples","text":"Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" }","title":"Examples"},{"location":"design/objects/btn/#events","text":"","title":"Events"},{"location":"design/objects/btn/#push-button","text":"Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" }","title":"Push Button"},{"location":"design/objects/btn/#toggle-button","text":"Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Toggle Button"},{"location":"design/objects/btnmatrix/","text":"Button Matrix ~ obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/btnmatrix/#button-matrix","text":"obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/checkbox/","text":"Checkbox ~ obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/checkbox/#checkbox","text":"obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/cpicker/","text":"Color picker ~ obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value. Setting Color ~ Example MQTT commands: 1 2 3 4 hasp/< n ode na me>/comma n d/p 0 b 2. color 13891 hasp/< n ode na me>/comma n d/p 1 b 5. color silver hasp/< n ode na me>/comma n d/p 2 b 3. color #C 0 C 0 C 0 hasp/< n ode na me>/comma n d/p 2 b 3. mode sa turat io n Events ~ While pressing and dragging the cpicker object the following events are sent: down (old color), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 { \"event\" : \"down\" , \"color\" : \"#8300ff\" , \"r\" : 131 , \"g\" : 0 , \"b\" : 255 , \"h\" : 271 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#7300ff\" , \"r\" : 115 , \"g\" : 0 , \"b\" : 255 , \"h\" : 267 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"up\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 }","title":"Color picker"},{"location":"design/objects/cpicker/#color-picker","text":"obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value.","title":"Color picker"},{"location":"design/objects/dropdown/","text":"Dropdown List ~ obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/dropdown/#dropdown-list","text":"obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/gauge/","text":"Gauge ~ obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/gauge/#gauge","text":"obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/img/","text":"Image ~ obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image"},{"location":"design/objects/img/#image","text":"obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image"},{"location":"design/objects/label/","text":"Text Label ~ obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Label"},{"location":"design/objects/label/#text-label","text":"obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Text Label"},{"location":"design/objects/led/","text":"LED Indicator ~ obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/led/#led-indicator","text":"obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/line/","text":"Line ~ obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line"},{"location":"design/objects/line/#line","text":"obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line"},{"location":"design/objects/linemeter/","text":"Line Meter ~ obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/linemeter/#line-meter","text":"obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/msgbox/","text":"Messagebox ~ obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox"},{"location":"design/objects/msgbox/#messagebox","text":"obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox"},{"location":"design/objects/obj/","text":"Base Object ~ obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/objects/obj/#base-object","text":"obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/objects/roller/","text":"Roller ~ obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/roller/#roller","text":"obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/slider/","text":"Slider ~ obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/slider/#slider","text":"obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/spinner/","text":"Spinner ~ obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" }","title":"Spinner"},{"location":"design/objects/spinner/#spinner","text":"obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" }","title":"Spinner"},{"location":"design/objects/switch/","text":"Switch ~ obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/switch/#switch","text":"obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/tabview/","text":"Tabs ~ Tabview ~ obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview. Tab ~ obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tabs"},{"location":"design/objects/tabview/#tabs","text":"","title":"Tabs"},{"location":"design/objects/tabview/#tabview","text":"obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview.","title":"Tabview"},{"location":"design/objects/tabview/#tab","text":"obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tab"},{"location":"examples/dashui/","text":"Dash UI ~ Layout ~ Code ~ To add an openHASP plate to your installation with the Dash UI sample configuration: in the plate's web UI select Material Light UI theme, choose a purple color in the Hue color bar and reboot, upload a pages.jsonl file with the folowing content to your plate's flash memory and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"bg_color\" : \"#FFFFFF\" , \"bg_grad_color\" : \"#FFFFFF\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIVING ROOM\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"bg_grad_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 40 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"arc\" , \"x\" : 130 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 100 , \"border_side\" : 0 , \"type\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_color\" : \"#000000\" , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 120 , \"w\" : 240 , \"h\" : 20 , \"align\" : \"center\" , \"text\" : \"CO2 levels: \" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 2 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Temperature\" } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 140 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Humidity\" } { \"page\" : 1 , \"id\" : 7 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 160 , \"w\" : 240 , \"h\" : 20 , \"text\" : \"LIGHTS\" , \"bg_color\" : \"#F1C40F\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 8 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 190 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Ceiling Light\" } { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 190 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 215 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Wall Light\" } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 215 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 240 , \"w\" : 200 , \"h\" : 20 , \"text\" : \"Ambient Light\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"slider\" , \"x\" : 30 , \"y\" : 265 , \"w\" : 200 , \"h\" : 10 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"page\" : 0 , \"id\" : 11 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE141\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 12 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 13 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE142\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } Assuming your plate's configured MQTT topic is plate35 , values for Temperature, Humidity and CO2 Sensor have to be sent from another device by publishing values to the appropriate command topic: hasp/plate35/command/p1b2.val %value% - to update Temperature arc value hasp/plate35/command/p1b2.value_str %value%\u00b0C - to update Temperature text value hasp/plate35/command/p1b3.val %value% - to update Humidity arc value hasp/plate35/command/p1b3.value_str %value% % - to update Humidity text value hasp/plate35/command/p1b4.text CO2 levels: %value% - to update CO2 level value","title":"Dash UI"},{"location":"examples/dashui/#dash-ui","text":"","title":"Dash UI"},{"location":"examples/dashui/#layout","text":"","title":"Layout"},{"location":"examples/dashui/#code","text":"To add an openHASP plate to your installation with the Dash UI sample configuration: in the plate's web UI select Material Light UI theme, choose a purple color in the Hue color bar and reboot, upload a pages.jsonl file with the folowing content to your plate's flash memory and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"bg_color\" : \"#FFFFFF\" , \"bg_grad_color\" : \"#FFFFFF\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIVING ROOM\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"bg_grad_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 40 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"arc\" , \"x\" : 130 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 100 , \"border_side\" : 0 , \"type\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_color\" : \"#000000\" , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 120 , \"w\" : 240 , \"h\" : 20 , \"align\" : \"center\" , \"text\" : \"CO2 levels: \" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 2 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Temperature\" } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 140 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Humidity\" } { \"page\" : 1 , \"id\" : 7 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 160 , \"w\" : 240 , \"h\" : 20 , \"text\" : \"LIGHTS\" , \"bg_color\" : \"#F1C40F\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 8 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 190 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Ceiling Light\" } { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 190 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 215 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Wall Light\" } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 215 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 240 , \"w\" : 200 , \"h\" : 20 , \"text\" : \"Ambient Light\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"slider\" , \"x\" : 30 , \"y\" : 265 , \"w\" : 200 , \"h\" : 10 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"page\" : 0 , \"id\" : 11 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE141\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 12 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 13 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE142\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } Assuming your plate's configured MQTT topic is plate35 , values for Temperature, Humidity and CO2 Sensor have to be sent from another device by publishing values to the appropriate command topic: hasp/plate35/command/p1b2.val %value% - to update Temperature arc value hasp/plate35/command/p1b2.value_str %value%\u00b0C - to update Temperature text value hasp/plate35/command/p1b3.val %value% - to update Humidity arc value hasp/plate35/command/p1b3.value_str %value% % - to update Humidity text value hasp/plate35/command/p1b4.text CO2 levels: %value% - to update CO2 level value","title":"Code"},{"location":"examples/fan/","text":"Animated fan status ~ Layout ~ Code ~ To add an openHASP plate to your installation with a sample design to control and reflect the status of a fan: in the plate's web UI select Hasp Light UI theme and reboot, upload the fan icon to your plate, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"FAN STATUS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"lime\" , \"image_recolor_opa\" : 150 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"spinner\" , \"parentid\" : 11 , \"x\" : 7 , \"y\" : 6 , \"w\" : 126 , \"h\" : 126 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 7 , \"line_width10\" : 7 , \"type\" : 2 , \"angle\" : 120 , \"speed\" : 1000 , \"value_str\" : 3 } It is made from a transparent PNG image and a spinner object placed on top of it. To reflect various states of the fan from your home automation system, you could change the speed of the spinner, the value_str to display it numerically, or line_color10 to colorize it. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask to the fan itself. You could use the spinner's down touch events to change the speed of the fan in an OFF > 1 > 2 > 3 > OFF style (consult the documentation of your home automation system how to do this based on MQTT messages). Here's another approach where the spinner discretely shows up behind the blades: 1 2 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"spinner\" , \"x\" : 68 , \"y\" : 91 , \"w\" : 105 , \"h\" : 105 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 32 , \"line_color10\" : \"orange\" , \"line_rounded10\" : 1 , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 1000 , \"value_str\" : 3 , \"value_ofs_y\" : 1 } { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"silver\" , \"image_recolor_opa\" : 120 } For fans in action, check out the fan and scent diffuser example for Home Assistant. Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Attribution Fan by WARPAINT Media Inc. from the Noun Project","title":"Animated Fan"},{"location":"examples/fan/#animated-fan-status","text":"","title":"Animated fan status"},{"location":"examples/fan/#layout","text":"","title":"Layout"},{"location":"examples/fan/#code","text":"To add an openHASP plate to your installation with a sample design to control and reflect the status of a fan: in the plate's web UI select Hasp Light UI theme and reboot, upload the fan icon to your plate, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"FAN STATUS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"lime\" , \"image_recolor_opa\" : 150 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"spinner\" , \"parentid\" : 11 , \"x\" : 7 , \"y\" : 6 , \"w\" : 126 , \"h\" : 126 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 7 , \"line_width10\" : 7 , \"type\" : 2 , \"angle\" : 120 , \"speed\" : 1000 , \"value_str\" : 3 } It is made from a transparent PNG image and a spinner object placed on top of it. To reflect various states of the fan from your home automation system, you could change the speed of the spinner, the value_str to display it numerically, or line_color10 to colorize it. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask to the fan itself. You could use the spinner's down touch events to change the speed of the fan in an OFF > 1 > 2 > 3 > OFF style (consult the documentation of your home automation system how to do this based on MQTT messages). Here's another approach where the spinner discretely shows up behind the blades: 1 2 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"spinner\" , \"x\" : 68 , \"y\" : 91 , \"w\" : 105 , \"h\" : 105 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 32 , \"line_color10\" : \"orange\" , \"line_rounded10\" : 1 , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 1000 , \"value_str\" : 3 , \"value_ofs_y\" : 1 } { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"silver\" , \"image_recolor_opa\" : 120 } For fans in action, check out the fan and scent diffuser example for Home Assistant. Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Attribution Fan by WARPAINT Media Inc. from the Noun Project","title":"Code"},{"location":"examples/lovelace/","text":"Lovelace-like Entities ~ Layout ~ Code ~ To add an openHASP plate to your installation with a sample design looking a bit like Home Assistant's Lovelace UI: in the plate's web UI select Hasp Light UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"ENTITIES\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE004\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Presence override\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 40 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF020\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Front door light\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 23 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 74 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 103 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF054\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 113 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Back yard lights\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 110 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 138 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uEA7A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Trash service\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 43 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 6 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 173 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF39D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Selective trash\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 10 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 208 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE32A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Green energy active\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Yes :)\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 243 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE957\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Air quality\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"OK (29.58 \u00b5g/m\u00b3)\" , \"align\" : 2 , \"text_color\" : \"black\" } Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Check out the Lovelace cover example to learn how to bring life to the objects.","title":"Lovelace Entities"},{"location":"examples/lovelace/#lovelace-like-entities","text":"","title":"Lovelace-like Entities"},{"location":"examples/lovelace/#layout","text":"","title":"Layout"},{"location":"examples/lovelace/#code","text":"To add an openHASP plate to your installation with a sample design looking a bit like Home Assistant's Lovelace UI: in the plate's web UI select Hasp Light UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"ENTITIES\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE004\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Presence override\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 40 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF020\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Front door light\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 23 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 74 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 103 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF054\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 113 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Back yard lights\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 110 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 138 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uEA7A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Trash service\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 43 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 6 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 173 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF39D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Selective trash\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 10 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 208 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE32A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Green energy active\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Yes :)\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 243 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE957\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Air quality\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"OK (29.58 \u00b5g/m\u00b3)\" , \"align\" : 2 , \"text_color\" : \"black\" } Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Check out the Lovelace cover example to learn how to bring life to the objects.","title":"Code"},{"location":"examples/offlinehandling/","text":"Handle offline state ~ openHASP can detect the state when the plate is disconnected from the network. With Group ID object property combined with batch processing , objects on the screen can act on locally connected devices without using the home automation system - letting you use only these devices when the network is down. Prerequisites ~ In the use case presented below, the following assumptions are made: you have a plate with 2 local relays (configured on output GPIOs as lights), each relay added to a different group (Group 1 and 2 respectively). you want to have 2 toggle buttons on the screen acting directly on these relays when the plate is not yet, or disconnected from the WiFi network. No page navigation is needed as no other objects related to the home automation services have to be displayed. The buttons have the groupid property set to 1 and 2 respectively. Configuration ~ In the plate's web UI keep the default /pages.jsonl as Startup Layout. This will load immediately after plate boot, before the plate is connected to the network. If your network is not available after boot, this page configuration will be on screen while the plate keeps connecting in the background. pages.jsonl - loaded at boot, has only with objects related to local relays, and displays the hostname: 1 2 3 4 5 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 98 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 295 , \"w\" : 240 , \"align\" : \"center\" , \"text\" : \"%hostname%\" , \"text_color\" : \"#FFFFFF\" } You can use batch processing and create scripts which run when the plate connects to the WiFi network or loses connection from it. online.cmd - batch script to run after connected to the WiFi network, it will clear the screen and load the pages with objects related to the home automation: clearpage all run /pages_online.jsonl pages_online.jsonl - to be loaded after connected to the WiFi network: Put in pages_online.jsonl the main configuration for the pages you'd like to use when the plate is connected to the network and the home automation system. See integrations examples corresponding to the home automation system you have. Note If you use Home Assistant and opt to store the pages.jsonl file on the server, which will be loaded on start of Home Assistant, it will also be reloaded on plate becoming online. Don't put run /pages_online.jsonl in the script and don't need pages_online.jsonl either on the plate. offline.cmd - batch script to run when connection is lost from the WiFi network, it will clear the screen and load the page only with objects related to local relays: clearpage all run /pages_offline.jsonl pages_offline.jsonl - to be loaded after connection is lost to the WiFi network, has only with objects related to local relays: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"\\uE156\\uE5A9\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } Testing ~ Reboot the plate. First only the buttons related to local relays are shown, these act the relays. After the plate connects to the network, screen is cleared and home automation-related pages are loaded. Kill the WiFi network. Plate detects the disconnection from the network, thus screen is cleared and only the buttons related to local relays are shown, relays can be turned on and off. Restore the WiFi network. Plate reconnects to the network, screen is cleared and home automation-related pages are loaded back again.","title":"Handle Offline State"},{"location":"examples/offlinehandling/#handle-offline-state","text":"openHASP can detect the state when the plate is disconnected from the network. With Group ID object property combined with batch processing , objects on the screen can act on locally connected devices without using the home automation system - letting you use only these devices when the network is down.","title":"Handle offline state"},{"location":"examples/offlinehandling/#prerequisites","text":"In the use case presented below, the following assumptions are made: you have a plate with 2 local relays (configured on output GPIOs as lights), each relay added to a different group (Group 1 and 2 respectively). you want to have 2 toggle buttons on the screen acting directly on these relays when the plate is not yet, or disconnected from the WiFi network. No page navigation is needed as no other objects related to the home automation services have to be displayed. The buttons have the groupid property set to 1 and 2 respectively.","title":"Prerequisites"},{"location":"examples/offlinehandling/#configuration","text":"In the plate's web UI keep the default /pages.jsonl as Startup Layout. This will load immediately after plate boot, before the plate is connected to the network. If your network is not available after boot, this page configuration will be on screen while the plate keeps connecting in the background. pages.jsonl - loaded at boot, has only with objects related to local relays, and displays the hostname: 1 2 3 4 5 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 98 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 295 , \"w\" : 240 , \"align\" : \"center\" , \"text\" : \"%hostname%\" , \"text_color\" : \"#FFFFFF\" } You can use batch processing and create scripts which run when the plate connects to the WiFi network or loses connection from it. online.cmd - batch script to run after connected to the WiFi network, it will clear the screen and load the pages with objects related to the home automation: clearpage all run /pages_online.jsonl pages_online.jsonl - to be loaded after connected to the WiFi network: Put in pages_online.jsonl the main configuration for the pages you'd like to use when the plate is connected to the network and the home automation system. See integrations examples corresponding to the home automation system you have. Note If you use Home Assistant and opt to store the pages.jsonl file on the server, which will be loaded on start of Home Assistant, it will also be reloaded on plate becoming online. Don't put run /pages_online.jsonl in the script and don't need pages_online.jsonl either on the plate. offline.cmd - batch script to run when connection is lost from the WiFi network, it will clear the screen and load the page only with objects related to local relays: clearpage all run /pages_offline.jsonl pages_offline.jsonl - to be loaded after connection is lost to the WiFi network, has only with objects related to local relays: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"\\uE156\\uE5A9\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 }","title":"Configuration"},{"location":"examples/offlinehandling/#testing","text":"Reboot the plate. First only the buttons related to local relays are shown, these act the relays. After the plate connects to the network, screen is cleared and home automation-related pages are loaded. Kill the WiFi network. Plate detects the disconnection from the network, thus screen is cleared and only the buttons related to local relays are shown, relays can be turned on and off. Restore the WiFi network. Plate reconnects to the network, screen is cleared and home automation-related pages are loaded back again.","title":"Testing"},{"location":"examples/pagination/","text":"Pagination can be executed locally using the action attribute of the objects. The jsonl lines below will setup 3 buttons to the bottom of a 240x320 screen which will navigate back and forth between the pages: 1 2 3 { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"btn\" , \"action\" :{ \"down\" : \"page prev\" }, \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#2C3E50\" , \"text\" : \"\\uE141\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 2 , \"obj\" : \"btn\" , \"action\" :{ \"down\" : \"page back\" }, \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"bg_color\" : \"#2C3E50\" , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 3 , \"obj\" : \"btn\" , \"action\" :{ \"down\" : \"page next\" }, \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#2C3E50\" , \"text\" : \"\\uE142\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } The action can take any command . For example: 1 { \"page\" : 0 , \"id\" : 4 , \"x\" : 0 , \"y\" : 0 , \"obj\" : \"btn\" , \"action\" : { \"hold\" : \"restart\" }, \"text\" : \"\\uE456\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } Will restart the device on holding of the button object. Note : action has the format of \"action\": {\"<btn event>\": \"<command>\"} *btn events: are up , down , hold , release . Pagination can be also acomplished by enabling swipe gesture on certain objects. The jsonl line below will setup an invisible rectangle overlay at the top of the screen with enabled swipe : 1 { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"obj\" , \"swipe\" : 1 , \"x\" : 0 , \"y\" : 0 , \"h\" : 30 , \"w\" : 240 , \"opacity\" : 0 , \"comment\" : \"swipe-area-at-top\" } Tip You should put these lines to the end of your pages.jsonl config file, so that these objects remain at the top, and no others will be drawn on top of them. To limit page navigation only to page numbers between 1 and 6: 1 2 { \"page\" : 1 , \"id\" : 0 , \"prev\" : 6 } { \"page\" : 6 , \"id\" : 0 , \"next\" : 1 } You can create a main menu on page 1 like this: 1 2 3 { \"id\" : 1 , \"obj\" : \"btn\" , \"action\" : \"p2\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 200 , \"h\" : 40 , \"text\" : \"Doors+Windows\" , \"text_font\" : 32 } { \"id\" : 2 , \"obj\" : \"btn\" , \"action\" : \"p3\" , \"x\" : 10 , \"y\" : 65 , \"w\" : 200 , \"h\" : 40 , \"text\" : \"Weather\" , \"text_font\" : 32 } { \"id\" : 3 , \"obj\" : \"btn\" , \"action\" : \"p4\" , \"x\" : 10 , \"y\" : 140 , \"w\" : 200 , \"h\" : 40 , \"text\" : \"Lights\" , \"text_font\" : 32 } If you press on the Button Weather it jumps to page 3 ( \"action\": \"p3\" )","title":"Page Navigation"},{"location":"examples/surprise/","text":"Surprise ~ No screenshot available. To see the result, test the code! Code ~ Strictly for geeks: 1 2 3 { \"page\" : 0 , \"id\" : 60 , \"obj\" : \"obj\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 320 , \"radius\" : 0 , \"hidden\" : 0 , \"bg_grad_dir\" : 0 , \"bg_color\" : \"#0000bb\" } { \"page\" : 0 , \"id\" : 61 , \"obj\" : \"btn\" , \"x\" : 80 , \"y\" : 50 , \"w\" : 80 , \"h\" : 20 , \"text\" : \"openHASP\" , \"text_font\" : 16 , \"bg_color\" : \"gray\" , \"bg_grad_color\" : \"gray\" , \"text_color\" : \"white\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 0 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 80 , \"w\" : 240 , \"h\" : 220 , \"text\" : \"A fatal exception has ocured in MCU.\\nThe application will be terminated.\\n\\n\\uE40A Touch the screen to terminate it.\\n\\uE40A Press CTRL+ALT+DEL again to\\n restart your computer. You will lose\\n any unsaved information.\\n\\n Press any key to continue _\\n\" , \"text_color\" : \"white\" }","title":"Surprise"},{"location":"examples/surprise/#surprise","text":"No screenshot available. To see the result, test the code!","title":"Surprise"},{"location":"examples/surprise/#code","text":"Strictly for geeks: 1 2 3 { \"page\" : 0 , \"id\" : 60 , \"obj\" : \"obj\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 320 , \"radius\" : 0 , \"hidden\" : 0 , \"bg_grad_dir\" : 0 , \"bg_color\" : \"#0000bb\" } { \"page\" : 0 , \"id\" : 61 , \"obj\" : \"btn\" , \"x\" : 80 , \"y\" : 50 , \"w\" : 80 , \"h\" : 20 , \"text\" : \"openHASP\" , \"text_font\" : 16 , \"bg_color\" : \"gray\" , \"bg_grad_color\" : \"gray\" , \"text_color\" : \"white\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 0 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 80 , \"w\" : 240 , \"h\" : 220 , \"text\" : \"A fatal exception has ocured in MCU.\\nThe application will be terminated.\\n\\n\\uE40A Touch the screen to terminate it.\\n\\uE40A Press CTRL+ALT+DEL again to\\n restart your computer. You will lose\\n any unsaved information.\\n\\n Press any key to continue _\\n\" , \"text_color\" : \"white\" }","title":"Code"},{"location":"examples/widgets/","text":"Widgets Demo ~ Page Layout ~ Code ~ This is a real-world example of a pages.jsonl file. Upload it to your plate's flash memory and restart the plate: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 45 , \"w\" : 220 , \"h\" : 55 , \"toggle\" : true , \"text\" : \"Touch me \\uE96B\" , \"text_font\" : 32 } { \"id\" : 2 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 100 , \"w\" : 220 , \"h\" : 55 , \"text\" : \" My Checkbox\" } { \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 30 , \"text\" : \"\\uE75A My Label\" , \"align\" : 1 , \"padh\" : 50 } { \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 55 , \"radius\" : 40 , \"radius20\" : 40 } { \"id\" : 5 , \"obj\" : \"led\" , \"x\" : 22 , \"y\" : 220 , \"w\" : 55 , \"h\" : 55 } { \"id\" : 6 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 160 , \"w\" : 130 , \"options\" : \"\\uE40A Apples\\n\\uE40A Oranges\\n\\uE40A Bananas\" } { \"id\" : 7 , \"obj\" : \"spinner\" , \"x\" : 160 , \"y\" : 140 , \"w\" : 70 , \"h\" : 70 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"id\" : 1 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 280 , \"click\" : 0 } { \"id\" : 11 , \"obj\" : \"gauge\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 150 , \"h\" : 150 , \"val\" : 75 } { \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 130 , \"y\" : 120 , \"w\" : 100 , \"h\" : 100 , \"val\" : 32 } { \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 28 , \"y\" : 65 , \"w\" : 70 , \"h\" : 70 , \"parentid\" : 12 , \"text\" : \"\\uE12C OK\" } { \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 20 , \"y\" : 225 , \"w\" : 200 , \"h\" : 20 , \"val\" : 75 } { \"id\" : 15 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 254 , \"w\" : 200 , \"h\" : 20 , \"val\" : 25 } { \"comment\" : \"---------- Page 3 ----------\" } { \"page\" : 3 , \"id\" : 1 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 20 , \"y\" : 10 , \"w\" : 200 , \"h\" : 200 } { \"page\" : 3 , \"id\" : 2 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 30 , \"y\" : 230 , \"w\" : 200 , \"h\" : 30 } { \"page\" : 4 , \"comment\" : \"---------- Page 4 ----------\" } { \"id\" : 1 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 } { \"id\" : 10 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 1\" } { \"id\" : 20 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 2\" } { \"id\" : 30 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 3\" } { \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 40 , \"y\" : 10 , \"w\" : 160 , \"rows\" : 2 , \"options\" : \"2020\\n2021\\n2022\\n2023\\n2024\" , \"parentid\" : 10 } { \"id\" : 12 , \"obj\" : \"img\" , \"src\" : \"L:/logo-medium.png\" , \"x\" : 45 , \"y\" : 80 , \"auto_size\" : 1 , \"w\" : 150 , \"parentid\" : 10 } { \"comment\" : \"---------- All Pages ----------\" } { \"page\" : 0 , \"id\" : 7 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE141\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 8 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 9 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE142\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"comment\" : \"---------- Limit page prev/next between 1 and 4 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"prev\" : 4 } { \"page\" : 4 , \"id\" : 0 , \"next\" : 1 } Upload this logo to the plate to see the img object. Note Your MCU needs to have on-board PSram in order for the img object to be properly displayed.","title":"Widgets Demo"},{"location":"examples/widgets/#widgets-demo","text":"","title":"Widgets Demo"},{"location":"examples/widgets/#page-layout","text":"","title":"Page Layout"},{"location":"examples/widgets/#code","text":"This is a real-world example of a pages.jsonl file. Upload it to your plate's flash memory and restart the plate: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 45 , \"w\" : 220 , \"h\" : 55 , \"toggle\" : true , \"text\" : \"Touch me \\uE96B\" , \"text_font\" : 32 } { \"id\" : 2 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 100 , \"w\" : 220 , \"h\" : 55 , \"text\" : \" My Checkbox\" } { \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 30 , \"text\" : \"\\uE75A My Label\" , \"align\" : 1 , \"padh\" : 50 } { \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 55 , \"radius\" : 40 , \"radius20\" : 40 } { \"id\" : 5 , \"obj\" : \"led\" , \"x\" : 22 , \"y\" : 220 , \"w\" : 55 , \"h\" : 55 } { \"id\" : 6 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 160 , \"w\" : 130 , \"options\" : \"\\uE40A Apples\\n\\uE40A Oranges\\n\\uE40A Bananas\" } { \"id\" : 7 , \"obj\" : \"spinner\" , \"x\" : 160 , \"y\" : 140 , \"w\" : 70 , \"h\" : 70 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"id\" : 1 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 280 , \"click\" : 0 } { \"id\" : 11 , \"obj\" : \"gauge\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 150 , \"h\" : 150 , \"val\" : 75 } { \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 130 , \"y\" : 120 , \"w\" : 100 , \"h\" : 100 , \"val\" : 32 } { \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 28 , \"y\" : 65 , \"w\" : 70 , \"h\" : 70 , \"parentid\" : 12 , \"text\" : \"\\uE12C OK\" } { \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 20 , \"y\" : 225 , \"w\" : 200 , \"h\" : 20 , \"val\" : 75 } { \"id\" : 15 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 254 , \"w\" : 200 , \"h\" : 20 , \"val\" : 25 } { \"comment\" : \"---------- Page 3 ----------\" } { \"page\" : 3 , \"id\" : 1 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 20 , \"y\" : 10 , \"w\" : 200 , \"h\" : 200 } { \"page\" : 3 , \"id\" : 2 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 30 , \"y\" : 230 , \"w\" : 200 , \"h\" : 30 } { \"page\" : 4 , \"comment\" : \"---------- Page 4 ----------\" } { \"id\" : 1 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 } { \"id\" : 10 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 1\" } { \"id\" : 20 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 2\" } { \"id\" : 30 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 3\" } { \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 40 , \"y\" : 10 , \"w\" : 160 , \"rows\" : 2 , \"options\" : \"2020\\n2021\\n2022\\n2023\\n2024\" , \"parentid\" : 10 } { \"id\" : 12 , \"obj\" : \"img\" , \"src\" : \"L:/logo-medium.png\" , \"x\" : 45 , \"y\" : 80 , \"auto_size\" : 1 , \"w\" : 150 , \"parentid\" : 10 } { \"comment\" : \"---------- All Pages ----------\" } { \"page\" : 0 , \"id\" : 7 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE141\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 8 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 9 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE142\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"comment\" : \"---------- Limit page prev/next between 1 and 4 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"prev\" : 4 } { \"page\" : 4 , \"id\" : 0 , \"next\" : 1 } Upload this logo to the plate to see the img object. Note Your MCU needs to have on-board PSram in order for the img object to be properly displayed.","title":"Code"},{"location":"firmware/","text":"Getting Started ~ openHASP currently supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended development boards and a TFT touchscreen to get you up-and-running in no time. Recommended Boards ~ table th:first-of-type { width: 12%; } table th:nth-of-type(2) { width: 22%; } table th:nth-of-type(3) { width: 22%; } table th:nth-of-type(4) { width: 22%; } table th:last-of-type { width: 22%; } Basic Standard Capacity Dev. Board* D1 mini ESP32 TTGO T7 v1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER CPU Freq. 240Mhz 240Mhz 240Mhz Ram 520Kb 520Kb 520Kb PSRam no yes yes Flash 4MB 4MB or 16MB 16MB Display ILI9341 SPI ILI9341 SPI ILI9341 SPI Touch XPT2046 SPI XPT2046 SPI XPT2046 SPI Network Wi-Fi Wi-Fi Wi-Fi Firmware Download Download Download Note Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries. For new projects we recommend ESP32-WROVER boards with PSram and minimal 8MB of flash. Tip Advanced users can build and compile custom hardware configurations using PlatformIO locally or online with Gitpod , however this is not currently supported. Recommended Display ~ Lolin TFT 2.4\" ~ ILI9341 SPI touchscreens with backlight dimming via PWM are quite cheap to get. An ILI9341 TFT display with SPI is required when using a pre-built binary. The touch controller needs to be the XPT2046 Resistive Touch driver. The Lolin TFT 2.4\" is plug-and-play with the 3 recommended ESP development boards. If you have another ESP or MCU, you can still use this display using jumper cables. You can also solder a row of headers at the bottom of the display to plug it into a breadboard. Therefor the Lolin TFT 2.4 Touch Shield is used as the development display of choice. Backlight Control ~ To use PWM dimming on the Lolin TFT 2.4\" you must connect the TFT-LED pin to either D1, D2 or D4. D1 is recommended for backlight control and configured by default. Do not use D3 for backlight control because it is already in use for touch! It is not recommended to use D4 for backlight control because it is already in use for PSram on the ESP32-Wrover. The D1-mini has D4 connected to on-board LED and boot fails if pulled LOW Compatible ESP boards ~ The Lolin TFT 2.4\" header is plug-and-play compatible with these development boards, no need to use any jumper cables: ESP32: Wemos D1 Mini ESP32 ( only solder the inner row of pin headers) TTGO T7 V1.5 MINI32 ESP32 ( only solder the inner row of pin headers) LOLIN D32 Pro V2.0.0 using an additional TFT cable ESP32-S2: Wemos S2 Mini ESP32-S2 ( only solder the outer row of pin headers) Note If you have a Lolin TFT 2.4\" Display and a compatible ESP development board, you have all the hardware that is needed. In that case you can skip ahead to the Firmware Installation . Alternative SPI Display ~ Any common ILI9341 320x240 4-wire SPI touchscreen with XPT2046 Resistive Touch driver can be used, like: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 You will need to connect the GPIO pins using jumper wires. Ready-made devices ~ Some manufacturers offer IoT devices which are ready to go with openHASP: ESP32-Touchdown FreeTouchDeck Lanbon L8","title":"Getting Started"},{"location":"firmware/#getting-started","text":"openHASP currently supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended development boards and a TFT touchscreen to get you up-and-running in no time.","title":"Getting Started"},{"location":"firmware/#recommended-boards","text":"table th:first-of-type { width: 12%; } table th:nth-of-type(2) { width: 22%; } table th:nth-of-type(3) { width: 22%; } table th:nth-of-type(4) { width: 22%; } table th:last-of-type { width: 22%; } Basic Standard Capacity Dev. Board* D1 mini ESP32 TTGO T7 v1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER CPU Freq. 240Mhz 240Mhz 240Mhz Ram 520Kb 520Kb 520Kb PSRam no yes yes Flash 4MB 4MB or 16MB 16MB Display ILI9341 SPI ILI9341 SPI ILI9341 SPI Touch XPT2046 SPI XPT2046 SPI XPT2046 SPI Network Wi-Fi Wi-Fi Wi-Fi Firmware Download Download Download Note Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries. For new projects we recommend ESP32-WROVER boards with PSram and minimal 8MB of flash. Tip Advanced users can build and compile custom hardware configurations using PlatformIO locally or online with Gitpod , however this is not currently supported.","title":"Recommended Boards"},{"location":"firmware/#recommended-display","text":"","title":"Recommended Display"},{"location":"firmware/#lolin-tft-24","text":"ILI9341 SPI touchscreens with backlight dimming via PWM are quite cheap to get. An ILI9341 TFT display with SPI is required when using a pre-built binary. The touch controller needs to be the XPT2046 Resistive Touch driver. The Lolin TFT 2.4\" is plug-and-play with the 3 recommended ESP development boards. If you have another ESP or MCU, you can still use this display using jumper cables. You can also solder a row of headers at the bottom of the display to plug it into a breadboard. Therefor the Lolin TFT 2.4 Touch Shield is used as the development display of choice.","title":"Lolin TFT 2.4\""},{"location":"firmware/#compatible-esp-boards","text":"The Lolin TFT 2.4\" header is plug-and-play compatible with these development boards, no need to use any jumper cables: ESP32: Wemos D1 Mini ESP32 ( only solder the inner row of pin headers) TTGO T7 V1.5 MINI32 ESP32 ( only solder the inner row of pin headers) LOLIN D32 Pro V2.0.0 using an additional TFT cable ESP32-S2: Wemos S2 Mini ESP32-S2 ( only solder the outer row of pin headers) Note If you have a Lolin TFT 2.4\" Display and a compatible ESP development board, you have all the hardware that is needed. In that case you can skip ahead to the Firmware Installation .","title":"Compatible ESP boards"},{"location":"firmware/#alternative-spi-display","text":"Any common ILI9341 320x240 4-wire SPI touchscreen with XPT2046 Resistive Touch driver can be used, like: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 You will need to connect the GPIO pins using jumper wires.","title":"Alternative SPI Display"},{"location":"firmware/#ready-made-devices","text":"Some manufacturers offer IoT devices which are ready to go with openHASP: ESP32-Touchdown FreeTouchDeck Lanbon L8","title":"Ready-made devices"},{"location":"firmware/esp32/","text":"Flash ESP32 ~ Online Installation ~ With Chrome or Edge you can flash the ESP32 directly from within the browser window using the openHASP Web installer . for releases, Dev/Beta use openHASP Web installer Nightly . If you have another browser then use the offline flash tools below to download and flash the ESP32. Download Firmware ~ Download the latest openHASP binaries from the openHASP Web installer or GitHub Releases page. You need to pick the correct binary files for your device: Get the full binary file for flashing over the serial port: e.g. d1-mini-esp32_ili9341_full_4MB_v0.7.0-rc9.bin Get the ota binary file for updating the firmware from the Web UI: e.g. d1-mini-esp32_ili9341_ota_v0.7.0-rc9.bin Note You can also download the nightly openHASP development .zip files from the Actions tab on Github. Select one of the latest \"workflows\" and scroll down to find zip files. You need to be logged in to download the firmware files. Flash ESP32 ~ Important When flashing openHASP onto the ESP32 for the first time, you need to flash it over serial using the full firmware binary file. You need to write the full binary to the ESP32 flash chip at address 0x0 . The full binary also contains a bootloader and partition scheme needed to properly boot the ESP32. Before starting the flash process you have to put the ESP into flash mode : Connect GPIO0 to GND before booting the device Power-on or reset the ESP32 while GPIO0 is connected to GND Start the flash process The actual procedure to flash the ESP32 depends on the tool used. Click on the tab below that matches your flash tool. Note ESPHome Flasher cannot flash the openHASP binary. Use one of the other tools below instead. ESPtool.py Tasmota-PyFlasher ESP Flash Tools 1 2 esptool.py --port COM1 erase_flash esptool.py --port COM1 --baud 921600 write_flash 0x0 d1-mini-esp32_ili9341_full_4MB_<version>.bin Change COM1 to the correct port on your computer. If you get an error at the end of the flash procedure, you can try with a lower the baudrate eg. 460800. Tasmota-PyFlasher is a simple GUI tool for flashing ESP32 firmware without any installation. Change COM7 to the correct port on your computer. Espressif provides their own Flash Download Tools for Windows. Change COM90 to the correct port on your computer.","title":"Flash ESP32"},{"location":"firmware/esp32/#flash-esp32","text":"","title":"Flash ESP32"},{"location":"firmware/esp32/#online-installation","text":"With Chrome or Edge you can flash the ESP32 directly from within the browser window using the openHASP Web installer . for releases, Dev/Beta use openHASP Web installer Nightly . If you have another browser then use the offline flash tools below to download and flash the ESP32.","title":"Online Installation"},{"location":"firmware/esp32/#download-firmware","text":"Download the latest openHASP binaries from the openHASP Web installer or GitHub Releases page. You need to pick the correct binary files for your device: Get the full binary file for flashing over the serial port: e.g. d1-mini-esp32_ili9341_full_4MB_v0.7.0-rc9.bin Get the ota binary file for updating the firmware from the Web UI: e.g. d1-mini-esp32_ili9341_ota_v0.7.0-rc9.bin Note You can also download the nightly openHASP development .zip files from the Actions tab on Github. Select one of the latest \"workflows\" and scroll down to find zip files. You need to be logged in to download the firmware files.","title":"Download Firmware"},{"location":"firmware/esp32/#flash-esp32_1","text":"Important When flashing openHASP onto the ESP32 for the first time, you need to flash it over serial using the full firmware binary file. You need to write the full binary to the ESP32 flash chip at address 0x0 . The full binary also contains a bootloader and partition scheme needed to properly boot the ESP32. Before starting the flash process you have to put the ESP into flash mode : Connect GPIO0 to GND before booting the device Power-on or reset the ESP32 while GPIO0 is connected to GND Start the flash process The actual procedure to flash the ESP32 depends on the tool used. Click on the tab below that matches your flash tool. Note ESPHome Flasher cannot flash the openHASP binary. Use one of the other tools below instead. ESPtool.py Tasmota-PyFlasher ESP Flash Tools 1 2 esptool.py --port COM1 erase_flash esptool.py --port COM1 --baud 921600 write_flash 0x0 d1-mini-esp32_ili9341_full_4MB_<version>.bin Change COM1 to the correct port on your computer. If you get an error at the end of the flash procedure, you can try with a lower the baudrate eg. 460800. Tasmota-PyFlasher is a simple GUI tool for flashing ESP32 firmware without any installation. Change COM7 to the correct port on your computer. Espressif provides their own Flash Download Tools for Windows. Change COM90 to the correct port on your computer.","title":"Flash ESP32"},{"location":"firmware/faq/","text":"Frequently Asked Questions ~ What is the difference between openHASP and HASPone ~ HASPone uses a d1-mini ESP8266 connected to a Nextion/TJC smart display via the serial port. HASPone is the go-to firmware for using a Nextion/TJC screen in your Home Automation setup. openHASP does not support Nextion/TJC displays because it needs to be able to drive the display directly. It was created specifically to eliminate the proprietary hardware and take control of the screen. So openHASP is a hard fork of the original HASwitchPlate project to run on open hardware. The display stays white ~ The good news is the backlight is working, but a white screen is typical of a problem with the pin assignment (software config) or wiring (hardware): Check the serial log when the plate boots and look for the TFT pin assignments. The configured GPIOs must match the connections on the display. If the pin configuration is OK then the next step is checking the connection from the ESP to the display: Check the solder connections or jumper wires for bad connections or shorts Test with a multi-meter if there is a good connection from the ESP pins to the display pins Try disconnecting the wires from the touch device and only test the display first Error: The firmware binary is invalid (magic byte=FF, should be E9) ~ ESPhome-Flasher does not recognize the openHASP full binary firmware correctly. It expects the firmware to be written to address 0x10000 and will throw a \"magic byte error\". The openHASP full binary is meant to be flashed to address 0x0 instead. Use ESPtool, Flash Download Tools or Tasmota-PyFlasher. Other question ~ For support using openHASP please find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum","title":"FAQ"},{"location":"firmware/faq/#frequently-asked-questions","text":"","title":"Frequently Asked Questions"},{"location":"firmware/faq/#what-is-the-difference-between-openhasp-and-haspone","text":"HASPone uses a d1-mini ESP8266 connected to a Nextion/TJC smart display via the serial port. HASPone is the go-to firmware for using a Nextion/TJC screen in your Home Automation setup. openHASP does not support Nextion/TJC displays because it needs to be able to drive the display directly. It was created specifically to eliminate the proprietary hardware and take control of the screen. So openHASP is a hard fork of the original HASwitchPlate project to run on open hardware.","title":"What is the difference between openHASP and HASPone"},{"location":"firmware/faq/#the-display-stays-white","text":"The good news is the backlight is working, but a white screen is typical of a problem with the pin assignment (software config) or wiring (hardware): Check the serial log when the plate boots and look for the TFT pin assignments. The configured GPIOs must match the connections on the display. If the pin configuration is OK then the next step is checking the connection from the ESP to the display: Check the solder connections or jumper wires for bad connections or shorts Test with a multi-meter if there is a good connection from the ESP pins to the display pins Try disconnecting the wires from the touch device and only test the display first","title":"The display stays white"},{"location":"firmware/faq/#error-the-firmware-binary-is-invalid-magic-byteff-should-be-e9","text":"ESPhome-Flasher does not recognize the openHASP full binary firmware correctly. It expects the firmware to be written to address 0x10000 and will throw a \"magic byte error\". The openHASP full binary is meant to be flashed to address 0x0 instead. Use ESPtool, Flash Download Tools or Tasmota-PyFlasher.","title":"Error: The firmware binary is invalid (magic byte=FF, should be E9)"},{"location":"firmware/faq/#other-question","text":"For support using openHASP please find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum","title":"Other question"},{"location":"firmware/firmware-update/","text":"Firmware Update ~ Warning The partition layout of openHASP 0.7.0 has changed! Follow the Serial Update procedure if you are running v0.6.x. Over-The-Air ~ When openHASP 0.7.x is already running on the device you can upgrade the firmware from the Web UI. For Over-The-Air updates you need to use the ota binary files. HTTP Upload ~ Click 'Browse' to select the ota file from your computer and click 'Update Firmware'. The 'Target' should be 'Firmware'. HTTP Update ~ You can also enter the ota URL to download new firmware from a webserver on your network or from the internet. Both http and https links are supported but using https is recommended for additinal security. Some content providers -like Github- redirect links to a server which is closest to you. For safety reasons openHASP will not follow these redirect headers by default. This behaviour can be changed by setting 'Follow Redirects' to either 'Strict' or 'Always': Strict adheres to RFC2616 and only follows redirects using GET or HEAD methods Always will follow all redirects regardless of a used method, which is less secure Note You can also trigger an upgrade using the update command from the Serial console, telnet or MQTT. Arduino OTA ~ When you are developing locally it can be useful to update a plate Over-The-Air using Arduino OTA. The Arduino OTA service is not enabled in the official releases. For this option to work, the firmware has to be compiled with HASP_USE_ARDUINOOTA=1 enabled in include/user_config_override.h . Then update the platformio_override.ini with the IP address instead of a serial port: [env:lanbon_l8] ; upload_port = COM3 ; Disable serial upload ; monitor_port = COM3 ; Disable serial upload upload_protocol = espota ; Use Arduino OTA to flash the firmware over-the-air upload_port = 192.168.7.89 ; Specify the IP of the ESP upload_flags = --auth = haspadmin ; optional OTA password, none by default --port = 3232 ; optional remote port on the ESP, 3232 by default --host_port = 45678 ; optional local port for access through the firewall Serial Update ~ Warning Devices coming from 0.6.x with 4MB flash will be reformatted and loose all data!!! Devices with 8MB flash or more should retain the filesystem and user configuration. It is important to first make a full backup of the device: Download the files from the filesystem to your PC. Create a full backup of the flash chip using esptool.py Flash a full binary file onto the ESP32. The procedure is the same as the initial installation. Do not erase the flash first in this situation because that will destroy all files and settings!","title":"Firmware Update"},{"location":"firmware/firmware-update/#firmware-update","text":"Warning The partition layout of openHASP 0.7.0 has changed! Follow the Serial Update procedure if you are running v0.6.x.","title":"Firmware Update"},{"location":"firmware/firmware-update/#over-the-air","text":"When openHASP 0.7.x is already running on the device you can upgrade the firmware from the Web UI. For Over-The-Air updates you need to use the ota binary files.","title":"Over-The-Air"},{"location":"firmware/firmware-update/#http-upload","text":"Click 'Browse' to select the ota file from your computer and click 'Update Firmware'. The 'Target' should be 'Firmware'.","title":"HTTP Upload"},{"location":"firmware/firmware-update/#http-update","text":"You can also enter the ota URL to download new firmware from a webserver on your network or from the internet. Both http and https links are supported but using https is recommended for additinal security. Some content providers -like Github- redirect links to a server which is closest to you. For safety reasons openHASP will not follow these redirect headers by default. This behaviour can be changed by setting 'Follow Redirects' to either 'Strict' or 'Always': Strict adheres to RFC2616 and only follows redirects using GET or HEAD methods Always will follow all redirects regardless of a used method, which is less secure Note You can also trigger an upgrade using the update command from the Serial console, telnet or MQTT.","title":"HTTP Update"},{"location":"firmware/firmware-update/#arduino-ota","text":"When you are developing locally it can be useful to update a plate Over-The-Air using Arduino OTA. The Arduino OTA service is not enabled in the official releases. For this option to work, the firmware has to be compiled with HASP_USE_ARDUINOOTA=1 enabled in include/user_config_override.h . Then update the platformio_override.ini with the IP address instead of a serial port: [env:lanbon_l8] ; upload_port = COM3 ; Disable serial upload ; monitor_port = COM3 ; Disable serial upload upload_protocol = espota ; Use Arduino OTA to flash the firmware over-the-air upload_port = 192.168.7.89 ; Specify the IP of the ESP upload_flags = --auth = haspadmin ; optional OTA password, none by default --port = 3232 ; optional remote port on the ESP, 3232 by default --host_port = 45678 ; optional local port for access through the firewall","title":"Arduino OTA"},{"location":"firmware/firmware-update/#serial-update","text":"Warning Devices coming from 0.6.x with 4MB flash will be reformatted and loose all data!!! Devices with 8MB flash or more should retain the filesystem and user configuration. It is important to first make a full backup of the device: Download the files from the filesystem to your PC. Create a full backup of the flash chip using esptool.py Flash a full binary file onto the ESP32. The procedure is the same as the initial installation. Do not erase the flash first in this situation because that will destroy all files and settings!","title":"Serial Update"},{"location":"firmware/license/","text":"License ~ MIT License ~ openHASP is Copyright\u00a9 2019-2023 fvanroie, openhasp.com and contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Components ~ openHASP is building upon the existing work of the following open source developers: Core ~ HASwitchPlate , the original Arduino project, Copyright\u00a9 2019 Allen Derusha. HASwitchPlate is distributed under the terms of the MIT License . LVGL , Copyright\u00a9 2021 LVGL Kft LVGL is distributed under the terms of the MIT License . ArduinoJson , Copyright\u00a9 2014-2021 Benoit BLANCHON MIT License . MCU ~ LovyanGFX , Copyright\u00a9 2020 lovyan03 ( https://github.com/lovyan03 ) All rights reserved. LovyanGFX is distributed under the terms of the FreeBSD License TFT_eSPI , Copyright\u00a9 2020 Bodmer ( https://github.com/Bodmer ) All rights reserved. TFT_eSPI is distributed under the terms of the FreeBSD License Adafruit_GFX library , Copyright\u00a9 2012 Adafruit Industries All rights reserved. Adafruit_GFX is distributed under the terms of the BSD License PubSubClient Copyright\u00a9 2008-2020 Nicholas O'Leary MIT License . Logging engine is based on ArduinoLog , Copyright\u00a9 2017,2018 Thijs Elenbaas, MrRobot62, rahuldeo2047, NOX73, dhylands, Josha blemasle, mfalkvidd with modifications by fvanroie, netwize.be. ArduinoLog is distributed under the terms of the MIT License . QR Code generator Copyright\u00a9 Project Nayuki MIT License . AceButton Copyright\u00a9 2018 Brian T. Park MIT License . ArduinoStreamUtils Copyright\u00a9 2019 Benoit BLANCHON MIT License . Native Applications ~ paho.mqtt.c client library Copyright\u00a9 Eclipse Foundation Paho is distributed under the terms of the Eclipse Public License v2.0 Simple DirectMedia Layer library Copyright\u00a9 1997-2021 Sam Lantinga slouken@libsdl.org SDL 2.0 and newer are available under the zlib license Native Windows Application ~ mingw-w64 GCC for Windows 64 & 32 bits Copyright\u00a9 2009 - 2013 by the mingw-w64 project Mingw-w64 is free software and permissively-licensed. The details are located in the sources themselves. Website ~ Built with Material for MkDocs Copyright \u00a9 2016-2021 Martin Donath MIT License . Assets ~ Built-in font unscii (8pt) Copyright\u00a9 viznut. A public domain bitmapped Unicode font Built-in fonts use rasterized glyphs from the Roboto Consensed font Copyright\u00a9 2011 Google Inc. All Rights Reserved. Roboto Consensed is licensed under the Apache License, Version 2.0 . The built-in fonts, bootscreen, web UI and website all use the MaterialDesign Icons font, MaterialDesign Icons are licensed under the Apache License, Version 2.0 . The website incorporates Font Awesome , Copyright\u00a9 2017 Dave Gandy. Font Awesome is distributed under the terms of the SIL OFL 1.1 and MIT License .","title":"License"},{"location":"firmware/license/#license","text":"","title":"License"},{"location":"firmware/license/#mit-license","text":"openHASP is Copyright\u00a9 2019-2023 fvanroie, openhasp.com and contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","title":"MIT License"},{"location":"firmware/license/#components","text":"openHASP is building upon the existing work of the following open source developers:","title":"Components"},{"location":"firmware/license/#core","text":"HASwitchPlate , the original Arduino project, Copyright\u00a9 2019 Allen Derusha. HASwitchPlate is distributed under the terms of the MIT License . LVGL , Copyright\u00a9 2021 LVGL Kft LVGL is distributed under the terms of the MIT License . ArduinoJson , Copyright\u00a9 2014-2021 Benoit BLANCHON MIT License .","title":"Core"},{"location":"firmware/license/#mcu","text":"LovyanGFX , Copyright\u00a9 2020 lovyan03 ( https://github.com/lovyan03 ) All rights reserved. LovyanGFX is distributed under the terms of the FreeBSD License TFT_eSPI , Copyright\u00a9 2020 Bodmer ( https://github.com/Bodmer ) All rights reserved. TFT_eSPI is distributed under the terms of the FreeBSD License Adafruit_GFX library , Copyright\u00a9 2012 Adafruit Industries All rights reserved. Adafruit_GFX is distributed under the terms of the BSD License PubSubClient Copyright\u00a9 2008-2020 Nicholas O'Leary MIT License . Logging engine is based on ArduinoLog , Copyright\u00a9 2017,2018 Thijs Elenbaas, MrRobot62, rahuldeo2047, NOX73, dhylands, Josha blemasle, mfalkvidd with modifications by fvanroie, netwize.be. ArduinoLog is distributed under the terms of the MIT License . QR Code generator Copyright\u00a9 Project Nayuki MIT License . AceButton Copyright\u00a9 2018 Brian T. Park MIT License . ArduinoStreamUtils Copyright\u00a9 2019 Benoit BLANCHON MIT License .","title":"MCU"},{"location":"firmware/license/#native-applications","text":"paho.mqtt.c client library Copyright\u00a9 Eclipse Foundation Paho is distributed under the terms of the Eclipse Public License v2.0 Simple DirectMedia Layer library Copyright\u00a9 1997-2021 Sam Lantinga slouken@libsdl.org SDL 2.0 and newer are available under the zlib license","title":"Native Applications"},{"location":"firmware/license/#website","text":"Built with Material for MkDocs Copyright \u00a9 2016-2021 Martin Donath MIT License .","title":"Website"},{"location":"firmware/license/#assets","text":"Built-in font unscii (8pt) Copyright\u00a9 viznut. A public domain bitmapped Unicode font Built-in fonts use rasterized glyphs from the Roboto Consensed font Copyright\u00a9 2011 Google Inc. All Rights Reserved. Roboto Consensed is licensed under the Apache License, Version 2.0 . The built-in fonts, bootscreen, web UI and website all use the MaterialDesign Icons font, MaterialDesign Icons are licensed under the Apache License, Version 2.0 . The website incorporates Font Awesome , Copyright\u00a9 2017 Dave Gandy. Font Awesome is distributed under the terms of the SIL OFL 1.1 and MIT License .","title":"Assets"},{"location":"firmware/wifi-setup/","text":"Wi-Fi Setup ~ At first boot, when no Wi-Fi setup is found, the device will create an initial Access Point for configuring the device. If the touchscreen is properly connected it will display a QR code, along with a temporary SSID and password, to connect to the device. Advanced Users To skip this step, Wi-Fi credentials can be saved into the .bin file when you compile the firmware yourself using customization . Either use the touchscreen interface or connect via a web browser to setup the credentials for your local Wi-Fi access point: Using Touchscreen ~ Tap on the screen to start a Touch Calibration sequence: Precisely touch the 4 corners as indicated Use the on-screen keyboard to enter your local SSID and password Tap on the Checkmark button in the lower righthand corner to save the settings The device will validate the entered credentials and reboot if they are correct. Using Wi-Fi Access-Point ~ Connect to the temporary Access Point by scanning the QR on the display, if available. Or Check the serial log for the SSID and password to connect. Once connected, your browser should automatically connect to http://192.168.4.1 (captive portal address) Enter your local SSID and password for joining the device to your wireless network Click Save Settings The device will automatically reboot and connect to your wireless LAN Using Command line ~ You can also directly configure the Wi-Fi settings via the serial console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Wi-Fi Setup"},{"location":"firmware/wifi-setup/#wi-fi-setup","text":"At first boot, when no Wi-Fi setup is found, the device will create an initial Access Point for configuring the device. If the touchscreen is properly connected it will display a QR code, along with a temporary SSID and password, to connect to the device. Advanced Users To skip this step, Wi-Fi credentials can be saved into the .bin file when you compile the firmware yourself using customization . Either use the touchscreen interface or connect via a web browser to setup the credentials for your local Wi-Fi access point:","title":"Wi-Fi Setup"},{"location":"firmware/wifi-setup/#using-touchscreen","text":"Tap on the screen to start a Touch Calibration sequence: Precisely touch the 4 corners as indicated Use the on-screen keyboard to enter your local SSID and password Tap on the Checkmark button in the lower righthand corner to save the settings The device will validate the entered credentials and reboot if they are correct.","title":"Using Touchscreen"},{"location":"firmware/wifi-setup/#using-wi-fi-access-point","text":"Connect to the temporary Access Point by scanning the QR on the display, if available. Or Check the serial log for the SSID and password to connect. Once connected, your browser should automatically connect to http://192.168.4.1 (captive portal address) Enter your local SSID and password for joining the device to your wireless network Click Save Settings The device will automatically reboot and connect to your wireless LAN","title":"Using Wi-Fi Access-Point"},{"location":"firmware/wifi-setup/#using-command-line","text":"You can also directly configure the Wi-Fi settings via the serial console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Using Command line"},{"location":"firmware/compiling/custom/","text":"Custom Code ~ To add your own custom code in the src/custom directory, you need to enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h . You can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop. Available Hooks ~ Create a file src/my_custom.h that defines all these custom hooks: src/my_custom.h #ifndef HASP_CUSTOM_H #define HASP_CUSTOM_H #if defined(HASP_USE_CUSTOM) #include \"hasplib.h\" void custom_setup (); void custom_loop (); void custom_every_second (); void custom_every_5seconds (); bool custom_pin_in_use ( uint8_t pin ); void custom_get_sensors ( JsonDocument & doc ); void custom_topic_payload ( const char * topic , const char * payload , uint8_t source ); #endif // HASP_USE_CUSTOM #endif // HASP_CUSTOM_H The custom_setup() function is called at boot. Use it to initialize variables, load libraries, configure GPIOs or sensors. The custom_loop() function is called every itteration of the main loop, much like the Arduino loop() function. It is very important to make the execution of this function very efficient without using any blocking code or delay() . Otherwise it will have an impact on the UI responsiveness and/or other time-sensitive code. custom_every_second() and custom_every_5seconds() functions are called every second and every 5 seconds respectively. You can use these to execute non-time-critical code. The function custom_pin_in_use() is used to indicate that a pin is in use. Return true if the pin used by your custom code. Use custom_get_sensors() to add a sensor key and value to the periodic sensor MQTT messages. The function is called every 30 seconds by default, but the teleperiod interval can be changed by the user. The doc variable is passed so you can add your JSON object too it. (see below) With custom_topic_payload() you can receive custom topic & payload messages. You can use the value of the topic and payload variables to set LVGL attributes or perform custom actions. source indicates the module from wich the command is received. ( TAG_MQTT , TAG_CONS , TAG_TELN , TAG_HTTP , ...) Customize functions ~ In src/my_custom.cpp you add the code to execute for each of the functions declared above. Setup ~ We keep a variable for tracking the last blink time. my_custom.h 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include \"hasplib.h\" #if defined(HASP_USE_CUSTOM) && true // <-- set this to true in your code #include \"hasp_debug.h\" #include \"custom/my_custom.h\" unsigned long last_blink = 0 ; bool blink_state = LOW ; void custom_setup () { // Initialization code here last_blink = millis (); pinMode ( LED_BUILTIN , OUTPUT ); randomSeed ( millis ()); } Loops ~ Next, check the time past since the last blink. This should execute very fast, do not use delay() or any blocking code. 9 10 11 12 13 14 15 16 17 18 19 20 21 void custom_loop () { // Non-blocking code here! if ( blink_speed && ( millis () - last_blink > blink_speed )) { if ( blink_state == LOW ) { blink_state = HIGH ; } else { blink_state = LOW ; } digitalWrite ( LED_BUILTIN , blink_state ); last_blink = millis (); } } We don't execute code at fixed intervals, so leave these functions blank: 29 30 31 32 33 34 35 36 37 void custom_every_second () { // Unused } void custom_every_5seconds () { // Unused } Declare pins ~ We need to tell the firmware which custom pins we have used: 18 19 20 21 22 23 24 25 26 27 bool custom_pin_in_use ( uint8_t pin ) { switch ( pin ) { case LED_BUILTIN : // Custom LED pin case 6 : // Custom Input pin return true ; default : return false ; } } Report Sensors ~ Here we can add data to the sensors MQTT messages that are sent periodically. You can add a simple Key-Value pair or a more complex JSON object if needed. void custom_get_sensors ( JsonDocument & doc ) { JsonObject sensor = doc . createNestedObject ( F ( \"Temperature\" )); // Add Key sensor [ F ( \"Temperature\" )] = random ( 256 ); // Set Value } Debug Output ~ By including #include \"hasp_debug.h\" we can also utilize LOG_*() functions to print debug output to the console: LOG_VERBOSE(TAG_CUSTOM, message [, args]) LOG_NOTICE(TAG_CUSTOM, message [, args]) LOG_TRACE(TAG_CUSTOM, message [, args]) LOG_ERROR(TAG_CUSTOM, message [, args]) MQTT Output ~ Use dispatch_state_subtopic(topic, payload) to send an MQTT message and payload to hasp/<plate>/state/topic . 1 2 3 4 5 void custom_every_5seconds () { LOG_VERBOSE ( TAG_CUSTOM , \"%d seconds have passsed...\" , 5 ); dispatch_state_subtopic ( \"my_topic\" , \"{ \\\" test \\\" :123}\" ); }","title":"Custom Code"},{"location":"firmware/compiling/custom/#custom-code","text":"To add your own custom code in the src/custom directory, you need to enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h . You can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop.","title":"Custom Code"},{"location":"firmware/compiling/custom/#available-hooks","text":"Create a file src/my_custom.h that defines all these custom hooks: src/my_custom.h #ifndef HASP_CUSTOM_H #define HASP_CUSTOM_H #if defined(HASP_USE_CUSTOM) #include \"hasplib.h\" void custom_setup (); void custom_loop (); void custom_every_second (); void custom_every_5seconds (); bool custom_pin_in_use ( uint8_t pin ); void custom_get_sensors ( JsonDocument & doc ); void custom_topic_payload ( const char * topic , const char * payload , uint8_t source ); #endif // HASP_USE_CUSTOM #endif // HASP_CUSTOM_H The custom_setup() function is called at boot. Use it to initialize variables, load libraries, configure GPIOs or sensors. The custom_loop() function is called every itteration of the main loop, much like the Arduino loop() function. It is very important to make the execution of this function very efficient without using any blocking code or delay() . Otherwise it will have an impact on the UI responsiveness and/or other time-sensitive code. custom_every_second() and custom_every_5seconds() functions are called every second and every 5 seconds respectively. You can use these to execute non-time-critical code. The function custom_pin_in_use() is used to indicate that a pin is in use. Return true if the pin used by your custom code. Use custom_get_sensors() to add a sensor key and value to the periodic sensor MQTT messages. The function is called every 30 seconds by default, but the teleperiod interval can be changed by the user. The doc variable is passed so you can add your JSON object too it. (see below) With custom_topic_payload() you can receive custom topic & payload messages. You can use the value of the topic and payload variables to set LVGL attributes or perform custom actions. source indicates the module from wich the command is received. ( TAG_MQTT , TAG_CONS , TAG_TELN , TAG_HTTP , ...)","title":"Available Hooks"},{"location":"firmware/compiling/custom/#customize-functions","text":"In src/my_custom.cpp you add the code to execute for each of the functions declared above.","title":"Customize functions"},{"location":"firmware/compiling/custom/#setup","text":"We keep a variable for tracking the last blink time. my_custom.h 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include \"hasplib.h\" #if defined(HASP_USE_CUSTOM) && true // <-- set this to true in your code #include \"hasp_debug.h\" #include \"custom/my_custom.h\" unsigned long last_blink = 0 ; bool blink_state = LOW ; void custom_setup () { // Initialization code here last_blink = millis (); pinMode ( LED_BUILTIN , OUTPUT ); randomSeed ( millis ()); }","title":"Setup"},{"location":"firmware/compiling/custom/#loops","text":"Next, check the time past since the last blink. This should execute very fast, do not use delay() or any blocking code. 9 10 11 12 13 14 15 16 17 18 19 20 21 void custom_loop () { // Non-blocking code here! if ( blink_speed && ( millis () - last_blink > blink_speed )) { if ( blink_state == LOW ) { blink_state = HIGH ; } else { blink_state = LOW ; } digitalWrite ( LED_BUILTIN , blink_state ); last_blink = millis (); } } We don't execute code at fixed intervals, so leave these functions blank: 29 30 31 32 33 34 35 36 37 void custom_every_second () { // Unused } void custom_every_5seconds () { // Unused }","title":"Loops"},{"location":"firmware/compiling/custom/#declare-pins","text":"We need to tell the firmware which custom pins we have used: 18 19 20 21 22 23 24 25 26 27 bool custom_pin_in_use ( uint8_t pin ) { switch ( pin ) { case LED_BUILTIN : // Custom LED pin case 6 : // Custom Input pin return true ; default : return false ; } }","title":"Declare pins"},{"location":"firmware/compiling/custom/#report-sensors","text":"Here we can add data to the sensors MQTT messages that are sent periodically. You can add a simple Key-Value pair or a more complex JSON object if needed. void custom_get_sensors ( JsonDocument & doc ) { JsonObject sensor = doc . createNestedObject ( F ( \"Temperature\" )); // Add Key sensor [ F ( \"Temperature\" )] = random ( 256 ); // Set Value }","title":"Report Sensors"},{"location":"firmware/compiling/custom/#debug-output","text":"By including #include \"hasp_debug.h\" we can also utilize LOG_*() functions to print debug output to the console: LOG_VERBOSE(TAG_CUSTOM, message [, args]) LOG_NOTICE(TAG_CUSTOM, message [, args]) LOG_TRACE(TAG_CUSTOM, message [, args]) LOG_ERROR(TAG_CUSTOM, message [, args])","title":"Debug Output"},{"location":"firmware/compiling/custom/#mqtt-output","text":"Use dispatch_state_subtopic(topic, payload) to send an MQTT message and payload to hasp/<plate>/state/topic . 1 2 3 4 5 void custom_every_5seconds () { LOG_VERBOSE ( TAG_CUSTOM , \"%d seconds have passsed...\" , 5 ); dispatch_state_subtopic ( \"my_topic\" , \"{ \\\" test \\\" :123}\" ); }","title":"MQTT Output"},{"location":"firmware/compiling/customize/","text":"Customization ~ The file include\\user_config_override-template.h lists the options you have to customize your build. Settings applied here will act as factory defaults in the firmware. Check the file for the self-explanatory options. Some of the available possibilities are: WiFi Settings MQTT Settings OTA Server Settings Syslog Settings Timezone Interface Language Web interface coloring Built-in fonts choice GPIO Templates Services startup Copy it to include\\user_config_override.h and change the settins per your needs. Uncomment -DUSE_CONFIG_OVERRIDE in platformio_override.ini to ensure that the config overrides are taken into account during the compilation process. Custom code ~ It is possible to include your own custom code in the src/custom directory. If you enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h , you can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop.","title":"Customization"},{"location":"firmware/compiling/customize/#customization","text":"The file include\\user_config_override-template.h lists the options you have to customize your build. Settings applied here will act as factory defaults in the firmware. Check the file for the self-explanatory options. Some of the available possibilities are: WiFi Settings MQTT Settings OTA Server Settings Syslog Settings Timezone Interface Language Web interface coloring Built-in fonts choice GPIO Templates Services startup Copy it to include\\user_config_override.h and change the settins per your needs. Uncomment -DUSE_CONFIG_OVERRIDE in platformio_override.ini to ensure that the config overrides are taken into account during the compilation process.","title":"Customization"},{"location":"firmware/compiling/customize/#custom-code","text":"It is possible to include your own custom code in the src/custom directory. If you enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h , you can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop.","title":"Custom code"},{"location":"firmware/compiling/gitpod/","text":"Compiling online with Gitpod ~ Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. If you don't want to install an IDE (Integrated Development Environment) like PlatformIO or ATOM on your computer, compiling your own firmware is a breeze using Gitpod . Gitpod is a web browser based online IDE. All you need to use it is to link your GitHub account (or make a new one here ). Gitpod will take care of all the necessary software package dependencies for you. Load openHASP project in Gitpod ~ Click on one of the links below, and that will automatically load Gitpod with openHASP prepared for creating your custom build: Release (for example 0.6.2): https://gitpod.io#https://github.com/HASwitchPlate/openHASP/tree/0.6.2 Development ( main branch): https://gitpod.io#https://github.com/HASwitchPlate/openHASP After Gitpod loads the project, you will be greeted by the main window. Choose the version you need ~ A copy of platformio_override-template.ini to platformio_override.ini will be readily prepared for you. Click platformio_override.ini to open it, and to select your firmware flavour for your hardware uncomment in the extra_configs section the platform of your hadware, for example for ESP32: [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini ; user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE and make sure you have your own user_config_override.h in place: (please consider before saving your wifi and mqtt credentials to an online cloud) [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE And finally select your supported hardware from the extra_default_envs section by uncommenting the corresponding line. For example to build firmware for Lanbon L8, you should remove that comment only: extra_default_envs = ; Comment unneeded environments or create extra ; arduitouch-esp32_ili9341 ; d1-mini-esp32_ili9341 ; d132-unoshield ; esp12e-st7735 ; esp32dev-mrb3511 ; esp32dev-ili9488 lanbon_l8 ; lolin-d32-pro_ili9341 ; my_custom_build ; nodemcu32s-raspi ; wt32-sc01 ; ttgo_esp32_poe-ili9341 Save the file by pressing Ctrl + S or selecting Save from the top-left menu. Note You can of course uncomment multiple lines, the system will make builds for each. Note that these environments rely on the platforms above so double-check that your hardware has the correct platform enabled in the extra_configs section! Warning If you build from a development branch, you may not get the expected results, as it may contain undocumented or buggy features. Also, most likely a development branch has verbose logging enabled by default which adversely affects performance (for example setting HASP_LOG_LEVEL back to LOG_LEVEL_TRACE may bring speed to normal, otherwise the plate may become laggy). Build the firmware ~ To generate your customized firmware build, type platformio run in the command line area at the bottom, and press Enter key. Download the build ~ After the build successfully finishes, you will be able to find the downloadable binaries on the left panel, in the build_output\\firmware folder.","title":"Compiling online with Gitpod"},{"location":"firmware/compiling/gitpod/#compiling-online-with-gitpod","text":"Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. If you don't want to install an IDE (Integrated Development Environment) like PlatformIO or ATOM on your computer, compiling your own firmware is a breeze using Gitpod . Gitpod is a web browser based online IDE. All you need to use it is to link your GitHub account (or make a new one here ). Gitpod will take care of all the necessary software package dependencies for you.","title":"Compiling online with Gitpod"},{"location":"firmware/compiling/gitpod/#load-openhasp-project-in-gitpod","text":"Click on one of the links below, and that will automatically load Gitpod with openHASP prepared for creating your custom build: Release (for example 0.6.2): https://gitpod.io#https://github.com/HASwitchPlate/openHASP/tree/0.6.2 Development ( main branch): https://gitpod.io#https://github.com/HASwitchPlate/openHASP After Gitpod loads the project, you will be greeted by the main window.","title":"Load openHASP project in Gitpod"},{"location":"firmware/compiling/gitpod/#choose-the-version-you-need","text":"A copy of platformio_override-template.ini to platformio_override.ini will be readily prepared for you. Click platformio_override.ini to open it, and to select your firmware flavour for your hardware uncomment in the extra_configs section the platform of your hadware, for example for ESP32: [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini ; user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE and make sure you have your own user_config_override.h in place: (please consider before saving your wifi and mqtt credentials to an online cloud) [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE And finally select your supported hardware from the extra_default_envs section by uncommenting the corresponding line. For example to build firmware for Lanbon L8, you should remove that comment only: extra_default_envs = ; Comment unneeded environments or create extra ; arduitouch-esp32_ili9341 ; d1-mini-esp32_ili9341 ; d132-unoshield ; esp12e-st7735 ; esp32dev-mrb3511 ; esp32dev-ili9488 lanbon_l8 ; lolin-d32-pro_ili9341 ; my_custom_build ; nodemcu32s-raspi ; wt32-sc01 ; ttgo_esp32_poe-ili9341 Save the file by pressing Ctrl + S or selecting Save from the top-left menu. Note You can of course uncomment multiple lines, the system will make builds for each. Note that these environments rely on the platforms above so double-check that your hardware has the correct platform enabled in the extra_configs section! Warning If you build from a development branch, you may not get the expected results, as it may contain undocumented or buggy features. Also, most likely a development branch has verbose logging enabled by default which adversely affects performance (for example setting HASP_LOG_LEVEL back to LOG_LEVEL_TRACE may bring speed to normal, otherwise the plate may become laggy).","title":"Choose the version you need"},{"location":"firmware/compiling/gitpod/#build-the-firmware","text":"To generate your customized firmware build, type platformio run in the command line area at the bottom, and press Enter key.","title":"Build the firmware"},{"location":"firmware/compiling/gitpod/#download-the-build","text":"After the build successfully finishes, you will be able to find the downloadable binaries on the left panel, in the build_output\\firmware folder.","title":"Download the build"},{"location":"firmware/compiling/local/","text":"Compiling locally ~ Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. The guide below will describe how to make your own build from source on your local PC. Install Visual Studio Code ~ on Linux on MacOS on Windows Additional packages on Linux: sudo apt update sudo apt install git python3-venv Clone openHASP ~ Make sure to add the --recursive parameter when cloning the project from GitHub. Otherwise git will not download the required submodules in the /lib subdirectory. To clone the current development version ( main branch): 1 git clone --recursive https://github.com/HASwitchPlate/openHASP If you already cloned openHASP without the --recursive parameter, you can fetch the submodules separately using: 1 git submodule update --init --recursive To switch to a different branch (for example 0.7.0-rc9 release) use: 1 2 3 4 git clone --recursive https://github.com/HASwitchPlate/openHASP cd openHASP git checkout 0 .7.0-rc9 git submodule update --init --recursive Open in PlatformIO ~ Open the project folder in Visual Studio Code . You will receive a popup to install PlatformIO IDE if it is not already installed. This will automatically install all PlatformIO dependencies and the MCU compiler frameworks needed. Restart Visual Studio Code when the PIO installation completes. Create a configuration ~ Copy platformio_override-template.ini to platformio_override.ini and uncomment the platforms for esp32 or esp32s2 : [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE : [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE Then Click on the \"Refresh Project tasks\" icon in PlatformIO to list all the configured environments. Compiling ~ MCU Environments ~ You can now run \"Build\" or \"Build All\" in PlatformIO to compile (all) the firmware. Native Linux build ~ For native linux_sdl builds, you also need: sudo apt update sudo apt install build-essential libsdl2-dev Native MacOS build ~ For native darwin_sdl builds, you also need Homebrew : 1 brew install gcc sdl2 Native Windows build ~ For native windows_sdl builds, you also need MingW: Use MSYS2 1 pacman -S mingw-w64-x86_64-gcc mingw-w64-x86_64-SDL2 Add the path to your Mingw-w64 bin folder to the Windows PATH environment variable (usually C:\\msys64\\mingw64\\bin ). See instruction, 4 .","title":"Compiling locally"},{"location":"firmware/compiling/local/#compiling-locally","text":"Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. The guide below will describe how to make your own build from source on your local PC.","title":"Compiling locally"},{"location":"firmware/compiling/local/#install-visual-studio-code","text":"on Linux on MacOS on Windows Additional packages on Linux: sudo apt update sudo apt install git python3-venv","title":"Install Visual Studio Code"},{"location":"firmware/compiling/local/#clone-openhasp","text":"Make sure to add the --recursive parameter when cloning the project from GitHub. Otherwise git will not download the required submodules in the /lib subdirectory. To clone the current development version ( main branch): 1 git clone --recursive https://github.com/HASwitchPlate/openHASP If you already cloned openHASP without the --recursive parameter, you can fetch the submodules separately using: 1 git submodule update --init --recursive To switch to a different branch (for example 0.7.0-rc9 release) use: 1 2 3 4 git clone --recursive https://github.com/HASwitchPlate/openHASP cd openHASP git checkout 0 .7.0-rc9 git submodule update --init --recursive","title":"Clone openHASP"},{"location":"firmware/compiling/local/#open-in-platformio","text":"Open the project folder in Visual Studio Code . You will receive a popup to install PlatformIO IDE if it is not already installed. This will automatically install all PlatformIO dependencies and the MCU compiler frameworks needed. Restart Visual Studio Code when the PIO installation completes.","title":"Open in PlatformIO"},{"location":"firmware/compiling/local/#create-a-configuration","text":"Copy platformio_override-template.ini to platformio_override.ini and uncomment the platforms for esp32 or esp32s2 : [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE : [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE Then Click on the \"Refresh Project tasks\" icon in PlatformIO to list all the configured environments.","title":"Create a configuration"},{"location":"firmware/compiling/local/#compiling","text":"","title":"Compiling"},{"location":"firmware/compiling/local/#mcu-environments","text":"You can now run \"Build\" or \"Build All\" in PlatformIO to compile (all) the firmware.","title":"MCU Environments"},{"location":"firmware/compiling/local/#native-linux-build","text":"For native linux_sdl builds, you also need: sudo apt update sudo apt install build-essential libsdl2-dev","title":"Native Linux build"},{"location":"firmware/compiling/local/#native-macos-build","text":"For native darwin_sdl builds, you also need Homebrew : 1 brew install gcc sdl2","title":"Native MacOS build"},{"location":"firmware/compiling/local/#native-windows-build","text":"For native windows_sdl builds, you also need MingW: Use MSYS2 1 pacman -S mingw-w64-x86_64-gcc mingw-w64-x86_64-SDL2 Add the path to your Mingw-w64 bin folder to the Windows PATH environment variable (usually C:\\msys64\\mingw64\\bin ). See instruction, 4 .","title":"Native Windows build"},{"location":"firmware/configuration/debug/","text":"Debug Settings ~ openHASP logs valuable information during its operation to the serial port, telnet console or syslog server. Use these settings to configure the debug output. Settings ~ Serial Port ~ Set the baudrate to use for the serial logging and console. Telemetry Period ~ This is the interval in seconds with which openHASP will send automatic statusupdate messages to the state/statusupdate topic. Syslog Server ~ Specify the hostname or IP address of the syslog server. Syslog Port ~ Specify the port of the syslog server. Syslog Protocol ~ Select the protocol used by your syslog backend. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Debug Settings"},{"location":"firmware/configuration/debug/#debug-settings","text":"openHASP logs valuable information during its operation to the serial port, telnet console or syslog server. Use these settings to configure the debug output.","title":"Debug Settings"},{"location":"firmware/configuration/debug/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/debug/#serial-port","text":"Set the baudrate to use for the serial logging and console.","title":"Serial Port"},{"location":"firmware/configuration/debug/#telemetry-period","text":"This is the interval in seconds with which openHASP will send automatic statusupdate messages to the state/statusupdate topic.","title":"Telemetry Period"},{"location":"firmware/configuration/debug/#syslog-server","text":"Specify the hostname or IP address of the syslog server.","title":"Syslog Server"},{"location":"firmware/configuration/debug/#syslog-port","text":"Specify the port of the syslog server.","title":"Syslog Port"},{"location":"firmware/configuration/debug/#syslog-protocol","text":"Select the protocol used by your syslog backend. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Syslog Protocol"},{"location":"firmware/configuration/display/","text":"Display Settings ~ Configure the overal settings of the display driver. Settings ~ Short Idle ~ When the display has not been touched for the Short Idle amount of seconds, an idle = short event will be sent out. Long Idle ~ When the display has not been touched for Long + Short Idle amount of seconds, an idle = long event will be sent out. The Long Idle period begins to count after the Short Idle period. Orientation ~ Rotate the display by the set number of degrees and optionally mirror the display as well. Invert Colors ~ Enable color inversion of the display. This can be enabled if the colors on the display are wrong e.g. cyan objects is displayed in orange . Show Pointer ~ Enable this option to show a mouse pointer. This helps with checking if the touches are correctly detected. The pointer is hidden automatically when the display is idle. Backlight Pin ~ Sets the GPIO pin which is used for PWM dimming of the backlight. Invert Backlight ~ By default openHASP will set the backlight pin HIGH to turn on the backlight. For some devices, the backlight will turn on when the pin is LOW instead. Enable Invert Backlight to swap the on/off behavior. Actions ~ Calibrate ~ Only available with XPT2046 resistive touchscreen controllers. Starts an on-screen calibration sequence. Run Anti Burn-in ~ Click this button to run the antiburn command, which will display white noise on the LCD for approximately 30 seconds. This can help to reduce ghosting of a static image on some displays. It also trains the pixels to show different colors which can prolong the lifespan of the display. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Display Settings"},{"location":"firmware/configuration/display/#display-settings","text":"Configure the overal settings of the display driver.","title":"Display Settings"},{"location":"firmware/configuration/display/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/display/#short-idle","text":"When the display has not been touched for the Short Idle amount of seconds, an idle = short event will be sent out.","title":"Short Idle"},{"location":"firmware/configuration/display/#long-idle","text":"When the display has not been touched for Long + Short Idle amount of seconds, an idle = long event will be sent out. The Long Idle period begins to count after the Short Idle period.","title":"Long Idle"},{"location":"firmware/configuration/display/#orientation","text":"Rotate the display by the set number of degrees and optionally mirror the display as well.","title":"Orientation"},{"location":"firmware/configuration/display/#invert-colors","text":"Enable color inversion of the display. This can be enabled if the colors on the display are wrong e.g. cyan objects is displayed in orange .","title":"Invert Colors"},{"location":"firmware/configuration/display/#show-pointer","text":"Enable this option to show a mouse pointer. This helps with checking if the touches are correctly detected. The pointer is hidden automatically when the display is idle.","title":"Show Pointer"},{"location":"firmware/configuration/display/#backlight-pin","text":"Sets the GPIO pin which is used for PWM dimming of the backlight.","title":"Backlight Pin"},{"location":"firmware/configuration/display/#invert-backlight","text":"By default openHASP will set the backlight pin HIGH to turn on the backlight. For some devices, the backlight will turn on when the pin is LOW instead. Enable Invert Backlight to swap the on/off behavior.","title":"Invert Backlight"},{"location":"firmware/configuration/display/#actions","text":"","title":"Actions"},{"location":"firmware/configuration/display/#calibrate","text":"Only available with XPT2046 resistive touchscreen controllers. Starts an on-screen calibration sequence.","title":"Calibrate"},{"location":"firmware/configuration/display/#run-anti-burn-in","text":"Click this button to run the antiburn command, which will display white noise on the LCD for approximately 30 seconds. This can help to reduce ghosting of a static image on some displays. It also trains the pixels to show different colors which can prolong the lifespan of the display. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Run Anti Burn-in"},{"location":"firmware/configuration/factory_reset/","text":"Factory Reset ~ You can remove all files and configuration settings with this button: Actions ~ Click 'Reset All Settings' to erase the files on the internal flash, EEPROM and NVS user configurations. Warning There is no confirmation message. This operation can not be undone. Command Line ~ Use the factoryreset command to clear all settings and restore them the plate to the default configuration: 1 factoryreset","title":"Factory Reset"},{"location":"firmware/configuration/factory_reset/#factory-reset","text":"You can remove all files and configuration settings with this button:","title":"Factory Reset"},{"location":"firmware/configuration/factory_reset/#actions","text":"Click 'Reset All Settings' to erase the files on the internal flash, EEPROM and NVS user configurations. Warning There is no confirmation message. This operation can not be undone.","title":"Actions"},{"location":"firmware/configuration/factory_reset/#command-line","text":"Use the factoryreset command to clear all settings and restore them the plate to the default configuration: 1 factoryreset","title":"Command Line"},{"location":"firmware/configuration/ftp/","text":"FTP Settings ~ Note: All FTP communication is unencrypted and setting credentials is only a simple security measure! The FTP server will only be started if a userand password have been configured. Anonymous access is not allowed for security reasons. Both active and passive modes are supported but you must limit the client to use only one transfer connection at a time. Settings ~ Username and Password ~ Enter the credentials required to access the FTP server. Port ~ Set the port for the FTP Server. Passive Port ~ Set the data port to be used in passive mode. Click 'Save Settings' to save the changes. A restart of the FTP service is needed to apply the settings. FTP Client Setup ~ Any FTP client should be able to connect to the FTP service on the plate. You must force the client to use only one connection at same time. Filezilla ~ For example to use FileZilla as FTP client configure the site settings like this: First, you must go on Manage site ==> New site and now set these parameters: General Settings ~ Select protocol FTP - File Transfer Protocol Select Only use plain FTP (insecure) Set your login and password Transfer Settings ~ Select Limit number of simultanious connections Set the Maximum number of connections to 1 Now you can connect to your device and manage its files using drag and drop.","title":"FTP Settings"},{"location":"firmware/configuration/ftp/#ftp-settings","text":"Note: All FTP communication is unencrypted and setting credentials is only a simple security measure! The FTP server will only be started if a userand password have been configured. Anonymous access is not allowed for security reasons. Both active and passive modes are supported but you must limit the client to use only one transfer connection at a time.","title":"FTP Settings"},{"location":"firmware/configuration/ftp/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/ftp/#ftp-client-setup","text":"Any FTP client should be able to connect to the FTP service on the plate. You must force the client to use only one connection at same time.","title":"FTP Client Setup"},{"location":"firmware/configuration/ftp/#filezilla","text":"For example to use FileZilla as FTP client configure the site settings like this: First, you must go on Manage site ==> New site and now set these parameters:","title":"Filezilla"},{"location":"firmware/configuration/gpio/","text":"GPIO Settings ~ You can attach external devices like buttons, switches, relays, lights or LEDs using the GPIO pins of the ESP. The Devices section of the documentation contains pin descriptions and ways to set them up for specific hardware configurations. When integrated with Home Assistant , the configured GPIOs will be added automatically during discovery as appropriate entities in the system. GPIO Overview ~ Input Pin ~ Pin ~ Select the GPIO number of the input pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO. Group ~ GPIOs and objects can be grouped together by specifying a groupid . The state of objects in the same group is altered by the value of this input. This allows for simple action-reaction scenarios without relying on a home automation system: Link a switch and relay together Link a push button and doorbell together The state of a digital input can only be on or off and will set all group members to either 100% or 0% of their maximum value. Note The grouping of multiple gpios and objects together is intended for simple actions only. More complex actions should be performed by a home automation system, without linking groupids together. Example jsonl To act on the relays directly from the switch objects on the screen, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 } Default state ~ The state of the input when it is not being engaged: i.e. the switch, button or sensor is idle (not active) : Normally Open : The default state interrupts the circuit Normally Closed : The default state completes the circuit Resistor ~ To avoid ghost events and RF interference each input should either have a pullup or pulldown resistor. This ensures the signal in the default state is always HIGH or LOW respectively. Most input pins have either an internal pullup or pulldown resistor that can be activated by the firmware. Check the documentation of your MCU whether the pin you want to use provides this functionality. If an internal pullup or pulldown resistor is not available on that pin you must add an external resistor and connect it either to 3.3V or GND . Internal Pullup : The pin is pulled HIGH internally by the firmware Internal Pulldown : The pin is pulled LOW internally by the firmware External Pullup : The pin is pulled HIGH by an external resistor External Pulldown : The pin is pulled LOW by an external resistor Type ~ Button A button gpio sends events to topic input# where # is the pin number. GPIO buttons send out events while they occur. The possible events are: down : Occurs when a button goes from depressed to pressed up : The button was released within a short time i.e. a short click has occurred long : A single LONG event is send when the button is still being pressed after the threshold time of 400ms release : The button is released after being pressing for a LONG threshold time. The values of objects or gpios with the same groupid will be set to maximum when the button is being pressed and to minimum when the button is released. Switch A switch gpio sends events to input# where # is the groupnumber. GPIO Switches send out their value when toggled: {\"val\":\"0\"} or {\"val\":\"1\"}. The values of objects or gpios in the same group will be set to maximum when the switch is turned on and to minimum when the switch is turned off. Idle State The input pins do not affect the idle state of the device. Only interacting with the touchscreen automatically resets the idle state. If you want a GPIO pin to wakeup the device then you should monitor its mqtt topic and use the idle and backlight commands appropriately. Output Pin ~ Pin ~ Select the GPIO number of the output pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO. Group ~ The applied value is normalized and proportionate to the value of the input object, much like a percentage: Binary objects, like a switch, checkbox or toggle button only pass along 0% and 100% values. Range objects, like a slider, arc slider, roller or drop-down list pass along a value between 0-65535, depending on their current min , max and val attributes. Type ~ Dimmable Lights: ~ Led L8-HD (EU) L8-HD (AU) Set the brightness of the light or LED between 0 and 255 when a value is received on output# where # is the groupnumber. When a led is controlled by a button or switch in the same group, it will be turned ON or OFF according to the state of the button or switch. When a led is controlled by a range object (slider, arc slider, roller, drop-down list) in the same group, the brightness will be proportional to the .val value of the object within its range ( min-max ). Example Consider a roller or drop-down list with 4 options: OFF , Low , Medium and High . The .val values can range from 0 to 3. These will set the brightness of the led to 0 (0%), 84 (33%), 170 (66%) and 255 (100%) respectively. For a roller or drop-down list with 5 options, .val ranges between 0 and 4. The brightness of the led increases 25% with each step. Moodlight: ~ Mood Red Mood Green Mood Blue Assigns the pin to an RGB channel of the moodlight. The three RGB channels can be controlled together using the moodlight command. Relays: ~ Light Relay Power Relay Set the relay ON or OFF when an event is received on output# where # is the groupnumber or from another group intput . When a relay is grouped with a button or switch in the same group, it will be turned ON or OFF according to the state of the button or switch. When a relay is controlled by a range object (slider, arc slider, roller, drop-down list) within the same group, the state will be be ON if the val value is larger then its min value. The various relay types (Light, Power) denote only the device class you want them to be autodetected as in Home Assistant: light vs. switch etc. Warning Attaching devices to mains power can be dangerous! Configuring gpios is done on your own responsibility . Be sure to test any system thoroughly using low voltages first. By using the firmware you accept the License . Use the hasp/ /command/output[x] topic (where x is the pin number) with an empty payload to query the current state of the relay. json linenums=\"1\"l hasp/my_plate/command/output27 hasp/my_plate/state/output27 {\"state\":\"off\"} PWM ~ Experimental Set the duty cycle of the pin between 0 and 4095 when a value is received on output# where # is the groupnumber or from another group intput . When the PWM gpio is grouped with a button or switch, its duty cycle is either set to full-duty or off according to the state of the button or switch. When the PWM gpio is grouped with range object (slider, arc slider, roller, drop-down list), the duty cycle is proportional to the .val value of the object within its range ( min-max ). Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"GPIO Settings"},{"location":"firmware/configuration/gpio/#gpio-settings","text":"You can attach external devices like buttons, switches, relays, lights or LEDs using the GPIO pins of the ESP. The Devices section of the documentation contains pin descriptions and ways to set them up for specific hardware configurations. When integrated with Home Assistant , the configured GPIOs will be added automatically during discovery as appropriate entities in the system.","title":"GPIO Settings"},{"location":"firmware/configuration/gpio/#gpio-overview","text":"","title":"GPIO Overview"},{"location":"firmware/configuration/gpio/#input-pin","text":"","title":"Input Pin"},{"location":"firmware/configuration/gpio/#pin","text":"Select the GPIO number of the input pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO.","title":"Pin"},{"location":"firmware/configuration/gpio/#group","text":"GPIOs and objects can be grouped together by specifying a groupid . The state of objects in the same group is altered by the value of this input. This allows for simple action-reaction scenarios without relying on a home automation system: Link a switch and relay together Link a push button and doorbell together The state of a digital input can only be on or off and will set all group members to either 100% or 0% of their maximum value. Note The grouping of multiple gpios and objects together is intended for simple actions only. More complex actions should be performed by a home automation system, without linking groupids together. Example jsonl To act on the relays directly from the switch objects on the screen, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 }","title":"Group"},{"location":"firmware/configuration/gpio/#default-state","text":"The state of the input when it is not being engaged: i.e. the switch, button or sensor is idle (not active) : Normally Open : The default state interrupts the circuit Normally Closed : The default state completes the circuit","title":"Default state"},{"location":"firmware/configuration/gpio/#resistor","text":"To avoid ghost events and RF interference each input should either have a pullup or pulldown resistor. This ensures the signal in the default state is always HIGH or LOW respectively. Most input pins have either an internal pullup or pulldown resistor that can be activated by the firmware. Check the documentation of your MCU whether the pin you want to use provides this functionality. If an internal pullup or pulldown resistor is not available on that pin you must add an external resistor and connect it either to 3.3V or GND . Internal Pullup : The pin is pulled HIGH internally by the firmware Internal Pulldown : The pin is pulled LOW internally by the firmware External Pullup : The pin is pulled HIGH by an external resistor External Pulldown : The pin is pulled LOW by an external resistor","title":"Resistor"},{"location":"firmware/configuration/gpio/#type","text":"Button A button gpio sends events to topic input# where # is the pin number. GPIO buttons send out events while they occur. The possible events are: down : Occurs when a button goes from depressed to pressed up : The button was released within a short time i.e. a short click has occurred long : A single LONG event is send when the button is still being pressed after the threshold time of 400ms release : The button is released after being pressing for a LONG threshold time. The values of objects or gpios with the same groupid will be set to maximum when the button is being pressed and to minimum when the button is released. Switch A switch gpio sends events to input# where # is the groupnumber. GPIO Switches send out their value when toggled: {\"val\":\"0\"} or {\"val\":\"1\"}. The values of objects or gpios in the same group will be set to maximum when the switch is turned on and to minimum when the switch is turned off. Idle State The input pins do not affect the idle state of the device. Only interacting with the touchscreen automatically resets the idle state. If you want a GPIO pin to wakeup the device then you should monitor its mqtt topic and use the idle and backlight commands appropriately.","title":"Type"},{"location":"firmware/configuration/gpio/#output-pin","text":"","title":"Output Pin"},{"location":"firmware/configuration/gpio/#pin_1","text":"Select the GPIO number of the output pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO.","title":"Pin"},{"location":"firmware/configuration/gpio/#group_1","text":"The applied value is normalized and proportionate to the value of the input object, much like a percentage: Binary objects, like a switch, checkbox or toggle button only pass along 0% and 100% values. Range objects, like a slider, arc slider, roller or drop-down list pass along a value between 0-65535, depending on their current min , max and val attributes.","title":"Group"},{"location":"firmware/configuration/gpio/#type_1","text":"","title":"Type"},{"location":"firmware/configuration/hasp/","text":"HASP Design ~ You can configure the general look and feel for the interface by uploading your favorite fonts and selecting your favorite theme and color. UI Theme ~ Select one of the built-in themes to select the general style for the HASP interface. Primary Color ~ Select the base color for the built-in theme. Secondary Color ~ Accent color for the theme. Startup Layout ~ Enter the filename of the .jsonl you have uploaded to load the layout on startup. Startup Page ~ Select to the page number to display at startup. Startup Brightness ~ Select the brightness level of the display on startup. Note: The display must support the dim feature and GPIO for dim is set in display setup. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"HASP Design"},{"location":"firmware/configuration/hasp/#hasp-design","text":"You can configure the general look and feel for the interface by uploading your favorite fonts and selecting your favorite theme and color.","title":"HASP Design"},{"location":"firmware/configuration/hasp/#ui-theme","text":"Select one of the built-in themes to select the general style for the HASP interface.","title":"UI Theme"},{"location":"firmware/configuration/hasp/#primary-color","text":"Select the base color for the built-in theme.","title":"Primary Color"},{"location":"firmware/configuration/hasp/#secondary-color","text":"Accent color for the theme.","title":"Secondary Color"},{"location":"firmware/configuration/hasp/#startup-layout","text":"Enter the filename of the .jsonl you have uploaded to load the layout on startup.","title":"Startup Layout"},{"location":"firmware/configuration/hasp/#startup-page","text":"Select to the page number to display at startup.","title":"Startup Page"},{"location":"firmware/configuration/hasp/#startup-brightness","text":"Select the brightness level of the display on startup. Note: The display must support the dim feature and GPIO for dim is set in display setup. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Startup Brightness"},{"location":"firmware/configuration/http/","text":"HTTP Settings ~ You can restrict access to the web user interface. Note: All HTTP communication is unencrypted and setting credentials is only a simple security measure! Settings ~ Username and Password ~ Enter the credentials required to access the web interface. Click 'Save Settings' to activate immediately. If the username and/or password have been changed you need to enter the new values.","title":"HTTP Settings"},{"location":"firmware/configuration/http/#http-settings","text":"You can restrict access to the web user interface. Note: All HTTP communication is unencrypted and setting credentials is only a simple security measure!","title":"HTTP Settings"},{"location":"firmware/configuration/http/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/http/#username-and-password","text":"Enter the credentials required to access the web interface. Click 'Save Settings' to activate immediately. If the username and/or password have been changed you need to enter the new values.","title":"Username and Password"},{"location":"firmware/configuration/mqtt/","text":"MQTT Settings ~ All communication between openHASP and your Home Automation service is done over MQTT. You will need a functional MQTT Broker. Tip: Learn more about the protocol on MQTT Essentials Settings ~ Plate Name ~ The Plate Name is the unique identifier of your device on your MQTT Broker. For example, setting the Plate Name to plate35 will make the device listen and communicate on the main topic hasp/plate35/ Group Name ~ The Group Name is the unique identifier for a Group of devices. For example, the default Group Name is plates . This will make all devices in this group listen on the main topic hasp/plates/ This way you can send a command to all devices in the group at the same moment. Each devices will only respond on their own main Plate Name topic. Broker ~ Set the IP or hostname of your MQTT Broker service. Port ~ Set the port for your MQTT Broker. Username ~ Enter credentials if your MQTT Broker requires a Username. Password ~ Enter credentials if your MQTT Broker requires a Password. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings. Command Line ~ You can also configure the mqtt settings via the serial or telnet console: 1 2 3 4 5 6 hostname myPlateName mqtthost 192 .168.0.123 mqttport 1883 mqttuser myUsername mqttpass myPassword reboot","title":"MQTT Settings"},{"location":"firmware/configuration/mqtt/#mqtt-settings","text":"All communication between openHASP and your Home Automation service is done over MQTT. You will need a functional MQTT Broker. Tip: Learn more about the protocol on MQTT Essentials","title":"MQTT Settings"},{"location":"firmware/configuration/mqtt/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/mqtt/#plate-name","text":"The Plate Name is the unique identifier of your device on your MQTT Broker. For example, setting the Plate Name to plate35 will make the device listen and communicate on the main topic hasp/plate35/","title":"Plate Name"},{"location":"firmware/configuration/mqtt/#group-name","text":"The Group Name is the unique identifier for a Group of devices. For example, the default Group Name is plates . This will make all devices in this group listen on the main topic hasp/plates/ This way you can send a command to all devices in the group at the same moment. Each devices will only respond on their own main Plate Name topic.","title":"Group Name"},{"location":"firmware/configuration/mqtt/#broker","text":"Set the IP or hostname of your MQTT Broker service.","title":"Broker"},{"location":"firmware/configuration/mqtt/#port","text":"Set the port for your MQTT Broker.","title":"Port"},{"location":"firmware/configuration/mqtt/#username","text":"Enter credentials if your MQTT Broker requires a Username.","title":"Username"},{"location":"firmware/configuration/mqtt/#password","text":"Enter credentials if your MQTT Broker requires a Password. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Password"},{"location":"firmware/configuration/mqtt/#command-line","text":"You can also configure the mqtt settings via the serial or telnet console: 1 2 3 4 5 6 hostname myPlateName mqtthost 192 .168.0.123 mqttport 1883 mqttuser myUsername mqttpass myPassword reboot","title":"Command Line"},{"location":"firmware/configuration/time/","text":"Time Settings ~ The internal clock of the plate is synchronized with one or more NTP servers. The clock is used to display the time on the plate and in the log. To show the correct time for your area, please configure the corrent timezone. Settings ~ Region ~ Select the region or continent of the timezone you are in. This selection shows the timezones of that region or continent in the dropdown below. Timezone ~ Select the city or timezone you are in. The timezones shown in this list are filtered by the selected region above. NTP Servers ~ Enter the URL or IP address of up to 3 Network Time Servers to synchronized the internal clock with. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings. Command Line ~ You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Time Settings"},{"location":"firmware/configuration/time/#time-settings","text":"The internal clock of the plate is synchronized with one or more NTP servers. The clock is used to display the time on the plate and in the log. To show the correct time for your area, please configure the corrent timezone.","title":"Time Settings"},{"location":"firmware/configuration/time/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/time/#region","text":"Select the region or continent of the timezone you are in. This selection shows the timezones of that region or continent in the dropdown below.","title":"Region"},{"location":"firmware/configuration/time/#timezone","text":"Select the city or timezone you are in. The timezones shown in this list are filtered by the selected region above.","title":"Timezone"},{"location":"firmware/configuration/time/#ntp-servers","text":"Enter the URL or IP address of up to 3 Network Time Servers to synchronized the internal clock with. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"NTP Servers"},{"location":"firmware/configuration/time/#command-line","text":"You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Command Line"},{"location":"firmware/configuration/wifi/","text":"Wifi Settings ~ When using a wireless network adapter, you need to configure the SSID to connect. Settings ~ SSID ~ The name of the wireless network to connect to. Password ~ Optional password for the access point, if required. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings. Command Line ~ You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Wifi Settings"},{"location":"firmware/configuration/wifi/#wifi-settings","text":"When using a wireless network adapter, you need to configure the SSID to connect.","title":"Wifi Settings"},{"location":"firmware/configuration/wifi/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/wifi/#ssid","text":"The name of the wireless network to connect to.","title":"SSID"},{"location":"firmware/configuration/wifi/#password","text":"Optional password for the access point, if required. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Password"},{"location":"firmware/configuration/wifi/#command-line","text":"You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Command Line"},{"location":"firmware/installation/esp8266/","text":"","title":"Esp8266"},{"location":"firmware/installation/installation/","text":"","title":"Installation"},{"location":"firmware/installation/stm32/","text":"","title":"Stm32"},{"location":"hardware/","text":"Getting Started ~ openHASP supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended devices, development boards and touchscreens to get you up-and-running in no time. Devices Recommendations ~ For new projects we recommend ESP32-S3 boards with at least 520 kB SRAM, 8MB of flash and 2MB PSram. A capacitive touchscreen is also highly prefered because it is more responsive over resistive touchscreens. Note We do not recommend using an ESP32-S2 because it only has 320 kB of SRAM. Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries. Supported Devices ~ Overview of supported devices:","title":"Getting Started"},{"location":"hardware/#getting-started","text":"openHASP supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended devices, development boards and touchscreens to get you up-and-running in no time.","title":"Getting Started"},{"location":"hardware/#devices-recommendations","text":"For new projects we recommend ESP32-S3 boards with at least 520 kB SRAM, 8MB of flash and 2MB PSram. A capacitive touchscreen is also highly prefered because it is more responsive over resistive touchscreens. Note We do not recommend using an ESP32-S2 because it only has 320 kB of SRAM. Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries.","title":"Devices Recommendations"},{"location":"hardware/#supported-devices","text":"Overview of supported devices:","title":"Supported Devices"},{"location":"hardware/adafruit/featherwing/","text":"Adafruit ~ openHASP runs on Adafruit's ESP32 Feather Boards and supports Adafruit's TFT Featherwing resistive touch screens. Build configurations and precompiled firmware binaries are available for these popular hardware combinations to help you get started quickly. Supported Boards ~ openHASP supports the following Adafruit Feather boards (and the many different versions and variations based on them) Adafruit HUZZAH32 - ESP32 Feather (4MB Flash, No PSRAM) Adafruit ESP32-S3 Feather (4MB Flash, 2MB PSRAM) Adafruit ESP32 Feather V2 (8MB Flash, 2MB PSRAM) These boards are virtually plug-and-play when combined with Adafruit TFT FeatherWing displays. Many of these boards come in versions with pre-soldered headers (no soldering required) !!! note \" Note\" Don't use the Adafruit ESP8266-based Feather HUZZAH board as it lacks both sufficient memory and MCU power. !!! note \" Note\" Boards with PSRAM are highly recommended, and required for image processing. Supported Displays ~ TFT FeatherWing - 2.4\" 320x240 Touchscreen (ILI9341 with STMPE610 resistive touch) TFT FeatherWing - 2.4\" 320x240 Touchscreen V2 (ILI9341 with TSC2007 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen (HX8357D with STMPE610 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen V2 : (HX8357D with TSC2007 resistive touch) Check out Adafruit's TFT Featherwing tutorial on learn.adafruit.com for detailed information and wiring diagrams. Backlight ~ By default, the display is always on and at its maximum brightness. To control backlight dimming or sleeping, you need to solder the LITE pin to a PWM output pin (e.g., GPIO 21 ). Product Videos ~ 2.4\" TFT FeatherWing ~ 2.4\" TFT FeatherWing V2 ~ 3.5\" TFT FeatherWing ~ 3.5\" TFT FeatherWing V2 ~ 3D Printed Cases ~ Check out these enclosures available on Thingiverse: 2.4\" TFT FeatherWing Enclosure 2.4\" TFT FeatherWing Weather Station 3.5\" TFT FeatherWing Table Top Case 3.5\" TFT FeatherWing Touch Deck About Adafruit Adafruit invests time and resources providing open source code and libraries, please support Adafruit and open-source hardware by purchasing products from Adafruit!","title":"Adafruit"},{"location":"hardware/adafruit/featherwing/#adafruit","text":"openHASP runs on Adafruit's ESP32 Feather Boards and supports Adafruit's TFT Featherwing resistive touch screens. Build configurations and precompiled firmware binaries are available for these popular hardware combinations to help you get started quickly.","title":"Adafruit"},{"location":"hardware/adafruit/featherwing/#supported-boards","text":"openHASP supports the following Adafruit Feather boards (and the many different versions and variations based on them) Adafruit HUZZAH32 - ESP32 Feather (4MB Flash, No PSRAM) Adafruit ESP32-S3 Feather (4MB Flash, 2MB PSRAM) Adafruit ESP32 Feather V2 (8MB Flash, 2MB PSRAM) These boards are virtually plug-and-play when combined with Adafruit TFT FeatherWing displays. Many of these boards come in versions with pre-soldered headers (no soldering required) !!! note \" Note\" Don't use the Adafruit ESP8266-based Feather HUZZAH board as it lacks both sufficient memory and MCU power. !!! note \" Note\" Boards with PSRAM are highly recommended, and required for image processing.","title":"Supported Boards"},{"location":"hardware/adafruit/featherwing/#supported-displays","text":"TFT FeatherWing - 2.4\" 320x240 Touchscreen (ILI9341 with STMPE610 resistive touch) TFT FeatherWing - 2.4\" 320x240 Touchscreen V2 (ILI9341 with TSC2007 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen (HX8357D with STMPE610 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen V2 : (HX8357D with TSC2007 resistive touch) Check out Adafruit's TFT Featherwing tutorial on learn.adafruit.com for detailed information and wiring diagrams.","title":"Supported Displays"},{"location":"hardware/adafruit/featherwing/#backlight","text":"By default, the display is always on and at its maximum brightness. To control backlight dimming or sleeping, you need to solder the LITE pin to a PWM output pin (e.g., GPIO 21 ).","title":"Backlight"},{"location":"hardware/adafruit/featherwing/#product-videos","text":"","title":"Product Videos"},{"location":"hardware/adafruit/featherwing/#3d-printed-cases","text":"Check out these enclosures available on Thingiverse: 2.4\" TFT FeatherWing Enclosure 2.4\" TFT FeatherWing Weather Station 3.5\" TFT FeatherWing Table Top Case 3.5\" TFT FeatherWing Touch Deck About Adafruit Adafruit invests time and resources providing open source code and libraries, please support Adafruit and open-source hardware by purchasing products from Adafruit!","title":"3D Printed Cases"},{"location":"hardware/az-delivery/az-touch/","text":"AZ-Touch MOD ~ more images... The AZ-Touch MOD for ESP32 comes as kit with a touchscreen, wall enclosure, PCB and pinheaders. It includes either a 2.4\" or 2.8\" ILI9341 display with a XPT2046 resistive touchscreen controller. The PCB is pre-soldered except for the pinheaders, so some soldering is required. Pros Cons Versatile PCB options Bulky enclosure Limited soldering required Resistive touchpanel Choice of several ESP32 MCUs 9 to 35V DC-DC power input Breadboard area AZ-Touch MOD 2.4\" AZ-Touch MOD 2.8\" ESP32 dev boards ~ The AZ-Touch MOD PCB kit does not come with an MCU and needs to be purchased separately. The PCB is designed to be compatible with serveral development boards. There are two ESP32 footprint options for soldering headers onto the PCB: ESP32-DevKitC footprint with 2x19 pins Wemos D1 mini footprint with 2x8 pins The ESP32-DevKitC option is prefered because you can use more pins from the ESP32. Board ESP32-DevKitC-V4 ESP32-DevKitC-VE MCU ESP32-WROOM ESP32-WROVER Flash 4 MB 8 MB PSram No 8 MB Buy Buy Backlight Control ~ GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display. Documentation ~ Schematics Datasheet Assembly Guide Product Video ~ Backlight Control ~ GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display. GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display. Enclosure ~ Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch MOD PCB comes partly assembled with only the pin headers requiring some minimal soldering skills. The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D). Flashing ~ The ESP32 can be flashed over USB like any ESP32 development board.","title":"AZ-Touch MOD"},{"location":"hardware/az-delivery/az-touch/#az-touch-mod","text":"more images... The AZ-Touch MOD for ESP32 comes as kit with a touchscreen, wall enclosure, PCB and pinheaders. It includes either a 2.4\" or 2.8\" ILI9341 display with a XPT2046 resistive touchscreen controller. The PCB is pre-soldered except for the pinheaders, so some soldering is required. Pros Cons Versatile PCB options Bulky enclosure Limited soldering required Resistive touchpanel Choice of several ESP32 MCUs 9 to 35V DC-DC power input Breadboard area AZ-Touch MOD 2.4\" AZ-Touch MOD 2.8\"","title":"AZ-Touch MOD"},{"location":"hardware/az-delivery/az-touch/#esp32-dev-boards","text":"The AZ-Touch MOD PCB kit does not come with an MCU and needs to be purchased separately. The PCB is designed to be compatible with serveral development boards. There are two ESP32 footprint options for soldering headers onto the PCB: ESP32-DevKitC footprint with 2x19 pins Wemos D1 mini footprint with 2x8 pins The ESP32-DevKitC option is prefered because you can use more pins from the ESP32. Board ESP32-DevKitC-V4 ESP32-DevKitC-VE MCU ESP32-WROOM ESP32-WROVER Flash 4 MB 8 MB PSram No 8 MB Buy Buy","title":"ESP32 dev boards"},{"location":"hardware/az-delivery/az-touch/#backlight-control","text":"GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display.","title":"Backlight Control"},{"location":"hardware/az-delivery/az-touch/#documentation","text":"Schematics Datasheet Assembly Guide","title":"Documentation"},{"location":"hardware/az-delivery/az-touch/#product-video","text":"","title":"Product Video"},{"location":"hardware/az-delivery/az-touch/#backlight-control_1","text":"GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display. GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display.","title":"Backlight Control"},{"location":"hardware/az-delivery/az-touch/#enclosure","text":"Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch MOD PCB comes partly assembled with only the pin headers requiring some minimal soldering skills. The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D).","title":"Enclosure"},{"location":"hardware/az-delivery/az-touch/#flashing","text":"The ESP32 can be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/az-delivery/feather/","text":"AZ-Touch Feather ~ The AZ-Touch Feather also uses a 2.8\" TFT display but the footprint on the PCB is only suitable for the Adafruit Feather family of MCUs. This AZ-Touch Feather kit can also be used to run openHASP with the HUZZAH32 or SparkFun Thing Plus ESP32-WROOM development boards. Unlike the AZ-Touch MOD, the AZ-Touch Feather is a self-solder kit! You have to solder all components to the PCB yourself. For this reason the AZ-Touch MOD is recommended over the AZ-Touch Feather. Pros Cons Versatile PCB options All components need soldering Choice of several ESP32 MCUs Bulky enclosure 9 to 35V DC-DC power input Resistive touchpanel Breadboard area AZ-Touch Feather Feather dev boards ~ We do not offer pre-built binaries for the AZ-Touch Feather yet but these dev boards should work: Board HUZZAH32 SparkFun Thing Plus MCU ESP32-WROOM ESP32-WROOM Flash 4 MB 16 MB PSram No No Buy Buy Documentation ~ Schematics Datasheet Assembly Guide Backlight Control ~ GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display. Enclosure ~ Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch Feather contains loose components that you need to solder to the PCB yourself using the Assembly Guide . The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D). Flashing ~ The ESP32 can be flashed over USB like any ESP32 development board.","title":"AZ-Touch Feather"},{"location":"hardware/az-delivery/feather/#az-touch-feather","text":"The AZ-Touch Feather also uses a 2.8\" TFT display but the footprint on the PCB is only suitable for the Adafruit Feather family of MCUs. This AZ-Touch Feather kit can also be used to run openHASP with the HUZZAH32 or SparkFun Thing Plus ESP32-WROOM development boards. Unlike the AZ-Touch MOD, the AZ-Touch Feather is a self-solder kit! You have to solder all components to the PCB yourself. For this reason the AZ-Touch MOD is recommended over the AZ-Touch Feather. Pros Cons Versatile PCB options All components need soldering Choice of several ESP32 MCUs Bulky enclosure 9 to 35V DC-DC power input Resistive touchpanel Breadboard area AZ-Touch Feather","title":"AZ-Touch Feather"},{"location":"hardware/az-delivery/feather/#feather-dev-boards","text":"We do not offer pre-built binaries for the AZ-Touch Feather yet but these dev boards should work: Board HUZZAH32 SparkFun Thing Plus MCU ESP32-WROOM ESP32-WROOM Flash 4 MB 16 MB PSram No No Buy Buy","title":"Feather dev boards"},{"location":"hardware/az-delivery/feather/#documentation","text":"Schematics Datasheet Assembly Guide","title":"Documentation"},{"location":"hardware/az-delivery/feather/#backlight-control","text":"GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display.","title":"Backlight Control"},{"location":"hardware/az-delivery/feather/#enclosure","text":"Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch Feather contains loose components that you need to solder to the PCB yourself using the Assembly Guide . The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D).","title":"Enclosure"},{"location":"hardware/az-delivery/feather/#flashing","text":"The ESP32 can be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/dustin-watts/esp32-touchdown/","text":"ESP32 TouchDown ~ more images... Features ~ ESP32-WROOM-32D ILI9488 3.5\" (480*320) TFT screen in 4-wire SPI mode FT62x6 Capacitive Touch Controller APK2112 3.3V regulator MCP73831 battery management IC CP2102 USB-to-UART IC USB-C connector Piezo Speaker microSD card holder Battery voltage divider connected to GPIO35 Stemma / JST-PH I2C connector Compact size: 100x57x15mm This board was originaly created for the FreeTouchDeck project and the hardware is also open source. Due to the extensive documentation it was easy to port openHASP to the ESP32-Touchdown. Pros Cons 480x320 display 4 MB flash Capactitive touch No PSram Battery connector Battery sensor The speaker and SD card are not supported by openHASP 0.7.0-rc9. Info Any 3.7V (nominal voltage) LiPo will work, 2000mAh battery should suffice. Be sure to have the correct polarity. If the connecter at the end of the battery does not match, gently remove the pins from the connector and put them back in the correct orientation. Available from: Tindie Eplop (UK) PCBway Product Video ~ Backlight Control ~ To enable backlight control, make sure the solder jumper pad is in position 2-1: 3D Printed Cases ~ You can find several different 3D printable cases in the ESP32 TouchDown repository : Flashing ~ The ESP32 TouchDown can easily be flashed over USB like any ESP32 development board. GPIO Settings ~ These pins can be used freely as GPIOs: PCB Blueprint ~ The ESP32 TouchDown is fully Open Source Hardware : Schematics Bill of materials PCB layout Datasheets HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.vspi} ; Use VSPI hardware SPI bus ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_CS = 15 ;// Chip select control pin -D TFT_DC = 2 ;// Data Command control pin -D TFT_RST = 4 ;// Reset pin (could connect to RST pin) -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_DRIVER = 6336 ; XPT2606 Resistive touch panel driver -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 27 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V -D TOUCH_FREQUENCY = 400000 -D SPI_FREQUENCY = 27000000 -D SPI_READ_FREQUENCY = 16000000 ;endregion","title":"ESP32 TouchDown"},{"location":"hardware/dustin-watts/esp32-touchdown/#esp32-touchdown","text":"more images...","title":"ESP32 TouchDown"},{"location":"hardware/dustin-watts/esp32-touchdown/#features","text":"ESP32-WROOM-32D ILI9488 3.5\" (480*320) TFT screen in 4-wire SPI mode FT62x6 Capacitive Touch Controller APK2112 3.3V regulator MCP73831 battery management IC CP2102 USB-to-UART IC USB-C connector Piezo Speaker microSD card holder Battery voltage divider connected to GPIO35 Stemma / JST-PH I2C connector Compact size: 100x57x15mm This board was originaly created for the FreeTouchDeck project and the hardware is also open source. Due to the extensive documentation it was easy to port openHASP to the ESP32-Touchdown. Pros Cons 480x320 display 4 MB flash Capactitive touch No PSram Battery connector Battery sensor The speaker and SD card are not supported by openHASP 0.7.0-rc9. Info Any 3.7V (nominal voltage) LiPo will work, 2000mAh battery should suffice. Be sure to have the correct polarity. If the connecter at the end of the battery does not match, gently remove the pins from the connector and put them back in the correct orientation. Available from: Tindie Eplop (UK) PCBway","title":"Features"},{"location":"hardware/dustin-watts/esp32-touchdown/#product-video","text":"","title":"Product Video"},{"location":"hardware/dustin-watts/esp32-touchdown/#backlight-control","text":"To enable backlight control, make sure the solder jumper pad is in position 2-1:","title":"Backlight Control"},{"location":"hardware/dustin-watts/esp32-touchdown/#3d-printed-cases","text":"You can find several different 3D printable cases in the ESP32 TouchDown repository :","title":"3D Printed Cases"},{"location":"hardware/dustin-watts/esp32-touchdown/#flashing","text":"The ESP32 TouchDown can easily be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/dustin-watts/esp32-touchdown/#gpio-settings","text":"These pins can be used freely as GPIOs:","title":"GPIO Settings"},{"location":"hardware/dustin-watts/esp32-touchdown/#pcb-blueprint","text":"The ESP32 TouchDown is fully Open Source Hardware : Schematics Bill of materials PCB layout Datasheets","title":"PCB Blueprint"},{"location":"hardware/dustin-watts/esp32-touchdown/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.vspi} ; Use VSPI hardware SPI bus ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_CS = 15 ;// Chip select control pin -D TFT_DC = 2 ;// Data Command control pin -D TFT_RST = 4 ;// Reset pin (could connect to RST pin) -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_DRIVER = 6336 ; XPT2606 Resistive touch panel driver -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 27 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V -D TOUCH_FREQUENCY = 400000 -D SPI_FREQUENCY = 27000000 -D SPI_READ_FREQUENCY = 16000000 ;endregion","title":"HASP build_flags"},{"location":"hardware/dustin-watts/freetouchdeck/","text":"FreeTouchDeck ~ more images... Features ~ ESP32 DevKitC (38pin) ILI9488 TFT SPI 4-WIRE XPT2046 resistive touch controller This board is created for the FreeTouchDeck project and the PCB-combiner board is open source. Due to the extensive documentation it was easy to port openHASP to the FreeTouchDeck. Pros Cons 480x320 Display 4 MB flash Price No PSram Build Instructions Resistive touch This is a kit so you need to assemble the parts yourself. Some soldering skills are required. You can 3D print a custom enclosure. Product Video ~ 3D Printed Cases ~ You can find a 3D printable case on Thingiverse and Github . Flashing ~ The FreeTouchDeck can easily be flashed over USB like any ESP32 development board. GPIO Settings ~ These pins can be used freely as GPIOs: PCB Blueprint ~ The PCB Combiner is fully Open Source Hardware : Schematics PCB layout HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_MISO = 19 ; don't connect TFT SDO if other SPI devices share MISO -D TFT_MOSI = 23 -D TFT_SCLK = 18 -D TFT_CS = 15 ; Chip select control pin -D TFT_DC = 2 ; Data Command control pin -D TFT_RST = 4 ; Reset pin (could connect to RST pin) -D TFT_BCKL = 32 ; Default, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_CS = 21 -D TOUCH_DRIVER = 2046 ; XPT2606 Resistive touch panel driver -D SPI_FREQUENCY = 27000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 ;endregion","title":"FreeTouchDeck"},{"location":"hardware/dustin-watts/freetouchdeck/#freetouchdeck","text":"more images...","title":"FreeTouchDeck"},{"location":"hardware/dustin-watts/freetouchdeck/#features","text":"ESP32 DevKitC (38pin) ILI9488 TFT SPI 4-WIRE XPT2046 resistive touch controller This board is created for the FreeTouchDeck project and the PCB-combiner board is open source. Due to the extensive documentation it was easy to port openHASP to the FreeTouchDeck. Pros Cons 480x320 Display 4 MB flash Price No PSram Build Instructions Resistive touch This is a kit so you need to assemble the parts yourself. Some soldering skills are required. You can 3D print a custom enclosure.","title":"Features"},{"location":"hardware/dustin-watts/freetouchdeck/#product-video","text":"","title":"Product Video"},{"location":"hardware/dustin-watts/freetouchdeck/#3d-printed-cases","text":"You can find a 3D printable case on Thingiverse and Github .","title":"3D Printed Cases"},{"location":"hardware/dustin-watts/freetouchdeck/#flashing","text":"The FreeTouchDeck can easily be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/dustin-watts/freetouchdeck/#gpio-settings","text":"These pins can be used freely as GPIOs:","title":"GPIO Settings"},{"location":"hardware/dustin-watts/freetouchdeck/#pcb-blueprint","text":"The PCB Combiner is fully Open Source Hardware : Schematics PCB layout","title":"PCB Blueprint"},{"location":"hardware/dustin-watts/freetouchdeck/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_MISO = 19 ; don't connect TFT SDO if other SPI devices share MISO -D TFT_MOSI = 23 -D TFT_SCLK = 18 -D TFT_CS = 15 ; Chip select control pin -D TFT_DC = 2 ; Data Command control pin -D TFT_RST = 4 ; Reset pin (could connect to RST pin) -D TFT_BCKL = 32 ; Default, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_CS = 21 -D TOUCH_DRIVER = 2046 ; XPT2606 Resistive touch panel driver -D SPI_FREQUENCY = 27000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 ;endregion","title":"HASP build_flags"},{"location":"hardware/espressif/esp-s3-box/","text":"ESP-S3-BOX ~ Features ~ The ESP-BOX is a development kit by Espressif that features an ESP32-S3 with 8MB of PSRAM, a 320x240 2.4\" LCD and a TT21100 capacitive touchscreen controller. It also includes two microphones and a speaker, though these are not used by OpenHASP. A number of GPIOs are on the rear (or on the stand, if equipped). This devkit comes with a stand, which can be detached to hang the devkit on a wall instead. Power is supplied via USB-C, either plugged into the devkit or into its stand. Pros Cons With stand Poor viewing angles 8MB PSRAM Small display Capacitive touchscreen Gallery ~ Flashing ~ This devkit uses the native USB peripheral on the ESP32-S3. To put the devkit into flashing mode, hold the boot button (top button on the left edge) while clicking the reset button (bottom button on the left edge). After this, it can be flashed as usual. After flashing, click the reset button. You will need to open the serial port after flashing for the firmware to boot - in the UI, disable serial logging to fix this. Variations ~ ESP-S3-BOX-3 ~ This is not to be confused with the newer ESP-S3-BOX-3. The ESP-S3-BOX-3 uses the same display driver and may be compatible, but has not been tested yet. This variant also has 16MB of PSRAM. ESP-S3-BOX-LITE ~ A -LITE version also exists, which does not have a touch layer. The display controller is the same and should work for purely informational displays, though untested.","title":"Espressif"},{"location":"hardware/espressif/esp-s3-box/#esp-s3-box","text":"","title":"ESP-S3-BOX"},{"location":"hardware/espressif/esp-s3-box/#features","text":"The ESP-BOX is a development kit by Espressif that features an ESP32-S3 with 8MB of PSRAM, a 320x240 2.4\" LCD and a TT21100 capacitive touchscreen controller. It also includes two microphones and a speaker, though these are not used by OpenHASP. A number of GPIOs are on the rear (or on the stand, if equipped). This devkit comes with a stand, which can be detached to hang the devkit on a wall instead. Power is supplied via USB-C, either plugged into the devkit or into its stand. Pros Cons With stand Poor viewing angles 8MB PSRAM Small display Capacitive touchscreen","title":"Features"},{"location":"hardware/espressif/esp-s3-box/#gallery","text":"","title":"Gallery"},{"location":"hardware/espressif/esp-s3-box/#flashing","text":"This devkit uses the native USB peripheral on the ESP32-S3. To put the devkit into flashing mode, hold the boot button (top button on the left edge) while clicking the reset button (bottom button on the left edge). After this, it can be flashed as usual. After flashing, click the reset button. You will need to open the serial port after flashing for the firmware to boot - in the UI, disable serial logging to fix this.","title":"Flashing"},{"location":"hardware/espressif/esp-s3-box/#variations","text":"","title":"Variations"},{"location":"hardware/espressif/esp-s3-box/#esp-s3-box-3","text":"This is not to be confused with the newer ESP-S3-BOX-3. The ESP-S3-BOX-3 uses the same display driver and may be compatible, but has not been tested yet. This variant also has 16MB of PSRAM.","title":"ESP-S3-BOX-3"},{"location":"hardware/espressif/esp-s3-box/#esp-s3-box-lite","text":"A -LITE version also exists, which does not have a touch layer. The display controller is the same and should work for purely informational displays, though untested.","title":"ESP-S3-BOX-LITE"},{"location":"hardware/generic/ili9341-ips/","text":"ILI9341 IPS Panel ~ A 240x320 IPS TFT display with an ILI9341 controller and XPT2046 touch controller. Improvement over TN versions of the display with amazing view angles. Buy Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 Module Ground GND GND 2 Module Power 3.3v 3V3 VCC 3 SPI Clock GPIO18 TFT_SCLK CLK 4 Data Input GPIO23 TFT_MOSI MOSI 5 LCD Reset line GPIO15 TFT_RST RES 6 Data Command control GPIO5 TFT_DC DC 7 Backlight GPIO21 TFT_BCKL BLK 8 Data Output GPIO19 TFT_MISO MISO 9 Chip Select GPIO26 TFT_CS CS1 10 Touch Select GPIO17 TOUCH_CS CS2 11 Touch Interrupt N/C TOUCH_IRQ PEN SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. Custom build ~ Define a custom environment in platformio_override.ini and add a new esp32_ili9341_spi entry under extra_default_envs = If you've wired pins differently, change the values below. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 ;-- ILI9341 SPI version ------------------------ [env:esp32_ili9341_spi] platform = espressif32 platform_packages = framework-arduinoespressif32 framework = arduino board = esp32dev monitor_port = COM4 upload_port = ${env:esp32_ili9341_spi.monitor_port} monitor_filters = esp32_exception_decoder board_build.partitions = user_setups/esp32_partition_app1300k_spiffs1216k.csv build_flags = ${env.build_flags} ${esp32.build_flags} -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; see TFT_ROTATION values -D INVERT_COLORS = 1 ; to fix colors -D SPI_FREQUENCY = 60000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS ${esp32.vspi} ; Use VSPI hardware SPI bus : ; TFT_MISO=19 | TFT_MOSI=23 | TFT_SCLK=18 ; MISO = 8 | MOSI = 4 | CLK = 3 ; wiring recommendations, change pins according to your wiring -D TFT_DC = 5 ; DC, lcd pin 3 -D TFT_RST = 15 ; RES, lcd pin 5 -D TFT_BCKL = -1 ; BLK, lcd pin 7 (configurable via web UI (e.g. 21)) -D TFT_CS = 26 ; CS1, lcd pin 9 -D TOUCH_CS = 17 ; CS2, lcd pin 10 lib_deps = ${env.lib_deps} ${esp32.lib_deps} lib_ignore = ${env.lib_ignore} ${esp32.lib_ignore} extra_scripts = ${env.extra_scripts} ${esp32.extra_scripts}","title":"ILI9341 IPS"},{"location":"hardware/generic/ili9341-ips/#ili9341-ips-panel","text":"A 240x320 IPS TFT display with an ILI9341 controller and XPT2046 touch controller. Improvement over TN versions of the display with amazing view angles. Buy","title":"ILI9341 IPS Panel"},{"location":"hardware/generic/ili9341-ips/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 Module Ground GND GND 2 Module Power 3.3v 3V3 VCC 3 SPI Clock GPIO18 TFT_SCLK CLK 4 Data Input GPIO23 TFT_MOSI MOSI 5 LCD Reset line GPIO15 TFT_RST RES 6 Data Command control GPIO5 TFT_DC DC 7 Backlight GPIO21 TFT_BCKL BLK 8 Data Output GPIO19 TFT_MISO MISO 9 Chip Select GPIO26 TFT_CS CS1 10 Touch Select GPIO17 TOUCH_CS CS2 11 Touch Interrupt N/C TOUCH_IRQ PEN SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller.","title":"Pin Configuration"},{"location":"hardware/generic/ili9341-ips/#custom-build","text":"Define a custom environment in platformio_override.ini and add a new esp32_ili9341_spi entry under extra_default_envs = If you've wired pins differently, change the values below. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 ;-- ILI9341 SPI version ------------------------ [env:esp32_ili9341_spi] platform = espressif32 platform_packages = framework-arduinoespressif32 framework = arduino board = esp32dev monitor_port = COM4 upload_port = ${env:esp32_ili9341_spi.monitor_port} monitor_filters = esp32_exception_decoder board_build.partitions = user_setups/esp32_partition_app1300k_spiffs1216k.csv build_flags = ${env.build_flags} ${esp32.build_flags} -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; see TFT_ROTATION values -D INVERT_COLORS = 1 ; to fix colors -D SPI_FREQUENCY = 60000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS ${esp32.vspi} ; Use VSPI hardware SPI bus : ; TFT_MISO=19 | TFT_MOSI=23 | TFT_SCLK=18 ; MISO = 8 | MOSI = 4 | CLK = 3 ; wiring recommendations, change pins according to your wiring -D TFT_DC = 5 ; DC, lcd pin 3 -D TFT_RST = 15 ; RES, lcd pin 5 -D TFT_BCKL = -1 ; BLK, lcd pin 7 (configurable via web UI (e.g. 21)) -D TFT_CS = 26 ; CS1, lcd pin 9 -D TOUCH_CS = 17 ; CS2, lcd pin 10 lib_deps = ${env.lib_deps} ${esp32.lib_deps} lib_ignore = ${env.lib_ignore} ${esp32.lib_ignore} extra_scripts = ${env.extra_scripts} ${esp32.extra_scripts}","title":"Custom build"},{"location":"hardware/generic/mhs4001/","text":"MHS4001 ~ 6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor. Including the Vcc and Gnd pins, a total of 12 connections need to be made to the MCU: Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected NC 4 LED Backlight PWM 5V TFT_BCKL 5V 5-10 Not connected NC 11 Touch Interrupt NC TP_IRQ 12-13 Not connected NC 14 Module Ground GND GND 15-16 Not connected NC 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO23 TFT_MOSI LCD/SI/TP_SI 20 Not connected NC 21 Touch Panel Slave Out GPIO19 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO18 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO15 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS By default, pin 4 is normally connected to 5V. This turns the display backlight LED on all time. In order to control the backlight you can drive pin 4 of the display using a PNP transistor. The electronics circuit needed is not part of this diagram. SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the 7 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_CS = 15 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = -1 ; None -D TOUCH_CS = 22","title":"MHS4001"},{"location":"hardware/generic/mhs4001/#mhs4001","text":"6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor. Including the Vcc and Gnd pins, a total of 12 connections need to be made to the MCU:","title":"MHS4001"},{"location":"hardware/generic/mhs4001/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected NC 4 LED Backlight PWM 5V TFT_BCKL 5V 5-10 Not connected NC 11 Touch Interrupt NC TP_IRQ 12-13 Not connected NC 14 Module Ground GND GND 15-16 Not connected NC 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO23 TFT_MOSI LCD/SI/TP_SI 20 Not connected NC 21 Touch Panel Slave Out GPIO19 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO18 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO15 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS By default, pin 4 is normally connected to 5V. This turns the display backlight LED on all time. In order to control the backlight you can drive pin 4 of the display using a PNP transistor. The electronics circuit needed is not part of this diagram. SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller.","title":"Pin Configuration"},{"location":"hardware/generic/mhs4001/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/generic/mhs4001/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the 7 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_CS = 15 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = -1 ; None -D TOUCH_CS = 22","title":"HASP build_flags"},{"location":"hardware/generic/mrb3511/","text":"MRB3511 ~ 14 GPIOs are required to drive the 8-bit parallel display. Another 3 GPIOs are needed for the I\u00b2C touch sensor. Including the Vcc, Gnd an Rst pins, a total of 23 connections need to be made to the MCU: Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 Chip select control pin GPIO33 TFT_CS CS 2 Data Command control pin GPIO15 TFT_DC RS 3 Write control pin GPIO04 TFT_WR WR 4 Read control pin GPIO02 TFT_RD RD 5 LCD Reset pin GPIO32 TFT_RST RST 6 GPIO12 TFT_D0 D0 7 GPIO13 TFT_D1 D1 8 GPIO26 TFT_D2 D2 9 8-bit parallel data GPIO25 TFT_D3 D3 10 GPIO17 TFT_D4 D4 11 GPIO16 TFT_D5 D5 12 GPIO27 TFT_D6 D6 13 GPIO14 TFT_D7 D7 14-21 Not used, don't connect N/C D8-15 22 Module Ground GND GND 23 LED Backlight PWM GPIO5 TFT_BCKL BL 24-25 Module Power - VDD 26-27 Module Ground GND GND 28-29 Not connected NC 30 IO, I\u00b2C SDA GPIO21 TOUCH_SDA SDA 31 Touch Chip Interrupt GPIO34 TOUCH_IRQ INT 32 Not connected NC 33 Touch IC Reset 3.3V CRST 34 IO, I\u00b2C SCL GPIO22 TOUCH_SCL SCL You need to desolder the 0R resistor on the back side of the panel from the 16-bit position. Then solder back the 0R resistor in the 8-bit position. There are no pins shared between the touch controller and the LCD controller. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 mrb3511 = -D ESP32_PARALLEL = 1 -D ILI9488_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 911 ; GT911 Capacitive touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the 17 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.mrb3511} -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D TFT_CS = 33 ; Chip select control pin -D TFT_DC = 15 ; =RS; Data Command control pin - must use a pin in the range 0-31 -D TFT_RST = 32 ; Reset pin -D TFT_WR = 4 ; Write strobe control pin - must use a pin in the range 0-31 -D TFT_RD = 2 -D TFT_D0 = 12 ; Must use pins in the range 0-31 for the data bus -D TFT_D1 = 13 ; so a single register write sets/clears all bits -D TFT_D2 = 26 -D TFT_D3 = 25 -D TFT_D4 = 17 -D TFT_D5 = 16 -D TFT_D6 = 27 -D TFT_D7 = 14 -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 34 ; use 34-39 as these are input only pins -D TOUCH_RST = -1 ; not used, connected to 3.3V","title":"MRB3511"},{"location":"hardware/generic/mrb3511/#mrb3511","text":"14 GPIOs are required to drive the 8-bit parallel display. Another 3 GPIOs are needed for the I\u00b2C touch sensor. Including the Vcc, Gnd an Rst pins, a total of 23 connections need to be made to the MCU:","title":"MRB3511"},{"location":"hardware/generic/mrb3511/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 Chip select control pin GPIO33 TFT_CS CS 2 Data Command control pin GPIO15 TFT_DC RS 3 Write control pin GPIO04 TFT_WR WR 4 Read control pin GPIO02 TFT_RD RD 5 LCD Reset pin GPIO32 TFT_RST RST 6 GPIO12 TFT_D0 D0 7 GPIO13 TFT_D1 D1 8 GPIO26 TFT_D2 D2 9 8-bit parallel data GPIO25 TFT_D3 D3 10 GPIO17 TFT_D4 D4 11 GPIO16 TFT_D5 D5 12 GPIO27 TFT_D6 D6 13 GPIO14 TFT_D7 D7 14-21 Not used, don't connect N/C D8-15 22 Module Ground GND GND 23 LED Backlight PWM GPIO5 TFT_BCKL BL 24-25 Module Power - VDD 26-27 Module Ground GND GND 28-29 Not connected NC 30 IO, I\u00b2C SDA GPIO21 TOUCH_SDA SDA 31 Touch Chip Interrupt GPIO34 TOUCH_IRQ INT 32 Not connected NC 33 Touch IC Reset 3.3V CRST 34 IO, I\u00b2C SCL GPIO22 TOUCH_SCL SCL You need to desolder the 0R resistor on the back side of the panel from the 16-bit position. Then solder back the 0R resistor in the 8-bit position. There are no pins shared between the touch controller and the LCD controller.","title":"Pin Configuration"},{"location":"hardware/generic/mrb3511/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 mrb3511 = -D ESP32_PARALLEL = 1 -D ILI9488_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 911 ; GT911 Capacitive touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/generic/mrb3511/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the 17 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.mrb3511} -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D TFT_CS = 33 ; Chip select control pin -D TFT_DC = 15 ; =RS; Data Command control pin - must use a pin in the range 0-31 -D TFT_RST = 32 ; Reset pin -D TFT_WR = 4 ; Write strobe control pin - must use a pin in the range 0-31 -D TFT_RD = 2 -D TFT_D0 = 12 ; Must use pins in the range 0-31 for the data bus -D TFT_D1 = 13 ; so a single register write sets/clears all bits -D TFT_D2 = 26 -D TFT_D3 = 25 -D TFT_D4 = 17 -D TFT_D5 = 16 -D TFT_D6 = 27 -D TFT_D7 = 14 -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 34 ; use 34-39 as these are input only pins -D TOUCH_RST = -1 ; not used, connected to 3.3V","title":"HASP build_flags"},{"location":"hardware/generic/msp-series/","text":"ILI9341 TFT Panel ~ Models: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 The \"red\" 240x320 TFT displays with an ILI9341 controller and XPT2046 touch controller are very common. Make sure to select the touch version when ordering these screens online. The U2 touch chip needs to be populated on the board. Gallery ~ Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 5V/3.3V power input 5V/3.3V VCC 2 Module Ground GND GND 3 Chip Select GPIO26 TFT_CS CS 4 LCD Reset line GPIO15 TFT_RST RESET 5 Data Command control GPIO5 TFT_DC DC 6 Data Input GPIO23 TFT_MOSI SDI(MOSI) 7 SPI Clock GPIO18 TFT_SCLK SCK 8 Backlight GPIO21 TFT_BCKL LED 9 Data Output (not used) GPIO19 or N/C TFT_MISO SDO(MISO) 10 Touch SPI Clock GPIO18 TFT_SCLK T_CLK 11 Touch Select GPIO17 TOUCH_CS T_CS 12 Touch Data Input GPIO23 TFT_MOSI T_DIN 13 Touch Data Output GPIO19 TFT_MISO T_DO 14 Touch Interrupt N/C T_IRQ SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. In some cases the pin 9 MISO of the LCD can prevent proper display initialization. This pin is not used by openHASP, so it can be left disconnected in case of issues. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 lolin24 = -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; Use default, see TFT_ROTATION values -D SPI_FREQUENCY = 40000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ ${lcd.lolin24} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_DC = 5 -D TFT_CS = 26 -D TFT_RST = -1 ; RST -D TFT_BCKL = -1 ; None, configurable via web UI (e.g. 21) -D TOUCH_CS = 17 ; (can also be 22 or 16) ;endregion","title":"MSP Series (Red PCB)"},{"location":"hardware/generic/msp-series/#ili9341-tft-panel","text":"Models: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 The \"red\" 240x320 TFT displays with an ILI9341 controller and XPT2046 touch controller are very common. Make sure to select the touch version when ordering these screens online. The U2 touch chip needs to be populated on the board.","title":"ILI9341 TFT Panel"},{"location":"hardware/generic/msp-series/#gallery","text":"","title":"Gallery"},{"location":"hardware/generic/msp-series/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 5V/3.3V power input 5V/3.3V VCC 2 Module Ground GND GND 3 Chip Select GPIO26 TFT_CS CS 4 LCD Reset line GPIO15 TFT_RST RESET 5 Data Command control GPIO5 TFT_DC DC 6 Data Input GPIO23 TFT_MOSI SDI(MOSI) 7 SPI Clock GPIO18 TFT_SCLK SCK 8 Backlight GPIO21 TFT_BCKL LED 9 Data Output (not used) GPIO19 or N/C TFT_MISO SDO(MISO) 10 Touch SPI Clock GPIO18 TFT_SCLK T_CLK 11 Touch Select GPIO17 TOUCH_CS T_CS 12 Touch Data Input GPIO23 TFT_MOSI T_DIN 13 Touch Data Output GPIO19 TFT_MISO T_DO 14 Touch Interrupt N/C T_IRQ SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. In some cases the pin 9 MISO of the LCD can prevent proper display initialization. This pin is not used by openHASP, so it can be left disconnected in case of issues.","title":"Pin Configuration"},{"location":"hardware/generic/msp-series/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 lolin24 = -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; Use default, see TFT_ROTATION values -D SPI_FREQUENCY = 40000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/generic/msp-series/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ ${lcd.lolin24} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_DC = 5 -D TFT_CS = 26 -D TFT_RST = -1 ; RST -D TFT_BCKL = -1 ; None, configurable via web UI (e.g. 21) -D TOUCH_CS = 17 ; (can also be 22 or 16) ;endregion","title":"HASP build_flags"},{"location":"hardware/golden-security/gs-t3e/","text":"GS-T3E ~ Models ~ EU model: 3 gang relay switch CN model: 4 gang relay switch Only the PCB revision v2.3 (20221205) is supported by openHASP. Specify that you want the new device with PCB revision v2.3 when ordering from known vendor Golden Security on Alibaba. Warning Do NOT buy PCB revision v1.23 (20220817) because the internal antenna connector is NOT soldered onto the board. Those devices will have no WiFi reception on the ESP32! This version is now discontinued, but some sellers might have old stock. Form factor ~ EU model: 86mm x 86mm CN model: info not available Maximum load is 200W per gang, 600W in total EU version. The models have the same recessed housing sliding into the wall, sized 50x50mm, with rounded corners creating a diameter of about 59mm. This makes them suitable for both EU and UK wall fixtures. The EU model fits in a properly deployed, standard 60mm round wall box and can be fixed with two side screws (use the screws which belong to the box instead of the ones shipped with the device). The CN model has not been tested yet. Features: ~ Input voltage 110-250V ~ 50-60Hz AC ESP32-S3-WROOM-1 (Xtensa-LX7 dual core 240MHz) 8 MB PSram - Octal SPI 16 MB flash - Quad SPI Capacitive GT911 touch screen Pros Cons 8 MB flash Tuya device with ZS3L Tuya chip on PCB (unused) 16 MB PSram Flash header pins not populated 480x480 HD IPS LCD Capactitive touch Built-in PSU Standard wallmount form factor both EU and UK Buy Note openHASP does not support the proprietary Tuya chip, but you can still flash the firmware and use the other GS-T3E features just fine. Packaging ~ Flashing ~ Disclaimer Never connect high-voltage when the panel is not properly secured in place. Device can be flashed by either using the USB port or the flash header pins and a FTDI serial programmer device. Steps to flash via USB: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect a Micro USB cable Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Steps to flash via UART: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect jumper wires: GND <--> GND 5V <--> 5V RX <--> RX (not reversed!) TX <--> TX (not reversed!) Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Once the connections are made, flash the GS-T3E ESP32 binary like on any other device. GPIO Settings ~ 3-gang EU version GS-T3E ~ Pin Mode GS-T3E Group Default 45 Output Relay L1 1 Low (Normal) 46 Output Relay L2 2 Low (Normal) 44 Output Relay L3 3 Low (Normal) Tip To configure the GPIOs as light switches at once for GS-T3E send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 655918 , 656172 , 655661 , 0 , 0 , 0 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721454 , 721708 , 721197 , 0 , 0 , 0 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 } Wiring Diagram ~ The switch supports this wiring configuration: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring. Product Video ~ Your browser does not support the video tag. Gallery ~","title":"Golden Security"},{"location":"hardware/golden-security/gs-t3e/#gs-t3e","text":"","title":"GS-T3E "},{"location":"hardware/golden-security/gs-t3e/#models","text":"EU model: 3 gang relay switch CN model: 4 gang relay switch Only the PCB revision v2.3 (20221205) is supported by openHASP. Specify that you want the new device with PCB revision v2.3 when ordering from known vendor Golden Security on Alibaba. Warning Do NOT buy PCB revision v1.23 (20220817) because the internal antenna connector is NOT soldered onto the board. Those devices will have no WiFi reception on the ESP32! This version is now discontinued, but some sellers might have old stock.","title":"Models"},{"location":"hardware/golden-security/gs-t3e/#packaging","text":"","title":"Packaging"},{"location":"hardware/golden-security/gs-t3e/#flashing","text":"Disclaimer Never connect high-voltage when the panel is not properly secured in place. Device can be flashed by either using the USB port or the flash header pins and a FTDI serial programmer device. Steps to flash via USB: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect a Micro USB cable Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Steps to flash via UART: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect jumper wires: GND <--> GND 5V <--> 5V RX <--> RX (not reversed!) TX <--> TX (not reversed!) Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Once the connections are made, flash the GS-T3E ESP32 binary like on any other device.","title":"Flashing"},{"location":"hardware/golden-security/gs-t3e/#gpio-settings","text":"","title":"GPIO Settings"},{"location":"hardware/golden-security/gs-t3e/#3-gang-eu-version-gs-t3e","text":"Pin Mode GS-T3E Group Default 45 Output Relay L1 1 Low (Normal) 46 Output Relay L2 2 Low (Normal) 44 Output Relay L3 3 Low (Normal) Tip To configure the GPIOs as light switches at once for GS-T3E send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 655918 , 656172 , 655661 , 0 , 0 , 0 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721454 , 721708 , 721197 , 0 , 0 , 0 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 }","title":"3-gang EU version GS-T3E"},{"location":"hardware/golden-security/gs-t3e/#wiring-diagram","text":"The switch supports this wiring configuration: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring.","title":"Wiring Diagram"},{"location":"hardware/golden-security/gs-t3e/#product-video","text":"Your browser does not support the video tag.","title":"Product Video"},{"location":"hardware/golden-security/gs-t3e/#gallery","text":"","title":"Gallery"},{"location":"hardware/lanbon/lanbon-l8/","text":"Lanbon L8 ~ Models ~ L8-HS: 3 Relays - load up to 200W/gang L8-HD: 1 Dimmer - load up to 200W/gang L8-HB: Boiler switch - load up to 16A L8-HT: Thermostat switch - not tested! Warning Choose a model that works with Apple HomeKit because those are WiFi versions with the internal antenna connected to the ESP32. Do NOT buy a version that is powered by Tuya Smart Life because the internal antenna is connected to the Tuya chip. Those devices will have very bad WiFi reception of the ESP32! Form factor ~ EU model: 86mm x 86mm US model: 120mm x 74mm All models are rated at AC 100-250V ~50-60Hz, the form factor can be a design choice regardless of the continental area. The models have the same recessed housing sliding into the wall, sized 50x50mm, with rounded corners creating a diameter of about 59mm. This makes them suitable for both EU and US wall fixtures. The EU model fits in a properly deployed, standard 60mm round wall box and can be fixed with two side screws (use the screws which belong to the box instead of the ones shipped with the device), the US model fits in the standard rectangular box and can be fixed through the oval holes located 3 1/4\" apart. The depth of the wall box has to be at least 35-40mm because some room is needed for the wires coming out straight of the device. Bezel Color ~ Black White Features: ~ Input voltage 110-250V ~ 50-60Hz AC ESP32-WROVER-B Capacitive touch screen Energy counter Pros Cons 8 MB flash Mood LEDS not uniform 8 MB PSram Capactitive touch Built-in PSU Energy monitor Standard wallmount form factor both EU and US Buy Note 1 An earlier revision V1.14 (20191203) of the PCB had an analog temperature sensor onboard. It was removed from V1.15 (20200521) of the PCB. You are likely not to get it when buying a recent switch. Note 2 There is a new V1.17 of the PCB with Tuya support. openHASP does not support the proprietary Tuya chip, but you can still flash the firmware and use the other Lanbon L8 features just fine. Contents ~ Flashing ~ Disclaimer Never connect high-voltage when the panel is not properly secured in place. You can follow this flashing guide on blakadder.com or this discussion post with instructions and photos to flash the firmware without having to open the device. Steps: Disengage the high-voltage power Detach the panel from the PSU power supply Connect RX , TX , IO0 , GND and 5V pins to the female pinheader Because there is no RESET pin, you need to powercycle the board while IO0 is connected to GND to activate flash mode Make sure you have a USB to serial adapter than can provide sufficient power on the 5V pin . Once the serial connections are made, flash the Lanbon-L8 ESP32 binary like on any other device. GPIO Settings ~ 3-gang version L8-HS ~ Pin Mode L8-HS Group Default 12 Output Relay (K3) 1 Low (Normal) 14 Output Relay 2 Low (Normal) 26 Output Mood Red 4 Low (Normal) 27 Output Relay 3 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs as light switches at once for L8-HS send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 197658 , 263456 , 329249 , 655628 , 655886 , 656155 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721164 , 721422 , 197658 , 721691 , 263456 , 329249 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 } Dimmer version L8-HD ~ Pin Mode L8-HD Group Default 12 Output Dimmer TX (K3) 1 Low (Normal) 26 Output Mood Red 4 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Warning There are two versions of the dimmer configuration: EU and AU . The protocol used to command the dimmer module differs between the two! Make sure that you have the correct type configured under your GPIO Output settings for pin 12 . Use the AU configuration for any 120V/US compatible dimmer modules. Tip To configure the GPIOs at once for L8-HD send to topic hasp/<nodename>/config/gpio a message with payload: EU version: 1 { \"config\" :[ 3211532 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]} AU/US version: 1 { \"config\" :[ 3277068 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]} Boiler version L8-HB ~ Pin Mode L8-HB Group Default 26 Output Mood Red 4 Low (Normal) 27 Output Relay 16A (K1) 1 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs at once for L8-HB send to topic hasp/<nodename>/config a message with payload: 1 { \"gpio\" :{ \"config\" :[ 197658 , 263456 , 329249 , 721179 , 14 , 27 , 0 , 0 ]}} Developer Note You can build your own firmware with GPIOs and many other parameters pre-configured in user_config_override.h as factory defaults for Lanbon L8. Wiring Diagrams ~ The switch supports several wiring configurations: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring. Product Video ~ Your browser does not support the video tag. Gallery ~ LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 st7789v = -D ST7789_DRIVER = 1 ;-D CGRAM_OFFSET=1 ; Library will add offsets required -D TFT_SDA_READ ; Read from display, it only provides an SDA pin -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 2 ; see TFT_ROTATION values ; -D TFT_INVERSION_OFF ; for normal colors ; -D TFT_RGB_ORDER=TFT_RGB ; Colour order Red-Green-Blue -D TFT_RGB_ORDER = TFT_BGR ; Colour order Blue-Green-Red -D SPI_FREQUENCY = 80000000 -D SPI_READ_FREQUENCY = 6000000 -D USER_SETUP_LOADED = 1 -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.ps_ram} ;region -- TFT_eSPI build options ------------------------ ${lcd.st7789v} -D LANBONL8 -D TFT_RST = 18 ; FCP pin2 RESET -D TFT_SCLK = 19 ; FCP pin3 SCL -D TFT_DC = 21 ; FCP pin4 D/C -D TFT_CS = 22 ; FCP pin5 CS -D TFT_MOSI = 23 ; FCP pin6 SDA -D TFT_MISO = 25 ; FCP pin7 SDO -D TFT_BCKL = 5 -D TOUCH_DRIVER = 6336 -D TOUCH_SDA = 4 -D TOUCH_SCL = 0 -D TOUCH_IRQ = -1 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V on FCP pin10 -D TOUCH_FREQUENCY = 400000 -D LED_RED = 26 -D LED_GREEN = 32 -D LED_BLUE = 33 -D RELAY_1 = 12 -D RELAY_2 = 24 -D RELAY_3 = 37 ;endregion","title":"Lanbon"},{"location":"hardware/lanbon/lanbon-l8/#lanbon-l8","text":"","title":"Lanbon L8"},{"location":"hardware/lanbon/lanbon-l8/#models","text":"L8-HS: 3 Relays - load up to 200W/gang L8-HD: 1 Dimmer - load up to 200W/gang L8-HB: Boiler switch - load up to 16A L8-HT: Thermostat switch - not tested! Warning Choose a model that works with Apple HomeKit because those are WiFi versions with the internal antenna connected to the ESP32. Do NOT buy a version that is powered by Tuya Smart Life because the internal antenna is connected to the Tuya chip. Those devices will have very bad WiFi reception of the ESP32!","title":"Models"},{"location":"hardware/lanbon/lanbon-l8/#contents","text":"","title":"Contents"},{"location":"hardware/lanbon/lanbon-l8/#flashing","text":"Disclaimer Never connect high-voltage when the panel is not properly secured in place. You can follow this flashing guide on blakadder.com or this discussion post with instructions and photos to flash the firmware without having to open the device. Steps: Disengage the high-voltage power Detach the panel from the PSU power supply Connect RX , TX , IO0 , GND and 5V pins to the female pinheader Because there is no RESET pin, you need to powercycle the board while IO0 is connected to GND to activate flash mode Make sure you have a USB to serial adapter than can provide sufficient power on the 5V pin . Once the serial connections are made, flash the Lanbon-L8 ESP32 binary like on any other device.","title":"Flashing"},{"location":"hardware/lanbon/lanbon-l8/#gpio-settings","text":"","title":"GPIO Settings"},{"location":"hardware/lanbon/lanbon-l8/#3-gang-version-l8-hs","text":"Pin Mode L8-HS Group Default 12 Output Relay (K3) 1 Low (Normal) 14 Output Relay 2 Low (Normal) 26 Output Mood Red 4 Low (Normal) 27 Output Relay 3 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs as light switches at once for L8-HS send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 197658 , 263456 , 329249 , 655628 , 655886 , 656155 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721164 , 721422 , 197658 , 721691 , 263456 , 329249 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 }","title":"3-gang version L8-HS"},{"location":"hardware/lanbon/lanbon-l8/#dimmer-version-l8-hd","text":"Pin Mode L8-HD Group Default 12 Output Dimmer TX (K3) 1 Low (Normal) 26 Output Mood Red 4 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Warning There are two versions of the dimmer configuration: EU and AU . The protocol used to command the dimmer module differs between the two! Make sure that you have the correct type configured under your GPIO Output settings for pin 12 . Use the AU configuration for any 120V/US compatible dimmer modules. Tip To configure the GPIOs at once for L8-HD send to topic hasp/<nodename>/config/gpio a message with payload: EU version: 1 { \"config\" :[ 3211532 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]} AU/US version: 1 { \"config\" :[ 3277068 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]}","title":"Dimmer version L8-HD"},{"location":"hardware/lanbon/lanbon-l8/#boiler-version-l8-hb","text":"Pin Mode L8-HB Group Default 26 Output Mood Red 4 Low (Normal) 27 Output Relay 16A (K1) 1 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs at once for L8-HB send to topic hasp/<nodename>/config a message with payload: 1 { \"gpio\" :{ \"config\" :[ 197658 , 263456 , 329249 , 721179 , 14 , 27 , 0 , 0 ]}} Developer Note You can build your own firmware with GPIOs and many other parameters pre-configured in user_config_override.h as factory defaults for Lanbon L8.","title":"Boiler version L8-HB"},{"location":"hardware/lanbon/lanbon-l8/#wiring-diagrams","text":"The switch supports several wiring configurations: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring.","title":"Wiring Diagrams"},{"location":"hardware/lanbon/lanbon-l8/#product-video","text":"Your browser does not support the video tag.","title":"Product Video"},{"location":"hardware/lanbon/lanbon-l8/#gallery","text":"","title":"Gallery"},{"location":"hardware/lanbon/lanbon-l8/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 st7789v = -D ST7789_DRIVER = 1 ;-D CGRAM_OFFSET=1 ; Library will add offsets required -D TFT_SDA_READ ; Read from display, it only provides an SDA pin -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 2 ; see TFT_ROTATION values ; -D TFT_INVERSION_OFF ; for normal colors ; -D TFT_RGB_ORDER=TFT_RGB ; Colour order Red-Green-Blue -D TFT_RGB_ORDER = TFT_BGR ; Colour order Blue-Green-Red -D SPI_FREQUENCY = 80000000 -D SPI_READ_FREQUENCY = 6000000 -D USER_SETUP_LOADED = 1 -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/lanbon/lanbon-l8/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.ps_ram} ;region -- TFT_eSPI build options ------------------------ ${lcd.st7789v} -D LANBONL8 -D TFT_RST = 18 ; FCP pin2 RESET -D TFT_SCLK = 19 ; FCP pin3 SCL -D TFT_DC = 21 ; FCP pin4 D/C -D TFT_CS = 22 ; FCP pin5 CS -D TFT_MOSI = 23 ; FCP pin6 SDA -D TFT_MISO = 25 ; FCP pin7 SDO -D TFT_BCKL = 5 -D TOUCH_DRIVER = 6336 -D TOUCH_SDA = 4 -D TOUCH_SCL = 0 -D TOUCH_IRQ = -1 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V on FCP pin10 -D TOUCH_FREQUENCY = 400000 -D LED_RED = 26 -D LED_GREEN = 32 -D LED_BLUE = 33 -D RELAY_1 = 12 -D RELAY_2 = 24 -D RELAY_3 = 37 ;endregion","title":"HASP build_flags"},{"location":"hardware/lilygo/lilygo-lily-pi/","text":"LilyGO\u00ae Lily Pi ~ Features ~ ESP32-WROVER ILI9481 or ST7796 3.5\" (480*320) TFT screen in 4-wire SPI mode FT6X36 or GT911 Capacitive Touch Controller CP2104 USB-to-UART IC USB-C connector DC 5-12V barrel jack (5.5x2.1mm) Relay HFD3 5V 2A microSD card holder Real Time Clock PCF8563 Battery voltage divider connected to GPIO35 GPIO output via USB-A type connectors The Lily Pi is designed to resemble the Raspberry Pi appearance. The PCB layout and ports also mimmicks the Rasberry Pi. There is even the familiar 2x20 expansion port inside that match the Raspberry Pi GPIO pinout. Some Rpi expansion boards could work on this PCB too depending on the pins used. Pros Cons 480x320 display Non-standard USB-A connectors as GPIO 16 MB flash 8 MB PSram Capacitive Touchscreen The RTC and SD card are not supported by openHASP 0.7.0-rc9. Models ~ Model TN ST7796 FT6236 IPS ILI9481 GT911 SKU K113 K113-01 Resolution 480x320 480x320 TFT controller ST7796 ILI9481 Interface SPI SPI Touchscreen Capacitive Capacitive Touch controller FT6236 GT911 Screen dimming yes yes Buy AliExpress Tindie Buy AliExpress Tindie Video ~ Backlight Control ~ The GPIO that controls the backlight is GPIO12 . Documentation ~ The Lily Pi comes with the following information cards describing all the GPIOs used: Flashing ~ The LilyGO Lily Pi can easily be flashed over USB like any ESP32 development board. Dimensions ~ Size: 99.7 x 62.5 x 31.2mm","title":"Lily Pi"},{"location":"hardware/lilygo/lilygo-lily-pi/#lilygo-lily-pi","text":"","title":"LilyGO\u00ae Lily Pi"},{"location":"hardware/lilygo/lilygo-lily-pi/#features","text":"ESP32-WROVER ILI9481 or ST7796 3.5\" (480*320) TFT screen in 4-wire SPI mode FT6X36 or GT911 Capacitive Touch Controller CP2104 USB-to-UART IC USB-C connector DC 5-12V barrel jack (5.5x2.1mm) Relay HFD3 5V 2A microSD card holder Real Time Clock PCF8563 Battery voltage divider connected to GPIO35 GPIO output via USB-A type connectors The Lily Pi is designed to resemble the Raspberry Pi appearance. The PCB layout and ports also mimmicks the Rasberry Pi. There is even the familiar 2x20 expansion port inside that match the Raspberry Pi GPIO pinout. Some Rpi expansion boards could work on this PCB too depending on the pins used. Pros Cons 480x320 display Non-standard USB-A connectors as GPIO 16 MB flash 8 MB PSram Capacitive Touchscreen The RTC and SD card are not supported by openHASP 0.7.0-rc9.","title":"Features"},{"location":"hardware/lilygo/lilygo-lily-pi/#models","text":"Model TN ST7796 FT6236 IPS ILI9481 GT911 SKU K113 K113-01 Resolution 480x320 480x320 TFT controller ST7796 ILI9481 Interface SPI SPI Touchscreen Capacitive Capacitive Touch controller FT6236 GT911 Screen dimming yes yes Buy AliExpress Tindie Buy AliExpress Tindie","title":"Models"},{"location":"hardware/lilygo/lilygo-lily-pi/#video","text":"","title":"Video"},{"location":"hardware/lilygo/lilygo-lily-pi/#backlight-control","text":"The GPIO that controls the backlight is GPIO12 .","title":"Backlight Control"},{"location":"hardware/lilygo/lilygo-lily-pi/#documentation","text":"The Lily Pi comes with the following information cards describing all the GPIOs used:","title":"Documentation"},{"location":"hardware/lilygo/lilygo-lily-pi/#flashing","text":"The LilyGO Lily Pi can easily be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/lilygo/lilygo-lily-pi/#dimensions","text":"Size: 99.7 x 62.5 x 31.2mm","title":"Dimensions"},{"location":"hardware/lilygo/lilygo-t-display-s3/","text":"LilyGO\u00ae T-Display-S3 ~ Warning The configuration for this board is under development and not finilized yet. LILYGO\u00ae T-Display-S3 ESP32-S3 1.9\" ST7789 LCD Display Development Board WIFI Bluetooth5.0 Wireless Module 170*320 Resolution T-Display-S3 is a development board whose main control chip is ESP32-S3. It is equipped with a 1.9\" LCD color screen and two programmable buttons. Communication using the I8080 interface Retains the same layout design as T-Display. You can directly use ESP32S3 for USB communication or programming. Specifications ~ Pros Cons MCU ESP32-S3R8 Dual-core LX7 microprocessor Wireless Connectivity Wi-Fi 802.11, BLE 5 + BT mesh Flash 16MB PSRAM 8MB Bat voltage detection IO04 Onboard functions Boot + Reset + IO14 Button LCD 1.9\" diagonal, Full-color TFT Display Drive Chip ST7789V Resolution 170(H)RGB x320(V) 8-Bit Parallel Interface Connectors JST-GH 1.25mm 2PIN STEMMA QT / Qwiic JST-SH 1.0mm 4-PIN Touch Edition ~ ESP32-S3 1.9\" ST7789 LCD Display with Touch Screen Development Board. Basic Edition ~ The Basic Edition of the LilyGO\u00ae T-Display-S3 does not have a touchscreen. It can only be used to display information. You can not interact with objects on the screen. However, you can connect GPIOs and/or use the push buttons to integrate the device into your Home Automation system. Documentation ~ Documentation ~ Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\"","title":"T-Display-S3"},{"location":"hardware/lilygo/lilygo-t-display-s3/#lilygo-t-display-s3","text":"Warning The configuration for this board is under development and not finilized yet. LILYGO\u00ae T-Display-S3 ESP32-S3 1.9\" ST7789 LCD Display Development Board WIFI Bluetooth5.0 Wireless Module 170*320 Resolution T-Display-S3 is a development board whose main control chip is ESP32-S3. It is equipped with a 1.9\" LCD color screen and two programmable buttons. Communication using the I8080 interface Retains the same layout design as T-Display. You can directly use ESP32S3 for USB communication or programming.","title":"LilyGO\u00ae T-Display-S3"},{"location":"hardware/lilygo/lilygo-t-display-s3/#specifications","text":"Pros Cons MCU ESP32-S3R8 Dual-core LX7 microprocessor Wireless Connectivity Wi-Fi 802.11, BLE 5 + BT mesh Flash 16MB PSRAM 8MB Bat voltage detection IO04 Onboard functions Boot + Reset + IO14 Button LCD 1.9\" diagonal, Full-color TFT Display Drive Chip ST7789V Resolution 170(H)RGB x320(V) 8-Bit Parallel Interface Connectors JST-GH 1.25mm 2PIN STEMMA QT / Qwiic JST-SH 1.0mm 4-PIN","title":"Specifications"},{"location":"hardware/lilygo/lilygo-t-display-s3/#touch-edition","text":"ESP32-S3 1.9\" ST7789 LCD Display with Touch Screen Development Board.","title":"Touch Edition"},{"location":"hardware/lilygo/lilygo-t-display-s3/#basic-edition","text":"The Basic Edition of the LilyGO\u00ae T-Display-S3 does not have a touchscreen. It can only be used to display information. You can not interact with objects on the screen. However, you can connect GPIOs and/or use the push buttons to integrate the device into your Home Automation system.","title":"Basic Edition"},{"location":"hardware/lilygo/lilygo-t-display-s3/#documentation","text":"","title":"Documentation"},{"location":"hardware/lilygo/lilygo-t-display-s3/#documentation_1","text":"Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\"","title":"Documentation"},{"location":"hardware/lilygo/lilygo-t-hmi/","text":"LILYGO\u00ae T-HMI ESP32-S3 ~ Warning The configuration for this board is currently being tested. T-HMI is currently LILYGO's largest touch display screen equipped with ESP32-S3 chip. The screen uses a 2.8-inch ST7789 LCD and is equipped with a resistive screen stylus/pen. It has 16 MB onboard Flash and 8MB PSram. It can be powered via the USB-C interface, 5V DC seat or battery connector. Pros Cons 16 MB flash Resistive Touchscreen 8 MB PSram 3 Groove ports The SD card is not supported by openHASP 0.7.0-rc9. AliExpress Tindie","title":"T-HMI ESP32-S3"},{"location":"hardware/lilygo/lilygo-t-hmi/#lilygo-t-hmi-esp32-s3","text":"Warning The configuration for this board is currently being tested. T-HMI is currently LILYGO's largest touch display screen equipped with ESP32-S3 chip. The screen uses a 2.8-inch ST7789 LCD and is equipped with a resistive screen stylus/pen. It has 16 MB onboard Flash and 8MB PSram. It can be powered via the USB-C interface, 5V DC seat or battery connector. Pros Cons 16 MB flash Resistive Touchscreen 8 MB PSram 3 Groove ports The SD card is not supported by openHASP 0.7.0-rc9. AliExpress Tindie","title":"LILYGO\u00ae T-HMI ESP32-S3 "},{"location":"hardware/lilygo/lilygo-t-rgb-s3/","text":"LilyGO\u00ae T-RGB ESP32-S3 ~ Warning The configuration for this board is under development and not finilized yet. Oval Edition ~ Round Edition ~ There is an Oval and a Round Edition of the LilyGO\u00ae T-RGB ESP32-S3. Both have a capacitive touchscreen.","title":"T-RGB-S3 2.1\""},{"location":"hardware/lilygo/lilygo-t-rgb-s3/#lilygo-t-rgb-esp32-s3","text":"Warning The configuration for this board is under development and not finilized yet.","title":"LilyGO\u00ae T-RGB ESP32-S3"},{"location":"hardware/lilygo/lilygo-t-rgb-s3/#oval-edition","text":"","title":"Oval Edition"},{"location":"hardware/lilygo/lilygo-t-rgb-s3/#round-edition","text":"There is an Oval and a Round Edition of the LilyGO\u00ae T-RGB ESP32-S3. Both have a capacitive touchscreen.","title":"Round Edition"},{"location":"hardware/lilygo/ttgo-t7-s3/","text":"Warning The configuration for this board is under development and not finilized yet. LilyGO\u00ae T7 S3 ESP32-S3 ~ T7 S3 is an ESP32 module based on the ESP32-S3-WROOM-1, with 16 MB built-in Flash and 8MB PSram. AliExpress Tindie","title":"T7-S3 v1.1"},{"location":"hardware/lilygo/ttgo-t7-s3/#lilygo-t7-s3-esp32-s3","text":"T7 S3 is an ESP32 module based on the ESP32-S3-WROOM-1, with 16 MB built-in Flash and 8MB PSram. AliExpress Tindie","title":"LilyGO\u00ae T7 S3 ESP32-S3"},{"location":"hardware/lolin/lolin-tft-shield/","text":"Lolin TFT 2.4\" Touch Shield ~ Features ~ This Lolin TFT has a 2.4\" touchscreen with XPT2046 resistive touch controller. There are 3 ways to connect an ESP32: Plug a compatible ESP32 onto the female headers on the back Attach a LOLIN D32 Pro V2.0 using the 10-pin TFT connector and cable Solder headers onto the bottom pinholes for pluging into a breadboard or jumper cables for any other ESP32 Pros Cons Plug-and-play Resistive touchscreen Limited soldering required Availability Choice of several ESP32 MCUs Price Buy Compatible ESP32 dev boards ~ The Lolin TFT 2.4\" headers are plug-and-play compatible with these development boards, no need to use any jumper cables: Model Minimal Better Best SKU D1 Mini ESP32 TTGO T7 V1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER Flash 4 MB 4 or 16 MB 4 or 16 MB PSram No 8 MB 8 MB Connection Two 1x8 Pinheaders\u00b2 Two 1x8 Pinheaders\u00b2 10-pin TFT cable (optional) SD Card no no yes Battery charging no yes yes USB Chip CH9102F CH340C Screen dimming yes yes yes Buy Buy Buy Warning The D1 Mini ESP32 board may suffer from brown-out reboots if not powered adequately. Note (\u00b2) Because the board is developed for the D1-mini, you must only solder a row of 1x8 male pins to pads TXD-5V and RST-3V3 each. Product Video ~ Backlight Control ~ To use PWM dimming on the Lolin TFT 2.4\" you must bridge the center TFT-LED pin to the D1 solder pad next to it. This pin is configured by default in the firmware. Warning Do not use D3 for backlight control because it is already in use for touch! Do not use D4 for backlight control because it is already in use for PSram on the ESP32-WROVER. The D1-mini has D4 connected to the on-board LED and boot fails if pulled LOW. Documentation ~ Wemos Wiki Schematics Dimensions ~","title":"Lolin"},{"location":"hardware/lolin/lolin-tft-shield/#lolin-tft-24-touch-shield","text":"","title":"Lolin TFT 2.4\" Touch Shield"},{"location":"hardware/lolin/lolin-tft-shield/#features","text":"This Lolin TFT has a 2.4\" touchscreen with XPT2046 resistive touch controller. There are 3 ways to connect an ESP32: Plug a compatible ESP32 onto the female headers on the back Attach a LOLIN D32 Pro V2.0 using the 10-pin TFT connector and cable Solder headers onto the bottom pinholes for pluging into a breadboard or jumper cables for any other ESP32 Pros Cons Plug-and-play Resistive touchscreen Limited soldering required Availability Choice of several ESP32 MCUs Price Buy","title":"Features"},{"location":"hardware/lolin/lolin-tft-shield/#compatible-esp32-dev-boards","text":"The Lolin TFT 2.4\" headers are plug-and-play compatible with these development boards, no need to use any jumper cables: Model Minimal Better Best SKU D1 Mini ESP32 TTGO T7 V1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER Flash 4 MB 4 or 16 MB 4 or 16 MB PSram No 8 MB 8 MB Connection Two 1x8 Pinheaders\u00b2 Two 1x8 Pinheaders\u00b2 10-pin TFT cable (optional) SD Card no no yes Battery charging no yes yes USB Chip CH9102F CH340C Screen dimming yes yes yes Buy Buy Buy Warning The D1 Mini ESP32 board may suffer from brown-out reboots if not powered adequately. Note (\u00b2) Because the board is developed for the D1-mini, you must only solder a row of 1x8 male pins to pads TXD-5V and RST-3V3 each.","title":"Compatible ESP32 dev boards"},{"location":"hardware/lolin/lolin-tft-shield/#product-video","text":"","title":"Product Video"},{"location":"hardware/lolin/lolin-tft-shield/#backlight-control","text":"To use PWM dimming on the Lolin TFT 2.4\" you must bridge the center TFT-LED pin to the D1 solder pad next to it. This pin is configured by default in the firmware. Warning Do not use D3 for backlight control because it is already in use for touch! Do not use D4 for backlight control because it is already in use for PSram on the ESP32-WROVER. The D1-mini has D4 connected to the on-board LED and boot fails if pulled LOW.","title":"Backlight Control"},{"location":"hardware/lolin/lolin-tft-shield/#documentation","text":"Wemos Wiki Schematics","title":"Documentation"},{"location":"hardware/lolin/lolin-tft-shield/#dimensions","text":"","title":"Dimensions"},{"location":"hardware/m5stack/core2/","text":"M5Stack core2 ~ M5Stack core2 is the second generation core device in the M5Stack development kit series. The core2 features a 2\" capacitive touchscreen, unlike its predecessor, making it very suitable to run openHASP. The device is packed with a beefy ESP32 model D0WDQ6-V3 and lots of sensors. Features ~ 1W Speaker SPM1423 Microphone Vibration Motor 3.7V / 390 mAh battery with power management chip SD card slot (16 GB maximum size) IMU (3-axis gyroscope & 3-axis accelerometer) Dimensions: 54 x 54 x 16mm Pros Cons 16 MB flash Small display 8 MB PSram Internal Battery Capacitive Touchscreen Available from: M5stack Mouser Digikey Amazon Product Video ~ Schematic ~ Schematics M5Stack Library ~ The M5Stack series comes with an opensource library to give you a jump start in deveopment for this device, including a Getting Started guide, examples and API reference. Visit the M5Stack Github repo.","title":"M5stack"},{"location":"hardware/m5stack/core2/#m5stack-core2","text":"M5Stack core2 is the second generation core device in the M5Stack development kit series. The core2 features a 2\" capacitive touchscreen, unlike its predecessor, making it very suitable to run openHASP. The device is packed with a beefy ESP32 model D0WDQ6-V3 and lots of sensors.","title":"M5Stack core2"},{"location":"hardware/m5stack/core2/#features","text":"1W Speaker SPM1423 Microphone Vibration Motor 3.7V / 390 mAh battery with power management chip SD card slot (16 GB maximum size) IMU (3-axis gyroscope & 3-axis accelerometer) Dimensions: 54 x 54 x 16mm Pros Cons 16 MB flash Small display 8 MB PSram Internal Battery Capacitive Touchscreen Available from: M5stack Mouser Digikey Amazon","title":"Features"},{"location":"hardware/m5stack/core2/#product-video","text":"","title":"Product Video"},{"location":"hardware/m5stack/core2/#schematic","text":"Schematics","title":"Schematic"},{"location":"hardware/m5stack/core2/#m5stack-library","text":"The M5Stack series comes with an opensource library to give you a jump start in deveopment for this device, including a Getting Started guide, examples and API reference. Visit the M5Stack Github repo.","title":"M5Stack Library"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/","text":"ESP32-S3 Parallel TFT with Touch ~ Warning The configuration for this board is under development and not finilized yet. more images... Features ~ The Makerfabs ESP32-S3 Parallel TFT Touch development board incorporates a 3.5\u201d, 4.0\u201d or 4.3\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and PSram. There is also an SD-card slot, USB-C connectors and two expansion ports. Models ~ Model 3.5\" Parallel 4.0\" Parallel 4.3\" Parallel SKU ESP32S335D E32S3RGB40 E32S3RGB43 Flash 16 MB 16 MB 16 MB PSram 2 MB 8 MB 8 MB Display 3.5\" 480x320 4.0\" IPS 4.3\" IPS Resolution 480x320 480x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Real Time Clock no no yes Screen dimming GPIO45 GPIO2 GPIO2 Buy Buy Buy Also available on Tindie The real-time clock and SD card are not supported by openHASP 0.7.0-rc9. Backlight Control ~ The backlight of the 3.5\" model can be controlled by PWM on pin GPIO45 . The backlight on the 4.0\" model is always on and can not be controlled. The backlight of the 4.3\" model can be controlled by PWM on pin GPIO02 if the PCB is v1.3 only. With PCB v2.0 the backlight can not be adjusted and the screen is always on. Video ~ ESP32-S3 Parallel TFT with Touch 3.5'' ILI9488 ~ ESP32-S3 Parallel TFT with Touch 4.0\" ~ ESP32-S3 Parallel TFT with Touch 4.3\" ~ Documentation ~ More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics Enclosure ~ We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"ESP32-S3 Parallel TFT"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch","text":"Warning The configuration for this board is under development and not finilized yet. more images...","title":"ESP32-S3 Parallel TFT with Touch"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#features","text":"The Makerfabs ESP32-S3 Parallel TFT Touch development board incorporates a 3.5\u201d, 4.0\u201d or 4.3\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and PSram. There is also an SD-card slot, USB-C connectors and two expansion ports.","title":"Features"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#models","text":"Model 3.5\" Parallel 4.0\" Parallel 4.3\" Parallel SKU ESP32S335D E32S3RGB40 E32S3RGB43 Flash 16 MB 16 MB 16 MB PSram 2 MB 8 MB 8 MB Display 3.5\" 480x320 4.0\" IPS 4.3\" IPS Resolution 480x320 480x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Real Time Clock no no yes Screen dimming GPIO45 GPIO2 GPIO2 Buy Buy Buy Also available on Tindie The real-time clock and SD card are not supported by openHASP 0.7.0-rc9.","title":"Models"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#backlight-control","text":"The backlight of the 3.5\" model can be controlled by PWM on pin GPIO45 . The backlight on the 4.0\" model is always on and can not be controlled. The backlight of the 4.3\" model can be controlled by PWM on pin GPIO02 if the PCB is v1.3 only. With PCB v2.0 the backlight can not be adjusted and the screen is always on.","title":"Backlight Control"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#video","text":"","title":"Video"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch-35-ili9488","text":"","title":"ESP32-S3 Parallel TFT with Touch 3.5'' ILI9488"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch-40","text":"","title":"ESP32-S3 Parallel TFT with Touch 4.0\""},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch-43","text":"","title":"ESP32-S3 Parallel TFT with Touch 4.3\""},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#documentation","text":"More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics","title":"Documentation"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#enclosure","text":"We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Enclosure"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/","text":"ESP32-S3 SPI TFT with Touch ~ more images... Features ~ The ESP32-S3 SPI TFT with Touch development board incorporates a 3.5\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and 2MB of PSram. There is also an SD-card slot, USB-C connectors and expansion port with 14 GPIOs. Models ~ Model 3.5\" SPI SKU ESP32S3SPI35 Flash 16 MB PSram 2 MB Resolution 3.5\" 480x320 Touch Screen Capacitive SD Card yes Screen dimming yes Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9. Backlight Control ~ The backlight can be controlled by PWM on GPIO48 . Video ~ Documentation ~ More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics Enclosure ~ We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"ESP32-S3 SPI TFT"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#esp32-s3-spi-tft-with-touch","text":"more images...","title":"ESP32-S3 SPI TFT with Touch"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#features","text":"The ESP32-S3 SPI TFT with Touch development board incorporates a 3.5\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and 2MB of PSram. There is also an SD-card slot, USB-C connectors and expansion port with 14 GPIOs.","title":"Features"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#models","text":"Model 3.5\" SPI SKU ESP32S3SPI35 Flash 16 MB PSram 2 MB Resolution 3.5\" 480x320 Touch Screen Capacitive SD Card yes Screen dimming yes Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9.","title":"Models"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#backlight-control","text":"The backlight can be controlled by PWM on GPIO48 .","title":"Backlight Control"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#video","text":"","title":"Video"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#documentation","text":"More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics","title":"Documentation"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#enclosure","text":"We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Enclosure"},{"location":"hardware/makerfabs/esp32-tft-touch/","text":"ESP32 TFT Touch with Camera ~ more images... Features ~ The Makerfabs ESP32 TFT Touch development board incorporates a 3.2\u201d or 3.5\u201d touch display, with a built-in 2M pixel OV2640 camera, which makes it a very suitable platform for any ESP32 project. There is a version with capacitive and resistive touch. At the back sits an ESP32-WROVER module with 16MB of flash and 8MB of PSram. There is also an SD-card slot, USB-C connector and expansion port with 14 GPIOs. Models ~ Model 3.2\" Resistive 3.5\" Resistive 3.5\" Capacitive SKU ESPTFT32CA ESPTFT35RE ESPTFT35CA Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Resolution 3.2\" 320x240 3.5\" 480x320 3.5\" 480x320 Touch Screen Resistive Resistive Capacitive OV2640 Camera 2M pixel 2M pixel 2M pixel SD Card yes yes yes Screen dimming no no no Buy Buy Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9. Backlight Control ~ Unfortunately, there is no support for backlight control. The display is always-on. Video ~ Documentation ~ More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics Acrylic Case ~ All 3 models have the option to add a protective acrylic case for only $2.90 extra:","title":"ESP32 SPI TFT with Camera"},{"location":"hardware/makerfabs/esp32-tft-touch/#esp32-tft-touch-with-camera","text":"more images...","title":"ESP32 TFT Touch with Camera"},{"location":"hardware/makerfabs/esp32-tft-touch/#features","text":"The Makerfabs ESP32 TFT Touch development board incorporates a 3.2\u201d or 3.5\u201d touch display, with a built-in 2M pixel OV2640 camera, which makes it a very suitable platform for any ESP32 project. There is a version with capacitive and resistive touch. At the back sits an ESP32-WROVER module with 16MB of flash and 8MB of PSram. There is also an SD-card slot, USB-C connector and expansion port with 14 GPIOs.","title":"Features"},{"location":"hardware/makerfabs/esp32-tft-touch/#models","text":"Model 3.2\" Resistive 3.5\" Resistive 3.5\" Capacitive SKU ESPTFT32CA ESPTFT35RE ESPTFT35CA Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Resolution 3.2\" 320x240 3.5\" 480x320 3.5\" 480x320 Touch Screen Resistive Resistive Capacitive OV2640 Camera 2M pixel 2M pixel 2M pixel SD Card yes yes yes Screen dimming no no no Buy Buy Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9.","title":"Models"},{"location":"hardware/makerfabs/esp32-tft-touch/#backlight-control","text":"Unfortunately, there is no support for backlight control. The display is always-on.","title":"Backlight Control"},{"location":"hardware/makerfabs/esp32-tft-touch/#video","text":"","title":"Video"},{"location":"hardware/makerfabs/esp32-tft-touch/#documentation","text":"More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics","title":"Documentation"},{"location":"hardware/makerfabs/esp32-tft-touch/#acrylic-case","text":"All 3 models have the option to add a protective acrylic case for only $2.90 extra:","title":"Acrylic Case"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/","text":"SenseCAP Indicator D1 ~ more images... SenseCAP Indicator D1 is a 4-inch touch screen driven by an ESP32-S3 and RP2040 dual-MCU and supports Wi-Fi/BLE communication. The ESP32-S3 has 8 MB flash and 8 MB PSRAM. It is a powerful, fully open-source IoT development platform. It can be powered via USB-C 2.0 on the bottom or the backside of the device. It is suitable for mounting on the wall or placement on a desk using the kickback stand. Models ~ The SenseCAP Indicator series offers four different versions: D1, D1S, D1L, and D1Pro. Each version is designed to meet different application needs without any extra cost from unnecessary hardware. Here are the differences between the versions: Attention openHASP does not support the D1S sensors or D1L Lora communications. Buy Mouser Kiwi Electronics Seeed Studio Documentation Product Video ~ Introduction to the SenseCAP Indicator D1: Gallery ~","title":"Seeed Studio"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#sensecap-indicator-d1","text":"more images... SenseCAP Indicator D1 is a 4-inch touch screen driven by an ESP32-S3 and RP2040 dual-MCU and supports Wi-Fi/BLE communication. The ESP32-S3 has 8 MB flash and 8 MB PSRAM. It is a powerful, fully open-source IoT development platform. It can be powered via USB-C 2.0 on the bottom or the backside of the device. It is suitable for mounting on the wall or placement on a desk using the kickback stand.","title":"SenseCAP Indicator D1"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#models","text":"The SenseCAP Indicator series offers four different versions: D1, D1S, D1L, and D1Pro. Each version is designed to meet different application needs without any extra cost from unnecessary hardware. Here are the differences between the versions: Attention openHASP does not support the D1S sensors or D1L Lora communications. Buy Mouser Kiwi Electronics Seeed Studio Documentation","title":"Models"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#product-video","text":"Introduction to the SenseCAP Indicator D1:","title":"Product Video"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#gallery","text":"","title":"Gallery"},{"location":"hardware/sunton/esp32-1732s019/","text":"Sunton ESP32-1732S019 ~ Warning The configuration for this board is under development and not finilized yet. These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress. Versions ~ There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: ESP32-3248S035 ~ Sunton ESP32 3.5inch Display Case Stand from Printables.com ESP32-4827S043 ~ Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-1732S019"},{"location":"hardware/sunton/esp32-1732s019/#sunton-esp32-1732s019","text":"Warning The configuration for this board is under development and not finilized yet. These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress.","title":"Sunton ESP32-1732S019 "},{"location":"hardware/sunton/esp32-1732s019/#versions","text":"There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Versions"},{"location":"hardware/sunton/esp32-1732s019/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-1732s019/#cases","text":"If you have a 3D printer, cases are becoming available:","title":"Cases"},{"location":"hardware/sunton/esp32-1732s019/#esp32-3248s035","text":"Sunton ESP32 3.5inch Display Case Stand from Printables.com","title":"ESP32-3248S035"},{"location":"hardware/sunton/esp32-1732s019/#esp32-4827s043","text":"Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"ESP32-4827S043"},{"location":"hardware/sunton/esp32-1732s019/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-1732s019/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-1732s019/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-2432s028/","text":"Sunton ESP32-2432S028 ~ These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress. Versions ~ There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: ESP32-3248S035 ~ Sunton ESP32 3.5inch Display Case Stand from Printables.com ESP32-4827S043 ~ Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-2432S028"},{"location":"hardware/sunton/esp32-2432s028/#sunton-esp32-2432s028","text":"These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress.","title":"Sunton ESP32-2432S028 "},{"location":"hardware/sunton/esp32-2432s028/#versions","text":"There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Versions"},{"location":"hardware/sunton/esp32-2432s028/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-2432s028/#cases","text":"If you have a 3D printer, cases are becoming available:","title":"Cases"},{"location":"hardware/sunton/esp32-2432s028/#esp32-3248s035","text":"Sunton ESP32 3.5inch Display Case Stand from Printables.com","title":"ESP32-3248S035"},{"location":"hardware/sunton/esp32-2432s028/#esp32-4827s043","text":"Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"ESP32-4827S043"},{"location":"hardware/sunton/esp32-2432s028/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-2432s028/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-2432s028/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-3248s035/","text":"Sunton ESP32-3248S035 ~ The ESP32-3248S035 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles. Models ~ Model Resistive Touch Capacitive Touch SKU ESP32-3248S035R ESP32-3248S035C MCU ESP32-D0WDQ6 ESP32-D0WDQ6 Flash 4 MB 4 MB PSram No No Display Panel 3.5\" TN 3.5' TN Resolution 480x320 480x320 Touch Screen Resistive Capacitive SD Card yes yes Screen dimming yes yes Buy Buy The SD card is not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32 Modules have no PSram and are less suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-3248S035"},{"location":"hardware/sunton/esp32-3248s035/#sunton-esp32-3248s035","text":"The ESP32-3248S035 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles.","title":"Sunton ESP32-3248S035 "},{"location":"hardware/sunton/esp32-3248s035/#models","text":"Model Resistive Touch Capacitive Touch SKU ESP32-3248S035R ESP32-3248S035C MCU ESP32-D0WDQ6 ESP32-D0WDQ6 Flash 4 MB 4 MB PSram No No Display Panel 3.5\" TN 3.5' TN Resolution 480x320 480x320 Touch Screen Resistive Capacitive SD Card yes yes Screen dimming yes yes Buy Buy The SD card is not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32 Modules have no PSram and are less suitable for loading fonts, and graphics.","title":"Models"},{"location":"hardware/sunton/esp32-3248s035/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-3248s035/#cases","text":"If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"Cases"},{"location":"hardware/sunton/esp32-3248s035/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-3248s035/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-3248s035/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-4827s043/","text":"Sunton ESP32-4827S043 ~ The ESP32-4827s043 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles. Models ~ Model TN Without Touch TN Resistive Touch TN Capacitive Touch SKU ESP32-4827S043 ESP32-4827S043R ESP32-4827S043C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" TN 4.3\" TN 4.3\" TN Resolution 480x272 480x272 480x272 Touch Screen None Resistive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-4827S043"},{"location":"hardware/sunton/esp32-4827s043/#sunton-esp32-4827s043","text":"The ESP32-4827s043 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles.","title":"Sunton ESP32-4827S043 "},{"location":"hardware/sunton/esp32-4827s043/#models","text":"Model TN Without Touch TN Resistive Touch TN Capacitive Touch SKU ESP32-4827S043 ESP32-4827S043R ESP32-4827S043C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" TN 4.3\" TN 4.3\" TN Resolution 480x272 480x272 480x272 Touch Screen None Resistive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Models"},{"location":"hardware/sunton/esp32-4827s043/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-4827s043/#cases","text":"If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"Cases"},{"location":"hardware/sunton/esp32-4827s043/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-4827s043/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-4827s043/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-8048s0xx/","text":"Sunton ESP32-8048S0xx ~ These are great \"all-in-one\" device that have integrated ESP32-S3 chips with 16 MB of flash and 8MB PSram. There are 3 sizes available with an 800x480 resolution ranging from 4.3\", 5\" to 7\" display and built in capacitive touch panel. The 4.3\" and 5\" model have an IPS panel so the viewing angles are great. The 7\" version uses a TN panel with acceptable viewing angles but a larger display area. Models ~ Model 4.3\" IPS Capacitive 5.0\" IPS Capacitive 7.0\" TN Capacitive SKU ESP32-8048S043C ESP32-8048S050C ESP32-8048S070C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" IPS 5.0\" IPS 7.0\" TN Resolution 800x480 800x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: SUNON ESP32-2432S028 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/esp32-2432s028-display-box SUNON ESP32-3248S035 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-3248s035-matsekberg SUNON ESP32-8048S050 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-8048s050-display-box Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-8048S0xx"},{"location":"hardware/sunton/esp32-8048s0xx/#sunton-esp32-8048s0xx","text":"These are great \"all-in-one\" device that have integrated ESP32-S3 chips with 16 MB of flash and 8MB PSram. There are 3 sizes available with an 800x480 resolution ranging from 4.3\", 5\" to 7\" display and built in capacitive touch panel. The 4.3\" and 5\" model have an IPS panel so the viewing angles are great. The 7\" version uses a TN panel with acceptable viewing angles but a larger display area.","title":"Sunton ESP32-8048S0xx "},{"location":"hardware/sunton/esp32-8048s0xx/#models","text":"Model 4.3\" IPS Capacitive 5.0\" IPS Capacitive 7.0\" TN Capacitive SKU ESP32-8048S043C ESP32-8048S050C ESP32-8048S070C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" IPS 5.0\" IPS 7.0\" TN Resolution 800x480 800x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Models"},{"location":"hardware/sunton/esp32-8048s0xx/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-8048s0xx/#cases","text":"If you have a 3D printer, cases are becoming available: SUNON ESP32-2432S028 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/esp32-2432s028-display-box SUNON ESP32-3248S035 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-3248s035-matsekberg SUNON ESP32-8048S050 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-8048s050-display-box Other cases maybe available, search printables, thingiverse, etc","title":"Cases"},{"location":"hardware/sunton/esp32-8048s0xx/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-8048s0xx/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-8048s0xx/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/waveshare/waveshare-rpi-lcd/","text":"Waveshare RPi LCD (Rev C) ~ Models ~ The Waveshare RPi LCD (Rev C) display comes in 3.5\" and 4.0\" sizes: Model 3.5inch (Rev C) 4.0inch (Rev C) SKU 15811 16099 Resolution 480x320 480x320 TFT controller ILI9486 ST7796 Interface SPI SPI Touchscreen Resistive Resistive Touch controller XPT2046 XPT2046 Screen dimming yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy AliExpress Waveshare.com Backlight Control ~ By default the display is always on. To enable backlight dimming, you can connect the pads marked by the red arrow using a 0R resistor or a direct solder connection: Attention (*) The WaveShare 3.5\" RPi LCD Revision C (SKU 15811) and WaveShare 4.0\" RPi LCD Revision C (SKU 16099) have the solder jumper on the back to enable PWM backlight dimming. Most revisions of this board do not have this feature! Development Boards ~ ESP32 One ~ The Waveshare ESP32 One development board has the same form factor as the Raspberry Pi Zero, inluding a 40 pin GPIO header. The ESP32 One is plug-and-play compatible with the Waveshare RPi LCD (Rev C) 3.5\" and 4\". This board has 4 MB flash and 8 MB PSRAM. Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Schematics Gallery ~ Pin Configuration ~ LCD Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected N/C 4 5V 5-10 Not connected N/C 11 Touch Interrupt N/C TOUCH_IRQ TP_IRQ 12 (*) LED Backlight PWM GPIO26 TFT_BCKL LCD_LED 13 Not connected N/C 14 Module Ground GND GND 15-16 Not connected N/C 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO13 TFT_MOSI LCD/SI/TP_SI 20 Not connected N/C 21 Touch Panel Slave Out GPIO12 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO14 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO5 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. You can also use jumper wires to connect the display to any ESP32 development board: 6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor and one extra GPIO for backlight dimming. Including the VCC and GND pins, a total of 13 connections need to be made to the MCU. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 build_flags = ${env.build_flags} ${esp32.build_flags} -DBOARD_HAS_PSRAM ; uses 78kB ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.hspi} ; Use HSPI hardware SPI bus -D TFT_CS = 5 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = 26 ; Default, configurable via web UI -D TOUCH_CS = 22 -D SD_CS = 15 ; Currently not supported","title":"Waveshare RPi LCD"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#waveshare-rpi-lcd-rev-c","text":"","title":"Waveshare RPi LCD (Rev C)"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#models","text":"The Waveshare RPi LCD (Rev C) display comes in 3.5\" and 4.0\" sizes: Model 3.5inch (Rev C) 4.0inch (Rev C) SKU 15811 16099 Resolution 480x320 480x320 TFT controller ILI9486 ST7796 Interface SPI SPI Touchscreen Resistive Resistive Touch controller XPT2046 XPT2046 Screen dimming yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy AliExpress Waveshare.com","title":"Models"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#backlight-control","text":"By default the display is always on. To enable backlight dimming, you can connect the pads marked by the red arrow using a 0R resistor or a direct solder connection: Attention (*) The WaveShare 3.5\" RPi LCD Revision C (SKU 15811) and WaveShare 4.0\" RPi LCD Revision C (SKU 16099) have the solder jumper on the back to enable PWM backlight dimming. Most revisions of this board do not have this feature!","title":"Backlight Control"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#development-boards","text":"","title":"Development Boards"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#esp32-one","text":"The Waveshare ESP32 One development board has the same form factor as the Raspberry Pi Zero, inluding a 40 pin GPIO header. The ESP32 One is plug-and-play compatible with the Waveshare RPi LCD (Rev C) 3.5\" and 4\". This board has 4 MB flash and 8 MB PSRAM. Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Schematics","title":"ESP32 One"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#gallery","text":"","title":"Gallery"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#pin-configuration","text":"LCD Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected N/C 4 5V 5-10 Not connected N/C 11 Touch Interrupt N/C TOUCH_IRQ TP_IRQ 12 (*) LED Backlight PWM GPIO26 TFT_BCKL LCD_LED 13 Not connected N/C 14 Module Ground GND GND 15-16 Not connected N/C 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO13 TFT_MOSI LCD/SI/TP_SI 20 Not connected N/C 21 Touch Panel Slave Out GPIO12 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO14 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO5 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. You can also use jumper wires to connect the display to any ESP32 development board: 6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor and one extra GPIO for backlight dimming. Including the VCC and GND pins, a total of 13 connections need to be made to the MCU.","title":"Pin Configuration"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 build_flags = ${env.build_flags} ${esp32.build_flags} -DBOARD_HAS_PSRAM ; uses 78kB ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.hspi} ; Use HSPI hardware SPI bus -D TFT_CS = 5 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = 26 ; Default, configurable via web UI -D TOUCH_CS = 22 -D SD_CS = 15 ; Currently not supported","title":"HASP build_flags"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/","text":"Waveshare TFT Touch Shield ~ more images... Waveshare has a line of TFT Touch Shields for Arduino which are also plug-and-play compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 board. Unlike many other common Arduino UNO shields the Waveshare displays have an SPI interface with resistive touch controller and backlight control . Be sure to check if the LCD_BL , LCD_CS and TP_CS pins are present. If these pins are missing, the screen won't work with the pre-compiled builds. Models ~ There are 3 models of this TFT shield: Model 2.8\" Rev 2.1 3.5inch 4.0inch SKU 10684 13506 13587 Resolution 320x240 480x320 480x320 TFT controller ST7789 (Rev 2.1 only) ILI9486 ILI9486 Interface SPI SPI SPI Touchscreen Resistive Resistive Resistive Touch controller XPT2046 XPT2046 XPT2046 SD Card yes yes yes Screen dimming yes yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Backlight Control ~ All three models come with an LCD_BL pin that allows for backlight control. It is connected to GPIO13 on the D1 R32 development board. Documentation ~ Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\" Configuration ~ Note By default the DIP switches on the display are set in the ICSP position instead of the SPI position. If your board does not include an ICSP header, you need to switch the display over to use the SPI pins. To use the MISO , MOSI and SCLK SPI pins you first need to peel of the orange tape that sticks on top of the dip switches. Then move all 3 DIP switches to the ON position with a tiny screwdriver. The 2.8\" model has 3 solder jumpers SB1 , SB2 and SB3 that need to be bridged instead! Development Boards ~ D1 R32 ~ The Waveshare TFT Touch Shields are compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 development board. It contains an ESP32-WROOM module with 4MB flash. Warning The D1 R32 ESP32 board may suffer from brown-out reboots if not powered adequately. Arducam IoTai ESP32 ~ Onboard 4MB PSRAM, 4MByte Flash To be tested Adafruit Metro ESP32-S2 ~ With 4 MByte of Flash and 2 MByte of PSRAM Note This board has not been tested yet!","title":"Waveshare TFT Touch Shield"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#waveshare-tft-touch-shield","text":"more images... Waveshare has a line of TFT Touch Shields for Arduino which are also plug-and-play compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 board. Unlike many other common Arduino UNO shields the Waveshare displays have an SPI interface with resistive touch controller and backlight control . Be sure to check if the LCD_BL , LCD_CS and TP_CS pins are present. If these pins are missing, the screen won't work with the pre-compiled builds.","title":"Waveshare TFT Touch Shield"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#models","text":"There are 3 models of this TFT shield: Model 2.8\" Rev 2.1 3.5inch 4.0inch SKU 10684 13506 13587 Resolution 320x240 480x320 480x320 TFT controller ST7789 (Rev 2.1 only) ILI9486 ILI9486 Interface SPI SPI SPI Touchscreen Resistive Resistive Resistive Touch controller XPT2046 XPT2046 XPT2046 SD Card yes yes yes Screen dimming yes yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com","title":"Models"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#backlight-control","text":"All three models come with an LCD_BL pin that allows for backlight control. It is connected to GPIO13 on the D1 R32 development board.","title":"Backlight Control"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#documentation","text":"Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\"","title":"Documentation"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#configuration","text":"Note By default the DIP switches on the display are set in the ICSP position instead of the SPI position. If your board does not include an ICSP header, you need to switch the display over to use the SPI pins. To use the MISO , MOSI and SCLK SPI pins you first need to peel of the orange tape that sticks on top of the dip switches. Then move all 3 DIP switches to the ON position with a tiny screwdriver. The 2.8\" model has 3 solder jumpers SB1 , SB2 and SB3 that need to be bridged instead!","title":"Configuration"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#development-boards","text":"","title":"Development Boards"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#d1-r32","text":"The Waveshare TFT Touch Shields are compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 development board. It contains an ESP32-WROOM module with 4MB flash. Warning The D1 R32 ESP32 board may suffer from brown-out reboots if not powered adequately.","title":"D1 R32"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#arducam-iotai-esp32","text":"Onboard 4MB PSRAM, 4MByte Flash To be tested","title":"Arducam IoTai ESP32"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#adafruit-metro-esp32-s2","text":"With 4 MByte of Flash and 2 MByte of PSRAM Note This board has not been tested yet!","title":"Adafruit Metro ESP32-S2"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/","text":"WT-86-32-3ZW1 ~ Warning This product with ESP32-S2 is not sold anymore and will soon become obsolete. Please get the ESP32-S3 model instead. The Wireless-Tag WT-86-32-3ZW1 is a 86x86mm touchscreen with 4 relays that can be mounted in a standard 86x86mm wall-box. It is currently only available from Alibaba for around US $40 excluding shipping. Features ~ Pros Cons 16 MB flash Display ghosting 8 MB PSram 320 kB SRAM (ESP32-S2) Price Can't fit in EU workbox Capacitive Touchscreen Issues ~ One issue we've noticed is temporary ghosting on the display reported by multiple users. When showing a UI with white, cyan or bright colors on a dark background, a dim ghost image of these bright colors can linger on the screen for some time after changing pages. If you notice this issue on your device, please report back in this Github discussion thread . Dimensions ~ Note The size of the PSU unit does not fit a regular EU wall-box and mounting it in a US wall-box needs testing. Flashing ~ All pins are conveniently broken out on the 2mm pitch female header. Make sure the USB port can deliver enough power. It is best to use a powered USB hub since most PC ports can not power the whole device. esptool.py --port COM6 erase_flash esptool.py --port COM6 write_flash 0x0 wt-86-32-3zw1_full_16MB_v0.6.3-dev_88a478d.bin --verify Gallery ~","title":"WT-86-32-3ZW1"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#wt-86-32-3zw1","text":"Warning This product with ESP32-S2 is not sold anymore and will soon become obsolete. Please get the ESP32-S3 model instead. The Wireless-Tag WT-86-32-3ZW1 is a 86x86mm touchscreen with 4 relays that can be mounted in a standard 86x86mm wall-box. It is currently only available from Alibaba for around US $40 excluding shipping.","title":"WT-86-32-3ZW1"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#features","text":"Pros Cons 16 MB flash Display ghosting 8 MB PSram 320 kB SRAM (ESP32-S2) Price Can't fit in EU workbox Capacitive Touchscreen","title":"Features"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#issues","text":"One issue we've noticed is temporary ghosting on the display reported by multiple users. When showing a UI with white, cyan or bright colors on a dark background, a dim ghost image of these bright colors can linger on the screen for some time after changing pages. If you notice this issue on your device, please report back in this Github discussion thread .","title":"Issues"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#dimensions","text":"Note The size of the PSU unit does not fit a regular EU wall-box and mounting it in a US wall-box needs testing.","title":"Dimensions"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#flashing","text":"All pins are conveniently broken out on the 2mm pitch female header. Make sure the USB port can deliver enough power. It is best to use a powered USB hub since most PC ports can not power the whole device. esptool.py --port COM6 erase_flash esptool.py --port COM6 write_flash 0x0 wt-86-32-3zw1_full_16MB_v0.6.3-dev_88a478d.bin --verify","title":"Flashing"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#gallery","text":"","title":"Gallery"},{"location":"hardware/wireless-tag/wt32-sc01-plus/","text":"WT32-SC01 Plus ~ Features ~ The SC01 Plus uses an ESP32-S3-WROVER module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there are some ports with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 8-bit Display Flashing the initial bootloader 2 MB PSram Serial Flashing tool recommended Capacitive Touchscreen JST 1.25mm Expansion headers IPS Viewing angles Sleek design The development board is powered via USB Type-C. Video ~ Cases ~ A 3D-printable case can be found on: https://www.printables.com/model/381026-wt32-sc01-plus-desk-case#preview","title":"WT32-SC01 Plus"},{"location":"hardware/wireless-tag/wt32-sc01-plus/#wt32-sc01-plus","text":"","title":"WT32-SC01 Plus "},{"location":"hardware/wireless-tag/wt32-sc01-plus/#features","text":"The SC01 Plus uses an ESP32-S3-WROVER module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there are some ports with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 8-bit Display Flashing the initial bootloader 2 MB PSram Serial Flashing tool recommended Capacitive Touchscreen JST 1.25mm Expansion headers IPS Viewing angles Sleek design The development board is powered via USB Type-C.","title":"Features"},{"location":"hardware/wireless-tag/wt32-sc01-plus/#video","text":"","title":"Video"},{"location":"hardware/wireless-tag/wt32-sc01-plus/#cases","text":"A 3D-printable case can be found on: https://www.printables.com/model/381026-wt32-sc01-plus-desk-case#preview","title":"Cases"},{"location":"hardware/wireless-tag/wt32-sc01/","text":"WT32-SC01 ~ Features ~ The WT32-SC01 incorporates an ESP32-WROVER-B module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 Display 4 MB flash on basic model 8 MB PSram Viewing angle in landscape mode Capacitive Touchscreen Mounting holes placement The development board is powered via USB Type-C. The basic version comes with only 4MB SPI Flash but there is a better WT32-SC01(16MB) SKU with a larger flash chip. Both models have 8MB of PSRAM. With 4MB flash available from: LCSC Seeed studio With 16MB flash available from: Alibaba Tip Please consider getting the model with 16MB flash size as it is more suitable for the large screen. Note The expansion connector has a 2.0mm pitch female header instead of the more common 2.54mm pitch. Datasheet Gallery ~ 3D Printed Case ~ Wt32-sc01 Case by mbenten on Sketchfab","title":"WT32-SC01"},{"location":"hardware/wireless-tag/wt32-sc01/#wt32-sc01","text":"","title":"WT32-SC01"},{"location":"hardware/wireless-tag/wt32-sc01/#features","text":"The WT32-SC01 incorporates an ESP32-WROVER-B module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 Display 4 MB flash on basic model 8 MB PSram Viewing angle in landscape mode Capacitive Touchscreen Mounting holes placement The development board is powered via USB Type-C. The basic version comes with only 4MB SPI Flash but there is a better WT32-SC01(16MB) SKU with a larger flash chip. Both models have 8MB of PSRAM. With 4MB flash available from: LCSC Seeed studio With 16MB flash available from: Alibaba Tip Please consider getting the model with 16MB flash size as it is more suitable for the large screen. Note The expansion connector has a 2.0mm pitch female header instead of the more common 2.54mm pitch. Datasheet","title":"Features"},{"location":"hardware/wireless-tag/wt32-sc01/#gallery","text":"","title":"Gallery"},{"location":"hardware/wireless-tag/wt32-sc01/#3d-printed-case","text":"Wt32-sc01 Case by mbenten on Sketchfab","title":"3D Printed Case"},{"location":"hardware/yeacreate/nscreen32/","text":"YeaCreate Nscreen32 ~ Features ~ The Nscreen32 uses an ESP32-WROVER-IE module with a large 4-inch capacitive touch display. The display is connected via an 8-bit parallel bus resulting in a fast performance. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with 6 GPIOs (4 input only, RX & TX) so you add inputs if needed. The development board can be powered via micro USB or the 5V-in JST connector. Pros Cons 8-bit parallel display No backlight control 16 MB flash + 8 MB PSram Bright white power LED Capacitive Touchscreen Viewing angles External antenna YeaCreate Store Backlight Control ~ Unfortunately, there is no support for backlight control . The display is always-on. With a small hack it is possible to control the backlight using a PNP transistor connected to GPIO0 , R8 and 3.3V . Documentation ~ Some example projects and the schematics for the Nscreen32 can be found on the Yeacreate Github repository. Github Repo Schematics Product Video ~ Nscreen32 is the first device to receive the LVGL Certified Board label: Enclosure ~ We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Yeacreate"},{"location":"hardware/yeacreate/nscreen32/#yeacreate-nscreen32","text":"","title":"YeaCreate Nscreen32"},{"location":"hardware/yeacreate/nscreen32/#features","text":"The Nscreen32 uses an ESP32-WROVER-IE module with a large 4-inch capacitive touch display. The display is connected via an 8-bit parallel bus resulting in a fast performance. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with 6 GPIOs (4 input only, RX & TX) so you add inputs if needed. The development board can be powered via micro USB or the 5V-in JST connector. Pros Cons 8-bit parallel display No backlight control 16 MB flash + 8 MB PSram Bright white power LED Capacitive Touchscreen Viewing angles External antenna YeaCreate Store","title":"Features"},{"location":"hardware/yeacreate/nscreen32/#backlight-control","text":"Unfortunately, there is no support for backlight control . The display is always-on. With a small hack it is possible to control the backlight using a PNP transistor connected to GPIO0 , R8 and 3.3V .","title":"Backlight Control"},{"location":"hardware/yeacreate/nscreen32/#documentation","text":"Some example projects and the schematics for the Nscreen32 can be found on the Yeacreate Github repository. Github Repo Schematics","title":"Documentation"},{"location":"hardware/yeacreate/nscreen32/#product-video","text":"Nscreen32 is the first device to receive the LVGL Certified Board label:","title":"Product Video"},{"location":"hardware/yeacreate/nscreen32/#enclosure","text":"We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Enclosure"},{"location":"integrations/home-assistant/howto/","text":"Home Assistant ~ The openHASP Custom Component simplifies synchronization of objects on one or more openHASP plates with Home Assistant entities. You can map any service supported by any entity in Home Assistant to any object event in openHASP. Moreover, you can set any property of any object in openHASP to any value from Home Assistant. This powerful concept gives you full freedom to create a completely customized, hardware-based control user interface for your home automation. We call plate any device running openHASP in your system. Note Before going forward make sure you have installed the MQTT add-on in Home Assistant and the option Enable Discovery is indeed enabled in the MQTT integration service. A working MQTT add-on with discovery enabled is a prerequisite for using the openHASP custom component. Installation ~ You have the option to install the custom component using HACS or via manual download: Using HACS Manual Install Install using HACS in one-click. This is the preferred and recommended method, as HACS provides a very effective way to keep the component updated and/or choose between various versions. Goto Home Assistant > HACS > Integrations . Click the Explore & Add Repositories button. Search for openHASP and click on the openHasp logo. Click Install this repository in HACS . Note: To install the current unstable development version select the Main . Click Install Reboot Home-Assistant Alternatively, you can also install it manually: Download ZIP Using the tool of choice open the directory (folder) for your HA configuration (where you find configuration.yaml ). If you do not have a custom_components directory there, you need to create it. In the custom_components directory create a new folder called openhasp . Download all the files from the custom_components/openhasp/ directory in this repository. Place the files you downloaded in the new directory you created. Edit your configuration.yaml file add an entry similar to the example below. Restart Home Assistant Note The download {target= blank} link points to the actual _development code in the master branch. Warning You have to use component version consistently with the firmware version on your plates. For example, if your plates are at firmware version 0.7.x , you also need to use component version 0.7.y to ensure interoperability. Only the first two digits matter, i.e. 0.7 , the last one can be different. Home Assistant will show a warning if it finds a version mismatch. Note that you can only have one version of the component installed at a time so a mix of plate firmware versions is not supported. Configuration ~ First prepare your plates to be integrated with Home Assistant (follow steps in order): Connect your plates to the network . Static DHCP or fixed IP is not needed as communication only happens through MQTT. Set the GPIO configuration corresponding to your hardware (important for them to be detected as entities), save and reboot. Restart Home Assistant. Set the MQTT server settings and make sure each plate has a unique node name, save and reboot. The component will automatically discover the plates and you will see them appearing in Lovelace UI's Configuration > Devices & Services > openHASP . When Home Assistant detects your plate, you will have to give it a name. In the examples below both name and node name is plate35 . You will be presented with options to set the backlight brightness level when the plate is idle and optionally you can set a path to a centrally located pages.jsonl file containing design for this plate - the component can send the contents of the file when the plate connects. From v0.6.3 of the component this file can also be a file with a .json extension. See the JSON Files section below. Note If you opt to store the pages.jsonl file on Home Assistant server, it will only be loaded on start of Home Assistant and reloaded on plate availability (becoming online). Optionally you should also check how to handle the offline state of the plate. Currently you will get a warning that you need to add manual configuration for the objects in your configuration.yaml , that's no problem, read ahead. Example ~ To add an openHASP plate to your installation with a sample configuration, upload a pages.jsonl file with the following content to your plate first: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"openHASP\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 140 , \"w\" : 170 , \"h\" : 30 , \"options\" : \"Apples\\nBananas\\nOranges\\nMelon\" } { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00.0\u00b0C\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" } Assuming your plate's configured MQTT node name is plate35 , add the following to your configuration.yaml file (Home Assistant will deliberately ask for it when finished autodetection procedure): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 openhasp : plate35 : objects : - obj : \"p0b1\" # temperature label on all pages properties : \"text\" : '{{ states(\"sensor.my_room_temperature\") }}\u00b0C' - obj : \"p1b2\" # light-switch toggle button properties : \"val\" : '{{ 1 if states(\"light.my_room\") == \"on\" else 0 }}' \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.my_room\", \"on\") else \"\\uE335\" | e }}' event : \"up\" : - service : homeassistant.toggle entity_id : \"light.my_room\" - obj : \"p1b3\" # dropdown event : \"changed\" : - service : persistent_notification.create data : message : I like {{ text }} Note The Home Assistant Custom Component is not limited to setting val and text properties on UI objects! There is nothing stopping you from using the full suite of template functions like state_attr in your templates to drive more sophisticated behaviors. See the Example Automations for more. Variable definitions ~ openhasp: (Required) The platform identifier. Required once in the configuration. plate35: (Required) Your plate identifier slug. For each plate in your system, such an entry is required, has to be unique. It is generated automatically from the plate name you gave during discovery, which by default equals to the HASP Node Name set in the plate's configuration . objects: (Optional) Definition of the objects reacting to changes in Home Assistant, or generating events for Home Assistant. obj: (string) (Required) The object identifier which we want to integrate with Home Assistant. Its name has the form pXbY where X represents the page where the object is located, and Y represents the id of the object on that page. properties: (Optional) List containing the properties of the object which we want to modify based on changes occurring in Home Assistant. In the example above text property gets updated whenever sensor.my_room_temperature changes. event: (Optional) List containing the events generated by the object when touched on the screen. These are object-specific and can be observed accurately with an MQTT client. Each event defines a list of services which will be processed in order (like actions list in an automation). In the example above, when object p1b2 (which is a toggle button) generates the on event, light.my_room will be turned on by the service call light.turn_on as specified in the event config. And similarly when off event comes through MQTT, the light will be turned off by the corresponding service call. Note Any variable coming from the MQTT message can be used between curly brackets and passed to the service call. In the example above when object p1b3 (which is a dropdown selector) generates the changed event, a persistent notification will appear in Home Assistant's Lovelace interface containing the selected text from the object, which was passed over from the MQTT message. See object events for more types of generated events. Reloading the configuration ~ After you make changes to the configuration of the plate you can apply them by either restarting Home Assistant or by reloading the integration from Lovelace user interface with option found in Configuration > Devices & Services > openHASP > (your plate >) 3dots menu > Reload . Note that this has to be done individually for each configured plate. You can achieve the same by with a service too: 1 2 3 service : homeassistant.reload_config_entry data : entry_id : 95f7d6fe3fa5f4e242797e9ae4a5dd1d With the entry_id found in .storage/core.config_entries file from your main Home Assistant configuration directory (do NOT edit this file!). Configuration tips ~ Multiple plates ~ If you have multiple plates you can add them all using different plate identifiers. Their configured topics have to be unique too: 1 2 3 4 5 6 7 8 9 10 openhasp : plate_my_room_1 : objects : # ... plate_my_room_2 : objects : # ... plate_my_room_3 : objects : # ... Split configuration ~ You can use Home Assistant's split configuration to help better organizing your config files. Instead of keeping the configuration of all openHASP plates in Home Assistant's main config file, you can keep openHASP config separately, by adding only this to configuration.yaml : openhasp: !include openhasp.yaml After this, you can move your openHASP configuration starting with plate_my_room: level to your separate openhasp.yaml file and restart Home Assistant. Moreover, if you have multiple plates, you can keep each one in a separate config file, to achieve this, make it like: openhasp: !include_dir_merge_named openhasp_configs/ Create a directory openhasp_configs right near configuration.yaml , and put in it all your plates configuration (only with plate_my_room: level) in separate yaml files and restart Home Assistant. Services ~ This component implements some specific services to make interactions with the plate even more comfortable. openhasp.wakeup Wakes up the display when an external event has occurred, like a presence or a PIR motion sensor. openhasp.next_page Changes plate to the next page. openhasp.prev_page Changes plate to the previous page. openhasp.change_page Changes plate directly to the specified page number. openhasp.clear_page Clears the contents of the specified page number. If page number not specified, clears all the pages. openhasp.load_pages Loads new design from pages.jsonl file from full path on Home Assistant server. The file must be located in an authorized location defined by allowlist_external_dirs (in case of hassio /config/ is the directory where Home Assistant's configuration.yaml resides, so in case of a subdirectory called openhasp the full path would be e.g. /config/openhasp/pages.jsonl , and you need to add /config/openhasp/ to your allowlist_external_dirs ). Note The contents of the file are loaded line by line thus \"page\":X has to be defined for each object. Unless you clear the page first, the objects will be updated. For example, to allow read-access to the folder, add these lines to your configuration.yaml : 1 2 3 homeassistant : allowlist_external_dirs : - \"/config/openhasp\" openhasp.command Wraps up any command so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! openhasp.config Wraps up any raw submodule config so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! Check out the example configurations and automations to learn how to use these services within Home Assistant. JSON Files ~ From v0.6.3 pages file supplied in the plate config within home assistant can be a .json , files with this extension will be parsed differently and expect a JSON array containing objects or strings. Objects must be valid JSONL lines and strings can be used for comments. As this file is valid JSON whitespace will be ignored when parsing and removed before sending the JSONL data to the plate. If you are storing your plate config along with your HA config, this allows you to have more readable config which will be formatted in your editor of choice. Example: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 [ { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" }, \"Comment string will be removed when parsing\" , { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } ] Debugging ~ Add these lines to your main configuration.yaml configuration and restart Home Assistant: 1 2 3 4 logger : default : warning logs : custom_components.openhasp : debug Look for the debug messages in the home-assistant.log file.","title":"How-To"},{"location":"integrations/home-assistant/howto/#home-assistant","text":"The openHASP Custom Component simplifies synchronization of objects on one or more openHASP plates with Home Assistant entities. You can map any service supported by any entity in Home Assistant to any object event in openHASP. Moreover, you can set any property of any object in openHASP to any value from Home Assistant. This powerful concept gives you full freedom to create a completely customized, hardware-based control user interface for your home automation. We call plate any device running openHASP in your system. Note Before going forward make sure you have installed the MQTT add-on in Home Assistant and the option Enable Discovery is indeed enabled in the MQTT integration service. A working MQTT add-on with discovery enabled is a prerequisite for using the openHASP custom component.","title":"Home Assistant"},{"location":"integrations/home-assistant/howto/#installation","text":"You have the option to install the custom component using HACS or via manual download: Using HACS Manual Install Install using HACS in one-click. This is the preferred and recommended method, as HACS provides a very effective way to keep the component updated and/or choose between various versions. Goto Home Assistant > HACS > Integrations . Click the Explore & Add Repositories button. Search for openHASP and click on the openHasp logo. Click Install this repository in HACS . Note: To install the current unstable development version select the Main . Click Install Reboot Home-Assistant Alternatively, you can also install it manually: Download ZIP Using the tool of choice open the directory (folder) for your HA configuration (where you find configuration.yaml ). If you do not have a custom_components directory there, you need to create it. In the custom_components directory create a new folder called openhasp . Download all the files from the custom_components/openhasp/ directory in this repository. Place the files you downloaded in the new directory you created. Edit your configuration.yaml file add an entry similar to the example below. Restart Home Assistant Note The download {target= blank} link points to the actual _development code in the master branch. Warning You have to use component version consistently with the firmware version on your plates. For example, if your plates are at firmware version 0.7.x , you also need to use component version 0.7.y to ensure interoperability. Only the first two digits matter, i.e. 0.7 , the last one can be different. Home Assistant will show a warning if it finds a version mismatch. Note that you can only have one version of the component installed at a time so a mix of plate firmware versions is not supported.","title":"Installation"},{"location":"integrations/home-assistant/howto/#configuration","text":"First prepare your plates to be integrated with Home Assistant (follow steps in order): Connect your plates to the network . Static DHCP or fixed IP is not needed as communication only happens through MQTT. Set the GPIO configuration corresponding to your hardware (important for them to be detected as entities), save and reboot. Restart Home Assistant. Set the MQTT server settings and make sure each plate has a unique node name, save and reboot. The component will automatically discover the plates and you will see them appearing in Lovelace UI's Configuration > Devices & Services > openHASP . When Home Assistant detects your plate, you will have to give it a name. In the examples below both name and node name is plate35 . You will be presented with options to set the backlight brightness level when the plate is idle and optionally you can set a path to a centrally located pages.jsonl file containing design for this plate - the component can send the contents of the file when the plate connects. From v0.6.3 of the component this file can also be a file with a .json extension. See the JSON Files section below. Note If you opt to store the pages.jsonl file on Home Assistant server, it will only be loaded on start of Home Assistant and reloaded on plate availability (becoming online). Optionally you should also check how to handle the offline state of the plate. Currently you will get a warning that you need to add manual configuration for the objects in your configuration.yaml , that's no problem, read ahead.","title":"Configuration"},{"location":"integrations/home-assistant/howto/#example","text":"To add an openHASP plate to your installation with a sample configuration, upload a pages.jsonl file with the following content to your plate first: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"openHASP\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 140 , \"w\" : 170 , \"h\" : 30 , \"options\" : \"Apples\\nBananas\\nOranges\\nMelon\" } { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00.0\u00b0C\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" } Assuming your plate's configured MQTT node name is plate35 , add the following to your configuration.yaml file (Home Assistant will deliberately ask for it when finished autodetection procedure): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 openhasp : plate35 : objects : - obj : \"p0b1\" # temperature label on all pages properties : \"text\" : '{{ states(\"sensor.my_room_temperature\") }}\u00b0C' - obj : \"p1b2\" # light-switch toggle button properties : \"val\" : '{{ 1 if states(\"light.my_room\") == \"on\" else 0 }}' \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.my_room\", \"on\") else \"\\uE335\" | e }}' event : \"up\" : - service : homeassistant.toggle entity_id : \"light.my_room\" - obj : \"p1b3\" # dropdown event : \"changed\" : - service : persistent_notification.create data : message : I like {{ text }} Note The Home Assistant Custom Component is not limited to setting val and text properties on UI objects! There is nothing stopping you from using the full suite of template functions like state_attr in your templates to drive more sophisticated behaviors. See the Example Automations for more.","title":"Example"},{"location":"integrations/home-assistant/howto/#variable-definitions","text":"openhasp: (Required) The platform identifier. Required once in the configuration. plate35: (Required) Your plate identifier slug. For each plate in your system, such an entry is required, has to be unique. It is generated automatically from the plate name you gave during discovery, which by default equals to the HASP Node Name set in the plate's configuration . objects: (Optional) Definition of the objects reacting to changes in Home Assistant, or generating events for Home Assistant. obj: (string) (Required) The object identifier which we want to integrate with Home Assistant. Its name has the form pXbY where X represents the page where the object is located, and Y represents the id of the object on that page. properties: (Optional) List containing the properties of the object which we want to modify based on changes occurring in Home Assistant. In the example above text property gets updated whenever sensor.my_room_temperature changes. event: (Optional) List containing the events generated by the object when touched on the screen. These are object-specific and can be observed accurately with an MQTT client. Each event defines a list of services which will be processed in order (like actions list in an automation). In the example above, when object p1b2 (which is a toggle button) generates the on event, light.my_room will be turned on by the service call light.turn_on as specified in the event config. And similarly when off event comes through MQTT, the light will be turned off by the corresponding service call. Note Any variable coming from the MQTT message can be used between curly brackets and passed to the service call. In the example above when object p1b3 (which is a dropdown selector) generates the changed event, a persistent notification will appear in Home Assistant's Lovelace interface containing the selected text from the object, which was passed over from the MQTT message. See object events for more types of generated events.","title":"Variable definitions"},{"location":"integrations/home-assistant/howto/#reloading-the-configuration","text":"After you make changes to the configuration of the plate you can apply them by either restarting Home Assistant or by reloading the integration from Lovelace user interface with option found in Configuration > Devices & Services > openHASP > (your plate >) 3dots menu > Reload . Note that this has to be done individually for each configured plate. You can achieve the same by with a service too: 1 2 3 service : homeassistant.reload_config_entry data : entry_id : 95f7d6fe3fa5f4e242797e9ae4a5dd1d With the entry_id found in .storage/core.config_entries file from your main Home Assistant configuration directory (do NOT edit this file!).","title":"Reloading the configuration"},{"location":"integrations/home-assistant/howto/#configuration-tips","text":"","title":"Configuration tips"},{"location":"integrations/home-assistant/howto/#services","text":"This component implements some specific services to make interactions with the plate even more comfortable. openhasp.wakeup Wakes up the display when an external event has occurred, like a presence or a PIR motion sensor. openhasp.next_page Changes plate to the next page. openhasp.prev_page Changes plate to the previous page. openhasp.change_page Changes plate directly to the specified page number. openhasp.clear_page Clears the contents of the specified page number. If page number not specified, clears all the pages. openhasp.load_pages Loads new design from pages.jsonl file from full path on Home Assistant server. The file must be located in an authorized location defined by allowlist_external_dirs (in case of hassio /config/ is the directory where Home Assistant's configuration.yaml resides, so in case of a subdirectory called openhasp the full path would be e.g. /config/openhasp/pages.jsonl , and you need to add /config/openhasp/ to your allowlist_external_dirs ). Note The contents of the file are loaded line by line thus \"page\":X has to be defined for each object. Unless you clear the page first, the objects will be updated. For example, to allow read-access to the folder, add these lines to your configuration.yaml : 1 2 3 homeassistant : allowlist_external_dirs : - \"/config/openhasp\" openhasp.command Wraps up any command so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! openhasp.config Wraps up any raw submodule config so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! Check out the example configurations and automations to learn how to use these services within Home Assistant.","title":"Services"},{"location":"integrations/home-assistant/howto/#json-files","text":"From v0.6.3 pages file supplied in the plate config within home assistant can be a .json , files with this extension will be parsed differently and expect a JSON array containing objects or strings. Objects must be valid JSONL lines and strings can be used for comments. As this file is valid JSON whitespace will be ignored when parsing and removed before sending the JSONL data to the plate. If you are storing your plate config along with your HA config, this allows you to have more readable config which will be formatted in your editor of choice. Example: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 [ { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" }, \"Comment string will be removed when parsing\" , { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } ]","title":"JSON Files"},{"location":"integrations/home-assistant/howto/#debugging","text":"Add these lines to your main configuration.yaml configuration and restart Home Assistant: 1 2 3 4 logger : default : warning logs : custom_components.openhasp : debug Look for the debug messages in the home-assistant.log file.","title":"Debugging"},{"location":"integrations/home-assistant/sampl_autom/","text":"Display of the current album cover of a media player ~ Combined with a media player entity which supports entity_picture attribute, you can automate display of that using the push_image service of the Custom Component. On the plate (named plate_livingroom in this example) you'd have two objects, first a rectangular object with rounded corners, secod an image object placed inside of it. It's hidden by default so you could place this on top of your existing media player controls, and have it pop up only when there's a cover present. To look nice together use the clip_corner property: { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"obj\" , \"x\" : 3 , \"y\" : 48 , \"w\" : 200 , \"h\" : 200 , \"radius\" : 6 , \"clip_corner\" : 1 , \"hidden\" : 1 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"img\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 200 , \"h\" : 200 , \"parentid\" : 15 , \"src\" : \"\" , \"auto_size\" : 1 } The automation below takes care of unhiding them when a cover appears on the sound_livingroom media player, updating the picture when it changes and hiding them again when the player drops the entity_picture attribute (it's stopped or the played media doesn't have a corresponding picture): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 - id : openhasp-sound_livingroom-detect-mediaplayer-coverart alias : openhasp-sound_livingroom-detect-mediaplayer-coverart trigger : - platform : state entity_id : media_player.sound_livingroom condition : - condition : template value_template : > {{ trigger.from_state.attributes.entity_picture != trigger.to_state.attributes.entity_picture }} action : - choose : - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') != None }}\" sequence : - service : openhasp.push_image target : entity_id : openhasp.plate_livingroom data : image : http://ip.of.your.ha:8123{{ state_attr('media_player.sound_livingroom','entity_picture') }} obj : p6b16 width : 200 height : 200 - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '0' - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') == None }}\" sequence : - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '1' Backlight ON (dimmed) if there's any light in the room, OFF otherwise ~ The night mode activates when all the lights are off and shutters are down below 25% (assuming it's dark enough for the backlight to be disturbing in such situation), the day mode activates otherwise. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. This will act directly on the plate in a certain room, as it is triggered by entities located in that room. If you have multiple plates in various rooms, you can create separate automations for each. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 - id : openhasp-plate_myroom-day alias : \"openHASP Night mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":0}' - id : openhasp-plate_myroom-night alias : \"openHASP Day mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ not ( state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" ) }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":60}' Note the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes). Backlight ON (dimmed) during the day, OFF during the night for all the plates ~ The night mode activates when sun goes down, and the day mode activates when the sun comes up. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. Assuming your plate's configured MQTT group name is plates , this will affect all the plates in your system at once: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - id : openhasp-night alias : \"openHASP Night mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation below : -1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":120}' - id : openhasp-day alias : \"openHASP Day mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation above : 1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":0}' Note here too the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes). Turn ON moodlight when backlight goes OFF (and back) ~ If your plate has moodlights, it is useful in dark situations, when you don't want to have the screen backlit on all the time as above, but have the mood light on instead. During the day mood light doesn't light. Put your light.plate_my_room_moodlight to a Lovelace card entity row and select a nice color for moodlight. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 - id : openhasp-moodlight-on alias : \"openHASP Moodlight ON when Backlight OFF\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'on' to : 'off' action : - service : light.turn_on target : entity_id : light.plate_my_room_moodlight - id : openhasp-moodlight-off alias : \"openHASP Moodlight OFF when Backlight ON\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'off' to : 'on' action : - service : light.turn_off target : entity_id : light.plate_my_room_moodlight Return to home page after some idle time ~ Apart from the idle times controlling backlight levels, one may want to return to page 1 after a while. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 - id : openhasp-back-to-page-1 alias : \"openHASP back to page 1\" trigger : - platform : template value_template : \"{{ state_attr('openhasp.plate_my_room','idle') != 'off' }}\" for : \"00:05:00\" condition : - condition : template value_template : \"{{ states('openhasp.plate_my_room') != '1' and states('openhasp.plate_my_room') != 'unavailable' }}\" action : - service : openhasp.change_page target : entity_id : openhasp.plate_my_room data : page : 1 Prevent burn-in of the LCD screen ~ You can use this to protect and prolonge the lifetime of the LCD screens, thus being more green and generating less hazardous waste. Wall mounted LCD screens' main problem is that they display the same picture 99.999% of the time. Even if somebody turns off backlight during the night or dark periods, the LCD screen keeps showing the same picture, seen by nobody. There are high chances that this will lead to screen picture burn-in after a few years of operation. Pixel training One way to reduce this is to \"train\" the pixels periodically with completely different other content. Assuming your group name is configured as plates in your screens running openHASP, here is a possible solution to extend their life (all at once). The cycle runs for 30 seconds each time, can be stopped by touching. The trigger runs this 6 times each night. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 - id : openhasp_antiburn_start_at_night alias : openHASP anti-burn-in start at night initial_state : 'on' trigger : - platform : time at : '00:20:00' - platform : time at : '01:20:00' - platform : time at : '02:20:00' - platform : time at : '03:20:00' - platform : time at : '04:20:00' - platform : time at : '05:20:00' action : - service : mqtt.publish data : topic : hasp/plates/command/antiburn payload : '1' Clear pixels when backlight off Another way to reduce the chance of burn-in is to clear the contents of the screen while the backlight is turned off, as nobody sees the pixels anyway. Just add these actions to the first automation example which draw an overlay with a black base object on page 0 when display is off, and deletes it when comes back on: for automation openhasp-moodlight-on , add to actions: 1 2 3 4 - service : mqtt.publish data : topic : hasp/plates/command/jsonl payload : '{\"page\":0,\"id\":99,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"hidden\":0,\"bg_grad_dir\":0,\"bg_color\":\"black\"}' for automation openhasp-moodlight-off , add to actions: 1 2 3 4 5 6 7 8 - service : mqtt.publish data : topic : hasp/plates/command/p0b99.hidden payload : '1' - service : mqtt.publish data : topic : hasp/plates/command/p0b99.delete payload : '' Don't forget to adjust the size of the object to your screen if it's not 240x320. Dynamically set UI element dimensions ~ Note This technique relies on small changes in the openHasp device firmware that should be present in all builds of 0.7 after 2021-01. openHasp devices report several device properties to the Custom Component... including tftWidth and tftHeight . These properties are exposed in home assistant as device attributes and can be used in template automations. Here is a modified version of the Display clock and temperature example configuration that will use a \"generic\" jsonl file that has no hard-coded layout attributes: x , y , w , h and will appear the same on devices with different resolutions and screen orientations. Tell the openHasp device to create three text labels. As we are not specifying x/y coordinates, when the device first powers on, all three labels will be drawn in the upper left corner with their default size/values. When plate00 comes online and connects to the MQTT broker, the openHasp Custom Component will be invoked and the yaml below will be executed. The templates will be executed and the computed x , y , w , h values for each UI component will be sent to the plate. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 { \"page\" : 0 , \"comment\" : \"Default to page0 as the header and page/layout\" } { \"id\" : 1 , \"comment\" : \"Time in the top left\" , \"obj\" : \"label\" , \"text\" : \"00:00\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 2 , \"comment\" : \"Temp in the middle\" , \"obj\" : \"label\" , \"text\" : \"00.0\u00b0C\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 3 , \"comment\" : \"Humidity in the top right\" , \"obj\" : \"label\" , \"text\" : \"00.0%\" , \"bg_color\" : \"#2C3E50\" } Assuming that the above jsonl was deployed to a openHasp device named plate00 , configure the Home Assistant Custom Component with yaml like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 # The top left corner is 0,0, X grows positive to the right and Y grows positive down plate00 : objects : # Header: Time - obj : \"p0b1\" properties : \"align\" : \"left\" \"text\" : \"{{ states('sensor.time') }}\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Temp - obj : \"p0b2\" properties : \"align\" : \"center\" \"text\" : \"{{ states('sensor.room_temperature') }}\u00b0C\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+hdrLblWd}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Humidity - obj : \"p0b3\" properties : \"align\" : \"right\" \"text\" : \"{{ states('sensor.room_humidity') }}%\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+(2*hdrLblWd)}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} You should be able to shift the screen orientation for plate00 by 90 degrees and restart the device to apply your change. When the device boots back up and connects to MQTT, openHasp should report a different value for it's tftHeight and tftWidth which will cause Home Assistant to re-evaluate the templates. A few seconds after connecting to MQTT, plate00 should have an updated layout that reflects it's new screen orientation.","title":"Example Automations"},{"location":"integrations/home-assistant/sampl_autom/#display-of-the-current-album-cover-of-a-media-player","text":"Combined with a media player entity which supports entity_picture attribute, you can automate display of that using the push_image service of the Custom Component. On the plate (named plate_livingroom in this example) you'd have two objects, first a rectangular object with rounded corners, secod an image object placed inside of it. It's hidden by default so you could place this on top of your existing media player controls, and have it pop up only when there's a cover present. To look nice together use the clip_corner property: { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"obj\" , \"x\" : 3 , \"y\" : 48 , \"w\" : 200 , \"h\" : 200 , \"radius\" : 6 , \"clip_corner\" : 1 , \"hidden\" : 1 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"img\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 200 , \"h\" : 200 , \"parentid\" : 15 , \"src\" : \"\" , \"auto_size\" : 1 } The automation below takes care of unhiding them when a cover appears on the sound_livingroom media player, updating the picture when it changes and hiding them again when the player drops the entity_picture attribute (it's stopped or the played media doesn't have a corresponding picture): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 - id : openhasp-sound_livingroom-detect-mediaplayer-coverart alias : openhasp-sound_livingroom-detect-mediaplayer-coverart trigger : - platform : state entity_id : media_player.sound_livingroom condition : - condition : template value_template : > {{ trigger.from_state.attributes.entity_picture != trigger.to_state.attributes.entity_picture }} action : - choose : - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') != None }}\" sequence : - service : openhasp.push_image target : entity_id : openhasp.plate_livingroom data : image : http://ip.of.your.ha:8123{{ state_attr('media_player.sound_livingroom','entity_picture') }} obj : p6b16 width : 200 height : 200 - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '0' - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') == None }}\" sequence : - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '1'","title":"Display of the current album cover of a media player"},{"location":"integrations/home-assistant/sampl_autom/#backlight-on-dimmed-if-theres-any-light-in-the-room-off-otherwise","text":"The night mode activates when all the lights are off and shutters are down below 25% (assuming it's dark enough for the backlight to be disturbing in such situation), the day mode activates otherwise. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. This will act directly on the plate in a certain room, as it is triggered by entities located in that room. If you have multiple plates in various rooms, you can create separate automations for each. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 - id : openhasp-plate_myroom-day alias : \"openHASP Night mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":0}' - id : openhasp-plate_myroom-night alias : \"openHASP Day mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ not ( state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" ) }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":60}' Note the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes).","title":"Backlight ON (dimmed) if there's any light in the room, OFF otherwise"},{"location":"integrations/home-assistant/sampl_autom/#backlight-on-dimmed-during-the-day-off-during-the-night-for-all-the-plates","text":"The night mode activates when sun goes down, and the day mode activates when the sun comes up. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. Assuming your plate's configured MQTT group name is plates , this will affect all the plates in your system at once: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - id : openhasp-night alias : \"openHASP Night mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation below : -1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":120}' - id : openhasp-day alias : \"openHASP Day mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation above : 1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":0}' Note here too the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes).","title":"Backlight ON (dimmed) during the day, OFF during the night for all the plates"},{"location":"integrations/home-assistant/sampl_autom/#turn-on-moodlight-when-backlight-goes-off-and-back","text":"If your plate has moodlights, it is useful in dark situations, when you don't want to have the screen backlit on all the time as above, but have the mood light on instead. During the day mood light doesn't light. Put your light.plate_my_room_moodlight to a Lovelace card entity row and select a nice color for moodlight. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 - id : openhasp-moodlight-on alias : \"openHASP Moodlight ON when Backlight OFF\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'on' to : 'off' action : - service : light.turn_on target : entity_id : light.plate_my_room_moodlight - id : openhasp-moodlight-off alias : \"openHASP Moodlight OFF when Backlight ON\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'off' to : 'on' action : - service : light.turn_off target : entity_id : light.plate_my_room_moodlight","title":"Turn ON moodlight when backlight goes OFF (and back)"},{"location":"integrations/home-assistant/sampl_autom/#return-to-home-page-after-some-idle-time","text":"Apart from the idle times controlling backlight levels, one may want to return to page 1 after a while. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 - id : openhasp-back-to-page-1 alias : \"openHASP back to page 1\" trigger : - platform : template value_template : \"{{ state_attr('openhasp.plate_my_room','idle') != 'off' }}\" for : \"00:05:00\" condition : - condition : template value_template : \"{{ states('openhasp.plate_my_room') != '1' and states('openhasp.plate_my_room') != 'unavailable' }}\" action : - service : openhasp.change_page target : entity_id : openhasp.plate_my_room data : page : 1","title":"Return to home page after some idle time"},{"location":"integrations/home-assistant/sampl_autom/#prevent-burn-in-of-the-lcd-screen","text":"You can use this to protect and prolonge the lifetime of the LCD screens, thus being more green and generating less hazardous waste. Wall mounted LCD screens' main problem is that they display the same picture 99.999% of the time. Even if somebody turns off backlight during the night or dark periods, the LCD screen keeps showing the same picture, seen by nobody. There are high chances that this will lead to screen picture burn-in after a few years of operation.","title":"Prevent burn-in of the LCD screen"},{"location":"integrations/home-assistant/sampl_autom/#dynamically-set-ui-element-dimensions","text":"Note This technique relies on small changes in the openHasp device firmware that should be present in all builds of 0.7 after 2021-01. openHasp devices report several device properties to the Custom Component... including tftWidth and tftHeight . These properties are exposed in home assistant as device attributes and can be used in template automations. Here is a modified version of the Display clock and temperature example configuration that will use a \"generic\" jsonl file that has no hard-coded layout attributes: x , y , w , h and will appear the same on devices with different resolutions and screen orientations. Tell the openHasp device to create three text labels. As we are not specifying x/y coordinates, when the device first powers on, all three labels will be drawn in the upper left corner with their default size/values. When plate00 comes online and connects to the MQTT broker, the openHasp Custom Component will be invoked and the yaml below will be executed. The templates will be executed and the computed x , y , w , h values for each UI component will be sent to the plate. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 { \"page\" : 0 , \"comment\" : \"Default to page0 as the header and page/layout\" } { \"id\" : 1 , \"comment\" : \"Time in the top left\" , \"obj\" : \"label\" , \"text\" : \"00:00\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 2 , \"comment\" : \"Temp in the middle\" , \"obj\" : \"label\" , \"text\" : \"00.0\u00b0C\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 3 , \"comment\" : \"Humidity in the top right\" , \"obj\" : \"label\" , \"text\" : \"00.0%\" , \"bg_color\" : \"#2C3E50\" } Assuming that the above jsonl was deployed to a openHasp device named plate00 , configure the Home Assistant Custom Component with yaml like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 # The top left corner is 0,0, X grows positive to the right and Y grows positive down plate00 : objects : # Header: Time - obj : \"p0b1\" properties : \"align\" : \"left\" \"text\" : \"{{ states('sensor.time') }}\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Temp - obj : \"p0b2\" properties : \"align\" : \"center\" \"text\" : \"{{ states('sensor.room_temperature') }}\u00b0C\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+hdrLblWd}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Humidity - obj : \"p0b3\" properties : \"align\" : \"right\" \"text\" : \"{{ states('sensor.room_humidity') }}%\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+(2*hdrLblWd)}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} You should be able to shift the screen orientation for plate00 by 90 degrees and restart the device to apply your change. When the device boots back up and connects to MQTT, openHasp should report a different value for it's tftHeight and tftWidth which will cause Home Assistant to re-evaluate the templates. A few seconds after connecting to MQTT, plate00 should have an updated layout that reflects it's new screen orientation.","title":"Dynamically set UI element dimensions"},{"location":"integrations/home-assistant/sampl_conf/","text":"Display clock and temperature ~ The easiest example is to display the state of a clock and a temperature sensor from Home Assistant, using label objects in openHASP. Create a label object to display the temperature value, a separate label object to display the unit and a third label object for the clock: 1 2 3 { \"page\" : 0 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"00.0\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 220 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"\u00b0C\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 3 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00:00\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } In component configuration all you need for the objects is: 1 2 3 4 5 6 7 objects : - obj : \"p0b4\" properties : \"text\" : \"{{ states('sensor.my_room_temperature') }}\" - obj : \"p0b6\" properties : \"text\" : \"{{ states('sensor.time') }}\" Note: ~ You can of course omit the second label object with the unit and use the same for both value and unit: 1 2 { \"page\" : 0 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00.0\u00b0C\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 3 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00:00\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } In component configuration you will add the unit to the value using the template: 1 2 3 4 objects : - obj : \"p0b4\" properties : \"text\" : \"{{ states('sensor.my_room_temperature') }}\u00b0C\" All these being on page 0 means that they will appear on all the pages. Some basic controls ~ Jsonl and Home Assistant configuration: Toggle a light (or any switchable entity with on/off states) ~ 1 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"align\" : 1 } 1 2 3 4 5 6 7 8 - obj : \"p1b2\" # switch, checkbox or btn with toggle true properties : \"val\" : '{{ 1 if is_state(\"light.my_lamp\", \"on\") else 0 }}' \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.my_lamp\", \"on\") else \"\\uE335\" | e }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.my_lamp\" Dropdown (self-populating from an input_select) ~ 1 { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"dropdown\" , \"x\" : 5 , \"y\" : 40 , \"w\" : 230 , \"h\" : 30 , \"options\" : \"\" } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 - obj : \"p1b3\" # dropdown properties : \"options\" : > {% if (state_attr('input_select.my_dropdown_selections','options') != none and states('input_select.my_dropdown_selections') not in ['unavailable', 'unknown']) %}{%for item in state_attr('input_select.my_dropdown_selections','options')%}{{item+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"val\" : > {% if (state_attr('input_select.my_dropdown_selections','options') != none and states('input_select.my_dropdown_selections') not in ['unavailable', 'unknown']) %}{%for item in state_attr('input_select.my_dropdown_selections','options')%} {{loop.index -1 if item == states('input_select.my_dropdown_selections') }} {%-endfor%}{% endif %} event : \"changed\" : - service : input_select.select_option data : option : '{{ text }}' target : entity_id : input_select.my_dropdown_selections - service : persistent_notification.create data : message : Selected {{ text }} Color coded icons ~ Color code a WiFi icon according to RSSI reported by the plate openHASP config: (screen size 240x320) 1 { \"obj\" : \"btn\" , \"id\" : 1 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"\\uE5A9\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } relevant openHASP-custom-component config: 1 2 3 - obj : \"p0b1\" properties : \"text_color\" : \"{% if -30 <= state_attr('openhasp.openhasp_plate','rssi') |int %}green{% elif -31 > state_attr('openhasp.openhasp_plate','rssi') |int >= -50 %}orange{% elif -51 > state_attr('openhasp.openhasp_plate','rssi') |int >= -80 %}tomato{% else %}red{% endif %}\" Color code a temperature icon according to sensor values openHASP config: (screen size 240x320) 1 { \"obj\" : \"btn\" , \"id\" : 3 , \"x\" : 165 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"\\uE50F\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } relevant openHASP-custom-component config: 1 2 3 - obj : \"p0b3\" properties : \"text_color\" : \"{% if states('sensor.room_temperature') |int <= 21 %}#4682B4{% elif 21 < states('sensor.room_temperature') |int <= 26 %}green{% else %}red{% endif %}\" Variable sized icons ~ Have a fan icon which changes its size depending on the speed of the fan, and goes off the screen when the fan is off. openHASP config: 1 { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 1 , \"h\" : 35 , \"w\" : 35 , \"text\" : \"\\uE210\" , \"align\" : \"left\" , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"yellow\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 - obj : \"p0b1\" properties : \"jsonl\" : > {% if is_state('input_select.fan_speed', 'Low') %} {\"text_font\":12,\"x\":6,\"y\":7} {%-elif is_state('input_select.fan_speed', 'Medium') %} {\"text_font\":16,\"x\":5,\"y\":6} {%-elif is_state('input_select.fan_speed', 'Hign') %} {\"text_font\":24,\"x\":1,\"y\":2} {%-elif is_state('input_select.fan_speed', 'Turbo') %} {\"text_font\":32,\"x\":-2,\"y\":-3} {%-elif is_state('input_select.fan_speed', 'OFF') %} {\"text_font\":12,\"x\":-10,\"y\":-10} {% endif %} Light brightness and color ~ Have a light in Home Assistant controlled by openHASP. In our example we use Lanbon L8's moodlight which has both brightness and color - we use a slider object for the brightness, and a cpicker object for color. relevant openHASP config: 1 2 { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"slider\" , \"x\" : 6 , \"y\" : 15 , \"w\" : 14 , \"h\" : 180 , \"min\" : 1 , \"max\" : 255 } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"cpicker\" , \"x\" : 30 , \"y\" : 10 , \"w\" : 180 , \"h\" : 180 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 - obj : \"p1b31\" # Light brightness properties : \"val\" : \"{{ state_attr('light.plate_moodlight', 'brightness') if state_attr('light.plate_moodlight', 'brightness') != None else 0 }}\" event : \"changed\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" - obj : \"p1b32\" # Light color properties : \"color\" : > {% if is_state('light.plate_moodlight','on') %} {% set rgb = state_attr('light.plate_moodlight','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" The brightness slider value gets updated from the brightness attribute of light.plate_moodlight , while it's on. If it's off, that attribute is removed by Home Assistant, in that case we set it to 0 . The color property gets updated from the rgb_color attriburte of the light. The R, G and B decimal color values are converted to hexadecimal html color code using a template whenever the color of the light changes in Home Assistant. When somebody changes the color of the picker object on the page, the light in Home Assistant gets updated with rgb_color values received in the MQTT message from the plate. Cover with state feedback ~ The icon on the up and down buttons change color when covers move and set opacity when reached to limit. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"btn\" , \"x\" : 83 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"btn\" , \"x\" : 161 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 - obj : \"p1b4\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b5\" properties : \"text\" : > {% if is_state('cover.cover_1', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.cover_1', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b6\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.cover_1\" Cover with button matrix ~ A simpler cover control with only basic feedback. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 { \"page\" : 4 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 0 , \"y\" : 20 , \"w\" : 240 , \"h\" : 70 , \"options\" :[ \"\\uE05D\" , \"\\uE4DB\" , \"\\uE045\" ], \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 - obj : \"p4b20\" properties : \"options\" : > {% if is_state('cover.cover_1', 'closing') %} [\"\\uE05D\",\"\\uE4DB\",\"#FFFF00 \\uE045\"] {%-elif is_state('cover.cover_1', 'opening') %} [\"#FFFF00 \\uE05D\",\"\\uE4DB\",\"\\uE045\"] {%-else %} [\"\\uE05D\",\"\\uE4DB\",\"\\uE045\"] {% endif %} event : \"down\" : - service : > {% if val == 0 %} cover.open_cover {%-elif val == 1 %} cover.stop_cover {%-elif val == 2 %} cover.close_cover {% endif %} target : entity_id : cover.cover_1 Covers like in Lovelace ~ The icon behaves like in Lovelace. UI theme set to Hasp Light in plate's web interface. Your browser does not support the video tag. Check out the Lovelace-like entities for similar placement. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 1\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 2\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 25 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 26 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 - obj : \"p5b12\" properties : \"text\" : > {% if is_state('cover.my_cover', 'closing') %} {{ \"\\uE6C0\" | e }} {%-elif is_state('cover.my_cover', 'opening') %} {{ \"\\uE6C3\" | e }} {%-elif is_state('cover.my_cover', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.my_cover', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} - obj : \"p5b14\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b15\" event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b16\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.my_cover\" Media player ~ The labels with artist and title are scrolling, the progressbar fills if the media player provides duration and playback position. The dropdown lists containing the available sources and sound modes of the player get populated automatically by the values existing on the player in Home Assistant, and also the actually selected source is in sync with it. Player availability is shown by the opacity of the buttons. Player state (play/pause) is shown by the middle button, short pressing means pause, long-press means stop. Power state shown by color, repeat, shuffle and muted state shown by appropriate icons on the buttons. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { \"page\" : 6 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 , \"bg_opa\" : 0 , \"shadow_opa\" : 140 , \"shadow_color\" : \"black\" , \"shadow_width\" : 20 , \"shadow_spread\" : 0 } { \"page\" : 6 , \"id\" : 11 , \"obj\" : \"obj\" , \"x\" : 8 , \"y\" : 38 , \"w\" : 200 , \"h\" : 84 , \"click\" : 0 } { \"page\" : 6 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 48 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 83 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 8 , \"y\" : 117 , \"w\" : 200 , \"h\" : 5 , \"min\" : 0 , \"max\" : 100 , \"border_opa\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"dropdown\" , \"x\" : 8 , \"y\" : 129 , \"w\" : 120 , \"h\" : 30 , \"options\" : \"Source1\\nSource2\\nSource3\" , \"direction\" : 3 , \"max_height\" : 300 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"dropdown\" , \"x\" : 133 , \"y\" : 129 , \"w\" : 75 , \"h\" : 30 , \"options\" : \"Jazz\\nPop\\nRock\" , \"direction\" : 2 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 17 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 166 , \"w\" : 50 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AE\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 18 , \"obj\" : \"btn\" , \"x\" : 66 , \"y\" : 166 , \"w\" : 83 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE40A\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 19 , \"obj\" : \"btn\" , \"x\" : 157 , \"y\" : 166 , \"w\" : 51 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AD\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 20 , \"obj\" : \"slider\" , \"x\" : 212 , \"y\" : 38 , \"w\" : 20 , \"h\" : 244 , \"min\" : 0 , \"max\" : 100 , \"val\" : 85 } { \"page\" : 6 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE425\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 60 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE457\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 111 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE49E\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 163 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE57E\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 - obj : \"p6b12\" # artist label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_artist') if state_attr('media_player.sound_my_room1','media_artist') else '-' }}\" - obj : \"p6b13\" # title label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_title') if state_attr('media_player.sound_my_room1','media_title') else '-' }}\" - obj : \"p6b15\" # sources list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','source_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{\"(no source)\\n\"|e}} {%- for source in state_attr('media_player.sound_my_room1','source_list') -%} {{source+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %} {% if state_attr('media_player.sound_my_room1','source') == None %}0{% else %} {%for source in state_attr('media_player.sound_my_room1','source_list')%} {{loop.index if source == state_attr('media_player.sound_my_room1','source') }} {%-endfor%}{%-endif %}{%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_source data : entity_id : media_player.sound_my_room1 source : \"{{ text }}\" - obj : \"p6b16\" # sound modes list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','sound_mode_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {%-for soundmode in state_attr('media_player.sound_my_room1','sound_mode_list')-%} {{soundmode+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %}{%for source in state_attr('media_player.sound_my_room1','sound_mode_list')%} {{loop.index -1 if source == state_attr('media_player.sound_my_room1','sound_mode') }} {%-endfor%}{% endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_sound_mode data : entity_id : media_player.sound_my_room1 sound_mode : \"{{ text }}\" - obj : \"p6b14\" # progressbar properties : \"max\" : \"{{ state_attr('media_player.sound_my_room1','media_duration') | int }}\" \"val\" : \"{{ state_attr('media_player.sound_my_room1','media_position') | int }}\" - obj : \"p6b18\" # play/pause/stop properties : \"text\" : > {% if is_state('media_player.sound_my_room1', 'playing') %} {{ \"\\uE3E4\" | e }} {%-else %} {{ \"\\uE40A\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_play_pause target : entity_id : media_player.sound_my_room1 \"long\" : - service : media_player.media_stop target : entity_id : media_player.sound_my_room1 - obj : \"p6b17\" # prev properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_previous_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b19\" # next properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_next_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b20\" # volume slider properties : \"val\" : > {% if (state_attr('media_player.sound_my_room1','volume_level') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{ state_attr('media_player.sound_my_room1','volume_level') * 100 | int(default=80) }} {%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" \"up\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" - obj : \"p6b21\" # power properties : \"text_color\" : \"{{ '#B00000' if states('media_player.sound_my_room1') == 'off' else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.toggle data : entity_id : media_player.sound_my_room1 - obj : \"p6b22\" # repeat properties : \"text\" : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} {{ \"\\uE458\" | e }} {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} {{ \"\\uE456\" | e }} {%-else %} {{ \"\\uE457\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.repeat_set data : entity_id : media_player.sound_my_room1 repeat : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} all {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} off {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'off') %} one {%-endif %} - obj : \"p6b23\" # shuffle properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} {{ \"\\uE49D\" | e }} {%-else %} {{ \"\\uE49E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.shuffle_set data : entity_id : media_player.sound_my_room1 shuffle : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} false {% else %} true {%-endif %} - obj : \"p6b24\" # mute properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} {{ \"\\uE75F\" | e }} {%-else %} {{ \"\\uE57E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.volume_mute data : entity_id : media_player.sound_my_room1 is_volume_muted : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} false {% else %} true {%-endif %} Note that the val value of the slider is multiplied and divided by 100 when read and set, because LVGL only suppports integers for object values. By multiplying and dividing by 100, it becomes possible to set volume between 0 and 1 as required by Home Assistant. Generic thermostat/climate ~ This example is a bit more complex in the aspect that it uses several objects put on top of each other, and grouped toghether using the parentid parameter. Special attention goes to an invisible tabview (exteding over the label dispaying the target temperarture) which allows for swiping between an on/off switch and dropdowns for setting the hvac and fan modes. The target temperature can be set by dragging the arc handle, more precise +/- setting possible by short/long pressing the middle circle containing the current temperature (increasing/decreasing the value by the temperature step defined by the climate entity). Note that the min , max and val values of the arc and gauge are multiplied and divided by 10 when set and read, because LVGL only suppports integers for object values. By multiplying and dividing by 10, it becomes possible to set decimal values for climate temperature. The number of the ticks on the gauge is determined from the min , max attributes of the configured climate, likewise the hvac_modes and fan_modes dropdowns. You can localise these using the if-else statements of the template in the configuration of the custom component. The active area of the arc changes color based on the current hvac mode of the entity. UI theme set to Hasp Light in plate's web interface. Note that the tab swiping dots ( p3b26 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Your browser does not support the video tag. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 20 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 37 , \"w\" : 230 , \"h\" : 230 , \"min\" : 170 , \"max\" : 300 , \"val\" : 250 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"adjustable\" : \"true\" , \"line_width\" : 21 , \"line_width10\" : 21 , \"line_color10\" : \"#34bdeb\" , \"bg_opa\" : 0 , \"pad_top20\" : 5 , \"pad_bottom20\" : 5 , \"pad_left20\" : 5 , \"pad_right20\" : 5 , \"pad_top\" : 5 , \"pad_bottom\" : 5 , \"pad_left\" : 5 , \"pad_right\" : 5 } { \"page\" : 3 , \"id\" : 21 , \"obj\" : \"gauge\" , \"x\" : 28 , \"y\" : 28 , \"w\" : 175 , \"h\" : 175 , \"parentid\" : 20 , \"min\" : 170 , \"max\" : 300 , \"val\" : 224 , \"format\" : 1 , \"critical_value\" : 301 , \"label_count\" : 14 , \"line_count\" : 27 , \"border_width\" : 0 , \"pad_top\" : 2 , \"pad_bottom\" : 2 , \"pad_left\" : 2 , \"pad_right\" : 2 , \"value_str\" : \"\u00b0C\" , \"value_ofs_y\" : 55 , \"value_font\" : 16 , \"bg_opa\" : 0 , \"line_width10\" : 3 , \"line_rounded10\" : 1 , \"line_color\" : \"#348feb\" , \"line_color60\" : \"#348feb\" , \"scale_grad_color\" : \"#eb4934\" , \"scale_grad_color60\" : \"#eb4934\" , \"scale_end_color60\" : \"#eb4934\" } { \"page\" : 3 , \"id\" : 22 , \"obj\" : \"obj\" , \"x\" : 85 , \"y\" : 85 , \"w\" : 60 , \"h\" : 60 , \"parentid\" : 20 , \"click\" : 0 , \"radius\" : 30 , \"border_width\" : 2 , \"border_opa\" : 200 } { \"page\" : 3 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 80 , \"y\" : 100 , \"w\" : 70 , \"h\" : 30 , \"parentid\" : 20 , \"text\" : \"22.4\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 24 , \"obj\" : \"obj\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 25 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"25\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 26 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 220 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" , \"border_width\" : 0 } { \"page\" : 3 , \"id\" : 30 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 235 , \"w\" : 240 , \"h\" : 80 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"radius\" : 0 } { \"page\" : 3 , \"id\" : 31 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 32 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 33 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 41 , \"obj\" : \"switch\" , \"x\" : 35 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 31 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 3 , \"id\" : 42 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 32 , \"options\" : \"fan_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 43 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 33 , \"options\" : \"hvac_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 - obj : \"p3b20\" # arc slider properties : \"val\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') | int * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"line_color1\" : > {% if is_state('climate.thermostat_1', 'cool') %} {{ \"#346beb\" }} {%-elif is_state('climate.thermostat_1', 'heat_cool') %} {{ \"#34bdeb\" }} {%-elif is_state('climate.thermostat_1', 'heat') %} {{ \"#eb3434\" }} {%-elif is_state('climate.thermostat_1', 'dry') %} {{ \"#ebeb34\" }} {%-elif is_state('climate.thermostat_1', 'fan_only') %} {{ \"#34eb77\" }} {%-else %} {{ \"#9f96b0\" }} {% endif %} event : \"changed\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" - obj : \"p3b21\" # gauge current temp properties : \"val\" : > {% if not (is_state('sensor.ble_atlaghomerseklet','unavailable') or is_state('sensor.ble_atlaghomerseklet','unknown')) %} {{ states('sensor.ble_atlaghomerseklet') | float (default=0) * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"critical_value\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 + 1 }} {%- endif %} \"label_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int + 1 }} {%- endif %} \"line_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ (state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int) * 2 + 1 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b23\" # label current temp (and +/- with short/long touch) properties : \"text\" : > {% if (is_state('sensor.temp_room_1','unavailable') or is_state('sensor.temp_room_1','unknown')) %} {{ \"--.-\" }} {%-else %} {{ states('sensor.temp_room_1') | round(1,default=0) }} {%- endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') + state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" \"long\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') - state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" - obj : \"p3b25\" # label target temp properties : \"text\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b41\" # on/off switch properties : \"val\" : \"{{ 0 if (is_state('climate.thermostat_1', 'off') or is_state('climate.thermostat_1', 'unavailable')) else 1 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"down\" : - service_template : > {% if val == 0 -%} climate.turn_on {% else -%} climate.turn_off {% endif -%} entity_id : \"climate.thermostat_1\" - obj : \"p3b30\" # tab dots event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p3b26.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 2 %} {{ \"#909090 \\u2022# #909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p3b42\" # dropdown with fan_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','fan_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {%- if mode == 'auto' -%} Automatic{{\"\\n\"|e}} {%- elif mode == 'low' -%} Low{{\"\\n\"|e}} {%- elif mode == 'medium' -%} Medium{{\"\\n\"|e}} {%- elif mode == 'high' -%} High{{\"\\n\"|e}} {%- elif mode == 'turbo' -%} Turbo{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {{loop.index -1 if mode == state_attr('climate.thermostat_1','fan_mode') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_fan_mode target : entity_id : climate.thermostat_1 data : fan_mode : > {% if text == \"Automatic\" -%} auto {% elif text == 'Low' -%} low {% elif text == 'Medium' -%} medium {% elif text == 'High' -%} high {% elif text == 'Turbo' -%} turbo {% endif -%} - obj : \"p3b43\" # dropdown with hvac_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','hvac_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {%- if mode == 'off' -%} Off{{\"\\n\"|e}} {%- elif mode == 'heat' -%} Heating{{\"\\n\"|e}} {%- elif mode == 'cool' -%} Cooling{{\"\\n\"|e}} {%- elif mode == 'heat_cool' -%} Heat/Cool{{\"\\n\"|e}} {%- elif mode == 'dry' -%} Drying{{\"\\n\"|e}} {%- elif mode == 'fan_only' -%} Fan only{{\"\\n\"|e}} {%- else -%} On{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {{loop.index -1 if mode == states('climate.thermostat_1') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_hvac_mode target : entity_id : climate.thermostat_1 data : hvac_mode : > {% if text == \"Off\" -%} off {% elif text == 'Heating' -%} heat {% elif text == 'Cooling' -%} cool {% elif text == 'Heat/Cool' -%} heat_cool {% elif text == 'Drying' -%} dry {% elif text == 'Fan only' -%} fan_only {% endif -%} Current weather and forecasts ~ This example implements two weather forecast screens which located on the same page, can be swiped left and right. On the top area the current weather is shown, on the bottom area the user can choose by swiping between next hours and next days forecast. This is achieved by a tabview object with invisible tabs. Since there's no weather integration in Home Assistant which can offer so much information at once, this can be achieved by installing multiple weather components. In our example we use two: Met.no (the one coming by default pre-installed) for next days forecast. OpenWeatherMap {target= blank} (available as standard integration to be activated) for next hours forecast. _You need to set the forecast mode to onecall_hourly to get forecasts for the day's next hours. The openHASP component grabs information from both weather sources and updates them on every change. The various strings containing day names, day periods, weather conditions can be localized easily to any language within the configuration. Weather condition icons are displayed from the internal flash space of the plate. For this, you need to upload the desired icon pack to the plate: light theme dark theme To unzip them on the plate, connect via Telnet and run the command unzip /openhasp-weathericons-day.zip to unzip the light theme above (alternatively you can unzip them on your computer and upload them one by one). The configuration example only shows how to use the light theme icons. This example implements Home Assistant's standard weather conditions only (as in 2021.06), so any weather integration component can be used. Some integrations know extra conditions in addition to the standard ones, those (with their corresponding icons) can be easily added to the component configuration below. Note that the tab swiping dots ( p5b10 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"WEATHER\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 2 , \"auto_size\" : 1 , \"w\" : 128 , \"offset_x\" : -6 , \"offset_y\" : -10 } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"label\" , \"x\" : 100 , \"y\" : 10 , \"w\" : 130 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"date current\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 34 , \"w\" : 95 , \"h\" : 40 , \"align\" : \"center\" , \"text\" : \"00.0\u00b0C\" , \"parentid\" : 2 , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 17 , \"obj\" : \"label\" , \"x\" : 110 , \"y\" : 78 , \"w\" : 120 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"condition\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 19 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 95 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#000000 \\u2022# #909090 \\u2022#\" , \"parentid\" : 2 , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" } { \"page\" : 5 , \"id\" : 10 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 260 , \"parentid\" : 2 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 123 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+2\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 123 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 154 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+3\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 154 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 33 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 186 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+4\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 186 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 43 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 218 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+5\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 218 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 53 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 123 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+1\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 64 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 154 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+2\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 74 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 81 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 186 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+3\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 82 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 83 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 84 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 91 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 218 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+4\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 92 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 93 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 94 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 - obj : \"p5b14\" # Icon properties : \"src\" : \"{{ 'L:/w-128-' + states('weather.openweathermap') + '.png' if not is_state('weather.openweathermap','unavailable') }}\" - obj : \"p5b15\" # Current date (adjust format to your needs) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set day = (states.weather.openweathermap.last_changed).strftime('%w') %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{- days[ day | int -1 ] }} {{ (states.weather.openweathermap.last_changed).strftime('%m. %d. ') }} {% endif -%} - obj : \"p5b16\" # Current temp (you can use your own outdoor temp sensor if you have one) properties : \"text\" : \"{{ state_attr('weather.openweathermap','temperature') |string + '\u00b0C' if not is_state('weather.openweathermap','unavailable') }}\" # or \"{{ states('sensor.your_own_temp_sensor') if not is_state('sensor.your_own_temp_sensor','unavailable') else '--' }}\u00b0C\" - obj : \"p5b17\" # Current weather condition properties : \"text\" : > {% if is_state('weather.openweathermap','clear-night') -%} Clear night {% elif is_state('weather.openweathermap','cloudy') -%} Cloudy {% elif is_state('weather.openweathermap','fog') -%} Fog {% elif is_state('weather.openweathermap','hail') -%} Hail {% elif is_state('weather.openweathermap','lightning') -%} Lightning {% elif is_state('weather.openweathermap','lightning-rainy') -%} Thunderstorms {% elif is_state('weather.openweathermap','partlycloudy') -%} Partly cloudy {% elif is_state('weather.openweathermap','pouring') -%} Pouring rain {% elif is_state('weather.openweathermap','rainy') -%} Rainy {% elif is_state('weather.openweathermap','snowy') -%} Snowy {% elif is_state('weather.openweathermap','snowy-rainy') -%} Snowy-rainy {% elif is_state('weather.openweathermap','sunny') -%} Sunny {% elif is_state('weather.openweathermap','windy') -%} Windy {% elif is_state('weather.openweathermap','windy-variant') -%} Windy {% elif is_state('weather.openweathermap','exceptional') -%} Exceptional {% elif is_state('weather.openweathermap','unavailable') -%} (not available) {% else -%} {{ states('weather.openweathermap') }} {% endif -%} - obj : \"p5b10\" # tab dots - MAKE SURE YOU UPDATE THIS ONE!! event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p5b19.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p5b21\" # Forecast time +1h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b22\" # Forecast temp +1h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[1]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b23\" # Forecast condition +1h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b31\" # Forecast time +2h (using Dawn/Morn etc instead of Today/Tomorrow) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set hour = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) | timestamp_custom(\"%-H\") | int %} {%- if 4 <= hour < 6 %} Dawning {%- elif 6 <= hour < 9 %} Morning {%- elif 9 <= hour < 12 %} Forenoon {%- elif 12 <= hour < 18 %} Afternoon {%- elif 18 <= hour < 23 %} Evening {%- elif 23 <= hour or hour < 4 %} Night {%- endif %} {{- \" \" + hour |string + \" o'clock\" }} {%- endif %} - obj : \"p5b32\" # Forecast temp +2h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[3]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b33\" # Forecast condition +2h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[3]['condition'] }}.png {%- endif %} - obj : \"p5b41\" # Forecast time +4h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[6]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b42\" # Forecast temp +4h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[6]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b43\" # Forecast condition +4h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[6]['condition'] }}.png {%- endif %} - obj : \"p5b51\" # Forecast time +8h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[12]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b52\" # Forecast temp +8h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[12]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b53\" # Forecast condition +8h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[12]['condition'] }}.png {%- endif %} - obj : \"p5b61\" # Forecast date +1d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[0]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b62\" # Forecast temp min +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b63\" # Forecast temp max +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b64\" # Forecast condition +1d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[0]['condition'] }}.png {%- endif %} - obj : \"p5b71\" # Forecast date +2d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b72\" # Forecast temp min +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b73\" # Forecast temp max +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b74\" # Forecast condition +2d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b81\" # Forecast date +3d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[2]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b82\" # Forecast temp min +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b83\" # Forecast temp max +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b84\" # Forecast condition +3d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[2]['condition'] }}.png {%- endif %} - obj : \"p5b91\" # Forecast date +4d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b92\" # Forecast temp min +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b93\" # Forecast temp max +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b94\" # Forecast condition +4d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[3]['condition'] }}.png {%- endif %} Attribution Icons are copyright from manifestinteractive and merlinthered . Fan and scent diffuser ~ This example shows how a transparent PNG image can be combined with a moving spinner object, to create the impression of a spinning fan. In Home Assistant this fan appears as a select component with the available presets as Low , Mid , High , Turbo , OFF selectable options. The scent diffuser appears as a standard fan component where the intensity can be set by percentage. To control the fan we use a button matrix object which has exactly the same buttons as the options of the select component. To control the scent diffuser we use a slider object. The fan and the perfume PNG icons are available below. Upload them to the flash storage of your plate. fan perfume Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will likely crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 4 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"AIR TREATMENT\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Fresh air flow\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Scent intensity\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 12 , \"obj\" : \"spinner\" , \"x\" : 36 , \"y\" : 84 , \"w\" : 56 , \"h\" : 56 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 19 , \"line_color10\" : \"#34eb77\" , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 3000 } { \"page\" : 4 , \"id\" : 13 , \"obj\" : \"img\" , \"x\" : 14 , \"y\" : 75 , \"src\" : \"L:/g64.png\" , \"auto_size\" : 1 , \"w\" : 100 , \"h\" : 74 } { \"page\" : 4 , \"id\" : 14 , \"obj\" : \"img\" , \"x\" : 130 , \"y\" : 78 , \"src\" : \"L:/perfume3.png\" , \"auto_size\" : 1 , \"w\" : 60 , \"h\" : 68 } { \"page\" : 4 , \"id\" : 40 , \"obj\" : \"btnmatrix\" , \"x\" : 5 , \"y\" : 130 , \"w\" : 110 , \"h\" : 113 , \"parentid\" : 10 , \"options\" :[ \"Low\" , \"Mid\" , \"\\n\" , \"High\" , \"Turbo\" , \"\\n\" , \"OFF\" ], \"toggle\" : 1 , \"one_check\" : 1 , \"bg_opa\" : 0 , \"pad_inner\" : 5 , \"border_width\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 4 , \"id\" : 51 , \"obj\" : \"slider\" , \"x\" : 200 , \"y\" : 60 , \"w\" : 25 , \"h\" : 220 , \"min\" : 0 , \"max\" : 60 , \"val\" : 15 } { \"page\" : 4 , \"id\" : 52 , \"obj\" : \"obj\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 4 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"text\" : \"15\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 4 , \"id\" : 54 , \"obj\" : \"btn\" , \"x\" : 130 , \"y\" : 168 , \"w\" : 50 , \"h\" : 76 , \"parentid\" : 10 , \"toggle\" : true , \"text\" : \"\\uE425\" , \"text_font\" : 32 , \"align\" : 1 , \"bg_color\" : \"#A0A0A0\" , \"bg_grad_color\" : \"#606060\" , \"border_color\" : \"#404040\" } relevant openHASP-custom-component config: - obj : \"p4b40\" # Buttin Matrix with the fan presets properties : \"click\" : \"{{ 0 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 1 }}\" \"opacity\" : \"{{ 100 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 255 }}\" \"options\" : '[\"Low\",\"Mid\",\"\\n\",\"High\",\"Turbo\",\"\\n\",\"OFF\"]' \"toggle\" : '{{ 1 if (not states(\"input_select.fan_presets\") in state_attr(\"input_select.fan_presets\",\"options\")) or (is_state(\"input_select.fan_presets\",\"unavailable\")) -}}' \"val\" : > {% if state_attr(\"input_select.fan_presets\",\"options\") is not none -%} {% if not states('input_select.fan_presets') in state_attr('input_select.fan_presets','options') -%}-1{% else -%} {% for source in state_attr('input_select.fan_presets','options') -%} {{loop.index - 1 if source == states('input_select.fan_presets') }} {%-endfor%} {%- endif %} {%- endif %} event : - service : input_select.input_select_option data : option : '{{ text }}' target : entity_id : input_select.fan_presets - obj : \"p4b12\" # Spinner behind the PNG icon properties : \"opacity\" : \"{{ 0 if states('input_select.fan_presets') in ['unavailable', 'unknown', 'OFF'] else 255 }}\" \"jsonl\" : > {% if is_state('number.plate_test_page_number', '4') %} {% if is_state('input_select.fan_presets', 'Alap') %} {\"speed\":7000,\"line_color10\":\"#31de70\"} {%-elif is_state('input_select.fan_presets', 'K\u00f6z\u00e9p') %} {\"speed\":1700,\"line_color10\":\"#dede1f\"} {%-elif is_state('input_select.fan_presets', 'Magas') %} {\"speed\":800,\"line_color10\":\"#d6a11a\"} {%-elif is_state('input_select.fan_presets', 'Turb\u00f3') %} {\"speed\":250,\"line_color10\":\"#ff4a4a\"} {% endif %} {% else -%} {\"speed\":0} {% endif %} - obj : \"p4b54\" # Scent Diffuser ON/OFF button properties : \"val\" : '{{ 1 if is_state(\"fan.scent_diffuser_intensity\", \"on\") else 0 }}' \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"down\" : - service : fan.toggle target : entity_id : fan.scent_diffuser_intensity - obj : \"p4b51\" # Scent Diffuser intensity slider properties : \"val\" : \"{{ state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"up\" : - service : fan.set_percentage target : entity_id : fan.scent_diffuser_intensity data : percentage : '{{ val }}' - obj : \"p4b53\" # Scent Diffuser intensity number label properties : \"text\" : \"{{ '--' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"opacity\" : \"{{ 255 if is_state('fan.scent_diffuser_intensity', 'on') else 95 }}\" Note the condition in the Spinner configuration of the component: {% if is_state('openhasp.plate_test', '4') %} - this is useful to only animate the spinner when the page containing it is actually shown. Since the spinner is being overlapped by a transparent PNG image, CPU usage is higher as it has to be completely redrawn every frame. CPU resources can be freed up this way - only animate when it can be seen. Attribution Icons are copyright from SVG Repo . Using tags ~ You can avoid too much code repetition when you have multiple similar objects on a page, doing the same thing with different entities, and you'd like to make accessible some advanced options too. Presenting everyting flat will overwhelm your user interface, so it would be better to just show the most used controls, and only display the advanced options in popups related to unique objects. Tag property was made to ease this task. Colored lights panel ~ In the example below we have four coloured lights. Squeezing the ON/OFF button, the color picker and the brightness selector for all four lights on a single page can be challenging - and the result will likely be useless on a small touch screen. Instead, we'll just place the toggle buttons with descriptive labels on the page, and we'll only display the color picker and the brightness selector on demand, in this case when the user touches the descriptive coloured label. While dynamically drawing these objects we're setting the tag property for the color picker and the slider to the entity_id of the light we want to adjust, so that when we're interacting with them, the Custom Component can know which light it has to send the adjustments to. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"COLOURED LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"I.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"II.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"III.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"IV.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p5b11\" # toggle button for ON/OFF switching of light I. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_1\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_1\" - obj : \"p5b12\" # toggle button for ON/OFF switching of light II. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_2\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_2\" - obj : \"p5b13\" # toggle button for ON/OFF switching of light III. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_3\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_3\" - obj : \"p5b14\" # toggle button for ON/OFF switching of light IV. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_4\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_4\" - obj : \"p5b2\" # label showing the current color of light I. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_1','on') %} {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_1 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light I. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light I.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_1\",\"color\": {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_1\",\"val\": {{- state_attr('light.dmx_vbar_1', 'brightness') -}} } - obj : \"p5b3\" # label showing the current color of light II. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_2','on') %} {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_2 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light II. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light II.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_2\",\"color\": {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_2\",\"val\": {{- state_attr('light.dmx_vbar_2', 'brightness') -}} } - obj : \"p5b4\" # label showing the current color of light III. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_3','on') %} {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_3 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light III. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light III.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_3\",\"color\": {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_3\",\"val\": {{- state_attr('light.dmx_vbar_3', 'brightness') -}} } - obj : \"p5b5\" # label showing the current color of light IV. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_4','on') %} {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_4 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light IV. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light IV.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_4\",\"color\": {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_4\",\"val\": {{- state_attr('light.dmx_vbar_4', 'brightness') -}} } - obj : \"p5b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b201\" # set the color of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b202\" # set the brightness of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" brightness : \"{{ val }}\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete Without tags, the last 3 object definitions would have to be added for each light, and also it would be needed to be drawn separately for each light, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design. Shutter control panel ~ In the second example, we have five windows with motorized shutters. In addition to the usual UP/STOP/DOWN buttons, the inhabitants want to have three shortcut positions for each shutter, and also a slider for free positioning. Useless to say that it's impossible to put all these on a page, and also it would be a pity to use up 5 pages just for these. We'll just put the most used, UP/STOP/DOWN buttons on the page (this already looks a bit much...) and we'll use a long press event on the middle STOP button to show a pop-up with the extra required settings related to the desired shutter. The tag here will be a JSON object referencing both the entity_id and the position specific to the desired shutter, eg. \"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"} , this will be set for the buttons and the slider appearing in the popup. Since the shutters are different sizes and types, the same intermediate physical position may correspond to different numeric values in Home Assistant. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"MOTORIZED COVERS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 2 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 7 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"I.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 53 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"II.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 99 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"III.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"IV.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 191 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"V.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 31 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 32 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 33 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 41 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 42 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 43 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 51 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 52 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 53 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p2b11\" # shutter I. up button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b13\" # shutter I. down button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b12\" # shutter I. middle stop button properties : \"text\" : > {% if is_state('cover.bigroom_i', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_i', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_i\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - I.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"54\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_i','current_position') -}} } - obj : \"p2b21\" # shutter II. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b23\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b22\" properties : \"text\" : > {% if is_state('cover.bigroom_ii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_ii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_ii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - II.\",\"align\":\"center\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"18\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_ii','current_position') -}} } - obj : \"p2b31\" # shutter III. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b33\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b32\" properties : \"text\" : > {% if is_state('cover.bigroom_iii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - III.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iii','current_position') -}} } - obj : \"p2b41\" # shutter IV. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b43\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b42\" properties : \"text\" : > {% if is_state('cover.bigroom_iv', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iv', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iv\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - IV.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iv','current_position') -}} } - obj : \"p2b51\" # shutter V. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b53\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b52\" properties : \"text\" : > {% if is_state('cover.bigroom_v', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_v', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_v\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - V.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"55\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"19\"},\"val\": {{- state_attr('cover.bigroom_v','current_position') -}} } - obj : \"p2b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b201\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b202\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b203\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b204\" # set the shutter position from the slider for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"up\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ val | int }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete Again - without tags, the last 5 object definitions would have to be added for each shutter, and also it would be needed to be drawn separately for each one, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design. Note Some examples below may generate errors during Home Assistant startup. Log messages like Error while processing template or Template variable error: 'None' has no attribute 'last_changed' etc. can be caused by the fact that openHASP component loads faster than the other integrations you have set up, from where you want to pull data. Because the data required by openHASP component is not yet available, an error is generated. But as soon as Home Assistant finishes loading everything, and all the data you've configured is available, things will be normal. Nevertheless the log should be checked regularly to find repetitive problems.","title":"Example Configurations"},{"location":"integrations/home-assistant/sampl_conf/#display-clock-and-temperature","text":"The easiest example is to display the state of a clock and a temperature sensor from Home Assistant, using label objects in openHASP. Create a label object to display the temperature value, a separate label object to display the unit and a third label object for the clock: 1 2 3 { \"page\" : 0 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"00.0\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 220 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"\u00b0C\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 3 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00:00\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } In component configuration all you need for the objects is: 1 2 3 4 5 6 7 objects : - obj : \"p0b4\" properties : \"text\" : \"{{ states('sensor.my_room_temperature') }}\" - obj : \"p0b6\" properties : \"text\" : \"{{ states('sensor.time') }}\"","title":"Display clock and temperature"},{"location":"integrations/home-assistant/sampl_conf/#some-basic-controls","text":"Jsonl and Home Assistant configuration:","title":"Some basic controls"},{"location":"integrations/home-assistant/sampl_conf/#color-coded-icons","text":"","title":"Color coded icons"},{"location":"integrations/home-assistant/sampl_conf/#variable-sized-icons","text":"Have a fan icon which changes its size depending on the speed of the fan, and goes off the screen when the fan is off. openHASP config: 1 { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 1 , \"h\" : 35 , \"w\" : 35 , \"text\" : \"\\uE210\" , \"align\" : \"left\" , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"yellow\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 - obj : \"p0b1\" properties : \"jsonl\" : > {% if is_state('input_select.fan_speed', 'Low') %} {\"text_font\":12,\"x\":6,\"y\":7} {%-elif is_state('input_select.fan_speed', 'Medium') %} {\"text_font\":16,\"x\":5,\"y\":6} {%-elif is_state('input_select.fan_speed', 'Hign') %} {\"text_font\":24,\"x\":1,\"y\":2} {%-elif is_state('input_select.fan_speed', 'Turbo') %} {\"text_font\":32,\"x\":-2,\"y\":-3} {%-elif is_state('input_select.fan_speed', 'OFF') %} {\"text_font\":12,\"x\":-10,\"y\":-10} {% endif %}","title":"Variable sized icons"},{"location":"integrations/home-assistant/sampl_conf/#light-brightness-and-color","text":"Have a light in Home Assistant controlled by openHASP. In our example we use Lanbon L8's moodlight which has both brightness and color - we use a slider object for the brightness, and a cpicker object for color. relevant openHASP config: 1 2 { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"slider\" , \"x\" : 6 , \"y\" : 15 , \"w\" : 14 , \"h\" : 180 , \"min\" : 1 , \"max\" : 255 } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"cpicker\" , \"x\" : 30 , \"y\" : 10 , \"w\" : 180 , \"h\" : 180 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 - obj : \"p1b31\" # Light brightness properties : \"val\" : \"{{ state_attr('light.plate_moodlight', 'brightness') if state_attr('light.plate_moodlight', 'brightness') != None else 0 }}\" event : \"changed\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" - obj : \"p1b32\" # Light color properties : \"color\" : > {% if is_state('light.plate_moodlight','on') %} {% set rgb = state_attr('light.plate_moodlight','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" The brightness slider value gets updated from the brightness attribute of light.plate_moodlight , while it's on. If it's off, that attribute is removed by Home Assistant, in that case we set it to 0 . The color property gets updated from the rgb_color attriburte of the light. The R, G and B decimal color values are converted to hexadecimal html color code using a template whenever the color of the light changes in Home Assistant. When somebody changes the color of the picker object on the page, the light in Home Assistant gets updated with rgb_color values received in the MQTT message from the plate.","title":"Light brightness and color"},{"location":"integrations/home-assistant/sampl_conf/#cover-with-state-feedback","text":"The icon on the up and down buttons change color when covers move and set opacity when reached to limit. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"btn\" , \"x\" : 83 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"btn\" , \"x\" : 161 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 - obj : \"p1b4\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b5\" properties : \"text\" : > {% if is_state('cover.cover_1', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.cover_1', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b6\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.cover_1\"","title":"Cover with state feedback"},{"location":"integrations/home-assistant/sampl_conf/#cover-with-button-matrix","text":"A simpler cover control with only basic feedback. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 { \"page\" : 4 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 0 , \"y\" : 20 , \"w\" : 240 , \"h\" : 70 , \"options\" :[ \"\\uE05D\" , \"\\uE4DB\" , \"\\uE045\" ], \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 - obj : \"p4b20\" properties : \"options\" : > {% if is_state('cover.cover_1', 'closing') %} [\"\\uE05D\",\"\\uE4DB\",\"#FFFF00 \\uE045\"] {%-elif is_state('cover.cover_1', 'opening') %} [\"#FFFF00 \\uE05D\",\"\\uE4DB\",\"\\uE045\"] {%-else %} [\"\\uE05D\",\"\\uE4DB\",\"\\uE045\"] {% endif %} event : \"down\" : - service : > {% if val == 0 %} cover.open_cover {%-elif val == 1 %} cover.stop_cover {%-elif val == 2 %} cover.close_cover {% endif %} target : entity_id : cover.cover_1","title":"Cover with button matrix"},{"location":"integrations/home-assistant/sampl_conf/#covers-like-in-lovelace","text":"The icon behaves like in Lovelace. UI theme set to Hasp Light in plate's web interface. Your browser does not support the video tag. Check out the Lovelace-like entities for similar placement. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 1\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 2\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 25 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 26 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 - obj : \"p5b12\" properties : \"text\" : > {% if is_state('cover.my_cover', 'closing') %} {{ \"\\uE6C0\" | e }} {%-elif is_state('cover.my_cover', 'opening') %} {{ \"\\uE6C3\" | e }} {%-elif is_state('cover.my_cover', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.my_cover', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} - obj : \"p5b14\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b15\" event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b16\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.my_cover\"","title":"Covers like in Lovelace"},{"location":"integrations/home-assistant/sampl_conf/#media-player","text":"The labels with artist and title are scrolling, the progressbar fills if the media player provides duration and playback position. The dropdown lists containing the available sources and sound modes of the player get populated automatically by the values existing on the player in Home Assistant, and also the actually selected source is in sync with it. Player availability is shown by the opacity of the buttons. Player state (play/pause) is shown by the middle button, short pressing means pause, long-press means stop. Power state shown by color, repeat, shuffle and muted state shown by appropriate icons on the buttons. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { \"page\" : 6 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 , \"bg_opa\" : 0 , \"shadow_opa\" : 140 , \"shadow_color\" : \"black\" , \"shadow_width\" : 20 , \"shadow_spread\" : 0 } { \"page\" : 6 , \"id\" : 11 , \"obj\" : \"obj\" , \"x\" : 8 , \"y\" : 38 , \"w\" : 200 , \"h\" : 84 , \"click\" : 0 } { \"page\" : 6 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 48 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 83 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 8 , \"y\" : 117 , \"w\" : 200 , \"h\" : 5 , \"min\" : 0 , \"max\" : 100 , \"border_opa\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"dropdown\" , \"x\" : 8 , \"y\" : 129 , \"w\" : 120 , \"h\" : 30 , \"options\" : \"Source1\\nSource2\\nSource3\" , \"direction\" : 3 , \"max_height\" : 300 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"dropdown\" , \"x\" : 133 , \"y\" : 129 , \"w\" : 75 , \"h\" : 30 , \"options\" : \"Jazz\\nPop\\nRock\" , \"direction\" : 2 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 17 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 166 , \"w\" : 50 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AE\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 18 , \"obj\" : \"btn\" , \"x\" : 66 , \"y\" : 166 , \"w\" : 83 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE40A\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 19 , \"obj\" : \"btn\" , \"x\" : 157 , \"y\" : 166 , \"w\" : 51 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AD\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 20 , \"obj\" : \"slider\" , \"x\" : 212 , \"y\" : 38 , \"w\" : 20 , \"h\" : 244 , \"min\" : 0 , \"max\" : 100 , \"val\" : 85 } { \"page\" : 6 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE425\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 60 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE457\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 111 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE49E\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 163 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE57E\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 - obj : \"p6b12\" # artist label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_artist') if state_attr('media_player.sound_my_room1','media_artist') else '-' }}\" - obj : \"p6b13\" # title label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_title') if state_attr('media_player.sound_my_room1','media_title') else '-' }}\" - obj : \"p6b15\" # sources list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','source_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{\"(no source)\\n\"|e}} {%- for source in state_attr('media_player.sound_my_room1','source_list') -%} {{source+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %} {% if state_attr('media_player.sound_my_room1','source') == None %}0{% else %} {%for source in state_attr('media_player.sound_my_room1','source_list')%} {{loop.index if source == state_attr('media_player.sound_my_room1','source') }} {%-endfor%}{%-endif %}{%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_source data : entity_id : media_player.sound_my_room1 source : \"{{ text }}\" - obj : \"p6b16\" # sound modes list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','sound_mode_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {%-for soundmode in state_attr('media_player.sound_my_room1','sound_mode_list')-%} {{soundmode+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %}{%for source in state_attr('media_player.sound_my_room1','sound_mode_list')%} {{loop.index -1 if source == state_attr('media_player.sound_my_room1','sound_mode') }} {%-endfor%}{% endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_sound_mode data : entity_id : media_player.sound_my_room1 sound_mode : \"{{ text }}\" - obj : \"p6b14\" # progressbar properties : \"max\" : \"{{ state_attr('media_player.sound_my_room1','media_duration') | int }}\" \"val\" : \"{{ state_attr('media_player.sound_my_room1','media_position') | int }}\" - obj : \"p6b18\" # play/pause/stop properties : \"text\" : > {% if is_state('media_player.sound_my_room1', 'playing') %} {{ \"\\uE3E4\" | e }} {%-else %} {{ \"\\uE40A\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_play_pause target : entity_id : media_player.sound_my_room1 \"long\" : - service : media_player.media_stop target : entity_id : media_player.sound_my_room1 - obj : \"p6b17\" # prev properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_previous_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b19\" # next properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_next_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b20\" # volume slider properties : \"val\" : > {% if (state_attr('media_player.sound_my_room1','volume_level') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{ state_attr('media_player.sound_my_room1','volume_level') * 100 | int(default=80) }} {%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" \"up\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" - obj : \"p6b21\" # power properties : \"text_color\" : \"{{ '#B00000' if states('media_player.sound_my_room1') == 'off' else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.toggle data : entity_id : media_player.sound_my_room1 - obj : \"p6b22\" # repeat properties : \"text\" : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} {{ \"\\uE458\" | e }} {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} {{ \"\\uE456\" | e }} {%-else %} {{ \"\\uE457\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.repeat_set data : entity_id : media_player.sound_my_room1 repeat : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} all {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} off {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'off') %} one {%-endif %} - obj : \"p6b23\" # shuffle properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} {{ \"\\uE49D\" | e }} {%-else %} {{ \"\\uE49E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.shuffle_set data : entity_id : media_player.sound_my_room1 shuffle : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} false {% else %} true {%-endif %} - obj : \"p6b24\" # mute properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} {{ \"\\uE75F\" | e }} {%-else %} {{ \"\\uE57E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.volume_mute data : entity_id : media_player.sound_my_room1 is_volume_muted : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} false {% else %} true {%-endif %} Note that the val value of the slider is multiplied and divided by 100 when read and set, because LVGL only suppports integers for object values. By multiplying and dividing by 100, it becomes possible to set volume between 0 and 1 as required by Home Assistant.","title":"Media player"},{"location":"integrations/home-assistant/sampl_conf/#generic-thermostatclimate","text":"This example is a bit more complex in the aspect that it uses several objects put on top of each other, and grouped toghether using the parentid parameter. Special attention goes to an invisible tabview (exteding over the label dispaying the target temperarture) which allows for swiping between an on/off switch and dropdowns for setting the hvac and fan modes. The target temperature can be set by dragging the arc handle, more precise +/- setting possible by short/long pressing the middle circle containing the current temperature (increasing/decreasing the value by the temperature step defined by the climate entity). Note that the min , max and val values of the arc and gauge are multiplied and divided by 10 when set and read, because LVGL only suppports integers for object values. By multiplying and dividing by 10, it becomes possible to set decimal values for climate temperature. The number of the ticks on the gauge is determined from the min , max attributes of the configured climate, likewise the hvac_modes and fan_modes dropdowns. You can localise these using the if-else statements of the template in the configuration of the custom component. The active area of the arc changes color based on the current hvac mode of the entity. UI theme set to Hasp Light in plate's web interface. Note that the tab swiping dots ( p3b26 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Your browser does not support the video tag. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 20 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 37 , \"w\" : 230 , \"h\" : 230 , \"min\" : 170 , \"max\" : 300 , \"val\" : 250 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"adjustable\" : \"true\" , \"line_width\" : 21 , \"line_width10\" : 21 , \"line_color10\" : \"#34bdeb\" , \"bg_opa\" : 0 , \"pad_top20\" : 5 , \"pad_bottom20\" : 5 , \"pad_left20\" : 5 , \"pad_right20\" : 5 , \"pad_top\" : 5 , \"pad_bottom\" : 5 , \"pad_left\" : 5 , \"pad_right\" : 5 } { \"page\" : 3 , \"id\" : 21 , \"obj\" : \"gauge\" , \"x\" : 28 , \"y\" : 28 , \"w\" : 175 , \"h\" : 175 , \"parentid\" : 20 , \"min\" : 170 , \"max\" : 300 , \"val\" : 224 , \"format\" : 1 , \"critical_value\" : 301 , \"label_count\" : 14 , \"line_count\" : 27 , \"border_width\" : 0 , \"pad_top\" : 2 , \"pad_bottom\" : 2 , \"pad_left\" : 2 , \"pad_right\" : 2 , \"value_str\" : \"\u00b0C\" , \"value_ofs_y\" : 55 , \"value_font\" : 16 , \"bg_opa\" : 0 , \"line_width10\" : 3 , \"line_rounded10\" : 1 , \"line_color\" : \"#348feb\" , \"line_color60\" : \"#348feb\" , \"scale_grad_color\" : \"#eb4934\" , \"scale_grad_color60\" : \"#eb4934\" , \"scale_end_color60\" : \"#eb4934\" } { \"page\" : 3 , \"id\" : 22 , \"obj\" : \"obj\" , \"x\" : 85 , \"y\" : 85 , \"w\" : 60 , \"h\" : 60 , \"parentid\" : 20 , \"click\" : 0 , \"radius\" : 30 , \"border_width\" : 2 , \"border_opa\" : 200 } { \"page\" : 3 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 80 , \"y\" : 100 , \"w\" : 70 , \"h\" : 30 , \"parentid\" : 20 , \"text\" : \"22.4\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 24 , \"obj\" : \"obj\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 25 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"25\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 26 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 220 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" , \"border_width\" : 0 } { \"page\" : 3 , \"id\" : 30 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 235 , \"w\" : 240 , \"h\" : 80 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"radius\" : 0 } { \"page\" : 3 , \"id\" : 31 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 32 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 33 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 41 , \"obj\" : \"switch\" , \"x\" : 35 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 31 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 3 , \"id\" : 42 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 32 , \"options\" : \"fan_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 43 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 33 , \"options\" : \"hvac_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 - obj : \"p3b20\" # arc slider properties : \"val\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') | int * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"line_color1\" : > {% if is_state('climate.thermostat_1', 'cool') %} {{ \"#346beb\" }} {%-elif is_state('climate.thermostat_1', 'heat_cool') %} {{ \"#34bdeb\" }} {%-elif is_state('climate.thermostat_1', 'heat') %} {{ \"#eb3434\" }} {%-elif is_state('climate.thermostat_1', 'dry') %} {{ \"#ebeb34\" }} {%-elif is_state('climate.thermostat_1', 'fan_only') %} {{ \"#34eb77\" }} {%-else %} {{ \"#9f96b0\" }} {% endif %} event : \"changed\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" - obj : \"p3b21\" # gauge current temp properties : \"val\" : > {% if not (is_state('sensor.ble_atlaghomerseklet','unavailable') or is_state('sensor.ble_atlaghomerseklet','unknown')) %} {{ states('sensor.ble_atlaghomerseklet') | float (default=0) * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"critical_value\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 + 1 }} {%- endif %} \"label_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int + 1 }} {%- endif %} \"line_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ (state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int) * 2 + 1 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b23\" # label current temp (and +/- with short/long touch) properties : \"text\" : > {% if (is_state('sensor.temp_room_1','unavailable') or is_state('sensor.temp_room_1','unknown')) %} {{ \"--.-\" }} {%-else %} {{ states('sensor.temp_room_1') | round(1,default=0) }} {%- endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') + state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" \"long\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') - state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" - obj : \"p3b25\" # label target temp properties : \"text\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b41\" # on/off switch properties : \"val\" : \"{{ 0 if (is_state('climate.thermostat_1', 'off') or is_state('climate.thermostat_1', 'unavailable')) else 1 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"down\" : - service_template : > {% if val == 0 -%} climate.turn_on {% else -%} climate.turn_off {% endif -%} entity_id : \"climate.thermostat_1\" - obj : \"p3b30\" # tab dots event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p3b26.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 2 %} {{ \"#909090 \\u2022# #909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p3b42\" # dropdown with fan_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','fan_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {%- if mode == 'auto' -%} Automatic{{\"\\n\"|e}} {%- elif mode == 'low' -%} Low{{\"\\n\"|e}} {%- elif mode == 'medium' -%} Medium{{\"\\n\"|e}} {%- elif mode == 'high' -%} High{{\"\\n\"|e}} {%- elif mode == 'turbo' -%} Turbo{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {{loop.index -1 if mode == state_attr('climate.thermostat_1','fan_mode') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_fan_mode target : entity_id : climate.thermostat_1 data : fan_mode : > {% if text == \"Automatic\" -%} auto {% elif text == 'Low' -%} low {% elif text == 'Medium' -%} medium {% elif text == 'High' -%} high {% elif text == 'Turbo' -%} turbo {% endif -%} - obj : \"p3b43\" # dropdown with hvac_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','hvac_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {%- if mode == 'off' -%} Off{{\"\\n\"|e}} {%- elif mode == 'heat' -%} Heating{{\"\\n\"|e}} {%- elif mode == 'cool' -%} Cooling{{\"\\n\"|e}} {%- elif mode == 'heat_cool' -%} Heat/Cool{{\"\\n\"|e}} {%- elif mode == 'dry' -%} Drying{{\"\\n\"|e}} {%- elif mode == 'fan_only' -%} Fan only{{\"\\n\"|e}} {%- else -%} On{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {{loop.index -1 if mode == states('climate.thermostat_1') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_hvac_mode target : entity_id : climate.thermostat_1 data : hvac_mode : > {% if text == \"Off\" -%} off {% elif text == 'Heating' -%} heat {% elif text == 'Cooling' -%} cool {% elif text == 'Heat/Cool' -%} heat_cool {% elif text == 'Drying' -%} dry {% elif text == 'Fan only' -%} fan_only {% endif -%}","title":"Generic thermostat/climate"},{"location":"integrations/home-assistant/sampl_conf/#current-weather-and-forecasts","text":"This example implements two weather forecast screens which located on the same page, can be swiped left and right. On the top area the current weather is shown, on the bottom area the user can choose by swiping between next hours and next days forecast. This is achieved by a tabview object with invisible tabs. Since there's no weather integration in Home Assistant which can offer so much information at once, this can be achieved by installing multiple weather components. In our example we use two: Met.no (the one coming by default pre-installed) for next days forecast. OpenWeatherMap {target= blank} (available as standard integration to be activated) for next hours forecast. _You need to set the forecast mode to onecall_hourly to get forecasts for the day's next hours. The openHASP component grabs information from both weather sources and updates them on every change. The various strings containing day names, day periods, weather conditions can be localized easily to any language within the configuration. Weather condition icons are displayed from the internal flash space of the plate. For this, you need to upload the desired icon pack to the plate: light theme dark theme To unzip them on the plate, connect via Telnet and run the command unzip /openhasp-weathericons-day.zip to unzip the light theme above (alternatively you can unzip them on your computer and upload them one by one). The configuration example only shows how to use the light theme icons. This example implements Home Assistant's standard weather conditions only (as in 2021.06), so any weather integration component can be used. Some integrations know extra conditions in addition to the standard ones, those (with their corresponding icons) can be easily added to the component configuration below. Note that the tab swiping dots ( p5b10 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"WEATHER\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 2 , \"auto_size\" : 1 , \"w\" : 128 , \"offset_x\" : -6 , \"offset_y\" : -10 } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"label\" , \"x\" : 100 , \"y\" : 10 , \"w\" : 130 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"date current\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 34 , \"w\" : 95 , \"h\" : 40 , \"align\" : \"center\" , \"text\" : \"00.0\u00b0C\" , \"parentid\" : 2 , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 17 , \"obj\" : \"label\" , \"x\" : 110 , \"y\" : 78 , \"w\" : 120 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"condition\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 19 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 95 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#000000 \\u2022# #909090 \\u2022#\" , \"parentid\" : 2 , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" } { \"page\" : 5 , \"id\" : 10 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 260 , \"parentid\" : 2 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 123 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+2\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 123 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 154 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+3\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 154 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 33 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 186 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+4\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 186 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 43 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 218 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+5\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 218 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 53 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 123 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+1\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 64 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 154 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+2\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 74 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 81 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 186 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+3\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 82 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 83 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 84 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 91 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 218 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+4\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 92 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 93 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 94 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 - obj : \"p5b14\" # Icon properties : \"src\" : \"{{ 'L:/w-128-' + states('weather.openweathermap') + '.png' if not is_state('weather.openweathermap','unavailable') }}\" - obj : \"p5b15\" # Current date (adjust format to your needs) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set day = (states.weather.openweathermap.last_changed).strftime('%w') %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{- days[ day | int -1 ] }} {{ (states.weather.openweathermap.last_changed).strftime('%m. %d. ') }} {% endif -%} - obj : \"p5b16\" # Current temp (you can use your own outdoor temp sensor if you have one) properties : \"text\" : \"{{ state_attr('weather.openweathermap','temperature') |string + '\u00b0C' if not is_state('weather.openweathermap','unavailable') }}\" # or \"{{ states('sensor.your_own_temp_sensor') if not is_state('sensor.your_own_temp_sensor','unavailable') else '--' }}\u00b0C\" - obj : \"p5b17\" # Current weather condition properties : \"text\" : > {% if is_state('weather.openweathermap','clear-night') -%} Clear night {% elif is_state('weather.openweathermap','cloudy') -%} Cloudy {% elif is_state('weather.openweathermap','fog') -%} Fog {% elif is_state('weather.openweathermap','hail') -%} Hail {% elif is_state('weather.openweathermap','lightning') -%} Lightning {% elif is_state('weather.openweathermap','lightning-rainy') -%} Thunderstorms {% elif is_state('weather.openweathermap','partlycloudy') -%} Partly cloudy {% elif is_state('weather.openweathermap','pouring') -%} Pouring rain {% elif is_state('weather.openweathermap','rainy') -%} Rainy {% elif is_state('weather.openweathermap','snowy') -%} Snowy {% elif is_state('weather.openweathermap','snowy-rainy') -%} Snowy-rainy {% elif is_state('weather.openweathermap','sunny') -%} Sunny {% elif is_state('weather.openweathermap','windy') -%} Windy {% elif is_state('weather.openweathermap','windy-variant') -%} Windy {% elif is_state('weather.openweathermap','exceptional') -%} Exceptional {% elif is_state('weather.openweathermap','unavailable') -%} (not available) {% else -%} {{ states('weather.openweathermap') }} {% endif -%} - obj : \"p5b10\" # tab dots - MAKE SURE YOU UPDATE THIS ONE!! event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p5b19.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p5b21\" # Forecast time +1h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b22\" # Forecast temp +1h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[1]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b23\" # Forecast condition +1h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b31\" # Forecast time +2h (using Dawn/Morn etc instead of Today/Tomorrow) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set hour = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) | timestamp_custom(\"%-H\") | int %} {%- if 4 <= hour < 6 %} Dawning {%- elif 6 <= hour < 9 %} Morning {%- elif 9 <= hour < 12 %} Forenoon {%- elif 12 <= hour < 18 %} Afternoon {%- elif 18 <= hour < 23 %} Evening {%- elif 23 <= hour or hour < 4 %} Night {%- endif %} {{- \" \" + hour |string + \" o'clock\" }} {%- endif %} - obj : \"p5b32\" # Forecast temp +2h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[3]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b33\" # Forecast condition +2h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[3]['condition'] }}.png {%- endif %} - obj : \"p5b41\" # Forecast time +4h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[6]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b42\" # Forecast temp +4h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[6]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b43\" # Forecast condition +4h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[6]['condition'] }}.png {%- endif %} - obj : \"p5b51\" # Forecast time +8h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[12]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b52\" # Forecast temp +8h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[12]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b53\" # Forecast condition +8h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[12]['condition'] }}.png {%- endif %} - obj : \"p5b61\" # Forecast date +1d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[0]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b62\" # Forecast temp min +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b63\" # Forecast temp max +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b64\" # Forecast condition +1d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[0]['condition'] }}.png {%- endif %} - obj : \"p5b71\" # Forecast date +2d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b72\" # Forecast temp min +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b73\" # Forecast temp max +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b74\" # Forecast condition +2d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b81\" # Forecast date +3d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[2]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b82\" # Forecast temp min +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b83\" # Forecast temp max +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b84\" # Forecast condition +3d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[2]['condition'] }}.png {%- endif %} - obj : \"p5b91\" # Forecast date +4d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b92\" # Forecast temp min +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b93\" # Forecast temp max +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b94\" # Forecast condition +4d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[3]['condition'] }}.png {%- endif %} Attribution Icons are copyright from manifestinteractive and merlinthered .","title":"Current weather and forecasts"},{"location":"integrations/home-assistant/sampl_conf/#fan-and-scent-diffuser","text":"This example shows how a transparent PNG image can be combined with a moving spinner object, to create the impression of a spinning fan. In Home Assistant this fan appears as a select component with the available presets as Low , Mid , High , Turbo , OFF selectable options. The scent diffuser appears as a standard fan component where the intensity can be set by percentage. To control the fan we use a button matrix object which has exactly the same buttons as the options of the select component. To control the scent diffuser we use a slider object. The fan and the perfume PNG icons are available below. Upload them to the flash storage of your plate. fan perfume Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will likely crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 4 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"AIR TREATMENT\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Fresh air flow\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Scent intensity\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 12 , \"obj\" : \"spinner\" , \"x\" : 36 , \"y\" : 84 , \"w\" : 56 , \"h\" : 56 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 19 , \"line_color10\" : \"#34eb77\" , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 3000 } { \"page\" : 4 , \"id\" : 13 , \"obj\" : \"img\" , \"x\" : 14 , \"y\" : 75 , \"src\" : \"L:/g64.png\" , \"auto_size\" : 1 , \"w\" : 100 , \"h\" : 74 } { \"page\" : 4 , \"id\" : 14 , \"obj\" : \"img\" , \"x\" : 130 , \"y\" : 78 , \"src\" : \"L:/perfume3.png\" , \"auto_size\" : 1 , \"w\" : 60 , \"h\" : 68 } { \"page\" : 4 , \"id\" : 40 , \"obj\" : \"btnmatrix\" , \"x\" : 5 , \"y\" : 130 , \"w\" : 110 , \"h\" : 113 , \"parentid\" : 10 , \"options\" :[ \"Low\" , \"Mid\" , \"\\n\" , \"High\" , \"Turbo\" , \"\\n\" , \"OFF\" ], \"toggle\" : 1 , \"one_check\" : 1 , \"bg_opa\" : 0 , \"pad_inner\" : 5 , \"border_width\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 4 , \"id\" : 51 , \"obj\" : \"slider\" , \"x\" : 200 , \"y\" : 60 , \"w\" : 25 , \"h\" : 220 , \"min\" : 0 , \"max\" : 60 , \"val\" : 15 } { \"page\" : 4 , \"id\" : 52 , \"obj\" : \"obj\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 4 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"text\" : \"15\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 4 , \"id\" : 54 , \"obj\" : \"btn\" , \"x\" : 130 , \"y\" : 168 , \"w\" : 50 , \"h\" : 76 , \"parentid\" : 10 , \"toggle\" : true , \"text\" : \"\\uE425\" , \"text_font\" : 32 , \"align\" : 1 , \"bg_color\" : \"#A0A0A0\" , \"bg_grad_color\" : \"#606060\" , \"border_color\" : \"#404040\" } relevant openHASP-custom-component config: - obj : \"p4b40\" # Buttin Matrix with the fan presets properties : \"click\" : \"{{ 0 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 1 }}\" \"opacity\" : \"{{ 100 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 255 }}\" \"options\" : '[\"Low\",\"Mid\",\"\\n\",\"High\",\"Turbo\",\"\\n\",\"OFF\"]' \"toggle\" : '{{ 1 if (not states(\"input_select.fan_presets\") in state_attr(\"input_select.fan_presets\",\"options\")) or (is_state(\"input_select.fan_presets\",\"unavailable\")) -}}' \"val\" : > {% if state_attr(\"input_select.fan_presets\",\"options\") is not none -%} {% if not states('input_select.fan_presets') in state_attr('input_select.fan_presets','options') -%}-1{% else -%} {% for source in state_attr('input_select.fan_presets','options') -%} {{loop.index - 1 if source == states('input_select.fan_presets') }} {%-endfor%} {%- endif %} {%- endif %} event : - service : input_select.input_select_option data : option : '{{ text }}' target : entity_id : input_select.fan_presets - obj : \"p4b12\" # Spinner behind the PNG icon properties : \"opacity\" : \"{{ 0 if states('input_select.fan_presets') in ['unavailable', 'unknown', 'OFF'] else 255 }}\" \"jsonl\" : > {% if is_state('number.plate_test_page_number', '4') %} {% if is_state('input_select.fan_presets', 'Alap') %} {\"speed\":7000,\"line_color10\":\"#31de70\"} {%-elif is_state('input_select.fan_presets', 'K\u00f6z\u00e9p') %} {\"speed\":1700,\"line_color10\":\"#dede1f\"} {%-elif is_state('input_select.fan_presets', 'Magas') %} {\"speed\":800,\"line_color10\":\"#d6a11a\"} {%-elif is_state('input_select.fan_presets', 'Turb\u00f3') %} {\"speed\":250,\"line_color10\":\"#ff4a4a\"} {% endif %} {% else -%} {\"speed\":0} {% endif %} - obj : \"p4b54\" # Scent Diffuser ON/OFF button properties : \"val\" : '{{ 1 if is_state(\"fan.scent_diffuser_intensity\", \"on\") else 0 }}' \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"down\" : - service : fan.toggle target : entity_id : fan.scent_diffuser_intensity - obj : \"p4b51\" # Scent Diffuser intensity slider properties : \"val\" : \"{{ state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"up\" : - service : fan.set_percentage target : entity_id : fan.scent_diffuser_intensity data : percentage : '{{ val }}' - obj : \"p4b53\" # Scent Diffuser intensity number label properties : \"text\" : \"{{ '--' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"opacity\" : \"{{ 255 if is_state('fan.scent_diffuser_intensity', 'on') else 95 }}\" Note the condition in the Spinner configuration of the component: {% if is_state('openhasp.plate_test', '4') %} - this is useful to only animate the spinner when the page containing it is actually shown. Since the spinner is being overlapped by a transparent PNG image, CPU usage is higher as it has to be completely redrawn every frame. CPU resources can be freed up this way - only animate when it can be seen. Attribution Icons are copyright from SVG Repo .","title":"Fan and scent diffuser"},{"location":"integrations/home-assistant/sampl_conf/#using-tags","text":"You can avoid too much code repetition when you have multiple similar objects on a page, doing the same thing with different entities, and you'd like to make accessible some advanced options too. Presenting everyting flat will overwhelm your user interface, so it would be better to just show the most used controls, and only display the advanced options in popups related to unique objects. Tag property was made to ease this task.","title":"Using tags"},{"location":"integrations/home-assistant/sampl_conf/#colored-lights-panel","text":"In the example below we have four coloured lights. Squeezing the ON/OFF button, the color picker and the brightness selector for all four lights on a single page can be challenging - and the result will likely be useless on a small touch screen. Instead, we'll just place the toggle buttons with descriptive labels on the page, and we'll only display the color picker and the brightness selector on demand, in this case when the user touches the descriptive coloured label. While dynamically drawing these objects we're setting the tag property for the color picker and the slider to the entity_id of the light we want to adjust, so that when we're interacting with them, the Custom Component can know which light it has to send the adjustments to. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"COLOURED LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"I.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"II.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"III.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"IV.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p5b11\" # toggle button for ON/OFF switching of light I. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_1\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_1\" - obj : \"p5b12\" # toggle button for ON/OFF switching of light II. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_2\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_2\" - obj : \"p5b13\" # toggle button for ON/OFF switching of light III. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_3\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_3\" - obj : \"p5b14\" # toggle button for ON/OFF switching of light IV. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_4\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_4\" - obj : \"p5b2\" # label showing the current color of light I. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_1','on') %} {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_1 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light I. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light I.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_1\",\"color\": {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_1\",\"val\": {{- state_attr('light.dmx_vbar_1', 'brightness') -}} } - obj : \"p5b3\" # label showing the current color of light II. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_2','on') %} {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_2 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light II. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light II.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_2\",\"color\": {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_2\",\"val\": {{- state_attr('light.dmx_vbar_2', 'brightness') -}} } - obj : \"p5b4\" # label showing the current color of light III. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_3','on') %} {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_3 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light III. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light III.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_3\",\"color\": {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_3\",\"val\": {{- state_attr('light.dmx_vbar_3', 'brightness') -}} } - obj : \"p5b5\" # label showing the current color of light IV. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_4','on') %} {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_4 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light IV. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light IV.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_4\",\"color\": {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_4\",\"val\": {{- state_attr('light.dmx_vbar_4', 'brightness') -}} } - obj : \"p5b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b201\" # set the color of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b202\" # set the brightness of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" brightness : \"{{ val }}\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete Without tags, the last 3 object definitions would have to be added for each light, and also it would be needed to be drawn separately for each light, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design.","title":"Colored lights panel"},{"location":"integrations/home-assistant/sampl_conf/#shutter-control-panel","text":"In the second example, we have five windows with motorized shutters. In addition to the usual UP/STOP/DOWN buttons, the inhabitants want to have three shortcut positions for each shutter, and also a slider for free positioning. Useless to say that it's impossible to put all these on a page, and also it would be a pity to use up 5 pages just for these. We'll just put the most used, UP/STOP/DOWN buttons on the page (this already looks a bit much...) and we'll use a long press event on the middle STOP button to show a pop-up with the extra required settings related to the desired shutter. The tag here will be a JSON object referencing both the entity_id and the position specific to the desired shutter, eg. \"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"} , this will be set for the buttons and the slider appearing in the popup. Since the shutters are different sizes and types, the same intermediate physical position may correspond to different numeric values in Home Assistant. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"MOTORIZED COVERS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 2 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 7 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"I.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 53 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"II.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 99 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"III.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"IV.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 191 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"V.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 31 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 32 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 33 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 41 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 42 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 43 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 51 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 52 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 53 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p2b11\" # shutter I. up button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b13\" # shutter I. down button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b12\" # shutter I. middle stop button properties : \"text\" : > {% if is_state('cover.bigroom_i', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_i', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_i\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - I.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"54\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_i','current_position') -}} } - obj : \"p2b21\" # shutter II. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b23\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b22\" properties : \"text\" : > {% if is_state('cover.bigroom_ii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_ii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_ii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - II.\",\"align\":\"center\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"18\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_ii','current_position') -}} } - obj : \"p2b31\" # shutter III. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b33\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b32\" properties : \"text\" : > {% if is_state('cover.bigroom_iii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - III.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iii','current_position') -}} } - obj : \"p2b41\" # shutter IV. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b43\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b42\" properties : \"text\" : > {% if is_state('cover.bigroom_iv', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iv', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iv\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - IV.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iv','current_position') -}} } - obj : \"p2b51\" # shutter V. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b53\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b52\" properties : \"text\" : > {% if is_state('cover.bigroom_v', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_v', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_v\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - V.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"55\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"19\"},\"val\": {{- state_attr('cover.bigroom_v','current_position') -}} } - obj : \"p2b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b201\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b202\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b203\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b204\" # set the shutter position from the slider for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"up\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ val | int }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete Again - without tags, the last 5 object definitions would have to be added for each shutter, and also it would be needed to be drawn separately for each one, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design. Note Some examples below may generate errors during Home Assistant startup. Log messages like Error while processing template or Template variable error: 'None' has no attribute 'last_changed' etc. can be caused by the fact that openHASP component loads faster than the other integrations you have set up, from where you want to pull data. Because the data required by openHASP component is not yet available, an error is generated. But as soon as Home Assistant finishes loading everything, and all the data you've configured is available, things will be normal. Nevertheless the log should be checked regularly to find repetitive problems.","title":"Shutter control panel"},{"location":"integrations/node-red/","text":"Node-RED ~ You can integrate an openHASP plate in Node-RED by subscribing and publishing to its MQTT topics. The following is an example of how to use Node-RED to read PIN numbers from an alarm button matrix on page 12, and display those numbers back to the screen on p12b2. First we define p12b1 as the matrix, and p12b2 as the area where to re-display the PIN. Add the following to pages_online.jsonl { \"comment\" : \" ----------- Page 12 layout ------------\" } { \"page\" : 12 , \"id\" : 1 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 220 , \"options\" :[ \"1\" , \"2\" , \"3\" , \"\\n\" , \"4\" , \"5\" , \"6\" , \"\\n\" , \"7\" , \"8\" , \"9\" , \"\\n\" , \"Home\" , \"0\" , \"Away\" ], \"toggle\" : false , \"one_check\" : false } { \"page\" : 12 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 104 , \"y\" : 22 , \"h\" : 30 , \"w\" : 40 , \"text\" : \" \" , \"text_color\" : \"white\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } The following jsonl is for 13 Lanbon L8 panels and can be imported [ { \"id\" : \"0b80aa53cbe8e6e2\" , \"type\" : \"tab\" , \"label\" : \"Lanbon Security Panel\" , \"disabled\" : false , \"info\" : \"\" , \"env\" : [] }, { \"id\" : \"e7faec55927cd35a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/livingroom/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 80 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"99cabcc7d52bfc9b\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"active\" : true , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"payload\" , \"targetType\" : \"msg\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 1290 , \"y\" : 200 , \"wires\" : [] }, { \"id\" : \"ac7b661dc1513061\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MakeNums\" , \"rules\" : [ { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":0,\\\"text\\\":\\\"1\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"1\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":1,\\\"text\\\":\\\"2\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"2\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":2,\\\"text\\\":\\\"3\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"3\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":3,\\\"text\\\":\\\"4\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"4\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":4,\\\"text\\\":\\\"5\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"5\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":5,\\\"text\\\":\\\"6\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"6\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":6,\\\"text\\\":\\\"7\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"7\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":7,\\\"text\\\":\\\"8\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"8\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":8,\\\"text\\\":\\\"9\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"9\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":10,\\\"text\\\":\\\"0\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"0\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 450 , \"y\" : 160 , \"wires\" : [ [ \"9739abb6f93766f6\" ] ] }, { \"id\" : \"d23a2c349910face\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"BuildPIN\" , \"func\" : \"var pin=global.get('pin') || \\\"\\\";\\n\\nvar count=global.get('count') || 0;\\ncount +=1;\\nglobal.set('count',count)\\n\\npin = pin+msg.payload;\\nglobal.set('pin',pin)\\n\\n\\nif (count >= 4) {\\n msg.payload=pin;\\n global.set('count',undefined)\\n global.set('pin',undefined)\\n return msg;\\n}\\n\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 680 , \"y\" : 180 , \"wires\" : [ [ \"194eed57a4506f13\" , \"eaa539f1f670e8ea\" , \"978adaf5813fc4c9\" , \"421fb70f969f4c42\" , \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"8ac3fdee648284fe\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"OnDown\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"cont\" , \"v\" : \"{\\\"event\\\":\\\"down\\\"\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 1 , \"x\" : 420 , \"y\" : 80 , \"wires\" : [ [ \"5249d096ebe1aab7\" , \"ac7b661dc1513061\" ] ] }, { \"id\" : \"978adaf5813fc4c9\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Disarm Alarm\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_disarm\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":msg.payload}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 920 , \"y\" : 200 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"8b34728627566066\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mainhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 140 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"da5ff263f7265cee\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/ensuite/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 200 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"16c2241ebfe6d928\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mbr/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 160 , \"y\" : 260 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9152a3b91fa4ce8a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/porch/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 320 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"df2df457211af7fa\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/dining/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 380 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"ef006a2ad5f4033f\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 440 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"6dc9dabe1edb7af5\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/kitchen/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 500 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"fb8196aa68104765\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/garage/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 560 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"a416144df4052b42\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 620 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9305a215bd8a3a87\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishMood\" , \"topic\" : \"hasp/plates/command\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 40 , \"wires\" : [] }, { \"id\" : \"5249d096ebe1aab7\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"White\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 255, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 650 , \"y\" : 40 , \"wires\" : [ [ \"1c99afe47fe6da11\" , \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"3a59fcd31e572bb0\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 810 , \"y\" : 80 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"197cb8bad0ea98a3\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmAway\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_away\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 320 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"eaa539f1f670e8ea\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Purple\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 0, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 950 , \"y\" : 380 , \"wires\" : [ [ \"9305a215bd8a3a87\" , \"cae42e223294ce38\" ] ] }, { \"id\" : \"194eed57a4506f13\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Reset\" , \"func\" : \" global.set('count',undefined)\\n global.set('pin',undefined)\\n msg.payload = \\\"\\\"\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 670 , \"y\" : 240 , \"wires\" : [ [ \"421fb70f969f4c42\" ] ] }, { \"id\" : \"9739abb6f93766f6\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"0-9HomeAway\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"btwn\" , \"v\" : \"0\" , \"vt\" : \"num\" , \"v2\" : \"9\" , \"v2t\" : \"num\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":9,\\\"text\\\":\\\"Home\\\"}\" , \"vt\" : \"str\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":11,\\\"text\\\":\\\"Away\\\"}\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 3 , \"x\" : 440 , \"y\" : 240 , \"wires\" : [ [ \"d23a2c349910face\" , \"f9f85bc88ea6f404\" ], [ \"194eed57a4506f13\" ], [ \"194eed57a4506f13\" , \"c861944aac699e3e\" , \"206a424a07c9fb22\" ] ] }, { \"id\" : \"11dad534fd1a944e\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1010 , \"y\" : 440 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"cae42e223294ce38\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"1\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 880 , \"y\" : 440 , \"wires\" : [ [ \"11dad534fd1a944e\" ] ] }, { \"id\" : \"4b8a2bd06dcf1342\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishPIN\" , \"topic\" : \"hasp/plates/command/p12b2.text\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 120 , \"wires\" : [] }, { \"id\" : \"f9f85bc88ea6f404\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"DisplayPIN\" , \"func\" : \"var pin=global.get('pin')\\n// pin = pin+msg.payload;\\nmsg.payload = pin;\\nreturn msg;\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 690 , \"y\" : 140 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"149782424f319147\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"****\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 500 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" , \"88031b2f0bea8fef\" ] ] }, { \"id\" : \"421fb70f969f4c42\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 500 , \"wires\" : [ [ \"149782424f319147\" ] ] }, { \"id\" : \"88031b2f0bea8fef\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 560 , \"wires\" : [ [ \"bf47160c100015ca\" ] ] }, { \"id\" : \"bf47160c100015ca\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \" \" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 560 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"c861944aac699e3e\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"15\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 300 , \"wires\" : [ [ \"371b17d0dd9918dc\" , \"24f9431e18e5d5f2\" ] ] }, { \"id\" : \"1c99afe47fe6da11\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"300\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 670 , \"y\" : 80 , \"wires\" : [ [ \"3a59fcd31e572bb0\" ] ] }, { \"id\" : \"206a424a07c9fb22\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"30 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"Alarm will arm away in 30 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 300 , \"wires\" : [ [] ] }, { \"id\" : \"24f9431e18e5d5f2\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"15 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"15 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 360 , \"wires\" : [ [] ] }, { \"id\" : \"371b17d0dd9918dc\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"10\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 360 , \"wires\" : [ [ \"b8098924ec49405c\" , \"56b96ab40a26daeb\" ] ] }, { \"id\" : \"b8098924ec49405c\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"5\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 420 , \"wires\" : [ [ \"197cb8bad0ea98a3\" ] ] }, { \"id\" : \"56b96ab40a26daeb\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"5 Secs\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"5 Seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 420 , \"wires\" : [ [] ] }, { \"id\" : \"0b8f9dbd664953e2\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmHome\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_home\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 260 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"0bf633ce2d98dd79\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/upbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 680 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"e3bf26032c55a701\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"debug 1\" , \"active\" : false , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"false\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 640 , \"y\" : 580 , \"wires\" : [] }, { \"id\" : \"9a8d3eea339efbdc\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/allys_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 740 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"7aac330a4bb67fe8\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/victorias_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 130 , \"y\" : 800 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"441d674c9c4a7f07\" , \"type\" : \"mqtt-broker\" , \"name\" : \"192.168.0.21\" , \"broker\" : \"192.168.0.21\" , \"port\" : \"1883\" , \"clientid\" : \"\" , \"autoConnect\" : true , \"usetls\" : false , \"protocolVersion\" : \"4\" , \"keepalive\" : \"60\" , \"cleansession\" : true , \"birthTopic\" : \"\" , \"birthQos\" : \"0\" , \"birthPayload\" : \"\" , \"birthMsg\" : {}, \"closeTopic\" : \"\" , \"closeQos\" : \"0\" , \"closePayload\" : \"\" , \"closeMsg\" : {}, \"willTopic\" : \"\" , \"willQos\" : \"0\" , \"willPayload\" : \"\" , \"willMsg\" : {}, \"sessionExpiry\" : \"\" }, { \"id\" : \"669eed80.4f9844\" , \"type\" : \"server\" , \"name\" : \"Home Assistant\" , \"version\" : 5 , \"addon\" : true , \"rejectUnauthorizedCerts\" : true , \"ha_boolean\" : \"y|yes|true|on|home|open\" , \"connectionDelay\" : false , \"cacheJson\" : false , \"heartbeat\" : false , \"heartbeatInterval\" : 30 , \"areaSelector\" : \"friendlyName\" , \"deviceSelector\" : \"friendlyName\" , \"entitySelector\" : \"friendlyName\" , \"statusSeparator\" : \"at: \" , \"statusYear\" : \"hidden\" , \"statusMonth\" : \"short\" , \"statusDay\" : \"numeric\" , \"statusHourCycle\" : \"h23\" , \"statusTimeFormat\" : \"h:m\" , \"enableGlobalContextStore\" : true } ]","title":"Node-RED"},{"location":"integrations/node-red/#node-red","text":"You can integrate an openHASP plate in Node-RED by subscribing and publishing to its MQTT topics. The following is an example of how to use Node-RED to read PIN numbers from an alarm button matrix on page 12, and display those numbers back to the screen on p12b2. First we define p12b1 as the matrix, and p12b2 as the area where to re-display the PIN. Add the following to pages_online.jsonl { \"comment\" : \" ----------- Page 12 layout ------------\" } { \"page\" : 12 , \"id\" : 1 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 220 , \"options\" :[ \"1\" , \"2\" , \"3\" , \"\\n\" , \"4\" , \"5\" , \"6\" , \"\\n\" , \"7\" , \"8\" , \"9\" , \"\\n\" , \"Home\" , \"0\" , \"Away\" ], \"toggle\" : false , \"one_check\" : false } { \"page\" : 12 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 104 , \"y\" : 22 , \"h\" : 30 , \"w\" : 40 , \"text\" : \" \" , \"text_color\" : \"white\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } The following jsonl is for 13 Lanbon L8 panels and can be imported [ { \"id\" : \"0b80aa53cbe8e6e2\" , \"type\" : \"tab\" , \"label\" : \"Lanbon Security Panel\" , \"disabled\" : false , \"info\" : \"\" , \"env\" : [] }, { \"id\" : \"e7faec55927cd35a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/livingroom/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 80 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"99cabcc7d52bfc9b\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"active\" : true , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"payload\" , \"targetType\" : \"msg\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 1290 , \"y\" : 200 , \"wires\" : [] }, { \"id\" : \"ac7b661dc1513061\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MakeNums\" , \"rules\" : [ { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":0,\\\"text\\\":\\\"1\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"1\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":1,\\\"text\\\":\\\"2\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"2\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":2,\\\"text\\\":\\\"3\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"3\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":3,\\\"text\\\":\\\"4\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"4\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":4,\\\"text\\\":\\\"5\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"5\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":5,\\\"text\\\":\\\"6\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"6\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":6,\\\"text\\\":\\\"7\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"7\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":7,\\\"text\\\":\\\"8\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"8\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":8,\\\"text\\\":\\\"9\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"9\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":10,\\\"text\\\":\\\"0\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"0\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 450 , \"y\" : 160 , \"wires\" : [ [ \"9739abb6f93766f6\" ] ] }, { \"id\" : \"d23a2c349910face\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"BuildPIN\" , \"func\" : \"var pin=global.get('pin') || \\\"\\\";\\n\\nvar count=global.get('count') || 0;\\ncount +=1;\\nglobal.set('count',count)\\n\\npin = pin+msg.payload;\\nglobal.set('pin',pin)\\n\\n\\nif (count >= 4) {\\n msg.payload=pin;\\n global.set('count',undefined)\\n global.set('pin',undefined)\\n return msg;\\n}\\n\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 680 , \"y\" : 180 , \"wires\" : [ [ \"194eed57a4506f13\" , \"eaa539f1f670e8ea\" , \"978adaf5813fc4c9\" , \"421fb70f969f4c42\" , \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"8ac3fdee648284fe\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"OnDown\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"cont\" , \"v\" : \"{\\\"event\\\":\\\"down\\\"\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 1 , \"x\" : 420 , \"y\" : 80 , \"wires\" : [ [ \"5249d096ebe1aab7\" , \"ac7b661dc1513061\" ] ] }, { \"id\" : \"978adaf5813fc4c9\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Disarm Alarm\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_disarm\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":msg.payload}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 920 , \"y\" : 200 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"8b34728627566066\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mainhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 140 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"da5ff263f7265cee\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/ensuite/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 200 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"16c2241ebfe6d928\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mbr/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 160 , \"y\" : 260 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9152a3b91fa4ce8a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/porch/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 320 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"df2df457211af7fa\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/dining/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 380 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"ef006a2ad5f4033f\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 440 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"6dc9dabe1edb7af5\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/kitchen/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 500 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"fb8196aa68104765\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/garage/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 560 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"a416144df4052b42\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 620 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9305a215bd8a3a87\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishMood\" , \"topic\" : \"hasp/plates/command\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 40 , \"wires\" : [] }, { \"id\" : \"5249d096ebe1aab7\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"White\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 255, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 650 , \"y\" : 40 , \"wires\" : [ [ \"1c99afe47fe6da11\" , \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"3a59fcd31e572bb0\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 810 , \"y\" : 80 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"197cb8bad0ea98a3\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmAway\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_away\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 320 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"eaa539f1f670e8ea\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Purple\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 0, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 950 , \"y\" : 380 , \"wires\" : [ [ \"9305a215bd8a3a87\" , \"cae42e223294ce38\" ] ] }, { \"id\" : \"194eed57a4506f13\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Reset\" , \"func\" : \" global.set('count',undefined)\\n global.set('pin',undefined)\\n msg.payload = \\\"\\\"\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 670 , \"y\" : 240 , \"wires\" : [ [ \"421fb70f969f4c42\" ] ] }, { \"id\" : \"9739abb6f93766f6\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"0-9HomeAway\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"btwn\" , \"v\" : \"0\" , \"vt\" : \"num\" , \"v2\" : \"9\" , \"v2t\" : \"num\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":9,\\\"text\\\":\\\"Home\\\"}\" , \"vt\" : \"str\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":11,\\\"text\\\":\\\"Away\\\"}\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 3 , \"x\" : 440 , \"y\" : 240 , \"wires\" : [ [ \"d23a2c349910face\" , \"f9f85bc88ea6f404\" ], [ \"194eed57a4506f13\" ], [ \"194eed57a4506f13\" , \"c861944aac699e3e\" , \"206a424a07c9fb22\" ] ] }, { \"id\" : \"11dad534fd1a944e\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1010 , \"y\" : 440 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"cae42e223294ce38\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"1\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 880 , \"y\" : 440 , \"wires\" : [ [ \"11dad534fd1a944e\" ] ] }, { \"id\" : \"4b8a2bd06dcf1342\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishPIN\" , \"topic\" : \"hasp/plates/command/p12b2.text\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 120 , \"wires\" : [] }, { \"id\" : \"f9f85bc88ea6f404\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"DisplayPIN\" , \"func\" : \"var pin=global.get('pin')\\n// pin = pin+msg.payload;\\nmsg.payload = pin;\\nreturn msg;\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 690 , \"y\" : 140 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"149782424f319147\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"****\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 500 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" , \"88031b2f0bea8fef\" ] ] }, { \"id\" : \"421fb70f969f4c42\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 500 , \"wires\" : [ [ \"149782424f319147\" ] ] }, { \"id\" : \"88031b2f0bea8fef\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 560 , \"wires\" : [ [ \"bf47160c100015ca\" ] ] }, { \"id\" : \"bf47160c100015ca\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \" \" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 560 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"c861944aac699e3e\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"15\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 300 , \"wires\" : [ [ \"371b17d0dd9918dc\" , \"24f9431e18e5d5f2\" ] ] }, { \"id\" : \"1c99afe47fe6da11\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"300\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 670 , \"y\" : 80 , \"wires\" : [ [ \"3a59fcd31e572bb0\" ] ] }, { \"id\" : \"206a424a07c9fb22\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"30 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"Alarm will arm away in 30 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 300 , \"wires\" : [ [] ] }, { \"id\" : \"24f9431e18e5d5f2\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"15 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"15 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 360 , \"wires\" : [ [] ] }, { \"id\" : \"371b17d0dd9918dc\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"10\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 360 , \"wires\" : [ [ \"b8098924ec49405c\" , \"56b96ab40a26daeb\" ] ] }, { \"id\" : \"b8098924ec49405c\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"5\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 420 , \"wires\" : [ [ \"197cb8bad0ea98a3\" ] ] }, { \"id\" : \"56b96ab40a26daeb\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"5 Secs\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"5 Seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 420 , \"wires\" : [ [] ] }, { \"id\" : \"0b8f9dbd664953e2\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmHome\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_home\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 260 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"0bf633ce2d98dd79\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/upbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 680 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"e3bf26032c55a701\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"debug 1\" , \"active\" : false , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"false\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 640 , \"y\" : 580 , \"wires\" : [] }, { \"id\" : \"9a8d3eea339efbdc\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/allys_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 740 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"7aac330a4bb67fe8\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/victorias_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 130 , \"y\" : 800 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"441d674c9c4a7f07\" , \"type\" : \"mqtt-broker\" , \"name\" : \"192.168.0.21\" , \"broker\" : \"192.168.0.21\" , \"port\" : \"1883\" , \"clientid\" : \"\" , \"autoConnect\" : true , \"usetls\" : false , \"protocolVersion\" : \"4\" , \"keepalive\" : \"60\" , \"cleansession\" : true , \"birthTopic\" : \"\" , \"birthQos\" : \"0\" , \"birthPayload\" : \"\" , \"birthMsg\" : {}, \"closeTopic\" : \"\" , \"closeQos\" : \"0\" , \"closePayload\" : \"\" , \"closeMsg\" : {}, \"willTopic\" : \"\" , \"willQos\" : \"0\" , \"willPayload\" : \"\" , \"willMsg\" : {}, \"sessionExpiry\" : \"\" }, { \"id\" : \"669eed80.4f9844\" , \"type\" : \"server\" , \"name\" : \"Home Assistant\" , \"version\" : 5 , \"addon\" : true , \"rejectUnauthorizedCerts\" : true , \"ha_boolean\" : \"y|yes|true|on|home|open\" , \"connectionDelay\" : false , \"cacheJson\" : false , \"heartbeat\" : false , \"heartbeatInterval\" : 30 , \"areaSelector\" : \"friendlyName\" , \"deviceSelector\" : \"friendlyName\" , \"entitySelector\" : \"friendlyName\" , \"statusSeparator\" : \"at: \" , \"statusYear\" : \"hidden\" , \"statusMonth\" : \"short\" , \"statusDay\" : \"numeric\" , \"statusHourCycle\" : \"h23\" , \"statusTimeFormat\" : \"h:m\" , \"enableGlobalContextStore\" : true } ]","title":"Node-RED"},{"location":"integrations/openhab/integration_openhab/","text":"openHAB Integration ~ Page Layout ~ We call plate any device running openHASP in your system. Installation ~ The openHAB configuration files to have this demo load automatically can be found here . Update the IP-address for your MQTT-broker in the haspLVGL_demo.things file. Make sure you have your plate connected to the network and to your MQTT boker, and your topic is set to demo_plate . Code ~ To add an openHASP plate to your installation with Jaffa Sunrise sample configuration, upload a pages.jsonl file with the folowing content to your plate: in the plate's web UI select Mono UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"obj\" : \"btn\" , \"id\" : 4 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights On\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE6E8\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 5 , \"x\" : 5 , \"y\" : 68 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Daylight\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE599\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 6 , \"x\" : 5 , \"y\" : 131 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Night\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE594\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 7 , \"x\" : 5 , \"y\" : 194 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights Off\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE335\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"obj\" : \"label\" , \"id\" : 8 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Kitchen Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 9 , \"x\" : 5 , \"y\" : 80 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Dining Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 10 , \"x\" : 5 , \"y\" : 165 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Front Blinds\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"slider\" , \"id\" : 11 , \"x\" : 20 , \"y\" : 40 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 80 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 12 , \"x\" : 20 , \"y\" : 120 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 13 , \"x\" : 20 , \"y\" : 205 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 25 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"page\" : 3 , \"comment\" : \"---------- Page 3 ----------\" } { \"obj\" : \"label\" , \"id\" : 14 , \"x\" : 42 , \"y\" : 10 , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Gold\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 15 , \"x\" : 42 , \"y\" : 60 , \"mode\" : \"scroll\" , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Chet Faker\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 16 , \"x\" : 2 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AE\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 17 , \"x\" : 82 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE3E4\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 18 , \"x\" : 162 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AD\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"bar\" , \"id\" : 19 , \"x\" : 2 , \"y\" : 105 , \"w\" : 236 , \"h\" : 20 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 15 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" } { \"obj\" : \"slider\" , \"id\" : 20 , \"x\" : 35 , \"y\" : 220 , \"w\" : 170 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 30 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"label\" , \"id\" : 21 , \"x\" : 2 , \"y\" : 10 , \"w\" : 40 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75A\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 22 , \"x\" : 2 , \"y\" : 60 , \"w\" : 36 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE004\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 23 , \"x\" : 5 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75F\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 24 , \"x\" : 210 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE57E\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"obj\" : \"btn\" , \"id\" : 1 , \"x\" : 5 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE04D\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 2 , \"x\" : 83 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 3 , \"x\" : 161 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE054\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } Restart the plate and the demo page should load automatically to your device.","title":"openHAB Integration"},{"location":"integrations/openhab/integration_openhab/#openhab-integration","text":"","title":"openHAB Integration"},{"location":"integrations/openhab/integration_openhab/#page-layout","text":"We call plate any device running openHASP in your system.","title":"Page Layout"},{"location":"integrations/openhab/integration_openhab/#installation","text":"The openHAB configuration files to have this demo load automatically can be found here . Update the IP-address for your MQTT-broker in the haspLVGL_demo.things file. Make sure you have your plate connected to the network and to your MQTT boker, and your topic is set to demo_plate .","title":"Installation"},{"location":"integrations/openhab/integration_openhab/#code","text":"To add an openHASP plate to your installation with Jaffa Sunrise sample configuration, upload a pages.jsonl file with the folowing content to your plate: in the plate's web UI select Mono UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"obj\" : \"btn\" , \"id\" : 4 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights On\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE6E8\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 5 , \"x\" : 5 , \"y\" : 68 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Daylight\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE599\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 6 , \"x\" : 5 , \"y\" : 131 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Night\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE594\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 7 , \"x\" : 5 , \"y\" : 194 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights Off\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE335\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"obj\" : \"label\" , \"id\" : 8 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Kitchen Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 9 , \"x\" : 5 , \"y\" : 80 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Dining Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 10 , \"x\" : 5 , \"y\" : 165 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Front Blinds\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"slider\" , \"id\" : 11 , \"x\" : 20 , \"y\" : 40 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 80 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 12 , \"x\" : 20 , \"y\" : 120 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 13 , \"x\" : 20 , \"y\" : 205 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 25 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"page\" : 3 , \"comment\" : \"---------- Page 3 ----------\" } { \"obj\" : \"label\" , \"id\" : 14 , \"x\" : 42 , \"y\" : 10 , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Gold\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 15 , \"x\" : 42 , \"y\" : 60 , \"mode\" : \"scroll\" , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Chet Faker\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 16 , \"x\" : 2 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AE\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 17 , \"x\" : 82 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE3E4\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 18 , \"x\" : 162 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AD\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"bar\" , \"id\" : 19 , \"x\" : 2 , \"y\" : 105 , \"w\" : 236 , \"h\" : 20 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 15 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" } { \"obj\" : \"slider\" , \"id\" : 20 , \"x\" : 35 , \"y\" : 220 , \"w\" : 170 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 30 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"label\" , \"id\" : 21 , \"x\" : 2 , \"y\" : 10 , \"w\" : 40 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75A\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 22 , \"x\" : 2 , \"y\" : 60 , \"w\" : 36 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE004\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 23 , \"x\" : 5 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75F\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 24 , \"x\" : 210 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE57E\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"obj\" : \"btn\" , \"id\" : 1 , \"x\" : 5 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE04D\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 2 , \"x\" : 83 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 3 , \"x\" : 161 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE054\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } Restart the plate and the demo page should load automatically to your device.","title":"Code"}]}
\ No newline at end of file
+{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"openHASP Control your home-automation devices from a customizable touchscreen UI connected via MQTT. openHASP is a re-implementation of the popular HASwitchPlate sketch created by aderusha. The HASPone project uses a Wemos D1 mini and requires a Nextion/TJC HMI display. This project is a complete rewrite and implements the Light and Versatile Graphics Library on the MCU to drive a commodity display. openHASP uses an ESP32 to take advantage of the additional hardware capabilities. Demo Screens ~ Click on the demo screen to show the example configuration: Quotes ~ kazimir Hey man, openHASP is amazing. Currently running 12 pieces of Lanbon L8 plates in my house with your firmware. danielo Oh man, integrating this with Home Assistant was super easy. Lucky you can't see me getting hyped about turning on/off my office lights from a tinny screen (and doing it like 3 or 4 times on a row...) Support ~ For support using openHASP you can find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum Donate ~ The firmware is opensource and free to use! If you like this project you can show your appreciation by making a small donation. This will help with ofssetting the cost of the different hardware devices we support.","title":"Overview"},{"location":"#demo-screens","text":"Click on the demo screen to show the example configuration:","title":"Demo Screens"},{"location":"#quotes","text":"kazimir Hey man, openHASP is amazing. Currently running 12 pieces of Lanbon L8 plates in my house with your firmware. danielo Oh man, integrating this with Home Assistant was super easy. Lucky you can't see me getting hyped about turning on/off my office lights from a tinny screen (and doing it like 3 or 4 times on a row...)","title":"Quotes"},{"location":"#support","text":"For support using openHASP you can find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum","title":"Support"},{"location":"#donate","text":"The firmware is opensource and free to use! If you like this project you can show your appreciation by making a small donation. This will help with ofssetting the cost of the different hardware devices we support.","title":"Donate"},{"location":"commands/","text":"Commands are not related to an object on the screen but can get or set global properties or invoke system commands on the device. MQTT Topics ~ hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub. Issuing commands ~ Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it. Batch processing ~ Commands can be processed in batch one after another from .cmd script files located in the flash storage of the plate. General rules when creating .cmd batch scripts: can contain any command empty lines are ignored # or // can be used for comments space or tab in front of a command is ignored lines starting with { are processed as jsonl payloads lines starting with [ are processed as json payloads other lines are processed as <command> <payload> CR , LF or CRLF line endings allowed UTF8 encoding is required for special characters To start a batch script, use run command. System scripts ~ If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost This makes it possible to disable or hide buttons, load a special offline page, etc. See example . Global commands ~ run ~ accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl jsonl ~ accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects . json ~ accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer. page ~ accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page . clearpage ~ accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command. backlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%. moodlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 GPIO pins as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts boolean values to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts color values to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels. idle ~ accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the Display Settings . You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic. output[x] ~ where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly. input[x] ~ where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" } System Commands ~ antiburn ~ accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the automation example to make it run on a regular basis. calibrate ~ Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost. discovery ~ Trigger the sending of the discovery payload. sensors ~ Trigger the sending of the sensor data. factoryreset ~ Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function! reboot or restart ~ Saves any changes in the configuration file and reboots the device. screenshot ~ Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten. service ~ Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization . statusupdate ~ Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 } unzip ~ Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip update ~ accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful. Configuration Settings ~ Wi-FI ~ ssid ~ Set network name of the access point to connect to. pass ~ Set the optional password for the access point to connect to. MQTT ~ hostname ~ Set the hostname of the device and mqtt topic for the node to hasp/<nodename>/ mqtthost ~ Set the IP address or hostname of the mqtt broker. mqttport ~ Set the port of the mqtt broker. mqttuser ~ Set the optional username for the mqtt broker. mqttpass ~ Set the optional password for the mqtt broker. config/submodule ~ You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"Commands"},{"location":"commands/#mqtt-topics","text":"hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub.","title":"MQTT Topics"},{"location":"commands/#issuing-commands","text":"Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it.","title":"Issuing commands"},{"location":"commands/#batch-processing","text":"Commands can be processed in batch one after another from .cmd script files located in the flash storage of the plate. General rules when creating .cmd batch scripts: can contain any command empty lines are ignored # or // can be used for comments space or tab in front of a command is ignored lines starting with { are processed as jsonl payloads lines starting with [ are processed as json payloads other lines are processed as <command> <payload> CR , LF or CRLF line endings allowed UTF8 encoding is required for special characters To start a batch script, use run command.","title":"Batch processing"},{"location":"commands/#system-scripts","text":"If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost This makes it possible to disable or hide buttons, load a special offline page, etc. See example .","title":"System scripts"},{"location":"commands/#global-commands","text":"","title":"Global commands"},{"location":"commands/#run","text":"accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl","title":"run"},{"location":"commands/#jsonl","text":"accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects .","title":"jsonl"},{"location":"commands/#json","text":"accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer.","title":"json"},{"location":"commands/#page","text":"accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page .","title":"page"},{"location":"commands/#clearpage","text":"accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command.","title":"clearpage"},{"location":"commands/#backlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%.","title":"backlight"},{"location":"commands/#moodlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 GPIO pins as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts boolean values to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts color values to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels.","title":"moodlight"},{"location":"commands/#idle","text":"accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the Display Settings . You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic.","title":"idle"},{"location":"commands/#outputx","text":"where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly.","title":"output[x]"},{"location":"commands/#inputx","text":"where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" }","title":"input[x]"},{"location":"commands/#system-commands","text":"","title":"System Commands"},{"location":"commands/#antiburn","text":"accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the automation example to make it run on a regular basis.","title":"antiburn"},{"location":"commands/#calibrate","text":"Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost.","title":"calibrate"},{"location":"commands/#discovery","text":"Trigger the sending of the discovery payload.","title":"discovery"},{"location":"commands/#sensors","text":"Trigger the sending of the sensor data.","title":"sensors "},{"location":"commands/#factoryreset","text":"Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function!","title":"factoryreset"},{"location":"commands/#reboot-or-restart","text":"Saves any changes in the configuration file and reboots the device.","title":"reboot or restart"},{"location":"commands/#screenshot","text":"Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten.","title":"screenshot"},{"location":"commands/#service","text":"Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization .","title":"service"},{"location":"commands/#statusupdate","text":"Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 }","title":"statusupdate"},{"location":"commands/#unzip","text":"Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip","title":"unzip"},{"location":"commands/#update","text":"accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful.","title":"update"},{"location":"commands/#configuration-settings","text":"","title":"Configuration Settings"},{"location":"commands/#wi-fi","text":"","title":"Wi-FI"},{"location":"commands/#mqtt","text":"","title":"MQTT"},{"location":"commands/#configsubmodule","text":"You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"config/submodule"},{"location":"gallery/","text":"","title":"Gallery"},{"location":"assets/buy/waveshare-tft-touch-shield/","text":"<!-- No line breaks allowed! Use \\t to \\n -> Buy Amazon US Amazon UK Waveshare.com Buy Amazon US Amazon UK AliExpress Waveshare.com Buy Amazon US Amazon UK AliExpress Waveshare.com","title":"Waveshare tft touch shield"},{"location":"assets/buy/wishlist/","text":"Devices ~ Displays ~ Development Boards ~ Assorted Links ~ Note This page contains affiliate links which may pay us a small commission.","title":"Wishlist"},{"location":"assets/buy/wishlist/#devices","text":"","title":"Devices"},{"location":"assets/buy/wishlist/#displays","text":"","title":"Displays"},{"location":"assets/buy/wishlist/#development-boards","text":"","title":"Development Boards"},{"location":"assets/buy/wishlist/#assorted-links","text":"Note This page contains affiliate links which may pay us a small commission.","title":"Assorted Links"},{"location":"assets/users/icons/","text":"For assets usable by endusers.","title":"Icons"},{"location":"assets/videos/videos/","text":"directory for videos","title":"Videos"},{"location":"commands/configuration/","text":"Wi-FI ~ ssid ~ Set network name of the access point to connect to. pass ~ Set the optional password for the access point to connect to. MQTT ~ hostname ~ Set the hostname of the device and mqtt topic for the node to hasp/<nodename>/ mqtthost ~ Set the IP address or hostname of the mqtt broker. mqttport ~ Set the port of the mqtt broker. mqttuser ~ Set the optional username for the mqtt broker. mqttpass ~ Set the optional password for the mqtt broker. config/submodule ~ You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"Configuration Settings"},{"location":"commands/configuration/#wi-fi","text":"","title":"Wi-FI"},{"location":"commands/configuration/#ssid","text":"Set network name of the access point to connect to.","title":"ssid"},{"location":"commands/configuration/#pass","text":"Set the optional password for the access point to connect to.","title":"pass"},{"location":"commands/configuration/#mqtt","text":"","title":"MQTT"},{"location":"commands/configuration/#hostname","text":"Set the hostname of the device and mqtt topic for the node to hasp/<nodename>/","title":"hostname"},{"location":"commands/configuration/#mqtthost","text":"Set the IP address or hostname of the mqtt broker.","title":"mqtthost"},{"location":"commands/configuration/#mqttport","text":"Set the port of the mqtt broker.","title":"mqttport"},{"location":"commands/configuration/#mqttuser","text":"Set the optional username for the mqtt broker.","title":"mqttuser"},{"location":"commands/configuration/#mqttpass","text":"Set the optional password for the mqtt broker.","title":"mqttpass"},{"location":"commands/configuration/#configsubmodule","text":"You can get or set the configuration of an openHASP submodule in json format. To get the configuration, use the command config/<submodule> : config/wifi config/mqtt config/http config/mdns config/hasp config/gui config/debug config/gpio The result will be published to hasp/<nodename>/state/config . Passwords will be omitted from the result. To update the configuration simply issue the same command config/<submodule> with updated json payload. Example config/gui {\"idle2\":0} disable long idle (don't turn off the screen completely) config/debug {\"tele\":300} set the telemetry period to 300 seconds config/hasp {\"startdim\":255} to set the startup brightness to 255","title":"config/submodule"},{"location":"commands/global/","text":"run ~ accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl jsonl ~ accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects . json ~ accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer. page ~ accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page . clearpage ~ accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command. backlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%. moodlight ~ accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 [GPIO pins][3] as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts [boolean values][2] to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts [color values][1] to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels. idle ~ accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the [Display Settings][4]. You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic. output[x] ~ where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly. input[x] ~ where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" }","title":"Global Commands"},{"location":"commands/global/#run","text":"accepted parameters: name of a .cmd or .jsonl file present on the flash filesystem of the plate. Filename must be preceeded by the / character Run a batch script or load a jsonl page. Example run /script.cmd run /pages_party_mode.jsonl","title":"run"},{"location":"commands/global/#jsonl","text":"accepted parameters: one or more json formatted lines Create new objects or update the properties of an existing object. When updating an existing object the obj property is not required and will be ignored. Each line in the jsonl payload defines one object and has to be in the json format. If the payload exceeds the MQTT buffer of 2 kB it will be cut off to fit, don't send too many lines in a single payload, you can always sends multiple jsonl commands. Example 1 jso nl { \"obj\" : \"btn\" , \"id\" : 14 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"Test\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } For more details see Pages and Objects .","title":"jsonl"},{"location":"commands/global/#json","text":"accepted parameters: json array of strings Use the json command to send multiple commands as an array of strings in one payload. Example 1 jso n [ 'page 3 ' , 'backligh t { \"state\" : \"ON\" , \"brightness\" : 100 } ' , 'idle o ff ' ] This command will change to page 3, turn the backlight on at ~40% brightness and reset the idle timer.","title":"json"},{"location":"commands/global/#page","text":"accepted parameters: [1-12] , prev , next or back Switches the display to show the objects from a different page and return the page number in state/page . Calling the page command without a parameter will return the value of the current page in state/page .","title":"page"},{"location":"commands/global/#clearpage","text":"accepted parameters: [0-12] or all Deletes all objects on a given page. If no page number is specified, it clears the current page. Use clearpage all to clear all objects on all pages. To delete individual objects, you can issue the pXbY.delete command.","title":"clearpage"},{"location":"commands/global/#backlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 Example backlight {\"state\":\"on\",\"brightness\":128} sets the display to half the brightness. Instead of a json payload, you can use a simple payload. To change the state, use either on / off , true / false , 0 , yes / no . A simple integer payload of 1..255 will adjust the brightness. Example backlight off backlight 200 sets the display brightness to ~80%.","title":"backlight"},{"location":"commands/global/#moodlight","text":"accepted json keys: state: on / off , true / false , 0 / 1 , yes / no brightness: 1..255 color or r, g, b: 0..255 An RGB moodlight can be controlled by configuring 3 [GPIO pins][3] as type Mood Red , Mood Green and Mood blue . These leds can then be controlled together using the moodlight command. Example 1 2 3 4 moodligh t { \"state\" : \"off\" , \"color\" : \"green\" } moodligh t { \"state\" : true , \"color\" : \"#ff00e7\" } moodligh t { \"color\" : 12345 } moodligh t { \"state\" : \"on\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 255 } The state key accepts [boolean values][2] to turn the moodlight on or off The brightness key can be set between 1 and 255 to dim the moodlight The color key accepts [color values][1] to set the RGB channels at once Individual r , g and b keys can also be used to set each channel separately Calling the moodlight command without parameters (or sending an empty payload to the hasp/<nodename>/command/moodlight topic) returns the current state: Example 1 \"state/moodlight\" { \"state\" : \"ON\" , \"brightness\" : 255 , \"color\" : \"#ff0000\" , \"r\" : 255 , \"g\" : 0 , \"b\" : 0 } The color is returned as a hexadecimal value and as individual RGB channels.","title":"moodlight"},{"location":"commands/global/#idle","text":"accepted parameters: off , short or long Sets the idle state of the device and publishes the new state via a state/idle status message. off resets the idle counter as if a touch event occurred on the device. This is helpful e.g. when you want to wake up the display when an external event has occurred, like a PIR motion sensor. short or long sets the idle timer to the number of seconds configured in the [Display Settings][4]. You can use this to force an idle state, for example at night or when leaving the house. Calling the idle command without a parameter will also return the current idle state short , long or off in the state/idle topic.","title":"idle"},{"location":"commands/global/#outputx","text":"where [x] is number of the gpio pin (0-39) accepted json keys: state: on / off , true / false , 0 / 1 , yes / no val: 0..255 Changes the state GPIO pin to on or off . If the pin is configured as a LED or Serial Dimmer then the val key will control the brightness. Note If the GPIO is assigned to a group then objects and other GPIOs that share the same groupid will change state accordingly.","title":"output[x]"},{"location":"commands/global/#inputx","text":"where [x] is number of the gpio pin (0-39) read-only Returns a JSON object containing the current state of the input, either on or off Example 1 i n pu t 4 => { \"state\" : \"on\" }","title":"input[x]"},{"location":"commands/mqtt/","text":"MQTT Topics ~ hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub. Issuing commands ~ Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it.","title":"Mqtt"},{"location":"commands/mqtt/#mqtt-topics","text":"hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen So the topic depends on the direction of the data flow. Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub.","title":"MQTT Topics"},{"location":"commands/mqtt/#issuing-commands","text":"Commands can be issued via the Serial commandline, telnet commandline or MQTT. For MQTT, you can use either: hasp/<nodename>/command topic with payload <keyword>=<parameter(s)> hasp/<nodename>/command/<keyword> topic with payload <parameter(s)> Leave the payload empty to get the current state without changing it.","title":"Issuing commands"},{"location":"commands/scripts/","text":"Commands can be processed in batch one after another from .cmd script files located in the flash storage of the plate. General rules when creating .cmd batch scripts: can contain any command empty lines are ignored # or // can be used for comments space or tab in front of a command is ignored lines starting with { are processed as jsonl payloads lines starting with [ are processed as json payloads other lines are processed as <command> <payload> CR , LF or CRLF line endings allowed UTF8 encoding is required for special characters To start a batch script, use run command. System scripts ~ If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost L:/idle_off.cmd will be executed after idle state change to off (wakeup) L:/idle_short.cmd will be executed after idle state change to short L:/idle_long.cmd will be executed after idle state change to long This makes it possible to disable or hide buttons, load a special offline page, dimming background, etc. See example .","title":"Batch Processing"},{"location":"commands/scripts/#system-scripts","text":"If any of the following scripts is present on the filesystem, it will be run automatically according to the rules below: L:/boot.cmd is executed when the plate has finished (re)booting L:/online.cmd will be executed after connection to the network was successfull L:/offline.cmd will be executed after connection to the WiFi is lost L:/idle_off.cmd will be executed after idle state change to off (wakeup) L:/idle_short.cmd will be executed after idle state change to short L:/idle_long.cmd will be executed after idle state change to long This makes it possible to disable or hide buttons, load a special offline page, dimming background, etc. See example .","title":"System scripts"},{"location":"commands/system/","text":"antiburn ~ accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the [automation example][6] to make it run on a regular basis. calibrate ~ Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost. discovery ~ Trigger the sending of the discovery payload. sensors ~ Trigger the sending of the sensor data. factoryreset ~ Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function! reboot or restart ~ Saves any changes in the configuration file and reboots the device. screenshot ~ Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten. service ~ Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization . statusupdate ~ Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 } unzip ~ Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip update ~ accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful.","title":"System Commands"},{"location":"commands/system/#antiburn","text":"accepted parameters: on / off , true / false , 0 / 1 , yes / no Start LCD anti burn-in protection. This cycles the display to a full black, red, green, blue and white color each second to relief the tension put on each individual pixel. The cycle stops when either: 30 seconds have passed antiburn=off is received The screen is touched If you're using Home Assistant, check out the [automation example][6] to make it run on a regular basis.","title":"antiburn"},{"location":"commands/system/#calibrate","text":"Start on-screen touch calibration. You need to issue a soft reboot command to save the new calibration settings. If you do a hard reset of the device, the calibration settings will be lost.","title":"calibrate"},{"location":"commands/system/#discovery","text":"Trigger the sending of the discovery payload.","title":"discovery"},{"location":"commands/system/#sensors","text":"Trigger the sending of the sensor data.","title":"sensors "},{"location":"commands/system/#factoryreset","text":"Clear the filesystem and EEPROM and reboot the device in its initial state. Warning There is no confirmation prompt nor an undo function!","title":"factoryreset"},{"location":"commands/system/#reboot-or-restart","text":"Saves any changes in the configuration file and reboots the device.","title":"reboot or restart"},{"location":"commands/system/#screenshot","text":"Saves a picture of the current screen to the flash filesystem. You can retrieve it via http://<ip-address>/screenshot.bmp. This can be handy for bug reporting or documentation. The previous screenshot is overwritten.","title":"screenshot"},{"location":"commands/system/#service","text":"Start or stop some of the processes running on the plate. Currently supported parameters: start stop Currently supported services: http (web interface) telnet (remote console) console (serial console) Example To stop the web interface of the plate, send to topic hasp/<your_plate>/command/service the string stop http . To start the web interface of the plate, send to topic hasp/<your_plate>/command/service the string start http . Tip Once these services are stopped, connection is lost/not possible to the plate through them. They can be started at any time by sending service start commands in through MQTT. It's possible to create self-built firmware binaries which have services stopped by default at boot, using customization .","title":"service"},{"location":"commands/system/#statusupdate","text":"Reports the status of the MCU. The response will be posted to the state topic. Example 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 \"hasp/<platename>/state/statusupdate\" => { \"node\" : \"plate01\" , \"idle\" : \"long\" , \"version\" : \"0.6.3\" , \"uptime\" : 11027 , \"ssid\" : \"my_network\" , \"rssi\" : -60 , \"ip\" : \"192.168.0.133\" , \"mac\" : \"7C:87:CE:E3:55:55\" , \"heapFree\" : 58756 , \"heapFrag\" : 7 , \"core\" : \"v4.4.1\" , \"canUpdate\" : \"false\" , \"page\" : 1 , \"numPages\" : 12 , \"tftDriver\" : \"ILI9488\" , \"tftWidth\" : 480 , \"tftHeight\" : 320 }","title":"statusupdate"},{"location":"commands/system/#unzip","text":"Unzip a file-packgage on the plate. You can upload uncompressed ZIP files to the flash space of your plate and unzip them locally. This is useful for cases when you need a lot of small files to be uploaded - putting them in an uncompressed zip allows to upload them in one go, and then extract them with a single command: Example unzip /openhasp-weathericons-day.zip","title":"unzip"},{"location":"commands/system/#update","text":"accepted parameters: [url] Update the firmware from the url provided. Reboots when update was successful.","title":"update"},{"location":"design/characters/","text":"Languages ~ Encoding ~ The character sets are encoded in UTF-8. All character sets contain the ASCII 0x20-0x7E characters and the non-braking-space (NBSP). Each set contains roughly the same extended characters from its equivalent iso-8859 standard . For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands. All character sets also contain about 100 standaard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts. Ascii ~ Includes all ASCII 0x20-0x7E characters extended with these 11 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022 Latin 1 ~ Includes all characters and symbols from the ASCII range above. Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e Latin 2 ~ Includes all characters and symbols from the ASCII range above. Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b Chinese ~ Includes all characters and symbols from the ASCII range above, plus 650 most common CJK radicals: \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13 \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13 Characters ~ UTF-8 Char Description CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A0 Non-breaking space CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A1 \u00a1 Inverted exclamation mark ES 00A2 \u00a2 Cent sign 00A3 \u00a3 Pound sign 00A4 \u00a4 Currency sign 00A5 \u00a5 Yen sign 00A6 \u00a6 Broken bar 00A7 \u00a7 Section sign 00A8 \u00a8 Diaeresis 00A9 \u00a9 Copyright sign 00AA \u00aa Feminine Ordinal Indicator 00AB \u00ab Left-pointing double angle quotation mark 00AC \u00ac Not sign 00AD \u00ad Soft hyphen 00AE \u00ae Registered sign 00AF \u00af Macron 00B0 \u00b0 Degree symbol CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B1 \u00b1 Plus-minus sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B2 \u00b2 Superscript two 00B3 \u00b3 Superscript three 00B4 \u00b4 Acute accent DA 00B5 \u00b5 Micro sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B6 \u00b6 Pilcrow sign 00B7 \u00b7 Middle dot CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B8 \u00b8 Cedilla 00B9 \u00b9 Superscript one 00BA \u00ba Masculine ordinal indicator 00BB \u00bb Right-pointing double-angle quotation mark 00BC \u00bc Vulgar fraction one quarter CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BD \u00bd Vulgar fraction one half CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BE \u00be Vulgar fraction three quarters CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BF \u00bf Inverted question mark ES 00C0 \u00c0 Capital A with grave PT IT FR 00C1 \u00c1 Capital A with acute HU ES PT FR 00C2 \u00c2 Capital A with circumflex RO NO PT FR 00C3 \u00c3 Capital A with tilde PT 00C4 \u00c4 Capital A with diaeresis DE SV FI DA 00C5 \u00c5 Capital A with ring above SV FI DA NO 00C6 \u00c6 Capital AE DA NO 00C7 \u00c7 Capital C with cedilla PT FR 00C8 \u00c8 Capital E with grave NO IT FR 00C9 \u00c9 Capital E with acute NO HU ES PT IT FR 00CA \u00ca Capital E with circumflex NO PT FR 00CB \u00cb Capital E with diaeresis FR 00CC \u00cc Capital I with grave IT 00CD \u00cd Capital I with acute HU ES PT 00CE \u00ce Capital I with circumflex RO FR 00CF \u00cf Capital I with diaeresis FR 00D0 \u00d0 Capital Eth 00D1 \u00d1 Capital N with tilde ES 00D2 \u00d2 Capital O with grave NO IT 00D3 \u00d3 Capital O with acute NO HU ES PT 00D4 \u00d4 Capital O with circumflex NO PT FR 00D5 \u00d5 Capital O with tilde PT FR 00D6 \u00d6 Capital O with diaeresis DE SV FI DA HU 00D7 \u00d7 Multiplication sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00D8 \u00d8 Capital O with stroke DA NO 00D9 \u00d9 Capital U with grave IT 00DA \u00da Capital U with acute HU ES PT 00DB \u00db Capital U with circumflex 00DC \u00dc Capital U with diaeresis DE DA HU ES PT 00DD \u00dd Capital Y with acute CZ ES 00DE \u00de Capital Thorn 00DF \u00df Small sharp S DE 00E0 \u00e0 Small A with grave PT IT FR 00E1 \u00e1 Small A with acute HU ES PT FR 00E2 \u00e2 Small A with circumflex RO NO PT FR 00E3 \u00e3 Small A with tilde PT 00E4 \u00e4 Small A with diaeresis DE SV FI DA 00E5 \u00e5 Small A with ring above SV FI DA NO 00E6 \u00e6 Small AE DA NO 00E7 \u00e7 Small C with cedilla PT FR 00E8 \u00e8 Small E with grave NO IT FR 00E9 \u00e9 Small E with acute DA NO HU ES PT IT FR 00EA \u00ea Small E with circumflex NO PT FR 00EB \u00eb Small E with diaeresis 00EC \u00ec Small I with grave IT 00ED \u00ed Small I with acute HU ES PT FR 00EE \u00ee Small I with circumflex RO FR 00EF \u00ef Small I with diaeresis FR 00F0 \u00f0 Small Eth 00F1 \u00f1 Small N with tilde ES EN NL 00F2 \u00f2 Small O with grave NO IT 00F3 \u00f3 Small O with acute NO HU ES PT FR 00F4 \u00f4 Small O with circumflex NO PT FR 00F5 \u00f5 Small O with tilde PT 00F6 \u00f6 Small O with diaeresis DE SV FI DA HU 00F7 \u00f7 Division sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00F8 \u00f8 Small O with stroke DA NO 00F9 \u00f9 Small U with grave IT FR 00FA \u00fa Small U with acute HU ES PT FR 00FB \u00fb Small U with circumflex FR 00FC \u00fc Small U with diaeresis DE DA HU ES PT 00FD \u00fd Small Y with acute ES 00FE \u00fe Small Thorn 00FF \u00ff Small Y with diaeresis 0100 \u0100 Capital A with macron 0101 \u0101 Small A with macron 0102 \u0102 Capital A with breve RO 0103 \u0103 Small A with breve RO 0104 \u0104 Capital A with ogonek 0105 \u0105 Small A with ogonek 0106 \u0106 Capital C with acute 0107 \u0107 Small C with acute 0108 \u0108 Capital C with circumflex 0109 \u0109 Small C with circumflex 010A \u010a Capital C with dot above 010B \u010b Small C with dot above 010C \u010c Capital C with caron SL 010D \u010d Small C with caron SL 010E \u010e Capital D with caron 010F \u010f Small D with caron 0110 \u0110 Capital D with stroke 0111 \u0111 Small D with stroke 0112 \u0112 Capital E with macron 0113 \u0113 Small E with macron 0114 \u0114 Capital E with breve CZ 0115 \u0115 Small E with breve CZ 0116 \u0116 Capital E with dot above 0117 \u0117 Small E with dot above 0118 \u0118 Capital E with ogonek 0119 \u0119 Small E with ogonek 011A \u011a Capital E with caron 011B \u011b Small E with caron 011C \u011c Capital G with circumflex 011D \u011d Small G with circumflex 011E \u011e Capital G with breve 011F \u011f Small G with breve 0120 \u0120 Capital G with dot above 0121 \u0121 Small G with dot above 0122 \u0122 Capital G with cedilla 0123 \u0123 Small G with cedilla 0124 \u0124 Capital H with circumflex 0125 \u0125 Small H with circumflex 0126 \u0126 Capital H with stroke 0127 \u0127 Small H with stroke 0128 \u0128 Capital I with tilde 0129 \u0129 Small I with tilde 012A \u012a Capital I with macron 012B \u012b Small I with macron 012C \u012c Capital I with breve 012D \u012d Small I with breve 012E \u012e Capital I with ogonek 012F \u012f Small I with ogonek 0130 \u0130 Capital I with dot above 0131 \u0131 Small dotless I 0132 \u0132 Capital Ligature IJ 0133 \u0133 Small Ligature IJ 0134 \u0134 Capital J with circumflex 0135 \u0135 Small J with circumflex 0136 \u0136 Capital K with cedilla 0137 \u0137 Small K with cedilla 0138 \u0138 Small Kra 0139 \u0139 Capital L with acute 013A \u013a Small L with acute 013B \u013b Capital L with cedilla 013C \u013c Small L with cedilla 013D \u013d Capital L with caron 013E \u013e Small L with caron 013F \u013f Capital L with middle dot 0140 \u0140 Small L with middle dot 0141 \u0141 Capital L with stroke 0142 \u0142 Small L with stroke 0143 \u0143 Capital N with acute 0144 \u0144 Small N with acute 0145 \u0145 Capital N with cedilla 0146 \u0146 Small N with cedilla 0147 \u0147 Capital N with caron CZ 0148 \u0148 Small N with caron CZ 0149 \u0149 Small N preceded by apostrophe 014A \u014a Capital Eng 014B \u014b Small Eng 014C \u014c Capital O with macron 014D \u014d Small O with macron 014E \u014e Capital O with breve 014F \u014f Small O with breve 0150 \u0150 Capital O with double acute HU 0151 \u0151 Small O with double acute HU 0152 \u0152 Capital Ligature OE FR 0153 \u0153 Small Ligature OE FR 0154 \u0154 Capital R with acute 0155 \u0155 Small R with acute 0156 \u0156 Capital R with cedilla 0157 \u0157 Small R with cedilla 0158 \u0158 Capital R with caron 0159 \u0159 Small R with caron 015A \u015a Capital S with acute 015B \u015b Small S with acute 015C \u015c Capital S with circumflex 015D \u015d Small S with circumflex 015E \u015e Capital S with cedilla RO 015F \u015f Small S with cedilla RO 0160 \u0160 Capital S with caron SL FI 0161 \u0161 Small S with caron SL FI 0162 \u0162 Capital T with cedilla RO 0163 \u0163 Small T with cedilla RO 0164 \u0164 Capital T with caron 0165 \u0165 Small T with caron 0166 \u0166 Capital T with stroke 0167 \u0167 Small T with stroke 0168 \u0168 Capital U with tilde 0169 \u0169 Small U with tilde 016A \u016a Capital U with macron 016B \u016b Small U with macron 016C \u016c Capital U with breve 016D \u016d Small U with breve 016E \u016e Capital U with ring above CZ 016F \u016f Small U with ring above CZ 0170 \u0170 Capital U with double acute HU 0171 \u0171 Small U with double acute HU 0172 \u0172 Capital U with ogonek 0173 \u0173 Small U with ogonek 0174 \u0174 Capital W with circumflex 0175 \u0175 Small W with circumflex 0176 \u0176 Capital Y with circumflex 0177 \u0177 Small Y with circumflex 0178 \u0178 Capital Y with diaeresis 0179 \u0179 Capital Z with acute 017A \u017a Small Z with acute 017B \u017b Capital Z with dot above 017C \u017c Small Z with dot above 017D \u017d Capital Z with caron SL FI 017E \u017e Small Z with caron SL FI 017F \u017f Small long S 01C4 \u01c4 Capital DZ with Caron HR 01C5 \u01c5 Capital D with Small Z with Caron HR 01C6 \u01c6 Small DZ with Caron HR 01C7 \u01c7 Capital LJ HR 01C8 \u01c8 Capital L with Small J HR 01C9 \u01c9 Small LJ HR 01CA \u01ca Capital NJ HR 01CB \u01cb Capital N with Small J HR 01CC \u01cc Small NJ HR 01CD \u01cd Capital A with Caron RO 01CE \u01ce Small A with Caron RO 01CF \u01cf Capital I with Caron 01D0 \u01d0 Small I with Caron 01D1 \u01d1 Capital O with Caron 01D2 \u01d2 Small O with Caron 01D3 \u01d3 Capital U with Caron 01D4 \u01d4 Small U with Caron 01D5 \u01d5 Capital U with Diaeresis and Macron 01D6 \u01d6 Small U with Diaeresis and Macron 01D7 \u01d7 Capital U with Diaeresis and Acute 01D8 \u01d8 Small U with Diaeresis and Acute 01D9 \u01d9 Capital U with Diaeresis and Caron 01DA \u01da Small U with Diaeresis and Caron 01DB \u01db Capital U with Diaeresis and Grave 01DC \u01dc Small U with Diaeresis and Grave 01DD \u01dd Small Turned E 01DE \u01de Capital A with Diaeresis and Macron 01DF \u01df Small A with Diaeresis and Macron 01E0 \u01e0 Capital A with Dot Above and Macron 01E1 \u01e1 Small A with Dot Above and Macron 01E2 \u01e2 Capital AE with Macron 01E3 \u01e3 Small AE with Macron 01E4 \u01e4 Capital G with Stroke 01E5 \u01e5 Small G with Stroke 01E6 \u01e6 Capital G with Caron 01E7 \u01e7 Small G with Caron 01E8 \u01e8 Capital K with Caron 01E9 \u01e9 Small K with Caron 01EA \u01ea Capital O with Ogonek 01EB \u01eb Small O with Ogonek 01EC \u01ec Capital O with Ogonek and Macron 01ED \u01ed Small O with Ogonek and Macron 01EE \u01ee Capital Ezh with Caron 01EF \u01ef Small Ezh with Caron 01F0 \u01f0 Small J with Caron 01F1 \u01f1 Capital DZ 01F2 \u01f2 Capital D with Small Z 01F3 \u01f3 Small DZ 01F4 \u01f4 Capital G with Acute 01F5 \u01f5 Small G with Acute 01F6 \u01f6 Capital Hwair 01F7 \u01f7 Capital Wynn 01F8 \u01f8 Capital N with Grave 01F9 \u01f9 Small N with Grave 01FA \u01fa Capital A with Ring Above and Acute 01FB \u01fb Small A with Ring Above and Acute 01FC \u01fc Capital AE with Acute 01FD \u01fd Small AE with Acute 01FE \u01fe Capital O with Stroke and Acute 01FF \u01ff Small O with Stroke and Acute 0200 \u0200 Capital A with Double Grave HR SL 0201 \u0201 Small A with Double Grave HR SL 0202 \u0202 Capital A with Inverted Breve RO HR SL 0203 \u0203 Small A with Inverted Breve RO HR SL 0204 \u0204 Capital E with Double Grave HR SL 0205 \u0205 Small E with Double Grave HR SL 0206 \u0206 Capital E with Inverted Breve HR SL 0207 \u0207 Small E with Inverted Breve HR SL 0208 \u0208 Capital I with Double Grave HR SL 0209 \u0209 Small I with Double Grave HR SL 020A \u020a Capital I with Inverted Breve RO HR SL 020B \u020b Small I with Inverted Breve RO HR SL 020C \u020c Capital O with Double Grave HR SL 020D \u020d Small O with Double Grave HR SL 020E \u020e Capital O with Inverted Breve HR SL 020F \u020f Small O with Inverted Breve HR SL 0210 \u0210 Capital R with Double Grave HR SL 0211 \u0211 Small R with Double Grave HR SL 0212 \u0212 Capital R with Inverted Breve HR SL 0213 \u0213 Small R with Inverted Breve HR SL 0214 \u0214 Capital U with Double Grave HR SL 0215 \u0215 Small U with Double Grave HR SL 0216 \u0216 Capital U with Inverted Breve HR SL 0217 \u0217 Small U with Inverted Breve HR SL 0218 \u0218 Capital S with Comma Below RO 0219 \u0219 Small S with Comma Below RO 021A \u021a Capital T with Comma Below RO 021B \u021b Small T with Comma Below RO 021C \u021c Capital Yogh 021D \u021d Small Yogh 021E \u021e Capital H with Caron 021F \u021f Small H with Caron 0220 \u0220 Capital N with Long Right Leg 0221 \u0221 Small D with Curl 0222 \u0222 Capital OU 0223 \u0223 Small OU 0224 \u0224 Capital Z with Hook 0225 \u0225 Small Z with Hook 0226 \u0226 Capital A with Dot Above 0227 \u0227 Small A with Dot Above 0228 \u0228 Capital E with Cedilla 0229 \u0229 Small E with Cedilla 022A \u022a Capital O with Diaeresis and Macron 022B \u022b Small O with Diaeresis and Macron 022C \u022c Capital O with Tilde and Macron 022D \u022d Small O with Tilde and Macron 022E \u022e Capital O with Dot Above 022F \u022f Small O with Dot Above 0230 \u0230 Capital O with Dot Above and Macron 0231 \u0231 Small O with Dot Above and Macron 0232 \u0232 Capital Y with Macron 0233 \u0233 Small Y with Macron 0234 \u0234 Small L with Curl 0235 \u0235 Small N with Curl 0236 \u0236 Small T with Curl 0237 \u0237 Small Dotless J 0238 \u0238 Small DB Digraph 0239 \u0239 Small QP Digraph 023A \u023a Capital A with Stroke 023B \u023b Capital C with Stroke 023C \u023c Small C with Stroke 023D \u023d Capital L with Bar 023E \u023e Capital T with Diagonal Stroke 023F \u023f Small S with Swash Tail 0240 \u0240 Small Z with Swash Tail 0241 \u0241 Capital Glottal Stop 0242 \u0242 Small Glottal Stop 0243 \u0243 Capital B with Stroke 0244 \u0244 Capital U Bar 0245 \u0245 Capital Turned V 0246 \u0246 Capital E with Stroke 0247 \u0247 Small E with Stroke 0248 \u0248 Capital J with Stroke 0249 \u0249 Small J with Stroke 024A \u024a Capital Q with Hook Tail 024B \u024b Small Q with Hook Tail 024C \u024c Capital R with Stroke 024D \u024d Small R with Stroke 024E \u024e Capital Y with Stroke 024F \u024f Small Y with Stroke 1E9E \u1e9e Capital Letter Sharp S DE","title":"Languages"},{"location":"design/characters/#languages","text":"","title":"Languages"},{"location":"design/characters/#encoding","text":"The character sets are encoded in UTF-8. All character sets contain the ASCII 0x20-0x7E characters and the non-braking-space (NBSP). Each set contains roughly the same extended characters from its equivalent iso-8859 standard . For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands. All character sets also contain about 100 standaard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts.","title":"Encoding"},{"location":"design/characters/#ascii","text":"Includes all ASCII 0x20-0x7E characters extended with these 11 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022","title":"Ascii"},{"location":"design/characters/#latin-1","text":"Includes all characters and symbols from the ASCII range above. Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e","title":"Latin 1"},{"location":"design/characters/#latin-2","text":"Includes all characters and symbols from the ASCII range above. Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b","title":"Latin 2"},{"location":"design/characters/#chinese","text":"Includes all characters and symbols from the ASCII range above, plus 650 most common CJK radicals: \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13 \u4e00 \u4e03 \u4e09 \u4e0a \u4e0b \u4e0d \u4e14 \u4e16 \u4e26 \u4e2d \u4e3b \u4e45 \u4e4b \u4e4e \u4e4f \u4e5f \u4e86 \u4e8b \u4e8c \u4e94 \u4e9b \u4ea4 \u4ea6 \u4eac \u4eba \u4ec0 \u4ecd \u4ed6 \u4ee3 \u4ee4 \u4ee5 \u4ef6 \u4efb \u4efd \u4f01 \u4f0a \u4f3c \u4f46 \u4f4d \u4f4e \u4f4f \u4f55 \u4f5c \u4f60 \u4f7f \u4f86 \u4f8b \u4f9b \u4f9d \u4fbf \u4fc2 \u4fdd \u4fe1 \u500b \u5011 \u5019 \u503c \u505a \u5065 \u5099 \u50b3 \u50c5 \u50cf \u50f9 \u5143 \u5145 \u5148 \u514b \u514d \u5152 \u5165 \u5167 \u5168 \u5169 \u516b \u516c \u516d \u5171 \u5176 \u5177 \u518d \u51fa \u5206 \u5207 \u5217 \u5225 \u5229 \u5230 \u5236 \u5247 \u524d \u525b \u5275 \u5283 \u529b \u529f \u52a0 \u52a9 \u52aa \u52d5 \u52d9 \u52f5 \u5305 \u5316 \u5317 \u5340 \u5341 \u534a \u5354 \u5373 \u537b \u539f \u53bb \u53c3 \u53c8 \u53ca \u53cb \u53cd \u53d6 \u53d7 \u53e3 \u53e5 \u53e6 \u53ea \u53eb \u53ef \u53f0 \u53f2 \u53f8 \u5403 \u5404 \u5408 \u540c \u540d \u5411 \u5426 \u5427 \u5440 \u544a \u5462 \u547d \u548c \u54c1 \u54e1 \u54ea \u5546 \u554a \u554f \u5566 \u5584 \u559c \u559d \u55ae \u55ce \u55ef \u561b \u56b4 \u56db \u56de \u56e0 \u570b \u570d \u5712 \u5718 \u571f \u5728 \u5730 \u5747 \u5750 \u57df \u57f7 \u57fa \u5831 \u5834 \u584a \u5883 \u589e \u58d3 \u58eb \u5916 \u591a \u5920 \u5927 \u5929 \u592a \u592e \u5957 \u5973 \u5979 \u597d \u5982 \u59b3 \u59cb \u59d0 \u59d4 \u5a66 \u5a92 \u5abd \u5b50 \u5b57 \u5b58 \u5b69 \u5b78 \u5b83 \u5b89 \u5b8c \u5b98 \u5b9a \u5bb6 \u5bb9 \u5bcc \u5bdf \u5be6 \u5beb \u5c07 \u5c08 \u5c0d \u5c0e \u5c0f \u5c11 \u5c1a \u5c24 \u5c31 \u5c3a \u5c45 \u5c55 \u5c6c \u5c71 \u5de5 \u5df1 \u5df2 \u5e02 \u5e0c \u5e2b \u5e36 \u5e38 \u5e74 \u5e7e \u5e95 \u5e9c \u5ea6 \u5ea7 \u5ead \u5eb7 \u5ee0 \u5efa \u5f0f \u5f15 \u5f35 \u5f37 \u5f62 \u5f71 \u5f7c \u5f80 \u5f88 \u5f8c \u5f97 \u5f9e \u5fc3 \u5fc5 \u5feb \u5ff5 \u600e \u6015 \u601d \u6027 \u60a8 \u60c5 \u60f3 \u6108 \u610f \u611b \u611f \u614b \u6167 \u616e \u61c9 \u6210 \u6211 \u6216 \u6230 \u6240 \u624b \u624d \u6253 \u627e \u6280 \u628a \u6295 \u62c9 \u62ec \u62ff \u6301 \u6307 \u6388 \u6392 \u63a1 \u63a5 \u63a7 \u63a8 \u63d0 \u63ee \u64c1 \u64c7 \u64d4 \u64da \u652f \u6539 \u653e \u653f \u6545 \u6548 \u6559 \u6562 \u6574 \u6587 \u6599 \u65b0 \u65b7 \u65b9 \u65bc \u65bd \u65c1 \u65cf \u65e2 \u65e5 \u65e9 \u660e \u6613 \u662f \u6642 \u667a \u66f4 \u66f8 \u66fe \u6700 \u6703 \u6708 \u6709 \u670b \u670d \u671b \u671f \u672a \u672c \u675f \u6771 \u6790 \u679c \u67d0 \u67e5 \u6821 \u6839 \u683c \u689d \u695a \u696d \u6975 \u6982 \u69cb \u6a02 \u6a19 \u6a23 \u6a39 \u6a5f \u6b21 \u6b50 \u6b61 \u6b63 \u6b64 \u6b65 \u6b72 \u6b77 \u6b7b \u6b8a \u6bb5 \u6bcd \u6bcf \u6bd4 \u6c11 \u6c34 \u6c38 \u6c42 \u6c7a \u6c92 \u6cbb \u6cc1 \u6cd5 \u6ce8 \u6d32 \u6d3b \u6d88 \u6df1 \u6e05 \u6e1b \u6e2f \u6e90 \u6e96 \u6e9d \u6eff \u6f38 \u6fdf \u7063 \u70ba \u7121 \u7136 \u71df \u722d \u7236 \u7238 \u7247 \u7260 \u7269 \u7279 \u72c0 \u7372 \u73a9 \u73fe \u7403 \u7406 \u74b0 \u751a \u751f \u7522 \u7528 \u7531 \u7533 \u7537 \u754c \u756b \u7576 \u767c \u7684 \u7686 \u76ee \u76f4 \u76f8 \u770b \u771f \u773e \u77e5 \u7814 \u78ba \u793a \u793e \u795e \u79d1 \u7a0b \u7a2e \u7a4d \u7a76 \u7a7a \u7acb \u7ad9 \u7ae5 \u7b11 \u7b49 \u7b56 \u7ba1 \u7bc0 \u7bc4 \u7c21 \u7cbe \u7cfb \u7d04 \u7d20 \u7d42 \u7d44 \u7d50 \u7d66 \u7d71 \u7d93 \u7dad \u7db2 \u7df4 \u7e3d \u7e3e \u7e54 \u7e7c \u7e8c \u7f3a \u7f8e \u7fa9 \u7fd2 \u8001 \u8003 \u8005 \u800c \u805e \u806f \u8072 \u807d \u80af \u80b2 \u80fd \u8166 \u81c9 \u81ea \u81f3 \u81fa \u8207 \u8208 \u8209 \u822c \u8272 \u82e5 \u8336 \u8457 \u85dd \u8607 \u8655 \u884c \u8853 \u8868 \u88ab \u88e1 \u88fd \u897f \u8981 \u898b \u898f \u8996 \u89aa \u89ba \u89c0 \u89d2 \u89e3 \u8a00 \u8a08 \u8a0a \u8a0e \u8a13 \u8a18 \u8a2d \u8a31 \u8a34 \u8a71 \u8a72 \u8a8d \u8a9e \u8aaa \u8ab0 \u8ab2 \u8abf \u8ac7 \u8acb \u8ad6 \u8b02 \u8b1b \u8b1d \u8b58 \u8b70 \u8b77 \u8b8a \u8b93 \u8c50 \u8c61 \u8ca0 \u8cac \u8cb7 \u8cbb \u8cc7 \u8cea \u8cfd \u8d70 \u8d77 \u8d85 \u8d8a \u8da3 \u8db3 \u8ddf \u8def \u8eab \u8eca \u8edf \u8f03 \u8f15 \u8fa6 \u8fce \u8fd1 \u8ffd \u900f \u9010 \u9019 \u901a \u9020 \u9023 \u9032 \u904b \u904e \u9053 \u9054 \u9060 \u9069 \u9078 \u907f \u9084 \u908a \u90a3 \u90e8 \u90fd \u914d \u91ab \u91cd \u91cf \u91dd \u9280 \u9322 \u932f \u9577 \u958b \u9593 \u95dc \u9644 \u9662 \u9664 \u9678 \u968e \u969b \u96a8 \u96bb \u96d6 \u96d9 \u96e3 \u96fb \u9700 \u975e \u9762 \u9769 \u97f3 \u97ff \u9805 \u9808 \u9817 \u9818 \u982d \u984c \u9858 \u985e \u986f \u9999 \u9a57 \u9ad4 \u9ad8 \u9e97 \u9ebc \u9ede \u9ee8 \u9f13","title":"Chinese"},{"location":"design/characters/#characters","text":"UTF-8 Char Description CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A0 Non-breaking space CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00A1 \u00a1 Inverted exclamation mark ES 00A2 \u00a2 Cent sign 00A3 \u00a3 Pound sign 00A4 \u00a4 Currency sign 00A5 \u00a5 Yen sign 00A6 \u00a6 Broken bar 00A7 \u00a7 Section sign 00A8 \u00a8 Diaeresis 00A9 \u00a9 Copyright sign 00AA \u00aa Feminine Ordinal Indicator 00AB \u00ab Left-pointing double angle quotation mark 00AC \u00ac Not sign 00AD \u00ad Soft hyphen 00AE \u00ae Registered sign 00AF \u00af Macron 00B0 \u00b0 Degree symbol CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B1 \u00b1 Plus-minus sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B2 \u00b2 Superscript two 00B3 \u00b3 Superscript three 00B4 \u00b4 Acute accent DA 00B5 \u00b5 Micro sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B6 \u00b6 Pilcrow sign 00B7 \u00b7 Middle dot CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00B8 \u00b8 Cedilla 00B9 \u00b9 Superscript one 00BA \u00ba Masculine ordinal indicator 00BB \u00bb Right-pointing double-angle quotation mark 00BC \u00bc Vulgar fraction one quarter CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BD \u00bd Vulgar fraction one half CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BE \u00be Vulgar fraction three quarters CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00BF \u00bf Inverted question mark ES 00C0 \u00c0 Capital A with grave PT IT FR 00C1 \u00c1 Capital A with acute HU ES PT FR 00C2 \u00c2 Capital A with circumflex RO NO PT FR 00C3 \u00c3 Capital A with tilde PT 00C4 \u00c4 Capital A with diaeresis DE SV FI DA 00C5 \u00c5 Capital A with ring above SV FI DA NO 00C6 \u00c6 Capital AE DA NO 00C7 \u00c7 Capital C with cedilla PT FR 00C8 \u00c8 Capital E with grave NO IT FR 00C9 \u00c9 Capital E with acute NO HU ES PT IT FR 00CA \u00ca Capital E with circumflex NO PT FR 00CB \u00cb Capital E with diaeresis FR 00CC \u00cc Capital I with grave IT 00CD \u00cd Capital I with acute HU ES PT 00CE \u00ce Capital I with circumflex RO FR 00CF \u00cf Capital I with diaeresis FR 00D0 \u00d0 Capital Eth 00D1 \u00d1 Capital N with tilde ES 00D2 \u00d2 Capital O with grave NO IT 00D3 \u00d3 Capital O with acute NO HU ES PT 00D4 \u00d4 Capital O with circumflex NO PT FR 00D5 \u00d5 Capital O with tilde PT FR 00D6 \u00d6 Capital O with diaeresis DE SV FI DA HU 00D7 \u00d7 Multiplication sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00D8 \u00d8 Capital O with stroke DA NO 00D9 \u00d9 Capital U with grave IT 00DA \u00da Capital U with acute HU ES PT 00DB \u00db Capital U with circumflex 00DC \u00dc Capital U with diaeresis DE DA HU ES PT 00DD \u00dd Capital Y with acute CZ ES 00DE \u00de Capital Thorn 00DF \u00df Small sharp S DE 00E0 \u00e0 Small A with grave PT IT FR 00E1 \u00e1 Small A with acute HU ES PT FR 00E2 \u00e2 Small A with circumflex RO NO PT FR 00E3 \u00e3 Small A with tilde PT 00E4 \u00e4 Small A with diaeresis DE SV FI DA 00E5 \u00e5 Small A with ring above SV FI DA NO 00E6 \u00e6 Small AE DA NO 00E7 \u00e7 Small C with cedilla PT FR 00E8 \u00e8 Small E with grave NO IT FR 00E9 \u00e9 Small E with acute DA NO HU ES PT IT FR 00EA \u00ea Small E with circumflex NO PT FR 00EB \u00eb Small E with diaeresis 00EC \u00ec Small I with grave IT 00ED \u00ed Small I with acute HU ES PT FR 00EE \u00ee Small I with circumflex RO FR 00EF \u00ef Small I with diaeresis FR 00F0 \u00f0 Small Eth 00F1 \u00f1 Small N with tilde ES EN NL 00F2 \u00f2 Small O with grave NO IT 00F3 \u00f3 Small O with acute NO HU ES PT FR 00F4 \u00f4 Small O with circumflex NO PT FR 00F5 \u00f5 Small O with tilde PT 00F6 \u00f6 Small O with diaeresis DE SV FI DA HU 00F7 \u00f7 Division sign CZ RO HR SL DE SV FI DA NO HU ES PT IT FR EN NL 00F8 \u00f8 Small O with stroke DA NO 00F9 \u00f9 Small U with grave IT FR 00FA \u00fa Small U with acute HU ES PT FR 00FB \u00fb Small U with circumflex FR 00FC \u00fc Small U with diaeresis DE DA HU ES PT 00FD \u00fd Small Y with acute ES 00FE \u00fe Small Thorn 00FF \u00ff Small Y with diaeresis 0100 \u0100 Capital A with macron 0101 \u0101 Small A with macron 0102 \u0102 Capital A with breve RO 0103 \u0103 Small A with breve RO 0104 \u0104 Capital A with ogonek 0105 \u0105 Small A with ogonek 0106 \u0106 Capital C with acute 0107 \u0107 Small C with acute 0108 \u0108 Capital C with circumflex 0109 \u0109 Small C with circumflex 010A \u010a Capital C with dot above 010B \u010b Small C with dot above 010C \u010c Capital C with caron SL 010D \u010d Small C with caron SL 010E \u010e Capital D with caron 010F \u010f Small D with caron 0110 \u0110 Capital D with stroke 0111 \u0111 Small D with stroke 0112 \u0112 Capital E with macron 0113 \u0113 Small E with macron 0114 \u0114 Capital E with breve CZ 0115 \u0115 Small E with breve CZ 0116 \u0116 Capital E with dot above 0117 \u0117 Small E with dot above 0118 \u0118 Capital E with ogonek 0119 \u0119 Small E with ogonek 011A \u011a Capital E with caron 011B \u011b Small E with caron 011C \u011c Capital G with circumflex 011D \u011d Small G with circumflex 011E \u011e Capital G with breve 011F \u011f Small G with breve 0120 \u0120 Capital G with dot above 0121 \u0121 Small G with dot above 0122 \u0122 Capital G with cedilla 0123 \u0123 Small G with cedilla 0124 \u0124 Capital H with circumflex 0125 \u0125 Small H with circumflex 0126 \u0126 Capital H with stroke 0127 \u0127 Small H with stroke 0128 \u0128 Capital I with tilde 0129 \u0129 Small I with tilde 012A \u012a Capital I with macron 012B \u012b Small I with macron 012C \u012c Capital I with breve 012D \u012d Small I with breve 012E \u012e Capital I with ogonek 012F \u012f Small I with ogonek 0130 \u0130 Capital I with dot above 0131 \u0131 Small dotless I 0132 \u0132 Capital Ligature IJ 0133 \u0133 Small Ligature IJ 0134 \u0134 Capital J with circumflex 0135 \u0135 Small J with circumflex 0136 \u0136 Capital K with cedilla 0137 \u0137 Small K with cedilla 0138 \u0138 Small Kra 0139 \u0139 Capital L with acute 013A \u013a Small L with acute 013B \u013b Capital L with cedilla 013C \u013c Small L with cedilla 013D \u013d Capital L with caron 013E \u013e Small L with caron 013F \u013f Capital L with middle dot 0140 \u0140 Small L with middle dot 0141 \u0141 Capital L with stroke 0142 \u0142 Small L with stroke 0143 \u0143 Capital N with acute 0144 \u0144 Small N with acute 0145 \u0145 Capital N with cedilla 0146 \u0146 Small N with cedilla 0147 \u0147 Capital N with caron CZ 0148 \u0148 Small N with caron CZ 0149 \u0149 Small N preceded by apostrophe 014A \u014a Capital Eng 014B \u014b Small Eng 014C \u014c Capital O with macron 014D \u014d Small O with macron 014E \u014e Capital O with breve 014F \u014f Small O with breve 0150 \u0150 Capital O with double acute HU 0151 \u0151 Small O with double acute HU 0152 \u0152 Capital Ligature OE FR 0153 \u0153 Small Ligature OE FR 0154 \u0154 Capital R with acute 0155 \u0155 Small R with acute 0156 \u0156 Capital R with cedilla 0157 \u0157 Small R with cedilla 0158 \u0158 Capital R with caron 0159 \u0159 Small R with caron 015A \u015a Capital S with acute 015B \u015b Small S with acute 015C \u015c Capital S with circumflex 015D \u015d Small S with circumflex 015E \u015e Capital S with cedilla RO 015F \u015f Small S with cedilla RO 0160 \u0160 Capital S with caron SL FI 0161 \u0161 Small S with caron SL FI 0162 \u0162 Capital T with cedilla RO 0163 \u0163 Small T with cedilla RO 0164 \u0164 Capital T with caron 0165 \u0165 Small T with caron 0166 \u0166 Capital T with stroke 0167 \u0167 Small T with stroke 0168 \u0168 Capital U with tilde 0169 \u0169 Small U with tilde 016A \u016a Capital U with macron 016B \u016b Small U with macron 016C \u016c Capital U with breve 016D \u016d Small U with breve 016E \u016e Capital U with ring above CZ 016F \u016f Small U with ring above CZ 0170 \u0170 Capital U with double acute HU 0171 \u0171 Small U with double acute HU 0172 \u0172 Capital U with ogonek 0173 \u0173 Small U with ogonek 0174 \u0174 Capital W with circumflex 0175 \u0175 Small W with circumflex 0176 \u0176 Capital Y with circumflex 0177 \u0177 Small Y with circumflex 0178 \u0178 Capital Y with diaeresis 0179 \u0179 Capital Z with acute 017A \u017a Small Z with acute 017B \u017b Capital Z with dot above 017C \u017c Small Z with dot above 017D \u017d Capital Z with caron SL FI 017E \u017e Small Z with caron SL FI 017F \u017f Small long S 01C4 \u01c4 Capital DZ with Caron HR 01C5 \u01c5 Capital D with Small Z with Caron HR 01C6 \u01c6 Small DZ with Caron HR 01C7 \u01c7 Capital LJ HR 01C8 \u01c8 Capital L with Small J HR 01C9 \u01c9 Small LJ HR 01CA \u01ca Capital NJ HR 01CB \u01cb Capital N with Small J HR 01CC \u01cc Small NJ HR 01CD \u01cd Capital A with Caron RO 01CE \u01ce Small A with Caron RO 01CF \u01cf Capital I with Caron 01D0 \u01d0 Small I with Caron 01D1 \u01d1 Capital O with Caron 01D2 \u01d2 Small O with Caron 01D3 \u01d3 Capital U with Caron 01D4 \u01d4 Small U with Caron 01D5 \u01d5 Capital U with Diaeresis and Macron 01D6 \u01d6 Small U with Diaeresis and Macron 01D7 \u01d7 Capital U with Diaeresis and Acute 01D8 \u01d8 Small U with Diaeresis and Acute 01D9 \u01d9 Capital U with Diaeresis and Caron 01DA \u01da Small U with Diaeresis and Caron 01DB \u01db Capital U with Diaeresis and Grave 01DC \u01dc Small U with Diaeresis and Grave 01DD \u01dd Small Turned E 01DE \u01de Capital A with Diaeresis and Macron 01DF \u01df Small A with Diaeresis and Macron 01E0 \u01e0 Capital A with Dot Above and Macron 01E1 \u01e1 Small A with Dot Above and Macron 01E2 \u01e2 Capital AE with Macron 01E3 \u01e3 Small AE with Macron 01E4 \u01e4 Capital G with Stroke 01E5 \u01e5 Small G with Stroke 01E6 \u01e6 Capital G with Caron 01E7 \u01e7 Small G with Caron 01E8 \u01e8 Capital K with Caron 01E9 \u01e9 Small K with Caron 01EA \u01ea Capital O with Ogonek 01EB \u01eb Small O with Ogonek 01EC \u01ec Capital O with Ogonek and Macron 01ED \u01ed Small O with Ogonek and Macron 01EE \u01ee Capital Ezh with Caron 01EF \u01ef Small Ezh with Caron 01F0 \u01f0 Small J with Caron 01F1 \u01f1 Capital DZ 01F2 \u01f2 Capital D with Small Z 01F3 \u01f3 Small DZ 01F4 \u01f4 Capital G with Acute 01F5 \u01f5 Small G with Acute 01F6 \u01f6 Capital Hwair 01F7 \u01f7 Capital Wynn 01F8 \u01f8 Capital N with Grave 01F9 \u01f9 Small N with Grave 01FA \u01fa Capital A with Ring Above and Acute 01FB \u01fb Small A with Ring Above and Acute 01FC \u01fc Capital AE with Acute 01FD \u01fd Small AE with Acute 01FE \u01fe Capital O with Stroke and Acute 01FF \u01ff Small O with Stroke and Acute 0200 \u0200 Capital A with Double Grave HR SL 0201 \u0201 Small A with Double Grave HR SL 0202 \u0202 Capital A with Inverted Breve RO HR SL 0203 \u0203 Small A with Inverted Breve RO HR SL 0204 \u0204 Capital E with Double Grave HR SL 0205 \u0205 Small E with Double Grave HR SL 0206 \u0206 Capital E with Inverted Breve HR SL 0207 \u0207 Small E with Inverted Breve HR SL 0208 \u0208 Capital I with Double Grave HR SL 0209 \u0209 Small I with Double Grave HR SL 020A \u020a Capital I with Inverted Breve RO HR SL 020B \u020b Small I with Inverted Breve RO HR SL 020C \u020c Capital O with Double Grave HR SL 020D \u020d Small O with Double Grave HR SL 020E \u020e Capital O with Inverted Breve HR SL 020F \u020f Small O with Inverted Breve HR SL 0210 \u0210 Capital R with Double Grave HR SL 0211 \u0211 Small R with Double Grave HR SL 0212 \u0212 Capital R with Inverted Breve HR SL 0213 \u0213 Small R with Inverted Breve HR SL 0214 \u0214 Capital U with Double Grave HR SL 0215 \u0215 Small U with Double Grave HR SL 0216 \u0216 Capital U with Inverted Breve HR SL 0217 \u0217 Small U with Inverted Breve HR SL 0218 \u0218 Capital S with Comma Below RO 0219 \u0219 Small S with Comma Below RO 021A \u021a Capital T with Comma Below RO 021B \u021b Small T with Comma Below RO 021C \u021c Capital Yogh 021D \u021d Small Yogh 021E \u021e Capital H with Caron 021F \u021f Small H with Caron 0220 \u0220 Capital N with Long Right Leg 0221 \u0221 Small D with Curl 0222 \u0222 Capital OU 0223 \u0223 Small OU 0224 \u0224 Capital Z with Hook 0225 \u0225 Small Z with Hook 0226 \u0226 Capital A with Dot Above 0227 \u0227 Small A with Dot Above 0228 \u0228 Capital E with Cedilla 0229 \u0229 Small E with Cedilla 022A \u022a Capital O with Diaeresis and Macron 022B \u022b Small O with Diaeresis and Macron 022C \u022c Capital O with Tilde and Macron 022D \u022d Small O with Tilde and Macron 022E \u022e Capital O with Dot Above 022F \u022f Small O with Dot Above 0230 \u0230 Capital O with Dot Above and Macron 0231 \u0231 Small O with Dot Above and Macron 0232 \u0232 Capital Y with Macron 0233 \u0233 Small Y with Macron 0234 \u0234 Small L with Curl 0235 \u0235 Small N with Curl 0236 \u0236 Small T with Curl 0237 \u0237 Small Dotless J 0238 \u0238 Small DB Digraph 0239 \u0239 Small QP Digraph 023A \u023a Capital A with Stroke 023B \u023b Capital C with Stroke 023C \u023c Small C with Stroke 023D \u023d Capital L with Bar 023E \u023e Capital T with Diagonal Stroke 023F \u023f Small S with Swash Tail 0240 \u0240 Small Z with Swash Tail 0241 \u0241 Capital Glottal Stop 0242 \u0242 Small Glottal Stop 0243 \u0243 Capital B with Stroke 0244 \u0244 Capital U Bar 0245 \u0245 Capital Turned V 0246 \u0246 Capital E with Stroke 0247 \u0247 Small E with Stroke 0248 \u0248 Capital J with Stroke 0249 \u0249 Small J with Stroke 024A \u024a Capital Q with Hook Tail 024B \u024b Small Q with Hook Tail 024C \u024c Capital R with Stroke 024D \u024d Small R with Stroke 024E \u024e Capital Y with Stroke 024F \u024f Small Y with Stroke 1E9E \u1e9e Capital Letter Sharp S DE","title":"Characters"},{"location":"design/convert/","text":"Convert JSONL ~ Save a copy of the original code to your computer first, just in case. Paste your jsonl or yaml code into the textarea. Click the convert button to replace the old icon codes to the new UTF-16 format. Copy/paste the code back to your configuration. Warning Convert function convert(){ let ta = document.getElementById(\"jsonl\"); let jsonl = ta.value; let data = JSON.parse('{\"E12C\":[\"DB80\",\"DD2C\"],\"E140\":[\"DB80\",\"DD40\"],\"E141\":[\"DB80\",\"DD41\"],\"E142\":[\"DB80\",\"DD42\"],\"E143\":[\"DB80\",\"DD43\"],\"E156\":[\"DB80\",\"DD56\"],\"E045\":[\"DB80\",\"DC45\"],\"E04D\":[\"DB80\",\"DC4D\"],\"E054\":[\"DB80\",\"DC54\"],\"E05D\":[\"DB80\",\"DC5D\"],\"E2DC\":[\"DB80\",\"DEDC\"],\"E374\":[\"DB80\",\"DF74\"],\"E415\":[\"DB81\",\"DC15\"],\"E717\":[\"DB81\",\"DF17\"],\"E60C\":[\"DB81\",\"DE0C\"],\"E599\":[\"DB81\",\"DD99\"],\"E5A8\":[\"DB81\",\"DDA8\"],\"E335\":[\"DB80\",\"DF35\"],\"E6E8\":[\"DB81\",\"DEE8\"],\"E50F\":[\"DB81\",\"DD0F\"],\"E58E\":[\"DB81\",\"DD8E\"],\"E594\":[\"DB81\",\"DD94\"],\"F40B\":[\"DB85\",\"DC0B\"],\"E5A9\":[\"DB81\",\"DDA9\"],\"E11C\":[\"DB80\",\"DD1C\"],\"E425\":[\"DB81\",\"DC25\"],\"E769\":[\"DB81\",\"DF69\"],\"E81B\":[\"DB82\",\"DC1B\"],\"F0AF\":[\"DB84\",\"DCAF\"],\"E81C\":[\"DB82\",\"DC1C\"],\"E322\":[\"DB80\",\"DF22\"],\"E6A5\":[\"DB81\",\"DEA5\"],\"E150\":[\"DB80\",\"DD50\"],\"F2D4\":[\"DB84\",\"DED4\"],\"F2D3\":[\"DB84\",\"DED3\"],\"F11C\":[\"DB84\",\"DD1C\"],\"F11D\":[\"DB84\",\"DD1D\"],\"F11E\":[\"DB84\",\"DD1E\"],\"E10B\":[\"DB80\",\"DD0B\"],\"E33E\":[\"DB80\",\"DF3E\"],\"EFC6\":[\"DB83\",\"DFC6\"],\"F054\":[\"DB84\",\"DC54\"],\"E70D\":[\"DB81\",\"DF0D\"],\"E99D\":[\"DB82\",\"DD9D\"],\"E01B\":[\"DB80\",\"DC1B\"],\"E026\":[\"DB80\",\"DC26\"],\"E09A\":[\"DB80\",\"DC9A\"],\"E30B\":[\"DB80\",\"DF0B\"],\"E32A\":[\"DB80\",\"DF2A\"],\"E438\":[\"DB81\",\"DC38\"],\"EAD7\":[\"DB82\",\"DED7\"],\"E68A\":[\"DB81\",\"DE8A\"],\"E4AD\":[\"DB81\",\"DCAD\"],\"E4AE\":[\"DB81\",\"DCAE\"],\"E502\":[\"DB81\",\"DD02\"],\"E0AC\":[\"DB80\",\"DCAC\"],\"F011\":[\"DB84\",\"DC11\"],\"E70E\":[\"DB81\",\"DF0E\"],\"E565\":[\"DB81\",\"DD65\"],\"EA70\":[\"DB82\",\"DE70\"],\"E75F\":[\"DB81\",\"DF5F\"],\"E4B9\":[\"DB81\",\"DCB9\"],\"E004\":[\"DB80\",\"DC04\"],\"E2E3\":[\"DB80\",\"DEE3\"],\"E64A\":[\"DB81\",\"DE4A\"],\"E9A0\":[\"DB82\",\"DDA0\"],\"E606\":[\"DB81\",\"DE06\"],\"F020\":[\"DB84\",\"DC20\"],\"E8DD\":[\"DB82\",\"DCDD\"],\"E6B5\":[\"DB81\",\"DEB5\"],\"E456\":[\"DB81\",\"DC56\"],\"E457\":[\"DB81\",\"DC57\"],\"E458\":[\"DB81\",\"DC58\"],\"F1F3\":[\"DB84\",\"DDF3\"],\"E49D\":[\"DB81\",\"DC9D\"],\"E49E\":[\"DB81\",\"DC9E\"],\"E4C3\":[\"DB81\",\"DCC3\"],\"EA7A\":[\"DB82\",\"DE7A\"],\"F1E1\":[\"DB84\",\"DDE1\"],\"E57E\":[\"DB81\",\"DD7E\"],\"E91C\":[\"DB82\",\"DD1C\"],\"E0AF\":[\"DB80\",\"DCAF\"],\"E493\":[\"DB81\",\"DC93\"],\"E210\":[\"DB80\",\"DE10\"],\"E238\":[\"DB80\",\"DE38\"],\"E3E4\":[\"DB80\",\"DFE4\"],\"E40A\":[\"DB81\",\"DC0A\"],\"E4DB\":[\"DB81\",\"DCDB\"],\"E4DE\":[\"DB81\",\"DCDE\"],\"E580\":[\"DB81\",\"DD80\"],\"E72A\":[\"DB81\",\"DF2A\"],\"E917\":[\"DB82\",\"DD17\"],\"EAAC\":[\"DB82\",\"DEAC\"],\"E28F\":[\"DB80\",\"DE8F\"],\"EC99\":[\"DB83\",\"DC99\"],\"E95F\":[\"DB82\",\"DD5F\"],\"E5F1\":[\"DB81\",\"DDF1\"],\"E9AB\":[\"DB82\",\"DDAB\"],\"E58C\":[\"DB81\",\"DD8C\"],\"E176\":[\"DB80\",\"DD76\"],\"F2BA\":[\"DB84\",\"DEBA\"],\"E51B\":[\"DB81\",\"DD1B\"],\"F1DB\":[\"DB84\",\"DDDB\"],\"E08E\":[\"DB80\",\"DC8E\"],\"E6A1\":[\"DB81\",\"DEA1\"],\"E96B\":[\"DB82\",\"DD6B\"],\"E5FA\":[\"DB81\",\"DDFA\"],\"E75A\":[\"DB81\",\"DF5A\"],\"E58F\":[\"DB81\",\"DD8F\"],\"E6C0\":[\"DB81\",\"DEC0\"],\"E6C3\":[\"DB81\",\"DEC3\"],\"F2A3\":[\"DB84\",\"DEA3\"],\"F2A1\":[\"DB84\",\"DEA1\"],\"F2A2\":[\"DB84\",\"DEA2\"],\"E0ED\":[\"DB80\",\"DCED\"],\"E7AE\":[\"DB81\",\"DFAE\"],\"E2DA\":[\"DB80\",\"DEDA\"],\"E1D9\":[\"DB80\",\"DDD9\"],\"E1FA\":[\"DB80\",\"DDFA\"],\"EF5F\":[\"DB83\",\"DF5F\"]}'); for (key in data) { let search = '\\\\\\\\u'+key; let searchRegExp = new RegExp(search, 'gi'); jsonl = jsonl.replaceAll(searchRegExp, '\\\\u'+data[key][0]+'\\\\u'+data[key][1]); } ta.value = jsonl; }","title":"Convert JSONL"},{"location":"design/convert/#convert-jsonl","text":"Save a copy of the original code to your computer first, just in case. Paste your jsonl or yaml code into the textarea. Click the convert button to replace the old icon codes to the new UTF-16 format. Copy/paste the code back to your configuration. Warning Convert function convert(){ let ta = document.getElementById(\"jsonl\"); let jsonl = ta.value; let data = JSON.parse('{\"E12C\":[\"DB80\",\"DD2C\"],\"E140\":[\"DB80\",\"DD40\"],\"E141\":[\"DB80\",\"DD41\"],\"E142\":[\"DB80\",\"DD42\"],\"E143\":[\"DB80\",\"DD43\"],\"E156\":[\"DB80\",\"DD56\"],\"E045\":[\"DB80\",\"DC45\"],\"E04D\":[\"DB80\",\"DC4D\"],\"E054\":[\"DB80\",\"DC54\"],\"E05D\":[\"DB80\",\"DC5D\"],\"E2DC\":[\"DB80\",\"DEDC\"],\"E374\":[\"DB80\",\"DF74\"],\"E415\":[\"DB81\",\"DC15\"],\"E717\":[\"DB81\",\"DF17\"],\"E60C\":[\"DB81\",\"DE0C\"],\"E599\":[\"DB81\",\"DD99\"],\"E5A8\":[\"DB81\",\"DDA8\"],\"E335\":[\"DB80\",\"DF35\"],\"E6E8\":[\"DB81\",\"DEE8\"],\"E50F\":[\"DB81\",\"DD0F\"],\"E58E\":[\"DB81\",\"DD8E\"],\"E594\":[\"DB81\",\"DD94\"],\"F40B\":[\"DB85\",\"DC0B\"],\"E5A9\":[\"DB81\",\"DDA9\"],\"E11C\":[\"DB80\",\"DD1C\"],\"E425\":[\"DB81\",\"DC25\"],\"E769\":[\"DB81\",\"DF69\"],\"E81B\":[\"DB82\",\"DC1B\"],\"F0AF\":[\"DB84\",\"DCAF\"],\"E81C\":[\"DB82\",\"DC1C\"],\"E322\":[\"DB80\",\"DF22\"],\"E6A5\":[\"DB81\",\"DEA5\"],\"E150\":[\"DB80\",\"DD50\"],\"F2D4\":[\"DB84\",\"DED4\"],\"F2D3\":[\"DB84\",\"DED3\"],\"F11C\":[\"DB84\",\"DD1C\"],\"F11D\":[\"DB84\",\"DD1D\"],\"F11E\":[\"DB84\",\"DD1E\"],\"E10B\":[\"DB80\",\"DD0B\"],\"E33E\":[\"DB80\",\"DF3E\"],\"EFC6\":[\"DB83\",\"DFC6\"],\"F054\":[\"DB84\",\"DC54\"],\"E70D\":[\"DB81\",\"DF0D\"],\"E99D\":[\"DB82\",\"DD9D\"],\"E01B\":[\"DB80\",\"DC1B\"],\"E026\":[\"DB80\",\"DC26\"],\"E09A\":[\"DB80\",\"DC9A\"],\"E30B\":[\"DB80\",\"DF0B\"],\"E32A\":[\"DB80\",\"DF2A\"],\"E438\":[\"DB81\",\"DC38\"],\"EAD7\":[\"DB82\",\"DED7\"],\"E68A\":[\"DB81\",\"DE8A\"],\"E4AD\":[\"DB81\",\"DCAD\"],\"E4AE\":[\"DB81\",\"DCAE\"],\"E502\":[\"DB81\",\"DD02\"],\"E0AC\":[\"DB80\",\"DCAC\"],\"F011\":[\"DB84\",\"DC11\"],\"E70E\":[\"DB81\",\"DF0E\"],\"E565\":[\"DB81\",\"DD65\"],\"EA70\":[\"DB82\",\"DE70\"],\"E75F\":[\"DB81\",\"DF5F\"],\"E4B9\":[\"DB81\",\"DCB9\"],\"E004\":[\"DB80\",\"DC04\"],\"E2E3\":[\"DB80\",\"DEE3\"],\"E64A\":[\"DB81\",\"DE4A\"],\"E9A0\":[\"DB82\",\"DDA0\"],\"E606\":[\"DB81\",\"DE06\"],\"F020\":[\"DB84\",\"DC20\"],\"E8DD\":[\"DB82\",\"DCDD\"],\"E6B5\":[\"DB81\",\"DEB5\"],\"E456\":[\"DB81\",\"DC56\"],\"E457\":[\"DB81\",\"DC57\"],\"E458\":[\"DB81\",\"DC58\"],\"F1F3\":[\"DB84\",\"DDF3\"],\"E49D\":[\"DB81\",\"DC9D\"],\"E49E\":[\"DB81\",\"DC9E\"],\"E4C3\":[\"DB81\",\"DCC3\"],\"EA7A\":[\"DB82\",\"DE7A\"],\"F1E1\":[\"DB84\",\"DDE1\"],\"E57E\":[\"DB81\",\"DD7E\"],\"E91C\":[\"DB82\",\"DD1C\"],\"E0AF\":[\"DB80\",\"DCAF\"],\"E493\":[\"DB81\",\"DC93\"],\"E210\":[\"DB80\",\"DE10\"],\"E238\":[\"DB80\",\"DE38\"],\"E3E4\":[\"DB80\",\"DFE4\"],\"E40A\":[\"DB81\",\"DC0A\"],\"E4DB\":[\"DB81\",\"DCDB\"],\"E4DE\":[\"DB81\",\"DCDE\"],\"E580\":[\"DB81\",\"DD80\"],\"E72A\":[\"DB81\",\"DF2A\"],\"E917\":[\"DB82\",\"DD17\"],\"EAAC\":[\"DB82\",\"DEAC\"],\"E28F\":[\"DB80\",\"DE8F\"],\"EC99\":[\"DB83\",\"DC99\"],\"E95F\":[\"DB82\",\"DD5F\"],\"E5F1\":[\"DB81\",\"DDF1\"],\"E9AB\":[\"DB82\",\"DDAB\"],\"E58C\":[\"DB81\",\"DD8C\"],\"E176\":[\"DB80\",\"DD76\"],\"F2BA\":[\"DB84\",\"DEBA\"],\"E51B\":[\"DB81\",\"DD1B\"],\"F1DB\":[\"DB84\",\"DDDB\"],\"E08E\":[\"DB80\",\"DC8E\"],\"E6A1\":[\"DB81\",\"DEA1\"],\"E96B\":[\"DB82\",\"DD6B\"],\"E5FA\":[\"DB81\",\"DDFA\"],\"E75A\":[\"DB81\",\"DF5A\"],\"E58F\":[\"DB81\",\"DD8F\"],\"E6C0\":[\"DB81\",\"DEC0\"],\"E6C3\":[\"DB81\",\"DEC3\"],\"F2A3\":[\"DB84\",\"DEA3\"],\"F2A1\":[\"DB84\",\"DEA1\"],\"F2A2\":[\"DB84\",\"DEA2\"],\"E0ED\":[\"DB80\",\"DCED\"],\"E7AE\":[\"DB81\",\"DFAE\"],\"E2DA\":[\"DB80\",\"DEDA\"],\"E1D9\":[\"DB80\",\"DDD9\"],\"E1FA\":[\"DB80\",\"DDFA\"],\"EF5F\":[\"DB83\",\"DF5F\"]}'); for (key in data) { let search = '\\\\\\\\u'+key; let searchRegExp = new RegExp(search, 'gi'); jsonl = jsonl.replaceAll(searchRegExp, '\\\\u'+data[key][0]+'\\\\u'+data[key][1]); } ta.value = jsonl; }","title":"Convert JSONL"},{"location":"design/data-types/","text":"Data Types ~ There are 5 major data types that openHASP uses when communicating over MQTT: Boolean ~ Properties with a boolean data type accept these values and are case insensitive: true / ON / 1 / yes false / OFF / 0 / no The return value will be either 1 / 0 or on / off depending on the context. Integer ~ Numeric properties have integer values with a variable minimum and maximum input value. Certain object properties also support negative values. Details int8 (signed) supports values ranging from -128 to 127. uint8 (unsigned) supports values ranging from 0 to 255. int16 (signed) supports values ranging from -32768 to 32767. uint16 (unsigned) supports values ranging from 0 to 65535. String ~ Properties that accept textual input. When sending raw text in the MQTT payload or as command parameter no quotes are needed. Only when a text value is included in a jsonl or json command, it needs to be quoted accoring to JSON rules. JSON Object ~ Some properties can be set or retrieved in JSON format too. The JSON object has several keys that have a boolean, integer or string data type. Example: {\"cover\":\"cover.my_room\",\"position\":\"50\"} Colors ~ Color values can be: Short names (from table below) RGB hex code ( #rrggbb ) Short hex code ( #rgb ) RGB565 number format ( 0..65535 ) Hex Code Short Name Hex Code Short Name #00FFFF Cyan or Aqua #FFC0CB Pink #00FF00 Lime #DDA0DD Plum #008000 Green #DA70D6 Orchid #008080 Teal #EE82EE Violet #0000FF Blue #FF00FF Magenta or Fuchsia #000080 Navy #800080 Purple #808000 Olive #4B0082 Indigo #CD853F Peru #B00000 Blush #A0522D Sienna #FF0000 Red #A52A2A Brown #FF6347 Tomato #800000 Maroon #FA8072 Salmon #FFFFFF White #FF7F50 Coral #FFFAFA Snow #FFA500 Orange #FFFFF0 Ivory #FFD700 Gold #FAF0E6 Linen #FFFF00 Yellow #F5F5DC Beige #F0E68C Khaki #F0FFFF Azure #FFE4C4 Bisque #C0C0C0 Silver #F5DEB3 Wheat #808080 Gray or Grey #D2B48C Tan #000000 Black Setting Color ~ Examples: 1 2 3 4 p 0 b 2. value_color= 13891 p 1 b 5. te x t _color=silver p 2 b 3. bg_color=#C 042 A 3 p 2 b 4. border_color=# 9 f 9 Return values ~ When retrieving the color of an object, both the HTML representation as the RGB values are returned separately. The format will be a json object with components: color : 6 digit hexadecimal code preceeded by a hash # sign. r : byte value for red ( 0..255 ) g : byte value for green ( 0..255 ) b : byte value for blue ( 0..255 ) For example, the color returned by a color picker change event is: 1 { \"color\" : \"#00fff6\" , \"r\" : 0 , \"g\" : 255 , \"b\" : 246 } Variables ~ Some properties can be set with variable data at plate runtime. Use the strings below to retrieve data: %ip% - IP address of the plate %hostname% - hostname (nodename) %ssid% - SSID of the network connected to %model% - plate model (set in the firmware) %version% - firmware version number","title":"Data Types"},{"location":"design/data-types/#data-types","text":"There are 5 major data types that openHASP uses when communicating over MQTT:","title":"Data Types"},{"location":"design/data-types/#boolean","text":"Properties with a boolean data type accept these values and are case insensitive: true / ON / 1 / yes false / OFF / 0 / no The return value will be either 1 / 0 or on / off depending on the context.","title":"Boolean"},{"location":"design/data-types/#integer","text":"Numeric properties have integer values with a variable minimum and maximum input value. Certain object properties also support negative values. Details int8 (signed) supports values ranging from -128 to 127. uint8 (unsigned) supports values ranging from 0 to 255. int16 (signed) supports values ranging from -32768 to 32767. uint16 (unsigned) supports values ranging from 0 to 65535.","title":"Integer"},{"location":"design/data-types/#string","text":"Properties that accept textual input. When sending raw text in the MQTT payload or as command parameter no quotes are needed. Only when a text value is included in a jsonl or json command, it needs to be quoted accoring to JSON rules.","title":"String"},{"location":"design/data-types/#json-object","text":"Some properties can be set or retrieved in JSON format too. The JSON object has several keys that have a boolean, integer or string data type. Example: {\"cover\":\"cover.my_room\",\"position\":\"50\"}","title":"JSON Object"},{"location":"design/data-types/#colors","text":"Color values can be: Short names (from table below) RGB hex code ( #rrggbb ) Short hex code ( #rgb ) RGB565 number format ( 0..65535 ) Hex Code Short Name Hex Code Short Name #00FFFF Cyan or Aqua #FFC0CB Pink #00FF00 Lime #DDA0DD Plum #008000 Green #DA70D6 Orchid #008080 Teal #EE82EE Violet #0000FF Blue #FF00FF Magenta or Fuchsia #000080 Navy #800080 Purple #808000 Olive #4B0082 Indigo #CD853F Peru #B00000 Blush #A0522D Sienna #FF0000 Red #A52A2A Brown #FF6347 Tomato #800000 Maroon #FA8072 Salmon #FFFFFF White #FF7F50 Coral #FFFAFA Snow #FFA500 Orange #FFFFF0 Ivory #FFD700 Gold #FAF0E6 Linen #FFFF00 Yellow #F5F5DC Beige #F0E68C Khaki #F0FFFF Azure #FFE4C4 Bisque #C0C0C0 Silver #F5DEB3 Wheat #808080 Gray or Grey #D2B48C Tan #000000 Black","title":"Colors"},{"location":"design/data-types/#setting-color","text":"Examples: 1 2 3 4 p 0 b 2. value_color= 13891 p 1 b 5. te x t _color=silver p 2 b 3. bg_color=#C 042 A 3 p 2 b 4. border_color=# 9 f 9","title":"Setting Color"},{"location":"design/data-types/#return-values","text":"When retrieving the color of an object, both the HTML representation as the RGB values are returned separately. The format will be a json object with components: color : 6 digit hexadecimal code preceeded by a hash # sign. r : byte value for red ( 0..255 ) g : byte value for green ( 0..255 ) b : byte value for blue ( 0..255 ) For example, the color returned by a color picker change event is: 1 { \"color\" : \"#00fff6\" , \"r\" : 0 , \"g\" : 255 , \"b\" : 246 }","title":"Return values"},{"location":"design/data-types/#variables","text":"Some properties can be set with variable data at plate runtime. Use the strings below to retrieve data: %ip% - IP address of the plate %hostname% - hostname (nodename) %ssid% - SSID of the network connected to %model% - plate model (set in the firmware) %version% - firmware version number","title":"Variables"},{"location":"design/file-editor/","text":"File Editor ~ There is a file browser included in the web UI of the plate. You can use it to upload, edit, download and delete files on the flash partition of the ESP32. Click on the File Editor button on the Main Webpage: Upload Files ~ Create Files ~ Type a new filename into the path field and click the Create button. The file will appear in the filelist. For example, type /pages.jsonl and click Create button. Edit Files ~ To change the Font size or settings of the Editor, click inside the text field and type F1 . Save Files ~ To save changes in the File Editor to flash type Ctrl + S on a PC or Cmd + S on Mac. Delete Files ~ Right-click on any file in the list and select Delete from the pop-up menu to remove that file from the ESP32 filesystem.","title":"File Editor"},{"location":"design/file-editor/#file-editor","text":"There is a file browser included in the web UI of the plate. You can use it to upload, edit, download and delete files on the flash partition of the ESP32. Click on the File Editor button on the Main Webpage:","title":"File Editor"},{"location":"design/file-editor/#upload-files","text":"","title":"Upload Files"},{"location":"design/file-editor/#create-files","text":"Type a new filename into the path field and click the Create button. The file will appear in the filelist. For example, type /pages.jsonl and click Create button.","title":"Create Files"},{"location":"design/file-editor/#edit-files","text":"To change the Font size or settings of the Editor, click inside the text field and type F1 .","title":"Edit Files"},{"location":"design/file-editor/#save-files","text":"To save changes in the File Editor to flash type Ctrl + S on a PC or Cmd + S on Mac.","title":"Save Files"},{"location":"design/file-editor/#delete-files","text":"Right-click on any file in the list and select Delete from the pop-up menu to remove that file from the ESP32 filesystem.","title":"Delete Files"},{"location":"design/fonts/","text":".md-typeset table:not([class]) td { padding: 0.5em 0.25m; line-height: 1.25; vertical-align: middle; } .md-typeset table:not([class]) th { min-width: 5%; padding: 0.5em 0.25m; } th:nth-child(3n+1) { width: 8%; text-align: center;} th:nth-child(3n+2) { width: 8%; text-align: center;} th:nth-child(3n+3) { width: 34%; text-align: left; } td:nth-child(3n+2) { white-space: nowrap; } Fonts ~ Built-in ~ The ESP32 firmware includes these built-in fonts: Unscii with font size 8pt Roboto Condensed only in these fixed font sizes 12, 16, 24 and 32pt Roboto Condensed TrueType font , i.e. any size can be set as of 0.7.0 The default font in pre-compiled binaries is Roboto-Condensed-Regular which includes these character sets: Ascii , Cyrillic , Latin-1 , Latin-2 , Greek and Viernamese . It also includes 146 MaterialDesign icons listed below. The built-in fonts can be set by using the pointsize as parameter. For example: 1 2 3 p 4 b 1. te x t _ f o nt = 24 p 4 b 2. value_ f o nt = 12 p 4 b 3. te x t _ f o nt = 64 < -- Uses t he TrueType f o nt Note On Devices that do not have PSRAM, you may notice that changing pages/drawing new pages may take a bit longer on version 0.7.0 . Icons ~ The icons in the list below are included with the built-in font sizes. Included are a range of arrows, navigation, climate, controls, devices, energy, lights, places, presence, security, sound, time and wireless icons. Icon Code Name Icon Code Name E045 arrow-down F2A3 battery-high E6C0 arrow-down-box F2A1 battery-low E04D arrow-left F2A2 battery-medium E054 arrow-right E08E battery-outline E05D arrow-up E5F1 ev-station E6C3 arrow-up-box E32A leaf E140 chevron-down F40B lightning-bolt E141 chevron-left E425 power E142 chevron-right E6A5 power-plug E143 chevron-up E769 ceiling-light E60C subdirectory-arrow-left F020 coach-lamp E01B air-conditioner E95F desk-lamp E957 cloud-search-outline E8DD floor-lamp E238 fire E6B5 lamp E438 radiator E335 lightbulb EAD7 radiator-disabled E6E8 lightbulb-on E717 snowflake F054 outdoor-lamp E50F thermometer F2BA string-lights E58C water F1E1 vanity-light E58E water-percent E91C wall-sconce E590 weather-cloudy E12C check E591 weather-fog E156 close E592 weather-hail E493 cog E593 weather-lightning E1D9 dots-vertical E67E weather-lightning-rainy E2DC home E594 weather-night E6A1 home-outline E595 weather-partly-cloudy E374 minus E596 weather-pouring E415 plus E597 weather-rainy E2E3 bed E598 weather-snowy E10B car E67F weather-snowy-rainy E176 coffee E599 weather-sunny E606 pool E59D weather-windy E9A0 shower E59E weather-windy-variant EA70 silverware-fork-knife E5A8 white-balance-sunny E4B9 sofa E0ED calendar E9AB toilet E150 clock-outline E004 account E2DA history E64A human-greeting E51B timer-outline E70E run E0AF bluetooth E026 alert E5A9 wifi E7AE cctv E0AC blinds E81B door-closed F011 blinds-open F0AF door-closed-lock F2D4 garage-open-variant E81C door-open F2D3 garage-variant E30B key-variant F11C window-shutter E33E lock F11D window-shutter-alert EFC6 lock-open-variant F11E window-shutter-open E565 shield-check E09A bell E68A shield-home E11C cellphone E99D shield-lock EAAC dishwasher F1DB window-closed-variant E1FA engine EF5F monitor-speaker E210 fan E75A music E96B fountain E3E4 pause E28F fridge-outline E40A play E5FA kettle E456 repeat E322 laptop E457 repeat-off EC99 microwave E458 repeat-once F39D recycle-variant E49D shuffle F1F3 robot-mower-outline E49E shuffle-disabled E70D robot-vacuum E4AD skip-next E4DE stove E4AE skip-previous E502 television E4C3 speaker EA7A trash-can-outline E4DB stop E917 tumble-dryer E57E volume-high E72A washing-machine E580 volume-medium E58F water-pump E75F volume-mute Custom Fonts ~ TrueType ~ Warning You should only load TTF fonts on a device that has PSRAM You can use any TrueType font containing characters or icons. Upload any .ttf (in lowercase) TrueType font file to the flash partition of your plate. If you want to use other styles than Regular like Italic or Bold, make sure you use a font which provides separate, optimized versions for these. You can upload and use multiple font files, but within a property you can only select one font. In the jsonl code use the filename of the font without the extension and the desired font size added to it. So for example to have a text rendered in Arial 20px, you upload arial.ttf to the plate and use \"text_font\":\"arial20\" or command p1b2.text_font=arial20 . Note If you get an error when you upload the TTF file to the plate, make sure to use shorter filenames. Tip You can use different fonts for different properties of the same objects, like \"text_font\":\"mdi32\",\"value_font\":\"robotocondensed19\" . To use MDI icons, get the latest webfont build from their site . From the unzipped archive you need the .ttf Warning Use as few as possible separate TTF fonts in parrallel, because each of them is loaded in memory, which will exhaust faster. With the open source FontForge tool you can combine glyphs and icons from different fonts into one single TTF file and create your custom collection based on your needs. Binary ~ With the online Font Converter tool you can create binary font files from any TTF, OTF or WOFF font. You can select custom ranges of Unicode characters and specify the bpp (bits-per-pixel). The font converter is designed to be compatible with LVGL. An offline version of the converter is also available here . Online Font Converter ~ How to use the font converter? Give a name to the binary font. E.g. \"arial_20\" Specify the height in pixels Set the bpp (bits-per-pixel). Higher values result in a smoother (anti-aliased) font but will require more flash and memory. Choose a TTF, OTF or WOFF source font file Set a range of Unicode characters to include in your font or list the characters in the Symbols field Optionally choose another font too and specify the ranges and/or symbols for it as well. The characters will be merged into the final binary font. Click the Convert button to download the resulting .bin file. Name Size Bpp 1 bit-per-pixel 2 bit-per-pixel 3 bit-per-pixel (Needs compression enabled) 4 bit-per-pixel 8 bit-per-pixel Enable font compression (reduces size) No subpixel hinting Horizontal subpixel hinting (may improve font quality, requires 6.1+) Vertical subpixel hinting Try to use glyph color info from font to create grayscale icons. Since gray tones are emulated via transparency, result will be good on contrast background only. Source font Ranges & Codepoints Symbols & Characters You can use both \"Ranges\" and \"Symbols\" or only one of them Include another font Usage ~ Upload the resulting arial_20.bin binary font file to the flash partition of your plate. In the jsonl code use \"text_font\":\"arial_20\" without the extension or use command p1b2.text_font=arial_20 Warning The entire binary font is cached into memory when it is first used. PSram is highly recommended to use binary fonts. Note If both a arial_20.bin and arial.ttf file are present, the binary file is prefered over the TrueType file. Encoding ~ The encoding of the icons depends on how they are sent to the plate: 1. As JSON payload ~ To use an icon in a json or jsonl payload you need to prefix the UTF-8 character code with \\u . ArduinoJSON will correctly decode the text into it's UTF-8 representation while parsing the JSON object: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } json example: 1 [ \"p2b1.text=\\uE64A Hello world!\" ] If the icon codepoint is larger than 0xFFFF you need to convert the codepoint to its surrogate pair first! Then include both UTF-16 surrogate characters in the payload like this: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uDB81\\uDC25 Hello world!\" } json example: 1 [ \"p2b1.text=\\uDB81\\uDC25 Hello world!\" ] 2. As raw payload ~ Raw payloads are directly passed to the LVGL text rendering engine without any conversion on the MCU. You need to make sure the string is properly encoded into UTF-8 by the application sending the payload ! How this is accomplished depends on the Home Automation tool: Home Assistant ~ Code points up to 0xFFFF should be encoded as \"\\uE6E8\" in the template. Note: Use lowercase \\u and exactly 4 hexadecimal digits. Code points above 0xFFFF must be encoded as \"\\U0001F5E9\" in the template. Note: Use capital \\U and exactly 8 hexadecimal digits. At the end of the template you must indicate that Home Assistant needs encoded the string before sending it by appending |e (pipe symbol + e ) at the end. 1 2 3 - obj : \"p1b2\" # light-switch toggle button properties : \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.x\",\"on\") else \"\\U0001F5E9\" |e }}' Tip For MDI icons, use this modified cheatsheet to get the raw and the surrogate paired codepoints ready to use. Note that the cheatsheet may not contain the very latest icons. Character Sets ~ The characters are encoded in UTF-8. All character sets include the Ascii 0x20-0x7E characters, the non-braking-space ( NBSP ) and 12 universal symbols. Each set contains roughly the same extended characters from its equivalent iso-8859 standard . All character sets also contain about 130 standard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts. For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands. Ascii ~ Includes all ASCII 0x20-0x7E characters extended with a non-breaking space and 10 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022 \u2030 \u2031 Latin 1 ~ Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Albanian (sq), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e Latin 2 ~ Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian (sb) \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b Cyrillic ~ Covers the Slavic languages that use a Cyrillic alphabet, including Belarusian, Bulgarian, Macedonian, Russian, Serbian, and Ukrainian \u0400 \u0401 \u0402 \u0403 \u0404 \u0405 \u0406 \u0407 \u0408 \u0409 \u040a \u040b \u040c \u040d \u040e \u040f \u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416 \u0417 \u0418 \u0419 \u041a \u041b \u041c \u041d \u041e \u041f \u0420 \u0421 \u0422 \u0423 \u0424 \u0425 \u0426 \u0427 \u0428 \u0429 \u042a \u042b \u042c \u042d \u042e \u042f \u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436 \u0437 \u0438 \u0439 \u043a \u043b \u043c \u043d \u043e \u043f \u0440 \u0441 \u0442 \u0443 \u0444 \u0445 \u0446 \u0447 \u0448 \u0449 \u044a \u044b \u044c \u044d \u044e \u044f \u0450 \u0451 \u0452 \u0453 \u0454 \u0455 \u0456 \u0457 \u0458 \u0459 \u045a \u045b \u045c \u045d \u045e \u045f Greek ~ Covers the Greek (el) language: \u0386 \u0388 \u0389 \u038a \u038c \u038e \u038f \u0390 \u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397 \u0398 \u0399 \u039a \u039b \u039c \u039d \u039e \u039f \u03a0 \u03a1 \u03a3 \u03a4 \u03a5 \u03a6 \u03a7 \u03a8 \u03a9 \u03ac \u03ad \u03ae \u03af \u03b0 \u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7 \u03b8 \u03b9 \u03ba \u03bb \u03bc \u03bd \u03be \u03bf \u03c0 \u03c1 \u03c2 \u03c3 \u03c4 \u03c5 \u03c6 \u03c7 \u03c8 \u03c9 \u03ca \u03cb \u03cc \u03cd \u03ce Vietnamese ~ Covers the Vietnamese (vi) language: \u00c1 \u00c0 \u00c2 \u0102 \u00c3 \u1ea4 \u1ea6 \u1eae \u1eb0 \u1eaa \u1eb4 \u1ea2 \u1ea8 \u1eb2 \u1ea0 \u1eac \u1eb6 \u0110 \u00c9 \u00c8 \u00ca \u1ebc \u1ebe \u1ec0 \u1ec4 \u1eba \u1ec2 \u1eb8 \u1ec6 \u00cd \u00cc \u0128 \u1ec8 \u1eca \u00d3 \u00d2 \u00d4 \u00d5 \u1ed0 \u1ed2 \u1ed6 \u1ece \u01a0 \u1ed4 \u1ecc \u1eda \u1edc \u1ee0 \u1ed8 \u1ede \u1ee2 \u00da \u00d9 \u0168 \u1ee6 \u01af \u1ee4 \u1ee8 \u1eea \u1eee \u1eec \u1ef0 \u00dd \u1ef2 \u1ef8 \u1ef6 \u1ef4 \u00e1 \u00e0 \u00e2 \u0103 \u00e3 \u1ea5 \u1ea7 \u1eaf \u1eb1 \u1eab \u1eb5 \u1ea3 \u1ea9 \u1eb3 \u1ea1 \u1ead \u1eb7 \u0111 \u00e9 \u00e8 \u00ea \u1ebd \u1ebf \u1ec1 \u1ec5 \u1ebb \u1ec3 \u1eb9 \u1ec7 \u00ed \u00ec \u0129 \u1ec9 \u1ecb \u00f3 \u00f2 \u00f4 \u00f5 \u1ed1 \u1ed3 \u1ed7 \u1ecf \u01a1 \u1ed5 \u1ecd \u1edb \u1edd \u1ee1 \u1ed9 \u1edf \u1ee3 \u00fa \u00f9 \u0169 \u1ee7 \u01b0 \u1ee5 \u1ee9 \u1eeb \u1eef \u1eed \u1ef1 \u00fd \u1ef3 \u1ef9 \u1ef7 \u1ef5 \u20ab","title":"Fonts"},{"location":"design/fonts/#fonts","text":"","title":"Fonts"},{"location":"design/fonts/#built-in","text":"The ESP32 firmware includes these built-in fonts: Unscii with font size 8pt Roboto Condensed only in these fixed font sizes 12, 16, 24 and 32pt Roboto Condensed TrueType font , i.e. any size can be set as of 0.7.0 The default font in pre-compiled binaries is Roboto-Condensed-Regular which includes these character sets: Ascii , Cyrillic , Latin-1 , Latin-2 , Greek and Viernamese . It also includes 146 MaterialDesign icons listed below. The built-in fonts can be set by using the pointsize as parameter. For example: 1 2 3 p 4 b 1. te x t _ f o nt = 24 p 4 b 2. value_ f o nt = 12 p 4 b 3. te x t _ f o nt = 64 < -- Uses t he TrueType f o nt Note On Devices that do not have PSRAM, you may notice that changing pages/drawing new pages may take a bit longer on version 0.7.0 .","title":"Built-in"},{"location":"design/fonts/#icons","text":"The icons in the list below are included with the built-in font sizes. Included are a range of arrows, navigation, climate, controls, devices, energy, lights, places, presence, security, sound, time and wireless icons. Icon Code Name Icon Code Name E045 arrow-down F2A3 battery-high E6C0 arrow-down-box F2A1 battery-low E04D arrow-left F2A2 battery-medium E054 arrow-right E08E battery-outline E05D arrow-up E5F1 ev-station E6C3 arrow-up-box E32A leaf E140 chevron-down F40B lightning-bolt E141 chevron-left E425 power E142 chevron-right E6A5 power-plug E143 chevron-up E769 ceiling-light E60C subdirectory-arrow-left F020 coach-lamp E01B air-conditioner E95F desk-lamp E957 cloud-search-outline E8DD floor-lamp E238 fire E6B5 lamp E438 radiator E335 lightbulb EAD7 radiator-disabled E6E8 lightbulb-on E717 snowflake F054 outdoor-lamp E50F thermometer F2BA string-lights E58C water F1E1 vanity-light E58E water-percent E91C wall-sconce E590 weather-cloudy E12C check E591 weather-fog E156 close E592 weather-hail E493 cog E593 weather-lightning E1D9 dots-vertical E67E weather-lightning-rainy E2DC home E594 weather-night E6A1 home-outline E595 weather-partly-cloudy E374 minus E596 weather-pouring E415 plus E597 weather-rainy E2E3 bed E598 weather-snowy E10B car E67F weather-snowy-rainy E176 coffee E599 weather-sunny E606 pool E59D weather-windy E9A0 shower E59E weather-windy-variant EA70 silverware-fork-knife E5A8 white-balance-sunny E4B9 sofa E0ED calendar E9AB toilet E150 clock-outline E004 account E2DA history E64A human-greeting E51B timer-outline E70E run E0AF bluetooth E026 alert E5A9 wifi E7AE cctv E0AC blinds E81B door-closed F011 blinds-open F0AF door-closed-lock F2D4 garage-open-variant E81C door-open F2D3 garage-variant E30B key-variant F11C window-shutter E33E lock F11D window-shutter-alert EFC6 lock-open-variant F11E window-shutter-open E565 shield-check E09A bell E68A shield-home E11C cellphone E99D shield-lock EAAC dishwasher F1DB window-closed-variant E1FA engine EF5F monitor-speaker E210 fan E75A music E96B fountain E3E4 pause E28F fridge-outline E40A play E5FA kettle E456 repeat E322 laptop E457 repeat-off EC99 microwave E458 repeat-once F39D recycle-variant E49D shuffle F1F3 robot-mower-outline E49E shuffle-disabled E70D robot-vacuum E4AD skip-next E4DE stove E4AE skip-previous E502 television E4C3 speaker EA7A trash-can-outline E4DB stop E917 tumble-dryer E57E volume-high E72A washing-machine E580 volume-medium E58F water-pump E75F volume-mute","title":"Icons"},{"location":"design/fonts/#custom-fonts","text":"","title":"Custom Fonts"},{"location":"design/fonts/#truetype","text":"Warning You should only load TTF fonts on a device that has PSRAM You can use any TrueType font containing characters or icons. Upload any .ttf (in lowercase) TrueType font file to the flash partition of your plate. If you want to use other styles than Regular like Italic or Bold, make sure you use a font which provides separate, optimized versions for these. You can upload and use multiple font files, but within a property you can only select one font. In the jsonl code use the filename of the font without the extension and the desired font size added to it. So for example to have a text rendered in Arial 20px, you upload arial.ttf to the plate and use \"text_font\":\"arial20\" or command p1b2.text_font=arial20 . Note If you get an error when you upload the TTF file to the plate, make sure to use shorter filenames. Tip You can use different fonts for different properties of the same objects, like \"text_font\":\"mdi32\",\"value_font\":\"robotocondensed19\" . To use MDI icons, get the latest webfont build from their site . From the unzipped archive you need the .ttf Warning Use as few as possible separate TTF fonts in parrallel, because each of them is loaded in memory, which will exhaust faster. With the open source FontForge tool you can combine glyphs and icons from different fonts into one single TTF file and create your custom collection based on your needs.","title":"TrueType "},{"location":"design/fonts/#binary","text":"With the online Font Converter tool you can create binary font files from any TTF, OTF or WOFF font. You can select custom ranges of Unicode characters and specify the bpp (bits-per-pixel). The font converter is designed to be compatible with LVGL. An offline version of the converter is also available here .","title":"Binary"},{"location":"design/fonts/#encoding","text":"The encoding of the icons depends on how they are sent to the plate:","title":"Encoding"},{"location":"design/fonts/#1-as-json-payload","text":"To use an icon in a json or jsonl payload you need to prefix the UTF-8 character code with \\u . ArduinoJSON will correctly decode the text into it's UTF-8 representation while parsing the JSON object: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } json example: 1 [ \"p2b1.text=\\uE64A Hello world!\" ] If the icon codepoint is larger than 0xFFFF you need to convert the codepoint to its surrogate pair first! Then include both UTF-16 surrogate characters in the payload like this: jsonl example: 1 { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"label\" , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uDB81\\uDC25 Hello world!\" } json example: 1 [ \"p2b1.text=\\uDB81\\uDC25 Hello world!\" ]","title":"1. As JSON payload"},{"location":"design/fonts/#2-as-raw-payload","text":"Raw payloads are directly passed to the LVGL text rendering engine without any conversion on the MCU. You need to make sure the string is properly encoded into UTF-8 by the application sending the payload ! How this is accomplished depends on the Home Automation tool:","title":"2. As raw payload"},{"location":"design/fonts/#character-sets","text":"The characters are encoded in UTF-8. All character sets include the Ascii 0x20-0x7E characters, the non-braking-space ( NBSP ) and 12 universal symbols. Each set contains roughly the same extended characters from its equivalent iso-8859 standard . All character sets also contain about 130 standard Material Design Icons for home automation use. The default font in pre-compiled binaries is Roboto-Condensed-Regular with the Latin 1 character set. There is no support for right-to-left scripts. For example: To display the \u00f7 character on the plate you need to use \\u00F7 in json or jsonl commands, or send the encoded UTF-8 bytes 0xC3 0xB7 in other commands.","title":"Character Sets"},{"location":"design/fonts/#ascii","text":"Includes all ASCII 0x20-0x7E characters extended with a non-breaking space and 10 universal symbols: NBSP \u00a3 \u00b0 \u00b1 \u00b2 \u00b3 \u00b5 \u00d7 \u00f7 \u20ac \u2022 \u2030 \u2031","title":"Ascii"},{"location":"design/fonts/#latin-1","text":"Covers Northern, Western and Southern European languages: English (en), French (fr), Spanish (es), Portuguese (pt), Italian (it), Dutch (nl), German (de), Danish (da), Swedish (sv), Norwegian (no), Finnish (fi), Albanian (sq), Turkish (tr) \u00a1 \u00bf \u00c0 \u00c1 \u00c2 \u00c3 \u00c4 \u00c5 \u00c6 \u00c7 \u00c8 \u00c9 \u00ca \u00cb \u00cc \u00cd \u00ce \u00cf \u00d1 \u00d2 \u00d3 \u00d4 \u00d5 \u00d6 \u00d8 \u00d9 \u00da \u00db \u00dc \u00dd \u00de \u00df \u00e0 \u00e1 \u00e2 \u00e3 \u00e4 \u00e5 \u00e6 \u00e7 \u00e8 \u00e9 \u00ea \u00eb \u00ec \u00ed \u00ee \u00ef \u00f0 \u00f1 \u00f2 \u00f3 \u00f4 \u00f5 \u00f6 \u00f8 \u00f9 \u00fa \u00fb \u00fc \u00fd \u00fe \u00ff \u011e \u011f \u0130 \u0131 \u0152 \u0153 \u015e \u015f \u0160 \u0161 \u017d \u017e \u1e9e","title":"Latin 1"},{"location":"design/fonts/#latin-2","text":"Covers Central and Eastern European languages: Czech (cs), Hungarian (hu), Polish (pl), Romanian (ro), Croatian (hr), Slovak (sk), Slovenian (sl), Sorbian (sb) \u00c1 \u00c2 \u00c4 \u00c9 \u00cd \u00ce \u00d3 \u00d4 \u00d6 \u00da \u00dc \u00dd \u00e1 \u00e2 \u00e4 \u00e9 \u00ed \u00ee \u00f3 \u00f4 \u00f6 \u00fa \u00fc \u00fd \u0102 \u0103 \u0104 \u0105 \u0106 \u0107 \u010c \u010d \u010e \u010f \u0110 \u0111 \u0114 \u0115 \u0118 \u0119 \u011a \u011b \u0139 \u013a \u013d \u013e \u0141 \u0142 \u0143 \u0144 \u0147 \u0148 \u0150 \u0151 \u0154 \u0155 \u0158 \u0159 \u015a \u015b \u015e \u015f \u0160 \u0161 \u0162 \u0163 \u0164 \u0165 \u016e \u016f \u0170 \u0171 \u0179 \u017a \u017b \u017c \u017d \u017e \u01cd \u01ce \u0200 \u0201 \u0202 \u0203 \u0204 \u0205 \u0206 \u0207 \u0208 \u0209 \u020a \u020b \u020c \u020d \u020e \u020f \u0210 \u0211 \u0212 \u0213 \u0214 \u0215 \u0216 \u0217 \u0218 \u0219 \u021a \u021b","title":"Latin 2"},{"location":"design/fonts/#cyrillic","text":"Covers the Slavic languages that use a Cyrillic alphabet, including Belarusian, Bulgarian, Macedonian, Russian, Serbian, and Ukrainian \u0400 \u0401 \u0402 \u0403 \u0404 \u0405 \u0406 \u0407 \u0408 \u0409 \u040a \u040b \u040c \u040d \u040e \u040f \u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416 \u0417 \u0418 \u0419 \u041a \u041b \u041c \u041d \u041e \u041f \u0420 \u0421 \u0422 \u0423 \u0424 \u0425 \u0426 \u0427 \u0428 \u0429 \u042a \u042b \u042c \u042d \u042e \u042f \u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436 \u0437 \u0438 \u0439 \u043a \u043b \u043c \u043d \u043e \u043f \u0440 \u0441 \u0442 \u0443 \u0444 \u0445 \u0446 \u0447 \u0448 \u0449 \u044a \u044b \u044c \u044d \u044e \u044f \u0450 \u0451 \u0452 \u0453 \u0454 \u0455 \u0456 \u0457 \u0458 \u0459 \u045a \u045b \u045c \u045d \u045e \u045f","title":"Cyrillic"},{"location":"design/fonts/#greek","text":"Covers the Greek (el) language: \u0386 \u0388 \u0389 \u038a \u038c \u038e \u038f \u0390 \u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397 \u0398 \u0399 \u039a \u039b \u039c \u039d \u039e \u039f \u03a0 \u03a1 \u03a3 \u03a4 \u03a5 \u03a6 \u03a7 \u03a8 \u03a9 \u03ac \u03ad \u03ae \u03af \u03b0 \u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7 \u03b8 \u03b9 \u03ba \u03bb \u03bc \u03bd \u03be \u03bf \u03c0 \u03c1 \u03c2 \u03c3 \u03c4 \u03c5 \u03c6 \u03c7 \u03c8 \u03c9 \u03ca \u03cb \u03cc \u03cd \u03ce","title":"Greek"},{"location":"design/fonts/#vietnamese","text":"Covers the Vietnamese (vi) language: \u00c1 \u00c0 \u00c2 \u0102 \u00c3 \u1ea4 \u1ea6 \u1eae \u1eb0 \u1eaa \u1eb4 \u1ea2 \u1ea8 \u1eb2 \u1ea0 \u1eac \u1eb6 \u0110 \u00c9 \u00c8 \u00ca \u1ebc \u1ebe \u1ec0 \u1ec4 \u1eba \u1ec2 \u1eb8 \u1ec6 \u00cd \u00cc \u0128 \u1ec8 \u1eca \u00d3 \u00d2 \u00d4 \u00d5 \u1ed0 \u1ed2 \u1ed6 \u1ece \u01a0 \u1ed4 \u1ecc \u1eda \u1edc \u1ee0 \u1ed8 \u1ede \u1ee2 \u00da \u00d9 \u0168 \u1ee6 \u01af \u1ee4 \u1ee8 \u1eea \u1eee \u1eec \u1ef0 \u00dd \u1ef2 \u1ef8 \u1ef6 \u1ef4 \u00e1 \u00e0 \u00e2 \u0103 \u00e3 \u1ea5 \u1ea7 \u1eaf \u1eb1 \u1eab \u1eb5 \u1ea3 \u1ea9 \u1eb3 \u1ea1 \u1ead \u1eb7 \u0111 \u00e9 \u00e8 \u00ea \u1ebd \u1ebf \u1ec1 \u1ec5 \u1ebb \u1ec3 \u1eb9 \u1ec7 \u00ed \u00ec \u0129 \u1ec9 \u1ecb \u00f3 \u00f2 \u00f4 \u00f5 \u1ed1 \u1ed3 \u1ed7 \u1ecf \u01a1 \u1ed5 \u1ecd \u1edb \u1edd \u1ee1 \u1ed9 \u1edf \u1ee3 \u00fa \u00f9 \u0169 \u1ee7 \u01b0 \u1ee5 \u1ee9 \u1eeb \u1eef \u1eed \u1ef1 \u00fd \u1ef3 \u1ef9 \u1ef7 \u1ef5 \u20ab","title":"Vietnamese"},{"location":"design/objects/","text":".md-typeset__table { min-width: 100%; } table th:first-child{ border-radius:5px 0 0 0; } table th:last-child{ border-radius:0 5px 0 0; } tbody tr:nth-child(even) { background: #88888811; } .md-typeset table:not([class]) { display: table; } .md-typeset table:not([class]) td { padding: 0.5em 1.25em; line-height: 1.25; } Objects There are two ways to create an object on the screen: Uploading a pages.jsonl file onto the internal flash Use the jsonl command (via MQTT, serial or telnet console) Cheatsheet ~ obj Type Description btn Binary Button switch Toggle Switch checkbox Toggle Checkbox label Visual Label led Visual LED spinner Visual Spinner obj Visual Base Object line Visual Line img Visual Image dropdown Selector Dropdown List roller Selector Roller btnmatrix Selector Button Matrix msgbox Selector Messagebox tabview Selector Tabview tab Selector Tab cpicker Selector Color picker bar Range Progress Bar slider Range Slider arc Range Arc linemeter Range Line Meter gauge Range Gauge Common Parameters ~ Common Properties ~ These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Required Default Description id 1..254 yes n/a ID of the object on this page. 0 for the page itself. obj string yes n/a Name of the object type (see below) page 0..12 no n/a ID of the page the object appears on (see below) groupid 0..15 no 0 (none) ID of the GPIO group the object belongs to x int16 no 0 Horizontal position on the page y int16 no 0 Vertical position on the page w int16 no 0 Width of the object h int16 no 0 Height of the object hidden bool no false Object is hidden opacity 0..255 no 255 How much the the object is opaque action string no 0 Command handled locally (see below) swipe bool no false Page navigation using swipe gestures (see below) click bool no true Object is touch/clickable (also see enabled ) ext_click_h 0..255 no 0 Extended horizontal clickable are on the left and right ext_click_v 0..255 no 0 Extended vertical clickable are on the top and bottom parentid 0..255 no 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Pages ~ If the page parameter is not present, the object is placed on the same page as the previous object . If page is not specified for the first object either, the current page being displayed is used. \"page\":0 indicates that the object is visible on all pages. It can be used for example to specify a static menu bar. You can still hide the object on select pages if needed. Objects on page 0 appear on top of any objects on the underlying page. Actions ~ Action commands are supported only by binary or visual type of objects and they are performed locally on the plate. The following actions can be set for these objects: p1 to p12 to switch to the corresponding page numbers directly (for ESP32; in case of ESP8266 it's only p1 to p4 ) prev to switch to the previous page next to switch to the next page back to go back to the home page Check out the example for how to implement actions. You can change the target pages using prev , back and next page attributes operation on the page object pXb0 . Swipe ~ Objects and page area ( p0bY ) support swipe property. Enabling this will process left , right and down swipes on the object as next , prev and back page changes, respectively. The start of the swipe needs to be on the element which has this property enabled for the feature to activate. Note Page id p0b0 is not valid to set this property as it has to be set on real elements. Events ~ All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic. Common Methods ~ These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: p 1 b 5. dele te p 1 b 3. t o_ fr o nt Object Types Each object type is an ID that indicates which object type that line represents. Besides the common properties listed above, each object type can have specific properties. Text Label ~ obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" } Button ~ obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 } Switch ~ obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color1 color 0 changes indicator color bg_color2 color 0 changes knob color radius2 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons. Checkbox ~ obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons. Progress Bar ~ obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values. Slider ~ obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Arc ~ obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle1 0-360 start angle of the arc indicator (see note) end_angle1 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val support also negative values. Tip To adjust the size of the knob, use pad_top2 , pad_bottom2 , pad_left2 , pad_right2 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle1\" : 135 , \"end_angle1\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Dropdown List ~ obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Roller ~ obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Line Meter ~ obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 } Gauge ~ obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value angle 0-360 240 angle between start and end of the scale label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize. Tabview ~ obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top1 and pad_bottom1 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font1 styling property. Read further down to learn now to add tabs to the tabview. Tab ~ obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you wamt them to appear on. Example jsonl { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius2\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" } Color picker ~ obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. By long pressing the inner preview circle, the color picker will through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value. Setting Color ~ Example MQTT commands: hasp/< n ode na me>/comma n d/p 0 b 2. color 13891 hasp/< n ode na me>/comma n d/p 1 b 5. color silver hasp/< n ode na me>/comma n d/p 2 b 3. color #C 0 C 0 C 0 Events ~ While pressing and dragging the cpicker object the following events are sent: down (old color), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"color\" : \"#8300ff\" , \"r\" : 131 , \"g\" : 0 , \"b\" : 255 } { \"event\" : \"changed\" , \"color\" : \"#7300ff\" , \"r\" : 115 , \"g\" : 0 , \"b\" : 255 } { \"event\" : \"changed\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 } { \"event\" : \"up\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 } Spinner ~ obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees line_width int16 20 The width of the background circle line_width1 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color1 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width1\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color1\" : \"green\" } LED Indicator ~ obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ] Button Matrix ~ obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 } Messagebox ~ obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]} Line ~ obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be conter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 } Image ~ obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object Only PNG image files are supported, from flash. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Note The decoding of the images is done in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons. Example jsonl { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"/littlefs/image.png\" , \"auto_size\" : 0 , \"w\" : 50 } Base Object ~ obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Objects"},{"location":"design/objects/#cheatsheet","text":"obj Type Description btn Binary Button switch Toggle Switch checkbox Toggle Checkbox label Visual Label led Visual LED spinner Visual Spinner obj Visual Base Object line Visual Line img Visual Image dropdown Selector Dropdown List roller Selector Roller btnmatrix Selector Button Matrix msgbox Selector Messagebox tabview Selector Tabview tab Selector Tab cpicker Selector Color picker bar Range Progress Bar slider Range Slider arc Range Arc linemeter Range Line Meter gauge Range Gauge","title":"Cheatsheet"},{"location":"design/objects/#common-parameters","text":"","title":"Common Parameters"},{"location":"design/objects/#common-properties","text":"These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Required Default Description id 1..254 yes n/a ID of the object on this page. 0 for the page itself. obj string yes n/a Name of the object type (see below) page 0..12 no n/a ID of the page the object appears on (see below) groupid 0..15 no 0 (none) ID of the GPIO group the object belongs to x int16 no 0 Horizontal position on the page y int16 no 0 Vertical position on the page w int16 no 0 Width of the object h int16 no 0 Height of the object hidden bool no false Object is hidden opacity 0..255 no 255 How much the the object is opaque action string no 0 Command handled locally (see below) swipe bool no false Page navigation using swipe gestures (see below) click bool no true Object is touch/clickable (also see enabled ) ext_click_h 0..255 no 0 Extended horizontal clickable are on the left and right ext_click_v 0..255 no 0 Extended vertical clickable are on the top and bottom parentid 0..255 no 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.)","title":"Common Properties"},{"location":"design/objects/#events","text":"All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic.","title":"Events"},{"location":"design/objects/#common-methods","text":"These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: p 1 b 5. dele te p 1 b 3. t o_ fr o nt","title":"Common Methods"},{"location":"design/objects/#text-label","text":"obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Text Label"},{"location":"design/objects/#button","text":"obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Button"},{"location":"design/objects/#switch","text":"obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color1 color 0 changes indicator color bg_color2 color 0 changes knob color radius2 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/#checkbox","text":"obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/#progress-bar","text":"obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values.","title":"Progress Bar"},{"location":"design/objects/#slider","text":"obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/#arc","text":"obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle1 0-360 start angle of the arc indicator (see note) end_angle1 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val support also negative values. Tip To adjust the size of the knob, use pad_top2 , pad_bottom2 , pad_left2 , pad_right2 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle1\" : 135 , \"end_angle1\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/#dropdown-list","text":"obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/#roller","text":"obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/#line-meter","text":"obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/#gauge","text":"obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value angle 0-360 240 angle between start and end of the scale label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val support also negative values. Example jsonl { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/#tabview","text":"obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top1 and pad_bottom1 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font1 styling property. Read further down to learn now to add tabs to the tabview.","title":"Tabview  "},{"location":"design/objects/#tab","text":"obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you wamt them to appear on. Example jsonl { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius2\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tab  "},{"location":"design/objects/#color-picker","text":"obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. By long pressing the inner preview circle, the color picker will through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value.","title":"Color picker"},{"location":"design/objects/#spinner","text":"obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees line_width int16 20 The width of the background circle line_width1 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color1 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width1\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color1\" : \"green\" }","title":"Spinner"},{"location":"design/objects/#led-indicator","text":"obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/#button-matrix","text":"obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/#messagebox","text":"obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox  "},{"location":"design/objects/#line","text":"obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be conter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line  "},{"location":"design/objects/#image","text":"obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object Only PNG image files are supported, from flash. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Note The decoding of the images is done in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons. Example jsonl { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"/littlefs/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image  "},{"location":"design/objects/#base-object","text":"obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/pages/","text":"Pages ~ The layout of the pages can be defined in several ways: by creating a special file on the flash file system, which will be loaded and the layout with the objects displayed each time HASP starts up. by issuing commands through MQTT to draw/change the objects immediately You can create the file with your favourite text editor and upload it (and other resource assets like fonts) using the web interface HASP Design menu. pages.jsonl ~ The location of this file is /pages.jsonl in the root of the flash filesystem. It uses the JSON Lines format with one json object per line. Each line should contain exactly one valid json object and end with a line-break \\n (not a comma) . The jsonl lines are interpreted line-by-line. When a malformed line is encountered, the processing of the rest of the file stops. If you are missing objects, check the logs to see which line was processed last. You probably have a typo in the following line which blocks parsing the rest of the file. Blank lines are allowed for readability and are ignored. Note The complete file in its entirety is not a valid json file. Each individual line however must be a valid json object. The file extension is .jsonl and not .json . Note The maximum number of pages and objects is limited by the memory available in the MCU, it depends on the microcontroller type you use. File comments ~ If any of the required id or obj properties are missing - and the line is still valid json - then it is interpreted as a comment. When you upload the file to your plate's flash filesystem, you can also use the page parameter in a comment to set the default page for new objects that don't have a page parameter. Example 1: Add a comment on a single line that is ignored. 1 { \"comment\" : \" ----------- Page 1 layout ------------\" } Example 2: Set the default page to 2 for objects in the following lines, besides adding a comment as well. 1 { \"page\" : 2 , \"comment\" : \" ---- My Awesome Color Picker Layout ----\" } If you then omit the page parameter in the lines below this comment, those objects will appear by default on page 2 . Example 3: Insert a comment for an object. 1 { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"obj\" , \"x\" : 40 , \"y\" : 100 , \"w\" : 160 , \"h\" : 160 , \"radius\" : 100 , \"opacity\" : 100 , \"border_opa\" : 160 , \"border_width\" : 4 , \"comment\" : \"touch-catcher\" } Warning If the line is not valid json, the parsing of the rest of the file is also stopped. jsonl command ~ See commands documentation for the jsonl command. The payload of the command corresponds to what's exactly in one line of the pages.jsonl file above, with a minor exception: page numbers are not kept between the commands - you need to specfiy the page with each! Objects ~ Each line in pages.jsonl creates one object on a page and has to be in the json format. The order of the objects also dictates the layer on the page from bottom to top. So the last drawn object will be the topmost. Example Objects: 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 5 , \"y\" : 5 , \"h\" : 50 , \"w\" : 50 , \"text\" : \"Hello\" , \"enabled\" : true , \"hidden\" : false } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 90 , \"h\" : 90 , \"w\" : 50 , \"text\" : \"World\" , \"enabled\" : false , \"hidden\" : false } Once the object is created, you can reference it with pXbY where X is the page number and Y is the id of the object. For example: 1 2 p 1 b 1. w= 100 p 1 b 2. hidde n = true Ids start from 1 on each page. You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Page number 0 refers to an object visible on all pages. An id of 0 refers to the page itself instead of an object. See objects documentation for details. Page attributes ~ A page can have the following attributes: prev : The number of the destination page when performing a page prev action on this page next : The number of the destination page when performing a page next action on this page back : The number of the destination page when performing a page back action on this page By default all pages cycle in a round-robin fashion (after the last page jump back to first), but you can change this behaviour by adjusting the prev , next and back target pages. For example, to limit cycle through page 1-5 only: on page 5, page next action will jump back to page 1: 1 { \"page\" : 5 , \"id\" : 0 , \"next\" : 1 } The corresponding command is p5b0.next=1 . on page 1, page prev action will go to page 5 (instead of default page 12 on an ESP32) 1 { \"page\" : 1 , \"id\" : 0 , \"prev\" : 5 } The corresponding command is p1b0.prev=5 . Tip Page id p0b0 (as all pages) is not valid to set this attribute for. It has to be set individually on each real page starting from 1. back acts like a level up action, so you can jump back to the home or menu page where you came from using page back . You can create a hierarchy of pages and menus this way. Check out the example for how to implement a simple pagination bar.","title":"Pages"},{"location":"design/pages/#pages","text":"The layout of the pages can be defined in several ways: by creating a special file on the flash file system, which will be loaded and the layout with the objects displayed each time HASP starts up. by issuing commands through MQTT to draw/change the objects immediately You can create the file with your favourite text editor and upload it (and other resource assets like fonts) using the web interface HASP Design menu.","title":"Pages"},{"location":"design/pages/#pagesjsonl","text":"The location of this file is /pages.jsonl in the root of the flash filesystem. It uses the JSON Lines format with one json object per line. Each line should contain exactly one valid json object and end with a line-break \\n (not a comma) . The jsonl lines are interpreted line-by-line. When a malformed line is encountered, the processing of the rest of the file stops. If you are missing objects, check the logs to see which line was processed last. You probably have a typo in the following line which blocks parsing the rest of the file. Blank lines are allowed for readability and are ignored. Note The complete file in its entirety is not a valid json file. Each individual line however must be a valid json object. The file extension is .jsonl and not .json . Note The maximum number of pages and objects is limited by the memory available in the MCU, it depends on the microcontroller type you use.","title":"pages.jsonl"},{"location":"design/pages/#file-comments","text":"If any of the required id or obj properties are missing - and the line is still valid json - then it is interpreted as a comment. When you upload the file to your plate's flash filesystem, you can also use the page parameter in a comment to set the default page for new objects that don't have a page parameter. Example 1: Add a comment on a single line that is ignored. 1 { \"comment\" : \" ----------- Page 1 layout ------------\" } Example 2: Set the default page to 2 for objects in the following lines, besides adding a comment as well. 1 { \"page\" : 2 , \"comment\" : \" ---- My Awesome Color Picker Layout ----\" } If you then omit the page parameter in the lines below this comment, those objects will appear by default on page 2 . Example 3: Insert a comment for an object. 1 { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"obj\" , \"x\" : 40 , \"y\" : 100 , \"w\" : 160 , \"h\" : 160 , \"radius\" : 100 , \"opacity\" : 100 , \"border_opa\" : 160 , \"border_width\" : 4 , \"comment\" : \"touch-catcher\" } Warning If the line is not valid json, the parsing of the rest of the file is also stopped.","title":"File comments"},{"location":"design/pages/#jsonl-command","text":"See commands documentation for the jsonl command. The payload of the command corresponds to what's exactly in one line of the pages.jsonl file above, with a minor exception: page numbers are not kept between the commands - you need to specfiy the page with each!","title":"jsonl command"},{"location":"design/pages/#objects","text":"Each line in pages.jsonl creates one object on a page and has to be in the json format. The order of the objects also dictates the layer on the page from bottom to top. So the last drawn object will be the topmost. Example Objects: 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 5 , \"y\" : 5 , \"h\" : 50 , \"w\" : 50 , \"text\" : \"Hello\" , \"enabled\" : true , \"hidden\" : false } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 90 , \"h\" : 90 , \"w\" : 50 , \"text\" : \"World\" , \"enabled\" : false , \"hidden\" : false } Once the object is created, you can reference it with pXbY where X is the page number and Y is the id of the object. For example: 1 2 p 1 b 1. w= 100 p 1 b 2. hidde n = true Ids start from 1 on each page. You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Page number 0 refers to an object visible on all pages. An id of 0 refers to the page itself instead of an object. See objects documentation for details.","title":"Objects"},{"location":"design/pages/#page-attributes","text":"A page can have the following attributes: prev : The number of the destination page when performing a page prev action on this page next : The number of the destination page when performing a page next action on this page back : The number of the destination page when performing a page back action on this page By default all pages cycle in a round-robin fashion (after the last page jump back to first), but you can change this behaviour by adjusting the prev , next and back target pages. For example, to limit cycle through page 1-5 only: on page 5, page next action will jump back to page 1: 1 { \"page\" : 5 , \"id\" : 0 , \"next\" : 1 } The corresponding command is p5b0.next=1 . on page 1, page prev action will go to page 5 (instead of default page 12 on an ESP32) 1 { \"page\" : 1 , \"id\" : 0 , \"prev\" : 5 } The corresponding command is p1b0.prev=5 . Tip Page id p0b0 (as all pages) is not valid to set this attribute for. It has to be set individually on each real page starting from 1. back acts like a level up action, so you can jump back to the home or menu page where you came from using page back . You can create a hierarchy of pages and menus this way. Check out the example for how to implement a simple pagination bar.","title":"Page attributes"},{"location":"design/styling/","text":"Styling Properties ~ You can adjust the appearance of objects by changing the foreground, background and/or border color of each object. Some objects allow for more complex styling, effectively changing the appearance of their sub-components. Suffixes ~ The styling properties below support an optional two-digit suffix to indicate which part and/or state of the object the property applies to. A styling property without suffix will be applied to the default state of the main part of the object (i.e. the background) . Very detailed styling can be applied to each part depending on the state of the object: Parts ~ All objects have at least a main part. Several objects are made up of additional parts which can each be styled separately. To access the properties of the parts use a two-digit suffix appended to the styling properties below. The part indexes are: 00 = main part of the object (i.e. the background) 10 = the indicator or needle, highlighting the the current value 20 = the knob which can be used the change the value 30 = the background of the items/buttons 40 = the items/buttons 50 = the selected item 60 = major ticks of the gauge object 70 = the text cursor 80 = the scrollbar 90 = other special part, not listed above Tip For example the gauge object uses line_width to set the minor ticks thickness, line_width60 for major ticks and line_width10 for the thickness of the needle. States ~ The state indexes: 00 = default styling 01 = styling for toggled state 02 = styling for pressed, not toggled state 03 = styling for pressed and toggled state 04 = styling for disabled not toggled state 05 = styling for disabled and toggled state For example to set the radius of all the buttons in btnmatrix you'd set a value for the property radius30 . Using radius without a suffix will apply the property to the outline background of it. A toggle btn can be made to show text yellow when toggled ON with \"text_color\":\"white\",\"text_color01\":\"yellow\" Inheritance ~ If objects are children of other objects (they have the parentid property set), property inheritance takes place. Some properties (typically that are related to text and opacity) can be inherited from the parent object's styles. Inheritance is applied only if the given property is not set in the initial jsonl of the child object (at first draw). In this case, if the property is inheritable, the property's value will be searched in the parents too until an object specifies a value for the property. The parents will use their own state to detemine the value. So for example if a button is pressed, and the text color comes from here, the pressed text color will be used. ( source ) Inheritance takes place at run time too. When a parent object is deleted, all children will be deleted too. General ~ General styling options. Property Value Default Description radius uint16 depends on theme The radius of the rounded corners of the object: 0 = no radius i.e. square corners 65535 = pill shaped object (true circle if object has same width and height) clip_corner bool false Enable to clip off the overflowed content on the rounded ( radius > 0 ) corners of the object Background ~ The color and gradient used for drawing the background of an object. Property Type Description bg_opa uint8 The background opacity level bg_color color The background color bg_grad_color color The background gradient color bg_grad_dir [0..2] 0 = none (=default) 1 = horizontal 2 = vertical bg_grad_stop uint8 Specifies where the gradient should stop. 0 = at left/top most position 128 = in the center 255 = at right/bottom most position (=default) bg_main_stop uint8 Specifies where should the gradient start 0 = at left/top most position (=default) 128 = in the center 255 = at right/bottom most position To adjust the background style of a page use pXb0 where X is the page number. Border ~ The border is drawn on top of the background. It has radius rounding. Property Type Description border_color color Specifies the color of the border border_opa uint8 Specifies opacity of the border border_width uint8 Set the width of the border border_side uint8 Specifies which sides of the border to draw. 0 = none 1 = bottom 2 = top 4 = left 8 = right 15 = full A sum of these values is also possible to select specific sides. border_post bool If true the border will be drawn after all children have been drawn. Outline ~ The outline is similar to border but is drawn outside of the object. Property Type Description outline_color color Specifies the color of the outline outline_opa uint8 Specifies opacity of the outline outline_width uint8 Set the width of the outline outline_pad int16 The space between the object and the outline. (default=0) Padding and Margin ~ Padding sets the space on the inner sides of the edges. It means \"I don't want my children too close to my sides, so keep this space\". Padding inner sets the \"gap\" between the children. Margin sets the space on the outer side of the edges. It means \"I want this space around me\". Objects use them to set spacing. See the documentation of the objects for the details. Property Type Description pad_top int16 Set the padding on the top pad_bottom int16 Set the padding on the bottom pad_left int16 Set the padding on the left pad_right int16 Set the padding on the right pad_inner int16 Set the padding inside the object between children margin_top int16 Set the margin on the top margin_bottom int16 Set the margin on the bottom margin_left int16 Set the margin on the left margin_right int16 Set the margin on the right Shadow ~ The shadow is a blurred area under the object. Property Type Description shadow_color color Color of the shadow shadow_opa uint8 Specifies opacity of the shadow shadow_width int16 Set the width (blur size) of the outline shadow_ofs_x int16 Set the an X offset for the shadow shadow_ofs_y int16 Set the an Y offset for the shadow shadow_spread uint8 Make the shadow larger than the background in every direction by this value Text ~ Properties applied to the textual elements of the objects. Property Type Description text_color color Color of the text text_opa uint8 Opacity level of the text [0-255] text_font uint8 The Font ID text_letter_space int16 Distance between letters of the text, can be a negative number text_line_space int16 Distance between lines of the text, can be a negative number text_decor uint8 Add text decoration. 0 = none (=default) 1 = underline 2 = strikethrough 3 = underline and strikethrough text_sel_color color Set background color of text selection Value ~ Value is an arbitrary text label drawn on top of an object. It can be a lightweight replacement for creating standalone label objects. Property Type Description value_str string Text to display value_color color Color of the text value_opa uint8 Opacity level of the text [0-255] value_font uint8 The Font ID value_letter_space int16 Distance between letters of the text, can be negative value_line_space int16 Distance between lines of the text, can be negative value_align align Alignment of the text. Can be: none left right top bottom full center (=default) value_ofs_x int16 X offset from the default position of the alignment value_ofs_y int16 Y offset from the default position of the alignment Line ~ Properties for line , line meter objects. Property Type Description line_color color Color of the line line_opa uint8 Opacity level of the line [0-255] line_width int16 Width of a scale line in the active region (also see scale_end_line_width below), or gauge minor ticks thickness line_rounded bool true = draw rounded line endings. Default = false line_dash_width int16 Width of dash. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default) line_dash_gap int16 Gap between two dash line. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default) Scale ~ The properties for styling the scale of line meter , gauge objects. Property Type Description scale_grad_color color Gradient to this color on the scale lines, or gauge minor ticks scale_end_color color Color of the scale lines in the end region, or gauge minor ticks / critical area scale_width int16 Width of the scale in the normal region, or length of gauge minor ticks scale_border_width int16 Width of a border drawn on the outer side of the scale in the normal region scale_end_line_width int16 Width of a scale line in the end region scale_end_border_width int16 Width of a border drawn on the outer side of the scale in the end region Image ~ Property Type Description image_opa uint8 Opacity of the image image_recolor color Color of the overlay color mask image_recolor_opa uint8 Specifies opacity of the overlay color mask","title":"Styling Properties"},{"location":"design/styling/#styling-properties","text":"You can adjust the appearance of objects by changing the foreground, background and/or border color of each object. Some objects allow for more complex styling, effectively changing the appearance of their sub-components.","title":"Styling Properties"},{"location":"design/styling/#suffixes","text":"The styling properties below support an optional two-digit suffix to indicate which part and/or state of the object the property applies to. A styling property without suffix will be applied to the default state of the main part of the object (i.e. the background) . Very detailed styling can be applied to each part depending on the state of the object:","title":"Suffixes"},{"location":"design/styling/#parts","text":"All objects have at least a main part. Several objects are made up of additional parts which can each be styled separately. To access the properties of the parts use a two-digit suffix appended to the styling properties below. The part indexes are: 00 = main part of the object (i.e. the background) 10 = the indicator or needle, highlighting the the current value 20 = the knob which can be used the change the value 30 = the background of the items/buttons 40 = the items/buttons 50 = the selected item 60 = major ticks of the gauge object 70 = the text cursor 80 = the scrollbar 90 = other special part, not listed above Tip For example the gauge object uses line_width to set the minor ticks thickness, line_width60 for major ticks and line_width10 for the thickness of the needle.","title":"Parts"},{"location":"design/styling/#states","text":"The state indexes: 00 = default styling 01 = styling for toggled state 02 = styling for pressed, not toggled state 03 = styling for pressed and toggled state 04 = styling for disabled not toggled state 05 = styling for disabled and toggled state For example to set the radius of all the buttons in btnmatrix you'd set a value for the property radius30 . Using radius without a suffix will apply the property to the outline background of it. A toggle btn can be made to show text yellow when toggled ON with \"text_color\":\"white\",\"text_color01\":\"yellow\"","title":"States"},{"location":"design/styling/#inheritance","text":"If objects are children of other objects (they have the parentid property set), property inheritance takes place. Some properties (typically that are related to text and opacity) can be inherited from the parent object's styles. Inheritance is applied only if the given property is not set in the initial jsonl of the child object (at first draw). In this case, if the property is inheritable, the property's value will be searched in the parents too until an object specifies a value for the property. The parents will use their own state to detemine the value. So for example if a button is pressed, and the text color comes from here, the pressed text color will be used. ( source ) Inheritance takes place at run time too. When a parent object is deleted, all children will be deleted too.","title":"Inheritance"},{"location":"design/styling/#general","text":"General styling options. Property Value Default Description radius uint16 depends on theme The radius of the rounded corners of the object: 0 = no radius i.e. square corners 65535 = pill shaped object (true circle if object has same width and height) clip_corner bool false Enable to clip off the overflowed content on the rounded ( radius > 0 ) corners of the object","title":"General"},{"location":"design/styling/#background","text":"The color and gradient used for drawing the background of an object. Property Type Description bg_opa uint8 The background opacity level bg_color color The background color bg_grad_color color The background gradient color bg_grad_dir [0..2] 0 = none (=default) 1 = horizontal 2 = vertical bg_grad_stop uint8 Specifies where the gradient should stop. 0 = at left/top most position 128 = in the center 255 = at right/bottom most position (=default) bg_main_stop uint8 Specifies where should the gradient start 0 = at left/top most position (=default) 128 = in the center 255 = at right/bottom most position To adjust the background style of a page use pXb0 where X is the page number.","title":"Background"},{"location":"design/styling/#border","text":"The border is drawn on top of the background. It has radius rounding. Property Type Description border_color color Specifies the color of the border border_opa uint8 Specifies opacity of the border border_width uint8 Set the width of the border border_side uint8 Specifies which sides of the border to draw. 0 = none 1 = bottom 2 = top 4 = left 8 = right 15 = full A sum of these values is also possible to select specific sides. border_post bool If true the border will be drawn after all children have been drawn.","title":"Border"},{"location":"design/styling/#outline","text":"The outline is similar to border but is drawn outside of the object. Property Type Description outline_color color Specifies the color of the outline outline_opa uint8 Specifies opacity of the outline outline_width uint8 Set the width of the outline outline_pad int16 The space between the object and the outline. (default=0)","title":"Outline"},{"location":"design/styling/#padding-and-margin","text":"Padding sets the space on the inner sides of the edges. It means \"I don't want my children too close to my sides, so keep this space\". Padding inner sets the \"gap\" between the children. Margin sets the space on the outer side of the edges. It means \"I want this space around me\". Objects use them to set spacing. See the documentation of the objects for the details. Property Type Description pad_top int16 Set the padding on the top pad_bottom int16 Set the padding on the bottom pad_left int16 Set the padding on the left pad_right int16 Set the padding on the right pad_inner int16 Set the padding inside the object between children margin_top int16 Set the margin on the top margin_bottom int16 Set the margin on the bottom margin_left int16 Set the margin on the left margin_right int16 Set the margin on the right","title":"Padding and Margin"},{"location":"design/styling/#shadow","text":"The shadow is a blurred area under the object. Property Type Description shadow_color color Color of the shadow shadow_opa uint8 Specifies opacity of the shadow shadow_width int16 Set the width (blur size) of the outline shadow_ofs_x int16 Set the an X offset for the shadow shadow_ofs_y int16 Set the an Y offset for the shadow shadow_spread uint8 Make the shadow larger than the background in every direction by this value","title":"Shadow"},{"location":"design/styling/#text","text":"Properties applied to the textual elements of the objects. Property Type Description text_color color Color of the text text_opa uint8 Opacity level of the text [0-255] text_font uint8 The Font ID text_letter_space int16 Distance between letters of the text, can be a negative number text_line_space int16 Distance between lines of the text, can be a negative number text_decor uint8 Add text decoration. 0 = none (=default) 1 = underline 2 = strikethrough 3 = underline and strikethrough text_sel_color color Set background color of text selection","title":"Text"},{"location":"design/styling/#value","text":"Value is an arbitrary text label drawn on top of an object. It can be a lightweight replacement for creating standalone label objects. Property Type Description value_str string Text to display value_color color Color of the text value_opa uint8 Opacity level of the text [0-255] value_font uint8 The Font ID value_letter_space int16 Distance between letters of the text, can be negative value_line_space int16 Distance between lines of the text, can be negative value_align align Alignment of the text. Can be: none left right top bottom full center (=default) value_ofs_x int16 X offset from the default position of the alignment value_ofs_y int16 Y offset from the default position of the alignment","title":"Value"},{"location":"design/styling/#line","text":"Properties for line , line meter objects. Property Type Description line_color color Color of the line line_opa uint8 Opacity level of the line [0-255] line_width int16 Width of a scale line in the active region (also see scale_end_line_width below), or gauge minor ticks thickness line_rounded bool true = draw rounded line endings. Default = false line_dash_width int16 Width of dash. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default) line_dash_gap int16 Gap between two dash line. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default)","title":"Line"},{"location":"design/styling/#scale","text":"The properties for styling the scale of line meter , gauge objects. Property Type Description scale_grad_color color Gradient to this color on the scale lines, or gauge minor ticks scale_end_color color Color of the scale lines in the end region, or gauge minor ticks / critical area scale_width int16 Width of the scale in the normal region, or length of gauge minor ticks scale_border_width int16 Width of a border drawn on the outer side of the scale in the normal region scale_end_line_width int16 Width of a scale line in the end region scale_end_border_width int16 Width of a border drawn on the outer side of the scale in the end region","title":"Scale"},{"location":"design/styling/#image","text":"Property Type Description image_opa uint8 Opacity of the image image_recolor color Color of the overlay color mask image_recolor_opa uint8 Specifies opacity of the overlay color mask","title":"Image"},{"location":"design/converter/","text":"With this free online font converter tool you can create C array from any TTF or WOFF font. You can select ranges of Unicode characters and speficy the bpp (bit-per-pixel). The font converter is designed to be compatible with LVGL but with minor modification you can make it compatible with other graphics libraries. The offline version of the converter is available here How to use the font converter? Give name to the output font. E.g. \"arial_40\" Specify the height in px Set the bpp (bit-per-piel). Higher value results smoother (anti-aliased) font Choose a TTF or WOFF font Set a range of Unicode character to include in your font or list the characters in the Symbols field Optionally choose and other font too and specify the ranges and/or symbols for it as well. The characters will be merged into the final C file. Click the Convert button to download the result C file. How to use the generated fonts in LVGL? Copy the result C file into your LVGL project In a C file of your application declare the font as: extern lv_font_t my_font_name; or simply LV_FONT_DECLARE(my_font_name); Set the font in a style: style.text.font = &my_font_name; Name Size Bpp 1 bit-per-pixel 2 bit-per-pixel 3 bit-per-pixel (Needs compression enabled) 4 bit-per-pixel 8 bit-per-pixel Enable font compression (reduces size, requires 6.1+) No subpixel hinting Horizontal subpixel hinting (may improve font quality, requires 6.1+) Vertical subpixel hinting Try to use glyph color info from font to create grayscale icons. Since gray tones are emulated via transparency, result will be good on contrast background only. TTF/WOFF/OTF file Range Symbols Include another font You can use both \"Range\" and \"Symbols\" or only one of them Useful notes Unicode table to pick letters: https://unicode-table.com/ Unicode ranges http://jrgraphix.net/research/unicode.php A pixel perfect font : Terminus . Examples for two-tone or colored fonts : Material Design Icons (two-tone version) , BungeeColor-Regular List of built-in symbols Use this FontAwesome symbol font and copy this list to Range : 61441,61448,61451,61452,61452,61453,61457,61459,61461,61465, 61468,61473,61478,61479,61480,61502,61512,61515,61516,61517, 61521,61522,61523,61524,61543,61544,61550,61552,61553,61556, 61559,61560,61561,61563,61587,61589,61636,61637,61639,61671, 61674,61683,61724,61732,61787,61931,62016,62017,62018,62019, 62020,62087,62099,62212,62189,62810,63426,63650 To learn more about the font handling of LVGL read this Guide","title":"Index"},{"location":"design/objects/","text":".md-typeset__table { min-width: 100%; } table th:first-child{ border-radius:5px 0 0 0; } table th:last-child{ border-radius:0 5px 0 0; } tbody tr:nth-child(even) { background: #88888811; } .md-typeset table:not([class]) { display: table; } .md-typeset table:not([class]) td { padding: 0.5em 1.25em; line-height: 1.25; } Objects ~ There are two ways to create an object on the screen: Uploading a pages.jsonl file onto the internal flash Use the jsonl command (via MQTT, serial or telnet console) Cheatsheet ~ obj Type Description Extra Parts btn Binary Button switch Toggle Switch indicator, knob checkbox Toggle Checkbox indicator label Visual Label led Visual LED spinner Visual Spinner indicator obj Visual Base Object line Visual Line img Visual Image cpicker Selector Color picker knob roller Selector Roller selected dropdown Selector Dropdown List selected, items, scrollbar btnmatrix Selector Button Matrix items msgbox Selector Messagebox items, items_bg tabview Selector Tabview items, items_bg, indicator, selected tab Selector Tab bar Range Progress Bar indicator slider Range Slider indicator, knob arc Range Arc indicator, knob linemeter Range Line Meter gauge Range Gauge indicator, ticks Common Parameters ~ Common Properties ~ These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Default Description id 1..254 n/a Required. ID of the object on this page. 0 for the page itself. obj string n/a Required. Name of the object type (see below) page 0..12 n/a ID of the page the object appears on (see below) groupid 0..15 0 (none) ID of the GPIO group the object belongs to x int16 0 Horizontal position on the page y int16 0 Vertical position on the page w int16 0 Width of the object h int16 0 Height of the object enabled bool true Object is touchable, if false , a disabled style is applied hidden bool false Object is hidden opacity uint8 255 How much the the object is opaque swipe JSONobject null Swipe gestures handled locally (see below) action JSONobject null Touch command handled locally (see below) click bool true Object is touch/clickable (also see enabled ) ext_click_h uint8 0 Extended horizontal clickable are on the left and right ext_click_v uint8 0 Extended vertical clickable are on the top and bottom parentid uint8 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . tag JSONobject n/a Arbitrary attribute data. Once set, it will be included in each event message. For advanced scenarios (more info in an example ). jsonl JSONobject n/a Pseudo-property to set multiple properties of an existing object in one go with a JSON object. Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.) Pages ~ If the page parameter is not present, the object is placed on the same page as the previous object . If page is not specified for the first object either, the current page being displayed is used. \"page\":0 indicates that the object is visible on all pages. It can be used for example to specify a static menu bar. You can still hide the object on select pages if needed. Objects on page 0 appear on top of any objects on the underlying page. Actions ~ Action commands are supported only by binary or visual type of objects and they are performed locally on the plate. Actions can be of most any command : action has the format of \"action\": {\"<btn event>\": \"<command>\"} *btn events: are found in events . examples are up , down etc. Check out the example for how to implement actions. You can change the target pages using prev , back and next page attributes operation on the page object pXb0 . Swipe ~ Objects and page area ( pXb0 ) support the swipe property. Enabling this will process left , right , up and/or down swipes on the object. The start of the swipe needs to be on the element which has this property enabled for the feature to activate. The default is \"swipe\":null or swipe gestures disabled. To enable the default swipe gestures use \"swipe\":1 . This will change the page to next , prev and back on left , right and down swipes, respectively. It is a shorthand for \"swipe\":{\"down\":\"page back\",\"left\":\"page next\",\"right\":\"page prev\"} . You can customize the gesture to execure different commands if needed. Note Page id p0b0 is not valid to set this property as it has to be set on real elements. Events ~ All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic. Common Methods ~ These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: 1 2 p 1 b 5. dele te p 1 b 3. t o_ fr o nt Object Types ~ Each object type is an ID that indicates which object type that line represents. Besides the common properties listed above, each object type can have specific properties. Text Label ~ obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" } Button ~ obj: btn ![lv_btn]./images/lv_ex_btn_1.png) Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 } Switch ~ obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons. Checkbox ~ obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons. Progress Bar ~ obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Slider ~ obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Arc ~ obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 } Dropdown List ~ obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Roller ~ obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event. Line Meter ~ obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 } Gauge ~ obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize. Tabview ~ obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview. Tab ~ obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" } Color picker ~ obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value. Setting Color ~ Example MQTT commands: 1 2 3 4 hasp/< n ode na me>/comma n d/p 0 b 2. color 13891 hasp/< n ode na me>/comma n d/p 1 b 5. color silver hasp/< n ode na me>/comma n d/p 2 b 3. color #C 0 C 0 C 0 hasp/< n ode na me>/comma n d/p 2 b 3. mode sa turat io n Events ~ While pressing and dragging the cpicker object the following events are sent: down (old color), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 { \"event\" : \"down\" , \"color\" : \"#8300ff\" , \"r\" : 131 , \"g\" : 0 , \"b\" : 255 , \"h\" : 271 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#7300ff\" , \"r\" : 115 , \"g\" : 0 , \"b\" : 255 , \"h\" : 267 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"up\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 } Spinner ~ obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" } LED Indicator ~ obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ] Button Matrix ~ obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 } Messagebox ~ obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]} Line ~ obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 } Image ~ obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 } Base Object ~ obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Objects"},{"location":"design/objects/#objects","text":"There are two ways to create an object on the screen: Uploading a pages.jsonl file onto the internal flash Use the jsonl command (via MQTT, serial or telnet console)","title":"Objects"},{"location":"design/objects/#cheatsheet","text":"obj Type Description Extra Parts btn Binary Button switch Toggle Switch indicator, knob checkbox Toggle Checkbox indicator label Visual Label led Visual LED spinner Visual Spinner indicator obj Visual Base Object line Visual Line img Visual Image cpicker Selector Color picker knob roller Selector Roller selected dropdown Selector Dropdown List selected, items, scrollbar btnmatrix Selector Button Matrix items msgbox Selector Messagebox items, items_bg tabview Selector Tabview items, items_bg, indicator, selected tab Selector Tab bar Range Progress Bar indicator slider Range Slider indicator, knob arc Range Arc indicator, knob linemeter Range Line Meter gauge Range Gauge indicator, ticks","title":"Cheatsheet"},{"location":"design/objects/#common-parameters","text":"","title":"Common Parameters"},{"location":"design/objects/#common-properties","text":"These are the common properties shared among all objects, but only the id and obj properties are required to create an object: Property Value Default Description id 1..254 n/a Required. ID of the object on this page. 0 for the page itself. obj string n/a Required. Name of the object type (see below) page 0..12 n/a ID of the page the object appears on (see below) groupid 0..15 0 (none) ID of the GPIO group the object belongs to x int16 0 Horizontal position on the page y int16 0 Vertical position on the page w int16 0 Width of the object h int16 0 Height of the object enabled bool true Object is touchable, if false , a disabled style is applied hidden bool false Object is hidden opacity uint8 255 How much the the object is opaque swipe JSONobject null Swipe gestures handled locally (see below) action JSONobject null Touch command handled locally (see below) click bool true Object is touch/clickable (also see enabled ) ext_click_h uint8 0 Extended horizontal clickable are on the left and right ext_click_v uint8 0 Extended vertical clickable are on the top and bottom parentid uint8 0 Set the object to be the child of another object. x and y will be relative to the parent object. Property inheritance can affect the appearance of the of the children (more info in styling ) . tag JSONobject n/a Arbitrary attribute data. Once set, it will be included in each event message. For advanced scenarios (more info in an example ). jsonl JSONobject n/a Pseudo-property to set multiple properties of an existing object in one go with a JSON object. Tip Further customizable properties can be found in styling . Ids start from 1 on each page . You can have a maximum of 254 ids on each page. You don't have to use them in ascending order, you can for example use them for logical numbering (start labels from 11, 12, 13, buttons from 21, 22, 23 etc.)","title":"Common Properties"},{"location":"design/objects/#events","text":"All objects are touchable by default and respond to touch events. To disable touch events for an object set its enabled property to false . In this case the touch event \"goes through\" to the object on the layer below or to the page itself. Events (and values) are published in a state topic corresponding to the object, eg. hasp/<nodename>/state/p1b2 with payload in json format eg. {\"event\":\"up\",\"val\":1} . Possible events (depending on object type) are: Event Description down Occurs when a button goes from depressed to pressed (the moment of touch) up The button was released within a short time i.e. a short press has occurred release The button is released after being pressed for over the threshold time long Event is sent when the button is still being pressed after the threshold time of 400ms hold The HOLD event is repeated every 200ms while the button is still pressed changed Event is sent when the value of the object has changed during the event Tip To actively see the sent out events you can use an MQTT client app and subscribe to the hasp/# topic.","title":"Events"},{"location":"design/objects/#common-methods","text":"These are the common methods shared among all objects, Method Parameters Description clear Delete the children from the object delete Delete the object and its children from the page to_front Bring the object to the front on the page to_back Send the object to the back on the page Example commands: 1 2 p 1 b 5. dele te p 1 b 3. t o_ fr o nt","title":"Common Methods"},{"location":"design/objects/#object-types","text":"Each object type is an ID that indicates which object type that line represents. Besides the common properties listed above, each object type can have specific properties.","title":"Object Types"},{"location":"design/objects/#text-label","text":"obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Text Label"},{"location":"design/objects/#button","text":"obj: btn ![lv_btn]./images/lv_ex_btn_1.png) Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Button"},{"location":"design/objects/#switch","text":"obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/#checkbox","text":"obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/#progress-bar","text":"obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values.","title":"Progress Bar"},{"location":"design/objects/#slider","text":"obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/#arc","text":"obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/#dropdown-list","text":"obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/#roller","text":"obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/#line-meter","text":"obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/#gauge","text":"obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/#tabview","text":"obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview.","title":"Tabview"},{"location":"design/objects/#tab","text":"obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tab"},{"location":"design/objects/#color-picker","text":"obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value.","title":"Color picker"},{"location":"design/objects/#spinner","text":"obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" }","title":"Spinner"},{"location":"design/objects/#led-indicator","text":"obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/#button-matrix","text":"obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/#messagebox","text":"obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox"},{"location":"design/objects/#line","text":"obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line"},{"location":"design/objects/#image","text":"obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image"},{"location":"design/objects/#base-object","text":"obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/objects/arc/","text":"Arc ~ obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/arc/#arc","text":"obj: arc Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator rotation int16 0 offset to the 0 degree position type 0-2 0 0 = normal, 1 = symmetrical, 2 = reverse adjustable bool false Add knob that the user can operate to change the value start_angle 0-360 start angle of the arc background (see note) end_angle 0-360 end angle of the arc background (see note) start_angle10 0-360 start angle of the arc indicator (see note) end_angle10 0-360 end angle of the arc indicator (see note) Note Zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in a clockwise direction. The angles should be in the [0-360] range. min , max and val also support negative values. Tip To adjust the size of the knob, use pad_top20 , pad_bottom20 , pad_left20 , pad_right20 styling properties. If you increase the knob beyond the margins of the object, you also need to increase pad_top , pad_bottom , pad_left , pad_right for the arc itself. Check out value styling to display a textual value in the middle of the arc. Example jsonl 1 { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"arc\" , \"x\" : 20 , \"y\" : 75 , \"w\" : 200 , \"h\" : 200 , \"min\" : 15 , \"max\" : 35 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"start_angle10\" : 135 , \"end_angle10\" : 45 , \"adjustable\" : true } While pressing and dragging the arc object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Arc"},{"location":"design/objects/bar/","text":"Progress Bar ~ obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values.","title":"Bar"},{"location":"design/objects/bar/#progress-bar","text":"obj: bar Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical bars can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values.","title":"Progress Bar"},{"location":"design/objects/btn/","text":"Button ~ obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right Examples ~ Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } Events ~ Push Button ~ Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" } Toggle Button ~ Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Button"},{"location":"design/objects/btn/#button","text":"obj: btn Property Value Default Description toggle bool false When enabled, creates a toggle-on/toggle-off button. If false, creates a normal button val int16 0 The value: 0 = untoggled, 1 = toggled text string \"\" The text of the label mode string expand The wrapping mode of long text labels. expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right","title":"Button"},{"location":"design/objects/btn/#examples","text":"Similar to the text label, it's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" }","title":"Examples"},{"location":"design/objects/btn/#events","text":"","title":"Events"},{"location":"design/objects/btn/#push-button","text":"Normal buttons ( toggle=false ) send touch events while they occur: Short touch: 1 2 { \"event\" : \"down\" } { \"event\" : \"up\" } Long press: 1 2 3 4 5 { \"event\" : \"down\" } { \"event\" : \"long\" } { \"event\" : \"hold\" } { \"event\" : \"hold\" } { \"event\" : \"release\" }","title":"Push Button"},{"location":"design/objects/btn/#toggle-button","text":"Toggle buttons ( toggle=true ) send out the old value in the down event and the new value in the up event when released: Toggle ON: 1 2 { \"event\" : \"down\" , \"val\" : 0 } { \"event\" : \"up\" , \"val\" : 1 } Toggle OFF: 1 2 { \"event\" : \"down\" , \"val\" : 1 } { \"event\" : \"up\" , \"val\" : 0 }","title":"Toggle Button"},{"location":"design/objects/btnmatrix/","text":"Button Matrix ~ obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/btnmatrix/#button-matrix","text":"obj: btnmatrix Property Value Default Description options json array \"Text\" Json array of strings where each element is the label of a button. Use \"\\n\" for a new line of buttons align string center Text alignment: left , center , right toggle bool false All buttons behave as toggle buttons or normal buttons one_check bool false Allow only one button to be checked (toggled) at once val int8 0 The number of the active button, starting at 0. In conjunction with toggle and one_check set it to -1 to deactivate all buttons The styling properties apply to all buttons in the matrix. To change the color of a single label you can prefix the text with a #RRGGBB hexadecimal color code and close with a single hash # tag. Example jsonl 1 { \"page\" : 1 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 150 , \"options\" :[ \"#FF0000 Red Text#\" , \"#0000FF Cyan Text#\" , \"\\n\" , \"#FFFF00 Yellow Text#\" ], \"toggle\" : 1 , \"one_check\" : 1 }","title":"Button Matrix"},{"location":"design/objects/checkbox/","text":"Checkbox ~ obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/checkbox/#checkbox","text":"obj: checkbox Property Value Default Description val int16 0 1 = checked 0 = unchecked text string \"Checkbox\" The label of the checkbox Note The checkbox object ignores the w and h attribute. These are calculated based on the font and text. Example jsonl 1 { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 145 , \"w\" : 105 , \"text\" : \" Checkbox\" } Events generated by checkbox are similar to the ones generate by the toggle buttons.","title":"Checkbox"},{"location":"design/objects/cpicker/","text":"Color picker ~ obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value. Setting Color ~ Example MQTT commands: 1 2 3 4 hasp/< n ode na me>/comma n d/p 0 b 2. color 13891 hasp/< n ode na me>/comma n d/p 1 b 5. color silver hasp/< n ode na me>/comma n d/p 2 b 3. color #C 0 C 0 C 0 hasp/< n ode na me>/comma n d/p 2 b 3. mode sa turat io n Events ~ While pressing and dragging the cpicker object the following events are sent: down (old color), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 { \"event\" : \"down\" , \"color\" : \"#8300ff\" , \"r\" : 131 , \"g\" : 0 , \"b\" : 255 , \"h\" : 271 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#7300ff\" , \"r\" : 115 , \"g\" : 0 , \"b\" : 255 , \"h\" : 267 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"changed\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 } { \"event\" : \"up\" , \"color\" : \"#6200ff\" , \"r\" : 98 , \"g\" : 0 , \"b\" : 255 , \"h\" : 263 , \"s\" : 100 , \"v\" : 100 }","title":"Color picker"},{"location":"design/objects/cpicker/#color-picker","text":"obj: cpicker Property Value Default Description color color 0 The selected color in html format #rrggbb scale_width uint16 25 The width of the color gradient of the circle pad_inner int16 10 The padding between the circle and the inner preview circle mode string \"hue\" The aspect of the color being edited: \"hue\" , \"saturation\" , or \"value\" mode_fixed bool false Disables long press behavior to cycle color modes The object will automatically adjust based on the w and h properties: when the object is longer then it is height a rectangular color picker is created, otherwise it will be circular. Long pressing the inner preview circle, if mode_fixed is false , will cause color picker to cycle through the color modes: hue > saturation > value. Double-click on the inner preview circle to reset the current value.","title":"Color picker"},{"location":"design/objects/dropdown/","text":"Dropdown List ~ obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/dropdown/#dropdown-list","text":"obj: dropdown Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item direction byte 0 Direction where the dropdown expands: 0 = down, 1 = up, 2 = left, 3 = right Note: up and down are superseeded by the screen size. show_selected bool true Show the selected option or a static text max_height int16 3/4 of screen height The maximum height of the open drop-down list Method Parameters Description open To manually open the drop-down list close To manually close the drop-down list To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Dropdown List"},{"location":"design/objects/gauge/","text":"Gauge ~ obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/gauge/#gauge","text":"obj: gauge Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator critical_value int16 80 scale color will be changed to scale_end_color after this value label_count uint8 number of labels (and major ticks) of the scale line_count uint16 31 number of minor ticks of the entire scale angle 0-360 240 angle between start and end of the scale rotation 0-360 0 offset for the gauge's angles to rotate it format uint16 0 divider for major tick values To strip trailing zero's of major tick labels the format divider can be used to scale the values before printing: 0 : print the major tick value as is 1 : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label 2 : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label 3 : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label 4 : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label Only these values are allowed, arbitrary numbers are not supported. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"gauge\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 } Use scale properties to customize.","title":"Gauge"},{"location":"design/objects/img/","text":"Image ~ obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image"},{"location":"design/objects/img/#image","text":"obj: img Property Value Default Description src string \"\" The name of the image file auto_size bool true Automatically set the size of the image object to the image source offset_x int16 0 Shift the picture horizontally relative to the image object offset_y int16 0 Shift the picture vertically relative to the image object zoom uint16 256 A larger value enlarges the images (e.g. 512 double size), a smaller value shrinks it (e.g. 128 half size). Fractional scale works as well. E.g. 281 for 10% enlargement. angle int16 0 Rotate the picture around its pivot point. Angle has 0.1 degree precision, so for 45.8\u00b0 use 458 . pivot_x int16 H center The pivot point of the rotation, by default centered pivot_y int16 V center The pivot point of the rotation, by default centered antialias bool false The quality of the angle and zoom transformation. With enabled anti-aliasing the transformations has a higher quality but they are slower. Note You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask. Either PNG or BIN image files are supported, from flash: PNG image are decoded and kept in memory, thus you'll be able to display full-screen images only if your microcontroller has installed PSram memory , else you will be limited to small icons or BIN files. BIN images are not stored in memory and are read from flash each time. This will be slower but allows the use of larger images even if your microcontroller doesn't have PSram. BIN images from flash do not support zoom or angle transformations. Use the online LVGL Image Converter to create BIN files. Set the output format to Binary or Binary RGB565 . Example jsonl 1 { \"page\" : 1 , \"id\" : 34 , \"obj\" : \"img\" , \"src\" : \"L:/image.png\" , \"auto_size\" : 0 , \"w\" : 50 }","title":"Image"},{"location":"design/objects/label/","text":"Text Label ~ obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Label"},{"location":"design/objects/label/#text-label","text":"obj: label Property Value Default Description text string \"Text\" The text of the label, \\n for line break. Can also be a variable . mode string crop The wrapping mode of long text labels: expand Expand the object size to the text size break Keep the object width, break the too long lines and expand the object height dots Keep the size and write dots at the end if the text is too long scroll Keep the size and roll the text back and forth loop Keep the size and roll the text circularly crop Keep the size and crop the text out of it align string left Text alignment: left , center , right It's possible to set the color of characters in the text indvidually, just prefix the text to be re-colored with a #RRGGBB hexadecimal color code and a space, and close with a single hash # tag. Example jsonl 1 2 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"\\uE64A Hello world!\" } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 150 , \"h\" : 50 , \"text\" : \"#0000FF \\uE64A# #FF0000 Hello# #008000 world#!\" }","title":"Text Label"},{"location":"design/objects/led/","text":"LED Indicator ~ obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/led/#led-indicator","text":"obj: led Property Value Default Description val byte 0 The brightness of the indicator [ 0..255 ]","title":"LED Indicator"},{"location":"design/objects/line/","text":"Line ~ obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line"},{"location":"design/objects/line/#line","text":"obj: line Property Value Default Description points JSON array \"\" The name of the image file auto_size bool true Automatically set the size of the line object to the outer bounds y_invert bool false The y direction might be counter-intuitive in some cases so the y coordinates can be inverted The points parameter is a JSON array of [x,y] coordinates, for example [[10,25],[100,25],[100,0]] . Example jsonl 1 { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"line\" , \"points\" :[[ 10 , 25 ],[ 100 , 25 ],[ 100 , 0 ]], \"auto_size\" : 0 , \"y_invert\" : 1 }","title":"Line"},{"location":"design/objects/linemeter/","text":"Line Meter ~ obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/linemeter/#line-meter","text":"obj: linemeter Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator angle 0-360 240 angle between start and end of the scale line_count uint16 31 tick count of the scale rotation 0-360 0 offset for the scale angles to rotate it type 0-1 0 0 = indicator lines are activated clock-wise 1 = indicator lines are activated counter-clock-wise Use line and scale properties to customize. Note min , max and val also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 20 , \"y\" : 70 , \"w\" : 200 , \"h\" : 200 , \"value_str\" : \"Temp\" , \"val\" : 75 , \"line_count\" : 35 , \"line_rounded\" : 1 }","title":"Line Meter"},{"location":"design/objects/msgbox/","text":"Messagebox ~ obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox"},{"location":"design/objects/msgbox/#messagebox","text":"obj: msgbox Property Value Default Description text string \"\" The text of the message to be displayed. options json array [\"OK\"] Json array of string s where each element is the label of a button modal bool false Make the messagebox a modal dialog requiring user input auto_close int16 0 Close the pop-up message automatically after this number of milliseconds have passed The Message boxes act as a pop-up. The default width is the horizontal screen size, the height adjusts according to the contents of the message. The pop-up is centered on the screen. Note The messagebox object is automatically deleted when it is closed. You will need to create it again using jsonl to pop-up a new message. Example jsonl 1 { \"page\" : 1 , \"id\" : 24 , \"obj\" : \"msgbox\" , \"text\" : \"A message box with two buttons\" , \"options\" :[ \"Apply\" , \"Close\" ]}","title":"Messagebox"},{"location":"design/objects/obj/","text":"Base Object ~ obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/objects/obj/#base-object","text":"obj: obj The Base Object can be directly used as a simple, empty widget. It is nothing more then a (rounded) rectangle. You can use it as a background shape for other objects by putting its jsonl line before the object. It catches touches! Example jsonl 1 { \"page\" : 1 , \"id\" : 50 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 }","title":"Base Object"},{"location":"design/objects/roller/","text":"Roller ~ obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/roller/#roller","text":"obj: roller Property Value Default Description options string \"\" List of items separated by \\n val int16 0 The number of the selected item text string \"\" Read-only The text of the selected item rows int8 3 The number of rows that are visible Use this property instead of h to set object height mode 0..1 0 Roller mode: 0 = normal (finite), 1 = infinite align string center Text alignment: left , center , right To change the currently selected item, use the val attribute. To change the items in the list, use the options attribute. Example jsonl 1 { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 125 , \"y\" : 205 , \"w\" : 105 , \"h\" : 30 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" , \"mode\" : 1 } When the item is changed both val and text of the newly selected item are send out accompanied by the change event.","title":"Roller"},{"location":"design/objects/slider/","text":"Slider ~ obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/slider/#slider","text":"obj: slider Property Value Default Description min int16 0 minimum value of the indicator max int16 100 maximum value of the indicator val int16 0 current value of the indicator start_value int16 0 optional minimal allowed value of the indicator Vertical sliders can be created if the width of the object is smaller than its height. Note min , max , val and start_value also support negative values. Example jsonl 1 { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 250 , \"w\" : 200 , \"h\" : 20 , \"min\" : 15 , \"max\" : 35 } While pressing and dragging the slider object the following events are sent: down (old value), changed (repeatedly until released) and up (value at the moment of releasing it): 1 2 3 4 5 6 7 { \"event\" : \"down\" , \"val\" : 21 } { \"event\" : \"changed\" , \"val\" : 22 } { \"event\" : \"changed\" , \"val\" : 23 } { \"event\" : \"changed\" , \"val\" : 25 } { \"event\" : \"changed\" , \"val\" : 27 } { \"event\" : \"changed\" , \"val\" : 29 } { \"event\" : \"up\" , \"val\" : 31 }","title":"Slider"},{"location":"design/objects/spinner/","text":"Spinner ~ obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" }","title":"Spinner"},{"location":"design/objects/spinner/#spinner","text":"obj: spinner Property Value Default Description speed int16 1000 The time for 1 turn in ms direction int16 0 0 = clockwise, 1 = counter-clockwise angle 0-360 60 The length of the spinning segment in degrees type 0-2 0 0 = slow down on the top, 1 = slow down and stretch, 2 = constant speed no stretch line_width int16 20 The width of the background circle line_width10 int16 20 The width of the spinning segment line_color color depends on theme color of the background circle line_color10 color depends on theme color of the spinning segment Tip Check out background, border, and line styling to adjust other aspects of the appearance. Note Placing objects over/under the spinner will increase the CPU load because all objects need to be redrawn constantly. Example jsonl 1 { \"page\" : 1 , \"id\" : 15 , \"obj\" : \"spinner\" , \"x\" : 180 , \"y\" : 50 , \"w\" : 36 , \"h\" : 36 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 6 , \"line_width10\" : 6 , \"angle\" : 80 , \"line_color\" : \"white\" , \"line_color10\" : \"green\" }","title":"Spinner"},{"location":"design/objects/switch/","text":"Switch ~ obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/switch/#switch","text":"obj: switch Property Value Default Description val bool 0 1 = on, 0 = off bg_color10 color 0 changes indicator color bg_color20 color 0 changes knob color radius20 int16 depends on theme changes knob corner radius (also see radius ) Example jsonl 1 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 145 , \"w\" : 105 , \"h\" : 55 , \"radius\" : 15 } Events generated by switch are similar to the ones generate by the toggle buttons.","title":"Switch"},{"location":"design/objects/tabview/","text":"Tabs ~ Tabview ~ obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview. Tab ~ obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tabs"},{"location":"design/objects/tabview/#tabs","text":"","title":"Tabs"},{"location":"design/objects/tabview/#tabview","text":"obj: tabview A tabview is an object that can hold multiple tab objects. You first create the tabview object and then add tab objects to it. Property Value Default Description val int8 0 The number of the active tab, starting at 0 text string \"\" The name of the active tab btn_pos 0..4 1 Position of the tab buttons: 0 = none 1 = top 2 = bottom 3 = left 4 = right count uint16 0 Read-only The number of tabs of the tabview To change the currently visible tab, use the val attribute after all tabs have been added. Note To adjust the height of the tab buttons row, use pad_top40 and pad_bottom40 styling properties. Accepts also negative values. To adjust the text size of the tab names, use the text_font40 styling property. Read further down to learn now to add tabs to the tabview.","title":"Tabview"},{"location":"design/objects/tabview/#tab","text":"obj: tab Property Value Default Description parentid int8 0 The id of the tabview object to which this tab is added text string \"Tab\" The name of tab button Set the parent object (which tabview the tabs belong to) by referencing the parentid when creating the tab. To add other objects to these tabs, set the parentid when creating those objects to the id of the tab you want them to appear on. Example jsonl 1 2 3 4 5 6 7 { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 , \"y\" : 180 } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 1\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 2\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"tab\" , \"parentid\" : 14 , \"text\" : \"Tab 3\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"switch\" , \"x\" : 20 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 51 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 52 , \"options\" : \"Apple\\nBanana\\nOrange\\nMelon\" } { \"page\" : 1 , \"id\" : 81 , \"obj\" : \"checkbox\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 53 , \"text\" : \" Nice tabview\" }","title":"Tab"},{"location":"examples/dashui/","text":"Dash UI ~ Layout ~ Code ~ To add an openHASP plate to your installation with the Dash UI sample configuration: in the plate's web UI select Material Light UI theme, choose a purple color in the Hue color bar and reboot, upload a pages.jsonl file with the folowing content to your plate's flash memory and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"bg_color\" : \"#FFFFFF\" , \"bg_grad_color\" : \"#FFFFFF\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIVING ROOM\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"bg_grad_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 40 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"arc\" , \"x\" : 130 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 100 , \"border_side\" : 0 , \"type\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_color\" : \"#000000\" , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 120 , \"w\" : 240 , \"h\" : 20 , \"align\" : \"center\" , \"text\" : \"CO2 levels: \" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 2 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Temperature\" } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 140 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Humidity\" } { \"page\" : 1 , \"id\" : 7 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 160 , \"w\" : 240 , \"h\" : 20 , \"text\" : \"LIGHTS\" , \"bg_color\" : \"#F1C40F\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 8 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 190 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Ceiling Light\" } { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 190 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 215 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Wall Light\" } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 215 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 240 , \"w\" : 200 , \"h\" : 20 , \"text\" : \"Ambient Light\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"slider\" , \"x\" : 30 , \"y\" : 265 , \"w\" : 200 , \"h\" : 10 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"page\" : 0 , \"id\" : 11 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE141\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 12 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 13 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE142\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } Assuming your plate's configured MQTT topic is plate35 , values for Temperature, Humidity and CO2 Sensor have to be sent from another device by publishing values to the appropriate command topic: hasp/plate35/command/p1b2.val %value% - to update Temperature arc value hasp/plate35/command/p1b2.value_str %value%\u00b0C - to update Temperature text value hasp/plate35/command/p1b3.val %value% - to update Humidity arc value hasp/plate35/command/p1b3.value_str %value% % - to update Humidity text value hasp/plate35/command/p1b4.text CO2 levels: %value% - to update CO2 level value","title":"Dash UI"},{"location":"examples/dashui/#dash-ui","text":"","title":"Dash UI"},{"location":"examples/dashui/#layout","text":"","title":"Layout"},{"location":"examples/dashui/#code","text":"To add an openHASP plate to your installation with the Dash UI sample configuration: in the plate's web UI select Material Light UI theme, choose a purple color in the Hue color bar and reboot, upload a pages.jsonl file with the folowing content to your plate's flash memory and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"bg_color\" : \"#FFFFFF\" , \"bg_grad_color\" : \"#FFFFFF\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIVING ROOM\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"bg_grad_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 40 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"arc\" , \"x\" : 130 , \"y\" : 45 , \"w\" : 140 , \"h\" : 100 , \"max\" : 100 , \"border_side\" : 0 , \"type\" : 0 , \"start_angle\" : 180 , \"end_angle\" : 0 , \"start_angle10\" : 180 , \"value_font\" : 12 , \"value_color\" : \"#000000\" , \"value_ofs_x\" : -19 , \"value_ofs_y\" : -4 , \"bg_opa\" : 0 } { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 120 , \"w\" : 240 , \"h\" : 20 , \"align\" : \"center\" , \"text\" : \"CO2 levels: \" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 2 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Temperature\" } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 140 , \"y\" : 35 , \"w\" : 140 , \"text\" : \"Humidity\" } { \"page\" : 1 , \"id\" : 7 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 160 , \"w\" : 240 , \"h\" : 20 , \"text\" : \"LIGHTS\" , \"bg_color\" : \"#F1C40F\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 8 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 190 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Ceiling Light\" } { \"page\" : 1 , \"id\" : 9 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 190 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 10 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 215 , \"w\" : 140 , \"h\" : 20 , \"text\" : \"Wall Light\" } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"switch\" , \"x\" : 160 , \"y\" : 215 , \"w\" : 40 , \"h\" : 20 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 20 , \"y\" : 240 , \"w\" : 200 , \"h\" : 20 , \"text\" : \"Ambient Light\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"slider\" , \"x\" : 30 , \"y\" : 265 , \"w\" : 200 , \"h\" : 10 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"page\" : 0 , \"id\" : 11 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE141\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 12 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 13 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#34495E\" , \"text\" : \"\\uE142\" , \"text_color\" : \"#000000\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } Assuming your plate's configured MQTT topic is plate35 , values for Temperature, Humidity and CO2 Sensor have to be sent from another device by publishing values to the appropriate command topic: hasp/plate35/command/p1b2.val %value% - to update Temperature arc value hasp/plate35/command/p1b2.value_str %value%\u00b0C - to update Temperature text value hasp/plate35/command/p1b3.val %value% - to update Humidity arc value hasp/plate35/command/p1b3.value_str %value% % - to update Humidity text value hasp/plate35/command/p1b4.text CO2 levels: %value% - to update CO2 level value","title":"Code"},{"location":"examples/fan/","text":"Animated fan status ~ Layout ~ Code ~ To add an openHASP plate to your installation with a sample design to control and reflect the status of a fan: in the plate's web UI select Hasp Light UI theme and reboot, upload the fan icon to your plate, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"FAN STATUS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"lime\" , \"image_recolor_opa\" : 150 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"spinner\" , \"parentid\" : 11 , \"x\" : 7 , \"y\" : 6 , \"w\" : 126 , \"h\" : 126 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 7 , \"line_width10\" : 7 , \"type\" : 2 , \"angle\" : 120 , \"speed\" : 1000 , \"value_str\" : 3 } It is made from a transparent PNG image and a spinner object placed on top of it. To reflect various states of the fan from your home automation system, you could change the speed of the spinner, the value_str to display it numerically, or line_color10 to colorize it. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask to the fan itself. You could use the spinner's down touch events to change the speed of the fan in an OFF > 1 > 2 > 3 > OFF style (consult the documentation of your home automation system how to do this based on MQTT messages). Here's another approach where the spinner discretely shows up behind the blades: 1 2 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"spinner\" , \"x\" : 68 , \"y\" : 91 , \"w\" : 105 , \"h\" : 105 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 32 , \"line_color10\" : \"orange\" , \"line_rounded10\" : 1 , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 1000 , \"value_str\" : 3 , \"value_ofs_y\" : 1 } { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"silver\" , \"image_recolor_opa\" : 120 } For fans in action, check out the fan and scent diffuser example for Home Assistant. Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Attribution Fan by WARPAINT Media Inc. from the Noun Project","title":"Animated Fan"},{"location":"examples/fan/#animated-fan-status","text":"","title":"Animated fan status"},{"location":"examples/fan/#layout","text":"","title":"Layout"},{"location":"examples/fan/#code","text":"To add an openHASP plate to your installation with a sample design to control and reflect the status of a fan: in the plate's web UI select Hasp Light UI theme and reboot, upload the fan icon to your plate, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"FAN STATUS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"lime\" , \"image_recolor_opa\" : 150 } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"spinner\" , \"parentid\" : 11 , \"x\" : 7 , \"y\" : 6 , \"w\" : 126 , \"h\" : 126 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 7 , \"line_width10\" : 7 , \"type\" : 2 , \"angle\" : 120 , \"speed\" : 1000 , \"value_str\" : 3 } It is made from a transparent PNG image and a spinner object placed on top of it. To reflect various states of the fan from your home automation system, you could change the speed of the spinner, the value_str to display it numerically, or line_color10 to colorize it. You can use image_recolor and image_recolor_opa from the image styling properties to apply a color overlay mask to the fan itself. You could use the spinner's down touch events to change the speed of the fan in an OFF > 1 > 2 > 3 > OFF style (consult the documentation of your home automation system how to do this based on MQTT messages). Here's another approach where the spinner discretely shows up behind the blades: 1 2 { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"spinner\" , \"x\" : 68 , \"y\" : 91 , \"w\" : 105 , \"h\" : 105 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 32 , \"line_color10\" : \"orange\" , \"line_rounded10\" : 1 , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 1000 , \"value_str\" : 3 , \"value_ofs_y\" : 1 } { \"page\" : 1 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/noun_Fan_35097_140.png\" , \"auto_size\" : 1 , \"w\" : 140 , \"h\" : 140 , \"x\" : 50 , \"y\" : 75 , \"image_recolor\" : \"silver\" , \"image_recolor_opa\" : 120 } For fans in action, check out the fan and scent diffuser example for Home Assistant. Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Attribution Fan by WARPAINT Media Inc. from the Noun Project","title":"Code"},{"location":"examples/lovelace/","text":"Lovelace-like Entities ~ Layout ~ Code ~ To add an openHASP plate to your installation with a sample design looking a bit like Home Assistant's Lovelace UI: in the plate's web UI select Hasp Light UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"ENTITIES\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE004\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Presence override\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 40 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF020\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Front door light\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 23 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 74 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 103 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF054\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 113 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Back yard lights\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 110 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 138 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uEA7A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Trash service\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 43 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 6 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 173 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF39D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Selective trash\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 10 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 208 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE32A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Green energy active\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Yes :)\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 243 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE957\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Air quality\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"OK (29.58 \u00b5g/m\u00b3)\" , \"align\" : 2 , \"text_color\" : \"black\" } Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Check out the Lovelace cover example to learn how to bring life to the objects.","title":"Lovelace Entities"},{"location":"examples/lovelace/#lovelace-like-entities","text":"","title":"Lovelace-like Entities"},{"location":"examples/lovelace/#layout","text":"","title":"Layout"},{"location":"examples/lovelace/#code","text":"To add an openHASP plate to your installation with a sample design looking a bit like Home Assistant's Lovelace UI: in the plate's web UI select Hasp Light UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"ENTITIES\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 11 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE004\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Presence override\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 13 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 40 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF020\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Front door light\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 23 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 74 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 103 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF054\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 113 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Back yard lights\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 33 , \"obj\" : \"switch\" , \"x\" : 177 , \"y\" : 110 , \"w\" : 50 , \"h\" : 25 , \"radius\" : 25 , \"radius20\" : 15 } { \"page\" : 1 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 138 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uEA7A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Trash service\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 43 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 148 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 6 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 173 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF39D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Selective trash\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 183 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"in 10 days\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 208 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE32A\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Green energy active\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 218 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Yes :)\" , \"align\" : 2 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 243 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uE957\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"Air quality\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"black\" } { \"page\" : 1 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 97 , \"y\" : 253 , \"w\" : 130 , \"h\" : 30 , \"text\" : \"OK (29.58 \u00b5g/m\u00b3)\" , \"align\" : 2 , \"text_color\" : \"black\" } Check out the pagination example to learn how to implement the bottom bar. Check out the clock and temperature example to learn how to implement values to the top. Check out the Lovelace cover example to learn how to bring life to the objects.","title":"Code"},{"location":"examples/offlinehandling/","text":"Handle offline state ~ openHASP can detect the state when the plate is disconnected from the network. With Group ID object property combined with batch processing , objects on the screen can act on locally connected devices without using the home automation system - letting you use only these devices when the network is down. Prerequisites ~ In the use case presented below, the following assumptions are made: you have a plate with 2 local relays (configured on output GPIOs as lights), each relay added to a different group (Group 1 and 2 respectively). you want to have 2 toggle buttons on the screen acting directly on these relays when the plate is not yet, or disconnected from the WiFi network. No page navigation is needed as no other objects related to the home automation services have to be displayed. The buttons have the groupid property set to 1 and 2 respectively. Configuration ~ In the plate's web UI keep the default /pages.jsonl as Startup Layout. This will load immediately after plate boot, before the plate is connected to the network. If your network is not available after boot, this page configuration will be on screen while the plate keeps connecting in the background. pages.jsonl - loaded at boot, has only with objects related to local relays, and displays the hostname: 1 2 3 4 5 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 98 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 295 , \"w\" : 240 , \"align\" : \"center\" , \"text\" : \"%hostname%\" , \"text_color\" : \"#FFFFFF\" } You can use batch processing and create scripts which run when the plate connects to the WiFi network or loses connection from it. online.cmd - batch script to run after connected to the WiFi network, it will clear the screen and load the pages with objects related to the home automation: clearpage all run /pages_online.jsonl pages_online.jsonl - to be loaded after connected to the WiFi network: Put in pages_online.jsonl the main configuration for the pages you'd like to use when the plate is connected to the network and the home automation system. See integrations examples corresponding to the home automation system you have. Note If you use Home Assistant and opt to store the pages.jsonl file on the server, which will be loaded on start of Home Assistant, it will also be reloaded on plate becoming online. Don't put run /pages_online.jsonl in the script and don't need pages_online.jsonl either on the plate. offline.cmd - batch script to run when connection is lost from the WiFi network, it will clear the screen and load the page only with objects related to local relays: clearpage all run /pages_offline.jsonl pages_offline.jsonl - to be loaded after connection is lost to the WiFi network, has only with objects related to local relays: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"\\uE156\\uE5A9\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } Testing ~ Reboot the plate. First only the buttons related to local relays are shown, these act the relays. After the plate connects to the network, screen is cleared and home automation-related pages are loaded. Kill the WiFi network. Plate detects the disconnection from the network, thus screen is cleared and only the buttons related to local relays are shown, relays can be turned on and off. Restore the WiFi network. Plate reconnects to the network, screen is cleared and home automation-related pages are loaded back again.","title":"Handle Offline State"},{"location":"examples/offlinehandling/#handle-offline-state","text":"openHASP can detect the state when the plate is disconnected from the network. With Group ID object property combined with batch processing , objects on the screen can act on locally connected devices without using the home automation system - letting you use only these devices when the network is down.","title":"Handle offline state"},{"location":"examples/offlinehandling/#prerequisites","text":"In the use case presented below, the following assumptions are made: you have a plate with 2 local relays (configured on output GPIOs as lights), each relay added to a different group (Group 1 and 2 respectively). you want to have 2 toggle buttons on the screen acting directly on these relays when the plate is not yet, or disconnected from the WiFi network. No page navigation is needed as no other objects related to the home automation services have to be displayed. The buttons have the groupid property set to 1 and 2 respectively.","title":"Prerequisites"},{"location":"examples/offlinehandling/#configuration","text":"In the plate's web UI keep the default /pages.jsonl as Startup Layout. This will load immediately after plate boot, before the plate is connected to the network. If your network is not available after boot, this page configuration will be on screen while the plate keeps connecting in the background. pages.jsonl - loaded at boot, has only with objects related to local relays, and displays the hostname: 1 2 3 4 5 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 98 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"label\" , \"x\" : 0 , \"y\" : 295 , \"w\" : 240 , \"align\" : \"center\" , \"text\" : \"%hostname%\" , \"text_color\" : \"#FFFFFF\" } You can use batch processing and create scripts which run when the plate connects to the WiFi network or loses connection from it. online.cmd - batch script to run after connected to the WiFi network, it will clear the screen and load the pages with objects related to the home automation: clearpage all run /pages_online.jsonl pages_online.jsonl - to be loaded after connected to the WiFi network: Put in pages_online.jsonl the main configuration for the pages you'd like to use when the plate is connected to the network and the home automation system. See integrations examples corresponding to the home automation system you have. Note If you use Home Assistant and opt to store the pages.jsonl file on the server, which will be loaded on start of Home Assistant, it will also be reloaded on plate becoming online. Don't put run /pages_online.jsonl in the script and don't need pages_online.jsonl either on the plate. offline.cmd - batch script to run when connection is lost from the WiFi network, it will clear the screen and load the page only with objects related to local relays: clearpage all run /pages_offline.jsonl pages_offline.jsonl - to be loaded after connection is lost to the WiFi network, has only with objects related to local relays: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 165 , \"w\" : 220 , \"h\" : 115 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 , \"radius\" : 20 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 99 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"\\uE156\\uE5A9\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 }","title":"Configuration"},{"location":"examples/offlinehandling/#testing","text":"Reboot the plate. First only the buttons related to local relays are shown, these act the relays. After the plate connects to the network, screen is cleared and home automation-related pages are loaded. Kill the WiFi network. Plate detects the disconnection from the network, thus screen is cleared and only the buttons related to local relays are shown, relays can be turned on and off. Restore the WiFi network. Plate reconnects to the network, screen is cleared and home automation-related pages are loaded back again.","title":"Testing"},{"location":"examples/pagination/","text":"Pagination can be executed locally using the action attribute of the objects. The jsonl lines below will setup 3 buttons to the bottom of a 240x320 screen which will navigate back and forth between the pages: 1 2 3 { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"btn\" , \"action\" :{ \"down\" : \"page prev\" }, \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#2C3E50\" , \"text\" : \"\\uE141\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 2 , \"obj\" : \"btn\" , \"action\" :{ \"down\" : \"page back\" }, \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"bg_color\" : \"#2C3E50\" , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 3 , \"obj\" : \"btn\" , \"action\" :{ \"down\" : \"page next\" }, \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"bg_color\" : \"#2C3E50\" , \"text\" : \"\\uE142\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } The action can take any command . For example: 1 { \"page\" : 0 , \"id\" : 4 , \"x\" : 0 , \"y\" : 0 , \"obj\" : \"btn\" , \"action\" : { \"hold\" : \"restart\" }, \"text\" : \"\\uE456\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } Will restart the device on holding of the button object. Note : action has the format of \"action\": {\"<btn event>\": \"<command>\"} *btn events: are up , down , hold , release . Pagination can be also acomplished by enabling swipe gesture on certain objects. The jsonl line below will setup an invisible rectangle overlay at the top of the screen with enabled swipe : 1 { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"obj\" , \"swipe\" : 1 , \"x\" : 0 , \"y\" : 0 , \"h\" : 30 , \"w\" : 240 , \"opacity\" : 0 , \"comment\" : \"swipe-area-at-top\" } Tip You should put these lines to the end of your pages.jsonl config file, so that these objects remain at the top, and no others will be drawn on top of them. To limit page navigation only to page numbers between 1 and 6: 1 2 { \"page\" : 1 , \"id\" : 0 , \"prev\" : 6 } { \"page\" : 6 , \"id\" : 0 , \"next\" : 1 } You can create a main menu on page 1 like this: 1 2 3 { \"id\" : 1 , \"obj\" : \"btn\" , \"action\" : \"p2\" , \"x\" : 10 , \"y\" : 5 , \"w\" : 200 , \"h\" : 40 , \"text\" : \"Doors+Windows\" , \"text_font\" : 32 } { \"id\" : 2 , \"obj\" : \"btn\" , \"action\" : \"p3\" , \"x\" : 10 , \"y\" : 65 , \"w\" : 200 , \"h\" : 40 , \"text\" : \"Weather\" , \"text_font\" : 32 } { \"id\" : 3 , \"obj\" : \"btn\" , \"action\" : \"p4\" , \"x\" : 10 , \"y\" : 140 , \"w\" : 200 , \"h\" : 40 , \"text\" : \"Lights\" , \"text_font\" : 32 } If you press on the Button Weather it jumps to page 3 ( \"action\": \"p3\" )","title":"Page Navigation"},{"location":"examples/surprise/","text":"Surprise ~ No screenshot available. To see the result, test the code! Code ~ Strictly for geeks: 1 2 3 { \"page\" : 0 , \"id\" : 60 , \"obj\" : \"obj\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 320 , \"radius\" : 0 , \"hidden\" : 0 , \"bg_grad_dir\" : 0 , \"bg_color\" : \"#0000bb\" } { \"page\" : 0 , \"id\" : 61 , \"obj\" : \"btn\" , \"x\" : 80 , \"y\" : 50 , \"w\" : 80 , \"h\" : 20 , \"text\" : \"openHASP\" , \"text_font\" : 16 , \"bg_color\" : \"gray\" , \"bg_grad_color\" : \"gray\" , \"text_color\" : \"white\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 0 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 80 , \"w\" : 240 , \"h\" : 220 , \"text\" : \"A fatal exception has ocured in MCU.\\nThe application will be terminated.\\n\\n\\uE40A Touch the screen to terminate it.\\n\\uE40A Press CTRL+ALT+DEL again to\\n restart your computer. You will lose\\n any unsaved information.\\n\\n Press any key to continue _\\n\" , \"text_color\" : \"white\" }","title":"Surprise"},{"location":"examples/surprise/#surprise","text":"No screenshot available. To see the result, test the code!","title":"Surprise"},{"location":"examples/surprise/#code","text":"Strictly for geeks: 1 2 3 { \"page\" : 0 , \"id\" : 60 , \"obj\" : \"obj\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 320 , \"radius\" : 0 , \"hidden\" : 0 , \"bg_grad_dir\" : 0 , \"bg_color\" : \"#0000bb\" } { \"page\" : 0 , \"id\" : 61 , \"obj\" : \"btn\" , \"x\" : 80 , \"y\" : 50 , \"w\" : 80 , \"h\" : 20 , \"text\" : \"openHASP\" , \"text_font\" : 16 , \"bg_color\" : \"gray\" , \"bg_grad_color\" : \"gray\" , \"text_color\" : \"white\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 0 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 80 , \"w\" : 240 , \"h\" : 220 , \"text\" : \"A fatal exception has ocured in MCU.\\nThe application will be terminated.\\n\\n\\uE40A Touch the screen to terminate it.\\n\\uE40A Press CTRL+ALT+DEL again to\\n restart your computer. You will lose\\n any unsaved information.\\n\\n Press any key to continue _\\n\" , \"text_color\" : \"white\" }","title":"Code"},{"location":"examples/widgets/","text":"Widgets Demo ~ Page Layout ~ Code ~ This is a real-world example of a pages.jsonl file. Upload it to your plate's flash memory and restart the plate: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 45 , \"w\" : 220 , \"h\" : 55 , \"toggle\" : true , \"text\" : \"Touch me \\uE96B\" , \"text_font\" : 32 } { \"id\" : 2 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 100 , \"w\" : 220 , \"h\" : 55 , \"text\" : \" My Checkbox\" } { \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 30 , \"text\" : \"\\uE75A My Label\" , \"align\" : 1 , \"padh\" : 50 } { \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 55 , \"radius\" : 40 , \"radius20\" : 40 } { \"id\" : 5 , \"obj\" : \"led\" , \"x\" : 22 , \"y\" : 220 , \"w\" : 55 , \"h\" : 55 } { \"id\" : 6 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 160 , \"w\" : 130 , \"options\" : \"\\uE40A Apples\\n\\uE40A Oranges\\n\\uE40A Bananas\" } { \"id\" : 7 , \"obj\" : \"spinner\" , \"x\" : 160 , \"y\" : 140 , \"w\" : 70 , \"h\" : 70 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"id\" : 1 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 280 , \"click\" : 0 } { \"id\" : 11 , \"obj\" : \"gauge\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 150 , \"h\" : 150 , \"val\" : 75 } { \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 130 , \"y\" : 120 , \"w\" : 100 , \"h\" : 100 , \"val\" : 32 } { \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 28 , \"y\" : 65 , \"w\" : 70 , \"h\" : 70 , \"parentid\" : 12 , \"text\" : \"\\uE12C OK\" } { \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 20 , \"y\" : 225 , \"w\" : 200 , \"h\" : 20 , \"val\" : 75 } { \"id\" : 15 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 254 , \"w\" : 200 , \"h\" : 20 , \"val\" : 25 } { \"comment\" : \"---------- Page 3 ----------\" } { \"page\" : 3 , \"id\" : 1 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 20 , \"y\" : 10 , \"w\" : 200 , \"h\" : 200 } { \"page\" : 3 , \"id\" : 2 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 30 , \"y\" : 230 , \"w\" : 200 , \"h\" : 30 } { \"page\" : 4 , \"comment\" : \"---------- Page 4 ----------\" } { \"id\" : 1 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 } { \"id\" : 10 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 1\" } { \"id\" : 20 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 2\" } { \"id\" : 30 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 3\" } { \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 40 , \"y\" : 10 , \"w\" : 160 , \"rows\" : 2 , \"options\" : \"2020\\n2021\\n2022\\n2023\\n2024\" , \"parentid\" : 10 } { \"id\" : 12 , \"obj\" : \"img\" , \"src\" : \"L:/logo-medium.png\" , \"x\" : 45 , \"y\" : 80 , \"auto_size\" : 1 , \"w\" : 150 , \"parentid\" : 10 } { \"comment\" : \"---------- All Pages ----------\" } { \"page\" : 0 , \"id\" : 7 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE141\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 8 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 9 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE142\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"comment\" : \"---------- Limit page prev/next between 1 and 4 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"prev\" : 4 } { \"page\" : 4 , \"id\" : 0 , \"next\" : 1 } Upload this logo to the plate to see the img object. Note Your MCU needs to have on-board PSram in order for the img object to be properly displayed.","title":"Widgets Demo"},{"location":"examples/widgets/#widgets-demo","text":"","title":"Widgets Demo"},{"location":"examples/widgets/#page-layout","text":"","title":"Page Layout"},{"location":"examples/widgets/#code","text":"This is a real-world example of a pages.jsonl file. Upload it to your plate's flash memory and restart the plate: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 45 , \"w\" : 220 , \"h\" : 55 , \"toggle\" : true , \"text\" : \"Touch me \\uE96B\" , \"text_font\" : 32 } { \"id\" : 2 , \"obj\" : \"checkbox\" , \"x\" : 10 , \"y\" : 100 , \"w\" : 220 , \"h\" : 55 , \"text\" : \" My Checkbox\" } { \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 220 , \"h\" : 30 , \"text\" : \"\\uE75A My Label\" , \"align\" : 1 , \"padh\" : 50 } { \"id\" : 4 , \"obj\" : \"switch\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 55 , \"radius\" : 40 , \"radius20\" : 40 } { \"id\" : 5 , \"obj\" : \"led\" , \"x\" : 22 , \"y\" : 220 , \"w\" : 55 , \"h\" : 55 } { \"id\" : 6 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 160 , \"w\" : 130 , \"options\" : \"\\uE40A Apples\\n\\uE40A Oranges\\n\\uE40A Bananas\" } { \"id\" : 7 , \"obj\" : \"spinner\" , \"x\" : 160 , \"y\" : 140 , \"w\" : 70 , \"h\" : 70 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"id\" : 1 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 280 , \"click\" : 0 } { \"id\" : 11 , \"obj\" : \"gauge\" , \"x\" : 10 , \"y\" : 10 , \"w\" : 150 , \"h\" : 150 , \"val\" : 75 } { \"id\" : 12 , \"obj\" : \"linemeter\" , \"x\" : 130 , \"y\" : 120 , \"w\" : 100 , \"h\" : 100 , \"val\" : 32 } { \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 28 , \"y\" : 65 , \"w\" : 70 , \"h\" : 70 , \"parentid\" : 12 , \"text\" : \"\\uE12C OK\" } { \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 20 , \"y\" : 225 , \"w\" : 200 , \"h\" : 20 , \"val\" : 75 } { \"id\" : 15 , \"obj\" : \"slider\" , \"x\" : 20 , \"y\" : 254 , \"w\" : 200 , \"h\" : 20 , \"val\" : 25 } { \"comment\" : \"---------- Page 3 ----------\" } { \"page\" : 3 , \"id\" : 1 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 20 , \"y\" : 10 , \"w\" : 200 , \"h\" : 200 } { \"page\" : 3 , \"id\" : 2 , \"obj\" : \"cpicker\" , \"page\" : 3 , \"x\" : 30 , \"y\" : 230 , \"w\" : 200 , \"h\" : 30 } { \"page\" : 4 , \"comment\" : \"---------- Page 4 ----------\" } { \"id\" : 1 , \"obj\" : \"tabview\" , \"btn_pos\" : 1 } { \"id\" : 10 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 1\" } { \"id\" : 20 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 2\" } { \"id\" : 30 , \"obj\" : \"tab\" , \"parentid\" : 1 , \"text\" : \"Tab 3\" } { \"id\" : 11 , \"obj\" : \"roller\" , \"x\" : 40 , \"y\" : 10 , \"w\" : 160 , \"rows\" : 2 , \"options\" : \"2020\\n2021\\n2022\\n2023\\n2024\" , \"parentid\" : 10 } { \"id\" : 12 , \"obj\" : \"img\" , \"src\" : \"L:/logo-medium.png\" , \"x\" : 45 , \"y\" : 80 , \"auto_size\" : 1 , \"w\" : 150 , \"parentid\" : 10 } { \"comment\" : \"---------- All Pages ----------\" } { \"page\" : 0 , \"id\" : 7 , \"obj\" : \"btn\" , \"action\" : \"prev\" , \"x\" : 0 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE141\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"page\" : 0 , \"id\" : 8 , \"obj\" : \"btn\" , \"action\" : \"back\" , \"x\" : 80 , \"y\" : 290 , \"w\" : 80 , \"h\" : 32 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 24 } { \"page\" : 0 , \"id\" : 9 , \"obj\" : \"btn\" , \"action\" : \"next\" , \"x\" : 161 , \"y\" : 290 , \"w\" : 79 , \"h\" : 32 , \"text\" : \"\\uE142\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"text_font\" : 32 } { \"comment\" : \"---------- Limit page prev/next between 1 and 4 ----------\" } { \"page\" : 1 , \"id\" : 0 , \"prev\" : 4 } { \"page\" : 4 , \"id\" : 0 , \"next\" : 1 } Upload this logo to the plate to see the img object. Note Your MCU needs to have on-board PSram in order for the img object to be properly displayed.","title":"Code"},{"location":"firmware/","text":"Getting Started ~ openHASP currently supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended development boards and a TFT touchscreen to get you up-and-running in no time. Recommended Boards ~ table th:first-of-type { width: 12%; } table th:nth-of-type(2) { width: 22%; } table th:nth-of-type(3) { width: 22%; } table th:nth-of-type(4) { width: 22%; } table th:last-of-type { width: 22%; } Basic Standard Capacity Dev. Board* D1 mini ESP32 TTGO T7 v1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER CPU Freq. 240Mhz 240Mhz 240Mhz Ram 520Kb 520Kb 520Kb PSRam no yes yes Flash 4MB 4MB or 16MB 16MB Display ILI9341 SPI ILI9341 SPI ILI9341 SPI Touch XPT2046 SPI XPT2046 SPI XPT2046 SPI Network Wi-Fi Wi-Fi Wi-Fi Firmware Download Download Download Note Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries. For new projects we recommend ESP32-WROVER boards with PSram and minimal 8MB of flash. Tip Advanced users can build and compile custom hardware configurations using PlatformIO locally or online with Gitpod , however this is not currently supported. Recommended Display ~ Lolin TFT 2.4\" ~ ILI9341 SPI touchscreens with backlight dimming via PWM are quite cheap to get. An ILI9341 TFT display with SPI is required when using a pre-built binary. The touch controller needs to be the XPT2046 Resistive Touch driver. The Lolin TFT 2.4\" is plug-and-play with the 3 recommended ESP development boards. If you have another ESP or MCU, you can still use this display using jumper cables. You can also solder a row of headers at the bottom of the display to plug it into a breadboard. Therefor the Lolin TFT 2.4 Touch Shield is used as the development display of choice. Backlight Control ~ To use PWM dimming on the Lolin TFT 2.4\" you must connect the TFT-LED pin to either D1, D2 or D4. D1 is recommended for backlight control and configured by default. Do not use D3 for backlight control because it is already in use for touch! It is not recommended to use D4 for backlight control because it is already in use for PSram on the ESP32-Wrover. The D1-mini has D4 connected to on-board LED and boot fails if pulled LOW Compatible ESP boards ~ The Lolin TFT 2.4\" header is plug-and-play compatible with these development boards, no need to use any jumper cables: ESP32: Wemos D1 Mini ESP32 ( only solder the inner row of pin headers) TTGO T7 V1.5 MINI32 ESP32 ( only solder the inner row of pin headers) LOLIN D32 Pro V2.0.0 using an additional TFT cable ESP32-S2: Wemos S2 Mini ESP32-S2 ( only solder the outer row of pin headers) Note If you have a Lolin TFT 2.4\" Display and a compatible ESP development board, you have all the hardware that is needed. In that case you can skip ahead to the Firmware Installation . Alternative SPI Display ~ Any common ILI9341 320x240 4-wire SPI touchscreen with XPT2046 Resistive Touch driver can be used, like: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 You will need to connect the GPIO pins using jumper wires. Ready-made devices ~ Some manufacturers offer IoT devices which are ready to go with openHASP: ESP32-Touchdown FreeTouchDeck Lanbon L8","title":"Getting Started"},{"location":"firmware/#getting-started","text":"openHASP currently supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended development boards and a TFT touchscreen to get you up-and-running in no time.","title":"Getting Started"},{"location":"firmware/#recommended-boards","text":"table th:first-of-type { width: 12%; } table th:nth-of-type(2) { width: 22%; } table th:nth-of-type(3) { width: 22%; } table th:nth-of-type(4) { width: 22%; } table th:last-of-type { width: 22%; } Basic Standard Capacity Dev. Board* D1 mini ESP32 TTGO T7 v1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER CPU Freq. 240Mhz 240Mhz 240Mhz Ram 520Kb 520Kb 520Kb PSRam no yes yes Flash 4MB 4MB or 16MB 16MB Display ILI9341 SPI ILI9341 SPI ILI9341 SPI Touch XPT2046 SPI XPT2046 SPI XPT2046 SPI Network Wi-Fi Wi-Fi Wi-Fi Firmware Download Download Download Note Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries. For new projects we recommend ESP32-WROVER boards with PSram and minimal 8MB of flash. Tip Advanced users can build and compile custom hardware configurations using PlatformIO locally or online with Gitpod , however this is not currently supported.","title":"Recommended Boards"},{"location":"firmware/#recommended-display","text":"","title":"Recommended Display"},{"location":"firmware/#lolin-tft-24","text":"ILI9341 SPI touchscreens with backlight dimming via PWM are quite cheap to get. An ILI9341 TFT display with SPI is required when using a pre-built binary. The touch controller needs to be the XPT2046 Resistive Touch driver. The Lolin TFT 2.4\" is plug-and-play with the 3 recommended ESP development boards. If you have another ESP or MCU, you can still use this display using jumper cables. You can also solder a row of headers at the bottom of the display to plug it into a breadboard. Therefor the Lolin TFT 2.4 Touch Shield is used as the development display of choice.","title":"Lolin TFT 2.4\""},{"location":"firmware/#compatible-esp-boards","text":"The Lolin TFT 2.4\" header is plug-and-play compatible with these development boards, no need to use any jumper cables: ESP32: Wemos D1 Mini ESP32 ( only solder the inner row of pin headers) TTGO T7 V1.5 MINI32 ESP32 ( only solder the inner row of pin headers) LOLIN D32 Pro V2.0.0 using an additional TFT cable ESP32-S2: Wemos S2 Mini ESP32-S2 ( only solder the outer row of pin headers) Note If you have a Lolin TFT 2.4\" Display and a compatible ESP development board, you have all the hardware that is needed. In that case you can skip ahead to the Firmware Installation .","title":"Compatible ESP boards"},{"location":"firmware/#alternative-spi-display","text":"Any common ILI9341 320x240 4-wire SPI touchscreen with XPT2046 Resistive Touch driver can be used, like: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 You will need to connect the GPIO pins using jumper wires.","title":"Alternative SPI Display"},{"location":"firmware/#ready-made-devices","text":"Some manufacturers offer IoT devices which are ready to go with openHASP: ESP32-Touchdown FreeTouchDeck Lanbon L8","title":"Ready-made devices"},{"location":"firmware/esp32/","text":"Flash ESP32 ~ Online Installation ~ With Chrome or Edge you can flash the ESP32 directly from within the browser window using the openHASP Web installer . for releases, Dev/Beta use openHASP Web installer Nightly . If you have another browser then use the offline flash tools below to download and flash the ESP32. Download Firmware ~ Download the latest openHASP binaries from the openHASP Web installer or GitHub Releases page. You need to pick the correct binary files for your device: Get the full binary file for flashing over the serial port: e.g. d1-mini-esp32_ili9341_full_4MB_v0.7.0-rc9.bin Get the ota binary file for updating the firmware from the Web UI: e.g. d1-mini-esp32_ili9341_ota_v0.7.0-rc9.bin Note You can also download the nightly openHASP development .zip files from the Actions tab on Github. Select one of the latest \"workflows\" and scroll down to find zip files. You need to be logged in to download the firmware files. Flash ESP32 ~ Important When flashing openHASP onto the ESP32 for the first time, you need to flash it over serial using the full firmware binary file. You need to write the full binary to the ESP32 flash chip at address 0x0 . The full binary also contains a bootloader and partition scheme needed to properly boot the ESP32. Before starting the flash process you have to put the ESP into flash mode : Connect GPIO0 to GND before booting the device Power-on or reset the ESP32 while GPIO0 is connected to GND Start the flash process The actual procedure to flash the ESP32 depends on the tool used. Click on the tab below that matches your flash tool. Note ESPHome Flasher cannot flash the openHASP binary. Use one of the other tools below instead. ESPtool.py Tasmota-PyFlasher ESP Flash Tools 1 2 esptool.py --port COM1 erase_flash esptool.py --port COM1 --baud 921600 write_flash 0x0 d1-mini-esp32_ili9341_full_4MB_<version>.bin Change COM1 to the correct port on your computer. If you get an error at the end of the flash procedure, you can try with a lower the baudrate eg. 460800. Tasmota-PyFlasher is a simple GUI tool for flashing ESP32 firmware without any installation. Change COM7 to the correct port on your computer. Espressif provides their own Flash Download Tools for Windows. Change COM90 to the correct port on your computer.","title":"Flash ESP32"},{"location":"firmware/esp32/#flash-esp32","text":"","title":"Flash ESP32"},{"location":"firmware/esp32/#online-installation","text":"With Chrome or Edge you can flash the ESP32 directly from within the browser window using the openHASP Web installer . for releases, Dev/Beta use openHASP Web installer Nightly . If you have another browser then use the offline flash tools below to download and flash the ESP32.","title":"Online Installation"},{"location":"firmware/esp32/#download-firmware","text":"Download the latest openHASP binaries from the openHASP Web installer or GitHub Releases page. You need to pick the correct binary files for your device: Get the full binary file for flashing over the serial port: e.g. d1-mini-esp32_ili9341_full_4MB_v0.7.0-rc9.bin Get the ota binary file for updating the firmware from the Web UI: e.g. d1-mini-esp32_ili9341_ota_v0.7.0-rc9.bin Note You can also download the nightly openHASP development .zip files from the Actions tab on Github. Select one of the latest \"workflows\" and scroll down to find zip files. You need to be logged in to download the firmware files.","title":"Download Firmware"},{"location":"firmware/esp32/#flash-esp32_1","text":"Important When flashing openHASP onto the ESP32 for the first time, you need to flash it over serial using the full firmware binary file. You need to write the full binary to the ESP32 flash chip at address 0x0 . The full binary also contains a bootloader and partition scheme needed to properly boot the ESP32. Before starting the flash process you have to put the ESP into flash mode : Connect GPIO0 to GND before booting the device Power-on or reset the ESP32 while GPIO0 is connected to GND Start the flash process The actual procedure to flash the ESP32 depends on the tool used. Click on the tab below that matches your flash tool. Note ESPHome Flasher cannot flash the openHASP binary. Use one of the other tools below instead. ESPtool.py Tasmota-PyFlasher ESP Flash Tools 1 2 esptool.py --port COM1 erase_flash esptool.py --port COM1 --baud 921600 write_flash 0x0 d1-mini-esp32_ili9341_full_4MB_<version>.bin Change COM1 to the correct port on your computer. If you get an error at the end of the flash procedure, you can try with a lower the baudrate eg. 460800. Tasmota-PyFlasher is a simple GUI tool for flashing ESP32 firmware without any installation. Change COM7 to the correct port on your computer. Espressif provides their own Flash Download Tools for Windows. Change COM90 to the correct port on your computer.","title":"Flash ESP32"},{"location":"firmware/faq/","text":"Frequently Asked Questions ~ What is the difference between openHASP and HASPone ~ HASPone uses a d1-mini ESP8266 connected to a Nextion/TJC smart display via the serial port. HASPone is the go-to firmware for using a Nextion/TJC screen in your Home Automation setup. openHASP does not support Nextion/TJC displays because it needs to be able to drive the display directly. It was created specifically to eliminate the proprietary hardware and take control of the screen. So openHASP is a hard fork of the original HASwitchPlate project to run on open hardware. The display stays white ~ The good news is the backlight is working, but a white screen is typical of a problem with the pin assignment (software config) or wiring (hardware): Check the serial log when the plate boots and look for the TFT pin assignments. The configured GPIOs must match the connections on the display. If the pin configuration is OK then the next step is checking the connection from the ESP to the display: Check the solder connections or jumper wires for bad connections or shorts Test with a multi-meter if there is a good connection from the ESP pins to the display pins Try disconnecting the wires from the touch device and only test the display first Error: The firmware binary is invalid (magic byte=FF, should be E9) ~ ESPhome-Flasher does not recognize the openHASP full binary firmware correctly. It expects the firmware to be written to address 0x10000 and will throw a \"magic byte error\". The openHASP full binary is meant to be flashed to address 0x0 instead. Use ESPtool, Flash Download Tools or Tasmota-PyFlasher. Other question ~ For support using openHASP please find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum","title":"FAQ"},{"location":"firmware/faq/#frequently-asked-questions","text":"","title":"Frequently Asked Questions"},{"location":"firmware/faq/#what-is-the-difference-between-openhasp-and-haspone","text":"HASPone uses a d1-mini ESP8266 connected to a Nextion/TJC smart display via the serial port. HASPone is the go-to firmware for using a Nextion/TJC screen in your Home Automation setup. openHASP does not support Nextion/TJC displays because it needs to be able to drive the display directly. It was created specifically to eliminate the proprietary hardware and take control of the screen. So openHASP is a hard fork of the original HASwitchPlate project to run on open hardware.","title":"What is the difference between openHASP and HASPone"},{"location":"firmware/faq/#the-display-stays-white","text":"The good news is the backlight is working, but a white screen is typical of a problem with the pin assignment (software config) or wiring (hardware): Check the serial log when the plate boots and look for the TFT pin assignments. The configured GPIOs must match the connections on the display. If the pin configuration is OK then the next step is checking the connection from the ESP to the display: Check the solder connections or jumper wires for bad connections or shorts Test with a multi-meter if there is a good connection from the ESP pins to the display pins Try disconnecting the wires from the touch device and only test the display first","title":"The display stays white"},{"location":"firmware/faq/#error-the-firmware-binary-is-invalid-magic-byteff-should-be-e9","text":"ESPhome-Flasher does not recognize the openHASP full binary firmware correctly. It expects the firmware to be written to address 0x10000 and will throw a \"magic byte error\". The openHASP full binary is meant to be flashed to address 0x0 instead. Use ESPtool, Flash Download Tools or Tasmota-PyFlasher.","title":"Error: The firmware binary is invalid (magic byte=FF, should be E9)"},{"location":"firmware/faq/#other-question","text":"For support using openHASP please find us on Github, Discord or Home Assistant: Github Discussions Discord Chat Home Assistant Forum","title":"Other question"},{"location":"firmware/firmware-update/","text":"Firmware Update ~ Warning The partition layout of openHASP 0.7.0 has changed! Follow the Serial Update procedure if you are running v0.6.x. Over-The-Air ~ When openHASP 0.7.x is already running on the device you can upgrade the firmware from the Web UI. For Over-The-Air updates you need to use the ota binary files. HTTP Upload ~ Click 'Browse' to select the ota file from your computer and click 'Update Firmware'. The 'Target' should be 'Firmware'. HTTP Update ~ You can also enter the ota URL to download new firmware from a webserver on your network or from the internet. Both http and https links are supported but using https is recommended for additinal security. Some content providers -like Github- redirect links to a server which is closest to you. For safety reasons openHASP will not follow these redirect headers by default. This behaviour can be changed by setting 'Follow Redirects' to either 'Strict' or 'Always': Strict adheres to RFC2616 and only follows redirects using GET or HEAD methods Always will follow all redirects regardless of a used method, which is less secure Note You can also trigger an upgrade using the update command from the Serial console, telnet or MQTT. Arduino OTA ~ When you are developing locally it can be useful to update a plate Over-The-Air using Arduino OTA. The Arduino OTA service is not enabled in the official releases. For this option to work, the firmware has to be compiled with HASP_USE_ARDUINOOTA=1 enabled in include/user_config_override.h . Then update the platformio_override.ini with the IP address instead of a serial port: [env:lanbon_l8] ; upload_port = COM3 ; Disable serial upload ; monitor_port = COM3 ; Disable serial upload upload_protocol = espota ; Use Arduino OTA to flash the firmware over-the-air upload_port = 192.168.7.89 ; Specify the IP of the ESP upload_flags = --auth = haspadmin ; optional OTA password, none by default --port = 3232 ; optional remote port on the ESP, 3232 by default --host_port = 45678 ; optional local port for access through the firewall Serial Update ~ Warning Devices coming from 0.6.x with 4MB flash will be reformatted and loose all data!!! Devices with 8MB flash or more should retain the filesystem and user configuration. It is important to first make a full backup of the device: Download the files from the filesystem to your PC. Create a full backup of the flash chip using esptool.py Flash a full binary file onto the ESP32. The procedure is the same as the initial installation. Do not erase the flash first in this situation because that will destroy all files and settings!","title":"Firmware Update"},{"location":"firmware/firmware-update/#firmware-update","text":"Warning The partition layout of openHASP 0.7.0 has changed! Follow the Serial Update procedure if you are running v0.6.x.","title":"Firmware Update"},{"location":"firmware/firmware-update/#over-the-air","text":"When openHASP 0.7.x is already running on the device you can upgrade the firmware from the Web UI. For Over-The-Air updates you need to use the ota binary files.","title":"Over-The-Air"},{"location":"firmware/firmware-update/#http-upload","text":"Click 'Browse' to select the ota file from your computer and click 'Update Firmware'. The 'Target' should be 'Firmware'.","title":"HTTP Upload"},{"location":"firmware/firmware-update/#http-update","text":"You can also enter the ota URL to download new firmware from a webserver on your network or from the internet. Both http and https links are supported but using https is recommended for additinal security. Some content providers -like Github- redirect links to a server which is closest to you. For safety reasons openHASP will not follow these redirect headers by default. This behaviour can be changed by setting 'Follow Redirects' to either 'Strict' or 'Always': Strict adheres to RFC2616 and only follows redirects using GET or HEAD methods Always will follow all redirects regardless of a used method, which is less secure Note You can also trigger an upgrade using the update command from the Serial console, telnet or MQTT.","title":"HTTP Update"},{"location":"firmware/firmware-update/#arduino-ota","text":"When you are developing locally it can be useful to update a plate Over-The-Air using Arduino OTA. The Arduino OTA service is not enabled in the official releases. For this option to work, the firmware has to be compiled with HASP_USE_ARDUINOOTA=1 enabled in include/user_config_override.h . Then update the platformio_override.ini with the IP address instead of a serial port: [env:lanbon_l8] ; upload_port = COM3 ; Disable serial upload ; monitor_port = COM3 ; Disable serial upload upload_protocol = espota ; Use Arduino OTA to flash the firmware over-the-air upload_port = 192.168.7.89 ; Specify the IP of the ESP upload_flags = --auth = haspadmin ; optional OTA password, none by default --port = 3232 ; optional remote port on the ESP, 3232 by default --host_port = 45678 ; optional local port for access through the firewall","title":"Arduino OTA"},{"location":"firmware/firmware-update/#serial-update","text":"Warning Devices coming from 0.6.x with 4MB flash will be reformatted and loose all data!!! Devices with 8MB flash or more should retain the filesystem and user configuration. It is important to first make a full backup of the device: Download the files from the filesystem to your PC. Create a full backup of the flash chip using esptool.py Flash a full binary file onto the ESP32. The procedure is the same as the initial installation. Do not erase the flash first in this situation because that will destroy all files and settings!","title":"Serial Update"},{"location":"firmware/license/","text":"License ~ MIT License ~ openHASP is Copyright\u00a9 2019-2023 fvanroie, openhasp.com and contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Components ~ openHASP is building upon the existing work of the following open source developers: Core ~ HASwitchPlate , the original Arduino project, Copyright\u00a9 2019 Allen Derusha. HASwitchPlate is distributed under the terms of the MIT License . LVGL , Copyright\u00a9 2021 LVGL Kft LVGL is distributed under the terms of the MIT License . ArduinoJson , Copyright\u00a9 2014-2021 Benoit BLANCHON MIT License . MCU ~ LovyanGFX , Copyright\u00a9 2020 lovyan03 ( https://github.com/lovyan03 ) All rights reserved. LovyanGFX is distributed under the terms of the FreeBSD License TFT_eSPI , Copyright\u00a9 2020 Bodmer ( https://github.com/Bodmer ) All rights reserved. TFT_eSPI is distributed under the terms of the FreeBSD License Adafruit_GFX library , Copyright\u00a9 2012 Adafruit Industries All rights reserved. Adafruit_GFX is distributed under the terms of the BSD License PubSubClient Copyright\u00a9 2008-2020 Nicholas O'Leary MIT License . Logging engine is based on ArduinoLog , Copyright\u00a9 2017,2018 Thijs Elenbaas, MrRobot62, rahuldeo2047, NOX73, dhylands, Josha blemasle, mfalkvidd with modifications by fvanroie, netwize.be. ArduinoLog is distributed under the terms of the MIT License . QR Code generator Copyright\u00a9 Project Nayuki MIT License . AceButton Copyright\u00a9 2018 Brian T. Park MIT License . ArduinoStreamUtils Copyright\u00a9 2019 Benoit BLANCHON MIT License . Native Applications ~ paho.mqtt.c client library Copyright\u00a9 Eclipse Foundation Paho is distributed under the terms of the Eclipse Public License v2.0 Simple DirectMedia Layer library Copyright\u00a9 1997-2021 Sam Lantinga slouken@libsdl.org SDL 2.0 and newer are available under the zlib license Native Windows Application ~ mingw-w64 GCC for Windows 64 & 32 bits Copyright\u00a9 2009 - 2013 by the mingw-w64 project Mingw-w64 is free software and permissively-licensed. The details are located in the sources themselves. Website ~ Built with Material for MkDocs Copyright \u00a9 2016-2021 Martin Donath MIT License . Assets ~ Built-in font unscii (8pt) Copyright\u00a9 viznut. A public domain bitmapped Unicode font Built-in fonts use rasterized glyphs from the Roboto Consensed font Copyright\u00a9 2011 Google Inc. All Rights Reserved. Roboto Consensed is licensed under the Apache License, Version 2.0 . The built-in fonts, bootscreen, web UI and website all use the MaterialDesign Icons font, MaterialDesign Icons are licensed under the Apache License, Version 2.0 . The website incorporates Font Awesome , Copyright\u00a9 2017 Dave Gandy. Font Awesome is distributed under the terms of the SIL OFL 1.1 and MIT License .","title":"License"},{"location":"firmware/license/#license","text":"","title":"License"},{"location":"firmware/license/#mit-license","text":"openHASP is Copyright\u00a9 2019-2023 fvanroie, openhasp.com and contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.","title":"MIT License"},{"location":"firmware/license/#components","text":"openHASP is building upon the existing work of the following open source developers:","title":"Components"},{"location":"firmware/license/#core","text":"HASwitchPlate , the original Arduino project, Copyright\u00a9 2019 Allen Derusha. HASwitchPlate is distributed under the terms of the MIT License . LVGL , Copyright\u00a9 2021 LVGL Kft LVGL is distributed under the terms of the MIT License . ArduinoJson , Copyright\u00a9 2014-2021 Benoit BLANCHON MIT License .","title":"Core"},{"location":"firmware/license/#mcu","text":"LovyanGFX , Copyright\u00a9 2020 lovyan03 ( https://github.com/lovyan03 ) All rights reserved. LovyanGFX is distributed under the terms of the FreeBSD License TFT_eSPI , Copyright\u00a9 2020 Bodmer ( https://github.com/Bodmer ) All rights reserved. TFT_eSPI is distributed under the terms of the FreeBSD License Adafruit_GFX library , Copyright\u00a9 2012 Adafruit Industries All rights reserved. Adafruit_GFX is distributed under the terms of the BSD License PubSubClient Copyright\u00a9 2008-2020 Nicholas O'Leary MIT License . Logging engine is based on ArduinoLog , Copyright\u00a9 2017,2018 Thijs Elenbaas, MrRobot62, rahuldeo2047, NOX73, dhylands, Josha blemasle, mfalkvidd with modifications by fvanroie, netwize.be. ArduinoLog is distributed under the terms of the MIT License . QR Code generator Copyright\u00a9 Project Nayuki MIT License . AceButton Copyright\u00a9 2018 Brian T. Park MIT License . ArduinoStreamUtils Copyright\u00a9 2019 Benoit BLANCHON MIT License .","title":"MCU"},{"location":"firmware/license/#native-applications","text":"paho.mqtt.c client library Copyright\u00a9 Eclipse Foundation Paho is distributed under the terms of the Eclipse Public License v2.0 Simple DirectMedia Layer library Copyright\u00a9 1997-2021 Sam Lantinga slouken@libsdl.org SDL 2.0 and newer are available under the zlib license","title":"Native Applications"},{"location":"firmware/license/#website","text":"Built with Material for MkDocs Copyright \u00a9 2016-2021 Martin Donath MIT License .","title":"Website"},{"location":"firmware/license/#assets","text":"Built-in font unscii (8pt) Copyright\u00a9 viznut. A public domain bitmapped Unicode font Built-in fonts use rasterized glyphs from the Roboto Consensed font Copyright\u00a9 2011 Google Inc. All Rights Reserved. Roboto Consensed is licensed under the Apache License, Version 2.0 . The built-in fonts, bootscreen, web UI and website all use the MaterialDesign Icons font, MaterialDesign Icons are licensed under the Apache License, Version 2.0 . The website incorporates Font Awesome , Copyright\u00a9 2017 Dave Gandy. Font Awesome is distributed under the terms of the SIL OFL 1.1 and MIT License .","title":"Assets"},{"location":"firmware/wifi-setup/","text":"Wi-Fi Setup ~ At first boot, when no Wi-Fi setup is found, the device will create an initial Access Point for configuring the device. If the touchscreen is properly connected it will display a QR code, along with a temporary SSID and password, to connect to the device. Advanced Users To skip this step, Wi-Fi credentials can be saved into the .bin file when you compile the firmware yourself using customization . Either use the touchscreen interface or connect via a web browser to setup the credentials for your local Wi-Fi access point: Using Touchscreen ~ Tap on the screen to start a Touch Calibration sequence: Precisely touch the 4 corners as indicated Use the on-screen keyboard to enter your local SSID and password Tap on the Checkmark button in the lower righthand corner to save the settings The device will validate the entered credentials and reboot if they are correct. Using Wi-Fi Access-Point ~ Connect to the temporary Access Point by scanning the QR on the display, if available. Or Check the serial log for the SSID and password to connect. Once connected, your browser should automatically connect to http://192.168.4.1 (captive portal address) Enter your local SSID and password for joining the device to your wireless network Click Save Settings The device will automatically reboot and connect to your wireless LAN Using Command line ~ You can also directly configure the Wi-Fi settings via the serial console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Wi-Fi Setup"},{"location":"firmware/wifi-setup/#wi-fi-setup","text":"At first boot, when no Wi-Fi setup is found, the device will create an initial Access Point for configuring the device. If the touchscreen is properly connected it will display a QR code, along with a temporary SSID and password, to connect to the device. Advanced Users To skip this step, Wi-Fi credentials can be saved into the .bin file when you compile the firmware yourself using customization . Either use the touchscreen interface or connect via a web browser to setup the credentials for your local Wi-Fi access point:","title":"Wi-Fi Setup"},{"location":"firmware/wifi-setup/#using-touchscreen","text":"Tap on the screen to start a Touch Calibration sequence: Precisely touch the 4 corners as indicated Use the on-screen keyboard to enter your local SSID and password Tap on the Checkmark button in the lower righthand corner to save the settings The device will validate the entered credentials and reboot if they are correct.","title":"Using Touchscreen"},{"location":"firmware/wifi-setup/#using-wi-fi-access-point","text":"Connect to the temporary Access Point by scanning the QR on the display, if available. Or Check the serial log for the SSID and password to connect. Once connected, your browser should automatically connect to http://192.168.4.1 (captive portal address) Enter your local SSID and password for joining the device to your wireless network Click Save Settings The device will automatically reboot and connect to your wireless LAN","title":"Using Wi-Fi Access-Point"},{"location":"firmware/wifi-setup/#using-command-line","text":"You can also directly configure the Wi-Fi settings via the serial console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Using Command line"},{"location":"firmware/compiling/custom/","text":"Custom Code ~ To add your own custom code in the src/custom directory, you need to enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h . You can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop. Available Hooks ~ Create a file src/my_custom.h that defines all these custom hooks: src/my_custom.h #ifndef HASP_CUSTOM_H #define HASP_CUSTOM_H #if defined(HASP_USE_CUSTOM) #include \"hasplib.h\" void custom_setup (); void custom_loop (); void custom_every_second (); void custom_every_5seconds (); bool custom_pin_in_use ( uint8_t pin ); void custom_get_sensors ( JsonDocument & doc ); void custom_topic_payload ( const char * topic , const char * payload , uint8_t source ); #endif // HASP_USE_CUSTOM #endif // HASP_CUSTOM_H The custom_setup() function is called at boot. Use it to initialize variables, load libraries, configure GPIOs or sensors. The custom_loop() function is called every itteration of the main loop, much like the Arduino loop() function. It is very important to make the execution of this function very efficient without using any blocking code or delay() . Otherwise it will have an impact on the UI responsiveness and/or other time-sensitive code. custom_every_second() and custom_every_5seconds() functions are called every second and every 5 seconds respectively. You can use these to execute non-time-critical code. The function custom_pin_in_use() is used to indicate that a pin is in use. Return true if the pin used by your custom code. Use custom_get_sensors() to add a sensor key and value to the periodic sensor MQTT messages. The function is called every 30 seconds by default, but the teleperiod interval can be changed by the user. The doc variable is passed so you can add your JSON object too it. (see below) With custom_topic_payload() you can receive custom topic & payload messages. You can use the value of the topic and payload variables to set LVGL attributes or perform custom actions. source indicates the module from wich the command is received. ( TAG_MQTT , TAG_CONS , TAG_TELN , TAG_HTTP , ...) Customize functions ~ In src/my_custom.cpp you add the code to execute for each of the functions declared above. Setup ~ We keep a variable for tracking the last blink time. my_custom.h 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include \"hasplib.h\" #if defined(HASP_USE_CUSTOM) && true // <-- set this to true in your code #include \"hasp_debug.h\" #include \"custom/my_custom.h\" unsigned long last_blink = 0 ; bool blink_state = LOW ; void custom_setup () { // Initialization code here last_blink = millis (); pinMode ( LED_BUILTIN , OUTPUT ); randomSeed ( millis ()); } Loops ~ Next, check the time past since the last blink. This should execute very fast, do not use delay() or any blocking code. 9 10 11 12 13 14 15 16 17 18 19 20 21 void custom_loop () { // Non-blocking code here! if ( blink_speed && ( millis () - last_blink > blink_speed )) { if ( blink_state == LOW ) { blink_state = HIGH ; } else { blink_state = LOW ; } digitalWrite ( LED_BUILTIN , blink_state ); last_blink = millis (); } } We don't execute code at fixed intervals, so leave these functions blank: 29 30 31 32 33 34 35 36 37 void custom_every_second () { // Unused } void custom_every_5seconds () { // Unused } Declare pins ~ We need to tell the firmware which custom pins we have used: 18 19 20 21 22 23 24 25 26 27 bool custom_pin_in_use ( uint8_t pin ) { switch ( pin ) { case LED_BUILTIN : // Custom LED pin case 6 : // Custom Input pin return true ; default : return false ; } } Report Sensors ~ Here we can add data to the sensors MQTT messages that are sent periodically. You can add a simple Key-Value pair or a more complex JSON object if needed. void custom_get_sensors ( JsonDocument & doc ) { JsonObject sensor = doc . createNestedObject ( F ( \"Temperature\" )); // Add Key sensor [ F ( \"Temperature\" )] = random ( 256 ); // Set Value } Debug Output ~ By including #include \"hasp_debug.h\" we can also utilize LOG_*() functions to print debug output to the console: LOG_VERBOSE(TAG_CUSTOM, message [, args]) LOG_NOTICE(TAG_CUSTOM, message [, args]) LOG_TRACE(TAG_CUSTOM, message [, args]) LOG_ERROR(TAG_CUSTOM, message [, args]) MQTT Output ~ Use dispatch_state_subtopic(topic, payload) to send an MQTT message and payload to hasp/<plate>/state/topic . 1 2 3 4 5 void custom_every_5seconds () { LOG_VERBOSE ( TAG_CUSTOM , \"%d seconds have passsed...\" , 5 ); dispatch_state_subtopic ( \"my_topic\" , \"{ \\\" test \\\" :123}\" ); }","title":"Custom Code"},{"location":"firmware/compiling/custom/#custom-code","text":"To add your own custom code in the src/custom directory, you need to enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h . You can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop.","title":"Custom Code"},{"location":"firmware/compiling/custom/#available-hooks","text":"Create a file src/my_custom.h that defines all these custom hooks: src/my_custom.h #ifndef HASP_CUSTOM_H #define HASP_CUSTOM_H #if defined(HASP_USE_CUSTOM) #include \"hasplib.h\" void custom_setup (); void custom_loop (); void custom_every_second (); void custom_every_5seconds (); bool custom_pin_in_use ( uint8_t pin ); void custom_get_sensors ( JsonDocument & doc ); void custom_topic_payload ( const char * topic , const char * payload , uint8_t source ); #endif // HASP_USE_CUSTOM #endif // HASP_CUSTOM_H The custom_setup() function is called at boot. Use it to initialize variables, load libraries, configure GPIOs or sensors. The custom_loop() function is called every itteration of the main loop, much like the Arduino loop() function. It is very important to make the execution of this function very efficient without using any blocking code or delay() . Otherwise it will have an impact on the UI responsiveness and/or other time-sensitive code. custom_every_second() and custom_every_5seconds() functions are called every second and every 5 seconds respectively. You can use these to execute non-time-critical code. The function custom_pin_in_use() is used to indicate that a pin is in use. Return true if the pin used by your custom code. Use custom_get_sensors() to add a sensor key and value to the periodic sensor MQTT messages. The function is called every 30 seconds by default, but the teleperiod interval can be changed by the user. The doc variable is passed so you can add your JSON object too it. (see below) With custom_topic_payload() you can receive custom topic & payload messages. You can use the value of the topic and payload variables to set LVGL attributes or perform custom actions. source indicates the module from wich the command is received. ( TAG_MQTT , TAG_CONS , TAG_TELN , TAG_HTTP , ...)","title":"Available Hooks"},{"location":"firmware/compiling/custom/#customize-functions","text":"In src/my_custom.cpp you add the code to execute for each of the functions declared above.","title":"Customize functions"},{"location":"firmware/compiling/custom/#setup","text":"We keep a variable for tracking the last blink time. my_custom.h 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #include \"hasplib.h\" #if defined(HASP_USE_CUSTOM) && true // <-- set this to true in your code #include \"hasp_debug.h\" #include \"custom/my_custom.h\" unsigned long last_blink = 0 ; bool blink_state = LOW ; void custom_setup () { // Initialization code here last_blink = millis (); pinMode ( LED_BUILTIN , OUTPUT ); randomSeed ( millis ()); }","title":"Setup"},{"location":"firmware/compiling/custom/#loops","text":"Next, check the time past since the last blink. This should execute very fast, do not use delay() or any blocking code. 9 10 11 12 13 14 15 16 17 18 19 20 21 void custom_loop () { // Non-blocking code here! if ( blink_speed && ( millis () - last_blink > blink_speed )) { if ( blink_state == LOW ) { blink_state = HIGH ; } else { blink_state = LOW ; } digitalWrite ( LED_BUILTIN , blink_state ); last_blink = millis (); } } We don't execute code at fixed intervals, so leave these functions blank: 29 30 31 32 33 34 35 36 37 void custom_every_second () { // Unused } void custom_every_5seconds () { // Unused }","title":"Loops"},{"location":"firmware/compiling/custom/#declare-pins","text":"We need to tell the firmware which custom pins we have used: 18 19 20 21 22 23 24 25 26 27 bool custom_pin_in_use ( uint8_t pin ) { switch ( pin ) { case LED_BUILTIN : // Custom LED pin case 6 : // Custom Input pin return true ; default : return false ; } }","title":"Declare pins"},{"location":"firmware/compiling/custom/#report-sensors","text":"Here we can add data to the sensors MQTT messages that are sent periodically. You can add a simple Key-Value pair or a more complex JSON object if needed. void custom_get_sensors ( JsonDocument & doc ) { JsonObject sensor = doc . createNestedObject ( F ( \"Temperature\" )); // Add Key sensor [ F ( \"Temperature\" )] = random ( 256 ); // Set Value }","title":"Report Sensors"},{"location":"firmware/compiling/custom/#debug-output","text":"By including #include \"hasp_debug.h\" we can also utilize LOG_*() functions to print debug output to the console: LOG_VERBOSE(TAG_CUSTOM, message [, args]) LOG_NOTICE(TAG_CUSTOM, message [, args]) LOG_TRACE(TAG_CUSTOM, message [, args]) LOG_ERROR(TAG_CUSTOM, message [, args])","title":"Debug Output"},{"location":"firmware/compiling/custom/#mqtt-output","text":"Use dispatch_state_subtopic(topic, payload) to send an MQTT message and payload to hasp/<plate>/state/topic . 1 2 3 4 5 void custom_every_5seconds () { LOG_VERBOSE ( TAG_CUSTOM , \"%d seconds have passsed...\" , 5 ); dispatch_state_subtopic ( \"my_topic\" , \"{ \\\" test \\\" :123}\" ); }","title":"MQTT Output"},{"location":"firmware/compiling/customize/","text":"Customization ~ The file include\\user_config_override-template.h lists the options you have to customize your build. Settings applied here will act as factory defaults in the firmware. Check the file for the self-explanatory options. Some of the available possibilities are: WiFi Settings MQTT Settings OTA Server Settings Syslog Settings Timezone Interface Language Web interface coloring Built-in fonts choice GPIO Templates Services startup Copy it to include\\user_config_override.h and change the settins per your needs. Uncomment -DUSE_CONFIG_OVERRIDE in platformio_override.ini to ensure that the config overrides are taken into account during the compilation process. Custom code ~ It is possible to include your own custom code in the src/custom directory. If you enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h , you can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop.","title":"Customization"},{"location":"firmware/compiling/customize/#customization","text":"The file include\\user_config_override-template.h lists the options you have to customize your build. Settings applied here will act as factory defaults in the firmware. Check the file for the self-explanatory options. Some of the available possibilities are: WiFi Settings MQTT Settings OTA Server Settings Syslog Settings Timezone Interface Language Web interface coloring Built-in fonts choice GPIO Templates Services startup Copy it to include\\user_config_override.h and change the settins per your needs. Uncomment -DUSE_CONFIG_OVERRIDE in platformio_override.ini to ensure that the config overrides are taken into account during the compilation process.","title":"Customization"},{"location":"firmware/compiling/customize/#custom-code","text":"It is possible to include your own custom code in the src/custom directory. If you enable #define HASP_USE_CUSTOM 1 in your include\\user_config_override.h , you can start adding code by copying the template files as my_custom.h and my_custom.cpp . This will add the custom\\my_custom.h header to openHASP compilation and call the defined functions from the main loop.","title":"Custom code"},{"location":"firmware/compiling/gitpod/","text":"Compiling online with Gitpod ~ Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. If you don't want to install an IDE (Integrated Development Environment) like PlatformIO or ATOM on your computer, compiling your own firmware is a breeze using Gitpod . Gitpod is a web browser based online IDE. All you need to use it is to link your GitHub account (or make a new one here ). Gitpod will take care of all the necessary software package dependencies for you. Load openHASP project in Gitpod ~ Click on one of the links below, and that will automatically load Gitpod with openHASP prepared for creating your custom build: Release (for example 0.6.2): https://gitpod.io#https://github.com/HASwitchPlate/openHASP/tree/0.6.2 Development ( main branch): https://gitpod.io#https://github.com/HASwitchPlate/openHASP After Gitpod loads the project, you will be greeted by the main window. Choose the version you need ~ A copy of platformio_override-template.ini to platformio_override.ini will be readily prepared for you. Click platformio_override.ini to open it, and to select your firmware flavour for your hardware uncomment in the extra_configs section the platform of your hadware, for example for ESP32: [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini ; user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE and make sure you have your own user_config_override.h in place: (please consider before saving your wifi and mqtt credentials to an online cloud) [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE And finally select your supported hardware from the extra_default_envs section by uncommenting the corresponding line. For example to build firmware for Lanbon L8, you should remove that comment only: extra_default_envs = ; Comment unneeded environments or create extra ; arduitouch-esp32_ili9341 ; d1-mini-esp32_ili9341 ; d132-unoshield ; esp12e-st7735 ; esp32dev-mrb3511 ; esp32dev-ili9488 lanbon_l8 ; lolin-d32-pro_ili9341 ; my_custom_build ; nodemcu32s-raspi ; wt32-sc01 ; ttgo_esp32_poe-ili9341 Save the file by pressing Ctrl + S or selecting Save from the top-left menu. Note You can of course uncomment multiple lines, the system will make builds for each. Note that these environments rely on the platforms above so double-check that your hardware has the correct platform enabled in the extra_configs section! Warning If you build from a development branch, you may not get the expected results, as it may contain undocumented or buggy features. Also, most likely a development branch has verbose logging enabled by default which adversely affects performance (for example setting HASP_LOG_LEVEL back to LOG_LEVEL_TRACE may bring speed to normal, otherwise the plate may become laggy). Build the firmware ~ To generate your customized firmware build, type platformio run in the command line area at the bottom, and press Enter key. Download the build ~ After the build successfully finishes, you will be able to find the downloadable binaries on the left panel, in the build_output\\firmware folder.","title":"Compiling online with Gitpod"},{"location":"firmware/compiling/gitpod/#compiling-online-with-gitpod","text":"Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. If you don't want to install an IDE (Integrated Development Environment) like PlatformIO or ATOM on your computer, compiling your own firmware is a breeze using Gitpod . Gitpod is a web browser based online IDE. All you need to use it is to link your GitHub account (or make a new one here ). Gitpod will take care of all the necessary software package dependencies for you.","title":"Compiling online with Gitpod"},{"location":"firmware/compiling/gitpod/#load-openhasp-project-in-gitpod","text":"Click on one of the links below, and that will automatically load Gitpod with openHASP prepared for creating your custom build: Release (for example 0.6.2): https://gitpod.io#https://github.com/HASwitchPlate/openHASP/tree/0.6.2 Development ( main branch): https://gitpod.io#https://github.com/HASwitchPlate/openHASP After Gitpod loads the project, you will be greeted by the main window.","title":"Load openHASP project in Gitpod"},{"location":"firmware/compiling/gitpod/#choose-the-version-you-need","text":"A copy of platformio_override-template.ini to platformio_override.ini will be readily prepared for you. Click platformio_override.ini to open it, and to select your firmware flavour for your hardware uncomment in the extra_configs section the platform of your hadware, for example for ESP32: [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini ; user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE and make sure you have your own user_config_override.h in place: (please consider before saving your wifi and mqtt credentials to an online cloud) [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE And finally select your supported hardware from the extra_default_envs section by uncommenting the corresponding line. For example to build firmware for Lanbon L8, you should remove that comment only: extra_default_envs = ; Comment unneeded environments or create extra ; arduitouch-esp32_ili9341 ; d1-mini-esp32_ili9341 ; d132-unoshield ; esp12e-st7735 ; esp32dev-mrb3511 ; esp32dev-ili9488 lanbon_l8 ; lolin-d32-pro_ili9341 ; my_custom_build ; nodemcu32s-raspi ; wt32-sc01 ; ttgo_esp32_poe-ili9341 Save the file by pressing Ctrl + S or selecting Save from the top-left menu. Note You can of course uncomment multiple lines, the system will make builds for each. Note that these environments rely on the platforms above so double-check that your hardware has the correct platform enabled in the extra_configs section! Warning If you build from a development branch, you may not get the expected results, as it may contain undocumented or buggy features. Also, most likely a development branch has verbose logging enabled by default which adversely affects performance (for example setting HASP_LOG_LEVEL back to LOG_LEVEL_TRACE may bring speed to normal, otherwise the plate may become laggy).","title":"Choose the version you need"},{"location":"firmware/compiling/gitpod/#build-the-firmware","text":"To generate your customized firmware build, type platformio run in the command line area at the bottom, and press Enter key.","title":"Build the firmware"},{"location":"firmware/compiling/gitpod/#download-the-build","text":"After the build successfully finishes, you will be able to find the downloadable binaries on the left panel, in the build_output\\firmware folder.","title":"Download the build"},{"location":"firmware/compiling/local/","text":"Compiling locally ~ Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. The guide below will describe how to make your own build from source on your local PC. Install Visual Studio Code ~ on Linux on MacOS on Windows Additional packages on Linux: sudo apt update sudo apt install git python3-venv Clone openHASP ~ Make sure to add the --recursive parameter when cloning the project from GitHub. Otherwise git will not download the required submodules in the /lib subdirectory. To clone the current development version ( main branch): 1 git clone --recursive https://github.com/HASwitchPlate/openHASP If you already cloned openHASP without the --recursive parameter, you can fetch the submodules separately using: 1 git submodule update --init --recursive To switch to a different branch (for example 0.7.0-rc9 release) use: 1 2 3 4 git clone --recursive https://github.com/HASwitchPlate/openHASP cd openHASP git checkout 0 .7.0-rc9 git submodule update --init --recursive Open in PlatformIO ~ Open the project folder in Visual Studio Code . You will receive a popup to install PlatformIO IDE if it is not already installed. This will automatically install all PlatformIO dependencies and the MCU compiler frameworks needed. Restart Visual Studio Code when the PIO installation completes. Create a configuration ~ Copy platformio_override-template.ini to platformio_override.ini and uncomment the platforms for esp32 or esp32s2 : [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE : [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE Then Click on the \"Refresh Project tasks\" icon in PlatformIO to list all the configured environments. Compiling ~ MCU Environments ~ You can now run \"Build\" or \"Build All\" in PlatformIO to compile (all) the firmware. Native Linux build ~ For native linux_sdl builds, you also need: sudo apt update sudo apt install build-essential libsdl2-dev Native MacOS build ~ For native darwin_sdl builds, you also need Homebrew : 1 brew install gcc sdl2 Native Windows build ~ For native windows_sdl builds, you also need MingW: Use MSYS2 1 pacman -S mingw-w64-x86_64-gcc mingw-w64-x86_64-SDL2 Add the path to your Mingw-w64 bin folder to the Windows PATH environment variable (usually C:\\msys64\\mingw64\\bin ). See instruction, 4 .","title":"Compiling locally"},{"location":"firmware/compiling/local/#compiling-locally","text":"Even though openHASP is available in several pre-compiled firmware variants, sometimes the ready-to-flash binaries aren't enough. If you need to customize some features, or simply change some parameters, then you need to compile a firmware binary yourself. The guide below will describe how to make your own build from source on your local PC.","title":"Compiling locally"},{"location":"firmware/compiling/local/#install-visual-studio-code","text":"on Linux on MacOS on Windows Additional packages on Linux: sudo apt update sudo apt install git python3-venv","title":"Install Visual Studio Code"},{"location":"firmware/compiling/local/#clone-openhasp","text":"Make sure to add the --recursive parameter when cloning the project from GitHub. Otherwise git will not download the required submodules in the /lib subdirectory. To clone the current development version ( main branch): 1 git clone --recursive https://github.com/HASwitchPlate/openHASP If you already cloned openHASP without the --recursive parameter, you can fetch the submodules separately using: 1 git submodule update --init --recursive To switch to a different branch (for example 0.7.0-rc9 release) use: 1 2 3 4 git clone --recursive https://github.com/HASwitchPlate/openHASP cd openHASP git checkout 0 .7.0-rc9 git submodule update --init --recursive","title":"Clone openHASP"},{"location":"firmware/compiling/local/#open-in-platformio","text":"Open the project folder in Visual Studio Code . You will receive a popup to install PlatformIO IDE if it is not already installed. This will automatically install all PlatformIO dependencies and the MCU compiler frameworks needed. Restart Visual Studio Code when the PIO installation completes.","title":"Open in PlatformIO"},{"location":"firmware/compiling/local/#create-a-configuration","text":"Copy platformio_override-template.ini to platformio_override.ini and uncomment the platforms for esp32 or esp32s2 : [platformio] extra_configs = ; Uncomment or edit the lines to show more User Setups in the PIO sidebar ; user_setups/darwin_sdl/*.ini user_setups/esp32/*.ini user_setups/esp32s2/*.ini ; user_setups/linux_sdl/*.ini ; user_setups/stm32f4xx/*.ini ; user_setups/win32/*.ini If you use customization , remove the comment from the line -DUSE_CONFIG_OVERRIDE : [override] ; -- Hasp config options -------------------------------------- build_flags = ; -- Uncomment the next line to use the file include/user_config_override.h settings -DUSE_CONFIG_OVERRIDE Then Click on the \"Refresh Project tasks\" icon in PlatformIO to list all the configured environments.","title":"Create a configuration"},{"location":"firmware/compiling/local/#compiling","text":"","title":"Compiling"},{"location":"firmware/compiling/local/#mcu-environments","text":"You can now run \"Build\" or \"Build All\" in PlatformIO to compile (all) the firmware.","title":"MCU Environments"},{"location":"firmware/compiling/local/#native-linux-build","text":"For native linux_sdl builds, you also need: sudo apt update sudo apt install build-essential libsdl2-dev","title":"Native Linux build"},{"location":"firmware/compiling/local/#native-macos-build","text":"For native darwin_sdl builds, you also need Homebrew : 1 brew install gcc sdl2","title":"Native MacOS build"},{"location":"firmware/compiling/local/#native-windows-build","text":"For native windows_sdl builds, you also need MingW: Use MSYS2 1 pacman -S mingw-w64-x86_64-gcc mingw-w64-x86_64-SDL2 Add the path to your Mingw-w64 bin folder to the Windows PATH environment variable (usually C:\\msys64\\mingw64\\bin ). See instruction, 4 .","title":"Native Windows build"},{"location":"firmware/configuration/debug/","text":"Debug Settings ~ openHASP logs valuable information during its operation to the serial port, telnet console or syslog server. Use these settings to configure the debug output. Settings ~ Serial Port ~ Set the baudrate to use for the serial logging and console. Telemetry Period ~ This is the interval in seconds with which openHASP will send automatic statusupdate messages to the state/statusupdate topic. Syslog Server ~ Specify the hostname or IP address of the syslog server. Syslog Port ~ Specify the port of the syslog server. Syslog Protocol ~ Select the protocol used by your syslog backend. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Debug Settings"},{"location":"firmware/configuration/debug/#debug-settings","text":"openHASP logs valuable information during its operation to the serial port, telnet console or syslog server. Use these settings to configure the debug output.","title":"Debug Settings"},{"location":"firmware/configuration/debug/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/debug/#serial-port","text":"Set the baudrate to use for the serial logging and console.","title":"Serial Port"},{"location":"firmware/configuration/debug/#telemetry-period","text":"This is the interval in seconds with which openHASP will send automatic statusupdate messages to the state/statusupdate topic.","title":"Telemetry Period"},{"location":"firmware/configuration/debug/#syslog-server","text":"Specify the hostname or IP address of the syslog server.","title":"Syslog Server"},{"location":"firmware/configuration/debug/#syslog-port","text":"Specify the port of the syslog server.","title":"Syslog Port"},{"location":"firmware/configuration/debug/#syslog-protocol","text":"Select the protocol used by your syslog backend. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Syslog Protocol"},{"location":"firmware/configuration/display/","text":"Display Settings ~ Configure the overal settings of the display driver. Settings ~ Short Idle ~ When the display has not been touched for the Short Idle amount of seconds, an idle = short event will be sent out. Long Idle ~ When the display has not been touched for Long + Short Idle amount of seconds, an idle = long event will be sent out. The Long Idle period begins to count after the Short Idle period. Orientation ~ Rotate the display by the set number of degrees and optionally mirror the display as well. Invert Colors ~ Enable color inversion of the display. This can be enabled if the colors on the display are wrong e.g. cyan objects is displayed in orange . Show Pointer ~ Enable this option to show a mouse pointer. This helps with checking if the touches are correctly detected. The pointer is hidden automatically when the display is idle. Backlight Pin ~ Sets the GPIO pin which is used for PWM dimming of the backlight. Invert Backlight ~ By default openHASP will set the backlight pin HIGH to turn on the backlight. For some devices, the backlight will turn on when the pin is LOW instead. Enable Invert Backlight to swap the on/off behavior. Actions ~ Calibrate ~ Only available with XPT2046 resistive touchscreen controllers. Starts an on-screen calibration sequence. Run Anti Burn-in ~ Click this button to run the antiburn command, which will display white noise on the LCD for approximately 30 seconds. This can help to reduce ghosting of a static image on some displays. It also trains the pixels to show different colors which can prolong the lifespan of the display. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Display Settings"},{"location":"firmware/configuration/display/#display-settings","text":"Configure the overal settings of the display driver.","title":"Display Settings"},{"location":"firmware/configuration/display/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/display/#short-idle","text":"When the display has not been touched for the Short Idle amount of seconds, an idle = short event will be sent out.","title":"Short Idle"},{"location":"firmware/configuration/display/#long-idle","text":"When the display has not been touched for Long + Short Idle amount of seconds, an idle = long event will be sent out. The Long Idle period begins to count after the Short Idle period.","title":"Long Idle"},{"location":"firmware/configuration/display/#orientation","text":"Rotate the display by the set number of degrees and optionally mirror the display as well.","title":"Orientation"},{"location":"firmware/configuration/display/#invert-colors","text":"Enable color inversion of the display. This can be enabled if the colors on the display are wrong e.g. cyan objects is displayed in orange .","title":"Invert Colors"},{"location":"firmware/configuration/display/#show-pointer","text":"Enable this option to show a mouse pointer. This helps with checking if the touches are correctly detected. The pointer is hidden automatically when the display is idle.","title":"Show Pointer"},{"location":"firmware/configuration/display/#backlight-pin","text":"Sets the GPIO pin which is used for PWM dimming of the backlight.","title":"Backlight Pin"},{"location":"firmware/configuration/display/#invert-backlight","text":"By default openHASP will set the backlight pin HIGH to turn on the backlight. For some devices, the backlight will turn on when the pin is LOW instead. Enable Invert Backlight to swap the on/off behavior.","title":"Invert Backlight"},{"location":"firmware/configuration/display/#actions","text":"","title":"Actions"},{"location":"firmware/configuration/display/#calibrate","text":"Only available with XPT2046 resistive touchscreen controllers. Starts an on-screen calibration sequence.","title":"Calibrate"},{"location":"firmware/configuration/display/#run-anti-burn-in","text":"Click this button to run the antiburn command, which will display white noise on the LCD for approximately 30 seconds. This can help to reduce ghosting of a static image on some displays. It also trains the pixels to show different colors which can prolong the lifespan of the display. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Run Anti Burn-in"},{"location":"firmware/configuration/factory_reset/","text":"Factory Reset ~ You can remove all files and configuration settings with this button: Actions ~ Click 'Reset All Settings' to erase the files on the internal flash, EEPROM and NVS user configurations. Warning There is no confirmation message. This operation can not be undone. Command Line ~ Use the factoryreset command to clear all settings and restore them the plate to the default configuration: 1 factoryreset","title":"Factory Reset"},{"location":"firmware/configuration/factory_reset/#factory-reset","text":"You can remove all files and configuration settings with this button:","title":"Factory Reset"},{"location":"firmware/configuration/factory_reset/#actions","text":"Click 'Reset All Settings' to erase the files on the internal flash, EEPROM and NVS user configurations. Warning There is no confirmation message. This operation can not be undone.","title":"Actions"},{"location":"firmware/configuration/factory_reset/#command-line","text":"Use the factoryreset command to clear all settings and restore them the plate to the default configuration: 1 factoryreset","title":"Command Line"},{"location":"firmware/configuration/ftp/","text":"FTP Settings ~ Note: All FTP communication is unencrypted and setting credentials is only a simple security measure! The FTP server will only be started if a userand password have been configured. Anonymous access is not allowed for security reasons. Both active and passive modes are supported but you must limit the client to use only one transfer connection at a time. Settings ~ Username and Password ~ Enter the credentials required to access the FTP server. Port ~ Set the port for the FTP Server. Passive Port ~ Set the data port to be used in passive mode. Click 'Save Settings' to save the changes. A restart of the FTP service is needed to apply the settings. FTP Client Setup ~ Any FTP client should be able to connect to the FTP service on the plate. You must force the client to use only one connection at same time. Filezilla ~ For example to use FileZilla as FTP client configure the site settings like this: First, you must go on Manage site ==> New site and now set these parameters: General Settings ~ Select protocol FTP - File Transfer Protocol Select Only use plain FTP (insecure) Set your login and password Transfer Settings ~ Select Limit number of simultanious connections Set the Maximum number of connections to 1 Now you can connect to your device and manage its files using drag and drop.","title":"FTP Settings"},{"location":"firmware/configuration/ftp/#ftp-settings","text":"Note: All FTP communication is unencrypted and setting credentials is only a simple security measure! The FTP server will only be started if a userand password have been configured. Anonymous access is not allowed for security reasons. Both active and passive modes are supported but you must limit the client to use only one transfer connection at a time.","title":"FTP Settings"},{"location":"firmware/configuration/ftp/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/ftp/#ftp-client-setup","text":"Any FTP client should be able to connect to the FTP service on the plate. You must force the client to use only one connection at same time.","title":"FTP Client Setup"},{"location":"firmware/configuration/ftp/#filezilla","text":"For example to use FileZilla as FTP client configure the site settings like this: First, you must go on Manage site ==> New site and now set these parameters:","title":"Filezilla"},{"location":"firmware/configuration/gpio/","text":"GPIO Settings ~ You can attach external devices like buttons, switches, relays, lights or LEDs using the GPIO pins of the ESP. The Devices section of the documentation contains pin descriptions and ways to set them up for specific hardware configurations. When integrated with Home Assistant , the configured GPIOs will be added automatically during discovery as appropriate entities in the system. GPIO Overview ~ Input Pin ~ Pin ~ Select the GPIO number of the input pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO. Group ~ GPIOs and objects can be grouped together by specifying a groupid . The state of objects in the same group is altered by the value of this input. This allows for simple action-reaction scenarios without relying on a home automation system: Link a switch and relay together Link a push button and doorbell together The state of a digital input can only be on or off and will set all group members to either 100% or 0% of their maximum value. Note The grouping of multiple gpios and objects together is intended for simple actions only. More complex actions should be performed by a home automation system, without linking groupids together. Example jsonl To act on the relays directly from the switch objects on the screen, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 } Default state ~ The state of the input when it is not being engaged: i.e. the switch, button or sensor is idle (not active) : Normally Open : The default state interrupts the circuit Normally Closed : The default state completes the circuit Resistor ~ To avoid ghost events and RF interference each input should either have a pullup or pulldown resistor. This ensures the signal in the default state is always HIGH or LOW respectively. Most input pins have either an internal pullup or pulldown resistor that can be activated by the firmware. Check the documentation of your MCU whether the pin you want to use provides this functionality. If an internal pullup or pulldown resistor is not available on that pin you must add an external resistor and connect it either to 3.3V or GND . Internal Pullup : The pin is pulled HIGH internally by the firmware Internal Pulldown : The pin is pulled LOW internally by the firmware External Pullup : The pin is pulled HIGH by an external resistor External Pulldown : The pin is pulled LOW by an external resistor Type ~ Button A button gpio sends events to topic input# where # is the pin number. GPIO buttons send out events while they occur. The possible events are: down : Occurs when a button goes from depressed to pressed up : The button was released within a short time i.e. a short click has occurred long : A single LONG event is send when the button is still being pressed after the threshold time of 400ms release : The button is released after being pressing for a LONG threshold time. The values of objects or gpios with the same groupid will be set to maximum when the button is being pressed and to minimum when the button is released. Switch A switch gpio sends events to input# where # is the groupnumber. GPIO Switches send out their value when toggled: {\"val\":\"0\"} or {\"val\":\"1\"}. The values of objects or gpios in the same group will be set to maximum when the switch is turned on and to minimum when the switch is turned off. Idle State The input pins do not affect the idle state of the device. Only interacting with the touchscreen automatically resets the idle state. If you want a GPIO pin to wakeup the device then you should monitor its mqtt topic and use the idle and backlight commands appropriately. Output Pin ~ Pin ~ Select the GPIO number of the output pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO. Group ~ The applied value is normalized and proportionate to the value of the input object, much like a percentage: Binary objects, like a switch, checkbox or toggle button only pass along 0% and 100% values. Range objects, like a slider, arc slider, roller or drop-down list pass along a value between 0-65535, depending on their current min , max and val attributes. Type ~ Dimmable Lights: ~ Led L8-HD (EU) L8-HD (AU) Set the brightness of the light or LED between 0 and 255 when a value is received on output# where # is the groupnumber. When a led is controlled by a button or switch in the same group, it will be turned ON or OFF according to the state of the button or switch. When a led is controlled by a range object (slider, arc slider, roller, drop-down list) in the same group, the brightness will be proportional to the .val value of the object within its range ( min-max ). Example Consider a roller or drop-down list with 4 options: OFF , Low , Medium and High . The .val values can range from 0 to 3. These will set the brightness of the led to 0 (0%), 84 (33%), 170 (66%) and 255 (100%) respectively. For a roller or drop-down list with 5 options, .val ranges between 0 and 4. The brightness of the led increases 25% with each step. Moodlight: ~ Mood Red Mood Green Mood Blue Assigns the pin to an RGB channel of the moodlight. The three RGB channels can be controlled together using the moodlight command. Relays: ~ Light Relay Power Relay Set the relay ON or OFF when an event is received on output# where # is the groupnumber or from another group intput . When a relay is grouped with a button or switch in the same group, it will be turned ON or OFF according to the state of the button or switch. When a relay is controlled by a range object (slider, arc slider, roller, drop-down list) within the same group, the state will be be ON if the val value is larger then its min value. The various relay types (Light, Power) denote only the device class you want them to be autodetected as in Home Assistant: light vs. switch etc. Warning Attaching devices to mains power can be dangerous! Configuring gpios is done on your own responsibility . Be sure to test any system thoroughly using low voltages first. By using the firmware you accept the License . Use the hasp/ /command/output[x] topic (where x is the pin number) with an empty payload to query the current state of the relay. json linenums=\"1\"l hasp/my_plate/command/output27 hasp/my_plate/state/output27 {\"state\":\"off\"} PWM ~ Experimental Set the duty cycle of the pin between 0 and 4095 when a value is received on output# where # is the groupnumber or from another group intput . When the PWM gpio is grouped with a button or switch, its duty cycle is either set to full-duty or off according to the state of the button or switch. When the PWM gpio is grouped with range object (slider, arc slider, roller, drop-down list), the duty cycle is proportional to the .val value of the object within its range ( min-max ). Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"GPIO Settings"},{"location":"firmware/configuration/gpio/#gpio-settings","text":"You can attach external devices like buttons, switches, relays, lights or LEDs using the GPIO pins of the ESP. The Devices section of the documentation contains pin descriptions and ways to set them up for specific hardware configurations. When integrated with Home Assistant , the configured GPIOs will be added automatically during discovery as appropriate entities in the system.","title":"GPIO Settings"},{"location":"firmware/configuration/gpio/#gpio-overview","text":"","title":"GPIO Overview"},{"location":"firmware/configuration/gpio/#input-pin","text":"","title":"Input Pin"},{"location":"firmware/configuration/gpio/#pin","text":"Select the GPIO number of the input pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO.","title":"Pin"},{"location":"firmware/configuration/gpio/#group","text":"GPIOs and objects can be grouped together by specifying a groupid . The state of objects in the same group is altered by the value of this input. This allows for simple action-reaction scenarios without relying on a home automation system: Link a switch and relay together Link a push button and doorbell together The state of a digital input can only be on or off and will set all group members to either 100% or 0% of their maximum value. Note The grouping of multiple gpios and objects together is intended for simple actions only. More complex actions should be performed by a home automation system, without linking groupids together. Example jsonl To act on the relays directly from the switch objects on the screen, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 }","title":"Group"},{"location":"firmware/configuration/gpio/#default-state","text":"The state of the input when it is not being engaged: i.e. the switch, button or sensor is idle (not active) : Normally Open : The default state interrupts the circuit Normally Closed : The default state completes the circuit","title":"Default state"},{"location":"firmware/configuration/gpio/#resistor","text":"To avoid ghost events and RF interference each input should either have a pullup or pulldown resistor. This ensures the signal in the default state is always HIGH or LOW respectively. Most input pins have either an internal pullup or pulldown resistor that can be activated by the firmware. Check the documentation of your MCU whether the pin you want to use provides this functionality. If an internal pullup or pulldown resistor is not available on that pin you must add an external resistor and connect it either to 3.3V or GND . Internal Pullup : The pin is pulled HIGH internally by the firmware Internal Pulldown : The pin is pulled LOW internally by the firmware External Pullup : The pin is pulled HIGH by an external resistor External Pulldown : The pin is pulled LOW by an external resistor","title":"Resistor"},{"location":"firmware/configuration/gpio/#type","text":"Button A button gpio sends events to topic input# where # is the pin number. GPIO buttons send out events while they occur. The possible events are: down : Occurs when a button goes from depressed to pressed up : The button was released within a short time i.e. a short click has occurred long : A single LONG event is send when the button is still being pressed after the threshold time of 400ms release : The button is released after being pressing for a LONG threshold time. The values of objects or gpios with the same groupid will be set to maximum when the button is being pressed and to minimum when the button is released. Switch A switch gpio sends events to input# where # is the groupnumber. GPIO Switches send out their value when toggled: {\"val\":\"0\"} or {\"val\":\"1\"}. The values of objects or gpios in the same group will be set to maximum when the switch is turned on and to minimum when the switch is turned off. Idle State The input pins do not affect the idle state of the device. Only interacting with the touchscreen automatically resets the idle state. If you want a GPIO pin to wakeup the device then you should monitor its mqtt topic and use the idle and backlight commands appropriately.","title":"Type"},{"location":"firmware/configuration/gpio/#output-pin","text":"","title":"Output Pin"},{"location":"firmware/configuration/gpio/#pin_1","text":"Select the GPIO number of the output pin to use. Note Pins known to be in use will be hidden from this list of available pins. Check the documentation of your board to see which pins are free to be used as GPIO.","title":"Pin"},{"location":"firmware/configuration/gpio/#group_1","text":"The applied value is normalized and proportionate to the value of the input object, much like a percentage: Binary objects, like a switch, checkbox or toggle button only pass along 0% and 100% values. Range objects, like a slider, arc slider, roller or drop-down list pass along a value between 0-65535, depending on their current min , max and val attributes.","title":"Group"},{"location":"firmware/configuration/gpio/#type_1","text":"","title":"Type"},{"location":"firmware/configuration/hasp/","text":"HASP Design ~ You can configure the general look and feel for the interface by uploading your favorite fonts and selecting your favorite theme and color. UI Theme ~ Select one of the built-in themes to select the general style for the HASP interface. Primary Color ~ Select the base color for the built-in theme. Secondary Color ~ Accent color for the theme. Startup Layout ~ Enter the filename of the .jsonl you have uploaded to load the layout on startup. Startup Page ~ Select to the page number to display at startup. Startup Brightness ~ Select the brightness level of the display on startup. Note: The display must support the dim feature and GPIO for dim is set in display setup. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"HASP Design"},{"location":"firmware/configuration/hasp/#hasp-design","text":"You can configure the general look and feel for the interface by uploading your favorite fonts and selecting your favorite theme and color.","title":"HASP Design"},{"location":"firmware/configuration/hasp/#ui-theme","text":"Select one of the built-in themes to select the general style for the HASP interface.","title":"UI Theme"},{"location":"firmware/configuration/hasp/#primary-color","text":"Select the base color for the built-in theme.","title":"Primary Color"},{"location":"firmware/configuration/hasp/#secondary-color","text":"Accent color for the theme.","title":"Secondary Color"},{"location":"firmware/configuration/hasp/#startup-layout","text":"Enter the filename of the .jsonl you have uploaded to load the layout on startup.","title":"Startup Layout"},{"location":"firmware/configuration/hasp/#startup-page","text":"Select to the page number to display at startup.","title":"Startup Page"},{"location":"firmware/configuration/hasp/#startup-brightness","text":"Select the brightness level of the display on startup. Note: The display must support the dim feature and GPIO for dim is set in display setup. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Startup Brightness"},{"location":"firmware/configuration/http/","text":"HTTP Settings ~ You can restrict access to the web user interface. Note: All HTTP communication is unencrypted and setting credentials is only a simple security measure! Settings ~ Username and Password ~ Enter the credentials required to access the web interface. Click 'Save Settings' to activate immediately. If the username and/or password have been changed you need to enter the new values.","title":"HTTP Settings"},{"location":"firmware/configuration/http/#http-settings","text":"You can restrict access to the web user interface. Note: All HTTP communication is unencrypted and setting credentials is only a simple security measure!","title":"HTTP Settings"},{"location":"firmware/configuration/http/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/http/#username-and-password","text":"Enter the credentials required to access the web interface. Click 'Save Settings' to activate immediately. If the username and/or password have been changed you need to enter the new values.","title":"Username and Password"},{"location":"firmware/configuration/mqtt/","text":"MQTT Settings ~ All communication between openHASP and your Home Automation service is done over MQTT. You will need a functional MQTT Broker. Tip: Learn more about the protocol on MQTT Essentials Settings ~ Plate Name ~ The Plate Name is the unique identifier of your device on your MQTT Broker. For example, setting the Plate Name to plate35 will make the device listen and communicate on the main topic hasp/plate35/ Group Name ~ The Group Name is the unique identifier for a Group of devices. For example, the default Group Name is plates . This will make all devices in this group listen on the main topic hasp/plates/ This way you can send a command to all devices in the group at the same moment. Each devices will only respond on their own main Plate Name topic. Broker ~ Set the IP or hostname of your MQTT Broker service. Port ~ Set the port for your MQTT Broker. Username ~ Enter credentials if your MQTT Broker requires a Username. Password ~ Enter credentials if your MQTT Broker requires a Password. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings. Command Line ~ You can also configure the mqtt settings via the serial or telnet console: 1 2 3 4 5 6 hostname myPlateName mqtthost 192 .168.0.123 mqttport 1883 mqttuser myUsername mqttpass myPassword reboot","title":"MQTT Settings"},{"location":"firmware/configuration/mqtt/#mqtt-settings","text":"All communication between openHASP and your Home Automation service is done over MQTT. You will need a functional MQTT Broker. Tip: Learn more about the protocol on MQTT Essentials","title":"MQTT Settings"},{"location":"firmware/configuration/mqtt/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/mqtt/#plate-name","text":"The Plate Name is the unique identifier of your device on your MQTT Broker. For example, setting the Plate Name to plate35 will make the device listen and communicate on the main topic hasp/plate35/","title":"Plate Name"},{"location":"firmware/configuration/mqtt/#group-name","text":"The Group Name is the unique identifier for a Group of devices. For example, the default Group Name is plates . This will make all devices in this group listen on the main topic hasp/plates/ This way you can send a command to all devices in the group at the same moment. Each devices will only respond on their own main Plate Name topic.","title":"Group Name"},{"location":"firmware/configuration/mqtt/#broker","text":"Set the IP or hostname of your MQTT Broker service.","title":"Broker"},{"location":"firmware/configuration/mqtt/#port","text":"Set the port for your MQTT Broker.","title":"Port"},{"location":"firmware/configuration/mqtt/#username","text":"Enter credentials if your MQTT Broker requires a Username.","title":"Username"},{"location":"firmware/configuration/mqtt/#password","text":"Enter credentials if your MQTT Broker requires a Password. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Password"},{"location":"firmware/configuration/mqtt/#command-line","text":"You can also configure the mqtt settings via the serial or telnet console: 1 2 3 4 5 6 hostname myPlateName mqtthost 192 .168.0.123 mqttport 1883 mqttuser myUsername mqttpass myPassword reboot","title":"Command Line"},{"location":"firmware/configuration/time/","text":"Time Settings ~ The internal clock of the plate is synchronized with one or more NTP servers. The clock is used to display the time on the plate and in the log. To show the correct time for your area, please configure the corrent timezone. Settings ~ Region ~ Select the region or continent of the timezone you are in. This selection shows the timezones of that region or continent in the dropdown below. Timezone ~ Select the city or timezone you are in. The timezones shown in this list are filtered by the selected region above. NTP Servers ~ Enter the URL or IP address of up to 3 Network Time Servers to synchronized the internal clock with. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings. Command Line ~ You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Time Settings"},{"location":"firmware/configuration/time/#time-settings","text":"The internal clock of the plate is synchronized with one or more NTP servers. The clock is used to display the time on the plate and in the log. To show the correct time for your area, please configure the corrent timezone.","title":"Time Settings"},{"location":"firmware/configuration/time/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/time/#region","text":"Select the region or continent of the timezone you are in. This selection shows the timezones of that region or continent in the dropdown below.","title":"Region"},{"location":"firmware/configuration/time/#timezone","text":"Select the city or timezone you are in. The timezones shown in this list are filtered by the selected region above.","title":"Timezone"},{"location":"firmware/configuration/time/#ntp-servers","text":"Enter the URL or IP address of up to 3 Network Time Servers to synchronized the internal clock with. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"NTP Servers"},{"location":"firmware/configuration/time/#command-line","text":"You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Command Line"},{"location":"firmware/configuration/wifi/","text":"Wifi Settings ~ When using a wireless network adapter, you need to configure the SSID to connect. Settings ~ SSID ~ The name of the wireless network to connect to. Password ~ Optional password for the access point, if required. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings. Command Line ~ You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Wifi Settings"},{"location":"firmware/configuration/wifi/#wifi-settings","text":"When using a wireless network adapter, you need to configure the SSID to connect.","title":"Wifi Settings"},{"location":"firmware/configuration/wifi/#settings","text":"","title":"Settings"},{"location":"firmware/configuration/wifi/#ssid","text":"The name of the wireless network to connect to.","title":"SSID"},{"location":"firmware/configuration/wifi/#password","text":"Optional password for the access point, if required. Click 'Save Settings' to save your settings to the device. A restart is required to make the settings active. Navigate back to the Main Menu and click Restart to activate the settings.","title":"Password"},{"location":"firmware/configuration/wifi/#command-line","text":"You can also configure the wifi settings via the serial or telnet console: 1 2 3 ssid myAccessPointName pass myWifiPassword reboot","title":"Command Line"},{"location":"firmware/installation/esp8266/","text":"","title":"Esp8266"},{"location":"firmware/installation/installation/","text":"","title":"Installation"},{"location":"firmware/installation/stm32/","text":"","title":"Stm32"},{"location":"hardware/","text":"Getting Started ~ openHASP supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended devices, development boards and touchscreens to get you up-and-running in no time. Devices Recommendations ~ For new projects we recommend ESP32-S3 boards with at least 520 kB SRAM, 8MB of flash and 2MB PSram. A capacitive touchscreen is also highly prefered because it is more responsive over resistive touchscreens. Note We do not recommend using an ESP32-S2 because it only has 320 kB of SRAM. Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries. Supported Devices ~ Overview of supported devices:","title":"Getting Started"},{"location":"hardware/#getting-started","text":"openHASP supports the ESP32 family of microcontrollers. It needs a compatible micro-controller with drivers supporting the attached display, touch controller, storage and network. Below is a list of recommended devices, development boards and touchscreens to get you up-and-running in no time.","title":"Getting Started"},{"location":"hardware/#devices-recommendations","text":"For new projects we recommend ESP32-S3 boards with at least 520 kB SRAM, 8MB of flash and 2MB PSram. A capacitive touchscreen is also highly prefered because it is more responsive over resistive touchscreens. Note We do not recommend using an ESP32-S2 because it only has 320 kB of SRAM. Due to the large number of possible hardware options a selection of 3 popular ESP development boards has been made for the precompiled binaries.","title":"Devices Recommendations"},{"location":"hardware/#supported-devices","text":"Overview of supported devices:","title":"Supported Devices"},{"location":"hardware/adafruit/featherwing/","text":"Adafruit ~ openHASP runs on Adafruit's ESP32 Feather Boards and supports Adafruit's TFT Featherwing resistive touch screens. Build configurations and precompiled firmware binaries are available for these popular hardware combinations to help you get started quickly. Supported Boards ~ openHASP supports the following Adafruit Feather boards (and the many different versions and variations based on them) Adafruit HUZZAH32 - ESP32 Feather (4MB Flash, No PSRAM) Adafruit ESP32-S3 Feather (4MB Flash, 2MB PSRAM) Adafruit ESP32 Feather V2 (8MB Flash, 2MB PSRAM) These boards are virtually plug-and-play when combined with Adafruit TFT FeatherWing displays. Many of these boards come in versions with pre-soldered headers (no soldering required) !!! note \" Note\" Don't use the Adafruit ESP8266-based Feather HUZZAH board as it lacks both sufficient memory and MCU power. !!! note \" Note\" Boards with PSRAM are highly recommended, and required for image processing. Supported Displays ~ TFT FeatherWing - 2.4\" 320x240 Touchscreen (ILI9341 with STMPE610 resistive touch) TFT FeatherWing - 2.4\" 320x240 Touchscreen V2 (ILI9341 with TSC2007 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen (HX8357D with STMPE610 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen V2 : (HX8357D with TSC2007 resistive touch) Check out Adafruit's TFT Featherwing tutorial on learn.adafruit.com for detailed information and wiring diagrams. Backlight ~ By default, the display is always on and at its maximum brightness. To control backlight dimming or sleeping, you need to solder the LITE pin to a PWM output pin (e.g., GPIO 21 ). Product Videos ~ 2.4\" TFT FeatherWing ~ 2.4\" TFT FeatherWing V2 ~ 3.5\" TFT FeatherWing ~ 3.5\" TFT FeatherWing V2 ~ 3D Printed Cases ~ Check out these enclosures available on Thingiverse: 2.4\" TFT FeatherWing Enclosure 2.4\" TFT FeatherWing Weather Station 3.5\" TFT FeatherWing Table Top Case 3.5\" TFT FeatherWing Touch Deck About Adafruit Adafruit invests time and resources providing open source code and libraries, please support Adafruit and open-source hardware by purchasing products from Adafruit!","title":"Adafruit"},{"location":"hardware/adafruit/featherwing/#adafruit","text":"openHASP runs on Adafruit's ESP32 Feather Boards and supports Adafruit's TFT Featherwing resistive touch screens. Build configurations and precompiled firmware binaries are available for these popular hardware combinations to help you get started quickly.","title":"Adafruit"},{"location":"hardware/adafruit/featherwing/#supported-boards","text":"openHASP supports the following Adafruit Feather boards (and the many different versions and variations based on them) Adafruit HUZZAH32 - ESP32 Feather (4MB Flash, No PSRAM) Adafruit ESP32-S3 Feather (4MB Flash, 2MB PSRAM) Adafruit ESP32 Feather V2 (8MB Flash, 2MB PSRAM) These boards are virtually plug-and-play when combined with Adafruit TFT FeatherWing displays. Many of these boards come in versions with pre-soldered headers (no soldering required) !!! note \" Note\" Don't use the Adafruit ESP8266-based Feather HUZZAH board as it lacks both sufficient memory and MCU power. !!! note \" Note\" Boards with PSRAM are highly recommended, and required for image processing.","title":"Supported Boards"},{"location":"hardware/adafruit/featherwing/#supported-displays","text":"TFT FeatherWing - 2.4\" 320x240 Touchscreen (ILI9341 with STMPE610 resistive touch) TFT FeatherWing - 2.4\" 320x240 Touchscreen V2 (ILI9341 with TSC2007 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen (HX8357D with STMPE610 resistive touch) TFT FeatherWing - 3.5\" 480x320 Touchscreen V2 : (HX8357D with TSC2007 resistive touch) Check out Adafruit's TFT Featherwing tutorial on learn.adafruit.com for detailed information and wiring diagrams.","title":"Supported Displays"},{"location":"hardware/adafruit/featherwing/#backlight","text":"By default, the display is always on and at its maximum brightness. To control backlight dimming or sleeping, you need to solder the LITE pin to a PWM output pin (e.g., GPIO 21 ).","title":"Backlight"},{"location":"hardware/adafruit/featherwing/#product-videos","text":"","title":"Product Videos"},{"location":"hardware/adafruit/featherwing/#3d-printed-cases","text":"Check out these enclosures available on Thingiverse: 2.4\" TFT FeatherWing Enclosure 2.4\" TFT FeatherWing Weather Station 3.5\" TFT FeatherWing Table Top Case 3.5\" TFT FeatherWing Touch Deck About Adafruit Adafruit invests time and resources providing open source code and libraries, please support Adafruit and open-source hardware by purchasing products from Adafruit!","title":"3D Printed Cases"},{"location":"hardware/az-delivery/az-touch/","text":"AZ-Touch MOD ~ more images... The AZ-Touch MOD for ESP32 comes as kit with a touchscreen, wall enclosure, PCB and pinheaders. It includes either a 2.4\" or 2.8\" ILI9341 display with a XPT2046 resistive touchscreen controller. The PCB is pre-soldered except for the pinheaders, so some soldering is required. Pros Cons Versatile PCB options Bulky enclosure Limited soldering required Resistive touchpanel Choice of several ESP32 MCUs 9 to 35V DC-DC power input Breadboard area AZ-Touch MOD 2.4\" AZ-Touch MOD 2.8\" ESP32 dev boards ~ The AZ-Touch MOD PCB kit does not come with an MCU and needs to be purchased separately. The PCB is designed to be compatible with serveral development boards. There are two ESP32 footprint options for soldering headers onto the PCB: ESP32-DevKitC footprint with 2x19 pins Wemos D1 mini footprint with 2x8 pins The ESP32-DevKitC option is prefered because you can use more pins from the ESP32. Board ESP32-DevKitC-V4 ESP32-DevKitC-VE MCU ESP32-WROOM ESP32-WROVER Flash 4 MB 8 MB PSram No 8 MB Buy Buy Backlight Control ~ GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display. Documentation ~ Schematics Datasheet Assembly Guide Product Video ~ Backlight Control ~ GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display. GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display. Enclosure ~ Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch MOD PCB comes partly assembled with only the pin headers requiring some minimal soldering skills. The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D). Flashing ~ The ESP32 can be flashed over USB like any ESP32 development board.","title":"AZ-Touch MOD"},{"location":"hardware/az-delivery/az-touch/#az-touch-mod","text":"more images... The AZ-Touch MOD for ESP32 comes as kit with a touchscreen, wall enclosure, PCB and pinheaders. It includes either a 2.4\" or 2.8\" ILI9341 display with a XPT2046 resistive touchscreen controller. The PCB is pre-soldered except for the pinheaders, so some soldering is required. Pros Cons Versatile PCB options Bulky enclosure Limited soldering required Resistive touchpanel Choice of several ESP32 MCUs 9 to 35V DC-DC power input Breadboard area AZ-Touch MOD 2.4\" AZ-Touch MOD 2.8\"","title":"AZ-Touch MOD"},{"location":"hardware/az-delivery/az-touch/#esp32-dev-boards","text":"The AZ-Touch MOD PCB kit does not come with an MCU and needs to be purchased separately. The PCB is designed to be compatible with serveral development boards. There are two ESP32 footprint options for soldering headers onto the PCB: ESP32-DevKitC footprint with 2x19 pins Wemos D1 mini footprint with 2x8 pins The ESP32-DevKitC option is prefered because you can use more pins from the ESP32. Board ESP32-DevKitC-V4 ESP32-DevKitC-VE MCU ESP32-WROOM ESP32-WROVER Flash 4 MB 8 MB PSram No 8 MB Buy Buy","title":"ESP32 dev boards"},{"location":"hardware/az-delivery/az-touch/#backlight-control","text":"GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display.","title":"Backlight Control"},{"location":"hardware/az-delivery/az-touch/#documentation","text":"Schematics Datasheet Assembly Guide","title":"Documentation"},{"location":"hardware/az-delivery/az-touch/#product-video","text":"","title":"Product Video"},{"location":"hardware/az-delivery/az-touch/#backlight-control_1","text":"GPIO15 of the ESP32 is used for PWM dimming of the AZ-Touch MOD display. GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display.","title":"Backlight Control"},{"location":"hardware/az-delivery/az-touch/#enclosure","text":"Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch MOD PCB comes partly assembled with only the pin headers requiring some minimal soldering skills. The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D).","title":"Enclosure"},{"location":"hardware/az-delivery/az-touch/#flashing","text":"The ESP32 can be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/az-delivery/feather/","text":"AZ-Touch Feather ~ The AZ-Touch Feather also uses a 2.8\" TFT display but the footprint on the PCB is only suitable for the Adafruit Feather family of MCUs. This AZ-Touch Feather kit can also be used to run openHASP with the HUZZAH32 or SparkFun Thing Plus ESP32-WROOM development boards. Unlike the AZ-Touch MOD, the AZ-Touch Feather is a self-solder kit! You have to solder all components to the PCB yourself. For this reason the AZ-Touch MOD is recommended over the AZ-Touch Feather. Pros Cons Versatile PCB options All components need soldering Choice of several ESP32 MCUs Bulky enclosure 9 to 35V DC-DC power input Resistive touchpanel Breadboard area AZ-Touch Feather Feather dev boards ~ We do not offer pre-built binaries for the AZ-Touch Feather yet but these dev boards should work: Board HUZZAH32 SparkFun Thing Plus MCU ESP32-WROOM ESP32-WROOM Flash 4 MB 16 MB PSram No No Buy Buy Documentation ~ Schematics Datasheet Assembly Guide Backlight Control ~ GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display. Enclosure ~ Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch Feather contains loose components that you need to solder to the PCB yourself using the Assembly Guide . The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D). Flashing ~ The ESP32 can be flashed over USB like any ESP32 development board.","title":"AZ-Touch Feather"},{"location":"hardware/az-delivery/feather/#az-touch-feather","text":"The AZ-Touch Feather also uses a 2.8\" TFT display but the footprint on the PCB is only suitable for the Adafruit Feather family of MCUs. This AZ-Touch Feather kit can also be used to run openHASP with the HUZZAH32 or SparkFun Thing Plus ESP32-WROOM development boards. Unlike the AZ-Touch MOD, the AZ-Touch Feather is a self-solder kit! You have to solder all components to the PCB yourself. For this reason the AZ-Touch MOD is recommended over the AZ-Touch Feather. Pros Cons Versatile PCB options All components need soldering Choice of several ESP32 MCUs Bulky enclosure 9 to 35V DC-DC power input Resistive touchpanel Breadboard area AZ-Touch Feather","title":"AZ-Touch Feather"},{"location":"hardware/az-delivery/feather/#feather-dev-boards","text":"We do not offer pre-built binaries for the AZ-Touch Feather yet but these dev boards should work: Board HUZZAH32 SparkFun Thing Plus MCU ESP32-WROOM ESP32-WROOM Flash 4 MB 16 MB PSram No No Buy Buy","title":"Feather dev boards"},{"location":"hardware/az-delivery/feather/#documentation","text":"Schematics Datasheet Assembly Guide","title":"Documentation"},{"location":"hardware/az-delivery/feather/#backlight-control","text":"GPIO13 of the ESP32 is used for PWM dimming of the AZ-Touch Feather display.","title":"Backlight Control"},{"location":"hardware/az-delivery/feather/#enclosure","text":"Each AZ-Touch kit comes with a nice wall mounting enclosure for the 2.4\" or 2.8\" touchscreen. It enables you to mount your project permanently in your living room, corridor or other exposed places. The AZ-Touch Feather contains loose components that you need to solder to the PCB yourself using the Assembly Guide . The wall mounted enclosure measures 120mm x 80mm x 35mm (W x H x D).","title":"Enclosure"},{"location":"hardware/az-delivery/feather/#flashing","text":"The ESP32 can be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/dustin-watts/esp32-touchdown/","text":"ESP32 TouchDown ~ more images... Features ~ ESP32-WROOM-32D ILI9488 3.5\" (480*320) TFT screen in 4-wire SPI mode FT62x6 Capacitive Touch Controller APK2112 3.3V regulator MCP73831 battery management IC CP2102 USB-to-UART IC USB-C connector Piezo Speaker microSD card holder Battery voltage divider connected to GPIO35 Stemma / JST-PH I2C connector Compact size: 100x57x15mm This board was originaly created for the FreeTouchDeck project and the hardware is also open source. Due to the extensive documentation it was easy to port openHASP to the ESP32-Touchdown. Pros Cons 480x320 display 4 MB flash Capactitive touch No PSram Battery connector Battery sensor The speaker and SD card are not supported by openHASP 0.7.0-rc9. Info Any 3.7V (nominal voltage) LiPo will work, 2000mAh battery should suffice. Be sure to have the correct polarity. If the connecter at the end of the battery does not match, gently remove the pins from the connector and put them back in the correct orientation. Available from: Tindie Eplop (UK) PCBway Product Video ~ Backlight Control ~ To enable backlight control, make sure the solder jumper pad is in position 2-1: 3D Printed Cases ~ You can find several different 3D printable cases in the ESP32 TouchDown repository : Flashing ~ The ESP32 TouchDown can easily be flashed over USB like any ESP32 development board. GPIO Settings ~ These pins can be used freely as GPIOs: PCB Blueprint ~ The ESP32 TouchDown is fully Open Source Hardware : Schematics Bill of materials PCB layout Datasheets HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.vspi} ; Use VSPI hardware SPI bus ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_CS = 15 ;// Chip select control pin -D TFT_DC = 2 ;// Data Command control pin -D TFT_RST = 4 ;// Reset pin (could connect to RST pin) -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_DRIVER = 6336 ; XPT2606 Resistive touch panel driver -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 27 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V -D TOUCH_FREQUENCY = 400000 -D SPI_FREQUENCY = 27000000 -D SPI_READ_FREQUENCY = 16000000 ;endregion","title":"ESP32 TouchDown"},{"location":"hardware/dustin-watts/esp32-touchdown/#esp32-touchdown","text":"more images...","title":"ESP32 TouchDown"},{"location":"hardware/dustin-watts/esp32-touchdown/#features","text":"ESP32-WROOM-32D ILI9488 3.5\" (480*320) TFT screen in 4-wire SPI mode FT62x6 Capacitive Touch Controller APK2112 3.3V regulator MCP73831 battery management IC CP2102 USB-to-UART IC USB-C connector Piezo Speaker microSD card holder Battery voltage divider connected to GPIO35 Stemma / JST-PH I2C connector Compact size: 100x57x15mm This board was originaly created for the FreeTouchDeck project and the hardware is also open source. Due to the extensive documentation it was easy to port openHASP to the ESP32-Touchdown. Pros Cons 480x320 display 4 MB flash Capactitive touch No PSram Battery connector Battery sensor The speaker and SD card are not supported by openHASP 0.7.0-rc9. Info Any 3.7V (nominal voltage) LiPo will work, 2000mAh battery should suffice. Be sure to have the correct polarity. If the connecter at the end of the battery does not match, gently remove the pins from the connector and put them back in the correct orientation. Available from: Tindie Eplop (UK) PCBway","title":"Features"},{"location":"hardware/dustin-watts/esp32-touchdown/#product-video","text":"","title":"Product Video"},{"location":"hardware/dustin-watts/esp32-touchdown/#backlight-control","text":"To enable backlight control, make sure the solder jumper pad is in position 2-1:","title":"Backlight Control"},{"location":"hardware/dustin-watts/esp32-touchdown/#3d-printed-cases","text":"You can find several different 3D printable cases in the ESP32 TouchDown repository :","title":"3D Printed Cases"},{"location":"hardware/dustin-watts/esp32-touchdown/#flashing","text":"The ESP32 TouchDown can easily be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/dustin-watts/esp32-touchdown/#gpio-settings","text":"These pins can be used freely as GPIOs:","title":"GPIO Settings"},{"location":"hardware/dustin-watts/esp32-touchdown/#pcb-blueprint","text":"The ESP32 TouchDown is fully Open Source Hardware : Schematics Bill of materials PCB layout Datasheets","title":"PCB Blueprint"},{"location":"hardware/dustin-watts/esp32-touchdown/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.vspi} ; Use VSPI hardware SPI bus ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_CS = 15 ;// Chip select control pin -D TFT_DC = 2 ;// Data Command control pin -D TFT_RST = 4 ;// Reset pin (could connect to RST pin) -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_DRIVER = 6336 ; XPT2606 Resistive touch panel driver -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 27 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V -D TOUCH_FREQUENCY = 400000 -D SPI_FREQUENCY = 27000000 -D SPI_READ_FREQUENCY = 16000000 ;endregion","title":"HASP build_flags"},{"location":"hardware/dustin-watts/freetouchdeck/","text":"FreeTouchDeck ~ more images... Features ~ ESP32 DevKitC (38pin) ILI9488 TFT SPI 4-WIRE XPT2046 resistive touch controller This board is created for the FreeTouchDeck project and the PCB-combiner board is open source. Due to the extensive documentation it was easy to port openHASP to the FreeTouchDeck. Pros Cons 480x320 Display 4 MB flash Price No PSram Build Instructions Resistive touch This is a kit so you need to assemble the parts yourself. Some soldering skills are required. You can 3D print a custom enclosure. Product Video ~ 3D Printed Cases ~ You can find a 3D printable case on Thingiverse and Github . Flashing ~ The FreeTouchDeck can easily be flashed over USB like any ESP32 development board. GPIO Settings ~ These pins can be used freely as GPIOs: PCB Blueprint ~ The PCB Combiner is fully Open Source Hardware : Schematics PCB layout HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_MISO = 19 ; don't connect TFT SDO if other SPI devices share MISO -D TFT_MOSI = 23 -D TFT_SCLK = 18 -D TFT_CS = 15 ; Chip select control pin -D TFT_DC = 2 ; Data Command control pin -D TFT_RST = 4 ; Reset pin (could connect to RST pin) -D TFT_BCKL = 32 ; Default, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_CS = 21 -D TOUCH_DRIVER = 2046 ; XPT2606 Resistive touch panel driver -D SPI_FREQUENCY = 27000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 ;endregion","title":"FreeTouchDeck"},{"location":"hardware/dustin-watts/freetouchdeck/#freetouchdeck","text":"more images...","title":"FreeTouchDeck"},{"location":"hardware/dustin-watts/freetouchdeck/#features","text":"ESP32 DevKitC (38pin) ILI9488 TFT SPI 4-WIRE XPT2046 resistive touch controller This board is created for the FreeTouchDeck project and the PCB-combiner board is open source. Due to the extensive documentation it was easy to port openHASP to the FreeTouchDeck. Pros Cons 480x320 Display 4 MB flash Price No PSram Build Instructions Resistive touch This is a kit so you need to assemble the parts yourself. Some soldering skills are required. You can 3D print a custom enclosure.","title":"Features"},{"location":"hardware/dustin-watts/freetouchdeck/#product-video","text":"","title":"Product Video"},{"location":"hardware/dustin-watts/freetouchdeck/#3d-printed-cases","text":"You can find a 3D printable case on Thingiverse and Github .","title":"3D Printed Cases"},{"location":"hardware/dustin-watts/freetouchdeck/#flashing","text":"The FreeTouchDeck can easily be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/dustin-watts/freetouchdeck/#gpio-settings","text":"These pins can be used freely as GPIOs:","title":"GPIO Settings"},{"location":"hardware/dustin-watts/freetouchdeck/#pcb-blueprint","text":"The PCB Combiner is fully Open Source Hardware : Schematics PCB layout","title":"PCB Blueprint"},{"location":"hardware/dustin-watts/freetouchdeck/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ -D USER_SETUP_LOADED = 1 -D ILI9488_DRIVER = 1 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_MISO = 19 ; don't connect TFT SDO if other SPI devices share MISO -D TFT_MOSI = 23 -D TFT_SCLK = 18 -D TFT_CS = 15 ; Chip select control pin -D TFT_DC = 2 ; Data Command control pin -D TFT_RST = 4 ; Reset pin (could connect to RST pin) -D TFT_BCKL = 32 ; Default, configurable via web UI (e.g. 2 for D4) -D SUPPORT_TRANSACTIONS -D TOUCH_CS = 21 -D TOUCH_DRIVER = 2046 ; XPT2606 Resistive touch panel driver -D SPI_FREQUENCY = 27000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 ;endregion","title":"HASP build_flags"},{"location":"hardware/espressif/esp-s3-box/","text":"ESP-S3-BOX ~ Features ~ The ESP-BOX is a development kit by Espressif that features an ESP32-S3 with 8MB of PSRAM, a 320x240 2.4\" LCD and a TT21100 capacitive touchscreen controller. It also includes two microphones and a speaker, though these are not used by OpenHASP. A number of GPIOs are on the rear (or on the stand, if equipped). This devkit comes with a stand, which can be detached to hang the devkit on a wall instead. Power is supplied via USB-C, either plugged into the devkit or into its stand. Pros Cons With stand Poor viewing angles 8MB PSRAM Small display Capacitive touchscreen Gallery ~ Flashing ~ This devkit uses the native USB peripheral on the ESP32-S3. To put the devkit into flashing mode, hold the boot button (top button on the left edge) while clicking the reset button (bottom button on the left edge). After this, it can be flashed as usual. After flashing, click the reset button. You will need to open the serial port after flashing for the firmware to boot - in the UI, disable serial logging to fix this. Variations ~ ESP-S3-BOX-3 ~ This is not to be confused with the newer ESP-S3-BOX-3. The ESP-S3-BOX-3 uses the same display driver and may be compatible, but has not been tested yet. This variant also has 16MB of PSRAM. ESP-S3-BOX-LITE ~ A -LITE version also exists, which does not have a touch layer. The display controller is the same and should work for purely informational displays, though untested.","title":"Espressif"},{"location":"hardware/espressif/esp-s3-box/#esp-s3-box","text":"","title":"ESP-S3-BOX"},{"location":"hardware/espressif/esp-s3-box/#features","text":"The ESP-BOX is a development kit by Espressif that features an ESP32-S3 with 8MB of PSRAM, a 320x240 2.4\" LCD and a TT21100 capacitive touchscreen controller. It also includes two microphones and a speaker, though these are not used by OpenHASP. A number of GPIOs are on the rear (or on the stand, if equipped). This devkit comes with a stand, which can be detached to hang the devkit on a wall instead. Power is supplied via USB-C, either plugged into the devkit or into its stand. Pros Cons With stand Poor viewing angles 8MB PSRAM Small display Capacitive touchscreen","title":"Features"},{"location":"hardware/espressif/esp-s3-box/#gallery","text":"","title":"Gallery"},{"location":"hardware/espressif/esp-s3-box/#flashing","text":"This devkit uses the native USB peripheral on the ESP32-S3. To put the devkit into flashing mode, hold the boot button (top button on the left edge) while clicking the reset button (bottom button on the left edge). After this, it can be flashed as usual. After flashing, click the reset button. You will need to open the serial port after flashing for the firmware to boot - in the UI, disable serial logging to fix this.","title":"Flashing"},{"location":"hardware/espressif/esp-s3-box/#variations","text":"","title":"Variations"},{"location":"hardware/espressif/esp-s3-box/#esp-s3-box-3","text":"This is not to be confused with the newer ESP-S3-BOX-3. The ESP-S3-BOX-3 uses the same display driver and may be compatible, but has not been tested yet. This variant also has 16MB of PSRAM.","title":"ESP-S3-BOX-3"},{"location":"hardware/espressif/esp-s3-box/#esp-s3-box-lite","text":"A -LITE version also exists, which does not have a touch layer. The display controller is the same and should work for purely informational displays, though untested.","title":"ESP-S3-BOX-LITE"},{"location":"hardware/generic/ili9341-ips/","text":"ILI9341 IPS Panel ~ A 240x320 IPS TFT display with an ILI9341 controller and XPT2046 touch controller. Improvement over TN versions of the display with amazing view angles. Buy Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 Module Ground GND GND 2 Module Power 3.3v 3V3 VCC 3 SPI Clock GPIO18 TFT_SCLK CLK 4 Data Input GPIO23 TFT_MOSI MOSI 5 LCD Reset line GPIO15 TFT_RST RES 6 Data Command control GPIO5 TFT_DC DC 7 Backlight GPIO21 TFT_BCKL BLK 8 Data Output GPIO19 TFT_MISO MISO 9 Chip Select GPIO26 TFT_CS CS1 10 Touch Select GPIO17 TOUCH_CS CS2 11 Touch Interrupt N/C TOUCH_IRQ PEN SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. Custom build ~ Define a custom environment in platformio_override.ini and add a new esp32_ili9341_spi entry under extra_default_envs = If you've wired pins differently, change the values below. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 ;-- ILI9341 SPI version ------------------------ [env:esp32_ili9341_spi] platform = espressif32 platform_packages = framework-arduinoespressif32 framework = arduino board = esp32dev monitor_port = COM4 upload_port = ${env:esp32_ili9341_spi.monitor_port} monitor_filters = esp32_exception_decoder board_build.partitions = user_setups/esp32_partition_app1300k_spiffs1216k.csv build_flags = ${env.build_flags} ${esp32.build_flags} -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; see TFT_ROTATION values -D INVERT_COLORS = 1 ; to fix colors -D SPI_FREQUENCY = 60000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS ${esp32.vspi} ; Use VSPI hardware SPI bus : ; TFT_MISO=19 | TFT_MOSI=23 | TFT_SCLK=18 ; MISO = 8 | MOSI = 4 | CLK = 3 ; wiring recommendations, change pins according to your wiring -D TFT_DC = 5 ; DC, lcd pin 3 -D TFT_RST = 15 ; RES, lcd pin 5 -D TFT_BCKL = -1 ; BLK, lcd pin 7 (configurable via web UI (e.g. 21)) -D TFT_CS = 26 ; CS1, lcd pin 9 -D TOUCH_CS = 17 ; CS2, lcd pin 10 lib_deps = ${env.lib_deps} ${esp32.lib_deps} lib_ignore = ${env.lib_ignore} ${esp32.lib_ignore} extra_scripts = ${env.extra_scripts} ${esp32.extra_scripts}","title":"ILI9341 IPS"},{"location":"hardware/generic/ili9341-ips/#ili9341-ips-panel","text":"A 240x320 IPS TFT display with an ILI9341 controller and XPT2046 touch controller. Improvement over TN versions of the display with amazing view angles. Buy","title":"ILI9341 IPS Panel"},{"location":"hardware/generic/ili9341-ips/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 Module Ground GND GND 2 Module Power 3.3v 3V3 VCC 3 SPI Clock GPIO18 TFT_SCLK CLK 4 Data Input GPIO23 TFT_MOSI MOSI 5 LCD Reset line GPIO15 TFT_RST RES 6 Data Command control GPIO5 TFT_DC DC 7 Backlight GPIO21 TFT_BCKL BLK 8 Data Output GPIO19 TFT_MISO MISO 9 Chip Select GPIO26 TFT_CS CS1 10 Touch Select GPIO17 TOUCH_CS CS2 11 Touch Interrupt N/C TOUCH_IRQ PEN SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller.","title":"Pin Configuration"},{"location":"hardware/generic/ili9341-ips/#custom-build","text":"Define a custom environment in platformio_override.ini and add a new esp32_ili9341_spi entry under extra_default_envs = If you've wired pins differently, change the values below. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 ;-- ILI9341 SPI version ------------------------ [env:esp32_ili9341_spi] platform = espressif32 platform_packages = framework-arduinoespressif32 framework = arduino board = esp32dev monitor_port = COM4 upload_port = ${env:esp32_ili9341_spi.monitor_port} monitor_filters = esp32_exception_decoder board_build.partitions = user_setups/esp32_partition_app1300k_spiffs1216k.csv build_flags = ${env.build_flags} ${esp32.build_flags} -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; see TFT_ROTATION values -D INVERT_COLORS = 1 ; to fix colors -D SPI_FREQUENCY = 60000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS ${esp32.vspi} ; Use VSPI hardware SPI bus : ; TFT_MISO=19 | TFT_MOSI=23 | TFT_SCLK=18 ; MISO = 8 | MOSI = 4 | CLK = 3 ; wiring recommendations, change pins according to your wiring -D TFT_DC = 5 ; DC, lcd pin 3 -D TFT_RST = 15 ; RES, lcd pin 5 -D TFT_BCKL = -1 ; BLK, lcd pin 7 (configurable via web UI (e.g. 21)) -D TFT_CS = 26 ; CS1, lcd pin 9 -D TOUCH_CS = 17 ; CS2, lcd pin 10 lib_deps = ${env.lib_deps} ${esp32.lib_deps} lib_ignore = ${env.lib_ignore} ${esp32.lib_ignore} extra_scripts = ${env.extra_scripts} ${esp32.extra_scripts}","title":"Custom build"},{"location":"hardware/generic/mhs4001/","text":"MHS4001 ~ 6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor. Including the Vcc and Gnd pins, a total of 12 connections need to be made to the MCU: Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected NC 4 LED Backlight PWM 5V TFT_BCKL 5V 5-10 Not connected NC 11 Touch Interrupt NC TP_IRQ 12-13 Not connected NC 14 Module Ground GND GND 15-16 Not connected NC 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO23 TFT_MOSI LCD/SI/TP_SI 20 Not connected NC 21 Touch Panel Slave Out GPIO19 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO18 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO15 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS By default, pin 4 is normally connected to 5V. This turns the display backlight LED on all time. In order to control the backlight you can drive pin 4 of the display using a PNP transistor. The electronics circuit needed is not part of this diagram. SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the 7 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_CS = 15 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = -1 ; None -D TOUCH_CS = 22","title":"MHS4001"},{"location":"hardware/generic/mhs4001/#mhs4001","text":"6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor. Including the Vcc and Gnd pins, a total of 12 connections need to be made to the MCU:","title":"MHS4001"},{"location":"hardware/generic/mhs4001/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected NC 4 LED Backlight PWM 5V TFT_BCKL 5V 5-10 Not connected NC 11 Touch Interrupt NC TP_IRQ 12-13 Not connected NC 14 Module Ground GND GND 15-16 Not connected NC 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO23 TFT_MOSI LCD/SI/TP_SI 20 Not connected NC 21 Touch Panel Slave Out GPIO19 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO18 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO15 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS By default, pin 4 is normally connected to 5V. This turns the display backlight LED on all time. In order to control the backlight you can drive pin 4 of the display using a PNP transistor. The electronics circuit needed is not part of this diagram. SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller.","title":"Pin Configuration"},{"location":"hardware/generic/mhs4001/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/generic/mhs4001/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the 7 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_CS = 15 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = -1 ; None -D TOUCH_CS = 22","title":"HASP build_flags"},{"location":"hardware/generic/mrb3511/","text":"MRB3511 ~ 14 GPIOs are required to drive the 8-bit parallel display. Another 3 GPIOs are needed for the I\u00b2C touch sensor. Including the Vcc, Gnd an Rst pins, a total of 23 connections need to be made to the MCU: Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 Chip select control pin GPIO33 TFT_CS CS 2 Data Command control pin GPIO15 TFT_DC RS 3 Write control pin GPIO04 TFT_WR WR 4 Read control pin GPIO02 TFT_RD RD 5 LCD Reset pin GPIO32 TFT_RST RST 6 GPIO12 TFT_D0 D0 7 GPIO13 TFT_D1 D1 8 GPIO26 TFT_D2 D2 9 8-bit parallel data GPIO25 TFT_D3 D3 10 GPIO17 TFT_D4 D4 11 GPIO16 TFT_D5 D5 12 GPIO27 TFT_D6 D6 13 GPIO14 TFT_D7 D7 14-21 Not used, don't connect N/C D8-15 22 Module Ground GND GND 23 LED Backlight PWM GPIO5 TFT_BCKL BL 24-25 Module Power - VDD 26-27 Module Ground GND GND 28-29 Not connected NC 30 IO, I\u00b2C SDA GPIO21 TOUCH_SDA SDA 31 Touch Chip Interrupt GPIO34 TOUCH_IRQ INT 32 Not connected NC 33 Touch IC Reset 3.3V CRST 34 IO, I\u00b2C SCL GPIO22 TOUCH_SCL SCL You need to desolder the 0R resistor on the back side of the panel from the 16-bit position. Then solder back the 0R resistor in the 8-bit position. There are no pins shared between the touch controller and the LCD controller. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 mrb3511 = -D ESP32_PARALLEL = 1 -D ILI9488_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 911 ; GT911 Capacitive touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the 17 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.mrb3511} -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D TFT_CS = 33 ; Chip select control pin -D TFT_DC = 15 ; =RS; Data Command control pin - must use a pin in the range 0-31 -D TFT_RST = 32 ; Reset pin -D TFT_WR = 4 ; Write strobe control pin - must use a pin in the range 0-31 -D TFT_RD = 2 -D TFT_D0 = 12 ; Must use pins in the range 0-31 for the data bus -D TFT_D1 = 13 ; so a single register write sets/clears all bits -D TFT_D2 = 26 -D TFT_D3 = 25 -D TFT_D4 = 17 -D TFT_D5 = 16 -D TFT_D6 = 27 -D TFT_D7 = 14 -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 34 ; use 34-39 as these are input only pins -D TOUCH_RST = -1 ; not used, connected to 3.3V","title":"MRB3511"},{"location":"hardware/generic/mrb3511/#mrb3511","text":"14 GPIOs are required to drive the 8-bit parallel display. Another 3 GPIOs are needed for the I\u00b2C touch sensor. Including the Vcc, Gnd an Rst pins, a total of 23 connections need to be made to the MCU:","title":"MRB3511"},{"location":"hardware/generic/mrb3511/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 Chip select control pin GPIO33 TFT_CS CS 2 Data Command control pin GPIO15 TFT_DC RS 3 Write control pin GPIO04 TFT_WR WR 4 Read control pin GPIO02 TFT_RD RD 5 LCD Reset pin GPIO32 TFT_RST RST 6 GPIO12 TFT_D0 D0 7 GPIO13 TFT_D1 D1 8 GPIO26 TFT_D2 D2 9 8-bit parallel data GPIO25 TFT_D3 D3 10 GPIO17 TFT_D4 D4 11 GPIO16 TFT_D5 D5 12 GPIO27 TFT_D6 D6 13 GPIO14 TFT_D7 D7 14-21 Not used, don't connect N/C D8-15 22 Module Ground GND GND 23 LED Backlight PWM GPIO5 TFT_BCKL BL 24-25 Module Power - VDD 26-27 Module Ground GND GND 28-29 Not connected NC 30 IO, I\u00b2C SDA GPIO21 TOUCH_SDA SDA 31 Touch Chip Interrupt GPIO34 TOUCH_IRQ INT 32 Not connected NC 33 Touch IC Reset 3.3V CRST 34 IO, I\u00b2C SCL GPIO22 TOUCH_SCL SCL You need to desolder the 0R resistor on the back side of the panel from the 16-bit position. Then solder back the 0R resistor in the 8-bit position. There are no pins shared between the touch controller and the LCD controller.","title":"Pin Configuration"},{"location":"hardware/generic/mrb3511/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 mrb3511 = -D ESP32_PARALLEL = 1 -D ILI9488_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 911 ; GT911 Capacitive touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/generic/mrb3511/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the 17 GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 build_flags = ${flags.esp32_flags} ; -- TFT_eSPI build options ------------------------ ${lcd.mrb3511} -D TFT_BCKL = 5 ;None, configurable via web UI (e.g. 2 for D4) -D TFT_CS = 33 ; Chip select control pin -D TFT_DC = 15 ; =RS; Data Command control pin - must use a pin in the range 0-31 -D TFT_RST = 32 ; Reset pin -D TFT_WR = 4 ; Write strobe control pin - must use a pin in the range 0-31 -D TFT_RD = 2 -D TFT_D0 = 12 ; Must use pins in the range 0-31 for the data bus -D TFT_D1 = 13 ; so a single register write sets/clears all bits -D TFT_D2 = 26 -D TFT_D3 = 25 -D TFT_D4 = 17 -D TFT_D5 = 16 -D TFT_D6 = 27 -D TFT_D7 = 14 -D TOUCH_SDA = 21 -D TOUCH_SCL = 22 -D TOUCH_IRQ = 34 ; use 34-39 as these are input only pins -D TOUCH_RST = -1 ; not used, connected to 3.3V","title":"HASP build_flags"},{"location":"hardware/generic/msp-series/","text":"ILI9341 TFT Panel ~ Models: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 The \"red\" 240x320 TFT displays with an ILI9341 controller and XPT2046 touch controller are very common. Make sure to select the touch version when ordering these screens online. The U2 touch chip needs to be populated on the board. Gallery ~ Pin Configuration ~ Pin Function ESP32 Pin Config Name Display Pin 1 5V/3.3V power input 5V/3.3V VCC 2 Module Ground GND GND 3 Chip Select GPIO26 TFT_CS CS 4 LCD Reset line GPIO15 TFT_RST RESET 5 Data Command control GPIO5 TFT_DC DC 6 Data Input GPIO23 TFT_MOSI SDI(MOSI) 7 SPI Clock GPIO18 TFT_SCLK SCK 8 Backlight GPIO21 TFT_BCKL LED 9 Data Output (not used) GPIO19 or N/C TFT_MISO SDO(MISO) 10 Touch SPI Clock GPIO18 TFT_SCLK T_CLK 11 Touch Select GPIO17 TOUCH_CS T_CS 12 Touch Data Input GPIO23 TFT_MOSI T_DIN 13 Touch Data Output GPIO19 TFT_MISO T_DO 14 Touch Interrupt N/C T_IRQ SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. In some cases the pin 9 MISO of the LCD can prevent proper display initialization. This pin is not used by openHASP, so it can be left disconnected in case of issues. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 lolin24 = -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; Use default, see TFT_ROTATION values -D SPI_FREQUENCY = 40000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ ${lcd.lolin24} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_DC = 5 -D TFT_CS = 26 -D TFT_RST = -1 ; RST -D TFT_BCKL = -1 ; None, configurable via web UI (e.g. 21) -D TOUCH_CS = 17 ; (can also be 22 or 16) ;endregion","title":"MSP Series (Red PCB)"},{"location":"hardware/generic/msp-series/#ili9341-tft-panel","text":"Models: 2.4\" SKU: MSP2402 2.8\" SKU: MSP2807 3.2\" SKU: MSP3218 The \"red\" 240x320 TFT displays with an ILI9341 controller and XPT2046 touch controller are very common. Make sure to select the touch version when ordering these screens online. The U2 touch chip needs to be populated on the board.","title":"ILI9341 TFT Panel"},{"location":"hardware/generic/msp-series/#gallery","text":"","title":"Gallery"},{"location":"hardware/generic/msp-series/#pin-configuration","text":"Pin Function ESP32 Pin Config Name Display Pin 1 5V/3.3V power input 5V/3.3V VCC 2 Module Ground GND GND 3 Chip Select GPIO26 TFT_CS CS 4 LCD Reset line GPIO15 TFT_RST RESET 5 Data Command control GPIO5 TFT_DC DC 6 Data Input GPIO23 TFT_MOSI SDI(MOSI) 7 SPI Clock GPIO18 TFT_SCLK SCK 8 Backlight GPIO21 TFT_BCKL LED 9 Data Output (not used) GPIO19 or N/C TFT_MISO SDO(MISO) 10 Touch SPI Clock GPIO18 TFT_SCLK T_CLK 11 Touch Select GPIO17 TOUCH_CS T_CS 12 Touch Data Input GPIO23 TFT_MOSI T_DIN 13 Touch Data Output GPIO19 TFT_MISO T_DO 14 Touch Interrupt N/C T_IRQ SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. In some cases the pin 9 MISO of the LCD can prevent proper display initialization. This pin is not used by openHASP, so it can be left disconnected in case of issues.","title":"Pin Configuration"},{"location":"hardware/generic/msp-series/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 lolin24 = -D ILI9341_DRIVER = 1 -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 0 ; Use default, see TFT_ROTATION values -D SPI_FREQUENCY = 40000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D SPI_READ_FREQUENCY = 20000000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive SPI touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/generic/msp-series/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 build_flags = ${env.build_flags} ${esp32.build_flags} ;region -- TFT_eSPI build options ------------------------ ${lcd.lolin24} ${esp32.vspi} ; Use VSPI hardware SPI bus -D TFT_DC = 5 -D TFT_CS = 26 -D TFT_RST = -1 ; RST -D TFT_BCKL = -1 ; None, configurable via web UI (e.g. 21) -D TOUCH_CS = 17 ; (can also be 22 or 16) ;endregion","title":"HASP build_flags"},{"location":"hardware/golden-security/gs-t3e/","text":"GS-T3E ~ Models ~ EU model: 3 gang relay switch CN model: 4 gang relay switch Only the PCB revision v2.3 (20221205) is supported by openHASP. Specify that you want the new device with PCB revision v2.3 when ordering from known vendor Golden Security on Alibaba. Warning Do NOT buy PCB revision v1.23 (20220817) because the internal antenna connector is NOT soldered onto the board. Those devices will have no WiFi reception on the ESP32! This version is now discontinued, but some sellers might have old stock. Form factor ~ EU model: 86mm x 86mm CN model: info not available Maximum load is 200W per gang, 600W in total EU version. The models have the same recessed housing sliding into the wall, sized 50x50mm, with rounded corners creating a diameter of about 59mm. This makes them suitable for both EU and UK wall fixtures. The EU model fits in a properly deployed, standard 60mm round wall box and can be fixed with two side screws (use the screws which belong to the box instead of the ones shipped with the device). The CN model has not been tested yet. Features: ~ Input voltage 110-250V ~ 50-60Hz AC ESP32-S3-WROOM-1 (Xtensa-LX7 dual core 240MHz) 8 MB PSram - Octal SPI 16 MB flash - Quad SPI Capacitive GT911 touch screen Pros Cons 8 MB flash Tuya device with ZS3L Tuya chip on PCB (unused) 16 MB PSram Flash header pins not populated 480x480 HD IPS LCD Capactitive touch Built-in PSU Standard wallmount form factor both EU and UK Buy Note openHASP does not support the proprietary Tuya chip, but you can still flash the firmware and use the other GS-T3E features just fine. Packaging ~ Flashing ~ Disclaimer Never connect high-voltage when the panel is not properly secured in place. Device can be flashed by either using the USB port or the flash header pins and a FTDI serial programmer device. Steps to flash via USB: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect a Micro USB cable Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Steps to flash via UART: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect jumper wires: GND <--> GND 5V <--> 5V RX <--> RX (not reversed!) TX <--> TX (not reversed!) Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Once the connections are made, flash the GS-T3E ESP32 binary like on any other device. GPIO Settings ~ 3-gang EU version GS-T3E ~ Pin Mode GS-T3E Group Default 45 Output Relay L1 1 Low (Normal) 46 Output Relay L2 2 Low (Normal) 44 Output Relay L3 3 Low (Normal) Tip To configure the GPIOs as light switches at once for GS-T3E send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 655918 , 656172 , 655661 , 0 , 0 , 0 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721454 , 721708 , 721197 , 0 , 0 , 0 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 } Wiring Diagram ~ The switch supports this wiring configuration: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring. Product Video ~ Your browser does not support the video tag. Gallery ~","title":"Golden Security"},{"location":"hardware/golden-security/gs-t3e/#gs-t3e","text":"","title":"GS-T3E "},{"location":"hardware/golden-security/gs-t3e/#models","text":"EU model: 3 gang relay switch CN model: 4 gang relay switch Only the PCB revision v2.3 (20221205) is supported by openHASP. Specify that you want the new device with PCB revision v2.3 when ordering from known vendor Golden Security on Alibaba. Warning Do NOT buy PCB revision v1.23 (20220817) because the internal antenna connector is NOT soldered onto the board. Those devices will have no WiFi reception on the ESP32! This version is now discontinued, but some sellers might have old stock.","title":"Models"},{"location":"hardware/golden-security/gs-t3e/#packaging","text":"","title":"Packaging"},{"location":"hardware/golden-security/gs-t3e/#flashing","text":"Disclaimer Never connect high-voltage when the panel is not properly secured in place. Device can be flashed by either using the USB port or the flash header pins and a FTDI serial programmer device. Steps to flash via USB: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect a Micro USB cable Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Steps to flash via UART: Disengage the panel from high-voltage power Detach the panel from the PSU power supply Connect jumper wires: GND <--> GND 5V <--> 5V RX <--> RX (not reversed!) TX <--> TX (not reversed!) Connect IO0 to GND to activate flash mode! Press the KEY button to powercycle ( RESET ) the board Once the connections are made, flash the GS-T3E ESP32 binary like on any other device.","title":"Flashing"},{"location":"hardware/golden-security/gs-t3e/#gpio-settings","text":"","title":"GPIO Settings"},{"location":"hardware/golden-security/gs-t3e/#3-gang-eu-version-gs-t3e","text":"Pin Mode GS-T3E Group Default 45 Output Relay L1 1 Low (Normal) 46 Output Relay L2 2 Low (Normal) 44 Output Relay L3 3 Low (Normal) Tip To configure the GPIOs as light switches at once for GS-T3E send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 655918 , 656172 , 655661 , 0 , 0 , 0 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721454 , 721708 , 721197 , 0 , 0 , 0 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 }","title":"3-gang EU version GS-T3E"},{"location":"hardware/golden-security/gs-t3e/#wiring-diagram","text":"The switch supports this wiring configuration: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring.","title":"Wiring Diagram"},{"location":"hardware/golden-security/gs-t3e/#product-video","text":"Your browser does not support the video tag.","title":"Product Video"},{"location":"hardware/golden-security/gs-t3e/#gallery","text":"","title":"Gallery"},{"location":"hardware/lanbon/lanbon-l8/","text":"Lanbon L8 ~ Models ~ L8-HS: 3 Relays - load up to 200W/gang L8-HD: 1 Dimmer - load up to 200W/gang L8-HB: Boiler switch - load up to 16A L8-HT: Thermostat switch - not tested! Warning Choose a model that works with Apple HomeKit because those are WiFi versions with the internal antenna connected to the ESP32. Do NOT buy a version that is powered by Tuya Smart Life because the internal antenna is connected to the Tuya chip. Those devices will have very bad WiFi reception of the ESP32! Form factor ~ EU model: 86mm x 86mm US model: 120mm x 74mm All models are rated at AC 100-250V ~50-60Hz, the form factor can be a design choice regardless of the continental area. The models have the same recessed housing sliding into the wall, sized 50x50mm, with rounded corners creating a diameter of about 59mm. This makes them suitable for both EU and US wall fixtures. The EU model fits in a properly deployed, standard 60mm round wall box and can be fixed with two side screws (use the screws which belong to the box instead of the ones shipped with the device), the US model fits in the standard rectangular box and can be fixed through the oval holes located 3 1/4\" apart. The depth of the wall box has to be at least 35-40mm because some room is needed for the wires coming out straight of the device. Bezel Color ~ Black White Features: ~ Input voltage 110-250V ~ 50-60Hz AC ESP32-WROVER-B Capacitive touch screen Energy counter Pros Cons 8 MB flash Mood LEDS not uniform 8 MB PSram Capactitive touch Built-in PSU Energy monitor Standard wallmount form factor both EU and US Buy Note 1 An earlier revision V1.14 (20191203) of the PCB had an analog temperature sensor onboard. It was removed from V1.15 (20200521) of the PCB. You are likely not to get it when buying a recent switch. Note 2 There is a new V1.17 of the PCB with Tuya support. openHASP does not support the proprietary Tuya chip, but you can still flash the firmware and use the other Lanbon L8 features just fine. Contents ~ Flashing ~ Disclaimer Never connect high-voltage when the panel is not properly secured in place. You can follow this flashing guide on blakadder.com or this discussion post with instructions and photos to flash the firmware without having to open the device. Steps: Disengage the high-voltage power Detach the panel from the PSU power supply Connect RX , TX , IO0 , GND and 5V pins to the female pinheader Because there is no RESET pin, you need to powercycle the board while IO0 is connected to GND to activate flash mode Make sure you have a USB to serial adapter than can provide sufficient power on the 5V pin . Once the serial connections are made, flash the Lanbon-L8 ESP32 binary like on any other device. GPIO Settings ~ 3-gang version L8-HS ~ Pin Mode L8-HS Group Default 12 Output Relay (K3) 1 Low (Normal) 14 Output Relay 2 Low (Normal) 26 Output Mood Red 4 Low (Normal) 27 Output Relay 3 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs as light switches at once for L8-HS send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 197658 , 263456 , 329249 , 655628 , 655886 , 656155 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721164 , 721422 , 197658 , 721691 , 263456 , 329249 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 } Dimmer version L8-HD ~ Pin Mode L8-HD Group Default 12 Output Dimmer TX (K3) 1 Low (Normal) 26 Output Mood Red 4 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Warning There are two versions of the dimmer configuration: EU and AU . The protocol used to command the dimmer module differs between the two! Make sure that you have the correct type configured under your GPIO Output settings for pin 12 . Use the AU configuration for any 120V/US compatible dimmer modules. Tip To configure the GPIOs at once for L8-HD send to topic hasp/<nodename>/config/gpio a message with payload: EU version: 1 { \"config\" :[ 3211532 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]} AU/US version: 1 { \"config\" :[ 3277068 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]} Boiler version L8-HB ~ Pin Mode L8-HB Group Default 26 Output Mood Red 4 Low (Normal) 27 Output Relay 16A (K1) 1 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs at once for L8-HB send to topic hasp/<nodename>/config a message with payload: 1 { \"gpio\" :{ \"config\" :[ 197658 , 263456 , 329249 , 721179 , 14 , 27 , 0 , 0 ]}} Developer Note You can build your own firmware with GPIOs and many other parameters pre-configured in user_config_override.h as factory defaults for Lanbon L8. Wiring Diagrams ~ The switch supports several wiring configurations: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring. Product Video ~ Your browser does not support the video tag. Gallery ~ LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 st7789v = -D ST7789_DRIVER = 1 ;-D CGRAM_OFFSET=1 ; Library will add offsets required -D TFT_SDA_READ ; Read from display, it only provides an SDA pin -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 2 ; see TFT_ROTATION values ; -D TFT_INVERSION_OFF ; for normal colors ; -D TFT_RGB_ORDER=TFT_RGB ; Colour order Red-Green-Blue -D TFT_RGB_ORDER = TFT_BGR ; Colour order Blue-Green-Red -D SPI_FREQUENCY = 80000000 -D SPI_READ_FREQUENCY = 6000000 -D USER_SETUP_LOADED = 1 -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.ps_ram} ;region -- TFT_eSPI build options ------------------------ ${lcd.st7789v} -D LANBONL8 -D TFT_RST = 18 ; FCP pin2 RESET -D TFT_SCLK = 19 ; FCP pin3 SCL -D TFT_DC = 21 ; FCP pin4 D/C -D TFT_CS = 22 ; FCP pin5 CS -D TFT_MOSI = 23 ; FCP pin6 SDA -D TFT_MISO = 25 ; FCP pin7 SDO -D TFT_BCKL = 5 -D TOUCH_DRIVER = 6336 -D TOUCH_SDA = 4 -D TOUCH_SCL = 0 -D TOUCH_IRQ = -1 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V on FCP pin10 -D TOUCH_FREQUENCY = 400000 -D LED_RED = 26 -D LED_GREEN = 32 -D LED_BLUE = 33 -D RELAY_1 = 12 -D RELAY_2 = 24 -D RELAY_3 = 37 ;endregion","title":"Lanbon"},{"location":"hardware/lanbon/lanbon-l8/#lanbon-l8","text":"","title":"Lanbon L8"},{"location":"hardware/lanbon/lanbon-l8/#models","text":"L8-HS: 3 Relays - load up to 200W/gang L8-HD: 1 Dimmer - load up to 200W/gang L8-HB: Boiler switch - load up to 16A L8-HT: Thermostat switch - not tested! Warning Choose a model that works with Apple HomeKit because those are WiFi versions with the internal antenna connected to the ESP32. Do NOT buy a version that is powered by Tuya Smart Life because the internal antenna is connected to the Tuya chip. Those devices will have very bad WiFi reception of the ESP32!","title":"Models"},{"location":"hardware/lanbon/lanbon-l8/#contents","text":"","title":"Contents"},{"location":"hardware/lanbon/lanbon-l8/#flashing","text":"Disclaimer Never connect high-voltage when the panel is not properly secured in place. You can follow this flashing guide on blakadder.com or this discussion post with instructions and photos to flash the firmware without having to open the device. Steps: Disengage the high-voltage power Detach the panel from the PSU power supply Connect RX , TX , IO0 , GND and 5V pins to the female pinheader Because there is no RESET pin, you need to powercycle the board while IO0 is connected to GND to activate flash mode Make sure you have a USB to serial adapter than can provide sufficient power on the 5V pin . Once the serial connections are made, flash the Lanbon-L8 ESP32 binary like on any other device.","title":"Flashing"},{"location":"hardware/lanbon/lanbon-l8/#gpio-settings","text":"","title":"GPIO Settings"},{"location":"hardware/lanbon/lanbon-l8/#3-gang-version-l8-hs","text":"Pin Mode L8-HS Group Default 12 Output Relay (K3) 1 Low (Normal) 14 Output Relay 2 Low (Normal) 26 Output Mood Red 4 Low (Normal) 27 Output Relay 3 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs as light switches at once for L8-HS send to topic hasp/<nodename>/config/gpio a message with payload: 1 { \"config\" :[ 197658 , 263456 , 329249 , 655628 , 655886 , 656155 , 0 , 0 ]} Or for power switches : 1 { \"config\" :[ 721164 , 721422 , 197658 , 721691 , 263456 , 329249 , 0 , 0 ]} The difference is only the device class you want them to be autodetected as in Home Assistant: light vs. switch Example jsonl To create a page displaying the local relays as switches, try this very simple pages.jsonl : 1 2 3 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 40 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 1 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 122 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 2 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"switch\" , \"x\" : 30 , \"y\" : 205 , \"w\" : 180 , \"h\" : 75 , \"radius\" : 40 , \"radius20\" : 40 , \"groupid\" : 3 }","title":"3-gang version L8-HS"},{"location":"hardware/lanbon/lanbon-l8/#dimmer-version-l8-hd","text":"Pin Mode L8-HD Group Default 12 Output Dimmer TX (K3) 1 Low (Normal) 26 Output Mood Red 4 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Warning There are two versions of the dimmer configuration: EU and AU . The protocol used to command the dimmer module differs between the two! Make sure that you have the correct type configured under your GPIO Output settings for pin 12 . Use the AU configuration for any 120V/US compatible dimmer modules. Tip To configure the GPIOs at once for L8-HD send to topic hasp/<nodename>/config/gpio a message with payload: EU version: 1 { \"config\" :[ 3211532 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]} AU/US version: 1 { \"config\" :[ 3277068 , 197658 , 263456 , 329249 , 0 , 0 , 0 , 0 ]}","title":"Dimmer version L8-HD"},{"location":"hardware/lanbon/lanbon-l8/#boiler-version-l8-hb","text":"Pin Mode L8-HB Group Default 26 Output Mood Red 4 Low (Normal) 27 Output Relay 16A (K1) 1 Low (Normal) 32 Output Mood Green 5 Low (Normal) 33 Output Mood Blue 6 Low (Normal) Tip To configure the GPIOs at once for L8-HB send to topic hasp/<nodename>/config a message with payload: 1 { \"gpio\" :{ \"config\" :[ 197658 , 263456 , 329249 , 721179 , 14 , 27 , 0 , 0 ]}} Developer Note You can build your own firmware with GPIOs and many other parameters pre-configured in user_config_override.h as factory defaults for Lanbon L8.","title":"Boiler version L8-HB"},{"location":"hardware/lanbon/lanbon-l8/#wiring-diagrams","text":"The switch supports several wiring configurations: Warning Always follow the instructions from the installation guide and local safety regulations. Consult a licensed electrician when changing your electrical wiring.","title":"Wiring Diagrams"},{"location":"hardware/lanbon/lanbon-l8/#product-video","text":"Your browser does not support the video tag.","title":"Product Video"},{"location":"hardware/lanbon/lanbon-l8/#gallery","text":"","title":"Gallery"},{"location":"hardware/lanbon/lanbon-l8/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 st7789v = -D ST7789_DRIVER = 1 ;-D CGRAM_OFFSET=1 ; Library will add offsets required -D TFT_SDA_READ ; Read from display, it only provides an SDA pin -D TFT_WIDTH = 240 -D TFT_HEIGHT = 320 -D TFT_ROTATION = 2 ; see TFT_ROTATION values ; -D TFT_INVERSION_OFF ; for normal colors ; -D TFT_RGB_ORDER=TFT_RGB ; Colour order Red-Green-Blue -D TFT_RGB_ORDER = TFT_BGR ; Colour order Blue-Green-Red -D SPI_FREQUENCY = 80000000 -D SPI_READ_FREQUENCY = 6000000 -D USER_SETUP_LOADED = 1 -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/lanbon/lanbon-l8/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 build_flags = ${env.build_flags} ${esp32.build_flags} ${esp32.ps_ram} ;region -- TFT_eSPI build options ------------------------ ${lcd.st7789v} -D LANBONL8 -D TFT_RST = 18 ; FCP pin2 RESET -D TFT_SCLK = 19 ; FCP pin3 SCL -D TFT_DC = 21 ; FCP pin4 D/C -D TFT_CS = 22 ; FCP pin5 CS -D TFT_MOSI = 23 ; FCP pin6 SDA -D TFT_MISO = 25 ; FCP pin7 SDO -D TFT_BCKL = 5 -D TOUCH_DRIVER = 6336 -D TOUCH_SDA = 4 -D TOUCH_SCL = 0 -D TOUCH_IRQ = -1 ; not connected -D TOUCH_RST = -1 ; not used, connected to 3.3V on FCP pin10 -D TOUCH_FREQUENCY = 400000 -D LED_RED = 26 -D LED_GREEN = 32 -D LED_BLUE = 33 -D RELAY_1 = 12 -D RELAY_2 = 24 -D RELAY_3 = 37 ;endregion","title":"HASP build_flags"},{"location":"hardware/lilygo/lilygo-lily-pi/","text":"LilyGO\u00ae Lily Pi ~ Features ~ ESP32-WROVER ILI9481 or ST7796 3.5\" (480*320) TFT screen in 4-wire SPI mode FT6X36 or GT911 Capacitive Touch Controller CP2104 USB-to-UART IC USB-C connector DC 5-12V barrel jack (5.5x2.1mm) Relay HFD3 5V 2A microSD card holder Real Time Clock PCF8563 Battery voltage divider connected to GPIO35 GPIO output via USB-A type connectors The Lily Pi is designed to resemble the Raspberry Pi appearance. The PCB layout and ports also mimmicks the Rasberry Pi. There is even the familiar 2x20 expansion port inside that match the Raspberry Pi GPIO pinout. Some Rpi expansion boards could work on this PCB too depending on the pins used. Pros Cons 480x320 display Non-standard USB-A connectors as GPIO 16 MB flash 8 MB PSram Capacitive Touchscreen The RTC and SD card are not supported by openHASP 0.7.0-rc9. Models ~ Model TN ST7796 FT6236 IPS ILI9481 GT911 SKU K113 K113-01 Resolution 480x320 480x320 TFT controller ST7796 ILI9481 Interface SPI SPI Touchscreen Capacitive Capacitive Touch controller FT6236 GT911 Screen dimming yes yes Buy AliExpress Tindie Buy AliExpress Tindie Video ~ Backlight Control ~ The GPIO that controls the backlight is GPIO12 . Documentation ~ The Lily Pi comes with the following information cards describing all the GPIOs used: Flashing ~ The LilyGO Lily Pi can easily be flashed over USB like any ESP32 development board. Dimensions ~ Size: 99.7 x 62.5 x 31.2mm","title":"Lily Pi"},{"location":"hardware/lilygo/lilygo-lily-pi/#lilygo-lily-pi","text":"","title":"LilyGO\u00ae Lily Pi"},{"location":"hardware/lilygo/lilygo-lily-pi/#features","text":"ESP32-WROVER ILI9481 or ST7796 3.5\" (480*320) TFT screen in 4-wire SPI mode FT6X36 or GT911 Capacitive Touch Controller CP2104 USB-to-UART IC USB-C connector DC 5-12V barrel jack (5.5x2.1mm) Relay HFD3 5V 2A microSD card holder Real Time Clock PCF8563 Battery voltage divider connected to GPIO35 GPIO output via USB-A type connectors The Lily Pi is designed to resemble the Raspberry Pi appearance. The PCB layout and ports also mimmicks the Rasberry Pi. There is even the familiar 2x20 expansion port inside that match the Raspberry Pi GPIO pinout. Some Rpi expansion boards could work on this PCB too depending on the pins used. Pros Cons 480x320 display Non-standard USB-A connectors as GPIO 16 MB flash 8 MB PSram Capacitive Touchscreen The RTC and SD card are not supported by openHASP 0.7.0-rc9.","title":"Features"},{"location":"hardware/lilygo/lilygo-lily-pi/#models","text":"Model TN ST7796 FT6236 IPS ILI9481 GT911 SKU K113 K113-01 Resolution 480x320 480x320 TFT controller ST7796 ILI9481 Interface SPI SPI Touchscreen Capacitive Capacitive Touch controller FT6236 GT911 Screen dimming yes yes Buy AliExpress Tindie Buy AliExpress Tindie","title":"Models"},{"location":"hardware/lilygo/lilygo-lily-pi/#video","text":"","title":"Video"},{"location":"hardware/lilygo/lilygo-lily-pi/#backlight-control","text":"The GPIO that controls the backlight is GPIO12 .","title":"Backlight Control"},{"location":"hardware/lilygo/lilygo-lily-pi/#documentation","text":"The Lily Pi comes with the following information cards describing all the GPIOs used:","title":"Documentation"},{"location":"hardware/lilygo/lilygo-lily-pi/#flashing","text":"The LilyGO Lily Pi can easily be flashed over USB like any ESP32 development board.","title":"Flashing"},{"location":"hardware/lilygo/lilygo-lily-pi/#dimensions","text":"Size: 99.7 x 62.5 x 31.2mm","title":"Dimensions"},{"location":"hardware/lilygo/lilygo-t-display-s3/","text":"LilyGO\u00ae T-Display-S3 ~ Warning The configuration for this board is under development and not finilized yet. LILYGO\u00ae T-Display-S3 ESP32-S3 1.9\" ST7789 LCD Display Development Board WIFI Bluetooth5.0 Wireless Module 170*320 Resolution T-Display-S3 is a development board whose main control chip is ESP32-S3. It is equipped with a 1.9\" LCD color screen and two programmable buttons. Communication using the I8080 interface Retains the same layout design as T-Display. You can directly use ESP32S3 for USB communication or programming. Specifications ~ Pros Cons MCU ESP32-S3R8 Dual-core LX7 microprocessor Wireless Connectivity Wi-Fi 802.11, BLE 5 + BT mesh Flash 16MB PSRAM 8MB Bat voltage detection IO04 Onboard functions Boot + Reset + IO14 Button LCD 1.9\" diagonal, Full-color TFT Display Drive Chip ST7789V Resolution 170(H)RGB x320(V) 8-Bit Parallel Interface Connectors JST-GH 1.25mm 2PIN STEMMA QT / Qwiic JST-SH 1.0mm 4-PIN Touch Edition ~ ESP32-S3 1.9\" ST7789 LCD Display with Touch Screen Development Board. Basic Edition ~ The Basic Edition of the LilyGO\u00ae T-Display-S3 does not have a touchscreen. It can only be used to display information. You can not interact with objects on the screen. However, you can connect GPIOs and/or use the push buttons to integrate the device into your Home Automation system. Documentation ~ Documentation ~ Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\"","title":"T-Display-S3"},{"location":"hardware/lilygo/lilygo-t-display-s3/#lilygo-t-display-s3","text":"Warning The configuration for this board is under development and not finilized yet. LILYGO\u00ae T-Display-S3 ESP32-S3 1.9\" ST7789 LCD Display Development Board WIFI Bluetooth5.0 Wireless Module 170*320 Resolution T-Display-S3 is a development board whose main control chip is ESP32-S3. It is equipped with a 1.9\" LCD color screen and two programmable buttons. Communication using the I8080 interface Retains the same layout design as T-Display. You can directly use ESP32S3 for USB communication or programming.","title":"LilyGO\u00ae T-Display-S3"},{"location":"hardware/lilygo/lilygo-t-display-s3/#specifications","text":"Pros Cons MCU ESP32-S3R8 Dual-core LX7 microprocessor Wireless Connectivity Wi-Fi 802.11, BLE 5 + BT mesh Flash 16MB PSRAM 8MB Bat voltage detection IO04 Onboard functions Boot + Reset + IO14 Button LCD 1.9\" diagonal, Full-color TFT Display Drive Chip ST7789V Resolution 170(H)RGB x320(V) 8-Bit Parallel Interface Connectors JST-GH 1.25mm 2PIN STEMMA QT / Qwiic JST-SH 1.0mm 4-PIN","title":"Specifications"},{"location":"hardware/lilygo/lilygo-t-display-s3/#touch-edition","text":"ESP32-S3 1.9\" ST7789 LCD Display with Touch Screen Development Board.","title":"Touch Edition"},{"location":"hardware/lilygo/lilygo-t-display-s3/#basic-edition","text":"The Basic Edition of the LilyGO\u00ae T-Display-S3 does not have a touchscreen. It can only be used to display information. You can not interact with objects on the screen. However, you can connect GPIOs and/or use the push buttons to integrate the device into your Home Automation system.","title":"Basic Edition"},{"location":"hardware/lilygo/lilygo-t-display-s3/#documentation","text":"","title":"Documentation"},{"location":"hardware/lilygo/lilygo-t-display-s3/#documentation_1","text":"Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\"","title":"Documentation"},{"location":"hardware/lilygo/lilygo-t-hmi/","text":"LILYGO\u00ae T-HMI ESP32-S3 ~ Warning The configuration for this board is currently being tested. T-HMI is currently LILYGO's largest touch display screen equipped with ESP32-S3 chip. The screen uses a 2.8-inch ST7789 LCD and is equipped with a resistive screen stylus/pen. It has 16 MB onboard Flash and 8MB PSram. It can be powered via the USB-C interface, 5V DC seat or battery connector. Pros Cons 16 MB flash Resistive Touchscreen 8 MB PSram 3 Groove ports The SD card is not supported by openHASP 0.7.0-rc9. AliExpress Tindie","title":"T-HMI ESP32-S3"},{"location":"hardware/lilygo/lilygo-t-hmi/#lilygo-t-hmi-esp32-s3","text":"Warning The configuration for this board is currently being tested. T-HMI is currently LILYGO's largest touch display screen equipped with ESP32-S3 chip. The screen uses a 2.8-inch ST7789 LCD and is equipped with a resistive screen stylus/pen. It has 16 MB onboard Flash and 8MB PSram. It can be powered via the USB-C interface, 5V DC seat or battery connector. Pros Cons 16 MB flash Resistive Touchscreen 8 MB PSram 3 Groove ports The SD card is not supported by openHASP 0.7.0-rc9. AliExpress Tindie","title":"LILYGO\u00ae T-HMI ESP32-S3 "},{"location":"hardware/lilygo/lilygo-t-rgb-s3/","text":"LilyGO\u00ae T-RGB ESP32-S3 ~ Warning The configuration for this board is under development and not finilized yet. Oval Edition ~ Round Edition ~ There is an Oval and a Round Edition of the LilyGO\u00ae T-RGB ESP32-S3. Both have a capacitive touchscreen.","title":"T-RGB-S3 2.1\""},{"location":"hardware/lilygo/lilygo-t-rgb-s3/#lilygo-t-rgb-esp32-s3","text":"Warning The configuration for this board is under development and not finilized yet.","title":"LilyGO\u00ae T-RGB ESP32-S3"},{"location":"hardware/lilygo/lilygo-t-rgb-s3/#oval-edition","text":"","title":"Oval Edition"},{"location":"hardware/lilygo/lilygo-t-rgb-s3/#round-edition","text":"There is an Oval and a Round Edition of the LilyGO\u00ae T-RGB ESP32-S3. Both have a capacitive touchscreen.","title":"Round Edition"},{"location":"hardware/lilygo/ttgo-t7-s3/","text":"Warning The configuration for this board is under development and not finilized yet. LilyGO\u00ae T7 S3 ESP32-S3 ~ T7 S3 is an ESP32 module based on the ESP32-S3-WROOM-1, with 16 MB built-in Flash and 8MB PSram. AliExpress Tindie","title":"T7-S3 v1.1"},{"location":"hardware/lilygo/ttgo-t7-s3/#lilygo-t7-s3-esp32-s3","text":"T7 S3 is an ESP32 module based on the ESP32-S3-WROOM-1, with 16 MB built-in Flash and 8MB PSram. AliExpress Tindie","title":"LilyGO\u00ae T7 S3 ESP32-S3"},{"location":"hardware/lolin/lolin-tft-shield/","text":"Lolin TFT 2.4\" Touch Shield ~ Features ~ This Lolin TFT has a 2.4\" touchscreen with XPT2046 resistive touch controller. There are 3 ways to connect an ESP32: Plug a compatible ESP32 onto the female headers on the back Attach a LOLIN D32 Pro V2.0 using the 10-pin TFT connector and cable Solder headers onto the bottom pinholes for pluging into a breadboard or jumper cables for any other ESP32 Pros Cons Plug-and-play Resistive touchscreen Limited soldering required Availability Choice of several ESP32 MCUs Price Buy Compatible ESP32 dev boards ~ The Lolin TFT 2.4\" headers are plug-and-play compatible with these development boards, no need to use any jumper cables: Model Minimal Better Best SKU D1 Mini ESP32 TTGO T7 V1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER Flash 4 MB 4 or 16 MB 4 or 16 MB PSram No 8 MB 8 MB Connection Two 1x8 Pinheaders\u00b2 Two 1x8 Pinheaders\u00b2 10-pin TFT cable (optional) SD Card no no yes Battery charging no yes yes USB Chip CH9102F CH340C Screen dimming yes yes yes Buy Buy Buy Warning The D1 Mini ESP32 board may suffer from brown-out reboots if not powered adequately. Note (\u00b2) Because the board is developed for the D1-mini, you must only solder a row of 1x8 male pins to pads TXD-5V and RST-3V3 each. Product Video ~ Backlight Control ~ To use PWM dimming on the Lolin TFT 2.4\" you must bridge the center TFT-LED pin to the D1 solder pad next to it. This pin is configured by default in the firmware. Warning Do not use D3 for backlight control because it is already in use for touch! Do not use D4 for backlight control because it is already in use for PSram on the ESP32-WROVER. The D1-mini has D4 connected to the on-board LED and boot fails if pulled LOW. Documentation ~ Wemos Wiki Schematics Dimensions ~","title":"Lolin"},{"location":"hardware/lolin/lolin-tft-shield/#lolin-tft-24-touch-shield","text":"","title":"Lolin TFT 2.4\" Touch Shield"},{"location":"hardware/lolin/lolin-tft-shield/#features","text":"This Lolin TFT has a 2.4\" touchscreen with XPT2046 resistive touch controller. There are 3 ways to connect an ESP32: Plug a compatible ESP32 onto the female headers on the back Attach a LOLIN D32 Pro V2.0 using the 10-pin TFT connector and cable Solder headers onto the bottom pinholes for pluging into a breadboard or jumper cables for any other ESP32 Pros Cons Plug-and-play Resistive touchscreen Limited soldering required Availability Choice of several ESP32 MCUs Price Buy","title":"Features"},{"location":"hardware/lolin/lolin-tft-shield/#compatible-esp32-dev-boards","text":"The Lolin TFT 2.4\" headers are plug-and-play compatible with these development boards, no need to use any jumper cables: Model Minimal Better Best SKU D1 Mini ESP32 TTGO T7 V1.5 Mini32 Lolin D32 Pro V2.0 MCU ESP32-WROOM ESP32-WROVER ESP32-WROVER Flash 4 MB 4 or 16 MB 4 or 16 MB PSram No 8 MB 8 MB Connection Two 1x8 Pinheaders\u00b2 Two 1x8 Pinheaders\u00b2 10-pin TFT cable (optional) SD Card no no yes Battery charging no yes yes USB Chip CH9102F CH340C Screen dimming yes yes yes Buy Buy Buy Warning The D1 Mini ESP32 board may suffer from brown-out reboots if not powered adequately. Note (\u00b2) Because the board is developed for the D1-mini, you must only solder a row of 1x8 male pins to pads TXD-5V and RST-3V3 each.","title":"Compatible ESP32 dev boards"},{"location":"hardware/lolin/lolin-tft-shield/#product-video","text":"","title":"Product Video"},{"location":"hardware/lolin/lolin-tft-shield/#backlight-control","text":"To use PWM dimming on the Lolin TFT 2.4\" you must bridge the center TFT-LED pin to the D1 solder pad next to it. This pin is configured by default in the firmware. Warning Do not use D3 for backlight control because it is already in use for touch! Do not use D4 for backlight control because it is already in use for PSram on the ESP32-WROVER. The D1-mini has D4 connected to the on-board LED and boot fails if pulled LOW.","title":"Backlight Control"},{"location":"hardware/lolin/lolin-tft-shield/#documentation","text":"Wemos Wiki Schematics","title":"Documentation"},{"location":"hardware/lolin/lolin-tft-shield/#dimensions","text":"","title":"Dimensions"},{"location":"hardware/m5stack/core2/","text":"M5Stack core2 ~ M5Stack core2 is the second generation core device in the M5Stack development kit series. The core2 features a 2\" capacitive touchscreen, unlike its predecessor, making it very suitable to run openHASP. The device is packed with a beefy ESP32 model D0WDQ6-V3 and lots of sensors. Features ~ 1W Speaker SPM1423 Microphone Vibration Motor 3.7V / 390 mAh battery with power management chip SD card slot (16 GB maximum size) IMU (3-axis gyroscope & 3-axis accelerometer) Dimensions: 54 x 54 x 16mm Pros Cons 16 MB flash Small display 8 MB PSram Internal Battery Capacitive Touchscreen Available from: M5stack Mouser Digikey Amazon Product Video ~ Schematic ~ Schematics M5Stack Library ~ The M5Stack series comes with an opensource library to give you a jump start in deveopment for this device, including a Getting Started guide, examples and API reference. Visit the M5Stack Github repo.","title":"M5stack"},{"location":"hardware/m5stack/core2/#m5stack-core2","text":"M5Stack core2 is the second generation core device in the M5Stack development kit series. The core2 features a 2\" capacitive touchscreen, unlike its predecessor, making it very suitable to run openHASP. The device is packed with a beefy ESP32 model D0WDQ6-V3 and lots of sensors.","title":"M5Stack core2"},{"location":"hardware/m5stack/core2/#features","text":"1W Speaker SPM1423 Microphone Vibration Motor 3.7V / 390 mAh battery with power management chip SD card slot (16 GB maximum size) IMU (3-axis gyroscope & 3-axis accelerometer) Dimensions: 54 x 54 x 16mm Pros Cons 16 MB flash Small display 8 MB PSram Internal Battery Capacitive Touchscreen Available from: M5stack Mouser Digikey Amazon","title":"Features"},{"location":"hardware/m5stack/core2/#product-video","text":"","title":"Product Video"},{"location":"hardware/m5stack/core2/#schematic","text":"Schematics","title":"Schematic"},{"location":"hardware/m5stack/core2/#m5stack-library","text":"The M5Stack series comes with an opensource library to give you a jump start in deveopment for this device, including a Getting Started guide, examples and API reference. Visit the M5Stack Github repo.","title":"M5Stack Library"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/","text":"ESP32-S3 Parallel TFT with Touch ~ Warning The configuration for this board is under development and not finilized yet. more images... Features ~ The Makerfabs ESP32-S3 Parallel TFT Touch development board incorporates a 3.5\u201d, 4.0\u201d or 4.3\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and PSram. There is also an SD-card slot, USB-C connectors and two expansion ports. Models ~ Model 3.5\" Parallel 4.0\" Parallel 4.3\" Parallel SKU ESP32S335D E32S3RGB40 E32S3RGB43 Flash 16 MB 16 MB 16 MB PSram 2 MB 8 MB 8 MB Display 3.5\" 480x320 4.0\" IPS 4.3\" IPS Resolution 480x320 480x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Real Time Clock no no yes Screen dimming GPIO45 GPIO2 GPIO2 Buy Buy Buy Also available on Tindie The real-time clock and SD card are not supported by openHASP 0.7.0-rc9. Backlight Control ~ The backlight of the 3.5\" model can be controlled by PWM on pin GPIO45 . The backlight on the 4.0\" model is always on and can not be controlled. The backlight of the 4.3\" model can be controlled by PWM on pin GPIO02 if the PCB is v1.3 only. With PCB v2.0 the backlight can not be adjusted and the screen is always on. Video ~ ESP32-S3 Parallel TFT with Touch 3.5'' ILI9488 ~ ESP32-S3 Parallel TFT with Touch 4.0\" ~ ESP32-S3 Parallel TFT with Touch 4.3\" ~ Documentation ~ More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics Enclosure ~ We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"ESP32-S3 Parallel TFT"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch","text":"Warning The configuration for this board is under development and not finilized yet. more images...","title":"ESP32-S3 Parallel TFT with Touch"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#features","text":"The Makerfabs ESP32-S3 Parallel TFT Touch development board incorporates a 3.5\u201d, 4.0\u201d or 4.3\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and PSram. There is also an SD-card slot, USB-C connectors and two expansion ports.","title":"Features"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#models","text":"Model 3.5\" Parallel 4.0\" Parallel 4.3\" Parallel SKU ESP32S335D E32S3RGB40 E32S3RGB43 Flash 16 MB 16 MB 16 MB PSram 2 MB 8 MB 8 MB Display 3.5\" 480x320 4.0\" IPS 4.3\" IPS Resolution 480x320 480x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Real Time Clock no no yes Screen dimming GPIO45 GPIO2 GPIO2 Buy Buy Buy Also available on Tindie The real-time clock and SD card are not supported by openHASP 0.7.0-rc9.","title":"Models"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#backlight-control","text":"The backlight of the 3.5\" model can be controlled by PWM on pin GPIO45 . The backlight on the 4.0\" model is always on and can not be controlled. The backlight of the 4.3\" model can be controlled by PWM on pin GPIO02 if the PCB is v1.3 only. With PCB v2.0 the backlight can not be adjusted and the screen is always on.","title":"Backlight Control"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#video","text":"","title":"Video"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch-35-ili9488","text":"","title":"ESP32-S3 Parallel TFT with Touch 3.5'' ILI9488"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch-40","text":"","title":"ESP32-S3 Parallel TFT with Touch 4.0\""},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#esp32-s3-parallel-tft-with-touch-43","text":"","title":"ESP32-S3 Parallel TFT with Touch 4.3\""},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#documentation","text":"More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics","title":"Documentation"},{"location":"hardware/makerfabs/esp32-s3-parallel-tft-touch/#enclosure","text":"We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Enclosure"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/","text":"ESP32-S3 SPI TFT with Touch ~ more images... Features ~ The ESP32-S3 SPI TFT with Touch development board incorporates a 3.5\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and 2MB of PSram. There is also an SD-card slot, USB-C connectors and expansion port with 14 GPIOs. Models ~ Model 3.5\" SPI SKU ESP32S3SPI35 Flash 16 MB PSram 2 MB Resolution 3.5\" 480x320 Touch Screen Capacitive SD Card yes Screen dimming yes Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9. Backlight Control ~ The backlight can be controlled by PWM on GPIO48 . Video ~ Documentation ~ More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics Enclosure ~ We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"ESP32-S3 SPI TFT"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#esp32-s3-spi-tft-with-touch","text":"more images...","title":"ESP32-S3 SPI TFT with Touch"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#features","text":"The ESP32-S3 SPI TFT with Touch development board incorporates a 3.5\u201d capacitive touch display which makes it a very suitable platform for any openHASP project. At the back sits an ESP32-S3-WROOM module with 16MB of flash and 2MB of PSram. There is also an SD-card slot, USB-C connectors and expansion port with 14 GPIOs.","title":"Features"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#models","text":"Model 3.5\" SPI SKU ESP32S3SPI35 Flash 16 MB PSram 2 MB Resolution 3.5\" 480x320 Touch Screen Capacitive SD Card yes Screen dimming yes Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9.","title":"Models"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#backlight-control","text":"The backlight can be controlled by PWM on GPIO48 .","title":"Backlight Control"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#video","text":"","title":"Video"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#documentation","text":"More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics","title":"Documentation"},{"location":"hardware/makerfabs/esp32-s3-spi-tft-touch/#enclosure","text":"We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Enclosure"},{"location":"hardware/makerfabs/esp32-tft-touch/","text":"ESP32 TFT Touch with Camera ~ more images... Features ~ The Makerfabs ESP32 TFT Touch development board incorporates a 3.2\u201d or 3.5\u201d touch display, with a built-in 2M pixel OV2640 camera, which makes it a very suitable platform for any ESP32 project. There is a version with capacitive and resistive touch. At the back sits an ESP32-WROVER module with 16MB of flash and 8MB of PSram. There is also an SD-card slot, USB-C connector and expansion port with 14 GPIOs. Models ~ Model 3.2\" Resistive 3.5\" Resistive 3.5\" Capacitive SKU ESPTFT32CA ESPTFT35RE ESPTFT35CA Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Resolution 3.2\" 320x240 3.5\" 480x320 3.5\" 480x320 Touch Screen Resistive Resistive Capacitive OV2640 Camera 2M pixel 2M pixel 2M pixel SD Card yes yes yes Screen dimming no no no Buy Buy Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9. Backlight Control ~ Unfortunately, there is no support for backlight control. The display is always-on. Video ~ Documentation ~ More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics Acrylic Case ~ All 3 models have the option to add a protective acrylic case for only $2.90 extra:","title":"ESP32 SPI TFT with Camera"},{"location":"hardware/makerfabs/esp32-tft-touch/#esp32-tft-touch-with-camera","text":"more images...","title":"ESP32 TFT Touch with Camera"},{"location":"hardware/makerfabs/esp32-tft-touch/#features","text":"The Makerfabs ESP32 TFT Touch development board incorporates a 3.2\u201d or 3.5\u201d touch display, with a built-in 2M pixel OV2640 camera, which makes it a very suitable platform for any ESP32 project. There is a version with capacitive and resistive touch. At the back sits an ESP32-WROVER module with 16MB of flash and 8MB of PSram. There is also an SD-card slot, USB-C connector and expansion port with 14 GPIOs.","title":"Features"},{"location":"hardware/makerfabs/esp32-tft-touch/#models","text":"Model 3.2\" Resistive 3.5\" Resistive 3.5\" Capacitive SKU ESPTFT32CA ESPTFT35RE ESPTFT35CA Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Resolution 3.2\" 320x240 3.5\" 480x320 3.5\" 480x320 Touch Screen Resistive Resistive Capacitive OV2640 Camera 2M pixel 2M pixel 2M pixel SD Card yes yes yes Screen dimming no no no Buy Buy Buy Also available on Tindie Tip An optional environmental expansion board can be added to provide a temperature, humidity and air quality sensor. The camera can not be used at the same time as the expansion port. The camera and SD card are not supported by openHASP 0.7.0-rc9.","title":"Models"},{"location":"hardware/makerfabs/esp32-tft-touch/#backlight-control","text":"Unfortunately, there is no support for backlight control. The display is always-on.","title":"Backlight Control"},{"location":"hardware/makerfabs/esp32-tft-touch/#video","text":"","title":"Video"},{"location":"hardware/makerfabs/esp32-tft-touch/#documentation","text":"More information can be found in the Makerfabs Wiki and there are plenty of example projects available on the Github repository. Makerfabs Wiki Github Repo Schematics","title":"Documentation"},{"location":"hardware/makerfabs/esp32-tft-touch/#acrylic-case","text":"All 3 models have the option to add a protective acrylic case for only $2.90 extra:","title":"Acrylic Case"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/","text":"SenseCAP Indicator D1 ~ more images... SenseCAP Indicator D1 is a 4-inch touch screen driven by an ESP32-S3 and RP2040 dual-MCU and supports Wi-Fi/BLE communication. The ESP32-S3 has 8 MB flash and 8 MB PSRAM. It is a powerful, fully open-source IoT development platform. It can be powered via USB-C 2.0 on the bottom or the backside of the device. It is suitable for mounting on the wall or placement on a desk using the kickback stand. Models ~ The SenseCAP Indicator series offers four different versions: D1, D1S, D1L, and D1Pro. Each version is designed to meet different application needs without any extra cost from unnecessary hardware. Here are the differences between the versions: Attention openHASP does not support the D1S sensors or D1L Lora communications. Buy Mouser Kiwi Electronics Seeed Studio Documentation Product Video ~ Introduction to the SenseCAP Indicator D1: Gallery ~","title":"Seeed Studio"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#sensecap-indicator-d1","text":"more images... SenseCAP Indicator D1 is a 4-inch touch screen driven by an ESP32-S3 and RP2040 dual-MCU and supports Wi-Fi/BLE communication. The ESP32-S3 has 8 MB flash and 8 MB PSRAM. It is a powerful, fully open-source IoT development platform. It can be powered via USB-C 2.0 on the bottom or the backside of the device. It is suitable for mounting on the wall or placement on a desk using the kickback stand.","title":"SenseCAP Indicator D1"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#models","text":"The SenseCAP Indicator series offers four different versions: D1, D1S, D1L, and D1Pro. Each version is designed to meet different application needs without any extra cost from unnecessary hardware. Here are the differences between the versions: Attention openHASP does not support the D1S sensors or D1L Lora communications. Buy Mouser Kiwi Electronics Seeed Studio Documentation","title":"Models"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#product-video","text":"Introduction to the SenseCAP Indicator D1:","title":"Product Video"},{"location":"hardware/seeed-studio/sensecap-indicator-d1/#gallery","text":"","title":"Gallery"},{"location":"hardware/sunton/esp32-1732s019/","text":"Sunton ESP32-1732S019 ~ Warning The configuration for this board is under development and not finilized yet. These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress. Versions ~ There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: ESP32-3248S035 ~ Sunton ESP32 3.5inch Display Case Stand from Printables.com ESP32-4827S043 ~ Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-1732S019"},{"location":"hardware/sunton/esp32-1732s019/#sunton-esp32-1732s019","text":"Warning The configuration for this board is under development and not finilized yet. These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress.","title":"Sunton ESP32-1732S019 "},{"location":"hardware/sunton/esp32-1732s019/#versions","text":"There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Versions"},{"location":"hardware/sunton/esp32-1732s019/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-1732s019/#cases","text":"If you have a 3D printer, cases are becoming available:","title":"Cases"},{"location":"hardware/sunton/esp32-1732s019/#esp32-3248s035","text":"Sunton ESP32 3.5inch Display Case Stand from Printables.com","title":"ESP32-3248S035"},{"location":"hardware/sunton/esp32-1732s019/#esp32-4827s043","text":"Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"ESP32-4827S043"},{"location":"hardware/sunton/esp32-1732s019/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-1732s019/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-1732s019/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-2432s028/","text":"Sunton ESP32-2432S028 ~ These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress. Versions ~ There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: ESP32-3248S035 ~ Sunton ESP32 3.5inch Display Case Stand from Printables.com ESP32-4827S043 ~ Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-2432S028"},{"location":"hardware/sunton/esp32-2432s028/#sunton-esp32-2432s028","text":"These are great \"all-in-one\" device that have integrated ESP32/ESP32-S3 chips, many with PSRAM. Sizes from 1.9\" to a whopping 7\" display and built in touch. Available via the Sunton store on Aliexpress.","title":"Sunton ESP32-2432S028 "},{"location":"hardware/sunton/esp32-2432s028/#versions","text":"There are many versions: ESP32-1732S019 (ESP32-S3) - currently not supported ESP32-2432S028 (ESP32) ESP32-3248S035(r/c)* (ESP32) ESP32-4827S043(r/c)* (ESP32-S3) ESP32-8048S050 (ESP32-S3) ESP32-8048S070 (ESP32-S3) * Note : versions can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you load the correct firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Versions"},{"location":"hardware/sunton/esp32-2432s028/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-2432s028/#cases","text":"If you have a 3D printer, cases are becoming available:","title":"Cases"},{"location":"hardware/sunton/esp32-2432s028/#esp32-3248s035","text":"Sunton ESP32 3.5inch Display Case Stand from Printables.com","title":"ESP32-3248S035"},{"location":"hardware/sunton/esp32-2432s028/#esp32-4827s043","text":"Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"ESP32-4827S043"},{"location":"hardware/sunton/esp32-2432s028/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-2432s028/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-2432s028/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-3248s035/","text":"Sunton ESP32-3248S035 ~ The ESP32-3248S035 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles. Models ~ Model Resistive Touch Capacitive Touch SKU ESP32-3248S035R ESP32-3248S035C MCU ESP32-D0WDQ6 ESP32-D0WDQ6 Flash 4 MB 4 MB PSram No No Display Panel 3.5\" TN 3.5' TN Resolution 480x320 480x320 Touch Screen Resistive Capacitive SD Card yes yes Screen dimming yes yes Buy Buy The SD card is not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32 Modules have no PSram and are less suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-3248S035"},{"location":"hardware/sunton/esp32-3248s035/#sunton-esp32-3248s035","text":"The ESP32-3248S035 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles.","title":"Sunton ESP32-3248S035 "},{"location":"hardware/sunton/esp32-3248s035/#models","text":"Model Resistive Touch Capacitive Touch SKU ESP32-3248S035R ESP32-3248S035C MCU ESP32-D0WDQ6 ESP32-D0WDQ6 Flash 4 MB 4 MB PSram No No Display Panel 3.5\" TN 3.5' TN Resolution 480x320 480x320 Touch Screen Resistive Capacitive SD Card yes yes Screen dimming yes yes Buy Buy The SD card is not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32 Modules have no PSram and are less suitable for loading fonts, and graphics.","title":"Models"},{"location":"hardware/sunton/esp32-3248s035/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-3248s035/#cases","text":"If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"Cases"},{"location":"hardware/sunton/esp32-3248s035/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-3248s035/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-3248s035/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-4827s043/","text":"Sunton ESP32-4827S043 ~ The ESP32-4827s043 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles. Models ~ Model TN Without Touch TN Resistive Touch TN Capacitive Touch SKU ESP32-4827S043 ESP32-4827S043R ESP32-4827S043C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" TN 4.3\" TN 4.3\" TN Resolution 480x272 480x272 480x272 Touch Screen None Resistive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-4827S043"},{"location":"hardware/sunton/esp32-4827s043/#sunton-esp32-4827s043","text":"The ESP32-4827s043 boards all come with an integrated ESP32-S3 chip, 16 MB flash and 8 MB PSRAM. There are 3 models: without touch, with resistive touch or with capacitive touch. They have a TN panel with a display resolution of 480x272 and acceptable viewing angles.","title":"Sunton ESP32-4827S043 "},{"location":"hardware/sunton/esp32-4827s043/#models","text":"Model TN Without Touch TN Resistive Touch TN Capacitive Touch SKU ESP32-4827S043 ESP32-4827S043R ESP32-4827S043C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" TN 4.3\" TN 4.3\" TN Resolution 480x272 480x272 480x272 Touch Screen None Resistive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Models"},{"location":"hardware/sunton/esp32-4827s043/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-4827s043/#cases","text":"If you have a 3D printer, cases are becoming available: Sunton ESP32S3 8048s043c 4.3\" Screen Case from Printables.com Other cases maybe available, search printables, thingiverse, etc","title":"Cases"},{"location":"hardware/sunton/esp32-4827s043/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-4827s043/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-4827s043/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/sunton/esp32-8048s0xx/","text":"Sunton ESP32-8048S0xx ~ These are great \"all-in-one\" device that have integrated ESP32-S3 chips with 16 MB of flash and 8MB PSram. There are 3 sizes available with an 800x480 resolution ranging from 4.3\", 5\" to 7\" display and built in capacitive touch panel. The 4.3\" and 5\" model have an IPS panel so the viewing angles are great. The 7\" version uses a TN panel with acceptable viewing angles but a larger display area. Models ~ Model 4.3\" IPS Capacitive 5.0\" IPS Capacitive 7.0\" TN Capacitive SKU ESP32-8048S043C ESP32-8048S050C ESP32-8048S070C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" IPS 5.0\" IPS 7.0\" TN Resolution 800x480 800x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics. Features ~ The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet. Cases ~ If you have a 3D printer, cases are becoming available: SUNON ESP32-2432S028 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/esp32-2432s028-display-box SUNON ESP32-3248S035 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-3248s035-matsekberg SUNON ESP32-8048S050 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-8048s050-display-box Other cases maybe available, search printables, thingiverse, etc Flashing ~ Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files. Recommended method ~ Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that. Initial Setup Notes ~ Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"ESP32-8048S0xx"},{"location":"hardware/sunton/esp32-8048s0xx/#sunton-esp32-8048s0xx","text":"These are great \"all-in-one\" device that have integrated ESP32-S3 chips with 16 MB of flash and 8MB PSram. There are 3 sizes available with an 800x480 resolution ranging from 4.3\", 5\" to 7\" display and built in capacitive touch panel. The 4.3\" and 5\" model have an IPS panel so the viewing angles are great. The 7\" version uses a TN panel with acceptable viewing angles but a larger display area.","title":"Sunton ESP32-8048S0xx "},{"location":"hardware/sunton/esp32-8048s0xx/#models","text":"Model 4.3\" IPS Capacitive 5.0\" IPS Capacitive 7.0\" TN Capacitive SKU ESP32-8048S043C ESP32-8048S050C ESP32-8048S070C MCU ESP32-S3-Wroom ESP32-S3-Wroom ESP32-S3-Wroom Flash 16 MB 16 MB 16 MB PSram 8 MB 8 MB 8 MB Display Panel 4.3\" IPS 5.0\" IPS 7.0\" TN Resolution 800x480 800x480 800x480 Touch Screen Capacitive Capacitive Capacitive SD Card yes yes yes Screen dimming yes yes yes Buy Buy Buy The audio port and SD card are not supported by openHASP 0.7.0-rc9. Note Models can have Resistive (r) or Capacitive (c) touch screens, you need to ensure you purchase the correct version and load the corresponding firmware for the device you have. ESP32-S3 Modules have PSram and are more suitable for loading fonts, and graphics.","title":"Models"},{"location":"hardware/sunton/esp32-8048s0xx/#features","text":"The Sunton screens are fully featured and ready to use screens with ESP32(S3) integrated, touch control integrated (Resistive or Capacitive), with resultions as high has 800x480! (in the 4.3\"+ screens). The back has many GPIO pins avialable through an included connector, TF Slot, Audio out (some versions), note: audio/tf not supported in openHASP yet.","title":"Features"},{"location":"hardware/sunton/esp32-8048s0xx/#cases","text":"If you have a 3D printer, cases are becoming available: SUNON ESP32-2432S028 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/esp32-2432s028-display-box SUNON ESP32-3248S035 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-3248s035-matsekberg SUNON ESP32-8048S050 DISPLAY BOX: https://cults3d.com/en/3d-model/gadget/sunon-esp32-8048s050-display-box Other cases maybe available, search printables, thingiverse, etc","title":"Cases"},{"location":"hardware/sunton/esp32-8048s0xx/#flashing","text":"Compile your own via platform.io and platformio_override.ini environment templates. Also available via web installer at https://nightly.openhasp.com/ or the latest found under Github Actions , click on the latest action, and look under the Assets sections for zip files containing builds binary files.","title":"Flashing"},{"location":"hardware/sunton/esp32-8048s0xx/#recommended-method","text":"Use the Nightly build website to initially flash the device. Then update with the OTA file found under Actions , Assets on github. Or compile your own if comfortable doing that.","title":"Recommended method"},{"location":"hardware/sunton/esp32-8048s0xx/#initial-setup-notes","text":"Note that some of the screens have TWO versions, Resistive and Capacitive , so flash the correct firmware (ends in r or a c respectively). RESISTIVE : After first boot, Run a Calibration via the web ui -> Display Setup -> Calibrate Then on the screen, touch the indicated points.","title":"Initial Setup Notes"},{"location":"hardware/waveshare/waveshare-rpi-lcd/","text":"Waveshare RPi LCD (Rev C) ~ Models ~ The Waveshare RPi LCD (Rev C) display comes in 3.5\" and 4.0\" sizes: Model 3.5inch (Rev C) 4.0inch (Rev C) SKU 15811 16099 Resolution 480x320 480x320 TFT controller ILI9486 ST7796 Interface SPI SPI Touchscreen Resistive Resistive Touch controller XPT2046 XPT2046 Screen dimming yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy AliExpress Waveshare.com Backlight Control ~ By default the display is always on. To enable backlight dimming, you can connect the pads marked by the red arrow using a 0R resistor or a direct solder connection: Attention (*) The WaveShare 3.5\" RPi LCD Revision C (SKU 15811) and WaveShare 4.0\" RPi LCD Revision C (SKU 16099) have the solder jumper on the back to enable PWM backlight dimming. Most revisions of this board do not have this feature! Development Boards ~ ESP32 One ~ The Waveshare ESP32 One development board has the same form factor as the Raspberry Pi Zero, inluding a 40 pin GPIO header. The ESP32 One is plug-and-play compatible with the Waveshare RPi LCD (Rev C) 3.5\" and 4\". This board has 4 MB flash and 8 MB PSRAM. Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Schematics Gallery ~ Pin Configuration ~ LCD Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected N/C 4 5V 5-10 Not connected N/C 11 Touch Interrupt N/C TOUCH_IRQ TP_IRQ 12 (*) LED Backlight PWM GPIO26 TFT_BCKL LCD_LED 13 Not connected N/C 14 Module Ground GND GND 15-16 Not connected N/C 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO13 TFT_MOSI LCD/SI/TP_SI 20 Not connected N/C 21 Touch Panel Slave Out GPIO12 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO14 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO5 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. You can also use jumper wires to connect the display to any ESP32 development board: 6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor and one extra GPIO for backlight dimming. Including the VCC and GND pins, a total of 13 connections need to be made to the MCU. LCD Configuration ~ The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS HASP build_flags ~ Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 build_flags = ${env.build_flags} ${esp32.build_flags} -DBOARD_HAS_PSRAM ; uses 78kB ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.hspi} ; Use HSPI hardware SPI bus -D TFT_CS = 5 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = 26 ; Default, configurable via web UI -D TOUCH_CS = 22 -D SD_CS = 15 ; Currently not supported","title":"Waveshare RPi LCD"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#waveshare-rpi-lcd-rev-c","text":"","title":"Waveshare RPi LCD (Rev C)"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#models","text":"The Waveshare RPi LCD (Rev C) display comes in 3.5\" and 4.0\" sizes: Model 3.5inch (Rev C) 4.0inch (Rev C) SKU 15811 16099 Resolution 480x320 480x320 TFT controller ILI9486 ST7796 Interface SPI SPI Touchscreen Resistive Resistive Touch controller XPT2046 XPT2046 Screen dimming yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy AliExpress Waveshare.com","title":"Models"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#backlight-control","text":"By default the display is always on. To enable backlight dimming, you can connect the pads marked by the red arrow using a 0R resistor or a direct solder connection: Attention (*) The WaveShare 3.5\" RPi LCD Revision C (SKU 15811) and WaveShare 4.0\" RPi LCD Revision C (SKU 16099) have the solder jumper on the back to enable PWM backlight dimming. Most revisions of this board do not have this feature!","title":"Backlight Control"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#development-boards","text":"","title":"Development Boards"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#esp32-one","text":"The Waveshare ESP32 One development board has the same form factor as the Raspberry Pi Zero, inluding a 40 pin GPIO header. The ESP32 One is plug-and-play compatible with the Waveshare RPi LCD (Rev C) 3.5\" and 4\". This board has 4 MB flash and 8 MB PSRAM. Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Schematics","title":"ESP32 One"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#gallery","text":"","title":"Gallery"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#pin-configuration","text":"LCD Pin Function ESP32 Pin Config Name Display Pin 1 Module Power 3.3V 3.3V 3.3V 2 Module Power 5v 5V 5V 3 Not connected N/C 4 5V 5-10 Not connected N/C 11 Touch Interrupt N/C TOUCH_IRQ TP_IRQ 12 (*) LED Backlight PWM GPIO26 TFT_BCKL LCD_LED 13 Not connected N/C 14 Module Ground GND GND 15-16 Not connected N/C 17 Module Power 3.3V 3.3V 18 Data Command control pin GPIO4 TFT_DC LCD_RS 19 SPI Master Out Slave In GPIO13 TFT_MOSI LCD/SI/TP_SI 20 Not connected N/C 21 Touch Panel Slave Out GPIO12 TFT_MISO TP_SO 22 LCD Reset pin GPIO32 TFT_RST RST 23 SPI Clock GPIO14 TFT_SCLK LCD_SCK/TP_SCK 24 Chip select control pin GPIO5 TFT_CS LCD_CS 25 Module Ground GND GND 26 Touch Chip Select GPIO22 TOUCH_CS TP_CS SPI MISO, MOSI and SCLK are shared between the touch controller and the LCD controller. You can also use jumper wires to connect the display to any ESP32 development board: 6 GPIOs are required to drive the SPI display. One additional GPIO is needed for the XPT2046 touch sensor and one extra GPIO for backlight dimming. Including the VCC and GND pins, a total of 13 connections need to be made to the MCU.","title":"Pin Configuration"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#lcd-configuration","text":"The lcd_config.ini file specifies the different properties of the display, except for the actual pin configuration: 1 2 3 4 5 6 7 8 9 10 11 raspberrypi = -D RPI_DISPLAY_TYPE = 1 -D ST7796_DRIVER = 1 -D TFT_WIDTH = 320 -D TFT_HEIGHT = 480 -D TFT_ROTATION = 0 ; 0=0, 1=90, 2=180 or 3=270 degree -D SPI_FREQUENCY = 80000000 -D SPI_TOUCH_FREQUENCY = 2500000 -D USER_SETUP_LOADED = 1 -D TOUCH_DRIVER = 2046 ; XPT2046 Resistive touch panel driver -D SUPPORT_TRANSACTIONS","title":"LCD Configuration"},{"location":"hardware/waveshare/waveshare-rpi-lcd/#hasp-build_flags","text":"Specify the LCD Configuration to use and define the GPIOs in the environment build flags: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 build_flags = ${env.build_flags} ${esp32.build_flags} -DBOARD_HAS_PSRAM ; uses 78kB ; -- TFT_eSPI build options ------------------------ ${lcd.raspberrypi} ${esp32.hspi} ; Use HSPI hardware SPI bus -D TFT_CS = 5 -D TFT_DC = 4 -D TFT_RST = 32 -D TFT_BCKL = 26 ; Default, configurable via web UI -D TOUCH_CS = 22 -D SD_CS = 15 ; Currently not supported","title":"HASP build_flags"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/","text":"Waveshare TFT Touch Shield ~ more images... Waveshare has a line of TFT Touch Shields for Arduino which are also plug-and-play compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 board. Unlike many other common Arduino UNO shields the Waveshare displays have an SPI interface with resistive touch controller and backlight control . Be sure to check if the LCD_BL , LCD_CS and TP_CS pins are present. If these pins are missing, the screen won't work with the pre-compiled builds. Models ~ There are 3 models of this TFT shield: Model 2.8\" Rev 2.1 3.5inch 4.0inch SKU 10684 13506 13587 Resolution 320x240 480x320 480x320 TFT controller ST7789 (Rev 2.1 only) ILI9486 ILI9486 Interface SPI SPI SPI Touchscreen Resistive Resistive Resistive Touch controller XPT2046 XPT2046 XPT2046 SD Card yes yes yes Screen dimming yes yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Backlight Control ~ All three models come with an LCD_BL pin that allows for backlight control. It is connected to GPIO13 on the D1 R32 development board. Documentation ~ Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\" Configuration ~ Note By default the DIP switches on the display are set in the ICSP position instead of the SPI position. If your board does not include an ICSP header, you need to switch the display over to use the SPI pins. To use the MISO , MOSI and SCLK SPI pins you first need to peel of the orange tape that sticks on top of the dip switches. Then move all 3 DIP switches to the ON position with a tiny screwdriver. The 2.8\" model has 3 solder jumpers SB1 , SB2 and SB3 that need to be bridged instead! Development Boards ~ D1 R32 ~ The Waveshare TFT Touch Shields are compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 development board. It contains an ESP32-WROOM module with 4MB flash. Warning The D1 R32 ESP32 board may suffer from brown-out reboots if not powered adequately. Arducam IoTai ESP32 ~ Onboard 4MB PSRAM, 4MByte Flash To be tested Adafruit Metro ESP32-S2 ~ With 4 MByte of Flash and 2 MByte of PSRAM Note This board has not been tested yet!","title":"Waveshare TFT Touch Shield"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#waveshare-tft-touch-shield","text":"more images... Waveshare has a line of TFT Touch Shields for Arduino which are also plug-and-play compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 board. Unlike many other common Arduino UNO shields the Waveshare displays have an SPI interface with resistive touch controller and backlight control . Be sure to check if the LCD_BL , LCD_CS and TP_CS pins are present. If these pins are missing, the screen won't work with the pre-compiled builds.","title":"Waveshare TFT Touch Shield"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#models","text":"There are 3 models of this TFT shield: Model 2.8\" Rev 2.1 3.5inch 4.0inch SKU 10684 13506 13587 Resolution 320x240 480x320 480x320 TFT controller ST7789 (Rev 2.1 only) ILI9486 ILI9486 Interface SPI SPI SPI Touchscreen Resistive Resistive Resistive Touch controller XPT2046 XPT2046 XPT2046 SD Card yes yes yes Screen dimming yes yes yes Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com Buy Amazon US Amazon UK Amazon DE Amazon FR Amazon ES Amazon NL AliExpress Waveshare.com","title":"Models"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#backlight-control","text":"All three models come with an LCD_BL pin that allows for backlight control. It is connected to GPIO13 on the D1 R32 development board.","title":"Backlight Control"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#documentation","text":"Please visit the Waveshare Wiki pages for more information, schematics and demo code: Waveshare Wiki TFT Touch Shield 2.8\" Rev 2.1 TFT Touch Shield 3.5\" TFT Touch Shield 4.0\"","title":"Documentation"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#configuration","text":"Note By default the DIP switches on the display are set in the ICSP position instead of the SPI position. If your board does not include an ICSP header, you need to switch the display over to use the SPI pins. To use the MISO , MOSI and SCLK SPI pins you first need to peel of the orange tape that sticks on top of the dip switches. Then move all 3 DIP switches to the ON position with a tiny screwdriver. The 2.8\" model has 3 solder jumpers SB1 , SB2 and SB3 that need to be bridged instead!","title":"Configuration"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#development-boards","text":"","title":"Development Boards"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#d1-r32","text":"The Waveshare TFT Touch Shields are compatible with the ESPDUINO-32 aka. Wemos \u201cTTGo\u201d D1 R32 development board. It contains an ESP32-WROOM module with 4MB flash. Warning The D1 R32 ESP32 board may suffer from brown-out reboots if not powered adequately.","title":"D1 R32"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#arducam-iotai-esp32","text":"Onboard 4MB PSRAM, 4MByte Flash To be tested","title":"Arducam IoTai ESP32"},{"location":"hardware/waveshare/waveshare-tft-touch-shield/#adafruit-metro-esp32-s2","text":"With 4 MByte of Flash and 2 MByte of PSRAM Note This board has not been tested yet!","title":"Adafruit Metro ESP32-S2"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/","text":"WT-86-32-3ZW1 ~ Warning This product with ESP32-S2 is not sold anymore and will soon become obsolete. Please get the ESP32-S3 model instead. The Wireless-Tag WT-86-32-3ZW1 is a 86x86mm touchscreen with 4 relays that can be mounted in a standard 86x86mm wall-box. It is currently only available from Alibaba for around US $40 excluding shipping. Features ~ Pros Cons 16 MB flash Display ghosting 8 MB PSram 320 kB SRAM (ESP32-S2) Price Can't fit in EU workbox Capacitive Touchscreen Issues ~ One issue we've noticed is temporary ghosting on the display reported by multiple users. When showing a UI with white, cyan or bright colors on a dark background, a dim ghost image of these bright colors can linger on the screen for some time after changing pages. If you notice this issue on your device, please report back in this Github discussion thread . Dimensions ~ Note The size of the PSU unit does not fit a regular EU wall-box and mounting it in a US wall-box needs testing. Flashing ~ All pins are conveniently broken out on the 2mm pitch female header. Make sure the USB port can deliver enough power. It is best to use a powered USB hub since most PC ports can not power the whole device. esptool.py --port COM6 erase_flash esptool.py --port COM6 write_flash 0x0 wt-86-32-3zw1_full_16MB_v0.6.3-dev_88a478d.bin --verify Gallery ~","title":"WT-86-32-3ZW1"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#wt-86-32-3zw1","text":"Warning This product with ESP32-S2 is not sold anymore and will soon become obsolete. Please get the ESP32-S3 model instead. The Wireless-Tag WT-86-32-3ZW1 is a 86x86mm touchscreen with 4 relays that can be mounted in a standard 86x86mm wall-box. It is currently only available from Alibaba for around US $40 excluding shipping.","title":"WT-86-32-3ZW1"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#features","text":"Pros Cons 16 MB flash Display ghosting 8 MB PSram 320 kB SRAM (ESP32-S2) Price Can't fit in EU workbox Capacitive Touchscreen","title":"Features"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#issues","text":"One issue we've noticed is temporary ghosting on the display reported by multiple users. When showing a UI with white, cyan or bright colors on a dark background, a dim ghost image of these bright colors can linger on the screen for some time after changing pages. If you notice this issue on your device, please report back in this Github discussion thread .","title":"Issues"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#dimensions","text":"Note The size of the PSU unit does not fit a regular EU wall-box and mounting it in a US wall-box needs testing.","title":"Dimensions"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#flashing","text":"All pins are conveniently broken out on the 2mm pitch female header. Make sure the USB port can deliver enough power. It is best to use a powered USB hub since most PC ports can not power the whole device. esptool.py --port COM6 erase_flash esptool.py --port COM6 write_flash 0x0 wt-86-32-3zw1_full_16MB_v0.6.3-dev_88a478d.bin --verify","title":"Flashing"},{"location":"hardware/wireless-tag/wt-86-32-3zw1/#gallery","text":"","title":"Gallery"},{"location":"hardware/wireless-tag/wt32-sc01-plus/","text":"WT32-SC01 Plus ~ Features ~ The SC01 Plus uses an ESP32-S3-WROVER module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there are some ports with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 8-bit Display Flashing the initial bootloader 2 MB PSram Serial Flashing tool recommended Capacitive Touchscreen JST 1.25mm Expansion headers IPS Viewing angles Sleek design The development board is powered via USB Type-C. Video ~ Cases ~ A 3D-printable case can be found on: https://www.printables.com/model/381026-wt32-sc01-plus-desk-case#preview","title":"WT32-SC01 Plus"},{"location":"hardware/wireless-tag/wt32-sc01-plus/#wt32-sc01-plus","text":"","title":"WT32-SC01 Plus "},{"location":"hardware/wireless-tag/wt32-sc01-plus/#features","text":"The SC01 Plus uses an ESP32-S3-WROVER module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there are some ports with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 8-bit Display Flashing the initial bootloader 2 MB PSram Serial Flashing tool recommended Capacitive Touchscreen JST 1.25mm Expansion headers IPS Viewing angles Sleek design The development board is powered via USB Type-C.","title":"Features"},{"location":"hardware/wireless-tag/wt32-sc01-plus/#video","text":"","title":"Video"},{"location":"hardware/wireless-tag/wt32-sc01-plus/#cases","text":"A 3D-printable case can be found on: https://www.printables.com/model/381026-wt32-sc01-plus-desk-case#preview","title":"Cases"},{"location":"hardware/wireless-tag/wt32-sc01/","text":"WT32-SC01 ~ Features ~ The WT32-SC01 incorporates an ESP32-WROVER-B module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 Display 4 MB flash on basic model 8 MB PSram Viewing angle in landscape mode Capacitive Touchscreen Mounting holes placement The development board is powered via USB Type-C. The basic version comes with only 4MB SPI Flash but there is a better WT32-SC01(16MB) SKU with a larger flash chip. Both models have 8MB of PSRAM. With 4MB flash available from: LCSC Seeed studio With 16MB flash available from: Alibaba Tip Please consider getting the model with 16MB flash size as it is more suitable for the large screen. Note The expansion connector has a 2.0mm pitch female header instead of the more common 2.54mm pitch. Datasheet Gallery ~ 3D Printed Case ~ Wt32-sc01 Case by mbenten on Sketchfab","title":"WT32-SC01"},{"location":"hardware/wireless-tag/wt32-sc01/#wt32-sc01","text":"","title":"WT32-SC01"},{"location":"hardware/wireless-tag/wt32-sc01/#features","text":"The WT32-SC01 incorporates an ESP32-WROVER-B module with a 3.5-inch capacitive touch display. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with GPIOs so you can expand the capabilities as needed. Pros Cons 480x320 Display 4 MB flash on basic model 8 MB PSram Viewing angle in landscape mode Capacitive Touchscreen Mounting holes placement The development board is powered via USB Type-C. The basic version comes with only 4MB SPI Flash but there is a better WT32-SC01(16MB) SKU with a larger flash chip. Both models have 8MB of PSRAM. With 4MB flash available from: LCSC Seeed studio With 16MB flash available from: Alibaba Tip Please consider getting the model with 16MB flash size as it is more suitable for the large screen. Note The expansion connector has a 2.0mm pitch female header instead of the more common 2.54mm pitch. Datasheet","title":"Features"},{"location":"hardware/wireless-tag/wt32-sc01/#gallery","text":"","title":"Gallery"},{"location":"hardware/wireless-tag/wt32-sc01/#3d-printed-case","text":"Wt32-sc01 Case by mbenten on Sketchfab","title":"3D Printed Case"},{"location":"hardware/yeacreate/nscreen32/","text":"YeaCreate Nscreen32 ~ Features ~ The Nscreen32 uses an ESP32-WROVER-IE module with a large 4-inch capacitive touch display. The display is connected via an 8-bit parallel bus resulting in a fast performance. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with 6 GPIOs (4 input only, RX & TX) so you add inputs if needed. The development board can be powered via micro USB or the 5V-in JST connector. Pros Cons 8-bit parallel display No backlight control 16 MB flash + 8 MB PSram Bright white power LED Capacitive Touchscreen Viewing angles External antenna YeaCreate Store Backlight Control ~ Unfortunately, there is no support for backlight control . The display is always-on. With a small hack it is possible to control the backlight using a PNP transistor connected to GPIO0 , R8 and 3.3V . Documentation ~ Some example projects and the schematics for the Nscreen32 can be found on the Yeacreate Github repository. Github Repo Schematics Product Video ~ Nscreen32 is the first device to receive the LVGL Certified Board label: Enclosure ~ We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Yeacreate"},{"location":"hardware/yeacreate/nscreen32/#yeacreate-nscreen32","text":"","title":"YeaCreate Nscreen32"},{"location":"hardware/yeacreate/nscreen32/#features","text":"The Nscreen32 uses an ESP32-WROVER-IE module with a large 4-inch capacitive touch display. The display is connected via an 8-bit parallel bus resulting in a fast performance. openHASP can take advantage of the 320x480 resolution to show a large custom user-interface. On the back there is an expansion port with 6 GPIOs (4 input only, RX & TX) so you add inputs if needed. The development board can be powered via micro USB or the 5V-in JST connector. Pros Cons 8-bit parallel display No backlight control 16 MB flash + 8 MB PSram Bright white power LED Capacitive Touchscreen Viewing angles External antenna YeaCreate Store","title":"Features"},{"location":"hardware/yeacreate/nscreen32/#backlight-control","text":"Unfortunately, there is no support for backlight control . The display is always-on. With a small hack it is possible to control the backlight using a PNP transistor connected to GPIO0 , R8 and 3.3V .","title":"Backlight Control"},{"location":"hardware/yeacreate/nscreen32/#documentation","text":"Some example projects and the schematics for the Nscreen32 can be found on the Yeacreate Github repository. Github Repo Schematics","title":"Documentation"},{"location":"hardware/yeacreate/nscreen32/#product-video","text":"Nscreen32 is the first device to receive the LVGL Certified Board label:","title":"Product Video"},{"location":"hardware/yeacreate/nscreen32/#enclosure","text":"We don't have any 3D printable enclosure yet to share here. If you have a case for this board, please let us know so we can share it here.","title":"Enclosure"},{"location":"integrations/home-assistant/howto/","text":"Home Assistant ~ The openHASP Custom Component simplifies synchronization of objects on one or more openHASP plates with Home Assistant entities. You can map any service supported by any entity in Home Assistant to any object event in openHASP. Moreover, you can set any property of any object in openHASP to any value from Home Assistant. This powerful concept gives you full freedom to create a completely customized, hardware-based control user interface for your home automation. We call plate any device running openHASP in your system. Note Before going forward make sure you have installed the MQTT add-on in Home Assistant and the option Enable Discovery is indeed enabled in the MQTT integration service. A working MQTT add-on with discovery enabled is a prerequisite for using the openHASP custom component. Installation ~ You have the option to install the custom component using HACS or via manual download: Using HACS Manual Install Install using HACS in one-click. This is the preferred and recommended method, as HACS provides a very effective way to keep the component updated and/or choose between various versions. Goto Home Assistant > HACS > Integrations . Click the Explore & Add Repositories button. Search for openHASP and click on the openHasp logo. Click Install this repository in HACS . Note: To install the current unstable development version select the Main . Click Install Reboot Home-Assistant Alternatively, you can also install it manually: Download ZIP Using the tool of choice open the directory (folder) for your HA configuration (where you find configuration.yaml ). If you do not have a custom_components directory there, you need to create it. In the custom_components directory create a new folder called openhasp . Download all the files from the custom_components/openhasp/ directory in this repository. Place the files you downloaded in the new directory you created. Edit your configuration.yaml file add an entry similar to the example below. Restart Home Assistant Note The download {target= blank} link points to the actual _development code in the master branch. Warning You have to use component version consistently with the firmware version on your plates. For example, if your plates are at firmware version 0.7.x , you also need to use component version 0.7.y to ensure interoperability. Only the first two digits matter, i.e. 0.7 , the last one can be different. Home Assistant will show a warning if it finds a version mismatch. Note that you can only have one version of the component installed at a time so a mix of plate firmware versions is not supported. Configuration ~ First prepare your plates to be integrated with Home Assistant (follow steps in order): Connect your plates to the network . Static DHCP or fixed IP is not needed as communication only happens through MQTT. Set the GPIO configuration corresponding to your hardware (important for them to be detected as entities), save and reboot. Restart Home Assistant. Set the MQTT server settings and make sure each plate has a unique node name, save and reboot. The component will automatically discover the plates and you will see them appearing in Lovelace UI's Configuration > Devices & Services > openHASP . When Home Assistant detects your plate, you will have to give it a name. In the examples below both name and node name is plate35 . You will be presented with options to set the backlight brightness level when the plate is idle and optionally you can set a path to a centrally located pages.jsonl file containing design for this plate - the component can send the contents of the file when the plate connects. From v0.6.3 of the component this file can also be a file with a .json extension. See the JSON Files section below. Note If you opt to store the pages.jsonl file on Home Assistant server, it will only be loaded on start of Home Assistant and reloaded on plate availability (becoming online). Optionally you should also check how to handle the offline state of the plate. Currently you will get a warning that you need to add manual configuration for the objects in your configuration.yaml , that's no problem, read ahead. Example ~ To add an openHASP plate to your installation with a sample configuration, upload a pages.jsonl file with the following content to your plate first: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"openHASP\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 140 , \"w\" : 170 , \"h\" : 30 , \"options\" : \"Apples\\nBananas\\nOranges\\nMelon\" } { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00.0\u00b0C\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" } Assuming your plate's configured MQTT node name is plate35 , add the following to your configuration.yaml file (Home Assistant will deliberately ask for it when finished autodetection procedure): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 openhasp : plate35 : objects : - obj : \"p0b1\" # temperature label on all pages properties : \"text\" : '{{ states(\"sensor.my_room_temperature\") }}\u00b0C' - obj : \"p1b2\" # light-switch toggle button properties : \"val\" : '{{ 1 if states(\"light.my_room\") == \"on\" else 0 }}' \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.my_room\", \"on\") else \"\\uE335\" | e }}' event : \"up\" : - service : homeassistant.toggle entity_id : \"light.my_room\" - obj : \"p1b3\" # dropdown event : \"changed\" : - service : persistent_notification.create data : message : I like {{ text }} Note The Home Assistant Custom Component is not limited to setting val and text properties on UI objects! There is nothing stopping you from using the full suite of template functions like state_attr in your templates to drive more sophisticated behaviors. See the Example Automations for more. Variable definitions ~ openhasp: (Required) The platform identifier. Required once in the configuration. plate35: (Required) Your plate identifier slug. For each plate in your system, such an entry is required, has to be unique. It is generated automatically from the plate name you gave during discovery, which by default equals to the HASP Node Name set in the plate's configuration . objects: (Optional) Definition of the objects reacting to changes in Home Assistant, or generating events for Home Assistant. obj: (string) (Required) The object identifier which we want to integrate with Home Assistant. Its name has the form pXbY where X represents the page where the object is located, and Y represents the id of the object on that page. properties: (Optional) List containing the properties of the object which we want to modify based on changes occurring in Home Assistant. In the example above text property gets updated whenever sensor.my_room_temperature changes. event: (Optional) List containing the events generated by the object when touched on the screen. These are object-specific and can be observed accurately with an MQTT client. Each event defines a list of services which will be processed in order (like actions list in an automation). In the example above, when object p1b2 (which is a toggle button) generates the on event, light.my_room will be turned on by the service call light.turn_on as specified in the event config. And similarly when off event comes through MQTT, the light will be turned off by the corresponding service call. Note Any variable coming from the MQTT message can be used between curly brackets and passed to the service call. In the example above when object p1b3 (which is a dropdown selector) generates the changed event, a persistent notification will appear in Home Assistant's Lovelace interface containing the selected text from the object, which was passed over from the MQTT message. See object events for more types of generated events. Reloading the configuration ~ After you make changes to the configuration of the plate you can apply them by either restarting Home Assistant or by reloading the integration from Lovelace user interface with option found in Configuration > Devices & Services > openHASP > (your plate >) 3dots menu > Reload . Note that this has to be done individually for each configured plate. You can achieve the same by with a service too: 1 2 3 service : homeassistant.reload_config_entry data : entry_id : 95f7d6fe3fa5f4e242797e9ae4a5dd1d With the entry_id found in .storage/core.config_entries file from your main Home Assistant configuration directory (do NOT edit this file!). Configuration tips ~ Multiple plates ~ If you have multiple plates you can add them all using different plate identifiers. Their configured topics have to be unique too: 1 2 3 4 5 6 7 8 9 10 openhasp : plate_my_room_1 : objects : # ... plate_my_room_2 : objects : # ... plate_my_room_3 : objects : # ... Split configuration ~ You can use Home Assistant's split configuration to help better organizing your config files. Instead of keeping the configuration of all openHASP plates in Home Assistant's main config file, you can keep openHASP config separately, by adding only this to configuration.yaml : openhasp: !include openhasp.yaml After this, you can move your openHASP configuration starting with plate_my_room: level to your separate openhasp.yaml file and restart Home Assistant. Moreover, if you have multiple plates, you can keep each one in a separate config file, to achieve this, make it like: openhasp: !include_dir_merge_named openhasp_configs/ Create a directory openhasp_configs right near configuration.yaml , and put in it all your plates configuration (only with plate_my_room: level) in separate yaml files and restart Home Assistant. Services ~ This component implements some specific services to make interactions with the plate even more comfortable. openhasp.wakeup Wakes up the display when an external event has occurred, like a presence or a PIR motion sensor. openhasp.next_page Changes plate to the next page. openhasp.prev_page Changes plate to the previous page. openhasp.change_page Changes plate directly to the specified page number. openhasp.clear_page Clears the contents of the specified page number. If page number not specified, clears all the pages. openhasp.load_pages Loads new design from pages.jsonl file from full path on Home Assistant server. The file must be located in an authorized location defined by allowlist_external_dirs (in case of hassio /config/ is the directory where Home Assistant's configuration.yaml resides, so in case of a subdirectory called openhasp the full path would be e.g. /config/openhasp/pages.jsonl , and you need to add /config/openhasp/ to your allowlist_external_dirs ). Note The contents of the file are loaded line by line thus \"page\":X has to be defined for each object. Unless you clear the page first, the objects will be updated. For example, to allow read-access to the folder, add these lines to your configuration.yaml : 1 2 3 homeassistant : allowlist_external_dirs : - \"/config/openhasp\" openhasp.command Wraps up any command so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! openhasp.config Wraps up any raw submodule config so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! Check out the example configurations and automations to learn how to use these services within Home Assistant. JSON Files ~ From v0.6.3 pages file supplied in the plate config within home assistant can be a .json , files with this extension will be parsed differently and expect a JSON array containing objects or strings. Objects must be valid JSONL lines and strings can be used for comments. As this file is valid JSON whitespace will be ignored when parsing and removed before sending the JSONL data to the plate. If you are storing your plate config along with your HA config, this allows you to have more readable config which will be formatted in your editor of choice. Example: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 [ { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" }, \"Comment string will be removed when parsing\" , { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } ] Debugging ~ Add these lines to your main configuration.yaml configuration and restart Home Assistant: 1 2 3 4 logger : default : warning logs : custom_components.openhasp : debug Look for the debug messages in the home-assistant.log file.","title":"How-To"},{"location":"integrations/home-assistant/howto/#home-assistant","text":"The openHASP Custom Component simplifies synchronization of objects on one or more openHASP plates with Home Assistant entities. You can map any service supported by any entity in Home Assistant to any object event in openHASP. Moreover, you can set any property of any object in openHASP to any value from Home Assistant. This powerful concept gives you full freedom to create a completely customized, hardware-based control user interface for your home automation. We call plate any device running openHASP in your system. Note Before going forward make sure you have installed the MQTT add-on in Home Assistant and the option Enable Discovery is indeed enabled in the MQTT integration service. A working MQTT add-on with discovery enabled is a prerequisite for using the openHASP custom component.","title":"Home Assistant"},{"location":"integrations/home-assistant/howto/#installation","text":"You have the option to install the custom component using HACS or via manual download: Using HACS Manual Install Install using HACS in one-click. This is the preferred and recommended method, as HACS provides a very effective way to keep the component updated and/or choose between various versions. Goto Home Assistant > HACS > Integrations . Click the Explore & Add Repositories button. Search for openHASP and click on the openHasp logo. Click Install this repository in HACS . Note: To install the current unstable development version select the Main . Click Install Reboot Home-Assistant Alternatively, you can also install it manually: Download ZIP Using the tool of choice open the directory (folder) for your HA configuration (where you find configuration.yaml ). If you do not have a custom_components directory there, you need to create it. In the custom_components directory create a new folder called openhasp . Download all the files from the custom_components/openhasp/ directory in this repository. Place the files you downloaded in the new directory you created. Edit your configuration.yaml file add an entry similar to the example below. Restart Home Assistant Note The download {target= blank} link points to the actual _development code in the master branch. Warning You have to use component version consistently with the firmware version on your plates. For example, if your plates are at firmware version 0.7.x , you also need to use component version 0.7.y to ensure interoperability. Only the first two digits matter, i.e. 0.7 , the last one can be different. Home Assistant will show a warning if it finds a version mismatch. Note that you can only have one version of the component installed at a time so a mix of plate firmware versions is not supported.","title":"Installation"},{"location":"integrations/home-assistant/howto/#configuration","text":"First prepare your plates to be integrated with Home Assistant (follow steps in order): Connect your plates to the network . Static DHCP or fixed IP is not needed as communication only happens through MQTT. Set the GPIO configuration corresponding to your hardware (important for them to be detected as entities), save and reboot. Restart Home Assistant. Set the MQTT server settings and make sure each plate has a unique node name, save and reboot. The component will automatically discover the plates and you will see them appearing in Lovelace UI's Configuration > Devices & Services > openHASP . When Home Assistant detects your plate, you will have to give it a name. In the examples below both name and node name is plate35 . You will be presented with options to set the backlight brightness level when the plate is idle and optionally you can set a path to a centrally located pages.jsonl file containing design for this plate - the component can send the contents of the file when the plate connects. From v0.6.3 of the component this file can also be a file with a .json extension. See the JSON Files section below. Note If you opt to store the pages.jsonl file on Home Assistant server, it will only be loaded on start of Home Assistant and reloaded on plate availability (becoming online). Optionally you should also check how to handle the offline state of the plate. Currently you will get a warning that you need to add manual configuration for the objects in your configuration.yaml , that's no problem, read ahead.","title":"Configuration"},{"location":"integrations/home-assistant/howto/#example","text":"To add an openHASP plate to your installation with a sample configuration, upload a pages.jsonl file with the following content to your plate first: 1 2 3 4 { \"page\" : 1 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"openHASP\" , \"value_font\" : 22 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 } { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"mode\" : \"break\" , \"align\" : 1 } { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"dropdown\" , \"x\" : 10 , \"y\" : 140 , \"w\" : 170 , \"h\" : 30 , \"options\" : \"Apples\\nBananas\\nOranges\\nMelon\" } { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00.0\u00b0C\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" } Assuming your plate's configured MQTT node name is plate35 , add the following to your configuration.yaml file (Home Assistant will deliberately ask for it when finished autodetection procedure): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 openhasp : plate35 : objects : - obj : \"p0b1\" # temperature label on all pages properties : \"text\" : '{{ states(\"sensor.my_room_temperature\") }}\u00b0C' - obj : \"p1b2\" # light-switch toggle button properties : \"val\" : '{{ 1 if states(\"light.my_room\") == \"on\" else 0 }}' \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.my_room\", \"on\") else \"\\uE335\" | e }}' event : \"up\" : - service : homeassistant.toggle entity_id : \"light.my_room\" - obj : \"p1b3\" # dropdown event : \"changed\" : - service : persistent_notification.create data : message : I like {{ text }} Note The Home Assistant Custom Component is not limited to setting val and text properties on UI objects! There is nothing stopping you from using the full suite of template functions like state_attr in your templates to drive more sophisticated behaviors. See the Example Automations for more.","title":"Example"},{"location":"integrations/home-assistant/howto/#variable-definitions","text":"openhasp: (Required) The platform identifier. Required once in the configuration. plate35: (Required) Your plate identifier slug. For each plate in your system, such an entry is required, has to be unique. It is generated automatically from the plate name you gave during discovery, which by default equals to the HASP Node Name set in the plate's configuration . objects: (Optional) Definition of the objects reacting to changes in Home Assistant, or generating events for Home Assistant. obj: (string) (Required) The object identifier which we want to integrate with Home Assistant. Its name has the form pXbY where X represents the page where the object is located, and Y represents the id of the object on that page. properties: (Optional) List containing the properties of the object which we want to modify based on changes occurring in Home Assistant. In the example above text property gets updated whenever sensor.my_room_temperature changes. event: (Optional) List containing the events generated by the object when touched on the screen. These are object-specific and can be observed accurately with an MQTT client. Each event defines a list of services which will be processed in order (like actions list in an automation). In the example above, when object p1b2 (which is a toggle button) generates the on event, light.my_room will be turned on by the service call light.turn_on as specified in the event config. And similarly when off event comes through MQTT, the light will be turned off by the corresponding service call. Note Any variable coming from the MQTT message can be used between curly brackets and passed to the service call. In the example above when object p1b3 (which is a dropdown selector) generates the changed event, a persistent notification will appear in Home Assistant's Lovelace interface containing the selected text from the object, which was passed over from the MQTT message. See object events for more types of generated events.","title":"Variable definitions"},{"location":"integrations/home-assistant/howto/#reloading-the-configuration","text":"After you make changes to the configuration of the plate you can apply them by either restarting Home Assistant or by reloading the integration from Lovelace user interface with option found in Configuration > Devices & Services > openHASP > (your plate >) 3dots menu > Reload . Note that this has to be done individually for each configured plate. You can achieve the same by with a service too: 1 2 3 service : homeassistant.reload_config_entry data : entry_id : 95f7d6fe3fa5f4e242797e9ae4a5dd1d With the entry_id found in .storage/core.config_entries file from your main Home Assistant configuration directory (do NOT edit this file!).","title":"Reloading the configuration"},{"location":"integrations/home-assistant/howto/#configuration-tips","text":"","title":"Configuration tips"},{"location":"integrations/home-assistant/howto/#services","text":"This component implements some specific services to make interactions with the plate even more comfortable. openhasp.wakeup Wakes up the display when an external event has occurred, like a presence or a PIR motion sensor. openhasp.next_page Changes plate to the next page. openhasp.prev_page Changes plate to the previous page. openhasp.change_page Changes plate directly to the specified page number. openhasp.clear_page Clears the contents of the specified page number. If page number not specified, clears all the pages. openhasp.load_pages Loads new design from pages.jsonl file from full path on Home Assistant server. The file must be located in an authorized location defined by allowlist_external_dirs (in case of hassio /config/ is the directory where Home Assistant's configuration.yaml resides, so in case of a subdirectory called openhasp the full path would be e.g. /config/openhasp/pages.jsonl , and you need to add /config/openhasp/ to your allowlist_external_dirs ). Note The contents of the file are loaded line by line thus \"page\":X has to be defined for each object. Unless you clear the page first, the objects will be updated. For example, to allow read-access to the folder, add these lines to your configuration.yaml : 1 2 3 homeassistant : allowlist_external_dirs : - \"/config/openhasp\" openhasp.command Wraps up any command so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! openhasp.config Wraps up any raw submodule config so that it can be called against the entity_id of the plate. Useful in Automations and Blueprints. Warning This service handles data without input validation. Only for advanced users. No support for any problems caused by using this! Check out the example configurations and automations to learn how to use these services within Home Assistant.","title":"Services"},{"location":"integrations/home-assistant/howto/#json-files","text":"From v0.6.3 pages file supplied in the plate config within home assistant can be a .json , files with this extension will be parsed differently and expect a JSON array containing objects or strings. Objects must be valid JSONL lines and strings can be used for comments. As this file is valid JSON whitespace will be ignored when parsing and removed before sending the JSONL data to the plate. If you are storing your plate config along with your HA config, this allows you to have more readable config which will be formatted in your editor of choice. Example: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 [ { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : false , \"text\" : \"Normal Button\" , \"mode\" : \"break\" , \"align\" : \"center\" }, \"Comment string will be removed when parsing\" , { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"#FFD700 Toggle# Button\" , \"mode\" : \"break\" , \"align\" : \"center\" } ]","title":"JSON Files"},{"location":"integrations/home-assistant/howto/#debugging","text":"Add these lines to your main configuration.yaml configuration and restart Home Assistant: 1 2 3 4 logger : default : warning logs : custom_components.openhasp : debug Look for the debug messages in the home-assistant.log file.","title":"Debugging"},{"location":"integrations/home-assistant/sampl_autom/","text":"Display of the current album cover of a media player ~ Combined with a media player entity which supports entity_picture attribute, you can automate display of that using the push_image service of the Custom Component. On the plate (named plate_livingroom in this example) you'd have two objects, first a rectangular object with rounded corners, secod an image object placed inside of it. It's hidden by default so you could place this on top of your existing media player controls, and have it pop up only when there's a cover present. To look nice together use the clip_corner property: { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"obj\" , \"x\" : 3 , \"y\" : 48 , \"w\" : 200 , \"h\" : 200 , \"radius\" : 6 , \"clip_corner\" : 1 , \"hidden\" : 1 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"img\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 200 , \"h\" : 200 , \"parentid\" : 15 , \"src\" : \"\" , \"auto_size\" : 1 } The automation below takes care of unhiding them when a cover appears on the sound_livingroom media player, updating the picture when it changes and hiding them again when the player drops the entity_picture attribute (it's stopped or the played media doesn't have a corresponding picture): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 - id : openhasp-sound_livingroom-detect-mediaplayer-coverart alias : openhasp-sound_livingroom-detect-mediaplayer-coverart trigger : - platform : state entity_id : media_player.sound_livingroom condition : - condition : template value_template : > {{ trigger.from_state.attributes.entity_picture != trigger.to_state.attributes.entity_picture }} action : - choose : - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') != None }}\" sequence : - service : openhasp.push_image target : entity_id : openhasp.plate_livingroom data : image : http://ip.of.your.ha:8123{{ state_attr('media_player.sound_livingroom','entity_picture') }} obj : p6b16 width : 200 height : 200 - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '0' - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') == None }}\" sequence : - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '1' Backlight ON (dimmed) if there's any light in the room, OFF otherwise ~ The night mode activates when all the lights are off and shutters are down below 25% (assuming it's dark enough for the backlight to be disturbing in such situation), the day mode activates otherwise. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. This will act directly on the plate in a certain room, as it is triggered by entities located in that room. If you have multiple plates in various rooms, you can create separate automations for each. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 - id : openhasp-plate_myroom-day alias : \"openHASP Night mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":0}' - id : openhasp-plate_myroom-night alias : \"openHASP Day mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ not ( state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" ) }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":60}' Note the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes). Backlight ON (dimmed) during the day, OFF during the night for all the plates ~ The night mode activates when sun goes down, and the day mode activates when the sun comes up. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. Assuming your plate's configured MQTT group name is plates , this will affect all the plates in your system at once: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - id : openhasp-night alias : \"openHASP Night mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation below : -1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":120}' - id : openhasp-day alias : \"openHASP Day mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation above : 1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":0}' Note here too the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes). Turn ON moodlight when backlight goes OFF (and back) ~ If your plate has moodlights, it is useful in dark situations, when you don't want to have the screen backlit on all the time as above, but have the mood light on instead. During the day mood light doesn't light. Put your light.plate_my_room_moodlight to a Lovelace card entity row and select a nice color for moodlight. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 - id : openhasp-moodlight-on alias : \"openHASP Moodlight ON when Backlight OFF\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'on' to : 'off' action : - service : light.turn_on target : entity_id : light.plate_my_room_moodlight - id : openhasp-moodlight-off alias : \"openHASP Moodlight OFF when Backlight ON\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'off' to : 'on' action : - service : light.turn_off target : entity_id : light.plate_my_room_moodlight Return to home page after some idle time ~ Apart from the idle times controlling backlight levels, one may want to return to page 1 after a while. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 - id : openhasp-back-to-page-1 alias : \"openHASP back to page 1\" trigger : - platform : template value_template : \"{{ state_attr('openhasp.plate_my_room','idle') != 'off' }}\" for : \"00:05:00\" condition : - condition : template value_template : \"{{ states('openhasp.plate_my_room') != '1' and states('openhasp.plate_my_room') != 'unavailable' }}\" action : - service : openhasp.change_page target : entity_id : openhasp.plate_my_room data : page : 1 Prevent burn-in of the LCD screen ~ You can use this to protect and prolonge the lifetime of the LCD screens, thus being more green and generating less hazardous waste. Wall mounted LCD screens' main problem is that they display the same picture 99.999% of the time. Even if somebody turns off backlight during the night or dark periods, the LCD screen keeps showing the same picture, seen by nobody. There are high chances that this will lead to screen picture burn-in after a few years of operation. Pixel training One way to reduce this is to \"train\" the pixels periodically with completely different other content. Assuming your group name is configured as plates in your screens running openHASP, here is a possible solution to extend their life (all at once). The cycle runs for 30 seconds each time, can be stopped by touching. The trigger runs this 6 times each night. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 - id : openhasp_antiburn_start_at_night alias : openHASP anti-burn-in start at night initial_state : 'on' trigger : - platform : time at : '00:20:00' - platform : time at : '01:20:00' - platform : time at : '02:20:00' - platform : time at : '03:20:00' - platform : time at : '04:20:00' - platform : time at : '05:20:00' action : - service : mqtt.publish data : topic : hasp/plates/command/antiburn payload : '1' Clear pixels when backlight off Another way to reduce the chance of burn-in is to clear the contents of the screen while the backlight is turned off, as nobody sees the pixels anyway. Just add these actions to the first automation example which draw an overlay with a black base object on page 0 when display is off, and deletes it when comes back on: for automation openhasp-moodlight-on , add to actions: 1 2 3 4 - service : mqtt.publish data : topic : hasp/plates/command/jsonl payload : '{\"page\":0,\"id\":99,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"hidden\":0,\"bg_grad_dir\":0,\"bg_color\":\"black\"}' for automation openhasp-moodlight-off , add to actions: 1 2 3 4 5 6 7 8 - service : mqtt.publish data : topic : hasp/plates/command/p0b99.hidden payload : '1' - service : mqtt.publish data : topic : hasp/plates/command/p0b99.delete payload : '' Don't forget to adjust the size of the object to your screen if it's not 240x320. Dynamically set UI element dimensions ~ Note This technique relies on small changes in the openHasp device firmware that should be present in all builds of 0.7 after 2021-01. openHasp devices report several device properties to the Custom Component... including tftWidth and tftHeight . These properties are exposed in home assistant as device attributes and can be used in template automations. Here is a modified version of the Display clock and temperature example configuration that will use a \"generic\" jsonl file that has no hard-coded layout attributes: x , y , w , h and will appear the same on devices with different resolutions and screen orientations. Tell the openHasp device to create three text labels. As we are not specifying x/y coordinates, when the device first powers on, all three labels will be drawn in the upper left corner with their default size/values. When plate00 comes online and connects to the MQTT broker, the openHasp Custom Component will be invoked and the yaml below will be executed. The templates will be executed and the computed x , y , w , h values for each UI component will be sent to the plate. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 { \"page\" : 0 , \"comment\" : \"Default to page0 as the header and page/layout\" } { \"id\" : 1 , \"comment\" : \"Time in the top left\" , \"obj\" : \"label\" , \"text\" : \"00:00\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 2 , \"comment\" : \"Temp in the middle\" , \"obj\" : \"label\" , \"text\" : \"00.0\u00b0C\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 3 , \"comment\" : \"Humidity in the top right\" , \"obj\" : \"label\" , \"text\" : \"00.0%\" , \"bg_color\" : \"#2C3E50\" } Assuming that the above jsonl was deployed to a openHasp device named plate00 , configure the Home Assistant Custom Component with yaml like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 # The top left corner is 0,0, X grows positive to the right and Y grows positive down plate00 : objects : # Header: Time - obj : \"p0b1\" properties : \"align\" : \"left\" \"text\" : \"{{ states('sensor.time') }}\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Temp - obj : \"p0b2\" properties : \"align\" : \"center\" \"text\" : \"{{ states('sensor.room_temperature') }}\u00b0C\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+hdrLblWd}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Humidity - obj : \"p0b3\" properties : \"align\" : \"right\" \"text\" : \"{{ states('sensor.room_humidity') }}%\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+(2*hdrLblWd)}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} You should be able to shift the screen orientation for plate00 by 90 degrees and restart the device to apply your change. When the device boots back up and connects to MQTT, openHasp should report a different value for it's tftHeight and tftWidth which will cause Home Assistant to re-evaluate the templates. A few seconds after connecting to MQTT, plate00 should have an updated layout that reflects it's new screen orientation.","title":"Example Automations"},{"location":"integrations/home-assistant/sampl_autom/#display-of-the-current-album-cover-of-a-media-player","text":"Combined with a media player entity which supports entity_picture attribute, you can automate display of that using the push_image service of the Custom Component. On the plate (named plate_livingroom in this example) you'd have two objects, first a rectangular object with rounded corners, secod an image object placed inside of it. It's hidden by default so you could place this on top of your existing media player controls, and have it pop up only when there's a cover present. To look nice together use the clip_corner property: { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"obj\" , \"x\" : 3 , \"y\" : 48 , \"w\" : 200 , \"h\" : 200 , \"radius\" : 6 , \"clip_corner\" : 1 , \"hidden\" : 1 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"img\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 200 , \"h\" : 200 , \"parentid\" : 15 , \"src\" : \"\" , \"auto_size\" : 1 } The automation below takes care of unhiding them when a cover appears on the sound_livingroom media player, updating the picture when it changes and hiding them again when the player drops the entity_picture attribute (it's stopped or the played media doesn't have a corresponding picture): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 - id : openhasp-sound_livingroom-detect-mediaplayer-coverart alias : openhasp-sound_livingroom-detect-mediaplayer-coverart trigger : - platform : state entity_id : media_player.sound_livingroom condition : - condition : template value_template : > {{ trigger.from_state.attributes.entity_picture != trigger.to_state.attributes.entity_picture }} action : - choose : - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') != None }}\" sequence : - service : openhasp.push_image target : entity_id : openhasp.plate_livingroom data : image : http://ip.of.your.ha:8123{{ state_attr('media_player.sound_livingroom','entity_picture') }} obj : p6b16 width : 200 height : 200 - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '0' - conditions : - condition : template value_template : \"{{ state_attr('media_player.sound_livingroom','entity_picture') == None }}\" sequence : - service : openhasp.command target : entity_id : openhasp.plate_livingroom data : keyword : p6b15.hidden parameters : '1'","title":"Display of the current album cover of a media player"},{"location":"integrations/home-assistant/sampl_autom/#backlight-on-dimmed-if-theres-any-light-in-the-room-off-otherwise","text":"The night mode activates when all the lights are off and shutters are down below 25% (assuming it's dark enough for the backlight to be disturbing in such situation), the day mode activates otherwise. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. This will act directly on the plate in a certain room, as it is triggered by entities located in that room. If you have multiple plates in various rooms, you can create separate automations for each. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 - id : openhasp-plate_myroom-day alias : \"openHASP Night mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":0}' - id : openhasp-plate_myroom-night alias : \"openHASP Day mode based on My Room entities\" trigger : - platform : state entity_id : light.plate_myroom_light_12 - platform : state entity_id : light.plate_myroom_light_14 - platform : state entity_id : cover.myroom_1 - platform : state entity_id : cover.myroom_2 - platform : state entity_id : openhasp.plate_myroom from : 'unavailable' mode : restart condition : condition : and conditions : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" - condition : template value_template : > {{ not ( state_attr(\"cover.myroom_1\", \"current_position\") | float(default=0) > 25 or state_attr(\"cover.myroom_2\", \"current_position\") | float(default=0) > 25 or states(\"light.plate_myroom_light_12\") == \"on\" or states(\"light.plate_myroom_light_14\") == \"on\" ) }} action : - service : openhasp.config target : entity_id : openhasp.plate_myroom data : submodule : gui parameters : '{\"idle2\":60}' Note the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes).","title":"Backlight ON (dimmed) if there's any light in the room, OFF otherwise"},{"location":"integrations/home-assistant/sampl_autom/#backlight-on-dimmed-during-the-day-off-during-the-night-for-all-the-plates","text":"The night mode activates when sun goes down, and the day mode activates when the sun comes up. During the day, when the screen is after short idle, it dims to the level configured in Home Assistant, but never turns off. During the night, the screen turns off after the long idle period. Assuming your plate's configured MQTT group name is plates , this will affect all the plates in your system at once: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - id : openhasp-night alias : \"openHASP Night mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation below : -1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":120}' - id : openhasp-day alias : \"openHASP Day mode\" trigger : - platform : numeric_state entity_id : sun.sun attribute : elevation above : 1 condition : - condition : template value_template : \"{{ (as_timestamp(now()) - as_timestamp(states('sensor.ha_uptime_moment'))) / 60 > 2 }}\" action : - service : mqtt.publish data : topic : hasp/plates/config/gui payload : '{\"idle2\":0}' Note here too the condition which assures to avoid triggering the automations falsely when Home Assistant (re)starts (allows running the automation only when Home Assistant has been up for at least 2 minutes).","title":"Backlight ON (dimmed) during the day, OFF during the night for all the plates"},{"location":"integrations/home-assistant/sampl_autom/#turn-on-moodlight-when-backlight-goes-off-and-back","text":"If your plate has moodlights, it is useful in dark situations, when you don't want to have the screen backlit on all the time as above, but have the mood light on instead. During the day mood light doesn't light. Put your light.plate_my_room_moodlight to a Lovelace card entity row and select a nice color for moodlight. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 - id : openhasp-moodlight-on alias : \"openHASP Moodlight ON when Backlight OFF\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'on' to : 'off' action : - service : light.turn_on target : entity_id : light.plate_my_room_moodlight - id : openhasp-moodlight-off alias : \"openHASP Moodlight OFF when Backlight ON\" trigger : - platform : state entity_id : light.plate_my_room_backlight from : 'off' to : 'on' action : - service : light.turn_off target : entity_id : light.plate_my_room_moodlight","title":"Turn ON moodlight when backlight goes OFF (and back)"},{"location":"integrations/home-assistant/sampl_autom/#return-to-home-page-after-some-idle-time","text":"Apart from the idle times controlling backlight levels, one may want to return to page 1 after a while. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 - id : openhasp-back-to-page-1 alias : \"openHASP back to page 1\" trigger : - platform : template value_template : \"{{ state_attr('openhasp.plate_my_room','idle') != 'off' }}\" for : \"00:05:00\" condition : - condition : template value_template : \"{{ states('openhasp.plate_my_room') != '1' and states('openhasp.plate_my_room') != 'unavailable' }}\" action : - service : openhasp.change_page target : entity_id : openhasp.plate_my_room data : page : 1","title":"Return to home page after some idle time"},{"location":"integrations/home-assistant/sampl_autom/#prevent-burn-in-of-the-lcd-screen","text":"You can use this to protect and prolonge the lifetime of the LCD screens, thus being more green and generating less hazardous waste. Wall mounted LCD screens' main problem is that they display the same picture 99.999% of the time. Even if somebody turns off backlight during the night or dark periods, the LCD screen keeps showing the same picture, seen by nobody. There are high chances that this will lead to screen picture burn-in after a few years of operation.","title":"Prevent burn-in of the LCD screen"},{"location":"integrations/home-assistant/sampl_autom/#dynamically-set-ui-element-dimensions","text":"Note This technique relies on small changes in the openHasp device firmware that should be present in all builds of 0.7 after 2021-01. openHasp devices report several device properties to the Custom Component... including tftWidth and tftHeight . These properties are exposed in home assistant as device attributes and can be used in template automations. Here is a modified version of the Display clock and temperature example configuration that will use a \"generic\" jsonl file that has no hard-coded layout attributes: x , y , w , h and will appear the same on devices with different resolutions and screen orientations. Tell the openHasp device to create three text labels. As we are not specifying x/y coordinates, when the device first powers on, all three labels will be drawn in the upper left corner with their default size/values. When plate00 comes online and connects to the MQTT broker, the openHasp Custom Component will be invoked and the yaml below will be executed. The templates will be executed and the computed x , y , w , h values for each UI component will be sent to the plate. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 { \"page\" : 0 , \"comment\" : \"Default to page0 as the header and page/layout\" } { \"id\" : 1 , \"comment\" : \"Time in the top left\" , \"obj\" : \"label\" , \"text\" : \"00:00\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 2 , \"comment\" : \"Temp in the middle\" , \"obj\" : \"label\" , \"text\" : \"00.0\u00b0C\" , \"bg_color\" : \"#2C3E50\" } { \"id\" : 3 , \"comment\" : \"Humidity in the top right\" , \"obj\" : \"label\" , \"text\" : \"00.0%\" , \"bg_color\" : \"#2C3E50\" } Assuming that the above jsonl was deployed to a openHasp device named plate00 , configure the Home Assistant Custom Component with yaml like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 # The top left corner is 0,0, X grows positive to the right and Y grows positive down plate00 : objects : # Header: Time - obj : \"p0b1\" properties : \"align\" : \"left\" \"text\" : \"{{ states('sensor.time') }}\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Temp - obj : \"p0b2\" properties : \"align\" : \"center\" \"text\" : \"{{ states('sensor.room_temperature') }}\u00b0C\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+hdrLblWd}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} # Header: Humidity - obj : \"p0b3\" properties : \"align\" : \"right\" \"text\" : \"{{ states('sensor.room_humidity') }}%\" \"mode\" : \"loop\" ## # Draw the labels with a 1% margin from the top and sides \"x\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {{hdrHorMargin+(2*hdrLblWd)}} \"y\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {{hdrVrtMargin}} # Width is 1/3 of the screen width after subtracting margins ## \"w\" : >- {% set numObj = 3 %} {% set scnWd = state_attr('openhasp.plate00', 'tftWidth') | int %} {% set hdrHorMargin = (scnWd*0.01) | int %} {% set usableHdrWd = scnWd-(2*hdrHorMargin) %} {% set hdrLblWd = (usableHdrWd/numObj) | int %} {{hdrLblWd}} # Height is 10% of the screen, after margin ## \"h\" : >- {% set scnHt = state_attr('openhasp.plate00', 'tftHeight') | int %} {% set hdrVrtMargin = (scnHt*0.01) | int %} {% set hdrHt = (scnHt*0.1) | int %} {% set hdrLblHt = hdrHt-hdrVrtMargin %} {{hdrLblHt}} You should be able to shift the screen orientation for plate00 by 90 degrees and restart the device to apply your change. When the device boots back up and connects to MQTT, openHasp should report a different value for it's tftHeight and tftWidth which will cause Home Assistant to re-evaluate the templates. A few seconds after connecting to MQTT, plate00 should have an updated layout that reflects it's new screen orientation.","title":"Dynamically set UI element dimensions"},{"location":"integrations/home-assistant/sampl_conf/","text":"Display clock and temperature ~ The easiest example is to display the state of a clock and a temperature sensor from Home Assistant, using label objects in openHASP. Create a label object to display the temperature value, a separate label object to display the unit and a third label object for the clock: 1 2 3 { \"page\" : 0 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"00.0\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 220 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"\u00b0C\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 3 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00:00\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } In component configuration all you need for the objects is: 1 2 3 4 5 6 7 objects : - obj : \"p0b4\" properties : \"text\" : \"{{ states('sensor.my_room_temperature') }}\" - obj : \"p0b6\" properties : \"text\" : \"{{ states('sensor.time') }}\" Note: ~ You can of course omit the second label object with the unit and use the same for both value and unit: 1 2 { \"page\" : 0 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00.0\u00b0C\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 3 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00:00\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } In component configuration you will add the unit to the value using the template: 1 2 3 4 objects : - obj : \"p0b4\" properties : \"text\" : \"{{ states('sensor.my_room_temperature') }}\u00b0C\" All these being on page 0 means that they will appear on all the pages. Some basic controls ~ Jsonl and Home Assistant configuration: Toggle a light (or any switchable entity with on/off states) ~ 1 { \"page\" : 1 , \"id\" : 2 , \"obj\" : \"btn\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 90 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 , \"align\" : 1 } 1 2 3 4 5 6 7 8 - obj : \"p1b2\" # switch, checkbox or btn with toggle true properties : \"val\" : '{{ 1 if is_state(\"light.my_lamp\", \"on\") else 0 }}' \"text\" : '{{ \"\\uE6E8\" if is_state(\"light.my_lamp\", \"on\") else \"\\uE335\" | e }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.my_lamp\" Dropdown (self-populating from an input_select) ~ 1 { \"page\" : 1 , \"id\" : 3 , \"obj\" : \"dropdown\" , \"x\" : 5 , \"y\" : 40 , \"w\" : 230 , \"h\" : 30 , \"options\" : \"\" } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 - obj : \"p1b3\" # dropdown properties : \"options\" : > {% if (state_attr('input_select.my_dropdown_selections','options') != none and states('input_select.my_dropdown_selections') not in ['unavailable', 'unknown']) %}{%for item in state_attr('input_select.my_dropdown_selections','options')%}{{item+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"val\" : > {% if (state_attr('input_select.my_dropdown_selections','options') != none and states('input_select.my_dropdown_selections') not in ['unavailable', 'unknown']) %}{%for item in state_attr('input_select.my_dropdown_selections','options')%} {{loop.index -1 if item == states('input_select.my_dropdown_selections') }} {%-endfor%}{% endif %} event : \"changed\" : - service : input_select.select_option data : option : '{{ text }}' target : entity_id : input_select.my_dropdown_selections - service : persistent_notification.create data : message : Selected {{ text }} Color coded icons ~ Color code a WiFi icon according to RSSI reported by the plate openHASP config: (screen size 240x320) 1 { \"obj\" : \"btn\" , \"id\" : 1 , \"x\" : 120 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"\\uE5A9\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } relevant openHASP-custom-component config: 1 2 3 - obj : \"p0b1\" properties : \"text_color\" : \"{% if -30 <= state_attr('openhasp.openhasp_plate','rssi') |int %}green{% elif -31 > state_attr('openhasp.openhasp_plate','rssi') |int >= -50 %}orange{% elif -51 > state_attr('openhasp.openhasp_plate','rssi') |int >= -80 %}tomato{% else %}red{% endif %}\" Color code a temperature icon according to sensor values openHASP config: (screen size 240x320) 1 { \"obj\" : \"btn\" , \"id\" : 3 , \"x\" : 165 , \"y\" : 1 , \"w\" : 30 , \"h\" : 40 , \"text_font\" : \"2\" , \"text\" : \"\\uE50F\" , \"text_color\" : \"gray\" , \"bg_opa\" : 0 , \"border_width\" : 0 } relevant openHASP-custom-component config: 1 2 3 - obj : \"p0b3\" properties : \"text_color\" : \"{% if states('sensor.room_temperature') |int <= 21 %}#4682B4{% elif 21 < states('sensor.room_temperature') |int <= 26 %}green{% else %}red{% endif %}\" Variable sized icons ~ Have a fan icon which changes its size depending on the speed of the fan, and goes off the screen when the fan is off. openHASP config: 1 { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 1 , \"h\" : 35 , \"w\" : 35 , \"text\" : \"\\uE210\" , \"align\" : \"left\" , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"yellow\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 - obj : \"p0b1\" properties : \"jsonl\" : > {% if is_state('input_select.fan_speed', 'Low') %} {\"text_font\":12,\"x\":6,\"y\":7} {%-elif is_state('input_select.fan_speed', 'Medium') %} {\"text_font\":16,\"x\":5,\"y\":6} {%-elif is_state('input_select.fan_speed', 'Hign') %} {\"text_font\":24,\"x\":1,\"y\":2} {%-elif is_state('input_select.fan_speed', 'Turbo') %} {\"text_font\":32,\"x\":-2,\"y\":-3} {%-elif is_state('input_select.fan_speed', 'OFF') %} {\"text_font\":12,\"x\":-10,\"y\":-10} {% endif %} Light brightness and color ~ Have a light in Home Assistant controlled by openHASP. In our example we use Lanbon L8's moodlight which has both brightness and color - we use a slider object for the brightness, and a cpicker object for color. relevant openHASP config: 1 2 { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"slider\" , \"x\" : 6 , \"y\" : 15 , \"w\" : 14 , \"h\" : 180 , \"min\" : 1 , \"max\" : 255 } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"cpicker\" , \"x\" : 30 , \"y\" : 10 , \"w\" : 180 , \"h\" : 180 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 - obj : \"p1b31\" # Light brightness properties : \"val\" : \"{{ state_attr('light.plate_moodlight', 'brightness') if state_attr('light.plate_moodlight', 'brightness') != None else 0 }}\" event : \"changed\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" - obj : \"p1b32\" # Light color properties : \"color\" : > {% if is_state('light.plate_moodlight','on') %} {% set rgb = state_attr('light.plate_moodlight','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" The brightness slider value gets updated from the brightness attribute of light.plate_moodlight , while it's on. If it's off, that attribute is removed by Home Assistant, in that case we set it to 0 . The color property gets updated from the rgb_color attriburte of the light. The R, G and B decimal color values are converted to hexadecimal html color code using a template whenever the color of the light changes in Home Assistant. When somebody changes the color of the picker object on the page, the light in Home Assistant gets updated with rgb_color values received in the MQTT message from the plate. Cover with state feedback ~ The icon on the up and down buttons change color when covers move and set opacity when reached to limit. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"btn\" , \"x\" : 83 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"btn\" , \"x\" : 161 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 - obj : \"p1b4\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b5\" properties : \"text\" : > {% if is_state('cover.cover_1', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.cover_1', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b6\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.cover_1\" Cover with button matrix ~ A simpler cover control with only basic feedback. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 { \"page\" : 4 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 0 , \"y\" : 20 , \"w\" : 240 , \"h\" : 70 , \"options\" :[ \"\\uE05D\" , \"\\uE4DB\" , \"\\uE045\" ], \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 - obj : \"p4b20\" properties : \"options\" : > {% if is_state('cover.cover_1', 'closing') %} [\"\\uE05D\",\"\\uE4DB\",\"#FFFF00 \\uE045\"] {%-elif is_state('cover.cover_1', 'opening') %} [\"#FFFF00 \\uE05D\",\"\\uE4DB\",\"\\uE045\"] {%-else %} [\"\\uE05D\",\"\\uE4DB\",\"\\uE045\"] {% endif %} event : \"down\" : - service : > {% if val == 0 %} cover.open_cover {%-elif val == 1 %} cover.stop_cover {%-elif val == 2 %} cover.close_cover {% endif %} target : entity_id : cover.cover_1 Covers like in Lovelace ~ The icon behaves like in Lovelace. UI theme set to Hasp Light in plate's web interface. Your browser does not support the video tag. Check out the Lovelace-like entities for similar placement. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 1\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 2\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 25 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 26 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 - obj : \"p5b12\" properties : \"text\" : > {% if is_state('cover.my_cover', 'closing') %} {{ \"\\uE6C0\" | e }} {%-elif is_state('cover.my_cover', 'opening') %} {{ \"\\uE6C3\" | e }} {%-elif is_state('cover.my_cover', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.my_cover', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} - obj : \"p5b14\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b15\" event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b16\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.my_cover\" Media player ~ The labels with artist and title are scrolling, the progressbar fills if the media player provides duration and playback position. The dropdown lists containing the available sources and sound modes of the player get populated automatically by the values existing on the player in Home Assistant, and also the actually selected source is in sync with it. Player availability is shown by the opacity of the buttons. Player state (play/pause) is shown by the middle button, short pressing means pause, long-press means stop. Power state shown by color, repeat, shuffle and muted state shown by appropriate icons on the buttons. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { \"page\" : 6 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 , \"bg_opa\" : 0 , \"shadow_opa\" : 140 , \"shadow_color\" : \"black\" , \"shadow_width\" : 20 , \"shadow_spread\" : 0 } { \"page\" : 6 , \"id\" : 11 , \"obj\" : \"obj\" , \"x\" : 8 , \"y\" : 38 , \"w\" : 200 , \"h\" : 84 , \"click\" : 0 } { \"page\" : 6 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 48 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 83 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 8 , \"y\" : 117 , \"w\" : 200 , \"h\" : 5 , \"min\" : 0 , \"max\" : 100 , \"border_opa\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"dropdown\" , \"x\" : 8 , \"y\" : 129 , \"w\" : 120 , \"h\" : 30 , \"options\" : \"Source1\\nSource2\\nSource3\" , \"direction\" : 3 , \"max_height\" : 300 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"dropdown\" , \"x\" : 133 , \"y\" : 129 , \"w\" : 75 , \"h\" : 30 , \"options\" : \"Jazz\\nPop\\nRock\" , \"direction\" : 2 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 17 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 166 , \"w\" : 50 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AE\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 18 , \"obj\" : \"btn\" , \"x\" : 66 , \"y\" : 166 , \"w\" : 83 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE40A\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 19 , \"obj\" : \"btn\" , \"x\" : 157 , \"y\" : 166 , \"w\" : 51 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AD\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 20 , \"obj\" : \"slider\" , \"x\" : 212 , \"y\" : 38 , \"w\" : 20 , \"h\" : 244 , \"min\" : 0 , \"max\" : 100 , \"val\" : 85 } { \"page\" : 6 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE425\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 60 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE457\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 111 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE49E\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 163 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE57E\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 - obj : \"p6b12\" # artist label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_artist') if state_attr('media_player.sound_my_room1','media_artist') else '-' }}\" - obj : \"p6b13\" # title label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_title') if state_attr('media_player.sound_my_room1','media_title') else '-' }}\" - obj : \"p6b15\" # sources list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','source_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{\"(no source)\\n\"|e}} {%- for source in state_attr('media_player.sound_my_room1','source_list') -%} {{source+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %} {% if state_attr('media_player.sound_my_room1','source') == None %}0{% else %} {%for source in state_attr('media_player.sound_my_room1','source_list')%} {{loop.index if source == state_attr('media_player.sound_my_room1','source') }} {%-endfor%}{%-endif %}{%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_source data : entity_id : media_player.sound_my_room1 source : \"{{ text }}\" - obj : \"p6b16\" # sound modes list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','sound_mode_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {%-for soundmode in state_attr('media_player.sound_my_room1','sound_mode_list')-%} {{soundmode+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %}{%for source in state_attr('media_player.sound_my_room1','sound_mode_list')%} {{loop.index -1 if source == state_attr('media_player.sound_my_room1','sound_mode') }} {%-endfor%}{% endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_sound_mode data : entity_id : media_player.sound_my_room1 sound_mode : \"{{ text }}\" - obj : \"p6b14\" # progressbar properties : \"max\" : \"{{ state_attr('media_player.sound_my_room1','media_duration') | int }}\" \"val\" : \"{{ state_attr('media_player.sound_my_room1','media_position') | int }}\" - obj : \"p6b18\" # play/pause/stop properties : \"text\" : > {% if is_state('media_player.sound_my_room1', 'playing') %} {{ \"\\uE3E4\" | e }} {%-else %} {{ \"\\uE40A\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_play_pause target : entity_id : media_player.sound_my_room1 \"long\" : - service : media_player.media_stop target : entity_id : media_player.sound_my_room1 - obj : \"p6b17\" # prev properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_previous_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b19\" # next properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_next_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b20\" # volume slider properties : \"val\" : > {% if (state_attr('media_player.sound_my_room1','volume_level') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{ state_attr('media_player.sound_my_room1','volume_level') * 100 | int(default=80) }} {%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" \"up\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" - obj : \"p6b21\" # power properties : \"text_color\" : \"{{ '#B00000' if states('media_player.sound_my_room1') == 'off' else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.toggle data : entity_id : media_player.sound_my_room1 - obj : \"p6b22\" # repeat properties : \"text\" : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} {{ \"\\uE458\" | e }} {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} {{ \"\\uE456\" | e }} {%-else %} {{ \"\\uE457\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.repeat_set data : entity_id : media_player.sound_my_room1 repeat : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} all {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} off {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'off') %} one {%-endif %} - obj : \"p6b23\" # shuffle properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} {{ \"\\uE49D\" | e }} {%-else %} {{ \"\\uE49E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.shuffle_set data : entity_id : media_player.sound_my_room1 shuffle : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} false {% else %} true {%-endif %} - obj : \"p6b24\" # mute properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} {{ \"\\uE75F\" | e }} {%-else %} {{ \"\\uE57E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.volume_mute data : entity_id : media_player.sound_my_room1 is_volume_muted : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} false {% else %} true {%-endif %} Note that the val value of the slider is multiplied and divided by 100 when read and set, because LVGL only suppports integers for object values. By multiplying and dividing by 100, it becomes possible to set volume between 0 and 1 as required by Home Assistant. Generic thermostat/climate ~ This example is a bit more complex in the aspect that it uses several objects put on top of each other, and grouped toghether using the parentid parameter. Special attention goes to an invisible tabview (exteding over the label dispaying the target temperarture) which allows for swiping between an on/off switch and dropdowns for setting the hvac and fan modes. The target temperature can be set by dragging the arc handle, more precise +/- setting possible by short/long pressing the middle circle containing the current temperature (increasing/decreasing the value by the temperature step defined by the climate entity). Note that the min , max and val values of the arc and gauge are multiplied and divided by 10 when set and read, because LVGL only suppports integers for object values. By multiplying and dividing by 10, it becomes possible to set decimal values for climate temperature. The number of the ticks on the gauge is determined from the min , max attributes of the configured climate, likewise the hvac_modes and fan_modes dropdowns. You can localise these using the if-else statements of the template in the configuration of the custom component. The active area of the arc changes color based on the current hvac mode of the entity. UI theme set to Hasp Light in plate's web interface. Note that the tab swiping dots ( p3b26 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Your browser does not support the video tag. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 20 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 37 , \"w\" : 230 , \"h\" : 230 , \"min\" : 170 , \"max\" : 300 , \"val\" : 250 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"adjustable\" : \"true\" , \"line_width\" : 21 , \"line_width10\" : 21 , \"line_color10\" : \"#34bdeb\" , \"bg_opa\" : 0 , \"pad_top20\" : 5 , \"pad_bottom20\" : 5 , \"pad_left20\" : 5 , \"pad_right20\" : 5 , \"pad_top\" : 5 , \"pad_bottom\" : 5 , \"pad_left\" : 5 , \"pad_right\" : 5 } { \"page\" : 3 , \"id\" : 21 , \"obj\" : \"gauge\" , \"x\" : 28 , \"y\" : 28 , \"w\" : 175 , \"h\" : 175 , \"parentid\" : 20 , \"min\" : 170 , \"max\" : 300 , \"val\" : 224 , \"format\" : 1 , \"critical_value\" : 301 , \"label_count\" : 14 , \"line_count\" : 27 , \"border_width\" : 0 , \"pad_top\" : 2 , \"pad_bottom\" : 2 , \"pad_left\" : 2 , \"pad_right\" : 2 , \"value_str\" : \"\u00b0C\" , \"value_ofs_y\" : 55 , \"value_font\" : 16 , \"bg_opa\" : 0 , \"line_width10\" : 3 , \"line_rounded10\" : 1 , \"line_color\" : \"#348feb\" , \"line_color60\" : \"#348feb\" , \"scale_grad_color\" : \"#eb4934\" , \"scale_grad_color60\" : \"#eb4934\" , \"scale_end_color60\" : \"#eb4934\" } { \"page\" : 3 , \"id\" : 22 , \"obj\" : \"obj\" , \"x\" : 85 , \"y\" : 85 , \"w\" : 60 , \"h\" : 60 , \"parentid\" : 20 , \"click\" : 0 , \"radius\" : 30 , \"border_width\" : 2 , \"border_opa\" : 200 } { \"page\" : 3 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 80 , \"y\" : 100 , \"w\" : 70 , \"h\" : 30 , \"parentid\" : 20 , \"text\" : \"22.4\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 24 , \"obj\" : \"obj\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 25 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"25\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 26 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 220 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" , \"border_width\" : 0 } { \"page\" : 3 , \"id\" : 30 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 235 , \"w\" : 240 , \"h\" : 80 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"radius\" : 0 } { \"page\" : 3 , \"id\" : 31 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 32 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 33 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 41 , \"obj\" : \"switch\" , \"x\" : 35 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 31 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 3 , \"id\" : 42 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 32 , \"options\" : \"fan_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 43 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 33 , \"options\" : \"hvac_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 - obj : \"p3b20\" # arc slider properties : \"val\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') | int * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"line_color1\" : > {% if is_state('climate.thermostat_1', 'cool') %} {{ \"#346beb\" }} {%-elif is_state('climate.thermostat_1', 'heat_cool') %} {{ \"#34bdeb\" }} {%-elif is_state('climate.thermostat_1', 'heat') %} {{ \"#eb3434\" }} {%-elif is_state('climate.thermostat_1', 'dry') %} {{ \"#ebeb34\" }} {%-elif is_state('climate.thermostat_1', 'fan_only') %} {{ \"#34eb77\" }} {%-else %} {{ \"#9f96b0\" }} {% endif %} event : \"changed\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" - obj : \"p3b21\" # gauge current temp properties : \"val\" : > {% if not (is_state('sensor.ble_atlaghomerseklet','unavailable') or is_state('sensor.ble_atlaghomerseklet','unknown')) %} {{ states('sensor.ble_atlaghomerseklet') | float (default=0) * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"critical_value\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 + 1 }} {%- endif %} \"label_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int + 1 }} {%- endif %} \"line_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ (state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int) * 2 + 1 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b23\" # label current temp (and +/- with short/long touch) properties : \"text\" : > {% if (is_state('sensor.temp_room_1','unavailable') or is_state('sensor.temp_room_1','unknown')) %} {{ \"--.-\" }} {%-else %} {{ states('sensor.temp_room_1') | round(1,default=0) }} {%- endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') + state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" \"long\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') - state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" - obj : \"p3b25\" # label target temp properties : \"text\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b41\" # on/off switch properties : \"val\" : \"{{ 0 if (is_state('climate.thermostat_1', 'off') or is_state('climate.thermostat_1', 'unavailable')) else 1 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"down\" : - service_template : > {% if val == 0 -%} climate.turn_on {% else -%} climate.turn_off {% endif -%} entity_id : \"climate.thermostat_1\" - obj : \"p3b30\" # tab dots event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p3b26.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 2 %} {{ \"#909090 \\u2022# #909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p3b42\" # dropdown with fan_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','fan_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {%- if mode == 'auto' -%} Automatic{{\"\\n\"|e}} {%- elif mode == 'low' -%} Low{{\"\\n\"|e}} {%- elif mode == 'medium' -%} Medium{{\"\\n\"|e}} {%- elif mode == 'high' -%} High{{\"\\n\"|e}} {%- elif mode == 'turbo' -%} Turbo{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {{loop.index -1 if mode == state_attr('climate.thermostat_1','fan_mode') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_fan_mode target : entity_id : climate.thermostat_1 data : fan_mode : > {% if text == \"Automatic\" -%} auto {% elif text == 'Low' -%} low {% elif text == 'Medium' -%} medium {% elif text == 'High' -%} high {% elif text == 'Turbo' -%} turbo {% endif -%} - obj : \"p3b43\" # dropdown with hvac_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','hvac_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {%- if mode == 'off' -%} Off{{\"\\n\"|e}} {%- elif mode == 'heat' -%} Heating{{\"\\n\"|e}} {%- elif mode == 'cool' -%} Cooling{{\"\\n\"|e}} {%- elif mode == 'heat_cool' -%} Heat/Cool{{\"\\n\"|e}} {%- elif mode == 'dry' -%} Drying{{\"\\n\"|e}} {%- elif mode == 'fan_only' -%} Fan only{{\"\\n\"|e}} {%- else -%} On{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {{loop.index -1 if mode == states('climate.thermostat_1') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_hvac_mode target : entity_id : climate.thermostat_1 data : hvac_mode : > {% if text == \"Off\" -%} off {% elif text == 'Heating' -%} heat {% elif text == 'Cooling' -%} cool {% elif text == 'Heat/Cool' -%} heat_cool {% elif text == 'Drying' -%} dry {% elif text == 'Fan only' -%} fan_only {% endif -%} Current weather and forecasts ~ This example implements two weather forecast screens which located on the same page, can be swiped left and right. On the top area the current weather is shown, on the bottom area the user can choose by swiping between next hours and next days forecast. This is achieved by a tabview object with invisible tabs. Since there's no weather integration in Home Assistant which can offer so much information at once, this can be achieved by installing multiple weather components. In our example we use two: Met.no (the one coming by default pre-installed) for next days forecast. OpenWeatherMap {target= blank} (available as standard integration to be activated) for next hours forecast. _You need to set the forecast mode to onecall_hourly to get forecasts for the day's next hours. The openHASP component grabs information from both weather sources and updates them on every change. The various strings containing day names, day periods, weather conditions can be localized easily to any language within the configuration. Weather condition icons are displayed from the internal flash space of the plate. For this, you need to upload the desired icon pack to the plate: light theme dark theme To unzip them on the plate, connect via Telnet and run the command unzip /openhasp-weathericons-day.zip to unzip the light theme above (alternatively you can unzip them on your computer and upload them one by one). The configuration example only shows how to use the light theme icons. This example implements Home Assistant's standard weather conditions only (as in 2021.06), so any weather integration component can be used. Some integrations know extra conditions in addition to the standard ones, those (with their corresponding icons) can be easily added to the component configuration below. Note that the tab swiping dots ( p5b10 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"WEATHER\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 2 , \"auto_size\" : 1 , \"w\" : 128 , \"offset_x\" : -6 , \"offset_y\" : -10 } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"label\" , \"x\" : 100 , \"y\" : 10 , \"w\" : 130 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"date current\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 34 , \"w\" : 95 , \"h\" : 40 , \"align\" : \"center\" , \"text\" : \"00.0\u00b0C\" , \"parentid\" : 2 , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 17 , \"obj\" : \"label\" , \"x\" : 110 , \"y\" : 78 , \"w\" : 120 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"condition\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 19 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 95 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#000000 \\u2022# #909090 \\u2022#\" , \"parentid\" : 2 , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" } { \"page\" : 5 , \"id\" : 10 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 260 , \"parentid\" : 2 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 123 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+2\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 123 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 154 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+3\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 154 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 33 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 186 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+4\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 186 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 43 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 218 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+5\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 218 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 53 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 123 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+1\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 64 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 154 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+2\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 74 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 81 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 186 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+3\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 82 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 83 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 84 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 91 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 218 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+4\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 92 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 93 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 94 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 - obj : \"p5b14\" # Icon properties : \"src\" : \"{{ 'L:/w-128-' + states('weather.openweathermap') + '.png' if not is_state('weather.openweathermap','unavailable') }}\" - obj : \"p5b15\" # Current date (adjust format to your needs) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set day = (states.weather.openweathermap.last_changed).strftime('%w') %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{- days[ day | int -1 ] }} {{ (states.weather.openweathermap.last_changed).strftime('%m. %d. ') }} {% endif -%} - obj : \"p5b16\" # Current temp (you can use your own outdoor temp sensor if you have one) properties : \"text\" : \"{{ state_attr('weather.openweathermap','temperature') |string + '\u00b0C' if not is_state('weather.openweathermap','unavailable') }}\" # or \"{{ states('sensor.your_own_temp_sensor') if not is_state('sensor.your_own_temp_sensor','unavailable') else '--' }}\u00b0C\" - obj : \"p5b17\" # Current weather condition properties : \"text\" : > {% if is_state('weather.openweathermap','clear-night') -%} Clear night {% elif is_state('weather.openweathermap','cloudy') -%} Cloudy {% elif is_state('weather.openweathermap','fog') -%} Fog {% elif is_state('weather.openweathermap','hail') -%} Hail {% elif is_state('weather.openweathermap','lightning') -%} Lightning {% elif is_state('weather.openweathermap','lightning-rainy') -%} Thunderstorms {% elif is_state('weather.openweathermap','partlycloudy') -%} Partly cloudy {% elif is_state('weather.openweathermap','pouring') -%} Pouring rain {% elif is_state('weather.openweathermap','rainy') -%} Rainy {% elif is_state('weather.openweathermap','snowy') -%} Snowy {% elif is_state('weather.openweathermap','snowy-rainy') -%} Snowy-rainy {% elif is_state('weather.openweathermap','sunny') -%} Sunny {% elif is_state('weather.openweathermap','windy') -%} Windy {% elif is_state('weather.openweathermap','windy-variant') -%} Windy {% elif is_state('weather.openweathermap','exceptional') -%} Exceptional {% elif is_state('weather.openweathermap','unavailable') -%} (not available) {% else -%} {{ states('weather.openweathermap') }} {% endif -%} - obj : \"p5b10\" # tab dots - MAKE SURE YOU UPDATE THIS ONE!! event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p5b19.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p5b21\" # Forecast time +1h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b22\" # Forecast temp +1h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[1]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b23\" # Forecast condition +1h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b31\" # Forecast time +2h (using Dawn/Morn etc instead of Today/Tomorrow) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set hour = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) | timestamp_custom(\"%-H\") | int %} {%- if 4 <= hour < 6 %} Dawning {%- elif 6 <= hour < 9 %} Morning {%- elif 9 <= hour < 12 %} Forenoon {%- elif 12 <= hour < 18 %} Afternoon {%- elif 18 <= hour < 23 %} Evening {%- elif 23 <= hour or hour < 4 %} Night {%- endif %} {{- \" \" + hour |string + \" o'clock\" }} {%- endif %} - obj : \"p5b32\" # Forecast temp +2h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[3]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b33\" # Forecast condition +2h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[3]['condition'] }}.png {%- endif %} - obj : \"p5b41\" # Forecast time +4h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[6]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b42\" # Forecast temp +4h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[6]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b43\" # Forecast condition +4h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[6]['condition'] }}.png {%- endif %} - obj : \"p5b51\" # Forecast time +8h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[12]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b52\" # Forecast temp +8h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[12]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b53\" # Forecast condition +8h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[12]['condition'] }}.png {%- endif %} - obj : \"p5b61\" # Forecast date +1d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[0]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b62\" # Forecast temp min +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b63\" # Forecast temp max +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b64\" # Forecast condition +1d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[0]['condition'] }}.png {%- endif %} - obj : \"p5b71\" # Forecast date +2d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b72\" # Forecast temp min +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b73\" # Forecast temp max +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b74\" # Forecast condition +2d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b81\" # Forecast date +3d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[2]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b82\" # Forecast temp min +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b83\" # Forecast temp max +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b84\" # Forecast condition +3d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[2]['condition'] }}.png {%- endif %} - obj : \"p5b91\" # Forecast date +4d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b92\" # Forecast temp min +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b93\" # Forecast temp max +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b94\" # Forecast condition +4d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[3]['condition'] }}.png {%- endif %} Attribution Icons are copyright from manifestinteractive and merlinthered . Fan and scent diffuser ~ This example shows how a transparent PNG image can be combined with a moving spinner object, to create the impression of a spinning fan. In Home Assistant this fan appears as a select component with the available presets as Low , Mid , High , Turbo , OFF selectable options. The scent diffuser appears as a standard fan component where the intensity can be set by percentage. To control the fan we use a button matrix object which has exactly the same buttons as the options of the select component. To control the scent diffuser we use a slider object. The fan and the perfume PNG icons are available below. Upload them to the flash storage of your plate. fan perfume Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will likely crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 4 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"AIR TREATMENT\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Fresh air flow\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Scent intensity\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 12 , \"obj\" : \"spinner\" , \"x\" : 36 , \"y\" : 84 , \"w\" : 56 , \"h\" : 56 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 19 , \"line_color10\" : \"#34eb77\" , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 3000 } { \"page\" : 4 , \"id\" : 13 , \"obj\" : \"img\" , \"x\" : 14 , \"y\" : 75 , \"src\" : \"L:/g64.png\" , \"auto_size\" : 1 , \"w\" : 100 , \"h\" : 74 } { \"page\" : 4 , \"id\" : 14 , \"obj\" : \"img\" , \"x\" : 130 , \"y\" : 78 , \"src\" : \"L:/perfume3.png\" , \"auto_size\" : 1 , \"w\" : 60 , \"h\" : 68 } { \"page\" : 4 , \"id\" : 40 , \"obj\" : \"btnmatrix\" , \"x\" : 5 , \"y\" : 130 , \"w\" : 110 , \"h\" : 113 , \"parentid\" : 10 , \"options\" :[ \"Low\" , \"Mid\" , \"\\n\" , \"High\" , \"Turbo\" , \"\\n\" , \"OFF\" ], \"toggle\" : 1 , \"one_check\" : 1 , \"bg_opa\" : 0 , \"pad_inner\" : 5 , \"border_width\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 4 , \"id\" : 51 , \"obj\" : \"slider\" , \"x\" : 200 , \"y\" : 60 , \"w\" : 25 , \"h\" : 220 , \"min\" : 0 , \"max\" : 60 , \"val\" : 15 } { \"page\" : 4 , \"id\" : 52 , \"obj\" : \"obj\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 4 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"text\" : \"15\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 4 , \"id\" : 54 , \"obj\" : \"btn\" , \"x\" : 130 , \"y\" : 168 , \"w\" : 50 , \"h\" : 76 , \"parentid\" : 10 , \"toggle\" : true , \"text\" : \"\\uE425\" , \"text_font\" : 32 , \"align\" : 1 , \"bg_color\" : \"#A0A0A0\" , \"bg_grad_color\" : \"#606060\" , \"border_color\" : \"#404040\" } relevant openHASP-custom-component config: - obj : \"p4b40\" # Buttin Matrix with the fan presets properties : \"click\" : \"{{ 0 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 1 }}\" \"opacity\" : \"{{ 100 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 255 }}\" \"options\" : '[\"Low\",\"Mid\",\"\\n\",\"High\",\"Turbo\",\"\\n\",\"OFF\"]' \"toggle\" : '{{ 1 if (not states(\"input_select.fan_presets\") in state_attr(\"input_select.fan_presets\",\"options\")) or (is_state(\"input_select.fan_presets\",\"unavailable\")) -}}' \"val\" : > {% if state_attr(\"input_select.fan_presets\",\"options\") is not none -%} {% if not states('input_select.fan_presets') in state_attr('input_select.fan_presets','options') -%}-1{% else -%} {% for source in state_attr('input_select.fan_presets','options') -%} {{loop.index - 1 if source == states('input_select.fan_presets') }} {%-endfor%} {%- endif %} {%- endif %} event : - service : input_select.input_select_option data : option : '{{ text }}' target : entity_id : input_select.fan_presets - obj : \"p4b12\" # Spinner behind the PNG icon properties : \"opacity\" : \"{{ 0 if states('input_select.fan_presets') in ['unavailable', 'unknown', 'OFF'] else 255 }}\" \"jsonl\" : > {% if is_state('number.plate_test_page_number', '4') %} {% if is_state('input_select.fan_presets', 'Alap') %} {\"speed\":7000,\"line_color10\":\"#31de70\"} {%-elif is_state('input_select.fan_presets', 'K\u00f6z\u00e9p') %} {\"speed\":1700,\"line_color10\":\"#dede1f\"} {%-elif is_state('input_select.fan_presets', 'Magas') %} {\"speed\":800,\"line_color10\":\"#d6a11a\"} {%-elif is_state('input_select.fan_presets', 'Turb\u00f3') %} {\"speed\":250,\"line_color10\":\"#ff4a4a\"} {% endif %} {% else -%} {\"speed\":0} {% endif %} - obj : \"p4b54\" # Scent Diffuser ON/OFF button properties : \"val\" : '{{ 1 if is_state(\"fan.scent_diffuser_intensity\", \"on\") else 0 }}' \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"down\" : - service : fan.toggle target : entity_id : fan.scent_diffuser_intensity - obj : \"p4b51\" # Scent Diffuser intensity slider properties : \"val\" : \"{{ state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"up\" : - service : fan.set_percentage target : entity_id : fan.scent_diffuser_intensity data : percentage : '{{ val }}' - obj : \"p4b53\" # Scent Diffuser intensity number label properties : \"text\" : \"{{ '--' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"opacity\" : \"{{ 255 if is_state('fan.scent_diffuser_intensity', 'on') else 95 }}\" Note the condition in the Spinner configuration of the component: {% if is_state('openhasp.plate_test', '4') %} - this is useful to only animate the spinner when the page containing it is actually shown. Since the spinner is being overlapped by a transparent PNG image, CPU usage is higher as it has to be completely redrawn every frame. CPU resources can be freed up this way - only animate when it can be seen. Attribution Icons are copyright from SVG Repo . Using tags ~ You can avoid too much code repetition when you have multiple similar objects on a page, doing the same thing with different entities, and you'd like to make accessible some advanced options too. Presenting everyting flat will overwhelm your user interface, so it would be better to just show the most used controls, and only display the advanced options in popups related to unique objects. Tag property was made to ease this task. Colored lights panel ~ In the example below we have four coloured lights. Squeezing the ON/OFF button, the color picker and the brightness selector for all four lights on a single page can be challenging - and the result will likely be useless on a small touch screen. Instead, we'll just place the toggle buttons with descriptive labels on the page, and we'll only display the color picker and the brightness selector on demand, in this case when the user touches the descriptive coloured label. While dynamically drawing these objects we're setting the tag property for the color picker and the slider to the entity_id of the light we want to adjust, so that when we're interacting with them, the Custom Component can know which light it has to send the adjustments to. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"COLOURED LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"I.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"II.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"III.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"IV.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p5b11\" # toggle button for ON/OFF switching of light I. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_1\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_1\" - obj : \"p5b12\" # toggle button for ON/OFF switching of light II. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_2\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_2\" - obj : \"p5b13\" # toggle button for ON/OFF switching of light III. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_3\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_3\" - obj : \"p5b14\" # toggle button for ON/OFF switching of light IV. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_4\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_4\" - obj : \"p5b2\" # label showing the current color of light I. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_1','on') %} {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_1 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light I. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light I.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_1\",\"color\": {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_1\",\"val\": {{- state_attr('light.dmx_vbar_1', 'brightness') -}} } - obj : \"p5b3\" # label showing the current color of light II. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_2','on') %} {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_2 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light II. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light II.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_2\",\"color\": {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_2\",\"val\": {{- state_attr('light.dmx_vbar_2', 'brightness') -}} } - obj : \"p5b4\" # label showing the current color of light III. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_3','on') %} {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_3 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light III. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light III.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_3\",\"color\": {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_3\",\"val\": {{- state_attr('light.dmx_vbar_3', 'brightness') -}} } - obj : \"p5b5\" # label showing the current color of light IV. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_4','on') %} {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_4 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light IV. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light IV.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_4\",\"color\": {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_4\",\"val\": {{- state_attr('light.dmx_vbar_4', 'brightness') -}} } - obj : \"p5b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b201\" # set the color of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b202\" # set the brightness of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" brightness : \"{{ val }}\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete Without tags, the last 3 object definitions would have to be added for each light, and also it would be needed to be drawn separately for each light, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design. Shutter control panel ~ In the second example, we have five windows with motorized shutters. In addition to the usual UP/STOP/DOWN buttons, the inhabitants want to have three shortcut positions for each shutter, and also a slider for free positioning. Useless to say that it's impossible to put all these on a page, and also it would be a pity to use up 5 pages just for these. We'll just put the most used, UP/STOP/DOWN buttons on the page (this already looks a bit much...) and we'll use a long press event on the middle STOP button to show a pop-up with the extra required settings related to the desired shutter. The tag here will be a JSON object referencing both the entity_id and the position specific to the desired shutter, eg. \"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"} , this will be set for the buttons and the slider appearing in the popup. Since the shutters are different sizes and types, the same intermediate physical position may correspond to different numeric values in Home Assistant. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"MOTORIZED COVERS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 2 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 7 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"I.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 53 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"II.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 99 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"III.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"IV.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 191 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"V.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 31 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 32 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 33 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 41 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 42 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 43 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 51 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 52 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 53 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p2b11\" # shutter I. up button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b13\" # shutter I. down button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b12\" # shutter I. middle stop button properties : \"text\" : > {% if is_state('cover.bigroom_i', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_i', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_i\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - I.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"54\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_i','current_position') -}} } - obj : \"p2b21\" # shutter II. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b23\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b22\" properties : \"text\" : > {% if is_state('cover.bigroom_ii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_ii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_ii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - II.\",\"align\":\"center\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"18\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_ii','current_position') -}} } - obj : \"p2b31\" # shutter III. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b33\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b32\" properties : \"text\" : > {% if is_state('cover.bigroom_iii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - III.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iii','current_position') -}} } - obj : \"p2b41\" # shutter IV. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b43\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b42\" properties : \"text\" : > {% if is_state('cover.bigroom_iv', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iv', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iv\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - IV.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iv','current_position') -}} } - obj : \"p2b51\" # shutter V. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b53\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b52\" properties : \"text\" : > {% if is_state('cover.bigroom_v', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_v', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_v\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - V.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"55\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"19\"},\"val\": {{- state_attr('cover.bigroom_v','current_position') -}} } - obj : \"p2b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b201\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b202\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b203\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b204\" # set the shutter position from the slider for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"up\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ val | int }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete Again - without tags, the last 5 object definitions would have to be added for each shutter, and also it would be needed to be drawn separately for each one, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design. Note Some examples below may generate errors during Home Assistant startup. Log messages like Error while processing template or Template variable error: 'None' has no attribute 'last_changed' etc. can be caused by the fact that openHASP component loads faster than the other integrations you have set up, from where you want to pull data. Because the data required by openHASP component is not yet available, an error is generated. But as soon as Home Assistant finishes loading everything, and all the data you've configured is available, things will be normal. Nevertheless the log should be checked regularly to find repetitive problems.","title":"Example Configurations"},{"location":"integrations/home-assistant/sampl_conf/#display-clock-and-temperature","text":"The easiest example is to display the state of a clock and a temperature sensor from Home Assistant, using label objects in openHASP. Create a label object to display the temperature value, a separate label object to display the unit and a third label object for the clock: 1 2 3 { \"page\" : 0 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 175 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"00.0\" , \"align\" : 2 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 220 , \"y\" : 5 , \"h\" : 30 , \"w\" : 45 , \"text\" : \"\u00b0C\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } { \"page\" : 0 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 3 , \"y\" : 5 , \"h\" : 30 , \"w\" : 62 , \"text\" : \"00:00\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } In component configuration all you need for the objects is: 1 2 3 4 5 6 7 objects : - obj : \"p0b4\" properties : \"text\" : \"{{ states('sensor.my_room_temperature') }}\" - obj : \"p0b6\" properties : \"text\" : \"{{ states('sensor.time') }}\"","title":"Display clock and temperature"},{"location":"integrations/home-assistant/sampl_conf/#some-basic-controls","text":"Jsonl and Home Assistant configuration:","title":"Some basic controls"},{"location":"integrations/home-assistant/sampl_conf/#color-coded-icons","text":"","title":"Color coded icons"},{"location":"integrations/home-assistant/sampl_conf/#variable-sized-icons","text":"Have a fan icon which changes its size depending on the speed of the fan, and goes off the screen when the fan is off. openHASP config: 1 { \"page\" : 0 , \"id\" : 1 , \"obj\" : \"label\" , \"x\" : 1 , \"y\" : 1 , \"h\" : 35 , \"w\" : 35 , \"text\" : \"\\uE210\" , \"align\" : \"left\" , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"yellow\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 - obj : \"p0b1\" properties : \"jsonl\" : > {% if is_state('input_select.fan_speed', 'Low') %} {\"text_font\":12,\"x\":6,\"y\":7} {%-elif is_state('input_select.fan_speed', 'Medium') %} {\"text_font\":16,\"x\":5,\"y\":6} {%-elif is_state('input_select.fan_speed', 'Hign') %} {\"text_font\":24,\"x\":1,\"y\":2} {%-elif is_state('input_select.fan_speed', 'Turbo') %} {\"text_font\":32,\"x\":-2,\"y\":-3} {%-elif is_state('input_select.fan_speed', 'OFF') %} {\"text_font\":12,\"x\":-10,\"y\":-10} {% endif %}","title":"Variable sized icons"},{"location":"integrations/home-assistant/sampl_conf/#light-brightness-and-color","text":"Have a light in Home Assistant controlled by openHASP. In our example we use Lanbon L8's moodlight which has both brightness and color - we use a slider object for the brightness, and a cpicker object for color. relevant openHASP config: 1 2 { \"page\" : 1 , \"id\" : 31 , \"obj\" : \"slider\" , \"x\" : 6 , \"y\" : 15 , \"w\" : 14 , \"h\" : 180 , \"min\" : 1 , \"max\" : 255 } { \"page\" : 1 , \"id\" : 32 , \"obj\" : \"cpicker\" , \"x\" : 30 , \"y\" : 10 , \"w\" : 180 , \"h\" : 180 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 - obj : \"p1b31\" # Light brightness properties : \"val\" : \"{{ state_attr('light.plate_moodlight', 'brightness') if state_attr('light.plate_moodlight', 'brightness') != None else 0 }}\" event : \"changed\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight brightness : \"{{ val }}\" - obj : \"p1b32\" # Light color properties : \"color\" : > {% if is_state('light.plate_moodlight','on') %} {% set rgb = state_attr('light.plate_moodlight','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"up\" : - service : light.turn_on data : entity_id : light.plate_moodlight rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" The brightness slider value gets updated from the brightness attribute of light.plate_moodlight , while it's on. If it's off, that attribute is removed by Home Assistant, in that case we set it to 0 . The color property gets updated from the rgb_color attriburte of the light. The R, G and B decimal color values are converted to hexadecimal html color code using a template whenever the color of the light changes in Home Assistant. When somebody changes the color of the picker object on the page, the light in Home Assistant gets updated with rgb_color values received in the MQTT message from the plate.","title":"Light brightness and color"},{"location":"integrations/home-assistant/sampl_conf/#cover-with-state-feedback","text":"The icon on the up and down buttons change color when covers move and set opacity when reached to limit. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 { \"page\" : 1 , \"id\" : 4 , \"obj\" : \"btn\" , \"x\" : 5 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 5 , \"obj\" : \"btn\" , \"x\" : 83 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 1 , \"id\" : 6 , \"obj\" : \"btn\" , \"x\" : 161 , \"y\" : 140 , \"w\" : 73 , \"h\" : 60 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 - obj : \"p1b4\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b5\" properties : \"text\" : > {% if is_state('cover.cover_1', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.cover_1', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.cover_1', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.cover_1\" - obj : \"p1b6\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.cover_1', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.cover_1','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.cover_1\"","title":"Cover with state feedback"},{"location":"integrations/home-assistant/sampl_conf/#cover-with-button-matrix","text":"A simpler cover control with only basic feedback. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 { \"page\" : 4 , \"id\" : 20 , \"obj\" : \"btnmatrix\" , \"x\" : 0 , \"y\" : 20 , \"w\" : 240 , \"h\" : 70 , \"options\" :[ \"\\uE05D\" , \"\\uE4DB\" , \"\\uE045\" ], \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 - obj : \"p4b20\" properties : \"options\" : > {% if is_state('cover.cover_1', 'closing') %} [\"\\uE05D\",\"\\uE4DB\",\"#FFFF00 \\uE045\"] {%-elif is_state('cover.cover_1', 'opening') %} [\"#FFFF00 \\uE05D\",\"\\uE4DB\",\"\\uE045\"] {%-else %} [\"\\uE05D\",\"\\uE4DB\",\"\\uE045\"] {% endif %} event : \"down\" : - service : > {% if val == 0 %} cover.open_cover {%-elif val == 1 %} cover.stop_cover {%-elif val == 2 %} cover.close_cover {% endif %} target : entity_id : cover.cover_1","title":"Cover with button matrix"},{"location":"integrations/home-assistant/sampl_conf/#covers-like-in-lovelace","text":"The icon behaves like in Lovelace. UI theme set to Hasp Light in plate's web interface. Your browser does not support the video tag. Check out the Lovelace-like entities for similar placement. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 33 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 43 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 1\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 37 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 69 , \"w\" : 35 , \"h\" : 35 , \"text\" : \"\\uF11D\" , \"align\" : 1 , \"text_font\" : 32 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 48 , \"y\" : 79 , \"w\" : 80 , \"h\" : 30 , \"text\" : \"Cover 2\" , \"align\" : 0 , \"text_font\" : 16 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 25 , \"obj\" : \"btn\" , \"x\" : 165 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } { \"page\" : 5 , \"id\" : 26 , \"obj\" : \"btn\" , \"x\" : 205 , \"y\" : 73 , \"w\" : 30 , \"h\" : 30 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 , \"bg_opa\" : 0 , \"border_opa\" : 0 , \"text_color\" : \"#053248\" } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 - obj : \"p5b12\" properties : \"text\" : > {% if is_state('cover.my_cover', 'closing') %} {{ \"\\uE6C0\" | e }} {%-elif is_state('cover.my_cover', 'opening') %} {{ \"\\uE6C3\" | e }} {%-elif is_state('cover.my_cover', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.my_cover', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} - obj : \"p5b14\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b15\" event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.my_cover\" - obj : \"p5b16\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.my_cover\"","title":"Covers like in Lovelace"},{"location":"integrations/home-assistant/sampl_conf/#media-player","text":"The labels with artist and title are scrolling, the progressbar fills if the media player provides duration and playback position. The dropdown lists containing the available sources and sound modes of the player get populated automatically by the values existing on the player in Home Assistant, and also the actually selected source is in sync with it. Player availability is shown by the opacity of the buttons. Player state (play/pause) is shown by the middle button, short pressing means pause, long-press means stop. Power state shown by color, repeat, shuffle and muted state shown by appropriate icons on the buttons. UI theme set to Hasp Light in plate's web interface. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { \"page\" : 6 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 , \"bg_opa\" : 0 , \"shadow_opa\" : 140 , \"shadow_color\" : \"black\" , \"shadow_width\" : 20 , \"shadow_spread\" : 0 } { \"page\" : 6 , \"id\" : 11 , \"obj\" : \"obj\" , \"x\" : 8 , \"y\" : 38 , \"w\" : 200 , \"h\" : 84 , \"click\" : 0 } { \"page\" : 6 , \"id\" : 12 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 48 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 13 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 83 , \"w\" : 196 , \"h\" : 30 , \"text\" : \"-\" , \"mode\" : \"scroll\" , \"align\" : 1 } { \"page\" : 6 , \"id\" : 14 , \"obj\" : \"bar\" , \"x\" : 8 , \"y\" : 117 , \"w\" : 200 , \"h\" : 5 , \"min\" : 0 , \"max\" : 100 , \"border_opa\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 6 , \"id\" : 15 , \"obj\" : \"dropdown\" , \"x\" : 8 , \"y\" : 129 , \"w\" : 120 , \"h\" : 30 , \"options\" : \"Source1\\nSource2\\nSource3\" , \"direction\" : 3 , \"max_height\" : 300 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 16 , \"obj\" : \"dropdown\" , \"x\" : 133 , \"y\" : 129 , \"w\" : 75 , \"h\" : 30 , \"options\" : \"Jazz\\nPop\\nRock\" , \"direction\" : 2 , \"radius\" : 5 } { \"page\" : 6 , \"id\" : 17 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 166 , \"w\" : 50 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AE\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 18 , \"obj\" : \"btn\" , \"x\" : 66 , \"y\" : 166 , \"w\" : 83 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE40A\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 19 , \"obj\" : \"btn\" , \"x\" : 157 , \"y\" : 166 , \"w\" : 51 , \"h\" : 70 , \"toggle\" : false , \"text\" : \"\\uE4AD\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 20 , \"obj\" : \"slider\" , \"x\" : 212 , \"y\" : 38 , \"w\" : 20 , \"h\" : 244 , \"min\" : 0 , \"max\" : 100 , \"val\" : 85 } { \"page\" : 6 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 8 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE425\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 60 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE457\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 111 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE49E\" , \"text_font\" : 32 } { \"page\" : 6 , \"id\" : 24 , \"obj\" : \"btn\" , \"x\" : 163 , \"y\" : 241 , \"w\" : 45 , \"h\" : 40 , \"toggle\" : false , \"text\" : \"\\uE57E\" , \"text_font\" : 32 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 - obj : \"p6b12\" # artist label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_artist') if state_attr('media_player.sound_my_room1','media_artist') else '-' }}\" - obj : \"p6b13\" # title label properties : \"text\" : \"{{ state_attr('media_player.sound_my_room1','media_title') if state_attr('media_player.sound_my_room1','media_title') else '-' }}\" - obj : \"p6b15\" # sources list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','source_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{\"(no source)\\n\"|e}} {%- for source in state_attr('media_player.sound_my_room1','source_list') -%} {{source+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %} {% if state_attr('media_player.sound_my_room1','source') == None %}0{% else %} {%for source in state_attr('media_player.sound_my_room1','source_list')%} {{loop.index if source == state_attr('media_player.sound_my_room1','source') }} {%-endfor%}{%-endif %}{%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_source data : entity_id : media_player.sound_my_room1 source : \"{{ text }}\" - obj : \"p6b16\" # sound modes list properties : \"options\" : > {% if (state_attr('media_player.sound_my_room1','sound_mode_list') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {%-for soundmode in state_attr('media_player.sound_my_room1','sound_mode_list')-%} {{soundmode+\"\\n\"|e}}{%-if not loop.last%}{%-endif%}{%-endfor%}{%-endif %} \"val\" : > {% if states('media_player.sound_my_room1') not in ['unavailable', 'unknown'] %}{%for source in state_attr('media_player.sound_my_room1','sound_mode_list')%} {{loop.index -1 if source == state_attr('media_player.sound_my_room1','sound_mode') }} {%-endfor%}{% endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.select_sound_mode data : entity_id : media_player.sound_my_room1 sound_mode : \"{{ text }}\" - obj : \"p6b14\" # progressbar properties : \"max\" : \"{{ state_attr('media_player.sound_my_room1','media_duration') | int }}\" \"val\" : \"{{ state_attr('media_player.sound_my_room1','media_position') | int }}\" - obj : \"p6b18\" # play/pause/stop properties : \"text\" : > {% if is_state('media_player.sound_my_room1', 'playing') %} {{ \"\\uE3E4\" | e }} {%-else %} {{ \"\\uE40A\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_play_pause target : entity_id : media_player.sound_my_room1 \"long\" : - service : media_player.media_stop target : entity_id : media_player.sound_my_room1 - obj : \"p6b17\" # prev properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_previous_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b19\" # next properties : \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.media_next_track target : entity_id : media_player.sound_my_room1 - obj : \"p6b20\" # volume slider properties : \"val\" : > {% if (state_attr('media_player.sound_my_room1','volume_level') != none and states('media_player.sound_my_room1') not in ['unavailable', 'unknown']) %} {{ state_attr('media_player.sound_my_room1','volume_level') * 100 | int(default=80) }} {%-endif %} \"click\" : \"{{ 'false' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else 'true' }}\" event : \"changed\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" \"up\" : - service : media_player.volume_set data : entity_id : media_player.sound_my_room1 volume_level : \"{{ val | int / 100 }}\" - obj : \"p6b21\" # power properties : \"text_color\" : \"{{ '#B00000' if states('media_player.sound_my_room1') == 'off' else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.toggle data : entity_id : media_player.sound_my_room1 - obj : \"p6b22\" # repeat properties : \"text\" : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} {{ \"\\uE458\" | e }} {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} {{ \"\\uE456\" | e }} {%-else %} {{ \"\\uE457\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.repeat_set data : entity_id : media_player.sound_my_room1 repeat : > {% if is_state_attr('media_player.sound_my_room1', 'repeat', 'one') %} all {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'all') %} off {% elif is_state_attr('media_player.sound_my_room1', 'repeat', 'off') %} one {%-endif %} - obj : \"p6b23\" # shuffle properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} {{ \"\\uE49D\" | e }} {%-else %} {{ \"\\uE49E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.shuffle_set data : entity_id : media_player.sound_my_room1 shuffle : > {% if state_attr('media_player.sound_my_room1', 'shuffle') %} false {% else %} true {%-endif %} - obj : \"p6b24\" # mute properties : \"text\" : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} {{ \"\\uE75F\" | e }} {%-else %} {{ \"\\uE57E\" | e }} {%-endif %} \"text_opa\" : \"{{ '80' if states('media_player.sound_my_room1') in ['unavailable', 'unknown'] else '255' }}\" event : \"down\" : - service : media_player.volume_mute data : entity_id : media_player.sound_my_room1 is_volume_muted : > {% if state_attr('media_player.sound_my_room1', 'is_volume_muted') %} false {% else %} true {%-endif %} Note that the val value of the slider is multiplied and divided by 100 when read and set, because LVGL only suppports integers for object values. By multiplying and dividing by 100, it becomes possible to set volume between 0 and 1 as required by Home Assistant.","title":"Media player"},{"location":"integrations/home-assistant/sampl_conf/#generic-thermostatclimate","text":"This example is a bit more complex in the aspect that it uses several objects put on top of each other, and grouped toghether using the parentid parameter. Special attention goes to an invisible tabview (exteding over the label dispaying the target temperarture) which allows for swiping between an on/off switch and dropdowns for setting the hvac and fan modes. The target temperature can be set by dragging the arc handle, more precise +/- setting possible by short/long pressing the middle circle containing the current temperature (increasing/decreasing the value by the temperature step defined by the climate entity). Note that the min , max and val values of the arc and gauge are multiplied and divided by 10 when set and read, because LVGL only suppports integers for object values. By multiplying and dividing by 10, it becomes possible to set decimal values for climate temperature. The number of the ticks on the gauge is determined from the min , max attributes of the configured climate, likewise the hvac_modes and fan_modes dropdowns. You can localise these using the if-else statements of the template in the configuration of the custom component. The active area of the arc changes color based on the current hvac mode of the entity. UI theme set to Hasp Light in plate's web interface. Note that the tab swiping dots ( p3b26 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Your browser does not support the video tag. relevant openHASP config: (screen size 240x320) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 3 , \"id\" : 20 , \"obj\" : \"arc\" , \"x\" : 5 , \"y\" : 37 , \"w\" : 230 , \"h\" : 230 , \"min\" : 170 , \"max\" : 300 , \"val\" : 250 , \"border_side\" : 0 , \"type\" : 0 , \"rotation\" : 0 , \"start_angle\" : 135 , \"end_angle\" : 45 , \"adjustable\" : \"true\" , \"line_width\" : 21 , \"line_width10\" : 21 , \"line_color10\" : \"#34bdeb\" , \"bg_opa\" : 0 , \"pad_top20\" : 5 , \"pad_bottom20\" : 5 , \"pad_left20\" : 5 , \"pad_right20\" : 5 , \"pad_top\" : 5 , \"pad_bottom\" : 5 , \"pad_left\" : 5 , \"pad_right\" : 5 } { \"page\" : 3 , \"id\" : 21 , \"obj\" : \"gauge\" , \"x\" : 28 , \"y\" : 28 , \"w\" : 175 , \"h\" : 175 , \"parentid\" : 20 , \"min\" : 170 , \"max\" : 300 , \"val\" : 224 , \"format\" : 1 , \"critical_value\" : 301 , \"label_count\" : 14 , \"line_count\" : 27 , \"border_width\" : 0 , \"pad_top\" : 2 , \"pad_bottom\" : 2 , \"pad_left\" : 2 , \"pad_right\" : 2 , \"value_str\" : \"\u00b0C\" , \"value_ofs_y\" : 55 , \"value_font\" : 16 , \"bg_opa\" : 0 , \"line_width10\" : 3 , \"line_rounded10\" : 1 , \"line_color\" : \"#348feb\" , \"line_color60\" : \"#348feb\" , \"scale_grad_color\" : \"#eb4934\" , \"scale_grad_color60\" : \"#eb4934\" , \"scale_end_color60\" : \"#eb4934\" } { \"page\" : 3 , \"id\" : 22 , \"obj\" : \"obj\" , \"x\" : 85 , \"y\" : 85 , \"w\" : 60 , \"h\" : 60 , \"parentid\" : 20 , \"click\" : 0 , \"radius\" : 30 , \"border_width\" : 2 , \"border_opa\" : 200 } { \"page\" : 3 , \"id\" : 23 , \"obj\" : \"label\" , \"x\" : 80 , \"y\" : 100 , \"w\" : 70 , \"h\" : 30 , \"parentid\" : 20 , \"text\" : \"22.4\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 24 , \"obj\" : \"obj\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 25 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 245 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"25\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 3 , \"id\" : 26 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 220 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" , \"border_width\" : 0 } { \"page\" : 3 , \"id\" : 30 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 235 , \"w\" : 240 , \"h\" : 80 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"radius\" : 0 } { \"page\" : 3 , \"id\" : 31 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 32 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 33 , \"obj\" : \"tab\" , \"parentid\" : 30 } { \"page\" : 3 , \"id\" : 41 , \"obj\" : \"switch\" , \"x\" : 35 , \"y\" : 10 , \"w\" : 60 , \"h\" : 30 , \"parentid\" : 31 , \"radius\" : 25 , \"radius20\" : 25 } { \"page\" : 3 , \"id\" : 42 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 32 , \"options\" : \"fan_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } { \"page\" : 3 , \"id\" : 43 , \"obj\" : \"dropdown\" , \"x\" : 15 , \"y\" : 10 , \"w\" : 110 , \"h\" : 30 , \"parentid\" : 33 , \"options\" : \"hvac_modes\" , \"direction\" : \"1\" , \"radius\" : 5 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 - obj : \"p3b20\" # arc slider properties : \"val\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') | int * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"line_color1\" : > {% if is_state('climate.thermostat_1', 'cool') %} {{ \"#346beb\" }} {%-elif is_state('climate.thermostat_1', 'heat_cool') %} {{ \"#34bdeb\" }} {%-elif is_state('climate.thermostat_1', 'heat') %} {{ \"#eb3434\" }} {%-elif is_state('climate.thermostat_1', 'dry') %} {{ \"#ebeb34\" }} {%-elif is_state('climate.thermostat_1', 'fan_only') %} {{ \"#34eb77\" }} {%-else %} {{ \"#9f96b0\" }} {% endif %} event : \"changed\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ val | int / 10 }}\" - obj : \"p3b21\" # gauge current temp properties : \"val\" : > {% if not (is_state('sensor.ble_atlaghomerseklet','unavailable') or is_state('sensor.ble_atlaghomerseklet','unknown')) %} {{ states('sensor.ble_atlaghomerseklet') | float (default=0) * 10 }} {%- endif %} \"min\" : > {% if state_attr('climate.thermostat_1','min_temp') is not none %} {{ state_attr('climate.thermostat_1','min_temp') | int * 10 }} {%- endif %} \"max\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 }} {%- endif %} \"critical_value\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int * 10 + 1 }} {%- endif %} \"label_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int + 1 }} {%- endif %} \"line_count\" : > {% if state_attr('climate.thermostat_1','max_temp') is not none %} {{ (state_attr('climate.thermostat_1','max_temp') | int - state_attr('climate.thermostat_1','min_temp') | int) * 2 + 1 }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b23\" # label current temp (and +/- with short/long touch) properties : \"text\" : > {% if (is_state('sensor.temp_room_1','unavailable') or is_state('sensor.temp_room_1','unknown')) %} {{ \"--.-\" }} {%-else %} {{ states('sensor.temp_room_1') | round(1,default=0) }} {%- endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"up\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') + state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" \"long\" : - service : climate.set_temperature target : entity_id : climate.thermostat_1 data : temperature : \"{{ state_attr('climate.thermostat_1','temperature') - state_attr('climate.thermostat_1','target_temp_step') | float(default=1)}}\" - obj : \"p3b25\" # label target temp properties : \"text\" : > {% if state_attr('climate.thermostat_1','temperature') is not none %} {{ state_attr('climate.thermostat_1','temperature') }} {%- endif %} \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" - obj : \"p3b41\" # on/off switch properties : \"val\" : \"{{ 0 if (is_state('climate.thermostat_1', 'off') or is_state('climate.thermostat_1', 'unavailable')) else 1 }}\" \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"opacity\" : \"{{ 60 if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 255 }}\" event : \"down\" : - service_template : > {% if val == 0 -%} climate.turn_on {% else -%} climate.turn_off {% endif -%} entity_id : \"climate.thermostat_1\" - obj : \"p3b30\" # tab dots event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p3b26.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 2 %} {{ \"#909090 \\u2022# #909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p3b42\" # dropdown with fan_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','fan_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {%- if mode == 'auto' -%} Automatic{{\"\\n\"|e}} {%- elif mode == 'low' -%} Low{{\"\\n\"|e}} {%- elif mode == 'medium' -%} Medium{{\"\\n\"|e}} {%- elif mode == 'high' -%} High{{\"\\n\"|e}} {%- elif mode == 'turbo' -%} Turbo{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','fan_modes')%} {{loop.index -1 if mode == state_attr('climate.thermostat_1','fan_mode') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_fan_mode target : entity_id : climate.thermostat_1 data : fan_mode : > {% if text == \"Automatic\" -%} auto {% elif text == 'Low' -%} low {% elif text == 'Medium' -%} medium {% elif text == 'High' -%} high {% elif text == 'Turbo' -%} turbo {% endif -%} - obj : \"p3b43\" # dropdown with hvac_modes properties : \"options\" : > {% if state_attr('climate.thermostat_1','hvac_modes') is not none %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {%- if mode == 'off' -%} Off{{\"\\n\"|e}} {%- elif mode == 'heat' -%} Heating{{\"\\n\"|e}} {%- elif mode == 'cool' -%} Cooling{{\"\\n\"|e}} {%- elif mode == 'heat_cool' -%} Heat/Cool{{\"\\n\"|e}} {%- elif mode == 'dry' -%} Drying{{\"\\n\"|e}} {%- elif mode == 'fan_only' -%} Fan only{{\"\\n\"|e}} {%- else -%} On{{\"\\n\"|e}} {%- endif -%} {%-if not loop.last%}{%-endif%}{%-endfor%}{% endif %} \"click\" : \"{{ 'false' if (is_state('climate.thermostat_1','unavailable') or is_state('climate.thermostat_1','unknown')) else 'true' }}\" \"val\" : > {% if not (is_state('climate.thermostat_1','unavailable')) %}{%for mode in state_attr('climate.thermostat_1','hvac_modes')%} {{loop.index -1 if mode == states('climate.thermostat_1') }} {%-endfor%}{% endif %} event : \"changed\" : - service : climate.set_hvac_mode target : entity_id : climate.thermostat_1 data : hvac_mode : > {% if text == \"Off\" -%} off {% elif text == 'Heating' -%} heat {% elif text == 'Cooling' -%} cool {% elif text == 'Heat/Cool' -%} heat_cool {% elif text == 'Drying' -%} dry {% elif text == 'Fan only' -%} fan_only {% endif -%}","title":"Generic thermostat/climate"},{"location":"integrations/home-assistant/sampl_conf/#current-weather-and-forecasts","text":"This example implements two weather forecast screens which located on the same page, can be swiped left and right. On the top area the current weather is shown, on the bottom area the user can choose by swiping between next hours and next days forecast. This is achieved by a tabview object with invisible tabs. Since there's no weather integration in Home Assistant which can offer so much information at once, this can be achieved by installing multiple weather components. In our example we use two: Met.no (the one coming by default pre-installed) for next days forecast. OpenWeatherMap {target= blank} (available as standard integration to be activated) for next hours forecast. _You need to set the forecast mode to onecall_hourly to get forecasts for the day's next hours. The openHASP component grabs information from both weather sources and updates them on every change. The various strings containing day names, day periods, weather conditions can be localized easily to any language within the configuration. Weather condition icons are displayed from the internal flash space of the plate. For this, you need to upload the desired icon pack to the plate: light theme dark theme To unzip them on the plate, connect via Telnet and run the command unzip /openhasp-weathericons-day.zip to unzip the light theme above (alternatively you can unzip them on your computer and upload them one by one). The configuration example only shows how to use the light theme icons. This example implements Home Assistant's standard weather conditions only (as in 2021.06), so any weather integration component can be used. Some integrations know extra conditions in addition to the standard ones, those (with their corresponding icons) can be easily added to the component configuration below. Note that the tab swiping dots ( p5b10 ) are also handled by the custom component. Don't forget update the service call in the configuration with your plate's MQTT node name, and the command parameters if you change the page of the objects. Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"WEATHER\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"img\" , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 2 , \"auto_size\" : 1 , \"w\" : 128 , \"offset_x\" : -6 , \"offset_y\" : -10 } { \"page\" : 5 , \"id\" : 15 , \"obj\" : \"label\" , \"x\" : 100 , \"y\" : 10 , \"w\" : 130 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"date current\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 16 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 34 , \"w\" : 95 , \"h\" : 40 , \"align\" : \"center\" , \"text\" : \"00.0\u00b0C\" , \"parentid\" : 2 , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 17 , \"obj\" : \"label\" , \"x\" : 110 , \"y\" : 78 , \"w\" : 120 , \"h\" : 25 , \"align\" : \"center\" , \"text\" : \"condition\" , \"parentid\" : 2 } { \"page\" : 5 , \"id\" : 19 , \"obj\" : \"label\" , \"x\" : 90 , \"y\" : 95 , \"w\" : 60 , \"h\" : 30 , \"text\" : \"#000000 \\u2022# #909090 \\u2022#\" , \"parentid\" : 2 , \"text_font\" : 24 , \"align\" : \"center\" , \"text_color\" : \"grey\" } { \"page\" : 5 , \"id\" : 10 , \"obj\" : \"tabview\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 260 , \"parentid\" : 2 , \"btn_pos\" : 0 , \"bg_opa\" : 0 , \"border_width\" : 0 } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"tab\" , \"parentid\" : 10 } { \"page\" : 5 , \"id\" : 21 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 123 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+2\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 22 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 123 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 23 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 31 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 154 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+3\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 32 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 154 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 33 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 41 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 186 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+4\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 42 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 186 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 43 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 51 , \"obj\" : \"label\" , \"x\" : 8 , \"y\" : 218 , \"w\" : 130 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"hour+5\" , \"parentid\" : 11 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 52 , \"obj\" : \"label\" , \"x\" : 124 , \"y\" : 218 , \"w\" : 50 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 11 , \"pad_top\" : -2 , \"text_font\" : 24 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 53 , \"obj\" : \"img\" , \"x\" : 182 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 11 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 61 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 123 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+1\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 62 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 63 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 123 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 64 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 118 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 71 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 154 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+2\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 72 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 73 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 154 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 74 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 150 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 81 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 186 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+3\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 82 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 83 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 186 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 84 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 182 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 91 , \"obj\" : \"label\" , \"x\" : 6 , \"y\" : 218 , \"w\" : 100 , \"h\" : 22 , \"align\" : \"left\" , \"text\" : \"date+4\" , \"parentid\" : 12 , \"pad_top\" : 3 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 92 , \"obj\" : \"label\" , \"x\" : 102 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Navy\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 93 , \"obj\" : \"label\" , \"x\" : 150 , \"y\" : 218 , \"w\" : 40 , \"h\" : 22 , \"align\" : \"center\" , \"text\" : \"00.0\" , \"parentid\" : 12 , \"pad_top\" : -2 , \"text_font\" : 24 , \"text_color\" : \"Blush\" , \"click\" : 0 } { \"page\" : 5 , \"id\" : 94 , \"obj\" : \"img\" , \"x\" : 194 , \"y\" : 214 , \"w\" : 32 , \"h\" : 32 , \"src\" : \"L:/openhasp_dummy_img.png\" , \"parentid\" : 12 , \"click\" : 0 } relevant openHASP-custom-component config: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 - obj : \"p5b14\" # Icon properties : \"src\" : \"{{ 'L:/w-128-' + states('weather.openweathermap') + '.png' if not is_state('weather.openweathermap','unavailable') }}\" - obj : \"p5b15\" # Current date (adjust format to your needs) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set day = (states.weather.openweathermap.last_changed).strftime('%w') %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{- days[ day | int -1 ] }} {{ (states.weather.openweathermap.last_changed).strftime('%m. %d. ') }} {% endif -%} - obj : \"p5b16\" # Current temp (you can use your own outdoor temp sensor if you have one) properties : \"text\" : \"{{ state_attr('weather.openweathermap','temperature') |string + '\u00b0C' if not is_state('weather.openweathermap','unavailable') }}\" # or \"{{ states('sensor.your_own_temp_sensor') if not is_state('sensor.your_own_temp_sensor','unavailable') else '--' }}\u00b0C\" - obj : \"p5b17\" # Current weather condition properties : \"text\" : > {% if is_state('weather.openweathermap','clear-night') -%} Clear night {% elif is_state('weather.openweathermap','cloudy') -%} Cloudy {% elif is_state('weather.openweathermap','fog') -%} Fog {% elif is_state('weather.openweathermap','hail') -%} Hail {% elif is_state('weather.openweathermap','lightning') -%} Lightning {% elif is_state('weather.openweathermap','lightning-rainy') -%} Thunderstorms {% elif is_state('weather.openweathermap','partlycloudy') -%} Partly cloudy {% elif is_state('weather.openweathermap','pouring') -%} Pouring rain {% elif is_state('weather.openweathermap','rainy') -%} Rainy {% elif is_state('weather.openweathermap','snowy') -%} Snowy {% elif is_state('weather.openweathermap','snowy-rainy') -%} Snowy-rainy {% elif is_state('weather.openweathermap','sunny') -%} Sunny {% elif is_state('weather.openweathermap','windy') -%} Windy {% elif is_state('weather.openweathermap','windy-variant') -%} Windy {% elif is_state('weather.openweathermap','exceptional') -%} Exceptional {% elif is_state('weather.openweathermap','unavailable') -%} (not available) {% else -%} {{ states('weather.openweathermap') }} {% endif -%} - obj : \"p5b10\" # tab dots - MAKE SURE YOU UPDATE THIS ONE!! event : \"changed\" : - service : openhasp.command target : entity_id : openhasp.your_plate data : keyword : p5b19.text parameters : > {% if val == 0 %} {{ \"#000000 \\u2022# #909090 \\u2022#\" | e }} {%-elif val == 1 %} {{ \"#909090 \\u2022# #000000 \\u2022#\" | e }} {% endif %} - obj : \"p5b21\" # Forecast time +1h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b22\" # Forecast temp +1h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[1]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b23\" # Forecast condition +1h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b31\" # Forecast time +2h (using Dawn/Morn etc instead of Today/Tomorrow) properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set hour = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) | timestamp_custom(\"%-H\") | int %} {%- if 4 <= hour < 6 %} Dawning {%- elif 6 <= hour < 9 %} Morning {%- elif 9 <= hour < 12 %} Forenoon {%- elif 12 <= hour < 18 %} Afternoon {%- elif 18 <= hour < 23 %} Evening {%- elif 23 <= hour or hour < 4 %} Night {%- endif %} {{- \" \" + hour |string + \" o'clock\" }} {%- endif %} - obj : \"p5b32\" # Forecast temp +2h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[3]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b33\" # Forecast condition +2h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[3]['condition'] }}.png {%- endif %} - obj : \"p5b41\" # Forecast time +4h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[6]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b42\" # Forecast temp +4h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[6]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b43\" # Forecast condition +4h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[6]['condition'] }}.png {%- endif %} - obj : \"p5b51\" # Forecast time +8h properties : \"text\" : > {%- if not is_state('weather.openweathermap','unavailable') %} {%- set update = states('sensor.date') %} {%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %} {%- set event = as_timestamp(strptime(state_attr('weather.openweathermap','forecast')[12]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %} Today {%- elif delta == 1 %} Tomorrow {%- endif %} {{ event | timestamp_custom(\" %-I %p\") }} {%- endif %} - obj : \"p5b52\" # Forecast temp +8h properties : \"text\" : \"{{ state_attr('weather.openweathermap','forecast')[12]['temperature'] if not is_state('weather.openweathermap','unavailable') else '-' }}\" - obj : \"p5b53\" # Forecast condition +8h properties : \"src\" : > {%- if not is_state('weather.openweathermap','unavailable') %} L:/w-32-{{ state_attr('weather.openweathermap','forecast')[12]['condition'] }}.png {%- endif %} - obj : \"p5b61\" # Forecast date +1d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[0]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b62\" # Forecast temp min +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b63\" # Forecast temp max +1d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[0]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b64\" # Forecast condition +1d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[0]['condition'] }}.png {%- endif %} - obj : \"p5b71\" # Forecast date +2d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[1]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b72\" # Forecast temp min +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b73\" # Forecast temp max +2d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[1]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b74\" # Forecast condition +2d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[1]['condition'] }}.png {%- endif %} - obj : \"p5b81\" # Forecast date +3d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[2]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b82\" # Forecast temp min +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b83\" # Forecast temp max +3d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[2]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b84\" # Forecast condition +3d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[2]['condition'] }}.png {%- endif %} - obj : \"p5b91\" # Forecast date +4d properties : \"text\" : > {%- if not is_state('weather.your_homename','unavailable') %} {%- set now1 = as_timestamp(strptime(state_attr('weather.your_homename','forecast')[3]['datetime'], '%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %} {%- set day = now1 | timestamp_custom(\"%w\") %} {%- set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %} {{ days[ day | int -1 ] }}{{ now1 | timestamp_custom(\" %d\") }} {%- endif %} - obj : \"p5b92\" # Forecast temp min +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['templow'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b93\" # Forecast temp max +4d properties : \"text\" : \"{{ state_attr('weather.your_homename','forecast')[3]['temperature'] if not is_state('weather.your_homename','unavailable') else '-' }}\" - obj : \"p5b94\" # Forecast condition +4d properties : \"src\" : > {%- if not is_state('weather.your_homename','unavailable') %} L:/w-32-{{ state_attr('weather.your_homename','forecast')[3]['condition'] }}.png {%- endif %} Attribution Icons are copyright from manifestinteractive and merlinthered .","title":"Current weather and forecasts"},{"location":"integrations/home-assistant/sampl_conf/#fan-and-scent-diffuser","text":"This example shows how a transparent PNG image can be combined with a moving spinner object, to create the impression of a spinning fan. In Home Assistant this fan appears as a select component with the available presets as Low , Mid , High , Turbo , OFF selectable options. The scent diffuser appears as a standard fan component where the intensity can be set by percentage. To control the fan we use a button matrix object which has exactly the same buttons as the options of the select component. To control the scent diffuser we use a slider object. The fan and the perfume PNG icons are available below. Upload them to the flash storage of your plate. fan perfume Warning For this example to work, you need an ESP32 board having PSRam memory installed, otherwise openHASP will likely crash. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 4 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"AIR TREATMENT\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 10 , \"obj\" : \"obj\" , \"x\" : 5 , \"y\" : 35 , \"w\" : 230 , \"h\" : 250 , \"click\" : 0 } { \"page\" : 4 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Fresh air flow\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 105 , \"h\" : 20 , \"text\" : \"Scent intensity\" , \"align\" : \"center\" , \"border_width\" : 0 } { \"page\" : 4 , \"id\" : 12 , \"obj\" : \"spinner\" , \"x\" : 36 , \"y\" : 84 , \"w\" : 56 , \"h\" : 56 , \"bg_opa\" : 0 , \"border_width\" : 0 , \"line_width\" : 0 , \"line_width10\" : 19 , \"line_color10\" : \"#34eb77\" , \"type\" : 2 , \"angle\" : 160 , \"speed\" : 3000 } { \"page\" : 4 , \"id\" : 13 , \"obj\" : \"img\" , \"x\" : 14 , \"y\" : 75 , \"src\" : \"L:/g64.png\" , \"auto_size\" : 1 , \"w\" : 100 , \"h\" : 74 } { \"page\" : 4 , \"id\" : 14 , \"obj\" : \"img\" , \"x\" : 130 , \"y\" : 78 , \"src\" : \"L:/perfume3.png\" , \"auto_size\" : 1 , \"w\" : 60 , \"h\" : 68 } { \"page\" : 4 , \"id\" : 40 , \"obj\" : \"btnmatrix\" , \"x\" : 5 , \"y\" : 130 , \"w\" : 110 , \"h\" : 113 , \"parentid\" : 10 , \"options\" :[ \"Low\" , \"Mid\" , \"\\n\" , \"High\" , \"Turbo\" , \"\\n\" , \"OFF\" ], \"toggle\" : 1 , \"one_check\" : 1 , \"bg_opa\" : 0 , \"pad_inner\" : 5 , \"border_width\" : 0 , \"pad_top\" : 0 , \"pad_bottom\" : 0 , \"pad_left\" : 0 , \"pad_right\" : 0 } { \"page\" : 4 , \"id\" : 51 , \"obj\" : \"slider\" , \"x\" : 200 , \"y\" : 60 , \"w\" : 25 , \"h\" : 220 , \"min\" : 0 , \"max\" : 60 , \"val\" : 15 } { \"page\" : 4 , \"id\" : 52 , \"obj\" : \"obj\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"click\" : 0 , \"radius\" : 5 } { \"page\" : 4 , \"id\" : 53 , \"obj\" : \"label\" , \"x\" : 130 , \"y\" : 130 , \"w\" : 50 , \"h\" : 30 , \"parentid\" : 10 , \"text\" : \"15\" , \"text_font\" : 24 , \"align\" : \"center\" } { \"page\" : 4 , \"id\" : 54 , \"obj\" : \"btn\" , \"x\" : 130 , \"y\" : 168 , \"w\" : 50 , \"h\" : 76 , \"parentid\" : 10 , \"toggle\" : true , \"text\" : \"\\uE425\" , \"text_font\" : 32 , \"align\" : 1 , \"bg_color\" : \"#A0A0A0\" , \"bg_grad_color\" : \"#606060\" , \"border_color\" : \"#404040\" } relevant openHASP-custom-component config: - obj : \"p4b40\" # Buttin Matrix with the fan presets properties : \"click\" : \"{{ 0 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 1 }}\" \"opacity\" : \"{{ 100 if (is_state('input_select.fan_presets','unavailable') or is_state('input_select.fan_presets','unknown')) else 255 }}\" \"options\" : '[\"Low\",\"Mid\",\"\\n\",\"High\",\"Turbo\",\"\\n\",\"OFF\"]' \"toggle\" : '{{ 1 if (not states(\"input_select.fan_presets\") in state_attr(\"input_select.fan_presets\",\"options\")) or (is_state(\"input_select.fan_presets\",\"unavailable\")) -}}' \"val\" : > {% if state_attr(\"input_select.fan_presets\",\"options\") is not none -%} {% if not states('input_select.fan_presets') in state_attr('input_select.fan_presets','options') -%}-1{% else -%} {% for source in state_attr('input_select.fan_presets','options') -%} {{loop.index - 1 if source == states('input_select.fan_presets') }} {%-endfor%} {%- endif %} {%- endif %} event : - service : input_select.input_select_option data : option : '{{ text }}' target : entity_id : input_select.fan_presets - obj : \"p4b12\" # Spinner behind the PNG icon properties : \"opacity\" : \"{{ 0 if states('input_select.fan_presets') in ['unavailable', 'unknown', 'OFF'] else 255 }}\" \"jsonl\" : > {% if is_state('number.plate_test_page_number', '4') %} {% if is_state('input_select.fan_presets', 'Alap') %} {\"speed\":7000,\"line_color10\":\"#31de70\"} {%-elif is_state('input_select.fan_presets', 'K\u00f6z\u00e9p') %} {\"speed\":1700,\"line_color10\":\"#dede1f\"} {%-elif is_state('input_select.fan_presets', 'Magas') %} {\"speed\":800,\"line_color10\":\"#d6a11a\"} {%-elif is_state('input_select.fan_presets', 'Turb\u00f3') %} {\"speed\":250,\"line_color10\":\"#ff4a4a\"} {% endif %} {% else -%} {\"speed\":0} {% endif %} - obj : \"p4b54\" # Scent Diffuser ON/OFF button properties : \"val\" : '{{ 1 if is_state(\"fan.scent_diffuser_intensity\", \"on\") else 0 }}' \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"down\" : - service : fan.toggle target : entity_id : fan.scent_diffuser_intensity - obj : \"p4b51\" # Scent Diffuser intensity slider properties : \"val\" : \"{{ state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"enabled\" : \"{{ 'false' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else 'true' }}\" event : \"up\" : - service : fan.set_percentage target : entity_id : fan.scent_diffuser_intensity data : percentage : '{{ val }}' - obj : \"p4b53\" # Scent Diffuser intensity number label properties : \"text\" : \"{{ '--' if states('input_select.fan_presets') in ['unavailable', 'unknown'] else state_attr('fan.scent_diffuser_intensity','percentage') }}\" \"opacity\" : \"{{ 255 if is_state('fan.scent_diffuser_intensity', 'on') else 95 }}\" Note the condition in the Spinner configuration of the component: {% if is_state('openhasp.plate_test', '4') %} - this is useful to only animate the spinner when the page containing it is actually shown. Since the spinner is being overlapped by a transparent PNG image, CPU usage is higher as it has to be completely redrawn every frame. CPU resources can be freed up this way - only animate when it can be seen. Attribution Icons are copyright from SVG Repo .","title":"Fan and scent diffuser"},{"location":"integrations/home-assistant/sampl_conf/#using-tags","text":"You can avoid too much code repetition when you have multiple similar objects on a page, doing the same thing with different entities, and you'd like to make accessible some advanced options too. Presenting everyting flat will overwhelm your user interface, so it would be better to just show the most used controls, and only display the advanced options in popups related to unique objects. Tag property was made to ease this task.","title":"Using tags"},{"location":"integrations/home-assistant/sampl_conf/#colored-lights-panel","text":"In the example below we have four coloured lights. Squeezing the ON/OFF button, the color picker and the brightness selector for all four lights on a single page can be challenging - and the result will likely be useless on a small touch screen. Instead, we'll just place the toggle buttons with descriptive labels on the page, and we'll only display the color picker and the brightness selector on demand, in this case when the user touches the descriptive coloured label. While dynamically drawing these objects we're setting the tag property for the color picker and the slider to the entity_id of the light we want to adjust, so that when we're interacting with them, the Custom Component can know which light it has to send the adjustments to. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 5 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"COLOURED LIGHTS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 5 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"I.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 40 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"II.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 15 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"III.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 125 , \"y\" : 165 , \"w\" : 100 , \"h\" : 60 , \"text\" : \"IV.\" , \"align\" : \"center\" , \"border_width\" : 1 , \"radius\" : 8 , \"border_color\" : \"#bdbdbd\" , \"bg_opa\" : 255 , \"click\" : true } { \"page\" : 5 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 90 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 15 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } { \"page\" : 5 , \"id\" : 14 , \"obj\" : \"btn\" , \"x\" : 125 , \"y\" : 220 , \"w\" : 100 , \"h\" : 60 , \"toggle\" : true , \"text\" : \"\\uE335\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p5b11\" # toggle button for ON/OFF switching of light I. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_1\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_1\" - obj : \"p5b12\" # toggle button for ON/OFF switching of light II. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_2\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_2\" - obj : \"p5b13\" # toggle button for ON/OFF switching of light III. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_3\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_3\" - obj : \"p5b14\" # toggle button for ON/OFF switching of light IV. properties : \"val\" : '{{ 1 if is_state(\"light.dmx_vbar_4\", \"on\") else 0 }}' event : \"down\" : - service : homeassistant.toggle entity_id : \"light.dmx_vbar_4\" - obj : \"p5b2\" # label showing the current color of light I. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_1','on') %} {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_1 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light I. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light I.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_1\",\"color\": {% set rgb = state_attr('light.dmx_vbar_1','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_1\",\"val\": {{- state_attr('light.dmx_vbar_1', 'brightness') -}} } - obj : \"p5b3\" # label showing the current color of light II. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_2','on') %} {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_2 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light II. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light II.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_2\",\"color\": {% set rgb = state_attr('light.dmx_vbar_2','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_2\",\"val\": {{- state_attr('light.dmx_vbar_2', 'brightness') -}} } - obj : \"p5b4\" # label showing the current color of light III. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_3','on') %} {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_3 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light III. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light III.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_3\",\"color\": {% set rgb = state_attr('light.dmx_vbar_3','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_3\",\"val\": {{- state_attr('light.dmx_vbar_3', 'brightness') -}} } - obj : \"p5b5\" # label showing the current color of light IV. properties : \"bg_color\" : > {% if is_state('light.dmx_vbar_4','on') %} {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') %} {{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }} {% endif %} event : \"down\" : - service : light.turn_on data : entity_id : light.dmx_vbar_4 - service : openhasp.command # display the on-demand pop-up with color picker and brightness slider, tagged with the entity_id of light IV. target : entity_id : openhasp.plate_test data : keyword : jsonl parameters : >- {\"page\":5,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":5,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":10,\"y\":15,\"w\":220,\"h\":270,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":5,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":0,\"y\":8,\"w\":220,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Color settings for light IV.\"} {\"page\":5,\"id\":201,\"obj\":\"cpicker\",\"parentid\":210,\"x\":20,\"y\":35,\"w\":180,\"h\":180,\"tag\":\"light.dmx_vbar_4\",\"color\": {% set rgb = state_attr('light.dmx_vbar_4','rgb_color') -%} \"{{ \"#%02x%02x%02x\" | format(rgb[0],rgb[1],rgb[2]) }}\" } {\"page\":5,\"id\":202,\"obj\":\"slider\",\"parentid\":210,\"x\":20,\"y\":225,\"w\":180,\"h\":30,\"min\":1,\"max\":255,\"tag\":\"light.dmx_vbar_4\",\"val\": {{- state_attr('light.dmx_vbar_4', 'brightness') -}} } - obj : \"p5b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b201\" # set the color of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" rgb_color : \"[{{ r }},{{ g }},{{ b }}]\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete - obj : \"p5b202\" # set the brightness of the light entity_id extracted from the tag set previously, when displayed, then delete the popup objects event : \"changed\" : - service : light.turn_on data : entity_id : \"{{ tag }}\" brightness : \"{{ val }}\" \"up\" : - service : openhasp.command target : entity_id : openhasp.plate_test data : keyword : p5b200.delete Without tags, the last 3 object definitions would have to be added for each light, and also it would be needed to be drawn separately for each light, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design.","title":"Colored lights panel"},{"location":"integrations/home-assistant/sampl_conf/#shutter-control-panel","text":"In the second example, we have five windows with motorized shutters. In addition to the usual UP/STOP/DOWN buttons, the inhabitants want to have three shortcut positions for each shutter, and also a slider for free positioning. Useless to say that it's impossible to put all these on a page, and also it would be a pity to use up 5 pages just for these. We'll just put the most used, UP/STOP/DOWN buttons on the page (this already looks a bit much...) and we'll use a long press event on the middle STOP button to show a pop-up with the extra required settings related to the desired shutter. The tag here will be a JSON object referencing both the entity_id and the position specific to the desired shutter, eg. \"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"} , this will be set for the buttons and the slider appearing in the popup. Since the shutters are different sizes and types, the same intermediate physical position may correspond to different numeric values in Home Assistant. relevant openHASP config: (screen size 240x320, UI Theme: Hasp Light) { \"page\" : 2 , \"id\" : 1 , \"obj\" : \"btn\" , \"x\" : 0 , \"y\" : 0 , \"w\" : 240 , \"h\" : 30 , \"text\" : \"MOTORIZED COVERS\" , \"text_font\" : 16 , \"bg_color\" : \"#2C3E50\" , \"text_color\" : \"#FFFFFF\" , \"radius\" : 0 , \"border_side\" : 0 , \"click\" : 0 } { \"page\" : 2 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 7 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"I.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 3 , \"obj\" : \"label\" , \"x\" : 53 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"II.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 4 , \"obj\" : \"label\" , \"x\" : 99 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"III.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 5 , \"obj\" : \"label\" , \"x\" : 145 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"IV.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 6 , \"obj\" : \"label\" , \"x\" : 191 , \"y\" : 36 , \"w\" : 42 , \"h\" : 20 , \"text\" : \"V.\" , \"align\" : \"center\" } { \"page\" : 2 , \"id\" : 11 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 12 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 13 , \"obj\" : \"btn\" , \"x\" : 7 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 21 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 22 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 23 , \"obj\" : \"btn\" , \"x\" : 53 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 31 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 32 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 33 , \"obj\" : \"btn\" , \"x\" : 99 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 41 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 42 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 43 , \"obj\" : \"btn\" , \"x\" : 145 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 51 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 60 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE05D\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 52 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 136 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE4DB\" , \"text_font\" : 32 } { \"page\" : 2 , \"id\" : 53 , \"obj\" : \"btn\" , \"x\" : 191 , \"y\" : 212 , \"w\" : 42 , \"h\" : 68 , \"toggle\" : false , \"text\" : \"\\uE045\" , \"text_font\" : 32 } relevant openHASP-custom-component config: (read comments) - obj : \"p2b11\" # shutter I. up button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b13\" # shutter I. down button properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_i', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_i','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_i\" - obj : \"p2b12\" # shutter I. middle stop button properties : \"text\" : > {% if is_state('cover.bigroom_i', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_i', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_i', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_i\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - I.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"54\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_i\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_i','current_position') -}} } - obj : \"p2b21\" # shutter II. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b23\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_ii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_ii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_ii\" - obj : \"p2b22\" properties : \"text\" : > {% if is_state('cover.bigroom_ii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_ii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_ii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_ii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - II.\",\"align\":\"center\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"18\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_ii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_ii','current_position') -}} } - obj : \"p2b31\" # shutter III. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b33\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iii', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iii','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iii\" - obj : \"p2b32\" properties : \"text\" : > {% if is_state('cover.bigroom_iii', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iii', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iii', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iii\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - III.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iii\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iii','current_position') -}} } - obj : \"p2b41\" # shutter IV. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b43\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_iv', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_iv','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_iv\" - obj : \"p2b42\" properties : \"text\" : > {% if is_state('cover.bigroom_iv', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_iv', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_iv', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_iv\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - IV.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"15\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"53\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_iv\",\"position\":\"50\"},\"val\": {{- state_attr('cover.bigroom_iv','current_position') -}} } - obj : \"p2b51\" # shutter V. properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'opening') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 100) else '255' }}\" event : \"down\" : - service : cover.open_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b53\" properties : \"text_color\" : \"{{ '#FFFF00' if is_state('cover.bigroom_v', 'closing') else '#FFFFFF' }}\" \"text_opa\" : \"{{ '80' if is_state_attr('cover.bigroom_v','current_position', 0) else '255' }}\" event : \"down\" : - service : cover.close_cover target : entity_id : \"cover.bigroom_v\" - obj : \"p2b52\" properties : \"text\" : > {% if is_state('cover.bigroom_v', 'closing') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'opening') %} {{ \"\\uE4DB\" | e }} {%-elif is_state('cover.bigroom_v', 'closed') %} {{ \"\\uF11C\" | e }} {%-elif is_state('cover.bigroom_v', 'open') %} {{ \"\\uF11E\" | e }} {% endif %} event : \"down\" : - service : cover.stop_cover target : entity_id : \"cover.bigroom_v\" \"long\" : - service : openhasp.command # display the on-demand pop-up with extra setting objects, tagged with the entity_id and specific positions in JSON objects target : entity_id : openhasp.plate_bigroom data : keyword : jsonl parameters : >- {\"page\":2,\"id\":200,\"obj\":\"obj\",\"x\":0,\"y\":0,\"w\":240,\"h\":320,\"radius\":0,\"bg_grad_dir\":0,\"opacity\":150,\"bg_color\":\"black\"} {\"page\":2,\"id\":210,\"obj\":\"obj\",\"parentid\":200,\"x\":5,\"y\":55,\"w\":230,\"h\":190,\"opacity\":255,\"click\":0,\"radius\":10,\"shadow_opa\":255,\"shadow_color\":\"black\",\"shadow_width\":20,\"shadow_spread\":0} {\"page\":2,\"id\":211,\"obj\":\"label\",\"parentid\":210,\"x\":10,\"y\":10,\"w\":210,\"h\":20,\"click\":0,\"align\":\"center\",\"text\":\"Position preset - V.\"} {\"page\":2,\"id\":201,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":110,\"w\":150,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"Middle\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"17\"}} {\"page\":2,\"id\":202,\"obj\":\"btn\",\"parentid\":210,\"x\":10,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"2/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"90\"}} {\"page\":2,\"id\":203,\"obj\":\"btn\",\"parentid\":210,\"x\":90,\"y\":40,\"w\":70,\"h\":60,\"toggle\":false,\"text_font\":24,\"text\":\"1/3\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"55\"}} {\"page\":2,\"id\":204,\"obj\":\"slider\",\"parentid\":210,\"x\":180,\"y\":40,\"w\":30,\"h\":130,\"min\":1,\"max\":100,\"pad_left20\":\"13\",\"pad_right20\":\"13\",\"tag\":{\"cover\":\"cover.bigroom_v\",\"position\":\"19\"},\"val\": {{- state_attr('cover.bigroom_v','current_position') -}} } - obj : \"p2b200\" # the background of the popup. when touched directly, will close the popup by deleting its objects event : \"down\" : - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b201\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b202\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b203\" # set the shutter position for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"down\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ tag.position }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete - obj : \"p2b204\" # set the shutter position from the slider for entity_id extracted from the JSON oject in tag set when displayed, then delete the popup objects event : \"up\" : - service : cover.set_cover_position data : entity_id : \"{{ tag.cover }}\" position : \"{{ val | int }}\" - service : openhasp.command target : entity_id : openhasp.plate_bigroom data : keyword : p2b200.delete Again - without tags, the last 5 object definitions would have to be added for each shutter, and also it would be needed to be drawn separately for each one, initially invisible, then toggle visibility at each one. That would have resulted in a much bigger Custom Component configuration, and also plate design. Note Some examples below may generate errors during Home Assistant startup. Log messages like Error while processing template or Template variable error: 'None' has no attribute 'last_changed' etc. can be caused by the fact that openHASP component loads faster than the other integrations you have set up, from where you want to pull data. Because the data required by openHASP component is not yet available, an error is generated. But as soon as Home Assistant finishes loading everything, and all the data you've configured is available, things will be normal. Nevertheless the log should be checked regularly to find repetitive problems.","title":"Shutter control panel"},{"location":"integrations/node-red/","text":"Node-RED ~ You can integrate an openHASP plate in Node-RED by subscribing and publishing to its MQTT topics. The following is an example of how to use Node-RED to read PIN numbers from an alarm button matrix on page 12, and display those numbers back to the screen on p12b2. First we define p12b1 as the matrix, and p12b2 as the area where to re-display the PIN. Add the following to pages_online.jsonl { \"comment\" : \" ----------- Page 12 layout ------------\" } { \"page\" : 12 , \"id\" : 1 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 220 , \"options\" :[ \"1\" , \"2\" , \"3\" , \"\\n\" , \"4\" , \"5\" , \"6\" , \"\\n\" , \"7\" , \"8\" , \"9\" , \"\\n\" , \"Home\" , \"0\" , \"Away\" ], \"toggle\" : false , \"one_check\" : false } { \"page\" : 12 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 104 , \"y\" : 22 , \"h\" : 30 , \"w\" : 40 , \"text\" : \" \" , \"text_color\" : \"white\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } The following jsonl is for 13 Lanbon L8 panels and can be imported [ { \"id\" : \"0b80aa53cbe8e6e2\" , \"type\" : \"tab\" , \"label\" : \"Lanbon Security Panel\" , \"disabled\" : false , \"info\" : \"\" , \"env\" : [] }, { \"id\" : \"e7faec55927cd35a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/livingroom/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 80 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"99cabcc7d52bfc9b\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"active\" : true , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"payload\" , \"targetType\" : \"msg\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 1290 , \"y\" : 200 , \"wires\" : [] }, { \"id\" : \"ac7b661dc1513061\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MakeNums\" , \"rules\" : [ { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":0,\\\"text\\\":\\\"1\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"1\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":1,\\\"text\\\":\\\"2\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"2\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":2,\\\"text\\\":\\\"3\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"3\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":3,\\\"text\\\":\\\"4\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"4\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":4,\\\"text\\\":\\\"5\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"5\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":5,\\\"text\\\":\\\"6\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"6\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":6,\\\"text\\\":\\\"7\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"7\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":7,\\\"text\\\":\\\"8\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"8\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":8,\\\"text\\\":\\\"9\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"9\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":10,\\\"text\\\":\\\"0\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"0\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 450 , \"y\" : 160 , \"wires\" : [ [ \"9739abb6f93766f6\" ] ] }, { \"id\" : \"d23a2c349910face\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"BuildPIN\" , \"func\" : \"var pin=global.get('pin') || \\\"\\\";\\n\\nvar count=global.get('count') || 0;\\ncount +=1;\\nglobal.set('count',count)\\n\\npin = pin+msg.payload;\\nglobal.set('pin',pin)\\n\\n\\nif (count >= 4) {\\n msg.payload=pin;\\n global.set('count',undefined)\\n global.set('pin',undefined)\\n return msg;\\n}\\n\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 680 , \"y\" : 180 , \"wires\" : [ [ \"194eed57a4506f13\" , \"eaa539f1f670e8ea\" , \"978adaf5813fc4c9\" , \"421fb70f969f4c42\" , \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"8ac3fdee648284fe\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"OnDown\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"cont\" , \"v\" : \"{\\\"event\\\":\\\"down\\\"\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 1 , \"x\" : 420 , \"y\" : 80 , \"wires\" : [ [ \"5249d096ebe1aab7\" , \"ac7b661dc1513061\" ] ] }, { \"id\" : \"978adaf5813fc4c9\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Disarm Alarm\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_disarm\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":msg.payload}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 920 , \"y\" : 200 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"8b34728627566066\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mainhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 140 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"da5ff263f7265cee\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/ensuite/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 200 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"16c2241ebfe6d928\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mbr/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 160 , \"y\" : 260 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9152a3b91fa4ce8a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/porch/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 320 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"df2df457211af7fa\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/dining/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 380 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"ef006a2ad5f4033f\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 440 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"6dc9dabe1edb7af5\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/kitchen/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 500 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"fb8196aa68104765\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/garage/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 560 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"a416144df4052b42\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 620 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9305a215bd8a3a87\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishMood\" , \"topic\" : \"hasp/plates/command\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 40 , \"wires\" : [] }, { \"id\" : \"5249d096ebe1aab7\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"White\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 255, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 650 , \"y\" : 40 , \"wires\" : [ [ \"1c99afe47fe6da11\" , \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"3a59fcd31e572bb0\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 810 , \"y\" : 80 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"197cb8bad0ea98a3\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmAway\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_away\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 320 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"eaa539f1f670e8ea\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Purple\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 0, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 950 , \"y\" : 380 , \"wires\" : [ [ \"9305a215bd8a3a87\" , \"cae42e223294ce38\" ] ] }, { \"id\" : \"194eed57a4506f13\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Reset\" , \"func\" : \" global.set('count',undefined)\\n global.set('pin',undefined)\\n msg.payload = \\\"\\\"\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 670 , \"y\" : 240 , \"wires\" : [ [ \"421fb70f969f4c42\" ] ] }, { \"id\" : \"9739abb6f93766f6\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"0-9HomeAway\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"btwn\" , \"v\" : \"0\" , \"vt\" : \"num\" , \"v2\" : \"9\" , \"v2t\" : \"num\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":9,\\\"text\\\":\\\"Home\\\"}\" , \"vt\" : \"str\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":11,\\\"text\\\":\\\"Away\\\"}\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 3 , \"x\" : 440 , \"y\" : 240 , \"wires\" : [ [ \"d23a2c349910face\" , \"f9f85bc88ea6f404\" ], [ \"194eed57a4506f13\" ], [ \"194eed57a4506f13\" , \"c861944aac699e3e\" , \"206a424a07c9fb22\" ] ] }, { \"id\" : \"11dad534fd1a944e\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1010 , \"y\" : 440 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"cae42e223294ce38\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"1\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 880 , \"y\" : 440 , \"wires\" : [ [ \"11dad534fd1a944e\" ] ] }, { \"id\" : \"4b8a2bd06dcf1342\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishPIN\" , \"topic\" : \"hasp/plates/command/p12b2.text\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 120 , \"wires\" : [] }, { \"id\" : \"f9f85bc88ea6f404\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"DisplayPIN\" , \"func\" : \"var pin=global.get('pin')\\n// pin = pin+msg.payload;\\nmsg.payload = pin;\\nreturn msg;\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 690 , \"y\" : 140 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"149782424f319147\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"****\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 500 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" , \"88031b2f0bea8fef\" ] ] }, { \"id\" : \"421fb70f969f4c42\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 500 , \"wires\" : [ [ \"149782424f319147\" ] ] }, { \"id\" : \"88031b2f0bea8fef\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 560 , \"wires\" : [ [ \"bf47160c100015ca\" ] ] }, { \"id\" : \"bf47160c100015ca\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \" \" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 560 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"c861944aac699e3e\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"15\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 300 , \"wires\" : [ [ \"371b17d0dd9918dc\" , \"24f9431e18e5d5f2\" ] ] }, { \"id\" : \"1c99afe47fe6da11\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"300\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 670 , \"y\" : 80 , \"wires\" : [ [ \"3a59fcd31e572bb0\" ] ] }, { \"id\" : \"206a424a07c9fb22\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"30 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"Alarm will arm away in 30 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 300 , \"wires\" : [ [] ] }, { \"id\" : \"24f9431e18e5d5f2\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"15 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"15 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 360 , \"wires\" : [ [] ] }, { \"id\" : \"371b17d0dd9918dc\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"10\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 360 , \"wires\" : [ [ \"b8098924ec49405c\" , \"56b96ab40a26daeb\" ] ] }, { \"id\" : \"b8098924ec49405c\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"5\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 420 , \"wires\" : [ [ \"197cb8bad0ea98a3\" ] ] }, { \"id\" : \"56b96ab40a26daeb\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"5 Secs\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"5 Seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 420 , \"wires\" : [ [] ] }, { \"id\" : \"0b8f9dbd664953e2\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmHome\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_home\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 260 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"0bf633ce2d98dd79\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/upbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 680 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"e3bf26032c55a701\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"debug 1\" , \"active\" : false , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"false\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 640 , \"y\" : 580 , \"wires\" : [] }, { \"id\" : \"9a8d3eea339efbdc\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/allys_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 740 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"7aac330a4bb67fe8\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/victorias_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 130 , \"y\" : 800 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"441d674c9c4a7f07\" , \"type\" : \"mqtt-broker\" , \"name\" : \"192.168.0.21\" , \"broker\" : \"192.168.0.21\" , \"port\" : \"1883\" , \"clientid\" : \"\" , \"autoConnect\" : true , \"usetls\" : false , \"protocolVersion\" : \"4\" , \"keepalive\" : \"60\" , \"cleansession\" : true , \"birthTopic\" : \"\" , \"birthQos\" : \"0\" , \"birthPayload\" : \"\" , \"birthMsg\" : {}, \"closeTopic\" : \"\" , \"closeQos\" : \"0\" , \"closePayload\" : \"\" , \"closeMsg\" : {}, \"willTopic\" : \"\" , \"willQos\" : \"0\" , \"willPayload\" : \"\" , \"willMsg\" : {}, \"sessionExpiry\" : \"\" }, { \"id\" : \"669eed80.4f9844\" , \"type\" : \"server\" , \"name\" : \"Home Assistant\" , \"version\" : 5 , \"addon\" : true , \"rejectUnauthorizedCerts\" : true , \"ha_boolean\" : \"y|yes|true|on|home|open\" , \"connectionDelay\" : false , \"cacheJson\" : false , \"heartbeat\" : false , \"heartbeatInterval\" : 30 , \"areaSelector\" : \"friendlyName\" , \"deviceSelector\" : \"friendlyName\" , \"entitySelector\" : \"friendlyName\" , \"statusSeparator\" : \"at: \" , \"statusYear\" : \"hidden\" , \"statusMonth\" : \"short\" , \"statusDay\" : \"numeric\" , \"statusHourCycle\" : \"h23\" , \"statusTimeFormat\" : \"h:m\" , \"enableGlobalContextStore\" : true } ]","title":"Node-RED"},{"location":"integrations/node-red/#node-red","text":"You can integrate an openHASP plate in Node-RED by subscribing and publishing to its MQTT topics. The following is an example of how to use Node-RED to read PIN numbers from an alarm button matrix on page 12, and display those numbers back to the screen on p12b2. First we define p12b1 as the matrix, and p12b2 as the area where to re-display the PIN. Add the following to pages_online.jsonl { \"comment\" : \" ----------- Page 12 layout ------------\" } { \"page\" : 12 , \"id\" : 1 , \"obj\" : \"btnmatrix\" , \"x\" : 10 , \"y\" : 40 , \"w\" : 220 , \"h\" : 220 , \"options\" :[ \"1\" , \"2\" , \"3\" , \"\\n\" , \"4\" , \"5\" , \"6\" , \"\\n\" , \"7\" , \"8\" , \"9\" , \"\\n\" , \"Home\" , \"0\" , \"Away\" ], \"toggle\" : false , \"one_check\" : false } { \"page\" : 12 , \"id\" : 2 , \"obj\" : \"label\" , \"x\" : 104 , \"y\" : 22 , \"h\" : 30 , \"w\" : 40 , \"text\" : \" \" , \"text_color\" : \"white\" , \"align\" : 0 , \"bg_color\" : \"#2C3E50\" } The following jsonl is for 13 Lanbon L8 panels and can be imported [ { \"id\" : \"0b80aa53cbe8e6e2\" , \"type\" : \"tab\" , \"label\" : \"Lanbon Security Panel\" , \"disabled\" : false , \"info\" : \"\" , \"env\" : [] }, { \"id\" : \"e7faec55927cd35a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/livingroom/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 80 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"99cabcc7d52bfc9b\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"active\" : true , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"payload\" , \"targetType\" : \"msg\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 1290 , \"y\" : 200 , \"wires\" : [] }, { \"id\" : \"ac7b661dc1513061\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MakeNums\" , \"rules\" : [ { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":0,\\\"text\\\":\\\"1\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"1\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":1,\\\"text\\\":\\\"2\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"2\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":2,\\\"text\\\":\\\"3\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"3\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":3,\\\"text\\\":\\\"4\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"4\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":4,\\\"text\\\":\\\"5\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"5\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":5,\\\"text\\\":\\\"6\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"6\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":6,\\\"text\\\":\\\"7\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"7\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":7,\\\"text\\\":\\\"8\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"8\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":8,\\\"text\\\":\\\"9\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"9\" , \"tot\" : \"str\" }, { \"t\" : \"change\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"from\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":10,\\\"text\\\":\\\"0\\\"}\" , \"fromt\" : \"str\" , \"to\" : \"0\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 450 , \"y\" : 160 , \"wires\" : [ [ \"9739abb6f93766f6\" ] ] }, { \"id\" : \"d23a2c349910face\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"BuildPIN\" , \"func\" : \"var pin=global.get('pin') || \\\"\\\";\\n\\nvar count=global.get('count') || 0;\\ncount +=1;\\nglobal.set('count',count)\\n\\npin = pin+msg.payload;\\nglobal.set('pin',pin)\\n\\n\\nif (count >= 4) {\\n msg.payload=pin;\\n global.set('count',undefined)\\n global.set('pin',undefined)\\n return msg;\\n}\\n\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 680 , \"y\" : 180 , \"wires\" : [ [ \"194eed57a4506f13\" , \"eaa539f1f670e8ea\" , \"978adaf5813fc4c9\" , \"421fb70f969f4c42\" , \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"8ac3fdee648284fe\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"OnDown\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"cont\" , \"v\" : \"{\\\"event\\\":\\\"down\\\"\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 1 , \"x\" : 420 , \"y\" : 80 , \"wires\" : [ [ \"5249d096ebe1aab7\" , \"ac7b661dc1513061\" ] ] }, { \"id\" : \"978adaf5813fc4c9\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Disarm Alarm\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_disarm\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":msg.payload}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 920 , \"y\" : 200 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"8b34728627566066\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mainhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 140 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"da5ff263f7265cee\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/ensuite/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 200 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"16c2241ebfe6d928\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/mbr/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 160 , \"y\" : 260 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9152a3b91fa4ce8a\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/porch/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 320 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"df2df457211af7fa\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/dining/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 380 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"ef006a2ad5f4033f\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 440 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"6dc9dabe1edb7af5\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/kitchen/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 500 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"fb8196aa68104765\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/garage/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 560 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"a416144df4052b42\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/downhall/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 620 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"9305a215bd8a3a87\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishMood\" , \"topic\" : \"hasp/plates/command\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 40 , \"wires\" : [] }, { \"id\" : \"5249d096ebe1aab7\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"White\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 255, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 650 , \"y\" : 40 , \"wires\" : [ [ \"1c99afe47fe6da11\" , \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"3a59fcd31e572bb0\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 810 , \"y\" : 80 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"197cb8bad0ea98a3\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmAway\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_away\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 320 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"eaa539f1f670e8ea\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Purple\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 255, \\\"g\\\": 0, \\\"b\\\": 255, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 950 , \"y\" : 380 , \"wires\" : [ [ \"9305a215bd8a3a87\" , \"cae42e223294ce38\" ] ] }, { \"id\" : \"194eed57a4506f13\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Reset\" , \"func\" : \" global.set('count',undefined)\\n global.set('pin',undefined)\\n msg.payload = \\\"\\\"\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 670 , \"y\" : 240 , \"wires\" : [ [ \"421fb70f969f4c42\" ] ] }, { \"id\" : \"9739abb6f93766f6\" , \"type\" : \"switch\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"0-9HomeAway\" , \"property\" : \"payload\" , \"propertyType\" : \"msg\" , \"rules\" : [ { \"t\" : \"btwn\" , \"v\" : \"0\" , \"vt\" : \"num\" , \"v2\" : \"9\" , \"v2t\" : \"num\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":9,\\\"text\\\":\\\"Home\\\"}\" , \"vt\" : \"str\" }, { \"t\" : \"eq\" , \"v\" : \"{\\\"event\\\":\\\"down\\\",\\\"val\\\":11,\\\"text\\\":\\\"Away\\\"}\" , \"vt\" : \"str\" } ], \"checkall\" : \"true\" , \"repair\" : false , \"outputs\" : 3 , \"x\" : 440 , \"y\" : 240 , \"wires\" : [ [ \"d23a2c349910face\" , \"f9f85bc88ea6f404\" ], [ \"194eed57a4506f13\" ], [ \"194eed57a4506f13\" , \"c861944aac699e3e\" , \"206a424a07c9fb22\" ] ] }, { \"id\" : \"11dad534fd1a944e\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"Black\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"moodlight {\\\"state\\\": true, \\\"r\\\": 0, \\\"g\\\": 0, \\\"b\\\": 0, \\\"brightness\\\": 255}\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1010 , \"y\" : 440 , \"wires\" : [ [ \"9305a215bd8a3a87\" ] ] }, { \"id\" : \"cae42e223294ce38\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"1\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 880 , \"y\" : 440 , \"wires\" : [ [ \"11dad534fd1a944e\" ] ] }, { \"id\" : \"4b8a2bd06dcf1342\" , \"type\" : \"mqtt out\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"MQTTPublishPIN\" , \"topic\" : \"hasp/plates/command/p12b2.text\" , \"qos\" : \"0\" , \"retain\" : \"\" , \"respTopic\" : \"\" , \"contentType\" : \"\" , \"userProps\" : \"\" , \"correl\" : \"\" , \"expiry\" : \"\" , \"broker\" : \"441d674c9c4a7f07\" , \"x\" : 1310 , \"y\" : 120 , \"wires\" : [] }, { \"id\" : \"f9f85bc88ea6f404\" , \"type\" : \"function\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"DisplayPIN\" , \"func\" : \"var pin=global.get('pin')\\n// pin = pin+msg.payload;\\nmsg.payload = pin;\\nreturn msg;\" , \"outputs\" : 1 , \"noerr\" : 0 , \"initialize\" : \"\" , \"finalize\" : \"\" , \"libs\" : [], \"x\" : 690 , \"y\" : 140 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"149782424f319147\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"****\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 500 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" , \"88031b2f0bea8fef\" ] ] }, { \"id\" : \"421fb70f969f4c42\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 500 , \"wires\" : [ [ \"149782424f319147\" ] ] }, { \"id\" : \"88031b2f0bea8fef\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"500\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 870 , \"y\" : 560 , \"wires\" : [ [ \"bf47160c100015ca\" ] ] }, { \"id\" : \"bf47160c100015ca\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \" \" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 1040 , \"y\" : 560 , \"wires\" : [ [ \"4b8a2bd06dcf1342\" ] ] }, { \"id\" : \"c861944aac699e3e\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"15\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 300 , \"wires\" : [ [ \"371b17d0dd9918dc\" , \"24f9431e18e5d5f2\" ] ] }, { \"id\" : \"1c99afe47fe6da11\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"300\" , \"timeoutUnits\" : \"milliseconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 670 , \"y\" : 80 , \"wires\" : [ [ \"3a59fcd31e572bb0\" ] ] }, { \"id\" : \"206a424a07c9fb22\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"30 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"Alarm will arm away in 30 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 300 , \"wires\" : [ [] ] }, { \"id\" : \"24f9431e18e5d5f2\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"15 sec\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"15 seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 360 , \"wires\" : [ [] ] }, { \"id\" : \"371b17d0dd9918dc\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"10\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 360 , \"wires\" : [ [ \"b8098924ec49405c\" , \"56b96ab40a26daeb\" ] ] }, { \"id\" : \"b8098924ec49405c\" , \"type\" : \"delay\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"pauseType\" : \"delay\" , \"timeout\" : \"5\" , \"timeoutUnits\" : \"seconds\" , \"rate\" : \"1\" , \"nbRateUnits\" : \"1\" , \"rateUnits\" : \"second\" , \"randomFirst\" : \"1\" , \"randomLast\" : \"5\" , \"randomUnits\" : \"seconds\" , \"drop\" : false , \"allowrate\" : false , \"outputs\" : 1 , \"x\" : 660 , \"y\" : 420 , \"wires\" : [ [ \"197cb8bad0ea98a3\" ] ] }, { \"id\" : \"56b96ab40a26daeb\" , \"type\" : \"change\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"5 Secs\" , \"rules\" : [ { \"t\" : \"set\" , \"p\" : \"payload\" , \"pt\" : \"msg\" , \"to\" : \"5 Seconds\" , \"tot\" : \"str\" } ], \"action\" : \"\" , \"property\" : \"\" , \"from\" : \"\" , \"to\" : \"\" , \"reg\" : false , \"x\" : 410 , \"y\" : 420 , \"wires\" : [ [] ] }, { \"id\" : \"0b8f9dbd664953e2\" , \"type\" : \"api-call-service\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"ArmHome\" , \"server\" : \"669eed80.4f9844\" , \"version\" : 5 , \"debugenabled\" : false , \"domain\" : \"alarm_control_panel\" , \"service\" : \"alarm_arm_home\" , \"areaId\" : [], \"deviceId\" : [], \"entityId\" : [ \"alarm_control_panel.alarm\" ], \"data\" : \"{\\\"code\\\":\\\"1776\\\"}\" , \"dataType\" : \"jsonata\" , \"mergeContext\" : \"\" , \"mustacheAltTags\" : false , \"outputProperties\" : [], \"queue\" : \"none\" , \"x\" : 940 , \"y\" : 260 , \"wires\" : [ [ \"99cabcc7d52bfc9b\" ] ] }, { \"id\" : \"0bf633ce2d98dd79\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/upbath/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 150 , \"y\" : 680 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"e3bf26032c55a701\" , \"type\" : \"debug\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"debug 1\" , \"active\" : false , \"tosidebar\" : true , \"console\" : false , \"tostatus\" : false , \"complete\" : \"false\" , \"statusVal\" : \"\" , \"statusType\" : \"auto\" , \"x\" : 640 , \"y\" : 580 , \"wires\" : [] }, { \"id\" : \"9a8d3eea339efbdc\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/allys_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 140 , \"y\" : 740 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"7aac330a4bb67fe8\" , \"type\" : \"mqtt in\" , \"z\" : \"0b80aa53cbe8e6e2\" , \"name\" : \"\" , \"topic\" : \"hasp/victorias_room/state/p12b1\" , \"qos\" : \"0\" , \"datatype\" : \"utf8\" , \"broker\" : \"441d674c9c4a7f07\" , \"nl\" : false , \"rap\" : true , \"rh\" : 0 , \"inputs\" : 0 , \"x\" : 130 , \"y\" : 800 , \"wires\" : [ [ \"8ac3fdee648284fe\" ] ] }, { \"id\" : \"441d674c9c4a7f07\" , \"type\" : \"mqtt-broker\" , \"name\" : \"192.168.0.21\" , \"broker\" : \"192.168.0.21\" , \"port\" : \"1883\" , \"clientid\" : \"\" , \"autoConnect\" : true , \"usetls\" : false , \"protocolVersion\" : \"4\" , \"keepalive\" : \"60\" , \"cleansession\" : true , \"birthTopic\" : \"\" , \"birthQos\" : \"0\" , \"birthPayload\" : \"\" , \"birthMsg\" : {}, \"closeTopic\" : \"\" , \"closeQos\" : \"0\" , \"closePayload\" : \"\" , \"closeMsg\" : {}, \"willTopic\" : \"\" , \"willQos\" : \"0\" , \"willPayload\" : \"\" , \"willMsg\" : {}, \"sessionExpiry\" : \"\" }, { \"id\" : \"669eed80.4f9844\" , \"type\" : \"server\" , \"name\" : \"Home Assistant\" , \"version\" : 5 , \"addon\" : true , \"rejectUnauthorizedCerts\" : true , \"ha_boolean\" : \"y|yes|true|on|home|open\" , \"connectionDelay\" : false , \"cacheJson\" : false , \"heartbeat\" : false , \"heartbeatInterval\" : 30 , \"areaSelector\" : \"friendlyName\" , \"deviceSelector\" : \"friendlyName\" , \"entitySelector\" : \"friendlyName\" , \"statusSeparator\" : \"at: \" , \"statusYear\" : \"hidden\" , \"statusMonth\" : \"short\" , \"statusDay\" : \"numeric\" , \"statusHourCycle\" : \"h23\" , \"statusTimeFormat\" : \"h:m\" , \"enableGlobalContextStore\" : true } ]","title":"Node-RED"},{"location":"integrations/openhab/integration_openhab/","text":"openHAB Integration ~ Page Layout ~ We call plate any device running openHASP in your system. Installation ~ The openHAB configuration files to have this demo load automatically can be found here . Update the IP-address for your MQTT-broker in the haspLVGL_demo.things file. Make sure you have your plate connected to the network and to your MQTT boker, and your topic is set to demo_plate . Code ~ To add an openHASP plate to your installation with Jaffa Sunrise sample configuration, upload a pages.jsonl file with the folowing content to your plate: in the plate's web UI select Mono UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"obj\" : \"btn\" , \"id\" : 4 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights On\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE6E8\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 5 , \"x\" : 5 , \"y\" : 68 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Daylight\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE599\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 6 , \"x\" : 5 , \"y\" : 131 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Night\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE594\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 7 , \"x\" : 5 , \"y\" : 194 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights Off\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE335\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"obj\" : \"label\" , \"id\" : 8 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Kitchen Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 9 , \"x\" : 5 , \"y\" : 80 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Dining Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 10 , \"x\" : 5 , \"y\" : 165 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Front Blinds\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"slider\" , \"id\" : 11 , \"x\" : 20 , \"y\" : 40 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 80 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 12 , \"x\" : 20 , \"y\" : 120 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 13 , \"x\" : 20 , \"y\" : 205 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 25 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"page\" : 3 , \"comment\" : \"---------- Page 3 ----------\" } { \"obj\" : \"label\" , \"id\" : 14 , \"x\" : 42 , \"y\" : 10 , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Gold\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 15 , \"x\" : 42 , \"y\" : 60 , \"mode\" : \"scroll\" , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Chet Faker\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 16 , \"x\" : 2 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AE\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 17 , \"x\" : 82 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE3E4\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 18 , \"x\" : 162 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AD\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"bar\" , \"id\" : 19 , \"x\" : 2 , \"y\" : 105 , \"w\" : 236 , \"h\" : 20 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 15 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" } { \"obj\" : \"slider\" , \"id\" : 20 , \"x\" : 35 , \"y\" : 220 , \"w\" : 170 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 30 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"label\" , \"id\" : 21 , \"x\" : 2 , \"y\" : 10 , \"w\" : 40 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75A\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 22 , \"x\" : 2 , \"y\" : 60 , \"w\" : 36 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE004\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 23 , \"x\" : 5 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75F\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 24 , \"x\" : 210 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE57E\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"obj\" : \"btn\" , \"id\" : 1 , \"x\" : 5 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE04D\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 2 , \"x\" : 83 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 3 , \"x\" : 161 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE054\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } Restart the plate and the demo page should load automatically to your device.","title":"openHAB Integration"},{"location":"integrations/openhab/integration_openhab/#openhab-integration","text":"","title":"openHAB Integration"},{"location":"integrations/openhab/integration_openhab/#page-layout","text":"We call plate any device running openHASP in your system.","title":"Page Layout"},{"location":"integrations/openhab/integration_openhab/#installation","text":"The openHAB configuration files to have this demo load automatically can be found here . Update the IP-address for your MQTT-broker in the haspLVGL_demo.things file. Make sure you have your plate connected to the network and to your MQTT boker, and your topic is set to demo_plate .","title":"Installation"},{"location":"integrations/openhab/integration_openhab/#code","text":"To add an openHASP plate to your installation with Jaffa Sunrise sample configuration, upload a pages.jsonl file with the folowing content to your plate: in the plate's web UI select Mono UI theme and reboot, upload a pages.jsonl file with the folowing content to your plate and reboot: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 { \"page\" : 1 , \"comment\" : \"---------- Page 1 ----------\" } { \"obj\" : \"btn\" , \"id\" : 4 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights On\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE6E8\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 5 , \"x\" : 5 , \"y\" : 68 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Daylight\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE599\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 6 , \"x\" : 5 , \"y\" : 131 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Night\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE594\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 7 , \"x\" : 5 , \"y\" : 194 , \"w\" : 230 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius01\" : 10 , \"radius02\" : 10 , \"text\" : \"Lights Off\" , \"value_ofs_x\" : -85 , \"value_font\" : 32 , \"value_str\" : \"\\uE335\" , \"value_color\" : \"#B6B6B6\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"page\" : 2 , \"comment\" : \"---------- Page 2 ----------\" } { \"obj\" : \"label\" , \"id\" : 8 , \"x\" : 5 , \"y\" : 5 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Kitchen Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 9 , \"x\" : 5 , \"y\" : 80 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Dining Dimmer\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 10 , \"x\" : 5 , \"y\" : 165 , \"w\" : 230 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"text\" : \"Front Blinds\" , \"text_color\" : \"#B6B6B6\" , \"text_font\" : 24 } { \"obj\" : \"slider\" , \"id\" : 11 , \"x\" : 20 , \"y\" : 40 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 80 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 12 , \"x\" : 20 , \"y\" : 120 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"slider\" , \"id\" : 13 , \"x\" : 20 , \"y\" : 205 , \"w\" : 200 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 25 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"page\" : 3 , \"comment\" : \"---------- Page 3 ----------\" } { \"obj\" : \"label\" , \"id\" : 14 , \"x\" : 42 , \"y\" : 10 , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Gold\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 15 , \"x\" : 42 , \"y\" : 60 , \"mode\" : \"scroll\" , \"w\" : 236 , \"h\" : 30 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"Chet Faker\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"btn\" , \"id\" : 16 , \"x\" : 2 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AE\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 17 , \"x\" : 82 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE3E4\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 18 , \"x\" : 162 , \"y\" : 140 , \"w\" : 76 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#FFAC00\" , \"border_width\" : 2 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE4AD\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 32 } { \"obj\" : \"bar\" , \"id\" : 19 , \"x\" : 2 , \"y\" : 105 , \"w\" : 236 , \"h\" : 20 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 15 , \"text_font\" : 1 , \"val\" : 65 , \"bg_color10\" : \"#FFAC00\" } { \"obj\" : \"slider\" , \"id\" : 20 , \"x\" : 35 , \"y\" : 220 , \"w\" : 170 , \"h\" : 30 , \"bg_color\" : \"#C7BAA7\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 15 , \"radius10\" : 15 , \"radius20\" : 20 , \"text_font\" : 1 , \"val\" : 30 , \"bg_color10\" : \"#FFAC00\" , \"bg_color20\" : \"#DC5C05\" } { \"obj\" : \"label\" , \"id\" : 21 , \"x\" : 2 , \"y\" : 10 , \"w\" : 40 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75A\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 22 , \"x\" : 2 , \"y\" : 60 , \"w\" : 36 , \"h\" : 61 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE004\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 23 , \"x\" : 5 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE75F\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"obj\" : \"label\" , \"id\" : 24 , \"x\" : 210 , \"y\" : 224 , \"w\" : 25 , \"h\" : 40 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"text\" : \"\\uE57E\" , \"text_color\" : \"#C7BAA7\" , \"text_font\" : 24 } { \"page\" : 0 , \"comment\" : \"---------- All pages ----------\" } { \"obj\" : \"btn\" , \"id\" : 1 , \"x\" : 5 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE04D\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 2 , \"x\" : 83 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE2DC\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } { \"obj\" : \"btn\" , \"id\" : 3 , \"x\" : 161 , \"y\" : 257 , \"w\" : 73 , \"h\" : 58 , \"bg_color\" : \"#000000\" , \"border_color\" : \"#C7BAA7\" , \"border_width\" : 0 , \"radius\" : 10 , \"radius10\" : 10 , \"radius20\" : 10 , \"text\" : \"\\uE054\" , \"text_color\" : \"#978B7D\" , \"text_font\" : 32 } Restart the plate and the demo page should load automatically to your device.","title":"Code"}]}
\ No newline at end of file
diff --git a/0.7.0/sitemap.xml.gz b/0.7.0/sitemap.xml.gz
index 3eddc0b58..705145c5a 100644
Binary files a/0.7.0/sitemap.xml.gz and b/0.7.0/sitemap.xml.gz differ