Lovelace: Button card

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!

CDRX2 · March 31, 2023, 7:29pm

Layering in CSS is usually done with the z-index property. I’ve never attempted to use it within a button-card, but you should give it a try.

smartin · April 1, 2023, 8:16am

Awesome! That was it. Just the z-filter i didn’t find. Didn’t think of. Works awesome!
Now i can basically nest any card inside Custom Button Card, with the Benefit to set fixed sizes, and “overlay” any other Fields i can think of.

styles:
  card:
    - height: 7rem
    - position: absolute
    - top: 0
    - left: 0
    - font-size: 14px
    - padding-bottom: 5%
    - padding-top: 5%
    - color: black
    - overflow: unset
  name:
    - margin-top: '-25%'
    - z-index: 999
  label:
    - margin-top: '-25%'
    - z-index: 998

Thank you so much for the right Keyword !!!

RichardU · April 5, 2023, 8:20pm

I just updated to 2023.4.0 and all of my many Custom Button Cards say
cannot read properties of null (reading 'config')

ASNNetworks · April 5, 2023, 8:40pm

Releases · custom-cards/button-card (github.com)

Sam01101101 · April 6, 2023, 6:19am

I’ve updated to latest v3.5.0 and i’ve still got the error - any ideas? do my templates need to be moved to a different location?

echo_Mark · April 6, 2023, 9:21am

I can confirm also that there is an issue.

When I updated to 2023.4.0, all my custom button cards errored out with the “null” warning and reading ‘t.config’. I then found the version 3.5 on github, updated, and on PC, it started working again, but on devices (iphones/ipads), using the HA app, the error still remains. Tried refreshing, reboots, everything I could think of, nothing helped.

Thanks.

ASNNetworks · April 6, 2023, 9:44am

You need to clear cache on mobile as well. On iOS I believe it’s in the companion settings panel. On Android you need to clear caches through the Android settings page (where you have all apps listed)

But I don’t understand why everyone here jumps on 2023.4 the minute it’s released. There are numerous reports in here that cards like button card, decluttering and kiosk mode are broken because of some major changes.

Just wait a few weeks till they get new releases and bugfixes of those releases and 2023.4 gets more bugfixes anyway. Running 2023.3.6 for a few weeks longer will not stop the earth from spinning.

Plaatjesdraaier · April 6, 2023, 9:47am

Here also the same issues. Just did a restore to 2023.3x because my complete dashboard is ruined

Protoncek · April 6, 2023, 11:14am

there were numerous of updates of cards to comply with 2023.4. But, (at least on windows) you must totally clear all: in chrome or edge: press F12 (to enter developer mode), then right-click on “refresh” icon and select “empty cache and hard refresh”. Only then it shows correctly - only CTRL+F5 doesn’t help.

Sam01101101 · April 6, 2023, 2:04pm

Thank you - that worked for me!