Lovelace: Button card

Share your Projects! Dashboards & Frontend
5111

Thanks yeah that worked, I didn’t realise uppercase mattered on a state like that.
Cheers

5112

HI Rom,

Writing to you because I am really completely puzzled what happened with my Marquee… :wink: It filled out the full width of the button before, no matter how many alerts were going on, but lately leaves a big empty space left and right of the text (on 1 alert)

using:

type: custom:button-card
template: button_default_title
styles:
  card:
    - padding: 5px
name: >
  [[[ var phrase = states['sensor.count_alerts_notifying'].state == 1
                   ? 'Alert:' : 'Alerts:';
      return `<div style='display: inline-flex;'>
      <div>${states['sensor.count_alerts_notifying'].state} ${phrase}&nbsp</div>
      <marquee>
      <span style='align-items: center;font-weight:normal;font-size:18px;'>
      System alerts: ${states['sensor.marquee_alerts'].state}&nbsp</span>
      </marquee>`; ]]]

and template:

button_default_title:
  aspect_ratio: 12/1
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 20px
      - font-weight: bold

the card isnt filled out completely to the left and right anymore, but centered, and I cant find the way back:

Schermafbeelding 2021-02-10 om 12.19.03
Schermafbeelding 2021-02-10 om 12.19.03994×110 10.8 KB

how could I do that, please have a look?

the number should be fully to the left (with padding 5px), and the Marquee should simply float in from the right (again, padding 5px)

when 2 alerts are live the button shows like I want it:

Schermafbeelding 2021-02-10 om 16.39.22
Schermafbeelding 2021-02-10 om 16.39.221016×82 11.6 KB

5113

I just stumbled across this and I guess it’s implied by this Q&A. I thought I’d state it explicitly though. I accidentally put the confirmation section under the button config instead of inside one of the action sections. This was fine until I added a second action and then tried to figure out why all actions now has the confirmation dialogue. So, the docs says you should put it under an action but it actually works in the main config too. It’s thus either an undocumented feature or completely unintentional. :slight_smile:

5114

Hi all

I started using this card yesterday and so far love it, thanks for this.

I have an issue with my buttons :

imagem

How can i change the color of the shadow to yellow ?

This is my code :

state:
  - value: 'on'
    styles:
      card:
        - box-shadow: 2px 2px 2px 1px var(--paper-item-icon-active-color)
      icon:
        - color: 'rgb(255, 255, 0)'
5115

It is documented in both the main config section and in the action section of the README :wink: Main is general, in the action one it’s specific to that action. I agree, I could have explicitly said that in the doc :slight_smile:

Instead of using var(--paper-item-icon-active-color) use var(--button-card-light-color) which returns the actual color of the light, or if you want just yellow all the time, box-shadow: 2px 2px 2px 1px rgb(255, 255, 0)

5116

Shucks, you’re right. Thanks for the feedback.

5117

Thank you so much, worked just fine.

5118

Hi Rom,

creating a very simple card (…). Hoping to.

type: custom:button-card
template: button_picture_script_small
entity: sensor.espresso
tap_action:
  action: toggle
  entity: switch.espresso_keuken
hold_action:
  action: navigate
  navigation_path: /ui-settings/settings

I only now discover we can not override the entity in a tap: toggle action, but only on a hold action? Since I use hold_action system wide for navigating around, I really need the override on the tap action… Would you consider adding that possibility please?

Now only allowed for more-info (which was my request too :wink: https://github.com/custom-cards/button-card/blob/master/README.md#action

5119

Hi,
Is there any intention to support the new “action: fire-dom-event” of the browser-mod integration?

5120

Yes, it’s on its way, but I need a PR to be merged first.

1 Like
5121

What about:

tap_action:
  action: call-service
  service: '[[[ return states["switch.espresso_keuken"].state === "off"? "switch.turn_on" : "switch.turn_off" ]]]'
  service_data:
    entity_id: switch.espresso_keuken
5122

Yah, thanks,
I did consider that, (and it works alright) but found the overriding entity option way more elegant :wink:

Wouldn’t you accept a feature request for that?

5123

I have an issue, not sure if it’s frontend, but I have a lot of buttons, a hold press shows the “more info” dialog… When I close it, my frontend hangs for 3 sec… This was not happening a few core releases ago… Someone seeing this too?

5124

Had the same issue (used to hang for like 8 to 10 sec every time), never could find out what was happening. Was having A LOT of stuff in one page and it generated that behavior.
In the end I was tired and just rebuilt the whole thing differently :upside_down_face:

For me it was only happening on my phone (OnePlus 7T Pro), not on an android 10 tablet, not on any ios device, not on MacOS/Windows/Linux

5125

Yeah, i have it too on oneplus 6t… less on desktop chrome… There is an issue, not sure where it’s related…

Started noticing it a few weeks ago, what’s not happening before, and I didn’t change anything in Lovelace

5126

If you look online, you’ll see there are several reports where webview is slow on oneplus devices and it has never been fixed :confused:

5127

yeah, but it was always smooth as hell, untill some core releases ago

5128

Been there… Good luck :confused: I spent hours trying to figure it out… If you find something let me know!

5129

Everything is running smooth here, it’s only after I close the more dialog

5130

Is there an issue reported somewhere on github about oneplus issue? Indeed om my Samsung tablet it’s better