Lovelace: Button card

Share your Projects! Dashboards & Frontend
5131

Yeah, I had exactly that and only on my oneplus phone :man_shrugging:

As far as I know, itā€™s not related to home-assistant, itā€™s related to some issues with webview and oneplus phones. Just Google for ā€œoneplus webview slowā€ youā€™ll see a lot of of them. But with home assistant it manifests itself after closing a popup :upside_down_face: with other apps sometimes for me it just freezes

Edit: I hzd sometimes better results with webview beta. If you go this route, youā€™ll have to enable the developer settings and explicitly assign webview beta as your webview provider

5132

I noticed indeed a new webview update some days ago , i think issue started occuring that periodā€¦ Gonna try and earlier version with apk mirrorā€¦ Cause I never had issue before

5133

Hmm, tried going back to 87.0, rls 30/12 ā€¦

Same issue :frowning:

5134

Sorry to ask about something where I assume itā€™s a obvious answer I just canā€™t find.

I have a lot of cards where I would like to reference the name in other fields in order to template the cards. In the following example I would like to use content of ā€œnameā€ in input_select option and in the state template. I assume I can somehow reference content of the fieldā€¦?

          - type: 'custom:button-card'
            entity: input_select.tidspunkt_dag
            name: Morgen
            show_icon: false
            color_type: card
            tap_action:
              action: call-service
              service: input_select.select_option
              service_data:
                entity_id: input_select.tidspunkt_dag
                option: Morgen
            styles:
              card:
                - font-size: 12px
            state:
              - operator: template
                value: >
                  [[[ return states['input_select.tidspunkt_dag'].state ===
                  'Morgen' ]]]
                color: var(--accent)
5135

Use a variable :wink:

5136

@RomRider

Is it possible to pass a variable to the spin state? I cant get it to work.

Something like

state:
  - value: 'on'
    spin: '[[[ return variables.option ]]]'
5137

No that is not possible but spin is the same as setting the CSS animation and you can use templates there :wink: :

styles:
  icon:
    - animation: rotating 2s linear infinite
1 Like
5138

Sorry for the spam for people who received some emails from github-action it went crazy, Iā€™ve changed the release system :smiley:

However, good news, the latest version implements support for fire-dom-event :slight_smile:

3 Likes
5139

Iā€™m having a strange issue when trying to update:


Logger: custom_components.hacs
Source: custom_components/hacs/api/hacs_repository_data.py:117
Integration: HACS (documentation, issues) 
First occurred: 21:01:35 (5 occurrences) 
Last logged: 21:03:35

No content to download

First time Iā€™ve seen this :stuck_out_tongue:

5140

Try again, Iā€™ve just fixed it :slight_smile: (Iā€™ve updated the release bot and I f***ed up sorry :pray:)

5141

Done :smiley:
Updated correctly and poppups are working again and very fast :smiley:

Thank you so much!

5142

Amazing! Before I update, can you confirm that the new fire-dom-event action works on both tap_action AND hold_action?

Just to prevent unnecessary work and troubleshooting.

5143

It works on any action

1 Like
5145

Hi,
Iā€™m trying to change the icon based on the state of the binary sensor. I have custom:button-card set up for the PiHole to check if the device is online. I have set up the ping binary sensor. What I want to achive is to change the ICON in the button card from mdi:pi-hole to mdi:alert-outline as soon as there is no connectivity. Following is the code for the button, however the ĆÆcon"change doesnt work. Can someone help?

- aspect_ratio: 2/1
                  template: black_larger_template
                  custom_fields:
                    blc: |
                      [[[
                        return `<span>Blocked: <span style="color: var(--text-color-sensor);">${states['sensor.pi_hole_ads_blocked_today'].state}</span></span>`
                      ]]]
                    blc2d: |
                      [[[
                        return `<span><span style="color: var(--text-color-sensor);">${states['sensor.pi_hole_ads_percentage_blocked_today'].state}%</span></span>`
                      ]]]
                    qur: |
                      [[[
                        return `<span>Queries: <span style="color: var(--text-color-sensor);">${states['sensor.pi_hole_dns_queries_today'].state}</span></span>`
                      ]]]
                  entity: sensor.pi_hole_ads_percentage_blocked_today
                  icon: >
                    [[[
                      if (entities['binary_sensor.pihole_ping'].state === 'on') return 'mdi:pi-hole';
                      return 'mdi:alert-outline';
                    ]]] 
                  name: Pi-Hole
                  styles:
                    grid:
                      - grid-template-areas: '". n" "i blc2d" "i qur" "i blc"'
                      - grid-template-columns: 1fr 1fr
                      - grid-template-rows: 1fr min-content min-content min-content
                    icon:
                      - color: yellow
                    custom_fields:
                      blc:
                        - padding-bottom: 0px
                        - padding-top: 0px
                        - align-self: middle
                        - font-size: 15px
                        - justify-self: end
                        - color: white
                      blc2d:
                        - padding-bottom: 0px
                        - padding-top: 0px
                        - align-self: middle
                        - font-size: 15px
                        - justify-self: end
                        - color: white
                        - '--text-color-sensor': >-
                            [[[ if
                            (states["sensor.pi_hole_ads_percentage_blocked_today"].state <
                            10) return "red";  if
                            (states["sensor.pi_hole_ads_percentage_blocked_today"].state <
                            30) return "orange"; else return 'white'; ]]]
                      qur:
                        - align-self: middle
                        - padding-top: 0px
                        - padding-bottom: 0px
                        - padding-left: 10px
                        - justify-self: end
                        - font-size: 15px
                  type: 'custom:button-card'
5146

ā€¦ok I got it. Chage the entities to states (in icon):

 icon: >
    [[[
      if (states["binary_sensor.pihole_ping"].state === 'on') return 'mdi:pi-hole';
      return 'mdi:alert-outline';
    ]]]
5147

Hey,
So I have updated to the latest version, and still not able to use the ā€œaction: fire-dom-eventā€ of the browser-mod as part of the button card tap_action.
I have decluttering template where tap_action is one of the variables, which is working fine, however it refuses to work with action: fire-dom-event.
Anything I am missing?
Is this working for anyone with button card at all? Even without decluttering?

5148

Clear your cache and/or make sure you are really running the latest version by looking at your javascript console.

5149

Hey,
Yes sure I did that, and running the latest.

5150

@sergio_pt @ASNNetworks, it seems there are reports of custom:button-card not working with browser_mod popups with the new fire-dom-event using the 3.4.2 version of button-card.

Would you mind confirming it works for you and if so could you please share with the community a working config? :slight_smile:
Thanks for your help! :pray:

5151

Hi @RomRider,

Sure, I can confirm itā€™s working.
Please find below a snippet of my working code in my ā€˜custom:button-cardā€™:

...
              tap_action:
                action: fire-dom-event
                #service: browser_mod.popup
                browser_mod: 
                  command: call-service
                  service: browser_mod.popup
                  service_data:
                    title: Heater
                    deviceID:
                      - this
                    large: false
                    hide_header: false
                    auto_close: false
                    card:
                      type: entities
                      title: Mi Heater
                      show_header_toggle: false
                      entities:
                        - type: 'custom:simple-thermostat'
...
2 Likes