Home Assistant with Openhasp and cheap display using LGVL.

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.

objTypeDescriptionExtra Parts
btnBinaryButton
switchToggleSwitchindicator, knob
checkboxToggleCheckboxindicator
labelVisualLabel
ledVisualLED
spinnerVisualSpinnerindicator
objVisualBase Object
lineVisualLine
imgVisualImage
cpickerSelectorColor pickerknob
rollerSelectorRollerselected
dropdownSelectorDropdown Listselected, items, scrollbar
btnmatrixSelectorButton Matrixitems
msgboxSelectorMessageboxitems, items_bg
tabviewSelectorTabviewitems, items_bg, indicator, selected
tabSelectorTab
barRangeProgress Barindicator
sliderRangeSliderindicator, knob
arcRangeArcindicator, knob
linemeterRangeLine Meter
gaugeRangeGaugeindicator, ticks
qrcodeVisualQrcode
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *