larryo108
June 20, 2023, 4:37pm
5049
Unfortunately that didn’t work. I tried that and I tried this as well, which I have used for other items and I still can’t get the state.
base_on:
template:
- settings
- extra_styles
variables:
state: >
[[[ return !entity || entity.state; ]]]
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
entity_picture: >
[[[ return !entity || entity.attributes.entity_picture; ]]]
circle: >
[[[
if (entity) {
let input = entity.state,
r = 22,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke="rgb(0,0,0)" stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width="2.3" fill="rgba(255, 255, 255, 0.85)" style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="rgb(0,0,0)" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${parseInt(entity.state)}<tspan font-size="10">lx</tspan></text>
</svg>
`;
}
]]]
aspect_ratio: 1/1
show_state: false
show_label: false
show_icon: false
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"l l"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(3, min-content)
- gap: 1.3%
- align-items: start
- will-change: transform
name:
- justify-self: start
- line-height: 110%
- font-size: 15px
- font-weight: bold
state:
- justify-self: start
- line-height: 110%
- font-size: 12px
label:
- justify-self: start
- line-height: 110%
- font-size: 12px
card:
- border-radius: 10px
- border-width: 0
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- --mdc-ripple-color: rgb(0, 0, 0)
- color: rgb(0, 0, 0)
- background-color: rgba(255, 255, 255, 0.85)
djoaza
June 20, 2023, 4:56pm
5050
Show me your code of the card itself
larryo108
June 20, 2023, 5:19pm
5051
Here you go. This is the actual code and the main templates it relies on.
- type: custom:button-card
template:
- sensor_on
- icon_lux
entity: sensor.bedroom_ep1_multi_sensor_illuminance
name: Lux
show_state: true
sensor_on:
template:
- base_on
tap_action:
action: more-info
base_on:
template:
- settings
- extra_styles
variables:
state: >
[[[ return !entity || entity.state; ]]]
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
entity_picture: >
[[[ return !entity || entity.attributes.entity_picture; ]]]
circle: >
[[[
if (entity) {
let input = entity.state,
r = 22,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke="rgb(0,0,0)" stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width="2.3" fill="rgba(255, 255, 255, 0.85)" style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="rgb(0,0,0)" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${parseInt(entity.state)}<tspan font-size="10">lx</tspan></text>
</svg>
`;
}
]]]
aspect_ratio: 1/1
show_state: false
show_label: false
show_icon: false
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"l l"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(3, min-content)
- gap: 1.3%
- align-items: start
- will-change: transform
name:
- justify-self: start
- line-height: 110%
- font-size: 15px
- font-weight: bold
state:
- justify-self: start
- line-height: 110%
- font-size: 12px
label:
- justify-self: start
- line-height: 110%
- font-size: 12px
card:
- border-radius: 10px
- border-width: 0
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- --mdc-ripple-color: rgb(0, 0, 0)
- color: rgb(0, 0, 0)
- background-color: rgba(255, 255, 255, 0.85)
Tehlo
June 20, 2023, 6:29pm
5052
Hey are you even getting an image on recently added for Plex? I dont even get a proper image to show…
Tehlo
June 20, 2023, 7:49pm
5053
Hi!
I assume youve setup your Voordeur card to light up when the door opens. Could you perhaps share your code for this? I’ve been trying to get that to work but for some reason just cant. Thx fellow dutchie
Hi all,
do you anybody know why I have broken that “Vardagsrum”? I tried to delete it (that grid) and then I had broken “Studio” grid.
I tried to modify a lot of stuff but…without result… I am lost
Thanks in advance
deftonpl
June 21, 2023, 11:09am
5055
I would like to edit the title area of the grid to show when motion is detected in this area. I don’t care if with an icon as you can see in the image or even editing, for example, the color of the name of the area.
I have tried to do it in many ways (ie. card_mod) but I have not succeeded, can someone help me?
type: grid
elyisum
June 21, 2023, 12:11pm
5056
Tehlo
June 22, 2023, 10:40am
5058
Can anyone help me with this? I am using a smart power plug that tracks the amount of power it uses, based on which I have created a button. I’ve setup an if statement so when the power usage is above 10w, the button says the computer is online (which it is). However, when that happens and the PC is on, the button itself stays white. I’ve tried everything I know but cant seem to get it to work, can anyone check my code and see whats going wrong? Thanks!
- type: custom:button-card
entity: sensor.plug_gamingpc_power
name: Computer
template:
- base
- icon_tv
- loader
custom_fields:
icon: >
<ha-icon icon="mdi:server" style="color: #9da0a2;"></ha-icon>
circle: >
[[[
if (entity) {
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20.5" stroke="#313638" stroke-width="2" fill="rgba(255,255,255,0.00)" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${parseInt(entity.state)}<tspan font-size="10"> W</tspan></text>
</svg>
`;
}
]]]
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.kantoor_aan
state_display: >
[[[
if (entity.state > 10) {
return 'On';
}
if (entity.state > 10) {
return 'Off';
}
]]]
1 Like
djoaza
June 22, 2023, 11:16am
5059
maybe create a binary sensor
Tehlo
June 22, 2023, 11:20am
5060
already tried that, didnt work. Gave me the same result, everything state wise worked fine, but I couldn’t get the actual button to change color based on state.
djoaza
June 22, 2023, 11:49am
5061
I have a washing machine made on a binary sensor. Above 10W the card lights up white - on
Tehlo
June 22, 2023, 11:58am
5062
Can you share your code to see if I can adjust it with my own sensors?
larryo108
June 22, 2023, 1:02pm
5063
I believe I see an error in your state display code. Both on and off are expecting an entity.state greater than 10.
Tehlo
June 22, 2023, 1:21pm
5064
Oh yeah, had already fixed that right after I posted here and it still didnt work. Good eye tho!
djoaza
June 22, 2023, 3:14pm
5065
Sorry. Above 2W the sensor is on.
- platform: template
sensors:
pralka:
friendly_name: "Pralka"
value_template: "{{ states('sensor.pralka_energy_power')|float > 2.0 }}"
Tehlo
June 22, 2023, 4:44pm
5066
Just created this, the state once again works, it reports as true, but doesn’t light up the button. Whats your button code?
djoaza
June 22, 2023, 9:10pm
5067
- type: custom:button-card
entity: binary_sensor.pralka
name: Pralka
state_display: >
[[[ if (variables.state === true) return variables.translate_unknown;
if (entity.state == 'on') return 'Pranie';
if (entity.state == 'off') return 'Wyłączona';
]]]
double_tap_action:
!include popup/pralka.yaml
template:
- base
- icon_washing
Tehlo
June 23, 2023, 6:58am
5068
Same thing, doesn’t turn on, but it also doesn’t show the return values that you setup. I 1-1 copied your code and only changed my entity to sensor.gamingpc_status and it didnt work…
