Lovelace: Button card

StickyClient · April 28, 2023, 2:25pm

you need to return the entity in the popup otherwise it will not work. Is your popup in the same config as your card or are you using templates outside the card config? Something like this will work.

type: "custom:button-card"
entity: "define_entity_here"
tap_action:
  action: "fire-dom-event"
  browser_mod:
    service: "browser_mod.popup"
    data:
      hide_header: true
      content:
        type: "custom:button-card"
        entity: "[[[ return entity.entity_id ]]]"
        styles:
          img_cell:
            - background-color: >
              [[[
                return entity.state == "on"
                ? "rgba(var(--rgb-primary-color),0.2)"
                : "rgba(var(--rgb-secondary-text-color),0.2)"
              ]]]
            - border-radius: 50%
            - width: 60%
            - hight: 40%

Mariusthvdb · April 28, 2023, 3:05pm

yeah, good question. I always use them. the thing is, if you do, you are 100% certain the interpreter does what you instruct it to do, which in this case is see the end of that specific instruction/variable/template etc etc Those are called ‘statements’.

and this would be the formal rule:

A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons.

otoh, search Google on

javascript semicolon

and you’ll see a plethora of different opinions.

chasut · April 28, 2023, 4:55pm

Interesting. The popup contains several cards with different entities, so not sure how this would work. So in that example, it passes the state object from the calling function? nice.
If for whatever reason the local state object is not getting loaded, I wonder if I could force it to load somehow? will play with that.

Here is a fuller snippet. The popup typically contains several button-cards (and other cards) that follow.

- type: 'custom:button-card'
  aspect_ratio: 1/1  
  show_name: false
  show_icon: true
  entity: group.all_occupancy
  icon: 'mdi:home'
  tap_action: 
    haptic: medium
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        title: Occupancy
        content:
          type: vertical-stack
          cards:
            - type: horizontal-stack 
              cards:
                - type: grid
                  columns: 2
                  square: false
                  cards:
                    - type: 'custom:button-card'
                      entity: binary_sensor.hk_presence_pa
                      name: Pa
                      icon: mdi:home-account
                      aspect_ratio: 4/1
                      color: auto
                      show_name: true
                      show_icon: true
                      layout: icon_name
                      tap_action:
                        action: none
                        haptic: medium
                      show_state: false
                      styles:
                        icon:
                          - width: 70%
                        name:
                          - justify-self: start  
                        img_cell:
                          - background-color: >
                              [[[ return ((entity.state === 'on') ? "rgba(var(--rgb-primary-color),0.2)" : "rgba(var(--rgb-secondary-text-color),0.2)")
                              ]]]
                          - border-radius: 50%
                          - width: 60%
                          - hight: 40%
                      card_mod:
                        class: opaque
                    - type: 'custom:button-card'
                      entity: binary_sensor. ........ > additional cards

Ildar_Gabdullin · May 3, 2023, 12:33pm

Everyone facing localization issues - please test this (a very small & possibly insufficient fix):

Before:

After:

Mariusthvdb · May 3, 2023, 9:00pm

But how to test ? We can’t build it, and can not edit the resource with that change?

Do you have a shareable .js file we can download?

Ildar_Gabdullin · May 3, 2023, 9:10pm

My edit was very “brute-force”:

Open js-file in VSC (/www/community/button-card/button-card.js).
Find the only occurrence of “component.${r}.state._.${i.state}”.
Replace
state._
with
entity_component._.state

Again, this is a temporarily fix. I realized that in 2023.4 localization keys were changed; so I searched a code for patterns and found these “xxxx.state._.xxxxx” old keys in button-card, multiple-entity-row, slider-entity-row, config-template-card, history-explorer-card (means - all these cards have or may have issues).
Probably a REAL fix should be more complex)))

Anyway, I decided to create a PR with this small change - to urge a developer(s) to dig this issue in this card with a more attention.

Update: one more thing should be changed to support different device_classes:
replace

component.${domain}.state.${stateObj.attributes.device_class}.${stateObj.state}

with

component.${domain}.entity_component.${stateObj.attributes.device_class}.state.${stateObj.state}

chasut · May 4, 2023, 4:22pm

Just FYI, I updated to 2023.5.0 and it now works as expected. Not sure what changed, but happy it did!

Edit: Got excited and spoke too soon. After further testing, still no joy.

gerard33 · May 5, 2023, 9:26pm

Thanks seems to be fine again, will do some more checks.

I noticed that the second change you described is a bit different in the js file. I have changed this

component.${r}.state.${i.attributes.device_class}.${i.state}

to

component.${r}.entity_component.${i.attributes.device_class}.state.${i.state}

Ildar_Gabdullin · May 5, 2023, 9:46pm

Cannot check right now. Theses changes need to be checked a lot. Frankly speaking, I use this card in 2 places - about 20 cards of one template, 12 cards of another template, and I’m both cases “state_display” is used …

larryo108 · May 10, 2023, 12:12am

I have what might be a stupid question, but I have searched and have been unable to find my answer.

I am learning yaml and becoming more comfortable with it, but when making a dashboard, I find the GUI easier to manage all of my coding. I get lost when it is all coded in yaml in one big file. Or even split across multiple easier to manage files.

I have done some button-card features and card-mod for a couple of GUI elements, but am working on a complete custom dashboard. I have many button-card templates and would like to use those in a GUI dashboard. I tried adding the “button-card-templates: !include….” but the GUI did not like it.

I know I can code each button element individually and add all of my modifications, but it is so much easier to use a template and make a change once as I continue to refine my setup.

So is there a way to reference button card templates that I have saved in my config while using the GUI editor to build my dashboard? Any help would be greatly appreciated. Thanks in advance.

CDRX2 · May 10, 2023, 7:17pm

Short answer is no. The GUI editor does not allow !include, that only works in yaml mode.

conrad66 · May 10, 2023, 7:50pm

Lock icon shows above all layers and dialogs
In core-2023.5.2 something changed in frontend, and now card Lock icon (lock: enabled: true) displays above all layers and windows.

    type: custom:button-card
    entity: sensor.home_energy
    lock:
      enabled: true

This has not happened before

Ildar_Gabdullin · May 10, 2023, 7:58pm

z-index seems to be changed recently in Frontend which caused issues with button-card, restriction-card and user-defined styles with changed z-index.

ASNNetworks · May 10, 2023, 10:02pm

Yes, I also noticed z-index issues with browser_mod if you have sticky cards. The browser_mod popup now renders behind the sticky card, which breaks the entire popup since you can’t access parts of the UI.

Too many frontend changes forced me to revert back to 2023.4 for now. I hope they’re done with frontend changes like this for a long time. Ever since 2023.1 I’ve been faced with breaking changes after each update

conrad66 · May 11, 2023, 9:19am

This is a tribute to mushroom cards

ASNNetworks · May 11, 2023, 9:32am

I don’t use mushroom card myself, but if anything all z-index custom cards (so all card_mod styles that achieve this as well) are affected sadly.

larryo108 · May 11, 2023, 7:04pm

Thank you. That’s exactly what I had found. Appreciate the response.

Opontios · May 25, 2023, 8:57am

Have searched everywhere, but couldn’t find a solution for wrapping long text in the card by using card_mod, as it’s possible in other custom cards. Maybe one of the card_mod gurus can help?

Ildar_Gabdullin · May 25, 2023, 10:26am

In custom:button-card, the card-mod is not necessary in many cases, users may use “native” ways:

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: sun.sun
    show_name: true
    name: some long name
    show_state: true
    show_label: true
    label: some long label

  - type: custom:button-card
    entity: sun.sun
    show_name: true
    name: some long name
    show_state: true
    show_label: true
    label: some long label
    styles:
      state:
        - white-space: unset
      name:
        - white-space: unset
      label:
        - white-space: unset

  - type: custom:button-card
    entity: sun.sun
  - type: custom:button-card
    entity: sun.sun
  - type: custom:button-card
    entity: sun.sun

klogg · May 25, 2023, 11:48am

In answer to your question I have always used

"some very<br>long text"

But Ildars solution is far better. I have some changes to make!

Except that it now centre justifies the text. I liked being able to justify to the left.
Is that still possible?