Lovelace: Button card

[PeetsHome (Peter)]

That was last part yesterday where is was lost
Now i thing i’am almost there
-Retored last backup form wednesday
Folowed this https://hacs.xyz/docs/installation/prerequisites
Get token from https://github.com/settings/tokens

My button-card.js is installed here : \My-HA-IP\config\www\community\button-card\button-card.js
( looking from my samba share into HA)

So in my /config/configuration.yaml //update today, below is for me the right path

default_config:

lovelace:
  resources:
    - url: /community/button-card/button-card.js
      type: module
    - url: /community/button-toolbar/button-toolbar.js
      type: module

(and not to forget I have restarted the HA every time )
Still no luck. But I think I’m almost there

Solved it
if i use in lovelace

and paste for pe, then lovelace add sneaky 1 extra - for the type, so in the raw config - - type remove 2 idents from all entries

- type: "custom:button-card"
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)
  state:
    - value: "off"
      color: rgb(255, 0, 0)

So what is a better editor to add stuf to the lovelace yaml ?

[oherrou]

Hello,

I’m trying to set the color of a custom_fields value like that:

I have the folowing button_card_templates

button_card_templates:
  temp_and_setpoint:
    icon: mdi:thermometer
    aspect_ratio: 1/1
    tap_action:
      action: toggle
    name: DefaultName
    label: DefaultLabe
    show_name: true
    show_icon: true
    show_label: false
    show_last_changed: false
    show_state: false
    styles:
      grid:
        - grid-template-areas: '"n" "i" "temperature" "setpoint"'
        - grid-template-rows:  min-content 1fr
      icon:
        - size: 50%
      custom_fields:
        - temperature:
          - font-weight: normal
          - font-size: 8px
          - align-self: left
          - --text-color-sensor: '[[[return "red";]]]'
        - setpoint:
          - font-weight: normal
          - font-size: 8px
          - align-self: left
          - --text-color-sensor: '[[[return "blue";]]]'

According to the documentation and the examples with the HASSOS cpu/ram/sd element, I’ve tried to use it like that:

      - type: custom:button-card
        template: temp_and_setpoint
        name: "Cuisine"
        custom_fields:
          temperature: >
            [[[
              return `<span>Temp: <span style="color: var(--text-color-sensor);">${states['sensor.msalon_temperature'].state}%</span></span>`
            ]]]
          setpoint: >
            [[[
              return `<span>Cons: <span style="color: var(--text-color-sensor);">${states['sensor.test_setpoint_cuisine'].state}%</span></span>`
            ]]]  

However i do not see any color applied to my text. Could you point me in the direction of a solution please ?

[RomRider]

custom_fields is an object not an array. So remove the dash in from of temperature and setpoint

[oherrou]

That was my mistakes indeed, thank you

[Mariusthvdb (Marius)]

@RomRider

That would completely kill the purpose of triggers_update. The goal is to reduce the load, so introducing template will require to run the template every time any entity is updated . I understand your point, but there is no other way. I can implement it, but you’ll again have a less responsive UI (a bit, not as bad as before though )

Understood. Though I love the ease of the templating, I must admit the responsiveness I experience now is such a huge difference, I wouldn’t want to go back on that. I’ll add the few hard coded entities

[RomRider]

So I’ve use this quarantine time to rebuild my while UI using mainly button-card, decluttering-card, card-mod, swiper-card, some picture-elements and a hell lot of yaml (almost 1000 lines of yaml for the button-card templates)
I inspired myself with @Mattias_Persson’s UI (and also used the circle from his code )
The media-players are not using mini-media-player but button-card.

The goal was simple, less stuff, more info at a glance in one page and popups on hold_action for most of the cards (sensors would display a graph with mini-graph-card, lights would present a clean popup with color, brightness, effect based on what they support, etc…). And multimedia management of course

It’s a bit out of topic, but it gives you some examples of what you can achieve with button-card by tweaking it the way you want.
I’ll share some of my templates later

[eximo84]

@RomRider, looks great. Ive been working on my UI trying to use this card where possible as its super versatile. I need to investigate the media player side of things as that looks good.

It would also be interesting to know how you are handling the YAML for popups. Do you use YAML mode or the UI Editors?

I wanted to setup separate files for each popup but i don’t want to loose the UI editor and switch to YAML only mode so for now i am just pointing out to a separate dashboard that contains a view to each room.

Example below of one of those views with my button card which is basically two button cards together (1 power toggle and 1 main card for more-info with a built in slider and custom SVG hue bulb icons)

[RomRider]

@eximo84

It would also be interesting to know how you are handling the YAML for popups. Do you use YAML mode or the UI Editors?

I don’t like UI’s to configure stuff… I’m probably old school So I use only yaml… I’m kind of sad now that some of the integrations are only possible to configure with the UI

@eximo84

I wanted to setup separate files for each popup

I have one separate file for each popup, but they all call a decluttering-card template that embeds everything

@eximo84

i am just pointing out to a separate dashboard that contains a view to each room.

I had that in place before with my old shitty and ugly UI, but I found it to be not very ergonomic (especially the fact that you had to go “back” with a button / swipe back to the first page every time)

[petro]

What’s the progress bar called in css? The % around your brightness.

Edit: can you also post how you got the shadow on the icon itself?

[RomRider]

That a piece of svg I’ve copied over from @Mattias_Persson.
Here’s the code:

  custom_fields:
    info: >
      [[[
        if (entity.state === 'on' && entity.attributes.brightness) {
          const radius = 20.5;
          const brightness = Math.round(entity.attributes.brightness / 2.54);
          const circumference = radius * 2 * Math.PI; 
          return `
            <svg viewBox="0 0 50 50">
              <circle style="
                  transform: rotate(-90deg);
                  transform-origin: 50% 50%;
                  stroke-dasharray: ${circumference};
                  stroke-dashoffset: ${circumference - brightness / 100 * circumference};
                "
                id="c_brightness" cx="25" cy="25" r="20.5" stroke="var(--sq-info-color)" stroke-width="1.5" fill="none" />
              <text x="50%" y="54%" fill="var(--sq-info-color)" font-size="14" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="10">%</tspan>
              </text>
            </svg>
          `;
        }
      ]]]

Edit: Adding the shadow for the icon is quite simple:

  state:
    - id: id_on
      styles:
        icon:
          - filter: |
              [[[
                if (entity.attributes.supported_features >> 4 & 1) return "drop-shadow(0px 0px 1px rgba(0,0,0,1))";
              ]]]

[petro]

I tried every attribute on an icon in the past accept filter. Well now I know, thanks.

[RomRider]

Instead of ... when the text is overflowing the card, what I did lately is a nice fade effect:

using this css:

      - background-image: linear-gradient(to right, var(--paper-item-icon-color) 0%, var(--paper-item-icon-color) 80%, rgba(0,0,0,0))
      - -webkit-background-clip: text
      - -webkit-text-fill-color: transparent
      - position: relative
      - display: inline-block
      - width: 100%
      - align-content: start
      - text-align: start
      - text-overflow: unset

[Darbos]

Awesome. How did you get that Sonos popup???

[RomRider]

It is 4 button cards to select the master, then a state-switch with mini-media-player to display the Sonos grouping list, then 4 mini-media-player for the volume bars

[Darbos]

i dont understand how its in a pop up, would you mind sharing the code?

[Darbos]

the browser_mod part i suspect…

[RomRider]

Yes, it’s with browser_mod:

action: call-service
service: browser_mod.popup
service_data:
  title: Sonos Groups
  deviceID:
    - this
  style:
    border-radius: 10px
    overflow: hidden
    background: var(--lovelace-background, var(--primary-background-color))
  card:
    type: custom:decluttering-card
    template: square_sonos_group_manage #which is a vertical-stack with everything inside

And then the decluttering-template:

square_sonos_group_manage:
  variables:
    - sonos_master: 
  card:
    type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: square_mini_media_player
            entity: media_player.sonos_universal
            variables:
              name: 'Living Room'
              default_background: /local/sonos_connect_big.png
              sonos_master: media_player.sonos_connect
          - type: custom:button-card
            template: square_mini_media_player
            entity: media_player.sonos_office_stereo
            variables:
              name: 'Office'
              default_background: /local/sonos_one_big.png
          - type: custom:button-card
            template: square_mini_media_player
            entity: media_player.sonos_bedroom_stereo
            variables:
              name: 'Bedroom'
              default_background: /local/sonos_one_big.png
              sonos_master: media_player.sonos_bedroom_stereo
          - type: custom:button-card
            template: square_mini_media_player
            entity: media_player.sonos_bathroom
            variables:
              name: 'Bathroom'
              default_background: /local/sonos_one_big.png
      - type: entities
        style: |
          ha-card {
            --mini-media-player-base-color: var(--paper-item-icon-color);
          }
        entities:
          - type: custom:mini-media-player
            style:
              .: |
                :host {
                  --mmp-text-color: var(--paper-item-icon-color);
                  --mini-media-player-accent-color: var(--paper-item-icon-active-color)
                }
              ha-card: |
                  .entity__info__name {
                    font-weight: bold !important;
                    text-transform: lowercase;
                  }
                  .entity__info__media {
                    color: var(--paper-item-icon-color) !important;
                  }
            entity: '[[sonos_master]]'
            group: true
            hide:
              power: true
              icon: true
              source: true
              volume: true
              progress: true

            speaker_group:
              platform: sonos
              show_group_count: true
              expanded: true
              entities:
                - entity_id: media_player.sonos_connect
                  name: Living Room
                - entity_id: media_player.sonos_office_stereo
                  name: Office
                - entity_id: media_player.sonos_bedroom_stereo
                  name: Bedroom
                - entity_id: media_player.sonos_bathroom
                  name: Bathroom
          - type: divider
            style:
          - type: custom:mini-media-player
            entity: media_player.sonos_universal
            group: true
            name: Living Room
            hide:
              controls: true
              progress: true
              info: true
              icon: true
              source: true
          - type: custom:mini-media-player
            entity: media_player.sonos_office_stereo
            name: Office
            group: true
            hide:
              controls: true
              progress: true
              info: true
              icon: true
              source: true
          - type: custom:mini-media-player
            entity: media_player.sonos_bedroom_stereo
            group: true
            name: Bedroom
            hide:
              controls: true
              progress: true
              info: true
              icon: true
              source: true
          - type: custom:mini-media-player
            entity: media_player.sonos_bathroom
            name: Bathroom
            group: true
            hide:
              controls: true
              progress: true
              info: true
              icon: true
              source: true

[petro]

for some reason I cannot get the circle to render. svg viewbox is causing the problem. Not sure what. What version of your card are you using? I’m on 3.2.3.

EDIT: Everything seems to be calculating properly. No errors in logs and the html looks correct. Chrome is just not rendering it.

      <svg viewBox="0 0 50 50">
        <circle style="
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            stroke-dasharray: 128.8052987971815;
            stroke-dashoffset: 63.114596410618944;
          "
          id="c_brightness" cx="25" cy="25" r="20.5" stroke="var(--paper-item-icon-active-color)" stroke-width="1.5" fill="none" />
        <text x="50%" y="54%" fill="var(--paper-item-icon-active-color)" font-size="14" text-anchor="middle" alignment-baseline="middle">51<tspan font-size="10">%</tspan>
        </text>
      </svg>

[RomRider]

it’s probably rendered but either hidden somewhere because of the styles you apply on the field or because its z-index is not correct and it’s under something else.
If you go in the chrome debugger and unfold the button-card, the element should be there, you’ll see on the page where it is and then you can play with the styles on the div around it.

PS: I’m running 3.3.0-3 (beta), but it shouldn’t change anything for this.

[petro]

Yeah I’m doing that. I see it. I can’t tell the z order, I would expect a custom field to be on top no?

what are you using for the custom_field style?