Lovelace: Button card

Veuchez · March 20, 2023, 9:22pm

This is my solution working in popup as well

type: custom:button-card
size: 60%
show_name: false
show_state: false
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      card_mod:
        style:
          ha-dialog$: |
            .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
              #width:100%;
              box-shadow:none;
              border-radius: 0px;
              border: 0px !important;
              background: none;
            } 
      content:
        type: custom:mod-card
        card_mod:
          style: |
            ha-card {
            background:none;
            border:0;
            border-radius:0 10px 10px 0!important;
            box-shadow:0 0;
            transition:none
            }
        card:
          type: vertical-stack
          cards:
            - type: custom:button-card
              color: auto
              entity: input_select.smarther_cucina_setboost
              name: BOOST
              tap_action:
                action: call-service
                service: input_select.select_next
                service_data:
                  entity_id: input_select.smarther_cucina_setboost
              hold_action:
                action: call-service
                service: script.smarther_cucina_spegnimento_boost_automatic_mode
              show_state: false
              size: 30px
              state:
                - value: 0.1
                  color: var(--disabled-text-color)
                  icon: mdi:play-speed
                  name: |
                    [[[
                      if (states['input_select.smarther_cucina_language'].state == 'EN') { 
                        return 'SET BOOST';
                      } if (states['input_select.smarther_cucina_language'].state == 'IT') { 
                          return 'IMPOSTA BOOST';
                        }
                    ]]]
                - value: 30
                  color: rgb(255, 153, 153)
                  icon: mdi:play-speed
                  name: BOOST 30
                - value: 60
                  color: rgb(255, 102, 102)
                  icon: mdi:play-speed
                  name: BOOST 60
                - value: 90
                  color: rgb(255, 80, 80)
                  icon: mdi:play-speed
                  name: BOOST 90
              styles:
                card:
                  - background: none
                  - font-size: 10px
                  - border: 0
                  - border-radius: 0
                  - box-shadow: 0 0
                  - margin-top: '-2px'
                  - transition: none
                custom_fields:
                  notification:
                    - position: absolute
                    - left: 64%
                    - top: 10%
                    - border-radius: 50%
                    - width: 15px
              custom_fields:
                notification:
                  card:
                    type: custom:button-card
                    entity: sensor.smarther_cucina_fine_boost_minuti
                    tap_action:
                      action: none
                    show_name: false
                    show_icon: false
                    show_state: true
                    card_mod:
                      style: |
                        ha-card {
                        background:{% if is_state('sensor.smarther_cucina_fine_boost_minuti', '0') %} none !important {% else %} red {% endif %};
                        color:{% if is_state('sensor.smarther_cucina_fine_boost_minuti', '0') %} transparent !important {% else %} white {% endif %};
                        font-size:9px!important;
                        border:none;
                        height:15px;
                        transition:none
                        }
                    state:
                      - operator: template
                        value: >-
                          [[[ return
                          states['sensor.smarther_cucina_fine_boost_minuti'].state
                          ]]]

Dominicd · March 22, 2023, 5:00pm

Hello community ! I need some help to understand the grid stuff and how to position my cards inside the different areas…

Here is the challenge:

I need a button-card for the irrigation of my garden that is using a controller that communicates in Modbus with HA. Each zone has different purposes in the layout:

a control command to select the zone (switch) by clicking on an icon
a status telling if the zone is selected for next irrigation (binary_sensor)
a status telling if irrigation is currently in progress or in idle mode (binary_sensor)
a timer information (sensor) that decrements during the irrigation period (sensor is polled by HA every 15 seconds)

irrigbutton1

When irrigation is in progress on a particular zone, I expect a red border blinking around the card, together with the remaining time.

A button can then have the following look:
irrig-bc-states

At the end, expect something like the following

any help is welcome…

So far my code is:

type: custom:button-card
entity: switch.zs_cour
size: 150px
tap_action:
  action: toggle
name: Zone Cour
state:
  - value: 'on'
    color: lightgreen
    icon: mdi:sprinkler-variant
  - value: 'off'
    color: black
    icon: mdi:sprinkler
styles:
  grid:
    - grid-template-areas: '"i" "selected" "timeleft"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1.9fr 0.5fr 0.9fr
custom_fields:
  selected:
    card:
      type: custom:button-card
      entity: binary_sensor.zone_selected_cour
      icon: mdi:check-circle
      size: 50px
      show_name: false
      state:
        - value: 'on'
          color: yellow
        - value: 'off'
          color: black
  timeleft:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: sensor.remaining_time_on_the_zone
          icon: mdi:clock-time-four-outline
show_name: true
show_icon: true
show_label: true

I just don’t get the positioning within the grid as result comes to (on the right what I want to achieve):

Can someone help me with the grid-area ?

customstudioyandexru · March 24, 2023, 9:58am

Please help to reduce the size of the card. It turns out a huge card.

keep:
  border_radius: true
  margin: true
cards:
  - type: custom:button-card
    name: Управление отоплением
    show_name: true
    show_entity_picture: true
    styles:
      card:
        - padding: 5px
        - border: 0px
      grid:
        - grid-template-areas: '"n i"'
        - grid-template-columns: 3fr 1fr
      name:
        - justify-self: start
        - padding-left: 20px
        - font-size: 20px
        - font-weight: 150
        - type: custom:button-card
  - show_name: true
    show_icon: true
    type: custom:button-card
    tap_action:
      action: toggle
    entity: switch.rele_otopleniia_prikhozhei
    name: Отопление прихожей
    hold_action:
      action: none
    state:
      - color: red
        value: 'off'
      - color: green
        value: 'on'
    confirmation:
      text: >-
        [[[ if (states["switch.rele_otopleniia_prikhozhei"].state === "on")
        return "Точно выключить счетчик?";
          else return "Включить счетчик?"
        ]]]

abercrombie1892 · March 24, 2023, 2:29pm

hello,

is there a possibility that you can use a tap action with the blank card?
I want a hidden switch.

Dominicd · March 27, 2023, 7:40am

believe it or not, I asked ChatGPT to correct my code and…
it did !

Mariusthvdb · March 30, 2023, 7:38am

DONT UPDATE TO 2023.4 beta

custom:button-card is borked by the latest:

not exactly sure where in the button-card configs, maybe in the templates, I didnt take the time yet to find out. Since I am fully reliant on button-card for my dashboard, it took me 1 minute to decide to roll back to 2023.3.6

Protoncek · March 30, 2023, 12:09pm

True, i just installed 2023.4 beta on m test. However it seems that only out templates make it corrupted, like

  [[[
    return states['sensor.next_holiday'].state 
  ]]]

while card itself without above programming works…hm…

but, it seems that decluttering-card is also a problem…

EDIT: it seems that removing “.state” at the end solves button card problems… ?
Decluttering card is still to be solved, though.

Mariusthvdb · March 30, 2023, 12:43pm

for now, manually replacing

querySelector("app-drawer-layout partial-panel-resolver")

with

querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")

in the resource file, and updating accordingly fixed it for me

Protoncek · March 30, 2023, 12:50pm

You mean for decluttering card? Can you tell more? I replaced above in .js file, restarted HA but i still have errors, so i clearly missed a step…

EDIT: it’s not that simple with buton-card either… removing “state” causes card to show correctly, but removes any condition check (it’s always false).

Mariusthvdb · March 30, 2023, 1:04pm

yes there more to it than that. You need to ‘tell’ HA to use the new resource. If you’re in yaml mode that is easy, just change the number in the resources.yaml and reload resources.

# https://github.com/custom-cards/button-card
- url: /local/resources/button-card/button-card.js?v=3.4.2+fix
# - url: /hacsfiles/button-card/button-card.js
  type: module

If you are in UI mode, and rely on HACS, you’ve got to trick HACS to use the new edits…
as @kulmegil explained in #beta on Discord:

find querySelector(“app-drawer-layout partial-panel-resolver”) replace with querySelector(“mwc-drawer partial-panel-resolver”)
querySelector(“app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver”)

if there is a .gz file (HACS thingy) then you need to repack modified .js into it (or delete .gz file completely)

you need to change the url of modules in Resources. I just appended &patch=2023.03.30 to urls.
(HA is using cache storage api, a bit “stronger” then standard browser cache)

reload page, done

Protoncek · March 30, 2023, 1:29pm

Hm…i’m dumb…can’t make it work… i have a second option (HACS):

i found and replaced that in www/community/button-card/button-card.js
i deleted .gz file
here i’m stuck…if i go to resources, “button-card” has url : “/hacsfiles/button-card/button-card.js” . if i change that into : “/hacsfiles/button-card/button-card.js&patch=2023.03.30” HA says button-card not found. I’m not a programmer, but i kinda don’t understand why i should change that entry since i didn’t change button-card.js name… i just altered a piece of program…or ?

I’m not on discord, so i can’t see there…sorry

Mariusthvdb · March 30, 2023, 1:35pm

not sure, I never do that on HACS resources.

you can however add the edited file to another folder I your www, and point to that in the resources dialog?
/config/lovelace/resources and add the new resource

Protoncek · March 30, 2023, 1:44pm

Nope…doesn’t work…same error.: can’t read properties of undefined…(reading “state”)…

petro · March 30, 2023, 1:51pm

that error doesn’t make sense, that means the ‘state machine’ is loaded (because there’s no error on states) but it can’t find that single state, which in general is not possible… Are you sure you have a correct entity_id in that js template?

Protoncek · March 30, 2023, 2:17pm

Sorry for delayed answer…

that erorr was only a part of it… if i removed “.state” from template definitions it was gone, but then templates stop working…

but, now i restored my test HA with my production image (i never do testing on my live HA!). Then i only replaced above “querySelector” line in existing button-card.js with new content. Lastly i updated to 2023.4b and now it seems that button-card works! So, it was obviously “something” on my test HA… sorry for that, guys!

~~Only error remains for decluttering card:~~
(EDIT: was just solved on github…)

kulmegil · March 30, 2023, 3:14pm

* replace with querySelector("app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver") in particiular

FYI: some formatting was lost when coping text.
The first revison was ~~striked out~~ as it would make it compatible with beta
The second one works with stable as well.

Also some cards had already been updated by their own devs to work.

EDIT: beta4 has changed things again. mwc-drawer is dead, long live ha-drawer
The code above has been updated to address that.

Mariusthvdb · March 30, 2023, 3:27pm

Hey Kulmegil,

do you by any chance also use Kiosk-mode? we can not apply the same fix there, but I did try to replace app-drawer-layout by mwc-drawer I the resource. No such luck though, seems more is required there.

If you find a way, please chime I there too? Thx!

kulmegil · March 30, 2023, 4:25pm

Nah.
But same quick patch won’t work with all the cards (including Swipe Navigation) as there are more changes in frontend. It doesn’t look like a one liner fix and I’ll leave it to dev - since @NemesisREhe is active it will likely be fixed before stable release.

Mariusthvdb · March 30, 2023, 8:31pm

et voila! BREAKING: HA 2023.4 no longer uses app-drawer-layout · Issue #27 · NemesisRE/kiosk-mode · GitHub
back to topic now.

smartin · March 31, 2023, 7:15am

I’m struggeling to place Name / Label over an embedded Card. All my Attempts lead to the embedded Card covering the Text.
grafik
How can i control the Layering, and make the Fields Name/Label to be on Top?

type: custom:button-card
show_name: true
show_state: false
show_label: true
size: 30%
label: VAR LABEL
name: VAR NAME
custom_fields:
  graph:
    card:
      type: gauge
      entity: input_number.waterfilter_days_backwards
      name: Filter
      max: 0
      min: -30
      needle: true
      severity:
        green: -20
        yellow: -25
        red: -30
      unit: ' -'
      card_mod:
        style:
          ha-gauge:
            $: |
              svg.text {
                display: none;
              }
          .: |
            ha-card div.name {
              display: none;
            }
styles:
  card:
    - height: 8rem
    - font-size: 14px
    - padding-bottom: 5%
    - padding-top: 5%
    - color: black
    - overflow: unset
  name:
    - margin-top: '-5%'
    - overflow: visible
  label:
    - margin-top: '-20%'
  custom_fields:
    graph:
      - filter: opacity(100%)
      - margin-top: '-2%'
      - overflow: hidden
  grid:
    - grid-template-areas: '"graph" "l" "n"'
    - grid-template-columns: 100%
    - grid-template-rows: min-content min-content min-content

As you can see, additionally i am struggeling to remove the Border of the embedded Card. Because i already used some Card-Mod to remove Text from the Card, the Example Code from the Docs doesn’t work. I will take care of that Problem, after the Placement-Issue with Card-Mod is solved.
Just mentioning, if this is an easy-peasy-Thing, i’d be even happier

But my Main Problem right now is Controlling the Order / Layering of Elements.
Would be awesome if you know the magic Line i couldn’t find!