Clickable Labels?

[erwin]

First off, I must say openHASP is so amazing. Building custom lightswitches around the house on top of the lanbons that I learned to flash with openHASP, and then building the screens and connecting everything was such a fun project!

The way my openhasp screens are configured - the lovelace style, each label is quite big and the actual btn area is quite small.

Today I was experimenting with converting the first row of "labels" into btn buttons so I can assign down event... Converting a label to a button isn't actually so easy though... Padding, Spacing, Borders, Background Color and other properties will all require manual adjustment.

How would you recommend updating a design based on the "Lovelace-like entities" layout to allow clicking on both the labels and the buttons? Note my goal is to use the exact same action for the label and the button.

Maybe a transparent button that covers both of the labels?

https://openhasp.haswitchplate.com/0.6.2/integrations/examples/example-lovelace/#light-brightness-and-color

[nagyrobi]

Labels generate the same events as the other objects so you can trigger things the same way. Labels don't have a val property so you don't need to set that. You can adjust labels text property dynamically:

      - obj: "p1b6" # for a switch
        properties:
          "val": '{{ 1 if is_state("light.nappali_4x", "on") else 0 }}'
        event:
          "down":
            - service: homeassistant.toggle
              entity_id: "light.nappali_4x"

      - obj: "p1b5" # for a label
        event:
          "down":
            - service: homeassistant.toggle
              entity_id: "light.nappali_4x"

      - obj: "p1b7"  # for a label showing state
        properties:
          "text": >
            {% if not is_state('group.family', 'unavailable') -%}
            {% if is_state('group.family', 'home') %}
            At home
            {%-else %}
            Away
            {% endif %}
            {%-else %}
            Unknown
            {% endif %}

[fvanroie]

That works but also adds a lot of code duplication to HA.

I would suggest setting "ext_click_h":240,"ext_click_v":10 on the switch. It extends the clickable area around the switch to also cover the labels. Make sure the switch is created after the labels, or set "click":0 on the labels so they wont send any events.

@erwin Can you share the jsonl of that page?

[erwin]

Wow @fvanroie, that is such a fantastic solution!!! Works absolutely perfectly!

@erwin Can you share the jsonl of that page?

Of course!

For reference, the labels are:

书房 - Library (office): Toggle everything off/on
主灯 - Primary [ceiling] Light
显示器 - Computer Display and Speaker turn on via Smart Sockets
机箱 - RGB inside Computer Case via LiquidCtl and OpenRGB
空调 - Air Conditioner
青色 | 红色 | 彩虹 - Sync all LEDs in the room to Cyan, Red or Rainbow (WLED, OpenRGB, LiquidCtl)

Here's the related .jsonl

"----------- Page 5 - Office ------------",
{"page":  5, "id":   1, "x":  0, "y":  0,  "w":240,  "h": 50, "obj":"btn",    "text":"书房",  "bg_color":"#000000","text_color":"#FFFFFF","radius":0,"border_side":0,"text_font":"chinese_24", "align":"center", "toggle": true},
 
 
{"page":  5, "id":  20, "x":  8, "y": 55, "w":  35, "h": 35, "obj": "label",  "text":"\uE769",   "click":0, "align":1,"text_font":32},
{"page":  5, "id":  21, "x": 48, "y": 60, "w": 130, "h": 30, "obj": "label",  "text":"主灯",     "click":0, "align":0,"text_font":"chinese_24"},
{"page":  5, "id":  22, "x":177, "y": 60, "w":  50, "h": 25, "obj": "switch", "ext_click_h":240, "ext_click_v":10, "radius":25,"radius2":15},
 
{"page":  5, "id":  30, "x":  8, "y":100, "w":  35, "h": 35, "obj": "label", "text":"\uE502",   "click":0, "align":1,"text_font":32},
{"page":  5, "id":  31, "x": 48, "y":105, "w": 130, "h": 30, "obj": "label", "text":"显示器",   "click":0, "align":0,"text_font":"chinese_24"},
{"page":  5, "id":  32, "x":177, "y":105, "w":  50, "h": 25, "obj": "switch", "ext_click_h":240, "ext_click_v":10, "radius":25,"radius2":15},
 
{"page":  5, "id":  40, "x":  8, "y":145, "w":  35, "h": 35, "obj": "label", "text":"\uEF5F",   "click":0, "align":1,"text_font":32},
{"page":  5, "id":  41, "x": 48, "y":150, "w": 130, "h": 30, "obj": "label", "text":"机箱",     "click":0, "align":0,"text_font":"chinese_24"},
{"page":  5, "id":  42, "x":177, "y":150, "w":  50, "h": 25, "obj": "switch", "ext_click_h":240, "ext_click_v":10, "radius":25,       "radius2":15},
 
{"page":  5, "id":  50, "x":  8, "y":190, "w":  35, "h": 35, "obj": "label", "text":"\uE01B",   "click":0, "align":1,"text_font":32},
{"page":  5, "id":  51, "x": 48, "y":195, "w": 130, "h": 30, "obj": "label", "text":"空调",     "click":0, "align":0,"text_font":"chinese_24"},
{"page":  5, "id":  52, "x":177, "y":195, "w":  50, "h": 25, "obj": "switch", "ext_click_h":240, "ext_click_v":10, "radius":25,"radius2":15},
 
 
{"page":  5, "id":  60, "x":  8, "y":240, "w":  68, "h": 30, "obj": "btn", "text":"青色",  "align":1, "text_font":"chinese_24"},
{"page":  5, "id":  61, "x": 84, "y":240, "w":  68, "h": 30, "obj": "btn", "text":"红色",  "align":1, "text_font":"chinese_24"},
{"page":  5, "id":  62, "x":164, "y":240, "w":  68, "h": 30, "obj": "btn", "text":"彩虹",  "align":1, "text_font":"chinese_24"},

[fvanroie]

I would suggest setting "ext_click_h":240,"ext_click_v":10 on the switch. It extends the clickable area around the switch to also cover the labels. Make sure the switch is created after the labels, or set "click":0 on the labels so they wont send any events.