Editing Home Assistant (section)

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