šŸ“ 100% Templatable Lovelace Configurations

Thanks, that did it! Appreciate the quick answer!

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

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:

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

1 Like

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?

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

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.

seems complex :wink:

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

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 :smiley: (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.

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

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.

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!

  1. 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.
    ezgif.com-gif-maker
    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.
  2. 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.
  3. 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.
    responsive
    ^Expected^
    not_responsive
    ^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!

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.

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:
...

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

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}

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

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?

You can ignore the warning if youā€™re not having any performance issues. Lots of people are using picture-elements for floor plans with lots of entities being watched and it can cause issues with it being updated quite often. Obviously if you are using it for a card-level variable, continue to do so. If you are doing it for templating an element though, Iā€™d follow the Readme examples in those situations.

1 Like

Thanks very much Ian for the clear explanation. This is a very simple card that works fine without performance problems. So no worries then!

Add-on really bringing important functionalities to HA.
Two questions due to lack of javascript skills:

  1. Can I add variables in variables definition?:
variables:
  VAR1: 1119
  VAR2: parseFloat(states['sensor.sensor1'].state) + '${VAR1}' * 5
  1. How do you code:

VAR3: parseFloat(states[ā€˜sensor.sensor1ā€™].state) + (number_of_days_between_today_and_date / number_of_days_between_two_dates)