Nemu
February 15, 2024, 4:21pm
413
This is my latest project. I made my old washing maschine “smart” with a smart plug. The available automations, did not fit my needs as I wanted to create a nice card.
Thanks to some nice scripts Leon showed on his YouTube channel!
8 Likes
Nemu
February 15, 2024, 6:48pm
415
Sure. Here is my code for the 3 template sensors. The card needs all of them to work. If you dont want the timer or end -time, you csn just use the first template sensor alone and work with the attributes.
my threshold are set
the 2 values 30 are the time it needs to detect the thresholds.
If the sensor detects start >= 30 (s) the attribute cycle switches from starting to washing.
the last sensor has number 59 inside. Thats the average running time of our washing mashine.
##### Waschmaschine #####
- platform: template
sensors:
waschmaschine_status:
friendly_name: "Waschmaschine Status"
value_template: >-
{% set power = states('sensor.steckdose_waschkuche_power') | float %}
{% set cycle_state = state_attr('sensor.waschmaschine_status', 'cycle') %}
{% set threshold_start = 7 %}
{% set threshold_end = 5 %}
{% if cycle_state == 'washing' %}
{% set threshold_start = threshold_end %}
{% endif %}
{% if power > threshold_start %}
on
{% elif power <= threshold_end %}
off
{% endif %}
attribute_templates:
cycle: >-
{% if is_state('sensor.waschmaschine_status', 'on') %}
{% if (as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_status.attributes.triggered)) >= 30 %}
washing
{% else %}
starting
{% endif %}
{% elif is_state('sensor.waschmaschine_status', 'off') %}
{% if (as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_status.attributes.triggered)) >= 30 %}
end
{% else %}
finishing
{% endif %}
{% else %}
unknown
{% endif %}
running_end: >-
{% if is_state_attr('sensor.waschmaschine_status', 'cycle', 'washing') or
is_state_attr('sensor.waschmaschine_status', 'cycle', 'finishing') %}
running
{% else %}
end
{% endif %}
triggered: >-
{{ as_timestamp(states.sensor.waschmaschine_status.last_changed) | timestamp_custom('%Y-%m-%d %H:%M:%S', true) }}
- platform: template
sensors:
waschmaschine_running:
friendly_name: "Waschmaschine Running"
value_template: >-
{% if is_state_attr('sensor.waschmaschine_status', 'cycle', 'washing') or
is_state_attr('sensor.waschmaschine_status', 'cycle', 'finishing') %}
running
{% else %}
end
{% endif %}
- platform: template
sensors:
waschmaschine_timer:
friendly_name: "Waschmaschine Timer"
value_template: >-
{% if is_state('sensor.waschmaschine_running', 'running') %}
on
{% else %}
off
{% endif %}
attribute_templates:
triggered: >-
{{ as_timestamp(states.sensor.waschmaschine_timer.last_changed) | timestamp_custom('%Y-%m-%d %H:%M:%S', true) }}
remaining: >-
{% if is_state('sensor.waschmaschine_timer', 'off') %}
00:00:00
{% else %}
{% set remaining_time = 59 * 60 %}
{% set time_passed = as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_timer.attributes.triggered) %}
{% set remaining_seconds = remaining_time - time_passed %}
{% if remaining_seconds > 0 %}
{{ remaining_seconds | timestamp_custom('%H:%M:%S', false) }}
{% else %}
00:00:00
{% endif %}
{% endif %}
remaining_perc: >-
{% if is_state('sensor.waschmaschine_timer', 'off') %}
0
{% else %}
{% set total_time = 59 * 60 %}
{% set time_passed = as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_timer.attributes.triggered) %}
{% set remaining_seconds = total_time - time_passed %}
{% set remaining_perc = (remaining_seconds / total_time) * 100 %}
{% if remaining_perc > 0 %}
{{ remaining_perc | round(2) }}
{% else %}
0
{% endif %}
{% endif %}
end_time: >-
{% set remaining_time = 59 * 60 %}
{{ (as_timestamp(states.sensor.waschmaschine_timer.attributes.triggered) + remaining_time) | timestamp_custom('%Y-%m-%d %H:%M:%S', true) }}
1 Like
Nemu
February 15, 2024, 6:50pm
416
This is my code for the card.
type: custom:button-card
entity: switch.steckdose_waschkuche
name: Waschmaschine
icon: |
[[[
if (states['sensor.waschmaschine_status'].attributes.cycle == 'starting') {
return 'mdi:dots-circle';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'washing') {
return 'mdi:circle-half-full';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'finishing') {
return 'mdi:dots-circle';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'end') {
return 'mdi:washing-machine';
}
]]]
show_name: true
show_icon: true
show_label: true
show_state: false
hold_action:
action: more-info
label: |
[[[
if (states['sensor.waschmaschine_status'].attributes.cycle == 'starting') {
return 'starten';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'washing') {
return 'wäscht';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'finishing') {
return 'wird beendet';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'end') {
return 'Ende';
}
]]]
custom_fields:
bar: |
[[[
var color = "green";
var state = 100 - states['sensor.waschmaschine_timer'].attributes.remaining_perc;
if (state < 10) color = "red";
else if (state < 50) color = "yellow";
else if (state < 70) color = "orange";
return `
<div>
<div style="background:${color}; height: 12px; width:${state}%">
</div>
</div>`
]]]
rem:
card:
type: conditional
conditions:
- condition: state
entity: switch.steckdose_waschkuche
state: 'on'
card:
type: custom:button-card
entity: sensor.waschmaschine_timer
name: |
[[[
var remainingTime = states['sensor.waschmaschine_timer'].attributes.remaining;
return `Restlaufzeit: ${remainingTime}`;
]]]
show_icon: false
styles:
card:
- width: min
- background: none
- overflow: visible
name:
- font-size: 14px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
- font-weight: 500
start:
card:
type: conditional
conditions:
- condition: state
entity: switch.steckdose_waschkuche
state: 'on'
card:
type: custom:button-card
entity: sensor.waschmaschine_timer
name: |
[[[
var endTime = states['sensor.waschmaschine_timer'].attributes.triggered;
// Extract time from the end time
var time = new Date(endTime).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: false});
return `${time} Uhr`;
]]]
show_icon: false
styles:
card:
- width: min
- padding: 5px
- background: none
name:
- font-size: 12px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
end:
card:
type: conditional
conditions:
- condition: state
entity: switch.steckdose_waschkuche
state: 'on'
card:
type: custom:button-card
entity: sensor.waschmaschine_timer
name: |
[[[
var endTime = states['sensor.waschmaschine_timer'].attributes.end_time;
// Extract time from the end time
var time = new Date(endTime).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: false});
return `${time} Uhr`;
]]]
show_icon: false
styles:
card:
- width: min
- padding: 5px
- background: none
name:
- font-size: 12px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
icon1: |
[[[
return '<ha-icon icon="mdi:washing-machine"></ha-icon>';
]]]
icon2: |
[[[
if (entity.state == "on"){
return '<ha-icon icon="mdi:toggle-switch-outline"></ha-icon>';
} else {
return '<ha-icon icon="mdi:toggle-switch-off-outline"></ha-icon>';
}
]]]
styles:
grid:
- grid-template-areas: '". icon1" "l l" "n icon2" "rem icon2" "bar bar" "start end"'
- grid-template-rows: 24px 1fr 24px min-content min-content min-content
- grid-template-columns: 60% 40%
card:
- height: 100%
- padding: 1rem
- background: |
[[[
if (entity.state == 'on') {
return 'var(--green)';
} else {
return 'var(--primary-text-color)';
}
]]]
img_cell:
- position: absolute
- top: 20%
- left: 40%
- overflow: visible
icon:
- position: absolute
- width: 20em
- opacity: 20%
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
- transform: rotate(-20deg)
- animation: |
[[[
if (states['sensor.waschmaschine_status'].attributes.cycle == 'end') {
return 'null';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'starting') {
return 'blink 1.5s linear infinite';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'washing') {
return 'rotating 2s linear infinite';
} else if (states['sensor.waschmaschine_status'].attributes.cycle == 'finishing') {
return 'blink 1.5s linear infinite';
}
]]]
label:
- text-align: left
- font-size: 14px
- font-weight: 500
- justify-self: start
- align-self: end
- overflow: visible
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
name:
- text-align: left
- font-size: 12px
- opacity: 0.7
- justify-self: start
- align-self: center
- overflow: visible
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
custom_fields:
bar:
- justify-self: start
- width: 100%
- height: |
[[[
if (entity.state == 'off') {
return '0px';
} else {
return '12px';
}
]]]
- background: '#cccccc'
- border-radius: 24px
end:
- justify-self: end
start:
- justify-self: start
rem:
- justify-self: start
- align-self: end
- height: |
[[[
if (entity.state == 'off') {
return '0px';
} else {
return '27px';
}
]]]
icon1:
- justify-self: end
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
icon2:
- justify-self: end
- align-self: end
- width: 24px
- color: |
[[[
if (entity.state == 'on') {
return 'var(--black)';
} else {
return 'var(--primary-background-color)';
}
]]]
hold_action:
action: more-info
1 Like
Nemu
February 16, 2024, 1:51pm
417
Just one further code. To get the washing machine timer / countdown to also count the seconds, add this to your automation.yaml
- alias: "Update waschmaschine_timer every second"
trigger:
- platform: time_pattern
seconds: "/1"
action:
- service: homeassistant.update_entity
entity_id: sensor.waschmaschine_timer
1 Like
jlnbln
February 28, 2024, 9:33am
419
Hey, first thanks for all the work! I like your design. I tried implementing your alarm card into my dashboard. I had to change it a bit to make it work properly, but one thing I can’t figure out is how to change the color of the selected mode.
This is the template code I am using.
alarm:
template: base
icon: mdi:shield-home
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-off-outline
custom_fields:
cs: Disarmed
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
- value: arming
icon: mdi:shield-lock-open
styles:
icon:
- animation: blink 2s ease infinite
custom_fields:
cs: Arming...
- value: armed_away
icon: mdi:shield-lock
custom_fields:
cs: Away
- value: armed_home
icon: mdi:shield-home
custom_fields:
cs: Home
- value: triggered
icon: mdi:shield-alert-outline
styles:
card:
- background-color: var(--red)
name:
- color: var(--black)
icon:
- color: var(--black)
- animation: blink 2s ease infinite
custom_fields:
cs:
- color: var(--black)
es:
- color: var(--black)
custom_fields:
cs: Triggered
styles:
grid:
- grid-template-areas: '"i i" "cs ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
ec:
- justify-self: start
- justify-content: center
cs:
- color: var(--contrast18)
es:
- color: var(--contrast18)
card:
- background: var(--contrast2)
icon:
- color: var(--contrast18)
name:
- color: var(--contrast12)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- armed_home
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
This is the part that I think doesn’t work.
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
Any ideas how I can fix it?
And I also have a second question. I was trying to use your apex-chart code, but for some reason the colors don’t work. If I put regular colors it works, but if I use a variable like var(–green) it doesn’t. Any ideas how to fix that?
jlnbln
February 28, 2024, 10:34pm
420
I took this card and made two person cards of it. In case anyone wants to use them here is the code.
Big Version:
type: custom:button-card
name: Person
show_name: false
show_state: false
show_icon: true
show_entity_picture: true
entity: person.person
tap_action:
action: more-info
styles:
card:
- background-color: var(--contrast2)
- padding: 10px 0px 10px 10px
grid:
- grid-template-areas: '"name name btn" "state btn1 btn" "icon btn1 btn"'
- grid-template-columns: 3fr min-content min-content
- grid-template-rows: 1em 1em 1fr
img_cell:
- justify-content: start
- position: absolute
- width: 90px
- height: 90px
- left: 0
- bottom: 0
- margin: 0 0 -10px -10px
- border-radius: 500px
entity_picture:
- justify-content: start
- position: absolute
- width: 90px
- height: 90px
- left: 0
- bottom: 0
- margin: 0 0 0 0
- border-radius: 500px
icon:
- width: 45px
- color: var(--contrast1)
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
- padding: 5px
state:
- align-self: start
- justify-self: start
- background: none
- padding: 5px
- margin-top: 5px
btn1:
- align-self: end
- justify-self: end
- padding-right: 8px
btn:
- align-self: end
- justify-self: end
- padding-right: 5px
icon:
- align-self: start
- justify-self: start
custom_fields:
name:
card:
type: custom:button-card
name: Person
styles:
card:
- color: var(--contrast20)
- font-size: 18px
- font-weight: 500
- background: none
state:
card:
type: custom:button-card
entity: person.person
show_icon: false
name: |
[[[
return states['person.person'].state;
]]]
state:
- value: home
name: Home
- value: not_home
name: Away
styles:
card:
- color: var(--contrast20)
- font-size: 13px
- background: none
- opacity: '0.7'
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
tap_action:
action: more-info
entity: sensor.person_battery_level
content_info: none
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--contrast4)' if states('sensor.person_battery_level') | float > 10 else 'var(--red)' }};
--color: {{ 'var(--contrast20)' if states('sensor.person_battery_level') | float > 10 else 'var(--black)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: entity
tap_action:
action: more-info
entity: sensor.person_iphone_steps
content_info: none
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--green)' if states('sensor.person_iphone_steps') | float > states('sensor.person2_iphone_steps') | float else 'var(--red)' }};
--color: var(--black);
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: entity
tap_action:
action: more-info
entity: sensor.home_person_direction_of_travel
content_info: none
card_mod:
style: |
ha-card {
--chip-background: var(--contrast4);
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
}
Small Version:
type: custom:button-card
name: Person
show_name: false
show_state: false
show_icon: true
show_entity_picture: true
entity: person.Person
tap_action:
action: more-info
styles:
card:
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
grid:
- grid-template-areas: '"icon name btn" "icon state btn"'
- grid-template-columns: 60px 1fr min-content
- grid-template-rows: min-content
img_cell:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 8px 10px
- border-radius: 500px
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 0 0
- border-radius: 500px
icon:
- width: 50px
- color: var(--contrast1)
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
- padding: 0
state:
- align-self: start
- justify-self: start
- background: none
- padding: 0
- margin-top: '-5px'
btn:
- align-self: end
- justify-self: end
icon:
- align-self: start
- justify-self: start
custom_fields:
name:
card:
type: custom:button-card
name: Person
styles:
card:
- color: var(--contrast20)
- font-size: 14px
- font-weight: 600
- background: none
state:
card:
type: custom:button-card
entity: person.Person
show_icon: false
name: |
[[[
return states['person.Person'].state;
]]]
state:
- value: home
name: Home
- value: not_home
name: Away
styles:
card:
- color: var(--contrast20)
- font-size: 12px
- background: none
- opacity: '0.7'
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
tap_action:
action: more-info
entity: sensor.Persons_battery_level
content_info: none
card_mod:
style: |
ha-card {
--color: {{ 'var(--contrast20)' if states('sensor.Persons_battery_level') | float > 10 else 'var(--black)' }};
--chip-background: {{ 'var(--contrast4)' if states('sensor.Persons_battery_level') | float > 10 else 'var(--red)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
4 Likes
ald112
February 29, 2024, 4:46pm
421
how I remove from the code the bottom sticky icons?
ZOXSOCKS
March 2, 2024, 11:49am
422
Can you please share how you managed to get a custom font working?
I’m using the same font as you; Varela Round – but I’m not sure how to get it working. Thanks in advance <3
RSZEE
March 3, 2024, 9:58am
423
Has anyone got the bottom navbar to work in 24.2.5?
djacid
March 3, 2024, 2:38pm
424
Can you upload the icons for tv apps?
jeells102
March 5, 2024, 9:03am
425
I loved the alarm card you created, however, as a lot of my dashboard is lovelace based, and not template based, I couldn’t directly add the card and have it work how I wanted, without breaking my whole dashboard and having to recreate it.
So I reverse engineered your alarm card and made a lovelace friendly version that anyone can just add the code into their dashboard.
The code is below:
type: custom:button-card
entity: alarm_control_panel.<your_alarm_panel_entity>
name: House Alarm
icon: mdi:shield-lock
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-home
custom_fields:
cs: Disarmed
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'disarmed' ? '#676867'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 900
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#2b2243' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
- value: arming
icon: mdi:shield-alert
custom_fields:
cs: Arming
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- animation: blink 2s ease infinite
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'arming' ? '#676867' :
'']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_away
icon: mdi:shield-car
custom_fields:
cs: Armed Away
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#3b8048' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
styles:
grid:
- grid-template-areas: '"i i" "cs cs" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: start
- white-space: no-wrap
- font-weight: 50
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- background: '[[[ return ''var(--'' + variables.active_color + '')'';]]]'
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
4 Likes
jlnbln
March 5, 2024, 11:23am
426
nice one! Thanks for the work!
I tried using your code. But the background of the selected tile state in the tile card stays the regular green color instead of the themes one.
Any ideas why?
jeells102
March 5, 2024, 12:16pm
427
Yeah this is because I hard-coded the colours in the selection. Rather than choosing contrast colours. I can update it to be the contrast colours, but I couldn’t settle for which colour should be what.
If you choose the colours from the diagram that was given in the original theme, I can update the code
jlnbln
March 5, 2024, 12:25pm
428
haha. I thought so! That would be great if you could update it with the colors. I think home should be green, night blue, away red and disarmed can be grey. Thanks for your help!
jeells102
March 5, 2024, 12:48pm
429
Give this a go, should now be using the theme colours
type: custom:button-card
entity: alarm_control_panel.<your_entity>
name: House Alarm
icon: mdi:shield-lock
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-lock-open
custom_fields:
cs: Disarmed
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'disarmed' ?
'var(--contrast10)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast1)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'disarmed' ? 'var(--contrast6)'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 900
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast1)'; ]]]
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Armed Night
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'var(--blue)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#000000' : '']]]
- value: armed_home
icon: mdi:shield-home
custom_fields:
cs: Armed Home
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'var(--green)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_home' ?
'#000000' : '']]]
- value: arming
icon: mdi:shield-alert
custom_fields:
cs: Arming
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- animation: blink 2s ease infinite
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'arming' ? '#676867' :
'']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_away
icon: mdi:shield-car
custom_fields:
cs: Armed Away
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'var(--red)' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
styles:
grid:
- grid-template-areas: '"i i" "cs cs" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: start
- white-space: no-wrap
- font-weight: 50
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- background: '[[[ return ''var(--'' + variables.active_color + '')'';]]]'
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_home
- armed_away
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
.option.selected {
--control-select-color: var(--yellow) !important;
}
EDIT: Just to say, I also changed some of the icons to match better, as well as some of the text colours with the brighter colours just to make everything match better.
jlnbln
March 5, 2024, 1:02pm
430
hmm this looks the same for me. I think there might have been a confusion. I wasn’t talking about the background color of the button card. I mean the color of the Tile Card. Here this one here on the picture. It is still the same for me.
Looks interesting!
jeells102
March 6, 2024, 9:13am
432
So I had to do some additional googling, and get some extra help, but I’ve managed to get it working for a single colour. Not with multiple colours so it’s better than just the yellow.
Take a look below:
type: custom:button-card
entity: alarm_control_panel.jem_alarm
name: House Alarm
icon: mdi:shield-lock
variables:
active_color: red
state:
- value: disarmed
icon: mdi:shield-lock-open
custom_fields:
cs: Disarmed
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'disarmed' ? '#676867'
: '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 900
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_night
icon: mdi:shield-moon
custom_fields:
cs: Night
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#2b2243' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#676867' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_night' ?
'#959497' : '']]]
- value: arming
icon: mdi:shield-alert
custom_fields:
cs: Arming
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ? 'var(--' +
variables.active_color + ')' : 'var(--contrast6)'; ]]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- animation: blink 2s ease infinite
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'arming' ? '#676867' :
'']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 16px
- font-weight: 500
- line-height: 18px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state == 'arming' ||
states[entity.entity_id].state == variables.on_state ?
'var(--black)' : 'var(--contrast18)'; ]]]
- value: armed_away
icon: mdi:shield-car
custom_fields:
cs: Armed Away
styles:
card:
- background: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#3b8048' : '']]]
- padding: 16px
- '--mdc-ripple-press-opacity': 0
- height: '[[[ return variables.max_height ? ''100%'' : ''100px''; ]]]'
icon:
- width: 24px
- height: 24px
- line-height: 24px
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
img_cell:
- justify-self: start
- width: 24px
- height: 24px
- line-height: 24px
- border-radius: 8px
name:
- text-align: start
- white-space: no-wrap
- font-weight: 500
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#959497' : '']]]
- text-overflow: ellipsis
custom_fields:
cs:
- text-align: left
- white-space: '[[[ return variables.max_height ? ''normal'' : ''no_wrap''; ]]]'
- z-index: 4
- justify-self: start
- font-size: 18px
- font-weight: 500
- line-height: 16px
- width: 100%
- color: >-
[[[ return states[entity.entity_id].state === 'armed_away' ?
'#000000' : '']]]
styles:
grid:
- grid-template-areas: '"i i" "cs cs" "n ec" "n ec"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content 1fr min-content
custom_fields:
cs:
- text-align: start
- white-space: no-wrap
- font-weight: 50
- justify-self: start
- font-size: 12px
- margin: 6px 0 2px 0
- color: >-
[[[ return states[entity.entity_id].state == 'on' ||
states[entity.entity_id].state == variables.on_state ? 'var(--black)'
: 'var(--contrast18)'; ]]]
- text-overflow: ellipsis
es:
- color: var(--black)
ec:
- justify-self: start
- justify-content: center
card:
- background: '[[[ return ''var(--'' + variables.active_color + '')'';]]]'
icon:
- color: var(--black)
name:
- color: var(--black)
custom_fields:
ec:
card:
type: tile
entity: '[[[ return entity.entity_id; ]]]'
color: red
features:
- type: alarm-modes
modes:
- armed_away
- armed_night
- disarmed
card_mod:
style:
.: |
ha-card .content {
display: none;
} ha-card {
width: 200px;
background: transparent;
border-radius: 0px;
} ha-card.active {
height: 40px;
}
.features hui-alarm-modes-tile-feature $: |
.container {
padding: 0px !important;
}
.features hui-alarm-modes-tile-feature $ .container ha-control-select $ .container: |
.option {
background-color: transparent !important;
border-radius: 13px !important;
}
card_mod:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select$: |
.container {
color: grey !important;
--control-select-color: var(--contrast14) !important;
}
1 Like
Does anyone know where I can find the rounded.js file?