Lovelace: Button card

[pedolsky]

If you mean the default colors of the custom card itself, compare the instructions in the readme:

By default, if the entity state is off , the color will be var(--paper-item-icon-color) , for on it will be var(--paper-item-icon-active-color) and for any other state it will be var(--primary-text-color) .

So in your case it is:

        [[[
          if (states['input_boolean.barn_light'].state == 'on')
          return "var(--paper-item-icon-active-color)";
          return "var(--paper-item-icon-color)";
        ]]]

[pedolsky]

Immediately after restart the sensor’s state is ‘unknown’. Have you tried several times?

[ASNNetworks]

I hope someone can help me with this. According to the docs it’s not supported, but could be the docs aren’t updating in this regard. Basically I want a service call to either contain data A or B depending on an attribute of the entity. For example:

if (entity.attributes.is_volume_muted == false) THEN:

service: media_player.volume_mute
service_data:
  is_volume_muted: false
  entity_id: entity

ELSE

service: media_player.volume_mute
service_data:
  is_volume_muted: true
  entity_id: entity

Is this possible in a single call-service action? I want to create a button that mutes/unmutes depending on the attribute of the entity (which depends on the is_volume_muted attribute). The challenge is that I can’t use a script, because I use this button inside an other card, which is part of a decluttering card. The main goal is so I can use this single button, for all my media_players to mute/unmute.

[firstof9]

Based on @tom_l’s template I added a little pulse effect to my light buttons that are on

    extra_styles: |
      @-webkit-keyframes pulsate {
          0%   { box-shadow: 0 0 5px var(--paper-item-icon-active-color); }
          50%  { box-shadow: 0 0 13px var(--paper-item-icon-active-color); }
          100% { box-shadow: 0 0 5px var(--paper-item-icon-active-color); }
      }

...
    state:
      - styles:
          card:
            - animation: pulsate 1s ease-out infinite
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
...

[pedolsky]

You can use a template for true and false like

tap_action:
  action: call-service
  service: media_player.volume_mute
  service_data:
    is_volume_muted: >
      [[[ if (entity.attributes.is_volume_muted == true) return 'true'; return
      'false' ]]]
    entity_id: …

but the service toggles no matter if true or false is set.

[ASNNetworks]

Thanks, works! (Though I accidentally reversed true/false in my own example).

[Mariusthvdb (Marius)]

@Tsar

but nothing happens

you might have to reverse the logic ;-). if the binary is on, it now turns on, and the same for ‘off’

You didnt indicate the exact intension for you service, so I just followed what you said…

[Marcoletto (Marco)]

@Mariusthvdb

entity.state

Hello,
I would like to do a button with a circular timer on the right top corner.
The button activate a “input_boolean.scaldabagno_temporizzato” and the timer is “timer.scaldabagno”.
Timer is in minutes (2min - 20 min the tipical range)

Can anybody help me?
I’m not able to work with “advanced styling options” and with “custon fields”, least of all with structured templates and I would like someone to show me how to create the code to take it as an example and learn how to make others.
(

Actually I have this bad configuration:

type: vertical-stack
cards:
  - type: button
    entity: input_boolean.scaldabagno_temporizzato
    name: Scaldabagno Timer
    icon: mdi:thermometer-plus
  - type: custom:timer-bar-card
    entities:
      - timer.scaldabagno
    full_row: true
    text_width: 50px

Thank you all!

[ASNNetworks]

Is it possible to have a shadow behind an icon? In this particular case I don’t use any text and there is no card background (set tot none), so I strictly use an icon and want a shadow effect. text-shadow and box-shadow don’t work in this case. I could have sworn I saw someone post something like that, but I can’t find it anywhere.

[pedolsky]

Maybe you are looking for filter:drop-shadow:

styles:
  icon:
    - filter: drop-shadow(0px 0px 11px rgba(0,0,0,1))

[ASNNetworks]

Thanks, that was it! Works great and makes icons more visible with light/white backgrounds which is why I needed this .

[yaruslavm]

Hey
First of all i am new to home assistance.
working on my dashboard and i am using “custom:button-card”
in this example i am using show_last_changed: true instead of label ( because label is not updated in the frontend)

this how i control the style
label:
- font-size: 11px
- padding-left: 5px
- justify-self: left
- margin-top: 0%

i am trying to shorten the “35 minutes ago” to 35m and if its hours then 2h
like here

any help where can i control this transformation and what is the syntax for this
i went over the docs for button card several times and could not figure it out.

[pedolsky]

Welcome to the forums!

Here you can find a nice example. For your needs it would be something like:

type: custom:button-card
entity: binary_sensor.YOUR_SENSOR
show_label: true
label: |
        [[[
          var l = entity.last_changed;
          var t,s=(new Date()-new Date(l))/1e3;
          return (
          (t=Math.floor(s/86400))?t+(t>1?" days":" day"):
          (t=Math.floor(s/3600))?t+(t>1?" h":" h"):
          (t=Math.floor(s/60))?t+(t>1?" m":" m"):
          (t=Math.floor(s))!==1?t+" sec":" sec") + ' ago'
        ]]]

The circle is built with a custom_field which displays the last state change. In the documentation you will find a beginner’s guide: Custom Fields

[yaruslavm]

Hey @pedolsky

thanks for the welcome and for the code
unfortunately the only issue with this is that the timer is not updated if dome like this.

#1 is your code in the label
#2 is a template that i made previously and it is similar to your piece.

     value_template: >
      {%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.contact_sensor.last_changed)) | int  %}
      {%- set minutes = ((time % 3600) // 60) %}
      {%- set hours = ((time % 86400) // 3600) %}
      {%- set days = (time // 86400) %}
        {% if time < 60 %}
        '<1m'
        {%- else -%}
          {%- if time > 86400 -%}
            {{days}}d
              {%- else -%}
              {%- if time > 3600 -%}
                {{hours}}h
                  {%- else -%}
                  {%- if time > 60 -%}
                    {{minutes}}m
                  {%- endif -%}
              {%- endif -%}
          {%- endif -%}
        {% endif %}

#3 is the “show_last_changed: true”

I am wondering is there is any way to control the method 3 ( and shorten the displayed text )
OR
Maybe i can group several sensors in the template ?

[Marcoletto (Marco)]

@pedolsky

Custom Fields

Nobody can help me, please?
I’m going crazy

Thank you…

[yaruslavm]

@Marcoletto

to use custom fields you need to use “button-card”
Button Card ( install via hacs)
then just take the sample code from
Custom field sample

then you can check Hass config for how he realized full circle in the layout (what you looking for starts at line 318)

[pedolsky]

Sorry mate, I have no clue how to make this flexible and not depending on 20sec.
Maybe @Mariusthvdb would be so kind and give you an answer.

[pedolsky]

Yes, I noticed this, too. I know use this one:

            label: |
              [[[
                  var l = entity.last_changed;
                  var last_date = new Date(l);
                  var now_date = Date.now();
                  var diff = now_date - last_date;
                  var msec = diff;

                  var dd = Math.floor(msec / 1000 / 60 / 60 / 24);
                  msec -= dd * 1000 * 60 * 60 * 24;

                  var hh = Math.floor(msec / 1000 / 60 / 60);
                  msec -= hh * 1000 * 60 * 60;

                  var mm = Math.floor(msec / 1000 / 60);
                  msec -= mm * 1000 * 60;

                  var ss = Math.floor(msec / 1000);
                  msec -= ss * 1000;

                  var ddtext = '00';
                  if (dd > 0){ ddtext = String(dd) + ' T. ';}
                  if (ddtext.length == 1){ddtext = ddtext + ' T. '};
                  if (ddtext == '00'){ddtext = ' '};

                  var hhtext = '00';
                  if (hh > 0){ hhtext = String(hh) + ' Std. ';}
                  if (hhtext.length == 1){hhtext = hhtext + ' Std. '};
                  if (hhtext == '00'){hhtext = ' '};

                  var mmtext = '00';
                  if (mm > 0){ mmtext = String(mm) + ' min. ';}
                  if (mmtext.length == 1) { mmtext = mmtext + ' min. '};
                  if (mmtext == '00'){mmtext = 'wenigen Sekunden'};

                  var sstext = '00';
                  if (ss > 0) { sstext = String(ss) + ' sek.';}
                  if (sstext.length == 1) { sstext = sstext + ' sek.'};
                  if (sstext == '00'){sstext = ' '};

                  return `(zuletzt vor ${(ddtext + hhtext + mmtext )})`;
              ]]]

[Mariusthvdb (Marius)]

Not at a Mac just now but please stay calm. Going Mad is not good and not necessary in this topic of super helpful people…

So, my advice is to start small. Add a item per item and check.

Please have a look at my gist for button_card_templates and look for a notification custom_field. The link is in my profile

You should be able to copy that, adjust a few entities and load it in your button

[Bergals (Bergen Larsen)]

I’ve opted to expand this challenge to it’s own thread … since it may not fit just under the button-card, and I’m open to all options to get the job done.

I’ve got a challenge on my hands.

It may not be challenging for you beautiful people, but hey ho, that’s why I’m here seeking brains that aren’t as frazzled as mine.

Background

I’ve tried doing what I’m about to describe using a picture-entity card - got most of the way there with separate images, but for some I get a spinner of death after a certain number of entity state images (I think it was after 8…).

So two options to overcome this - a: card-mod… or b: custom button card!

Here I am trying out the custom button card solution and it’s getting too late for me to get it working on own.

My challenges (to me and) to you!

• I’m trying to create a card that displays a picture of my car - as an SVG image. (The easy part)

• I’m trying to update the fill colour of various paths (identified by class tags) based on the state of a sensor entity. (my javascript is weak… and googling says I’m the only one mad enough to try it in lovelace and the custom components I’ve got… or I’m using the wrong search terms).

• Each item is on a different sensor: eg, front right door lock = sensor.car_front_door_right, front left window = sensor.car_front_left_window

• I’m not sure where to put the javascript so it’ll update (I’ve got a hunch, but am I right?) the one image from multiple sensors…

Below is where I got to so far, I’ll carry on hacking away

YAML card:

    - type:  'custom:button-card'
      # template: 
      # - card_generic_swap      
      entity: sensor.ml71nym_car
      
      show_entity_picture: true
      entity_picture: /local/EQA/EQA-Merc-Top-RHD.svg
      # extra_styles: >
      #   [[[
      #     let 
      #   ]]]   
      show_icon: false
      show_label: false
      show_name: false
      show_state: false
      styles:
        card:
          - height: 190px
          - border-radius: 14px
          - box-shadow: none
          # - font-size: 30px
          - text-align: left
          - cursor: default
        entity_picture: 
          - width: 95%
          - transform: >
              [[[
                if (states['sensor.front_right_door'].state == "Open")
                return "
                    .theClassOfThePathInTheSVG {
                      filter: hue-rotate(180deg);
                      }";
                if (states['sensor.front_right_door'].state == "Open")
                return "
                    .theClassOfThePathInTheSVG {
                      filter: hue-rotate(180deg);
                      }";
                if (states['sensor.front_right_door'].state == "Open")
                return "
                    .theClassOfThePathInTheSVG {
                      filter: hue-rotate(180deg);
                      }";
              ]]]
          # - color: [] # >
              # [[[
              #   var svgHolder = document.querySelector('svg#carOutline');
              #   svgHolder.onload = function () {
              #       var svgDocument = svgHolder.contentDocument;
              #       var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

              #       // Now (ab)use the @import directive to load make the browser load our css // '@import url("/css/your-dynamic-css.css");'; or..
              #       style.textContent = "<style>
              #                             .bvl-icon-lamp-outline{
              #                               fill:rgba(var(--rgb-primary-text-color), 0.7);
              #                               } 
              #                             </style>";
              #       var svgElem = svgDocument.querySelector('svg');
              #       svgElem.insertBefore(style, svgElem.firstChild);
              # ]]]

        img_cell:
          - border-radius: 14px
          - height: 100%
      # custom_fields:

Sample of SVG Image with sample classes: carOutline, doorHandle_rearLeft, doorHandle_rearRight,
doorHandle_frontLeft,doorHandle_frontRight … can be found here on dropbox.