Lovelace: Button card

[Mariusthvdb (Marius)]

no, this is the wrong entity, you should check the sensor.livingroom_mp_media_cover because thats what you’re using now I your template.

check this:

       entity_picture_template: >
          {% set player = 'media_player.plex_mobile_phone' %}
          {% if states(player) == 'playing' %}
            {{state_attr(player,'entity_picture')}}
          {% else %} /local/various/plex.png
          {% endif %}

it will show the picture of the media that is playing if ‘playing’ otherwise show a fixed local image

this can be done in JS too of course, as suggested above. You do need to be sure of the sensor, or the media_player s attributes. Hence the question to check inspector

btw, if you post another screenshot in inspector, please change to default theme and crop to the necessary details…

[spady7]

Hi All, I am trying to make working button card using template and variables, without success.
Here is my template:

  docker_button:
    variables:
      var_container_state: var_container_state
      var_name: Container Generico
    name: '[[[ return variables.var_name ]]]'
    cards:
      - show_name: true
        show_icon: true
        show_state: true
        hold_action:
          action: more-info
        tap_action:
          action: toggle
          confirmation:
            text: Sei sicuro?
        state: null
        value: 'off'
        styles:
          card:
            - background-color: |
                [[[
                  var container_state=states[variables.var_container_state].state;
                  if (container_state = 'running')
                    return "white";
                  return "black";
                ]]]
            - padding: 5%
            - font-size: 15px
            - text-shadow: 1px 1px 5px black
          icon:
            - color: |
                [[[
                   var container_state=states[variables.var_container_state].state;
                   if (container_state = 'running')
                     return "blue";
                   return "white";
                ]]]

and button card is as follow:

type: custom:button-card
template: docker_button
entity: switch.docker_alpine
variables:
  var_container_state: sensor.docker_alpine_state
  var_name: Alpine

Right now seems variables is not recalled by template from button card.
What’s wrong?

Regards

[Mariusthvdb (Marius)]

You’re making this awfully difficult to debug for yourself, because you use the ‘var_’ everywhere.

why dont you start simplifying that, eg like:

type: custom:button-card
template: docker_button
entity: switch.docker_alpine
variables:
  container: sensor.docker_alpine_state
  name: Alpine

so you can call this in the template like states[variables.container].state.

because thats the second issue: even though you have declared a variable in the template config, you create another variable with the same name in the background and color templates. You should simply call states[variables.container].state in those places.

having said that, always first try to create the button as standalone (without a template).
If that works, you can start creating the template for the re-useable code, and creating variables if needed.

[spady7]

Thanks Mariusthvdb for reply.
I tried create button stand alone and is working. So i thought to use then template.
I make changes you sugested me but nothing changed.

type: custom:button-card
template: docker_button
entity: switch.docker_alpine
variables:
  container: sensor.docker_alpine_state
  name: Alpine

Template:

  docker_button:
    variables:
      container: null
      name: Container Generico
    name: '[[[ return variables.name ]]]'
    cards:
      - show_name: true
        show_icon: true
        show_state: true
        hold_action:
          action: more-info
        tap_action:
          action: toggle
          confirmation:
            text: Sei sicuro?
        state: null
        value: 'off'
        styles:
          card:
            - background-color: |
                [[[
                  if (states[variables.container].state = 'running')
                    return "white";
                  return "black";
                ]]]
            - padding: 5%
            - font-size: 15px
            - text-shadow: 1px 1px 5px black
          icon:
            - color: |
                [[[
                   if (states[variables.container].state = 'running')
                     return "blue";
                   return "white";
                ]]]

[Mariusthvdb (Marius)]

right, so now, realize you create these variables twice, once in the template and once in the button itself. If you create it in the button, you don’t need to do it anymore in the template, where you can then simply call the variable. See eg my shortcut setup:

  - type: custom:button-card
    template: button_shortcut_menu
    variables:
      path: alarmclock
    tooltip: >
      [[[ return variables.view === variables.path
          ? 'Set alarm' : 'Alarm'; ]]]

and the template:

button_shortcut_menu:
  tooltip: >
    [[[ function capitalizeFirstLetter(string) {
              return string.charAt(0).toUpperCase() + string.slice(1);
              }
        return capitalizeFirstLetter(variables.tooltip.replace('_',' ')); ]]]
  variables:
    view: >
      [[[ return window.location.pathname.split('/')[2]; ]]]

also, check the variable name. in the template you enter Container Generico while in the button use Alpine. As said, take out the variables in the template and after that, check the inspector console on errors

[spady7]

I put in template “Container Generico” value of variables because if in button i cannot specify any value for that variable, is taken one inside tamplate. And this works fine.
What is not working is “[variables.container]” into template. If i put all code into button everything is working. Just to be clear, button is like below:

square: true
columns: 3
type: grid
cards:
  - show_name: true
    show_icon: true
    show_state: true
    name: Alpine
    type: custom:button-card
    hold_action:
      action: more-info
    tap_action:
      action: toggle
      confirmation:
        text: Sei sicuro?
    entity: switch.docker_alpine
    state: null
    value: 'off'
    styles:
      card:
        - background-color: |
            [[[
              if (states['sensor.docker_alpine_state'].state = 'running')
                return "white";
              return "black";
            ]]]
        - padding: 5%
        - font-size: 15px
        - text-shadow: 1px 1px 5px black
      icon:
        - color: |
            [[[
               if (states['sensor.docker_alpine_state'].state = 'running')
                 return "blue";
               return "white";
             ]]]

I cannot understand why.
What should be the best formatted code in part regarding “background-color” ?
I used

background-color: |
            [[[
              if (states['sensor.docker_alpine_state'].state = 'running')
                return "white";
              return "black";
            ]]]

Is it correct?

[Mariusthvdb (Marius)]

@spady7

I cannot understand why.

well, you’ve got some odd spacing issues. where you use state: null (which I never saw before tbh), I think you want to do

          state:
            - value: 'off'
              styles:
                card:
                  - background-color: |
                      [[[
                        if (states['sensor.backup_state'].state == 'backed_up')
                          return "white";
                        return "black";
                      ]]]
                  - padding: 5%
                  - font-size: 15px
                  - text-shadow: 1px 1px 5px black
                icon:
                  - color: |
                      [[[
                         if (states['sensor.backup_state'].state == 'backed_up')
                           return "blue";
                         return "white";
                       ]]]

how that works in your card puzzles me really.

if I change that in my example it immediately works

and moving that to a button-card:

- type: custom:button-card
  template: alpine
  variables:
    name: Alpine
    sensor: >
      [[[ return states['sensor.backup_state'].state; ]]]
  entity: switch.tester

and template:

alpine:
  show_name: true
  show_icon: true
  show_state: true
  name: >
    [[[ return variables.name; ]]]
  hold_action:
    action: more-info
  tap_action:
    action: toggle
    confirmation:
      text: Sei sicuro?
  state:
    - value: 'off'
      styles:
        card:
          - background-color: |
              [[[
                if (variables.sensor == 'backed_up')
                  return "white";
                return "black";
              ]]]
          - padding: 5%
          - font-size: 15px
          - text-shadow: 1px 1px 5px black
        icon:
          - color: |
              [[[
                 if (variables.sensor == 'backed_up')
                   return "blue";
                 return "white";
               ]]]

or, maybe more universally useable:

        - type: custom:button-card
          template: alpine
          variables:
            name: Alpine
            sensor: sensor.backup_state
          entity: switch.tester

and move all manipulation to the template:

alpine:
  show_name: true
  show_icon: true
  show_state: true
  name: >
    [[[ return variables.name; ]]]
  hold_action:
    action: more-info
  tap_action:
    action: toggle
    confirmation:
      text: Sei sicuro?
  state:
    - value: 'off'
      styles:
        card:
          - background-color: |
              [[[
                if (states[variables.sensor].state == 'backed_up')
                  return "white";
                return "black";
              ]]]
          - padding: 5%
          - font-size: 15px
          - text-shadow: 1px 1px 5px black
        icon:
          - color: |
              [[[
                 if (states[variables.sensor].state == 'backed_up')
                   return "blue";
                 return "white";
               ]]]

see how you can move data between button config and template?

[spady7]

Thank you for your advices; now is working!!
Was just indentation problem. Just fix all code and now it’s fine.
Just want ask if there is a way to speed up refresh of changed background or icon color.
If “state” changing, background or icon is not immediately changed. I need to refresh page (if i use PC) or from smartphone i need to tap refresh on upper right side of screen.
Is that normal or there is a way to fix it?

[Mariusthvdb (Marius)]

There is a way… did you read the documentation? It’s there

[spady7]

I will, sorry for stupid question
Thank you again for your help

[Mariusthvdb (Marius)]

haha, you’re welcome.

to give you a hint, this is an example used in my light buttons:

          - type: custom:button-card
            template: button_light
            name: Flash alert
            entity: light.flash_alert
            triggers_update: sensor.flash_alert_device_power

btw, you had more than simple spacing/indentation issues in those button-cards…

[spady7]

Thank you again!!! It works very nice now!!! Just to help (if anyone needs) i post used code. Maybe there are still some errors, but it working as aspected:

Button:

  - type: custom:button-card
    template: docker_button
    entity: switch.docker_alpine
    variables:
      container_state: sensor.docker_alpine_state
      name: Alpine
    triggers_update: sensor.docker_alpine_state

Template:

  docker_button:
    show_name: true
    show_icon: true
    show_state: true
    name: |
      [[[ return variables.name; ]]]
    hold_action:
      action: more-info
    tap_action:
      action: toggle
      confirmation:
        text: Sei sicuro?
    styles:
      card:
        - background-color: |
            [[[
              if (states[variables.container_state].state == 'running')
                return "white";
              return "black";
            ]]]
        - padding: 5%
        - font-size: 15px
        - text-shadow: 1px 1px 5px black
      icon:
        - color: |
            [[[
              if (states[variables.container_state].state == 'running')
                return "blue";
              return "white";
            ]]]

[Gleb1982]

Hi,
How do you run a script form custom-button

  - type: button
    tap_action:
      action: toggle
    entity: script.toggle_main_gate

works well, but same thing with custom-button doesn’t.
Please help, thanks!

[spady7]

Hi, how can I concatenate variables to a string into template?
Let me explain:

Button is something like this:

type: custom:button-card
template: docker_button
entity: switch.docker_alpine
variables:
  name: Alpine
  container_state: sensor.docker_alpine_state
  name_sensor: sensor.docker_alpine
triggers_update: sensor.docker_alpine_state

and in template (just posted a snippet of code) something like this:

        entities:
            - {{variables.name_sensor}} + "_state"
            - {{variables.name_sensor}} + "_cpu"
            - {{variables.name_sensor}} + "_percent"
            - {{variables.name_sensor}} + "_up_time"

and the final result should be:

         entities:
            - sensor.docker_alpine_state
            - sensor.docker_alpine_cpu
            - sensor.docker_alpine_memory_percent
            - sensor.docker_alpine_up_time

I cannot find a way to get the final result.

Thank you in advance

[Nome200]

Hi,
i made a custom svg washing machine icon and wanted to animate the water. For some reason as soon i apply any animation the water just disappears.

Here is my button card template icon

  icon_waschmaschiene:
    styles:
      custom_fields:
        icon:
          - width: 100%
          - fill: >
              [[[
                return (variables.state === 'on' || variables.state === 'playing') ? '#107b10' : '#9da0a2';
              ]]]     
    custom_fields:
      icon: >
        [[[
          let state = variables.state === 'on' ? 'on' : null;
          return `
            <svg viewBox="0 0 250 250">
              <style>
                @keyframes on {
                  0% {
                    transform: rotate(0deg) translate(-1.5%, 0%);
                  }
                  100% {
                    transform: rotate(-360deg) translate(-1.5%, 0%);
                  }
                }
                @keyframes off {
                  0% {
                    transform: rotateY(-360deg) translate(-1.5%, 0%);
                  }
                  45% {
                    transform: rotateY(-40deg);
                  }
                  55% {
                    transform: rotateY(0deg);
                  }
                  65% {
                    transform: rotateY(-15deg);
                  }
                  75% {
                    transform: rotateY(0deg);
                  }
                  85% {
                    transform: rotateY(-5deg);
                  }
                  95% {
                    transform: rotateY(0deg);
                  }
                }
                .on {
                  transform-origin: 49% 60%;
                  animation: on 1s linear infinite;
                  animation-fill-mode: both;   
                  animation-delay: 0s;                  
                }
              </style>
                <svg viewBox="0 0 250 250">
                <svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect class="{state}" width="150.88" height="207.1" rx="7.09" style="fill: #9ea0a2"/>
                <circle id="b2de5806-67c9-4b5d-9fee-83d0f6dde951" data-name="AuswahlRad" cx="123.77" cy="13.28" r="6.17" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
                <line y1="45.98" x2="33.21" y2="45.83" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
                <path d="M7197.48,7140.75c-12.86-.39-19.87,2.29-23.95,5a53.17,53.17,0,0,1-10.91,5.87,52.42,52.42,0,0,1-7.38,2.27" transform="translate(-7122.03 -7108.03)" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
                <line x1="151.04" y1="32.57" x2="75.44" y2="32.72" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
                <line x1="51.14" x2="51.5" y2="37.7" style="fill: none;stroke: #000;stroke-miterlimit: 10"/>
                <rect id="b53d26cb-9447-4261-93c3-e3f8a2d8288f" data-name="Display" x="56.33" y="7.05" width="42.32" height="15.67" style="fill: #0f0f0f"/>
                <rect id="a092cc82-ad97-49f2-ab67-5a42acf72815" data-name="Filter" x="5.69" y="162.91" width="46.26" height="38.88" rx="4" style="fill: #d6d6d6"/>
                <rect id="a05b31c1-989a-4f06-b836-d74b0ef7e89b" data-name="Waschmittel" x="70.17" y="162.91" width="75.49" height="38.88" rx="4" style="fill: #d6d6d6"/>
                <path id="b72f9b3b-834a-4a30-a6c6-19655e543854" data-name="grauer rahmen" d="M7199.5,7144.34a55.16,55.16,0,1,0,55.16,55.16A55.15,55.15,0,0,0,7199.5,7144.34Zm0,101.79a46.57,46.57,0,1,1,46.57-46.56A46.56,46.56,0,0,1,7199.46,7246.13Z" transform="translate(-7122.03 -7108.03)" style="fill: #4f4f4f"/>
                <path class="${state}" id="wasser" d="M7200.2,7218.55c-12.93-2.38-13.47-4.43-21.19-4.76a48.42,48.42,0,0,0-22.16,4.56,46.57,46.57,0,0,0,85.07.33,100.78,100.78,0,0,1-13.25,1.77A115.82,115.82,0,0,1,7200.2,7218.55Z" transform="translate(-7122.03 -7108.03)" style="fill: #6161f2"/>
                </svg>
            </svg>
          `;
        ]]]

[pedolsky]

@Gleb1982

entity: script.toggle_main_gate

It is entity_id:

[pedolsky]

  entities: |
    [[[ 
      return '- ' + variables.name + '_state<br>- ' + variables.name + '_cpu<br>-' 
    ]]]

and so on

[jimz011 (Jim)]

@RomRider versions 3.4.2 and 3.5.0-dev.1 are no longer available to download through HACS. I stumbled on this when I wanted to reinstall home assistant on another system. The stupid thing is that I have installed a clean instance of HA a few weeks ago and that one was able to download them.

Could you perhaps tell what we need to do to get the beta’s again through HACS?

Thanks

[DavidFW1960 (David)]

@jimz011

beta’s again through HACS?

Assume you have beta’s enabled for this card?

I don’t see 3.4.2 and 3.5.0-dev.1 either though.
They are still tagged in the repo though so you should be able to download from there

He has just deleted the releases.

[jimz011 (Jim)]

Yeah I have downloaded it manually, but it would have been nice if it were still selectable through HACS.

I hope he does one day release it since the card hasn’t seen an update for a long time.