Editing Home Assistant (section)

=Integrations=
==Life360==
First, none of this would be possible without the generous work and support by Phil Brukner <br>

[[File:phil.jpg]]<br clear=all>

Thank you, Phil.
----
The most difficult part of the new installation method was discovering my access_token and token_type. <br>
I am HTML-challenged, so after some assistance from Phil, here is how I found the access_token and token_type.<br>

This is done on the Chrome browser.  I couldn't figure it out using Edge. <br>

1. Open Chrome <br>
2. Click on the meatball menu to enable the Developer Tools option. <br>
[[File:Meatball.jpg]]<br clear=all>
<br>
[[File:Developer Tools.jpg]]<br clear=all>
<br>
3. Go to [https://life360.com/login| https://life360.com/login.] <br>
4. Open the browser's Developer Tools sidebar then go to the Network tab. <br>
[[File:Network Tab.jpg]]<br clear=all>
5. Make sure recording is enabled. (CTRL-R)<br>
6. Log into your Life360 account.<br>
7. When the login process has been completed, look for the "token" packet.<br>
Hint- enter "token" into the filter field.<br>
[[File:Find the token.jpg]]<br clear=all>
8. Click on token.json to reveal the access_token and token_type.<br>
[[File:token revealed2.jpg]]<br clear=all>
:Copy those values into the corresponding boxes (access_token and access_type) on the HA account page. (Note that the token_type is almost certainly "Bearer".) You can put whatever you want in the "Account identifier" box.<br>

(If this doesn't reveal your token and type, look for another "token" packet which uses the POST or BEARER method, and has data.)<br>

{{template:top}}
==openHASP==
;What follows are my notes from experimenting with OpenHASP on a 480x480 screen.

OpenHasp is a customizable touchscreen UI, connected via MQTT.<br>

===Links===
[https://openhasp.haswitchplate.com/0.7.0/ Openhasp Web Page]<br>
[https://community.home-assistant.io/t/openhasp-an-mqtt-driven-touchscreen-scene-controller/300853 Home Assistant community]<br>
[https://discord.com/channels/469330414121517056/518861032433909769 HASPOne and OpenHasp Discord Page]<br>

{{template:top}}
===Guition ESP32-S3-4848S040===
;ESP32-S3 - 4848S040 - 480*480 IPS touchscreen<br>

[[File:ESP32-S3 4.0 Inch Development Board (AliExpress).jpg]]<br clear=all>
[https://www.aliexpress.us/item/3256806162214806.html?spm=a2g0o.order_list.order_list_main.5.21ef18021tiWR2&gatewayAdapt=glo2usa ESP32-S3 4.0 Inch Development Board (AliExpress)]<br>
Planning and setup - ESP32-S3 - 4848S040 - 480*480 IPS touchscreen. [https://community.home-assistant.io/t/planning-and-setup-esp32-s3-4848s040-480-480-ips-touchscreen/715781 (Forum link)]<br>

{{template:top}}
====First Power-on, factory configuration====
[[File:ESP32-S3-4.0-Inch-Development-Board--First-turn-on-(480px).jpg]]<br clear=all>

To connect to WiFi, 
# Press the "Refresh" button to scan available APs <br>
# Press the down-arrow to select the AP <br>
# Enter the password <br>
# Press the check-mark on the keyboard area.

{{template:top}}
====Install Firmware====
[https://community.home-assistant.io/t/planning-and-setup-esp32-s3-4848s040-480-480-ips-touchscreen/715781/2 Forum reference]<br>

;Connect the display with your computer
*Flash the Firmware: Use Chrome Browser while you on the [https://nightly.openhasp.com/ Nightly Build] Site. Select “Guition ESP32-S3-4848S040” and Install.
*Setting Up Wifi: Follow Instructions on the screen
*Install HomeAssistant Components
*Install The [https://github.com/HASwitchPlate/openHASP-custom-component OpenHASP Component] from within HACS

Make sure your Display is running and reachable (Default setup shows with text “plate” on the top left corner of the screen and a popup with the actual IP-Address).<br>

*MQTT Credentials: Got to the device IP-Address with your browser: <b>http://your_ip/config/mqtt</b> and fill in your MQTT credentials.<br>
*Delete any pre-defined pages: Got to the device IP-Address your with browser: <b>http://your_ip/edit</b> and delete the pages.jsonl file
*Configure the GPIO: Go to the device IP-Address with your browser: <b>http://your_ip/config/gpio</b> and add:
:GPIO Output
:PIN: 40
:TYPE: Power Relay
:Groupe: None
:Value: Normal<br>

*Set Up your display within Homeassistant. Detailed information [https://www.openhasp.com/0.7.0/integrations/home-assistant/howto/#configuration here].

;Define the plates (pages) in configuration.yaml:<br>
 <nowiki>plate:
  objects:
    - obj: "p0b1"
      properties:
        "text": '{{ 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> 

We’ll edit the files later on.<br>
;If everything works as expected the display will be auto-discovered by OpenHASP-Component

----
*Add an empty Automation and notice the entity_id of it (((why?)))<br>

*Add a HA-Template sensor in configuration.yaml and edit to your needs (May use http://gridcalculator.dk/ 27 to calculate col and gutter values).<br>
 <nowiki>template:
  - binary_sensor:
    - name: Display settings
      unique_id: 1b3a3dae-fd0c-4f47-9c8b-5b680478a977 # https://www.uuidgenerator.net/
      state: "{{ now() - state_attr(this.attributes.update_automation | default('automation.update_display_data'), 'last_triggered') > timedelta(seconds=this.attributes.update_time | default(120) |int ) }}" # change the default automation entity_id from step 3 before
      delay_on:
        seconds: 2
      attributes:
        update_automation: "automation.update_display_data" # add a the automation entity_id from step 3 before
        update_time: "80" # sending the config via mqtt needs some time to complete. This stops the automation from re.run before sending config is finished
        display_w: "480"
        display_h: "480"
        grid_cols: "12" # increase for more resolution of object
        grid_rows: "12" # increase for more resolution of object
        grid_gutter: "8" # This looked nice for me
        grid_margin: "4" # This looked nice for me
        bg_color: "#000000"  #Black
        primary_color: "#4193d5" #Moderate Blue
        secondary_color: "#ee9f52"  #Soft orange
        accent_color: "#A175C4" #Slightly desaturated violet
        success_color: "#6cbe58" #Moderate lime green
        warning_color: "#d67430" #Strong orange
        error_color: "#e25628" #Bright red
        radius: "4"</nowiki>

You should now have a working display which is integrated in Home Assistant and communicates via MQTT as well as a New Template Sensor with the given attributes<br>


{{template:top}}

===Configuration===
====FTP====
Login name: sssss<br>
Password: nnnnnn<br>

My experiments using the FTP program FileZilla were not impressive. File transfers mostly timed out.
{{template:top}}

====Reloading the configuration====
After you make changes to the configuration of the plate you can apply them by either<br>
# Restarting Home Assistant<br>
# By reloading the integration from Lovelace user interface with option found in<br>
:Configuration > Devices & Services > openHASP > (your plate >) 3dots menu > Reload.<br>
:Note that this has to be done individually for each configured plate.

You can achieve the same with a service call:

 <nowiki>service: homeassistant.reload_config_entry
data:
  entry_id: 903d2d976d6f2654092c513138d2b365
target:
  entity_id: openhasp.plate</nowiki>
  
  
The entry_id is found in the .storage/core.config_entries file from your main Home Assistant configuration directory <b>(do NOT edit this file!)</b>.


{{template:top}}

===<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}}