Veuillez, Qui m’aide à insérer dans la carte affichée ci-dessous les deux champs de date et d’heure, et un champ de compteur, en haut à droite et en bas à droite.
Je ne peux tout simplement pas le terminer dans la mise en forme que je veux …
Le code actuellement utilisé est le suivant…
Je ne peux tout simplement pas le terminer dans la mise en forme que je veux …
Ce que je ne peux tout simplement pas faire, c’est définir le code pour remplir la carte, j’ai essayé plusieurs fois mais toujours avec des résultats négatifs… J’ai trouvé beaucoup d’exemples mais au final je n’ai pas pu les faire fonctionner… Je ne comprends pas.
Pourriez-vous, s’il vous plaît, me donner un exemple pour cette carte …
Merci beaucoup Clemalex, je n’y serais jamais arrivé tout seul, mille tests tous ne fonctionnent toujours pas, ce n’est que pour mettre en page les graphismes mais ça ne devrait pas poser de problème…
.
.
Ce que je ne comprends toujours pas, c’est le formatage grid-template
Mon interprétation est correcte, donc la grille est formatée visuellement.
.
J’ai compris que les lettres
« n » -name-
« i » -image-
« s » -statte-
" l "-label-
étaient par défaut, mais d’ailleurs je n’ai pas compris comment les paramétrer et surtout comment écrire les code, maintenant cet exemple de la vôtre il me guidera pour toutes les autres cartes avec ce paramètre
.
Merci, merci et encore merci pour votre aide…
Excellent, je n’avais pas encore vu ce document… merci je l’ai lu
même si l’autre obstacle à surmonter est d’écrire dans les cellules…
.
.
Jusqu’à présent j’ai réussi à le formater, maintenant je ne peux plus mettre 2 étiquettes pour nommer les champs date et compteur
type: horizontal-stack
cards:
################################################################################################
# Prima intestazione lato SX
################################################################################################
- type: custom:button-card
color_type: icon
name: Ciclo di Irrigazione 1
entity: automation.irr_irrigazione_settimanale_su_orario_ciclo_1
icon: mdi:sprinkler-variant
show_state: true
show_name: true
show_icon: true
show_label: false
styles:
card:
- width: 520px
- height: 80px
custom_fields:
counter:
- position: absolute
- right: 30px
- bottom: 10px
- padding: |
[[[
if ( states['counter.contatore_cicli_irrigazione'].state < 10 ){ return '3px 7px';}
else {return '5px 6px'; }
]]]
- border-radius: 50%
- background: deepskyblue
- color: white
- font-size: 15px
state:
- place-self: flex-start
- margin-left: 1rem
- margin-bottom: 1px # imposta il margine in altezza partendo dall'alto dell'icona
- font-size: 30px # imposta il margine in altezza dello stato ( acceso/spento )
- color: > #in funzione dello stato cambia colore alla scitta dello stato stesso
[[[
if (entity.state === 'on') return 'lime';
if (entity.state === 'off') return 'yellow';
else return 'red';
]]]
icon: #in funzione della stato cambia colore all'icona dello stato
- color: >
[[[
if (entity.state === 'on') return 'lime';
if (entity.state === 'off') return 'yellow';
else return 'red';
]]]
name:
- place-self: flex-start
- margin-left: 5px
- margin-bottom: 15px #imposta il margine in altezza partendo dall'alto
- font-size: 17px #imposta l'altezza del font del nome della entità
grid:
- grid-template-areas: '"n i date" "s i ."'
- grid-template-columns: 30% 20% 50%
custom_fields:
date: |
[[[
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
return today = dd + '/' + mm +'/' + yyyy;
]]]
counter: |
[[[
return states['counter.contatore_cicli_irrigazione'].state;
]]]
state: # Questo codice se il valore dell "entity" è a "on"
- value: 'on' # mette l'alone tytto intorno al bottone se il valore
styles: # diventa "off" toglie l'alone 19-09-2021
card: # sergio
- -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color-no-temperature) #
- box-shadow: 0px 0px 9px 3px var(--button-card-light-color-no-temperature) #
################################################################################################
# Prima intestazione lato SX
################################################################################################
