la programmation du chauffage :
Affichage dâun timer directement sur la carte :
(on peut imaginer un changement de couleur de lâenceinte, du nom, etc. suivant lâĂ©tat du timer
)
Code de la carte
name: |
[[[
var finishes_at = new Date(states['timer.hacf_timer'].attributes.finishes_at);
var remaining = states['timer.hacf_timer'].attributes.remaining;
if (finishes_at == 'Invalid Date') {
if (remaining) {
var remaining_first_element = remaining.split(':');
if (remaining_first_element[0].length < 2 ) {
if (remaining_first_element[0] == '0' ) {
remaining_first_element = remaining_first_element.splice(1);
} else {
remaining_first_element[0] = '0' + remaining_first_element[0];
}
}
result = remaining_first_element.toString().replaceAll(',',':');
} else {
result = 'Sonorisation';
}
} else {
var timestamp = finishes_at.getTime();
var timestamp_now = Date.now();
var difference_between = timestamp - timestamp_now
var time_remaining = new Date(difference_between).toUTCString();
var hours = time_remaining.split(' ');
var hours_split = hours[4].split(':');
if (parseInt(hours_split[0]) == 0 ) {
hours_split = hours_split.splice(1);
}
var result = hours_split.toString().replaceAll(',',':');;
}
return result;
]]]
triggers_update:
- sensor.aleatoire
show_name: true
icon: 'mdi:speaker'
styles:
custom_fields:
wave:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- right: 5%
- top: 5%
- font-size: 13px
- line-height: 20px
- display: |
[[[
if (states["input_boolean.test2"].state == 'on') return '';
else return 'none';
]]]
- '--icon-color': |
[[[
if (states["input_boolean.test2"].state == 'on') return 'var(--mail-color)';
else return 'var(--primary-color)';
]]]
card:
- border: 2px solid var(--primary-color)
- border-radius: 10px
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
wave: |
[[[
return `
<div class="loader-container">
<div class="loader-3">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
</div>
</div>`
]]]
type: 'custom:button-card'
style: |
.loader-3{
width: 40px;
height: 40px;
}
.loader-3 div {
height: 100%;
width: 3px;
display: inline-block;
}
.loader-3 div .item-1{
height: 50%;
}
.loader-3 .item-1 {
animation: loader-3-first-last-div 1.2s infinite linear;
background-color: red;
}
.loader-3 .item-2 {
animation: loader-3-middle-div 1.2s infinite linear;
animation-delay: -1.1s;
background-color: darkorange;
}
.loader-3 .item-3 {
animation: loader-3-middle-div 1.2s infinite linear;
animation-delay: -1.0s;
background-color: gold;
}
.loader-3 .item-4 {
animation: loader-3-middle-div 1.2s infinite linear;
animation-delay: -0.9s;
background-color: green;
}
.loader-3 .item-5 {
animation: loader-3-first-last-div 1.2s infinite linear;
animation-delay: -0.8s;
background-color: DarkOrchid;
}
@keyframes loader-3-first-last-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
@keyframes loader-3-middle-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
Il faut ajouter une entité timer
:
timer:
hacf_timer:
duration: "01:00:05"
Il faut ajouter une entité aléatoire (qui sert de déclencheur pour mettre à jour la carte button-card):
sensor:
- platform: random
name: Aléatoire
maximum: 999
Il faut une automatisation qui sâĂ©xĂ©cute toutes les secondes afin de mettre Ă jour cette entitĂ© :
alias: mise a jour de sensor.aleatoire
description: Mise Ă jour pour affichage des timers sur les cartes
trigger:
- platform: time_pattern
seconds: '*'
condition: []
action:
- service: homeassistant.update_entity
target:
entity_id: sensor.aleatoire
mode: restart
Ah pas bien tout sa⊠sa donne des ideeeeeees mais ou commencer!
Une chose mâintĂ©resse encore. Jâai vu quâon pouvais faire un floorplan ou visuellement on peut trĂšs bien reprĂ©senter les Ă©tage et pour les lumiĂšres ou mĂȘme le chauffage par piĂšces etc etc sa serai vraiment super.
Jâai dĂ©jĂ commencer par dessiner les floorplan, sa prend tu temps mais sa vaut le rĂ©sultat. Par contre pour lâintĂ©grer je plante complĂ©tement pour le moment.
je te conseille de te rendre dans PrĂ©sentations et de chercher une prĂ©sentation qui lâutilise⊠afin de demander conseille
Superbe taf, felicitations
Peux-tu donner plus de détails sur la carte aspirateur avec les boutons sur les differentes pieces ? Merci
Tu peux le faire avec un peu de sorcellerie sans avoir besoin de sensor random qui se met Ă jour
type: custom:button-card
variables:
update: |
[[[
if (CONDITION POUR DECLANCHER LE REFRESH TOUS LES X) {
if (this._myTimer === undefined) {
this._myTimer = window.setInterval(() => { this.update() }, 1000 * 10) // 1000 * 10 = Temps entre les refresh en millisecondes
}
} else {
if (this._myTimer !== undefined) {
window.clearInterval(this._myTimer);
delete this._myTimer;
}
}
]]]
xxx: RESTE DE LA CONFIG...
Tu as corrigĂ© nâest ce pas ? sinon je commence a devenir fouâŠ
Merci pour le partage (de tes cartes, de tes réponses ici et là -bas, du temps passé !).
Câest clair que câest beaucoup plus sympa comme ceci
Câest documentĂ© et je ne le trouve pas ou tu le sors de ton chapeau (dâoĂč la sorcellerie ) ?
Non, pas documentĂ©, câest juste du pur javascript
Oui, jâai edit le post
Je parlais du fait de la clé update
dans variables
(toi aussi ? jâai lâimpression que tu me rĂ©ponds par rapport au code du timer )
Je suis ravi de cette explication et je me demande ce que tu as encore comme sort
Tu peux lâappeler toto
si tu veux, ça fera la mĂȘme chose Câest juste pour que le code soit executĂ© quelque part.
Ca y est ! Jây suis !
Merci !
Edit:
Code de la carte sans automatisation toutes les secondes et sans entité aléatoire :
variables:
update: |
[[[
var finishes_at = new Date(states['timer.hacf_timer'].attributes.finishes_at);
if (finishes_at != 'Invalid Date') {
if (this._myTimer === undefined) {
this._myTimer = window.setInterval(() => { this.update() }, 1000 * 1) // 1000 * 1 = Temps entre les refresh en millisecondes
}
} else {
if (this._myTimer !== undefined) {
window.clearInterval(this._myTimer);
delete this._myTimer;
}
}
]]]
name: |
[[[
var finishes_at = new Date(states['timer.hacf_timer'].attributes.finishes_at);
var remaining = states['timer.hacf_timer'].attributes.remaining;
if (finishes_at == 'Invalid Date') {
if (remaining) {
var remaining_first_element = remaining.split(':');
if (remaining_first_element[0].length < 2 ) {
if (remaining_first_element[0] == '0' ) {
remaining_first_element = remaining_first_element.splice(1);
} else {
remaining_first_element[0] = '0' + remaining_first_element[0];
}
}
result = remaining_first_element.toString().replaceAll(',',':');
} else {
result = 'Sonorisation';
}
} else {
var timestamp = finishes_at.getTime();
var timestamp_now = Date.now();
var difference_between = timestamp - timestamp_now
var time_remaining = new Date(difference_between).toUTCString();
var hours = time_remaining.split(' ');
var hours_split = hours[4].split(':');
if (parseInt(hours_split[0]) == 0 ) {
hours_split = hours_split.splice(1);
}
var result = hours_split.toString().replaceAll(',',':');;
}
return result;
]]]
show_name: true
icon: 'mdi:speaker'
styles:
custom_fields:
wave:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- right: 5%
- top: 5%
- font-size: 13px
- line-height: 20px
- display: |
[[[
if (states["input_boolean.test2"].state == 'on') return '';
else return 'none';
]]]
- '--icon-color': |
[[[
if (states["input_boolean.test2"].state == 'on') return 'var(--mail-color)';
else return 'var(--primary-color)';
]]]
card:
- border: 2px solid var(--primary-color)
- border-radius: 10px
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
wave: |
[[[
return `
<div class="loader-container">
<div class="loader-3">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
</div>
</div>`
]]]
type: 'custom:button-card'
style: |
.loader-3{
width: 40px;
height: 40px;
}
.loader-3 div {
height: 100%;
width: 3px;
display: inline-block;
}
.loader-3 div .item-1{
height: 50%;
}
.loader-3 .item-1 {
animation: loader-3-first-last-div 1.2s infinite linear;
background-color: red;
}
.loader-3 .item-2 {
animation: loader-3-middle-div 1.2s infinite linear;
animation-delay: -1.1s;
background-color: darkorange;
}
.loader-3 .item-3 {
animation: loader-3-middle-div 1.2s infinite linear;
animation-delay: -1.0s;
background-color: gold;
}
.loader-3 .item-4 {
animation: loader-3-middle-div 1.2s infinite linear;
animation-delay: -0.9s;
background-color: green;
}
.loader-3 .item-5 {
animation: loader-3-first-last-div 1.2s infinite linear;
animation-delay: -0.8s;
background-color: DarkOrchid;
}
@keyframes loader-3-first-last-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
@keyframes loader-3-middle-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
Une autre animation :
Code de la carte
custom_fields:
circle: |
[[[
return `
<div class="shadow_circle">
<div class="shadow shadow_blue"></div>
<div class="shadow shadow_red"></div>
</div>
`
]]]
aspect_ratio: 5/2
card: null
hold_action:
action: none
icon: 'mdi:alarm-light'
name: Alarme
show_name: true
styles:
custom_fields:
circle:
- position: absolute
- z-index: 1
- height: inherit
- width: inherit
- top: 0
card:
- color: white
- border: |
[[[
if (states["input_boolean.test2"].state == 'on') return '2px solid red';
else return '2px solid var(--primary-color)';
]]]
- border-radius: 10px
icon:
- z-index: 2
- top: 2%
- color: '#fa3241'
name:
- z-index: 3
- font-variant: small-caps
type: 'custom:button-card'
style: |
.shadow_circle {
height: 500px;width: 500px;
}
#card {
{% if is_state('input_boolean.test2', 'on') %}
animation: alert_border 2s infinite !important;
-webkit-animation: alert_border 2s infinite !important;
{% else %}
border: 2px solid var(--primary-color);
{% endif %}
;
}
#name {
{% if is_state('input_boolean.test2', 'on') %}
animation: alert_name 2s infinite !important;
-webkit-animation: alert_name 2s infinite !important;
{% else %}
color: var(--primary-color);
{% endif %}
;
} #img-cell {
{% if is_state('input_boolean.test2', 'on') %}
animation: rotate_icon 1s !important;
-webkit-animation: rotate_icon 1s !important;
animation-delay: 1s;
{% else %}
color: var(--primary-color) !important;
{% endif %}
;
} #img-cell > #icon {
{% if is_state('input_boolean.test2', 'on') %}
animation: alert_icon 2s infinite ease !important;
-webkit-animation: alert_icon 2s infinite ease !important;
animation-delay: 1s !important;
{% else %}
color: var(--primary-color) !important;
{% endif %}
;
} .shadow {
background-position: center center;
background-size: 100% 100%;
border-radius: 50%;
bottom: 0px;
left: 0px;
margin: auto;
right: 0px;
top: 0px;
position: absolute;
} .shadow_blue {
{% if is_state('input_boolean.test2', 'on') %}
animation:alert_ani 2s infinite;
-webkit-animation:alert 2s infinite;
animation-delay: -1s;
{% else %}
display: none;
{% endif %}
} .shadow_red {
{% if is_state('input_boolean.test2', 'on') %}
animation:alert_ani 2s infinite ease-in;
-webkit-animation:alert 2s infinite;
{% else %}
display: none;
{% endif %}
} .shadow_blue {
box-shadow: rgb(0 104 255 / 20%) 0px 0px 0px 0px, rgb(0 104 255 / 20%) 0px 0px 0px 800px inset;
} .shadow_red {
box-shadow: rgb(255 0 0 / 20%) 0px 0px 0px 0px, rgb(255 0 0 / 20%) 0px 0px 0px 800px inset;
} @keyframes alert {
0% {
width: 0px;
height: 0px
}
50% {
width: inherit;
height: inherit;
box-shadow: 0 0 0 1px rgba(255, 0, 0, 0), 0 0 0 4px rgba(255, 0, 0, 0) inset;
}
51% {
width: 0px;
height: 0px;
}
100% {
width: 0px;
height: 0px;
}
} @keyframes rotate_icon {
0% {
transform: rotate(0);
}
100% {
transform: rotate(3.142rad);
}
}
@keyframes alert_icon {
0% {
top: -2%;
transform: rotate(3.142rad);
color: blue;
}
24% {
color: blue;
}
40% {
color: blue;
}
75% {
color: #fa3241;
}
100% {
top: -2%;
transform: rotate(3.142rad);
color: #fa3241;
}
} @keyframes alert_name {
0% {
color: #fa3241;
}
24% {
color: #fa3241;
transform: scale(1.5);
}
55% {
color: #fa3241;
transform: scale(1);
}
60% {
color: blue ;
}
75% {
color: blue;
transform: scale(1.5);
}
100% {
color: blue ;
}
}
@keyframes alert_border {
0% {
border: 4px solid #fa3241;
}
55% {
border: 4px solid #fa3241;
}
60% {
border: 4px solid blue;
}
100% {
border: 4px solid blue;
}
}
Code de la carte
style: >
@keyframes blink {
50% {
color: #FDD835;
}
100% {
color: var(--primary-color);
}
}
#root > hui-state-label-element:nth-child(2),#root >
hui-state-label-element:nth-child(3) {
animation: {% if is_state('switch.bf255b0ef13d6cfdbarvv9', 'on') %} blink 1.5s ease-in-out infinite{% endif %};
}
elements:
- entity: sensor.vide
prefix: Bureau
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 15%
pointer-events: none
top: 23%
tap_action:
action: none
type: state-label
- entity: sensor.vide
prefix: Alexia
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 15%
pointer-events: none
top: 34%
tap_action:
action: none
type: state-label
- entity: input_boolean.wakestatus_1
show_icon: false
show_state: false
styles:
toogle:
- transform: translateX(26px)
card:
- width: 60px
- height: 40px
- background: transparent
- box-shadow: none
custom_fields:
toogle: |
[[[
return `
<div class="switch">
<span class="toggle-thumb">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#4ADE80;transform:;-ms-filter:"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#F87171;transform:;-ms-filter:"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"></path></svg>
</span>
</div>`
]]]
type: 'custom:button-card'
style: |
ha-card {
margin: 0 0 130px 110px;
}
#toogle .switch {
display: inline-block;
width: 60px;
height: 34px;
position: relative;
}
.toggle-thumb {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3f3F3f;
border-radius: 40px;
cursor: pointer;
}
.toggle-thumb:before {
content: "";
height: 26px;
width: 26px;
position: absolute;
left: 4px;
bottom: 4px;
border-radius: 50%;
background-color: #EFEFEF;
transition: .4s all ease;
}
.checkbox {
opacity: 0;
width: 0;
height: 0;
z-index: 100;
}
.toggle-thumb:before {
{% if is_state('input_boolean.wakestatus_1', 'on') %}
transform: translateX(26px);
{% endif %}
}
- type: 'custom:state-switch'
style:
left: 47%
top: 36%
entity: input_boolean.wakesettime_1
default: 'on'
transition: flip
transition_time: 300
states:
'on':
entity: input_datetime.wake_time_1_on
hide:
name: true
hour_step: 1
layout:
embedded: false
name: inside
align_controls: center
link_values: true
minute_step: 1
name: ''
style:
.: |
ha-card {
box-shadow: none;
background-color: rgba(0,0,0,0);
opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
}
.time-picker-row{
margin-left: 5px !important;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
type: 'custom:time-picker-card'
'off':
entity: input_datetime.wake_time_1_off
hide:
name: true
hour_step: 1
layout:
embedded: false
name: inside
align_controls: center
link_values: true
minute_step: 1
name: ''
style:
.: |
ha-card {
box-shadow: none;
background-color: rgba(0,0,0,0);
opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
}
.time-picker-row{
margin-left: 5px !important;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
type: 'custom:time-picker-card'
- entity: input_boolean.wakeweekday_mon_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Lu
style:
'--paper-item-icon-color': var(--primary-color)
right: 15%
top: 20%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_mon_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_tue_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Ma
style:
'--paper-item-icon-color': var(--primary-color)
right: 5%
top: 20%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_tue_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_wed_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Me
style:
'--paper-item-icon-color': var(--primary-color)
right: 20%
top: 50%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_wed_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_thu_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Je
style:
'--paper-item-icon-color': var(--primary-color)
right: 10%
top: 50%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_thu_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_fri_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Ve
style:
'--paper-item-icon-color': var(--primary-color)
right: 0%
top: 50%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_fri_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sat_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Sa
style:
'--paper-item-icon-color': var(--primary-color)
right: 15%
top: 80%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_sat_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sun_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Di
style:
'--paper-item-icon-color': var(--primary-color)
right: 5%
top: 80%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_sun_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- type: 'custom:stack-in-card'
style:
top: 80%
left: 47.5%
mode: horizontal
keep:
background: true
cards:
- type: 'custom:button-card'
entity: input_boolean.wakesettime_1
icon: 'mdi:power-plug'
show_label: false
show_name: false
show_state: false
styles:
card:
- line-height: 0
- width: 50px
- height: 24px
- border: 2px solid var(--primary-color)
- background: |
[[[
if (entity.state == 'on')
return 'var(--primary-color)';
else
return 'white';
]]]
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(1.2)
- color: |
[[[
if (entity.state == 'on')
return 'white';
else
return 'var(--primary-color)';
]]]
- type: 'custom:button-card'
entity: input_boolean.wakesettime_1
icon: 'mdi:power-plug-off'
show_label: false
show_name: false
show_state: false
styles:
card:
- line-height: 0
- width: 50px
- height: 24px
- border: 2px solid var(--primary-color)
- background: |
[[[
if (entity.state == 'off')
return 'var(--primary-color)';
else
return 'white';
]]]
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(1.2)
- color: |
[[[
if (entity.state == 'off')
return 'white';
else
return 'var(--primary-color)';
]]]
image: /local/images/transparent/transparent_clock.png
type: picture-elements
@Argonaute, câest directement tirĂ© de la documentation de button-card :
Dans la partie Apple Homekit-like buttons
bonjour Clemalex,
Peux-tu me dire ce que tu as utilisé comme card pour faire la partie volet?
Jâai tentĂ© avec grille mais je ne retrouve pas ce que je souhaite. Jâaimerai quâil y ait un titre principal comme par exemple le tien « Volets », puis compartimenter par piĂšce comme toi tu lâas fait en coin jour, coin nuit, coin coin (petit dĂ©l!re perso du vendredi aprem youhouuuuu).
De plus quel notion utilises-tu pour indiquer que le coin jour est fermé ?
Et enfin je souhaiterai changer la couleur des titres mais je ne vois pas quoi modifier comme valeur. Si tu as une idée⊠et je pense que tu meme la réponse !
Jâai adorĂ©
Je te reponds dĂšs que possible car la rĂ©ponse ne sera pas forcĂ©ment courteâŠ