
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 |













































