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:
- 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:
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 
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 
(after many tries)!
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!
- 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!
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:
- Can I add variables in variables definition?:
variables:
VAR1: 1119
VAR2: parseFloat(states['sensor.sensor1'].state) + '${VAR1}' * 5
- How do you code:
VAR3: parseFloat(states[āsensor.sensor1ā].state) + (number_of_days_between_today_and_date / number_of_days_between_two_dates)