Planning and setup - ESP32-S3 - 4848S040 - 480*480 IPS touchscreen

no he didn’t, he installed it by mistake.

Back to absolute basics for questions about this unit.

Can someone post the back panel connections?

How is this thing powered? I don’t want to power this w mains voltage which is dangerous in the environment I’m looking at. DC 5v is my preference for safety.

Can I ditch one of the relays (in a 3 relay setup) and use it as an input for a DS18B20??? (Cut tracks etc)

Are the relays triggered by 5v?

Anyone run ESPhome on this yet? I don’t wanna rely on HA and would like this to run totally stand alone as a climate controller.

Line, neutral and 1 or 3 switched outputs.

Mains or USB-c

Yes there is another whole thread. GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display with LVGL - #169 by kroonen

Pretty sure there are other GPIOs available, but yes you could, the device is in two parts, the front panel which has the screen, the processor were, and a separate mains part with the relays. They are joined by a standard 8 pin connector.

I’ll take some photos tomorrow. In bed at present.

There are some photos here. Any chance we can it work for another esp32-s3 GT911 touch display (ESP32-4848S040) · Issue #603 · HASwitchPlate/openHASP · GitHub

Also I have just taken a pic, will post shortly.

The 8 way connector has 5v, gnd (2x), rx, tx and L1, L2 and L3 - the latter 3 driving the 3 relays when the boards are connected.

There are also in the front (screen) circuit has three headers, the white things around the edge. One is two pole, marked BAT, presumably battery.

One is two pole, labeled speak. One is four pole with gnd, 5v, rx and tx.

Here is the pic I just took

This thread is about completely different device. Please start a new thread, or ask in the more general openhasp topic. openHASP: An MQTT driven Touchscreen / Scene controller

Hi there,

I’m following the procedure to make my plate work. I succesfully did the first part with the openHasp exemple, but when I try to use the jinja template etc I don’t understand everything. (And the result isn’t there.)

My main question is : what is the plate.json script that you mention ? Where should I put it ? it’s not a jsonl file so it’s not in the plate, it’s not a pages.jsonl so it’s not the main config page of the plate either, nor it can be set as the default json file for the plate in the integration (I have an error whenn I try to add a json file in it)… So I’m quite lost…

Any help ?

Where is plate.json mentioned? I don’t see it anywhere in this thread.

configuration.yaml
Here is where you define your display.
In my configuration.yaml I have this line:

template: !include templates.yaml

And in my templates.yaml file I have this:

#---------- OpenHASP ----------#
- binary_sensor:
  - name: Display settings
    unique_id: ba031c34-xxxx-xxxx-xxxx-ebd44cb8750f # 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"
      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"
      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"

Gotta’ love !include files. Otherwise my configuration.yaml would be hundreds of lines.

openhasp.yaml
This is the interface between your “buttons” on OpenHasp and Home Assistant entities. This file goes into your Home Assistant configuration folder.
Here is an example:

# OpenHasp is a customizable touchscreen UI, connected via MQTT.
# Page number 0 refers to an object visible on all pages.
# An id of 0 refers to the page itself instead of an object.
#
plate:
  #####---------- Plate1-Page0 ----------#####
  objects:
    - obj: "p0b4"
      properties:
        "text": '{{ states("number.plate_page_number") }}'
    - obj: "p0b5"
      properties:
        "text": "{{ states('sensor.time') }}"
             
  ##### -------------------- Plate1-Page1 -------------------- #####   
    # RSSI Value
    - obj: "p1b5"
      properties:
        "text": '{{ states.openhasp.plate.attributes.rssi }}'

    # Light button
    - obj: "p1b2"  # light-switch toggle button
      properties:
        "val": '{{ 1 if states("light.officelight_light") == "on" else 0 }}'
        "text": '{{ "\uE6E8" if is_state("light.officelight_light", "on") else "\uE335" | e }}'
      event:
        "up":
          - service: homeassistant.toggle
            entity_id: "light.officelight_light"
            
    # Outside temperature            
    - obj: "p1b11"
      properties:
        "text": '{{ states("sensor.openweathermap_temperature") | round }}°'
        

    # Upstairs temperature            
    - obj: "p1b13"
      properties:
        "text": '{{ states("sensor.climate_upstairs_temperature") }}°'
            

    # Downstairs temperature            
    - obj: "p1b17"
      properties:
        "text": '{{ states("sensor.climate_downstairs_temperature") }}°'
            

    # Basement temperature            
    - obj: "p1b15"
      properties:
        "text": '{{ states("sensor.smart_hygrometer_020f_temperature") | round(0) }}°'
            

etc…

pages.jsonl
This is the file where you define the “buttons” on your screen. (Every object is a “button” defined like: "page":1,). "id":1,
In openhasp.yaml you would refer to this object as p1b1.
The pages.jsonl file gets uploaded to the panel through the File Editor:

There is probably already a pages.jsonl file there. You can optionally save it for future reference, but you just replace it with your pages.jsonl file.

Hi, thanks for the quick answer.

I was talking about the second post :

I’ll give a look at your files and try playing with it. Thanks for the explanations. At least it shows I have understood the way it’s meant to work.

I’ll let you know, TY

I’m still not finding the plate.json reference.

I did add my templates.yaml file to my post above.

Edit : Ok I made progress : to translate with more details for others :

  1. create the openHASP.yaml in your config folder (where configuration.yaml is)
  2. copy and paste the code above in it
  3. in the configuration.yaml : add the following line :
openhasp: !include openHASP.yaml
  1. reload yaml configuration in HA.
  2. in the openHASP file editor (in your plate), copy/paste the code to have buttons at the bottom (if you want to) :
{
  "comment":"-------------------- Navigation --------------------",
  "comment":" ----- Previous Page",
  "page":0,
  "id":1,
  "obj":"btn",
  "action":{"down": "page prev"},
  "x":150,
  "y":440,
  "w":49,
  "h":38,
  "bg_color":"blue",
  "text":"\uE141",
  "text_color":"#FFFFFF",
  "radius":0,
  "border_side":0,
  "text_font":24
}
{
  "comment":"----- Home Page",
  "page":0,
  "id":2,
  "obj":"btn",
  "action":{"down": "page back"},
  "x":200,
  "y":440,
  "w":80,
  "h":38,
  "bg_color":"blue",
  "text":"\uE2DC",
  "text_color":"#FFFFFF",
  "radius":0,
  "border_side":0,
  "text_font":24
}
{
  "comment":"----- Next Page",
  "page":0,
  "id":3,
  "obj":"btn",
  "action":{"down": "page next"},
  "x":281,
  "y":440,
  "w":49,
  "h":38,
  "bg_color":"blue",
  "text":"\uE142",
  "text_color":"#FFFFFF",
  "radius":0,
  "border_side":0,
  "text_font":24
}
{
  "comment":"----- Page Number",
  "page":0,
  "id":4,
  "obj":"label",
  "x":380,
  "y":440,
  "w":40,
  "h":38,
  "text":"00",
  "text_color":"#FFFFFF",
  "text_font":24
}

Then use the model to create the missing objects listed in the openHASP.yaml. For example :

{
  "comment":"----- Time",
  "page":0,
  "id":5,
  "obj":"label",
  "x":200,
  "y":30,
  "w":200,
  "h":50,
  "text":"00",
  "text_color":"#FFFFFF",
  "text_font":24
}

This is related to the following yaml code :

 - obj: "p0b5"
      properties:
        "text": "{{ states('sensor.date_time') }}"

I didn’t have the time/date entity configured in my HA ( a quick search give you the ability to create it easily.)
For the rest, tkae inspiration from the default buttons in the openHASP example on their website. Like for a button toggle switch :

{
  "comment":"----- bouton1",
  "page":1,
  "id":1,
  "obj":"btn",
  "x":30,
  "y":30,
  "w":100,
  "h":100,
  "toggle":true,
  "mode":"break",
  "align":1,
  "bg_color":"gray",
  "text":"\uE335",
  "text_color":"#FFFFFF",
  "radius":0,
  "border_side":0,
  "text_font":24
}

it’s the same thing as on a single line like in the openHASP example.

Here is where I am right now :

Is there templates of pages.jsonl files listed somewhere to ease the task ? (I bet on theopenHASP website, i’ll give a look…)

I doubt it. I also doubt that there any two pages.jsonl alike.

So, experiment with it. There are lots of example jsonl code in the OpenHasp site. Do it on Page1 or Page2- you already have the navigation buttons- and you can’t hurt anything.

Also, one frustration of writing the jsonl code is that there is no feedback when you make an error. Just- nothing works. I wrote an openhasp-preprocessor that tries to spot any errors in your pages code. It’s not well documented and it is my first ever python script, but it does make writing the jsonl code easier.

  • This Python script allows you to manage each page of an OpenHASP display in separate .src files.
  • The script also looks for possible errors that would prevent your page from loading into the panel.
  • Managing page files is enhanced with comments and variables substitutions.

Here is a list of errors that my preprocessor catches:

  1. Duplicate page:id values
  2. Duplicate pages.ini variable names
  3. Last line inside block does not have an even number of quotes
  4. Last line inside block ends with a comma
  5. Line inside block does not end with a comma
  6. Block does not have an even number of quotes
  7. Line is not inside a data block
  8. The source directory does not exist
  9. Unmatched closing brace (no opening brace)
  10. Unmatched opening brace (no closing brace)

There are two other utilities in the git: expand and compress.
Expand expands pages.jsonl lines that are all on one line (geek mode) into human readable. Compress goes the other way.

Check it out and let me know if it helps.
As I said, experiment.

1 Like

The GitHub discussion has a thread with people showing off what they have done. I’ve been meaning to do the mushroom style version.

Last post someone posted a link for changing resolutions if you want one plate on another size/resolution screen. Haven’t tried it though

1000007047

Yes, check my post above. Lots of examples in the GitHub discussion threads. Also. A utility to convert resolutions for different size screens but I haven’t tested it.

Could anyone here tell me what could be wrong?
I’ve been trying the last couple of hours to set up my test configuration for two buttons but no success.

Using following in <configuration.yaml>

  test:
    objects:
      - obj: "p1b1" # Button Button 2
        properties:
          "val": '{{ 1 if states("light.w1") == "on" else 0 }}'
          "text": '{{ "\uE6E8" if is_state("light.w1", "on") else "\uE335" | e }}'
        event:
          "up":
            - service: homeassistant.toggle
              entity_id: "light.w1"

      - obj: "p1b2" # Button Button 1
        event:
          hold:
            - service: homeassistant.toggle
              entity_id: "light.w1"

and following in <plate.jsonl>

{"page":0,"comment":"Page 0"}
{"id":1,"obj":"obj","x":0,"y":0,"w":240,"h":60,"enabled":false,"bg_color":"#aa47bc","bg_opa":128}
{"id":3,"obj":"obj","x":240,"y":0,"w":240,"h":60,"enabled":false,"bg_color":"#aa47bc","bg_opa":128}
{"id":8,"obj":"label","x":0,"y":0,"w":240,"h":60,"parentid":3,"align":"center","text":"00:00","template":"%H:%M"}
{"id":5,"obj":"btn","x":400,"y":420,"w":60,"h":40,"radius":20,"text":">","action":{"down":"page next"}}
{"id":6,"obj":"btn","x":20,"y":420,"w":60,"h":40,"radius":20,"text":"<","action":{"down":"page back"}}

{"page":1,"comment":"Page 1"}
{"id":1,"obj":"btn","x":280,"y":120,"w":120,"h":260,"radius":25,"text":"Button 2"}
{"id":2,"obj":"btn","x":80,"y":120,"w":120,"h":260,"radius":25,"text":"Button 1"}

which seems to work well enough on the plate:
image

But I simply can’t get the buttons to turn anything on or off in home assistant even though according to the OpenHASP the connection is there:

Anyone able to help me out?

Post your complete plate.jsonl file.
I see nothing wrong with the fragments you posted.

Also, you can use MQTT Explorer to see what the button presses are sending to Home Assistant. (it’s available as an add-on but I prefer the stand-alone version).

You can also telnet to the plate and get debugging info.

Firstly, thanks for the replies! Secondly I’ve corrected ID assignments of the buttons on page1 and copied the properties from one button to the other. Did not change a lot except for the expected but after around two reboots Button 1 seems to finally toggle the light and a long press on Button 2 seems to also toggle the same light for some reason.

That’s all of <pages.jsonl>

{"comment":"Designer Config","page_size":"large_square","plate_name":"openhasp"}

{"page":0,"comment":"Page 0"}
{"id":1,"obj":"obj","x":0,"y":0,"w":240,"h":60,"enabled":false,"bg_color":"#aa47bc","bg_opa":128}
{"id":3,"obj":"obj","x":240,"y":0,"w":240,"h":60,"enabled":false,"bg_color":"#aa47bc","bg_opa":128}
{"id":8,"obj":"label","x":0,"y":0,"w":240,"h":60,"parentid":3,"align":"center","text":"00:00","template":"%H:%M"}
{"id":5,"obj":"btn","x":400,"y":420,"w":60,"h":40,"radius":20,"text":">","action":{"down":"page next"}}
{"id":6,"obj":"btn","x":20,"y":420,"w":60,"h":40,"radius":20,"text":"<","action":{"down":"page back"}}
{"id":9,"obj":"btn","x":180,"y":420,"w":100,"h":40,"radius":20,"text":"reboot","action":{"up":"reboot"}}

{"page":1,"comment":"Page 1"}
{"id":1,"obj":"btn","x":80,"y":120,"w":120,"h":260,"radius":25,"text":"Button 1"}
{"id":2,"obj":"btn","x":280,"y":120,"w":120,"h":260,"radius":25,"text":"Button 2"}

And that’s the openhasp config in <configuration.yaml>

openhasp:
  test:
    objects:
      - obj: "p1b2" # Button Button 2
        properties:
          "val": '{{ 1 if states("light.w1") == "on" else 0 }}'
          "text": '{{ "\uE6E8" if is_state("light.w1", "on") else "\uE335" | e }}'
        event:
          "up":
            - service: homeassistant.toggle
              entity_id: "light.w1"

      - obj: "p1b1" # Button Button 1
        properties:
          "val": '{{ 1 if states("light.w2") == "on" else 0 }}'
          "text": '{{ "\uE6E8" if is_state("light.w2", "on") else "\uE335" | e }}'
        event:
          "up":
          hold:
            - service: homeassistant.toggle
              entity_id: "light.w2"

When you change pages.conf, you need to press “Reload” in the editor.

That much I know. Reloading only the configuration didn’t seem to work but restarting whole Home Assistant seemed to set it up correctly. Although still using the same configuration above, Button1 still toggles only on long press…