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 |