Editing Home Assistant (section)

===<h3>Page Design</h3>===
[https://openhasp.haswitchplate.com/0.7.0/design/file-editor/ File Editor (OpenHASP Documentation)]<br>

====<h3>pages.jasonl</h3>====
[https://openhasp.haswitchplate.com/0.7.0/design/pages/ Pages documents]<br>
Each page is defined in <i>pages.jasonl</i>. This is where the object location, type and properties are defined.<br>

=====<h2>Examples:</h2><br>=====
Collapsed. Click on "Expand" to view.
 <div class="mw-collapsible mw-collapsed">
 <nowiki>{"page":1,"id":1,"obj":"btn","x":0,"y":0,"w":240,"h":40,"text":"openHASP","value_font":22,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}</nowiki><br>

This defines Page 1, Object 1, the object is a button located at (x,y) 0,0, 240 pixels wide and 40 pixels high.<Br>
The text is "openHasp" using the value_font, 22 point.<br>
The background color is dark blue, text color is white.<br>
"radius":0 means the object has square corners. 100 makes a pill-shaped object.<br>

----
 <nowiki>{"page":1,"id":2,"obj":"btn","x":10,"y":50,"w":105,"h":90,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1}</nowiki><br>

This defines Page 1, Object 2, the object is a button located at (x,y) 10,50, 105 pixels wide and 90 pixels high.<Br>
"Toggle":true means that the button is a toggle. It maintains its state between presses.<br>
"text":"\uE335" displays a light icon. (See the link above)<br>
"text_font":32 sets the font and text size. Valid sizes are: 8(default), 16, 24, 32 and 48pt (and the 8pt default font).<br>
"mode":"break" acts like a line break. This means that the next object will be placed at the beginning of the next line.<br>
"align":1 sets the alignment of the text within this label. (0,1,or 2 = Left, Center, or Right)

----
 <nowiki>{"page":1,"id":3,"obj":"dropdown","x":10,"y":150,"w":200,"h":60,"options":"Apples\nBananas\nOranges\nMelon"}</nowiki><br>
This defines Page 1, Object 3, the object is a dropdown located at (x,y) 10,150, 200 pixels wide and 60 pixels high.<Br>
"options" lists the items in the dropdown.<br>

----
 <nowiki>{"page":0,"id":1,"obj":"label","x":175,"y":60,"h":50,"w":120,"text":"XX.X°C","align":2,"bg_color":"#2C3E50","text_color":"#FFFFFF"}</nowiki>
This defines Page 0, Object 1.  Page 0 refers to an object visible on all pages.<br>
The object is a label located at (x,y) 175,60, 120 pixels wide and 50 pixels high.<Br>
The initial text of the label is "XX.X°C". The object color is white text on dark blue.
</div>

----
[https://www.openhasp.com/0.7.0/design/objects/ objects]- Every object can be set pixel perfect. This means you have to define every Width/Height x-and y-position.<br>

{{template:top}}
=====<h2>Fonts and Icons</h2>=====
[https://openhasp.haswitchplate.com/0.7.0/design/fonts/ Fonts and Icons]<br>

In OpenHASP, you can use any TrueType font containing characters or icons. Here are the steps to upload and use icons:<br>

1. <b>Upload the Icon Font</b>: Upload any TTF (TrueType) font file containing the icons 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.<br>
2. <b>Use the Icon in Text</b>: To use an icon in a text, you need to prefix the UTF-8 character code with `u`. To ensure proper decoding the payload should be used with a `json` or `jsonl` command.<br>
3. <b>Upload FontAwesome Icons</b>: If you want to use FontAwesome icons, upload another .zi file named `fontawesome xx .zi` of the same point size as the normal text .zi font. For example, if your custom font is `arial24.zi`, you should also add a `fontawesome24.zi` file. You can download `fontawesome.zip` from the HMI Font Pack repository.<br>


In pages.jasonl, there is a button configured:<br>
 <nowiki>====Foreground and Background colors====
[https://openhasp.haswitchplate.com/0.7.0/design/styling/#built-in Styling Properties]: Adjust the appearance of objects by changing the foreground, background and/or border color of each object.</nowiki> <br>

====Data Types====
:Some objects allow for more complex styling, effectively changing the appearance of their sub-components.<br>
[https://openhasp.haswitchplate.com/0.7.0/design/data-types/ Data Types]: There are 5 major data types that openHASP uses when communicating over MQTT.

====Examples====
[https://openhasp.haswitchplate.com/0.7.0/examples/pagination/ Page Navigation]<br>
[https://openhasp.haswitchplate.com/0.7.0/examples/widgets/ Widget Examples]<br>
[https://openhasp.haswitchplate.com/0.7.0/examples/lovelace/ Lovelace Entities]<br>
[https://openhasp.haswitchplate.com/0.7.0/examples/dashui/ Dash UI]<br>
[https://openhasp.haswitchplate.com/0.7.0/examples/fan/ Animated icons]<br>
[https://openhasp.haswitchplate.com/0.7.0/examples/offlinehandling/ Handle offline entities]<br>

{{template:top}}

====Forum Notes====
[https://community.home-assistant.io/t/planning-and-setup-esp32-s3-4848s040-480-480-ips-touchscreen/715781/31 Push Image], Image background<br>

{{template:top}}

====Tips====
=====Colors=====
[https://www.colorhexa.com/ ColorHexa.com] is a free color tool providing information about any color and generating matching color palettes<br>
[https://www.code2color.com/ Code2Color]- inline Color Preview for Code. Input any code or text and see your HEX, RGB, ... colors appear.<br>

======Color Palette======
Note: color names in "quotes" are not recignized by openHasp. Use the hex value instead.
{{template:colorpallette}}

{{template:top}}

=====GPIO=====
On my switch, the power relay (L1) is on GPIO40:<br>
Other models have a relay on GPIO02 (L2) and GPIO01 (L3).<br>

In settings -> GPIO, assign the GPIO pin to a group number:<br>

Here is a <i>pages.jsonl</i> line that defines a switch connected to <i>"groupid":1</i>.
 {"page":2,"id":5,"obj":"switch","x":30,"y":150,"w":180,"h":75,"radius":40,"radius20":40,"groupid":1,"comment":"Relay"}

Note that both reference "Group 1".  This means that the switch on the display can control the GPIO pin directly.<br>

{{template:top}}

=====img=====
;Examples.
This example displays a 240x240 pixels image in the center of a 480x480 screen:
 {"page":4,"id":1,"obj":"img","src":"L:/steph-kim-240x240.png","auto_size":1,"x":120,"y":120}

[[File:steph-kim-screenshot.jpg|320px]]<br clear=all>
In this example, auto_size is set to 1 (true).  The size of the image object will automatically match the size of the source image.<br>
The w and h parameters (width and height) will be ignored.<br>
If auto_size is set to 0 (false), the image will not automatically resize to match the source image and the w and h parameters set the image size.<br>
In this example, the h and w parameters are set to 150.  Notice that the image itself is not resized- only the displayed window.:<br>
 "page":4,"id":1,"obj":"img","src":"L:/steph-kim-240x240.png","auto_size":0,"h":150,"w":150,"x":120,"y":120}
[[File:steph-kim-screenshot-150x150.jpg|320px]]<br clear=all>

This does let you crop the image a bit. Consider when I change "x":200<br>
[[File:steph-kim-screenshot-200x150.jpg|320px]]<br clear=all>


{{template:top}}

====Text====
====="alignment":0=====
The align property sets the alignment of the text within an object. (Label, button, etc).
:0: Left alignment
:1: Right alignment
:2: Center alignment  

====="bg_color":"#2C3E50"=====
This property sets the color of the background of the object.
You may use any hex number for the color, or most of the named colors.<br>
Here is a [[Home_Assistant#Color_Palette|sample palette.]]<br>


{{template:top}}

====="bg_opa":0=====
bg_opa refers to the background opacity of an object. This property allows you to adjust the transparency of the background of an object. A higher value means the background is more opaque, while a lower value makes it more transparent. This can be useful for creating layered visual effects or for making certain elements stand out more than others

{{template:top}}
====="toggle":=====
The "toggle" property in openHASP controls whether a button acts as a toggle switch or a normal button.

When "toggle" is set to true "toggle":true), the button acts as a toggle switch. The button sends out the old value in the down event and the new value in the up event when released1. For example, when toggling on, it sends {"event":"down","val":0} followed by {"event":"up","val":1}1. When toggling off, it sends {"event":"down","val":1} followed by {"event":"up","val":0}1.

If "toggle" is set to false, the button acts as a normal button. Normal buttons send touch events while they occur. For example, a short touch sends {"event":"down"} followed by {"event":"up"}. A long press sends a sequence of events: {"event":"down"}, {"event":"long"}, multiple {"event":"hold"}, and finally {"event":"release"}.

{{template:top}}

=====data{}=====
These are functionally identical"

 <nowiki>#{"page":2,"id":1,"obj":"dropdown","x":10,"y":150,"w":200,"h":60,"options":"Office\nDesklight\nWorklight"}
    - obj: "p2b1" # dropdown
      event:
        "changed":
          - service: homeassistant.toggle
            data:
              entity_id: >
                {% if text == "Office" %}
                  switch.officelight
                {% elif text == "Desklight" %}
                  switch.steve_desklight_relay_2
                {% elif text == "Worklight" %}
                  switch.kim_worklight_relay
                {% endif %}</nowiki>
                
                
 <nowiki>#{"page":2,"id":1,"obj":"dropdown","x":10,"y":150,"w":200,"h":60,"options":"Office\nDesklight\nWorklight"}
    - obj: "p2b1" # dropdown
      event:
        "changed":
          - service: homeassistant.toggle
            data: {}
            target:
              entity_id: >
                {% if text == "Office" %}
                  switch.officelight
                {% elif text == "Desklight" %}
                  switch.steve_desklight_relay_2
                {% elif text == "Worklight" %}
                  switch.kim_worklight_relay
                {% endif %}</nowiki>

{{template:top}}

====<h2>openhasp.yaml</h2>====
This yaml file is called from configuration.yaml and it determines the actions of the objects defined in pages.jasonl.<br>

;Example:
 <nowiki>plate:
  objects:
    - obj: "p1b4"
      properties:
        "text": 'Attic: {{ states("sensor.attic_sensors_temperature") }}°F'
    - obj: "p1b2"  # light-switch toggle button
      properties:
        "val": '{{ 1 if states("switch.officelight") == "on" else 0 }}'
        "text": '{{ "\uE6E8" if is_state("switch.officelight", "on") else "\uE335" | e }}'
      event:
        "up":
          - service: homeassistant.toggle
            entity_id: "switch.officelight"</nowiki>

----
;Decoded:

 <nowiki> - obj: "p1b4"
      properties:
        "text": 'Attic: {{ states("sensor.attic_sensors_temperature") }}°F'</nowiki>

The label object at p1b4 is defined in pages.jsonl:
 <nowiki>{"page":1,"id":4,"obj":"label","x":175,"y":60,"h":50,"w":200,"text":"XX.X°C","align":0,"bg_color":"#2C3E50","text_color":"#FFFFFF"}</nowiki><br>
This assigns the entity value into the label.

----
 <nowiki> - obj: "p1b2"  # light-switch toggle button
      properties:
        "val": '{{ 1 if states("switch.officelight") == "on" else 0 }}'
        "text": '{{ "\uE6E8" if is_state("switch.officelight", "on") else "\uE335" | e }}'
      event:
        "up":
          - service: homeassistant.toggle
            entity_id: "switch.officelight"</nowiki><br>

The button object at p1b2 is defined in pages,jsonl:
 <nowiki>{"page":1,"id":2,"obj":"btn","x":10,"y":50,"w":105,"h":90,"toggle":true,"text":"\uE335","text_font":48,"mode":"break","align":1}</nowiki><br>
<b>"val"</b> is either 1 or 0 depending on the state of the entity.<br>
<b>"text"</b> is one of two icons depending on the state of the entity.<br>
<b>event:</b> is what the panel publishes over MQTT: "hasp/plate/state/p1b2"<br>
:In this example, if the event is "up", then a service is called to toggle the light.<br>

{{template:top}}