Ajout de la maintenance du roborock (temps + bouton de reinitialsation)
Vraiment trĂšs chouette, Ă©purĂ© ! jâaime beaucoup !
Tes captures des « volets » et « capteurs » mâintĂ©resse. Jâaime lâidĂ©e dâavoir plusieurs info sur la mĂȘme tuile ! ça Ă©vite un nombre important de tuile
Jâai reussi Ă le faire pour les caractĂ©ristiques de Pi, mais je nâarrive pas Ă reproduire pour mes capteurs par exemple, jâaimerai rĂ©aliser ce que tu as fait pour ces derniers
Jâai des soucis au niveau des unitĂ©es par exemple âŠ
A quoi sert le « cadena » dans la tuile garage ? Une sorte de code à taper pour rentrer sur la page ?
Câest une des options des la carte button-card qui empĂȘche dans mon cas lâouverture accidentel du garage (il faut appuyer une premiĂšre fois sur le bouton pour enlever le cadena et une seconde fois pour activer lâaction).
Je teste mais jâai un soucis au niveau de lâindentation⊠tu lâintĂšgre ou exactement le bout de code ? Ă la fin ? au debut ?
Ouvre un fil de discussion en expliquant ce que tu veux
Ca permettra un meilleur rĂ©fĂ©rencement plutĂŽt quâici⊠mais voici le code de mes boutons :
Code de la carte (changement de couleur)
color: auto
color_type: icon
entity: cover.volet_rue_2
icon: 'mdi:chevron-down'
name: Descendre
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
styles:
card:
- border-radius: 10px
- height: 75px
- width: 75px
- margin: 5px 5px 0px 11px
- padding: 0px 0px
- background-color: |
[[[
if (entity.attributes.current_position == '0') return 'var(--primary-background-inactive-color)';
else return 'var(--primary-background-active-color)';
]]]
grid:
- position: relative
icon:
- position: absolute
- left: 2px
- top: '-15px'
- color: |
[[[
if (entity.attributes.current_position == '0') return 'var(--grey-color)';
else return 'var(--primary-color)';
]]]
name:
- position: absolute
- left: 5px
- bottom: 5px
- font-variant: small-caps
- font-size: 14px
- color: |
[[[
if (entity.attributes.current_position == '0') return 'var(--grey-color)';
else return 'var(--primary-color)';
]]]
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.volet_rue_2
type: 'custom:button-card'
Code de la carte (animation/couleur/changement d'icone)
color_type: card
custom_fields:
battery: |
[[[
return `
<span>
<span style="color: var(--text-color-sensor);">
${entity.attributes.battery_level}%
</span>
</span>
`
]]]
entity: binary_sensor.ouverture_fenetre_rue
hold_action:
action: more-info
name: Rue
show_icon: true
show_last_changed: true
show_name: true
state:
- color: var(--red-color)
icon: 'mdi:door-open'
styles:
card:
- border: var(--red-color)
- animation: blink 0.7s ease infinite
icon:
- color: var(--white-color)
label:
- color: var(--white-color)
name:
- color: var(--white-color)
value: 'on'
- icon: 'mdi:door-closed'
styles:
card:
- background-color: var(--primary-background-inactive-color)
- border: var(--primary-background-inactive-color)
icon:
- color: var(--grey-color)
label:
- color: var(--grey-color)
name:
- color: var(--grey-color)
value: 'off'
styles:
card:
- border-radius: 10px
- height: 75px
- width: 75px
- margin: 5px 5px 0px 0px
- padding: 0px 0px
custom_fields:
battery:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- right: 5%
- top: 5%
- font-size: 15px
- line-height: 20px
- '--text-color-sensor': |
[[[
if ( entity.state == 'on') return 'var(--white-color)';
else if ( entity.attributes.battery_level < '10' ) return 'var(--red-color)';
else if ( entity.attributes.battery_level < '20' ) return 'var(--orange-color)';
else return 'var(--grey-color)';
]]]
grid:
- position: relative
icon:
- position: absolute
- left: 2px
- top: '-18px'
label:
- position: absolute
- left: 5px
- bottom: 5px
- font-size: 12px
- font-weight: bold
- color: var(--primary-color)
name:
- position: absolute
- left: 5px
- bottom: 23px
- font-variant: small-caps
- color: var(--primary-color)
tap_action:
action: more-info
type: 'custom:button-card'
Câest marrant la façon dont tu Ă©cris ton code, de mettre le « type » de carte Ă la fin
Jâouvre le fil quand jâai un peu de temps, surement demain soir
câest lâinterface Lovelace qui le fait quand tu retourne sur lâĂ©dition⊠(je suis en storage, pas en yaml)
Câest quoi le « storage » ?
Le mode par dĂ©faut : gestion des tableaux de bord par lâinterface graphique :
https://www.home-assistant.io/lovelace/dashboards-and-views/
quâest ce qui justifie ce choix au juste ?
Dsl je fais un peu lâenfant « pourquoi ?? », « parce que », « parce que quoi ? »
Quel choix ?
Pas de soucis, ca permet dâapprofondirâŠ
Au contraire, jâaime bienâŠ
Le choix dâĂȘtre en storage plutĂŽt quâen yaml ?
Câest plutĂŽt Ă toi de me dire pourquoi tâes passĂ© en yaml
Edit : @Pierre_Ma es-tu seulement en mode Yaml ?
Le mode yaml est fait pour structurer finement les tableaux de bord et permet lutilisation de modĂšleâŠ
Si tu veux approfondir, regarde la configuration de @Sylvain_G prĂ©sente dans lâawesome list :
Jâen ai aucune idĂ©e⊠jâai gardĂ© la configuration par default.
Il faut que jâapprofondisse le sujet effectivement. Mais il faut que je me fasse un liste des prioritĂ©s ^^ je pars dans tout les sens lĂ
Moi aussi au dĂ©butâŠ
Je me servais de la shopping list pour garder en mĂ©moire ce que je voyais et voulais approfondirâŠ
TrĂšs bonne idĂ©e, je viens de lâinstaller !
Si une de mes enceintes diffuse de la musique (button-card + card-mod) :
code de la carte
name: Sonorisation
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-div 1.2s infinite linear;
background-color: red;
}
.loader-3 .item-2 {
animation: loader-3-second-div 1.2s infinite linear;
animation-delay: -1.1s;
background-color: darkorange;
}
.loader-3 .item-3 {
animation: loader-3-third-div 1.2s infinite linear;
animation-delay: -1.0s;
background-color: gold;
}
.loader-3 .item-4 {
animation: loader-3-fourth-div 1.2s infinite linear;
animation-delay: -0.9s;
background-color: green;
}
.loader-3 .item-5 {
animation: loader-3-last-div 1.2s infinite linear;
animation-delay: -0.8s;
background-color: DarkOrchid;
}
@keyframes loader-3-first-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
@keyframes loader-3-second-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-third-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-fourth-div {
25%,75% {
transform: scaleY(0.4);
}
0%,50%,100%{
transform: scaleY(1);
}
}
@keyframes loader-3-last-div {
25%,75% {
transform: scaleY(0.2);
}
0%,50%,100%{
transform: scaleY(0.6);
}
}
Inspiré par https://codepen.io/ruslan_khomiak/pen/MbqWaK
Toujours dans les animations :
Si le facteur est passĂ©, une automatisation met Ă Vrai un boolĂ©en (lâanimation de la porte se fait si une ouverture (porte,fenetre,garage,cagibi) est ouverte et nâest normalement pas la mĂȘme entitĂ© que lâentrĂ©e boolĂ©enne)
Code de la carte
entity: input_boolean.test2
name: Ouvertures
show_name: true
state:
- icon: 'mdi:door-open'
value: 'on'
- icon: 'mdi:door'
value: 'off'
styles:
custom_fields:
courrier:
- border-radius: 50%
- 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)';
]]]
card:
- border-radius: 10px
- border: 2px solid var(--primary-color)
icon:
- color: var(--primary-color)
name:
- font-variant: small-caps
- color: var(--primary-color)
custom_fields:
courrier: |
[[[
return `
<ha-icon
icon="mdi:mail"
style="width: 30px; height: 30px; color: var(--icon-color);">
</ha-icon>`
]]]
type: 'custom:button-card'
style: |
@keyframes pulsation {
0% {
box-shadow: var(--shadow-mail-color-hidden);
}
50% {
transform: scale(1);
box-shadow: var(--shadow-mail-color-hidden);
}
25%,75% {
transform: scale(1.2);
box-shadow: var(--shadow-mail-color-visible);
}
100% {
box-shadow: var(--shadow-mail-color-hidden);
transform: scale(1);
}
}
#courrier{
animation:
{% if is_state('input_boolean.test2', 'on') %}
pulsation 1.3s ease infinite
{% else %}
none
{% endif %}
;
Les variables Ă ajouter au thĂšme :
mail-color: "rgba(247, 193, 57)"
shadow-mail-color-visible: "0px 0px 0px 20px rgba(247, 193, 57, 0.3) inset, 0px 0px 0px 20px rgba(247, 193, 57, 0.3)"
shadow-mail-color-hidden: "0px 0px 0px 20px transparent inset, 0px 0px 0px 20px
Tes boutons sont trĂšs bien fait et super pratiques. Beau travail!