openHASP: An MQTT driven Touchscreen / Scene controller

@fvanroie hate to ask, but people keep telling me that esphome (via some custom component I think) has a more up to date lvgl version.

What is the future of lvgl versioning in openhasp?

I love esphome, and I love openhasp. Can you give me some info on where the project is going?

Happy to talk on DM or chat if it’s easier.

It is on my todo list to study how ESPhome compares to openHASP…
you say you love both… so they are complementary but there is also an overlap?

These comments are my own, and drafted late at night.

Esphome didn’t historically have any graphics capability. It does now.

LVGL is the standard for esp32 graphics. Esphome doesn’t officially support LVGL. There is a custom component.

Openhasp is based on LVGL. Its current version is behind on LVGL versions compared to the esphome custom component.

Openhasp has limited support for arbitrary hardware peripherals, whereas they are esphome’s bread and butter. You can add them to openhasp, but it requires some c++ programming.

I feel that esphome has far more support behind it. It has Nabu Casa and a team behind it.

Openhasp is a great project with a very communicative developer. However I suspect he is largely on his own or has a couple of helpers. I may be doing him a disservice. I really like it and I want it to thrive.

Openhasp is more of a control panel or scene controller with a bit of peripheral hardware support. Esphome is hardware support with display/controller support thrown on top.

I think you have just answered your question then. Use whatever fits your purpose…
Why does the version of LVGL matter that much?

Please don’t turn this thread into an ESPhome/openHASP flame war, you can open a separate thread for that.

Not intending a flame war at all, my last post was an attempt to compare, certainly not to flame either system.

Frankly I don’t know what is the importance of the latest versioning of lvgl, except that I am told charts exist, or exist better, on latest versions. I am reacting to what other people have said.

Anyway, as you know I am a big fan. Openhasp does everything I want for the moment.

I am setting up my first dashboard using openhasp and am having a bit of trouble getting through the documentation. Is there any way I can change the them or set up an object I can ‘inherit’ from, so I don’t have to setup the color, size, etc. for each button in my case?

For instance, i have this current button, but I want to make many of them and they require quite a lot of code and I am not entirely confident of my color scheme yet, so I’d like to stay flexible.:

{"id":0,"bg_color":"#000"}

{"page":1,"comment":"---------- Test Page ----------"}
{"id": 11, "obj": "btn", "x": 10, "y": 40, "w": 150, "h": 110, "radius": 15, "border_side": 15, "border_color": "#3D505C",  "value_ofs_x": 0, "value_ofs_y": -10, "value_font": "fabrands60", "value_str": "\uf167", "bg_color40":"#29353D", "value_color":"#38A5DC"}
{"id": 12, "obj": "label", "x": 45, "y": 111, "w": 80, "h": 80, "text_color": "#FAFAFA", "text_font": 24, "click": 0, "text": "Youtube"}

No, it is not possible to clone, theme or inherit styles… sorry.

Allow me to mention that this is one of the things I try to solve by controlling openHASP via Python iso yaml/json.

First there is the mechanism where a style is assigned to a design. One can use a provided style or one can define their own. Looking at the hallo_world example, it includes an (predefined) style (see code) and assigns that to the design without any modifications (see code). After that, all objects created in the design will use the parameters provided by the style, but individual object can override that if needed. An example of a style definition looks like this

PAL_LIGHTGRAY = "#EBE4D1"
PAL_BLUE = "#26577C"
PAL_OCHER = "#E55604"
PAL_LIGHTBLUE = "#647D87"

style = (  {"page.gb_color":        PAL_LIGHTGRAY,
            "text.font":            32, 
            "text.color":           PAL_OCHER,
            "text.align":           "center",
            "text.on.color":        "Gold",
            "text.off.color":       "Linen",
            
            "btn.text_color":       PAL_BLUE,
            "btn.font":             32,
            "btn.bg_color":         PAL_LIGHTGRAY,
            "btn.radius":           20,
            "btn.align":            "center",
            "btn.border_color":     PAL_LIGHTBLUE,
            "btn.border_width":     2,
            "btn.on.bg_color":      PAL_OCHER,
            "btn.off.bg_color":     PAL_LIGHTGRAY,
            "btn.unavailable.bg_color": "Red",
            "btn.icon.font":        32,
            "btn.shadow":           ("Black", 50, 15, (8,8)),

            "switch.border_color":  PAL_LIGHTBLUE,
            "switch.off.bg_color":  PAL_LIGHTGRAY,
            "switch.on.bg_color":   PAL_OCHER,
            "switch.knob_color":    PAL_BLUE,
            "switch.shadow":        ("Black", 50, 15, (8,8)),

            "slider.border_color":  PAL_LIGHTBLUE,
            "slider.off.bg_color":  PAL_LIGHTGRAY,
            "slider.on.bg_color":   PAL_OCHER,
            "slider.knob_color":    PAL_BLUE,
            "slider.radius":        20,
            "slider.shadow":        ("Black", 50, 15, (8,8)),
            
            "nav.text_color":       PAL_BLUE,
            "nav.bg_color":         PAL_LIGHTGRAY,
            "nav.active.text_color": PAL_LIGHTGRAY,
            "nav.active.bg_color":  PAL_BLUE,
            "nav.font":             32,
            
            "line.color":          "Linen",
            "line.width":          10,
            "clock.color":         PAL_OCHER,
            })

In addition, inheritance at Python level allows to inherit and/or alter layout and behavior aspects of objects by making your own versions. Suppose one needs some buttons that ask for confirmation before changing state, one could make its own version deriving from the standard Button to have that behavior.

Of course, this approach requires one is a bit familiar with Python.

2 Likes

Thanks, I’m very comfortable programming in Python, so that shouldn’t be an issue. It is a bit of a workaround, but this seems to be the most effective way for me, thanks!

I also didn’t know about HACS pyscript yet, so you’ve opened a world for me I did not yet know I wanted :smiley:

Yes, pyscript is great. Going a bit off-topic here, I use it for all my automations now, so much easier, readable, maintainable than yaml/jinja imho. The only thing that is a bit annoying is that super() does not work, so one needs to work around that.

Have you tried the support for Jupyter? hass-pyscript-jupyter/README.md at master · craigbarratt/hass-pyscript-jupyter · GitHub It helps a lot with experimenting, prototyping and debugging in pyscript

When is it appropriate to start a new thread?

I am trying to learn OpenHASP by experimenting with examples. I would appreciate any critique of my configuration for a dropdown.

In pages.jsonl:

{"page":2,"id":1,"obj":"dropdown","x":10,"y":150,"w":200,"h":60,"options":"Office\nDesklight\nWorklight"}

In configuration:

    - obj: "p2b1" # dropdown
      event:
        "changed":
          - service: homeassistant.toggle
            data:
              entity_id: >
                {% if text == "Office" %}
                  switch.officelight
                {% elif text == "Desklight" %}
                  switch.steve_desklight_relay_2
                {% elif text == "Worklight" %}
                  switch.kim_worklight_relay
                {% endif %}

When I press the “Office” button, MQTT Explorer reports:

hasp/plate/state/p2b1
{"event":"changed","val":0,"text":"Office"}

It isn’t perfect. For example, if I toggle “Office” on, the light turns on. but if I press “Office” again, it doesn’t toggle because nothing changed. Can anyone see a solution or should I make separate Office Light ON and Office Light OFF buttons?

Can I get the current page number, maybe as an attribute ?

It’s a number entity in home assistant.

Would it be an option to have some kind of “unselected” entry in the dropdown and switch to that in the automation after a selection was made? This would force to reselect each time.
I was also wondering (but I have very limited experience with yaml (as I don’t like it)), could you capture the mqtt message in an automation and act on that. But this would be very hacky / unmaintainable / ugly…

I think ‘text’ should be something like ‘p2b1.text’

Scratch that.

try target: instead of data:

Edit again

If i create an automation to toggle a light in the ui, it has this yaml

service: homeassistant.toggle
data: {}
target:
  entity_id: light.dining_table_lights

That would work except that if I press on the same button multiple times, only the first button press is published. So there isn’t anything to trigger an automation.

This is NOT a show-stopper, but rather experiments around learning openHasp.

Still learning. Thanks

Hi

I am using a Guition ESP32-S3-4848S040 with the rc12 version.
It is all working but i get ghostinputs.
Sometimes buttons on the screen are touched without anyome in the near.

Is anything known about this bug?
Perhabs a bug ofcthe Hardware?

Most likely, but you can post your findings in this issue. It is kind of suspect that only the ESP32-S3-4848S040 has these issues.