📝 100% Templatable Lovelace Configurations

manjotsc · May 13, 2021, 6:26am

How would I integrate state_icon into this? New to home assistant

type: grid
cards:
  - type: grid
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.living_room_light
        icon: 'hass:lightbulb'
        show_name: true
        show_state: true
        name: Tube
        card_mod:
          style: |
            ha-card { 
              border-radius: 200px;
              }
      - type: button
        tap_action:
          action: toggle
        entity: light.living_room_leds
        icon: 'hass:lightbulb-outline'
        show_name: true
        show_state: true
        name: LEDs
        card_mod:
          style: |
            ha-card { 
              border-radius: 200px;
              }
    columns: 2
columns: 1
square: false

joshlawless · May 25, 2021, 9:14pm

I have an automation which updates the value of input_text:last_added_file with the local path of a surveillance station recording. That automation works fine, as far as I can see, because in the developer templating tab, I can check the value of {{states.input_text.last_added_file.state}} and it correctly resolves to /media/recording/Front Porch/20210525PM/Front Porch-20210525-145001-1621975801.mp4

What I’d like to do is have that automation feed a card in my frontend, so I can always access and play the most recent motion-detection recording, and it seems like this should work:

type: 'custom:config-template-card'
entities:
  - 'input_text.last_added_file'
card:
  type: iframe
  url: '${states.input_text.last_added_file.state}'

but the card doesn’t display anything

Using a static URL works fine, though:

card:
  type: iframe
  url: '/media/recording/Front Porch/20210525PM/Front Porch-20210525-145001-1621975801.mp4'

Can anyone help me understand what I’m doing wrong?

Ildar_Gabdullin · May 25, 2021, 9:23pm

You are trying to use a format which may be used for the “configuration.yaml” file, for the “Templates” window - but this will not work in "config-template-card".
Check the docs, especially code examples - you should use smth like this:

states['input_text.last_added_file'].state

BTW, even in the “configuration.yaml” file etc you should not use that "states.input_text.last_added_file.state":

joshlawless · May 25, 2021, 10:04pm

Thanks, that did it! Appreciate the quick answer!

typxxi · July 2, 2021, 10:07am

How can I use this to change values / units ?

Right now I have a sensor showing kWh with 3 decimals but in this use case of small figures it would be more usefull to have

44 Wh               instead of 
0,044 kWh

which is a lot harder to read, understand and judge.

How can I convert such a sensor’s data for use in a card by dividing that by 1000 ?

I have not found a kind of switch or so which would convert kWh in Wh from 0,044 (kWh) to 44.
thx

Ildar_Gabdullin · July 2, 2021, 2:32pm

You cannot.
For instance, in the Entities card - you may change a style, a name, an icon or an entity itself - but not the displayed state.

You have 2 options:

use a template sensor which is = “source_sensor X 1000”;
use this card-mod technique:

Some other cards like "mini-graph-card" have own methods to scale a state:

ASNNetworks · July 21, 2021, 2:11pm

Can someone help me template a card based on mediaquery of the device currently viewing? Basically I want to set colums to 3 when below a certain screen width and and 4 when above. Is this even possible?

Mariusthvdb · July 21, 2021, 2:15pm

isnt that exactly what GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. does?

ASNNetworks · July 21, 2021, 2:58pm

Yes, but different use case. From what I understand, I need to create multiple layout cards that show and hide depending on the mediaquery. Each filled with cards that then show. My goal is to prevent Lovelace creating cards that aren’t necessary (like duplicating layouts that either show or hide depending on states).

The grid card I’m using now is part of a bigger card (auto-entities, filled with grid card, filled with decluttering-card, with button-cards with templates). I want the same card, where the column variable says either 3 or 4, depending on the width of the screen.

If it’s a simple case of replacing grid card with 1 layout card inside auto-entities, then I’m all ears. The layout cards readme is a little confusing (if you have limited CSS experience).

I’m gonna see if I can work it out in one layout card inside auto-entities.

Mariusthvdb · July 21, 2021, 3:02pm

seems complex

maybe check GitHub - thomasloven/lovelace-state-switch: 🔹Dynamically replace lovelace cards depending on occasion and have that full config either use 3 or 4

ASNNetworks · July 21, 2021, 5:42pm

I got it partially working with layout-card inside auto-entities. Mediaqueery’s work, though somehow the title variable doesn’t work and the width is somehow smaller than when using grid-card. Gonna keep trying/testing.

~~If someone still has a way to make this work with config template card, I’m happy to hear suggestions!~~
Gonna stick with lay-out card for now. Works great and the smaller width isn’t bothersome. I created button-cards for titles instead of built in title of layout card (which somehow doesn’t work if it’s a layout card used inside a card). It was quite a challenge (having to alter many elements to accompany the changing grid). I will leave this comment, incase someone else stumbles upon the same challenge. Know you can use layout-card for this.

@Mariusthvdb thanks for the tip, works great (after many tries)!

GIF in action

Backstory: I have a Fold 2 smartphone and when folded, the icons are too small, when unfolded everything is too big. Now I have 3 cards, or 6 cards on that phone. While other phones show 4.

Mariusthvdb · July 21, 2021, 8:09pm

cool. maybe post your code in the layout card thread, so we can use it to our advantage?

ASNNetworks · July 21, 2021, 8:13pm

The code was actually basic and like the github example code. Using it in auto-entities is supported and mentioned as well I see. I was using the wrong order, rendering the mediaquery not working. I will create a ticket however since the title option somehow doesn’t work.

tofylion · September 12, 2021, 3:10pm

I have a couple of questions about using this card. First off, it’s a very versatile card that allows a lot of possibilities, so if these issues could be solved, it’d be amazing!

I’m making a card with a small animation using CSS transitions inside the card style. however, when I added the config template card, the animation seemed to stop. It just “blinks” or “pops” when turning from a state to another, without any animations or transition. Here is a gif explaining what happens.

The Lower card is the expected behaviour and the upper one is using the config template card.
Extra Notes: The way I understand why this is such, is because the whole card gets re-drawn when changing states. I don’t know how this should be fixed.
I can’t seem to add a style to the config card itself. I can style the card inside, but not the config card. The reason I want to do this is to add a “display: none” property so I can show and hide the card when I want.
The only way to update the card is by adding an entity. Sometimes I want other triggers. For example, I’m hiding the cards based on screen resolution, but it doesn’t respond as the entity hasn’t been changed. The only time they will change is when I turn the lights on or off. I will attach two gifs showing what I want and what is happening.

^Expected^

^Actual^
I hoped that I can add a trigger-update that updates all the time like here in custom button card. They have an option “triggers_update: all”
If you want to take a look at the code, I’ll paste it all here. It’s a bit long so check the parts of the style inside the button card and the variables:

type: 'custom:config-template-card'
entities:
  - light.bathroom_corridor_s1_engineering_room
variables:
  input_entity: ("input_select.test_state")
  on_state: ("lights")
  tile_width: 120
card:
  type: 'custom:layout-card'
  layout_type: grid
  cards:
    - type: 'custom:button-card'
      entity: light.bathroom_corridor_s1_engineering_room
      color_type: icon
      show_entity_picture: false
      show_icon: true
      show_state: true
      show_label: false
      show_name: true
      tap_action:
        action: toggle
      triggers_update: all
      style: |-
        "${ var tile_no = 1; 
            var base_tile = (tile_no <= 3);
            var position = tile_width*tile_no;
            var cur_state = states[input_entity].state;

            var vport_width = window.innerWidth*0.9 - (25*4);

            var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
            var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
            var view_more = cur_state == on_state;
            if (!(base_tile || size_fits || homekit_fits || view_more)) {
              ':host { display: none !important; }'
            } else {
              ':host { display: block !important; }'
            }
        }"
      name: '${on_state}'
      icon: 'hue:pendant-round'
      state:
        - value: 'on'
          color: '#D43A41'
          styles:
            card:
              - background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
              - box-shadow: 0 0 10px 0px
            name:
              - color: black
              - transition: .4s ease
            state:
              - color: 'rgba(0, 0, 0, 0.8)'
              - transition: .4s ease
            icon:
              - transition: .4s ease-out
            custom_fields:
              circle:
                - transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
                - transform: translateX(20px)
              rect:
                - background: 'linear-gradient(to bottom, #c32650, #f15a29)'
                - transition: .4s ease
        - value: 'off'
          color: '#ffffff'
          styles:
            icon:
              - transition: .4s ease-in
            card:
              - background: '#454545'
              - transition: 'off'
            name:
              - color: white
              - transition: .4s ease
            state:
              - color: 'rgba(255, 255, 255, 0.8)'
              - transition: .4s ease
            custom_fields:
              circle:
                - transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
              rect:
                - background: 'linear-gradient(to bottom, #202020, #343434)'
                - transition: .4s ease
      custom_fields:
        rect: |
          [[[
            return `<ha-card
              style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
              </ha-card>`
          ]]] 
        circle: |
          [[[
            return `<ha-icon
              icon="mdi:brightness-1"
              style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
              </ha-icon>`
          ]]] 
      styles:
        card:
          - padding: 5px 5px
          - border-radius: 13px
          - height: 94px
          - width: 109px
          - '--mdc-ripple-press-opacity': 0
        grid:
          - position: relative
        custom_fields:
          circle:
            - position: absolute
            - right: calc(7% + 20px)
            - top: 13%
            - height: 25px
          rect:
            - position: absolute
            - right: 7%
            - top: 15%
            - height: 20px
            - width: 40px
            - border-radius: 200px 200px
        state:
          - font-size: 11px
          - justify-self: start
          - padding: 0px 0px
          - position: relative
          - bottom: 8px
          - left: 6px
        name:
          - font-size: 12px
          - justify-self: start
          - font-weight: bold
          - position: relative
          - left: 6px
          - bottom: 10px
        icon:
          - position: absolute
          - left: 0%
          - top: '-12%'
          - width: 35%
    - type: 'custom:button-card'
      entity: light.bathroom_corridor_s1_engineering_room
      color_type: icon
      show_entity_picture: false
      show_icon: true
      show_state: true
      show_label: false
      show_name: true
      tap_action:
        action: toggle
      triggers_update: all
      name: Main Spot
      icon: 'hue:pendant-round'
      style: |-
        "${ var tile_no = 2; 
            var base_tile = (tile_no <= 3);
            var position = tile_width*tile_no;
            var cur_state = states[input_entity].state;

            var vport_width = window.innerWidth*0.9 - (25*4);

            var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
            var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
            var view_more = cur_state == on_state;
            if (!(base_tile || size_fits || homekit_fits || view_more)) {
              ':host { display: none !important; }'
            } else {
              ':host { display: block !important; }'
            }
        }"
      state:
        - value: 'on'
          color: '#D43A41'
          styles:
            card:
              - background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
              - box-shadow: 0 0 10px 0px
            name:
              - color: black
              - transition: .4s ease
            state:
              - color: 'rgba(0, 0, 0, 0.8)'
              - transition: .4s ease
            icon:
              - transition: .4s ease-out
            custom_fields:
              circle:
                - transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
                - transform: translateX(20px)
              rect:
                - background: 'linear-gradient(to bottom, #c32650, #f15a29)'
                - transition: .4s ease
        - value: 'off'
          color: '#ffffff'
          styles:
            icon:
              - transition: .4s ease-in
            card:
              - background: '#454545'
              - transition: 'off'
            name:
              - color: white
              - transition: .4s ease
            state:
              - color: 'rgba(255, 255, 255, 0.8)'
              - transition: .4s ease
            custom_fields:
              circle:
                - transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
              rect:
                - background: 'linear-gradient(to bottom, #202020, #343434)'
                - transition: .4s ease
      custom_fields:
        rect: |
          [[[
            return `<ha-card
              style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
              </ha-card>`
          ]]] 
        circle: |
          [[[
            return `<ha-icon
              icon="mdi:brightness-1"
              style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
              </ha-icon>`
          ]]] 
      styles:
        card:
          - padding: 5px 5px
          - border-radius: 13px
          - height: 94px
          - width: 109px
          - '--mdc-ripple-press-opacity': 0
        grid:
          - position: relative
        custom_fields:
          circle:
            - position: absolute
            - right: calc(7% + 20px)
            - top: 13%
            - height: 25px
          rect:
            - position: absolute
            - right: 7%
            - top: 15%
            - height: 20px
            - width: 40px
            - border-radius: 200px 200px
        state:
          - font-size: 11px
          - justify-self: start
          - padding: 0px 0px
          - position: relative
          - bottom: 8px
          - left: 6px
        name:
          - font-size: 12px
          - justify-self: start
          - font-weight: bold
          - position: relative
          - left: 6px
          - bottom: 10px
        icon:
          - position: absolute
          - left: 0%
          - top: '-12%'
          - width: 35%
    - type: 'custom:button-card'
      entity: light.bathroom_corridor_s1_engineering_room
      color_type: icon
      show_entity_picture: false
      show_icon: true
      show_state: true
      show_label: false
      show_name: true
      tap_action:
        action: toggle
      triggers_update: all
      name: Main Spot
      icon: 'hue:pendant-round'
      style: |-
        "${ var tile_no = 3; 
            var base_tile = (tile_no <= 3);
            var position = tile_width*tile_no;
            var cur_state = states[input_entity].state;

            var vport_width = window.innerWidth*0.9 - (25*4);

            var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
            var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
            var view_more = cur_state == on_state;
            if (!(base_tile || size_fits || homekit_fits || view_more)) {
              ':host { display: none !important; }'
            } else {
              ':host { display: block !important; }'
            }
        }"
      state:
        - value: 'on'
          color: '#D43A41'
          styles:
            card:
              - background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
              - box-shadow: 0 0 10px 0px
            name:
              - color: black
              - transition: .4s ease
            state:
              - color: 'rgba(0, 0, 0, 0.8)'
              - transition: .4s ease
            icon:
              - transition: .4s ease-out
            custom_fields:
              circle:
                - transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
                - transform: translateX(20px)
              rect:
                - background: 'linear-gradient(to bottom, #c32650, #f15a29)'
                - transition: .4s ease
        - value: 'off'
          color: '#ffffff'
          styles:
            icon:
              - transition: .4s ease-in
            card:
              - background: '#454545'
              - transition: 'off'
            name:
              - color: white
              - transition: .4s ease
            state:
              - color: 'rgba(255, 255, 255, 0.8)'
              - transition: .4s ease
            custom_fields:
              circle:
                - transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
              rect:
                - background: 'linear-gradient(to bottom, #202020, #343434)'
                - transition: .4s ease
      custom_fields:
        rect: |
          [[[
            return `<ha-card
              style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
              </ha-card>`
          ]]] 
        circle: |
          [[[
            return `<ha-icon
              icon="mdi:brightness-1"
              style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
              </ha-icon>`
          ]]] 
      styles:
        card:
          - padding: 5px 5px
          - border-radius: 13px
          - height: 94px
          - width: 109px
          - '--mdc-ripple-press-opacity': 0
        grid:
          - position: relative
        custom_fields:
          circle:
            - position: absolute
            - right: calc(7% + 20px)
            - top: 13%
            - height: 25px
          rect:
            - position: absolute
            - right: 7%
            - top: 15%
            - height: 20px
            - width: 40px
            - border-radius: 200px 200px
        state:
          - font-size: 11px
          - justify-self: start
          - padding: 0px 0px
          - position: relative
          - bottom: 8px
          - left: 6px
        name:
          - font-size: 12px
          - justify-self: start
          - font-weight: bold
          - position: relative
          - left: 6px
          - bottom: 10px
        icon:
          - position: absolute
          - left: 0%
          - top: '-12%'
          - width: 35%
    - type: 'custom:button-card'
      entity: light.bathroom_corridor_s1_engineering_room
      color_type: icon
      show_entity_picture: false
      show_icon: true
      show_state: true
      show_label: false
      show_name: true
      tap_action:
        action: toggle
      triggers_update: all
      name: Main Spot
      icon: 'hue:pendant-round'
      style: |-
        "${ var tile_no = 4; 
            var base_tile = (tile_no <= 3);
            var position = tile_width*tile_no;
            var cur_state = states[input_entity].state;

            var vport_width = window.innerWidth*0.9 - (25*4);

            var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
            var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
            var view_more = cur_state == on_state;
            if (!(base_tile || size_fits || homekit_fits || view_more)) {
              ':host { display: none !important; }'
            } else {
              ':host { display: block !important; }'
            }
        }"
      state:
        - value: 'on'
          color: '#D43A41'
          styles:
            card:
              - background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
              - box-shadow: 0 0 10px 0px
            name:
              - color: black
              - transition: .4s ease
            state:
              - color: 'rgba(0, 0, 0, 0.8)'
              - transition: .4s ease
            icon:
              - transition: .4s ease-out
            custom_fields:
              circle:
                - transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
                - transform: translateX(20px)
              rect:
                - background: 'linear-gradient(to bottom, #c32650, #f15a29)'
                - transition: .4s ease
        - value: 'off'
          color: '#ffffff'
          styles:
            icon:
              - transition: .4s ease-in
            card:
              - background: '#454545'
              - transition: 'off'
            name:
              - color: white
              - transition: .4s ease
            state:
              - color: 'rgba(255, 255, 255, 0.8)'
              - transition: .4s ease
            custom_fields:
              circle:
                - transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
              rect:
                - background: 'linear-gradient(to bottom, #202020, #343434)'
                - transition: .4s ease
      custom_fields:
        rect: |
          [[[
            return `<ha-card
              style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
              </ha-card>`
          ]]] 
        circle: |
          [[[
            return `<ha-icon
              icon="mdi:brightness-1"
              style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
              </ha-icon>`
          ]]] 
      styles:
        card:
          - padding: 5px 5px
          - border-radius: 13px
          - height: 94px
          - width: 109px
          - '--mdc-ripple-press-opacity': 0
        grid:
          - position: relative
        custom_fields:
          circle:
            - position: absolute
            - right: calc(7% + 20px)
            - top: 13%
            - height: 25px
          rect:
            - position: absolute
            - right: 7%
            - top: 15%
            - height: 20px
            - width: 40px
            - border-radius: 200px 200px
        state:
          - font-size: 11px
          - justify-self: start
          - padding: 0px 0px
          - position: relative
          - bottom: 8px
          - left: 6px
        name:
          - font-size: 12px
          - justify-self: start
          - font-weight: bold
          - position: relative
          - left: 6px
          - bottom: 10px
        icon:
          - position: absolute
          - left: 0%
          - top: '-12%'
          - width: 35%
    - type: 'custom:button-card'
      entity: light.bathroom_corridor_s1_engineering_room
      color_type: icon
      show_entity_picture: false
      show_icon: true
      show_state: true
      show_label: false
      show_name: true
      tap_action:
        action: toggle
      triggers_update: all
      name: Main Spot
      icon: 'hue:pendant-round'
      style: |-
        "${ var tile_no = 5; 
            var base_tile = (tile_no <= 3);
            var position = tile_width*tile_no;
            var cur_state = states[input_entity].state;

            var vport_width = window.innerWidth*0.9 - (25*4);

            var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
            var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
            var view_more = cur_state == on_state;
            if (!(base_tile || size_fits || homekit_fits || view_more)) {
              ':host { display: none !important; }'
            } else {
              ':host { display: block !important; }'
            }
        }"
      state:
        - value: 'on'
          color: '#D43A41'
          styles:
            card:
              - background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
              - box-shadow: 0 0 10px 0px
            name:
              - color: black
              - transition: .4s ease
            state:
              - color: 'rgba(0, 0, 0, 0.8)'
              - transition: .4s ease
            icon:
              - transition: .4s ease-out
            custom_fields:
              circle:
                - transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
                - transform: translateX(20px)
              rect:
                - background: 'linear-gradient(to bottom, #c32650, #f15a29)'
                - transition: .4s ease
        - value: 'off'
          color: '#ffffff'
          styles:
            icon:
              - transition: .4s ease-in
            card:
              - background: '#454545'
              - transition: 'off'
            name:
              - color: white
              - transition: .4s ease
            state:
              - color: 'rgba(255, 255, 255, 0.8)'
              - transition: .4s ease
            custom_fields:
              circle:
                - transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
              rect:
                - background: 'linear-gradient(to bottom, #202020, #343434)'
                - transition: .4s ease
      custom_fields:
        rect: |
          [[[
            return `<ha-card
              style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
              </ha-card>`
          ]]] 
        circle: |
          [[[
            return `<ha-icon
              icon="mdi:brightness-1"
              style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
              </ha-icon>`
          ]]] 
      styles:
        card:
          - padding: 5px 5px
          - border-radius: 13px
          - height: 94px
          - width: 109px
          - '--mdc-ripple-press-opacity': 0
        grid:
          - position: relative
        custom_fields:
          circle:
            - position: absolute
            - right: calc(7% + 20px)
            - top: 13%
            - height: 25px
          rect:
            - position: absolute
            - right: 7%
            - top: 15%
            - height: 20px
            - width: 40px
            - border-radius: 200px 200px
        state:
          - font-size: 11px
          - justify-self: start
          - padding: 0px 0px
          - position: relative
          - bottom: 8px
          - left: 6px
        name:
          - font-size: 12px
          - justify-self: start
          - font-weight: bold
          - position: relative
          - left: 6px
          - bottom: 10px
        icon:
          - position: absolute
          - left: 0%
          - top: '-12%'
          - width: 35%
    - type: 'custom:button-card'
      entity: light.bathroom_corridor_s1_engineering_room
      color_type: icon
      show_entity_picture: false
      show_icon: true
      show_state: true
      show_label: false
      show_name: true
      tap_action:
        action: toggle
      triggers_update: all
      name: Main Spot
      icon: 'hue:pendant-round'
      style: |-
        "${ var tile_no = 6; 
            var base_tile = (tile_no <= 3);
            var position = tile_width*tile_no;
            var cur_state = states[input_entity].state;

            var vport_width = window.innerWidth*0.9 - (25*4);

            var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
            var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
            var view_more = cur_state == on_state;
            if (!(base_tile || size_fits || homekit_fits || view_more)) {
              ':host { display: none !important; }'
            } else {
              ':host { display: block !important; }'
            }
        }"
      state:
        - value: 'on'
          color: '#D43A41'
          styles:
            card:
              - background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
              - box-shadow: 0 0 10px 0px
            name:
              - color: black
              - transition: .4s ease
            state:
              - color: 'rgba(0, 0, 0, 0.8)'
              - transition: .4s ease
            icon:
              - transition: .4s ease-out
            custom_fields:
              circle:
                - transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
                - transform: translateX(20px)
              rect:
                - background: 'linear-gradient(to bottom, #c32650, #f15a29)'
                - transition: .4s ease
        - value: 'off'
          color: '#ffffff'
          styles:
            icon:
              - transition: .4s ease-in
            card:
              - background: '#454545'
              - transition: 'off'
            name:
              - color: white
              - transition: .4s ease
            state:
              - color: 'rgba(255, 255, 255, 0.8)'
              - transition: .4s ease
            custom_fields:
              circle:
                - transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
              rect:
                - background: 'linear-gradient(to bottom, #202020, #343434)'
                - transition: .4s ease
      custom_fields:
        rect: |
          [[[
            return `<ha-card
              style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
              </ha-card>`
          ]]] 
        circle: |
          [[[
            return `<ha-icon
              icon="mdi:brightness-1"
              style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
              </ha-icon>`
          ]]] 
      styles:
        card:
          - padding: 5px 5px
          - border-radius: 13px
          - height: 94px
          - width: 109px
          - '--mdc-ripple-press-opacity': 0
        grid:
          - position: relative
        custom_fields:
          circle:
            - position: absolute
            - right: calc(7% + 20px)
            - top: 13%
            - height: 25px
          rect:
            - position: absolute
            - right: 7%
            - top: 15%
            - height: 20px
            - width: 40px
            - border-radius: 200px 200px
        state:
          - font-size: 11px
          - justify-self: start
          - padding: 0px 0px
          - position: relative
          - bottom: 8px
          - left: 6px
        name:
          - font-size: 12px
          - justify-self: start
          - font-weight: bold
          - position: relative
          - left: 6px
          - bottom: 10px
        icon:
          - position: absolute
          - left: 0%
          - top: '-12%'
          - width: 35%
    - type: 'custom:button-card'
      entity: light.bathroom_corridor_s1_engineering_room
      color_type: icon
      show_entity_picture: false
      show_icon: true
      show_state: true
      show_label: false
      show_name: true
      tap_action:
        action: toggle
      triggers_update: all
      name: Main Spot
      icon: 'hue:pendant-round'
      style: |-
        "${ var tile_no = 7; 
            var base_tile = (tile_no <= 3);
            var position = tile_width*tile_no;
            var cur_state = states[input_entity].state;

            var vport_width = window.innerWidth*0.9 - (25*4);

            var homekit_fits = (position < 360) && (window.matchMedia("(max-width: 768px)")).matches;
            var size_fits = (window.matchMedia("(min-width: 768px)")).matches && (vport_width > position);
            var view_more = cur_state == on_state;
            if (!(base_tile || size_fits || homekit_fits || view_more)) {
              ':host { display: none !important; }'
            } else {
              ':host { display: block !important; }'
            }
        }"
      state:
        - value: 'on'
          color: '#D43A41'
          styles:
            card:
              - background-image: 'linear-gradient(to top, #c7c7c7, #ffffff)'
              - box-shadow: 0 0 10px 0px
            name:
              - color: black
              - transition: .4s ease
            state:
              - color: 'rgba(0, 0, 0, 0.8)'
              - transition: .4s ease
            icon:
              - transition: .4s ease-out
            custom_fields:
              circle:
                - transition: '.4s cubic-bezier(.54, 1.60, .5, 1)'
                - transform: translateX(20px)
              rect:
                - background: 'linear-gradient(to bottom, #c32650, #f15a29)'
                - transition: .4s ease
        - value: 'off'
          color: '#ffffff'
          styles:
            icon:
              - transition: .4s ease-in
            card:
              - background: '#454545'
              - transition: 'off'
            name:
              - color: white
              - transition: .4s ease
            state:
              - color: 'rgba(255, 255, 255, 0.8)'
              - transition: .4s ease
            custom_fields:
              circle:
                - transition: '.3s cubic-bezier(.54, 1.60, .5, 1)'
              rect:
                - background: 'linear-gradient(to bottom, #202020, #343434)'
                - transition: .4s ease
      custom_fields:
        rect: |
          [[[
            return `<ha-card
              style= "background-color: transparent; border-radius: 200px 200px; box-shadow: 0px 0px;">
              </ha-card>`
          ]]] 
        circle: |
          [[[
            return `<ha-icon
              icon="mdi:brightness-1"
              style="width: 20px; height: 20px; color: rgba(255,255,255,1); ">
              </ha-icon>`
          ]]] 
      styles:
        card:
          - padding: 5px 5px
          - border-radius: 13px
          - height: 94px
          - width: 109px
          - '--mdc-ripple-press-opacity': 0
        grid:
          - position: relative
        custom_fields:
          circle:
            - position: absolute
            - right: calc(7% + 20px)
            - top: 13%
            - height: 25px
          rect:
            - position: absolute
            - right: 7%
            - top: 15%
            - height: 20px
            - width: 40px
            - border-radius: 200px 200px
        state:
          - font-size: 11px
          - justify-self: start
          - padding: 0px 0px
          - position: relative
          - bottom: 8px
          - left: 6px
        name:
          - font-size: 12px
          - justify-self: start
          - font-weight: bold
          - position: relative
          - left: 6px
          - bottom: 10px
        icon:
          - position: absolute
          - left: 0%
          - top: '-12%'
          - width: 35%
  layout:
    grid-template-columns: 'repeat(auto-fill, minmax(115px, auto))'
view_layout:
  grid-area: list

Thanks!

QbaF · September 22, 2021, 7:03pm

Hi,

is there possibility to use config-templetate-card to have entity value as a name for mini-media-player button?

I did try

shortcuts:
  buttons:
    - name: "${states['input_select.ytube_music_player_playlist'].state}"
      type: 'custom:config-template-card'
      ...

but with no success.

Ildar_Gabdullin · September 22, 2021, 7:55pm

Cannot tell you particularly about the mini-player-card but in general it is possible if using a correct syntax.
Your code is absolutely wrong.
Check the docs on Github for a syntax, examples are also provided there.
A proper syntax is kind of:

type: custom:config-template-card
entities:
...
card:
...

QbaF · September 22, 2021, 8:42pm

ok. I was trying to adopt Your examples to mini-media-player buttons code.
Most probably not possible as mmp buttons are not entities in fact. Pity. Thanks

Ildar_Gabdullin · September 22, 2021, 9:45pm

Post here your simplified code for the card with buttons you want to rename.

BTW, have you really tried to use the syntax template I posted above?
These docs on GitHub were made to read them.


type: custom:config-template-card
entities:
...
card:
  type: custom:mini-media-player
  … your code
  name: ${states[‘some sensor’].state}

QbaF · September 23, 2021, 12:27pm

I did it. It works. Anyway thank you for your willingness to help.
And, ad. BTW, I really did read the docs on GitHub and try few possibilities and even consulted in other thread on forum before posting here.

The only ony malfunction I noticed is that, I have 3 full heigh screen vertical-stack cards. Before using ctc theye were placed side by side. Now that one with ctc snap another vertical-stack card below. I tried another card between them and when it is 1-2 rows it still snap another vertical-stack; only 3 rows and more cause that next vertical card moved to the next column. I did try 25 elements (entities) card and still is not moved to the next column.

EDIT: I checked it and removing header code

type: custom:config-template-card
entities:
  - ...
card:

makes it format cards ok again

GaryOkie · October 13, 2021, 6:01pm

Just happened to catch a warning in the config-template-card.js code thrown by browser debug…

WARNING: config-template-card should not be used with the picture-elements card itself. Instead use it as one of the elements. Check the README for details

So for over a year, I’ve been happy with this card to solve the problem of automatic refresh of web content, thus avoiding having to manually refresh the browser cache.

This is how I have it coded now - whenever the timestamp is updated for a new image, the URL gets updated automatically and the latest image renders…

type: custom:config-template-card
variables:
  TIMESTAMP: states['input_text.front_drive_timestamp'].state
entities:
  - input_text.front_drive_timestamp
card:
  type: picture-elements
  image: ${'/local/snapshots/Front_Drive.jpg?v='+TIMESTAMP}
  elements:
  <snip>

I’ve tried to rearrange the code to comply, but this breaks the ability to include the variable in the URL since it is outside the config template…

type: picture-elements
image: /local/snapshots/Front_Yard.jpg
/* Unable to specify image: ${'/local/snapshots/Front_Drive.jpg?v='+TIMESTAMP} */
elements:
  - type: custom:config-template-card
    variables:
      TIMESTAMP: states['input_text.front_yard_timestamp'].state
    entities:
      - input_text.front_yard_timestamp
    element:
    <snip>

I would really like to know WHY the former method should not be used and if it is reasonable to continue to just ignore this warning?