Last Updated or created 2025-01-30

I bought a cheap esp32 display (4 inch 480×480) from China.

It also has three relays to control lights.

Below is a gallery with default screens.

Flashing OpenHasp was a breeze.
Configure the thing for HA was not so easy.

Install OpenHasp via Hacs on HA.

There is a webinterface on the display, here you have to configure wifi, mqtt and the pages.

Config files used for this first test:

{"page":1,"id":34,"obj":"img","src":"L:/pcb480x480.png","auto_size":0,"w":480}
{"page":1,"id":1,"obj":"btn","x":0,"y":0,"w":480,"h":50,"text":"IOTDesigns","value_font":22,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":1,"id":2,"obj":"btn","x":10,"y":60,"w":105,"h":90,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1}
{"page":1,"id":3,"obj":"dropdown","x":10,"y":160,"w":170,"h":60,"options":"Option 1\nOption 2\nOption 3\nOption 4"}
{"page":0,"id":1,"obj":"label","x":375,"y":45,"h":40,"w":100,"text":"00.0°C","align":2,"bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"page":1,"id":6,"obj":"slider","x":20,"y":300,"w":440,"h":40,"min":15,"max":85}

Designer at : https://haspdesigner.qrisonline.nl/

4inchdisplay2:
    objects:
      - obj: "p0b1"  # temperature label on all pages
        properties:
          "text": '{{ states("sensor.livingtemperature") }}°C'
      - obj: "p1b2"  # light-switch toggle button
        properties:
          "val": '{{ 1 if states("switch.livingshelly") == "on" else 0 }}'
          "text": '{{ "\uE6E8" if is_state("switch.livingshelly", "on") else "\uE335" | e }}'
        event:
          "up":
            - service: homeassistant.toggle
              entity_id: "switch.livingshelly"
      - obj: "p1b3"  # dropdown
        event:
          "changed":
            - service: persistent_notification.create
              data:
                message: I like {{ text }}
      - obj: "p1b6" # Light brightness
        properties:
          "val": "{{ state_attr('number.dinnertable_brightness_0', 'brightness') if state_attr('number.dinnertable_brightness_0', 'brightness') != None else 0 }}"
        event:
          "changed":
            - service: light.turn_on
              data:
                entity_id: number.dinnertable_brightness_0
                brightness:  "{{ val }}"
          "up":
            - service: light.turn_on
              data:
                entity_id: number.dinnertable_brightness_0
                brightness:  "{{ val }}"

NOTE: Dimmer is not working via HA (yet), but mqtt messages are working.

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
qrcode	Visual	Qrcode