Le problème n’est pas vraiment là, mais card-mod c’est tout sauf simple.
Peut être comme suggéré par @Cleya faut il plutôt se tourner vers d’autres cartes.
Quelques exemples de cartes pour faire un dashboard plus joli, personnalisable et faciles:
les cartes mushroom, avec la même esthétique que les cartes tuiles, mais plus personnalisables (tout en interface graphique, donc pas besoin de Yaml)
les button cards
les bubble cards
Je te laisse regarder, toutes sont plus ou moins décrites sur les forums (francophone et anglophone), et il sera plus facile d’utiliser ces cartes toutes faites et déjà optimisées que de jouer avec card-mod sur des cartes entity…
Personellement je suis fan de mushroom, qui permet de commencer en douceur, et d’evoluer à son rythme… @Cleya est lui fan de button card (et c’est un grand malade )
Je suis convaincu que ce que tu cherches à faire se fait en 5min sur une carte mushroom template ou sur une button card… Et sans besoin de card mod…
j’ai fait aussi du mushroom mais non je n’ai jamais rien vu qui gérait à volonté des jeux de couleur, surtout de fond de div…
en fait c’est surtout déja une question de syntaxe. il faut donc que - par l’exemple - je commence à capter le yaml et quoi cibler parce que card-mod ou pas le balisage html est loin d’être W3C standard pour moiet toutes cette logique interne aux « css » n’est vraiment pas claire claire pour un non dev.
Je confirme, avec custom:button-card, tu peux gérer la couleur de fond, la couleur de l’icône, la couleur du « name », la couleur du « label », etc… Tu peux retourner l’icône, remplacer l’icône par une image. En incluant du CSS, tu peux écrire les trois premières lettres du nom en rouge, les deux suivantes en vert et les dernières en bleu.
Bref tu fais ce que tu veux…
@Eric_Lacomblez je te mets un exemple de carte basée sur custom:button-card en début d’aprèm avec divers changements en fonction d’une valeur de température (couleur du fond, de l’icône, du nom…)
mais là je ne comprends rien du tout … c’est autre type de carte ?
(j’ai installé depuis hacs et je trouve un truc qui génére un yaml vierge sauf:
type: custom:button-card
ou c’est bien c’est un truc qui s’utilise sur des entités quelconques.?.
J’ai toujours été totalement con devant les docs.
manque toujours le concept général et je ne capte rien à ce truc tant que j’aurais pas les concepts sous jacents …
je ne suis pas dev. enfin pas vraiment, et les 3/4 des concepts qui vous semblent évidents ne le sont pas pour moi le github c’est du javanais…jusqu’à je comprenne à quoi sert et dans quel contexte ce custo button card.
type: custom:button-card
icon: mdi:thermometer
name: |
[[[
var temperature = states['sensor.temp_moyenne'].state;
var color;
if (temperature < 15) {
color = '#FFF';
} else if (temperature >= 15 && temperature < 17) {
color = '#FFF';
} else if (temperature >= 17 && temperature < 18) {
color = '#FFF';
} else if (temperature >= 18 && temperature < 20) {
color = '#FFF';
} else if (temperature >= 20 && temperature < 22) {
color = '#FFF';
} else if (temperature >= 22 && temperature < 24) {
color = '#FFF';
} else if (temperature >= 24 && temperature < 26) {
color = '#FFF';
} else {
color = '#FFF';
}
return `<span style="font-size: 14px;">Température moyenne : </span><span style="font-size: 18px; font-weight: bold; color: ${color};">${temperature} °C</span>`;
]]]
show_name: true
styles:
card:
- background-color: |
[[[
var temperature = states['sensor.temp_moyenne'].state;
if (temperature < 15) {
return '#ADD8E6';
} else if (temperature >= 15 && temperature < 17) {
return '#32D3CB';
} else if (temperature >= 17 && temperature < 18) {
return '#12BA85';
} else if (temperature >= 18 && temperature < 20) {
return '#58CC1A';
} else if (temperature >= 20 && temperature < 22) {
return '#F7DE00';
} else if (temperature >= 22 && temperature < 24) {
return '#FFAE00';
} else if (temperature >= 24 && temperature < 26) {
return '#FF8300';
} else {
return '#FF4300';
}
]]]
name:
- text-shadow: |
[[[
var temperature = states['sensor.temp_moyenne'].state;
if (temperature < 15) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 15 && temperature < 17) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 17 && temperature < 18) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 18 && temperature < 20) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 20 && temperature < 22) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 22 && temperature < 24) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 24 && temperature < 26) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
}
]]]
Remplace simplement la ligne de code d’une custom:button-card vierge par le code ci-dessus.
Tu pourras spécifier une couleur de police et d’ombrage pour chacun des cas. J’ai laissé la même valeur pour cet exemple.
Maintenant, si tu veux un exemple reprenant exactement ce que tu as avec ta carte « entity », poste moi une copie d’écran de ta carte.
merci!
J’ai ajsuter les couleurs.
Je vois que ‹ name › est visiblement un id « mot réservé » (mais je ne sais toujours pas pourquoi)
et ca me trouble parce que dan sun dashboard on a forcément plusieurs cartes et si toutes on un id name …c’est pad u tout normal…bref…
dans ton code tu tapes la couleur (des textes) de #name. mais on vois que le mot température est noir alors que la valeur en° est blanche. la régle tapant dans le color …je suppose par exemple grâce à:
if (temperature < 15) {
color = '#FFF';
ne s’applique pas au span contenant « température moyenne » pourtant il devrait si l’héritage se faisait…?
type: custom:button-card
icon: mdi:thermometer
name: |
[[[
var temperature = states['sensor.temp_moyenne'].state;
var color;
if (temperature < 15) {
color = '#FFF';
} else if (temperature >= 15 && temperature < 17) {
color = '#FFF';
} else if (temperature >= 17 && temperature < 18) {
color = '#FFF';
} else if (temperature >= 18 && temperature < 20) {
color = '#FFF';
} else if (temperature >= 20 && temperature < 22) {
color = '#FFF';
} else if (temperature >= 22 && temperature < 24) {
color = '#FFF';
} else if (temperature >= 24 && temperature < 26) {
color = '#FFF';
} else {
color = '#FFF';
}
return `<span style="font-size: 14px;">Température moyenne : </span><span style="font-size: 18px; font-weight: bold; color: ${color};">${temperature} °C</span>`;
]]]
show_name: true
styles:
card:
- background-color: |
[[[
var temperature = states['sensor.temp_moyenne'].state;
if (temperature < 15) {
return '#ADD8E6';
} else if (temperature >= 15 && temperature < 17) {
return '#32D3CB';
} else if (temperature >= 17 && temperature < 18) {
return '#12BA85';
} else if (temperature >= 18 && temperature < 20) {
return '#58CC1A';
} else if (temperature >= 20 && temperature < 22) {
return '#F7DE00';
} else if (temperature >= 22 && temperature < 24) {
return '#FFAE00';
} else if (temperature >= 24 && temperature < 26) {
return '#FF8300';
} else {
return '#FF4300';
}
]]]
name:
- text-shadow: |
[[[
var temperature = states['sensor.temp_moyenne'].state;
if (temperature < 15) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 15 && temperature < 17) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 17 && temperature < 18) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 18 && temperature < 20) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 20 && temperature < 22) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 22 && temperature < 24) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else if (temperature >= 24 && temperature < 26) {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
} else {
return '1px 1px 0 rgba(0, 0, 0, 0.5)';
}
]]]
Je t’ai un peu embrouillé en modifiant la couleur du « name » (nom qui apparait sur la carte) directement dans la zone de déclaration de ce nom. J’aurai du mettre les changements de couleurs en fonction de la température dans la zone de définition des styles.
Pour le fait que « Température moyenne : » soit écrit en noir, c’est lié à l’inclusion de style CSS différent pour la valeur en ° C, avec la taille de police de caractère et le style gras (bold) :
La couleur de caractère en noir est la couleur par défaut pour un tableau de bord en mode clair, en mode sombre, « Température moyenne : » serait écrit en blanc.
Si tu veux que l’ensemble du nom soit écrit de la même couleur, avec la même taille de caractère et le même style / épaisseur (bold dans ce cas), il suffit de virer les balises.
Je suis volontairement hors sujet, mais juste pour dire que card-mod est parfait pour modifier une carte lorsqu’on ne trouve pas chaussure à son pied, mais parfois il faut fouiller un peu pour trouver des cartes qui font ce qu’on veut sans necessairement utiliser card-mod.
Un exemple la couleur de l’icone varie avec la temperature. Un badge rouge apparait lorsqu’on est dans des conditions definies, on peut aussi chager l’icone et même afficher du texte pour dire houlala c’est chaud:
en YAML:
Pour chaque custom:button-card il y a un état (state), un nom (name) et une étiquette (label) qui sont implémentés et tu peux avoir autant de cartes que tu veux sur ton dashbord, avec pour chaque carte un nom, une étiquette et un état. De plus, pour une custom:button-card, tu peux inclure autant de custom_fields que tu veux (chaque custom_fields pouvant « renfermer » n’importe quelle carte disponible (custom ou non). Tu peux donc inclure dans une custom:button-card, une carte « Gauge », une custom:mini-graph-card, etc.
Voici un exemple de tableau de bord pour tablette sur lequel je travaille :
Il est composé d’une seule custom:button-card avec autant de custom_fields que nécessaire.
Bon d’accord, j’en suis à un peu plus de 2000 lignes de code avec juste la première vue qui est presque terminée (c’est pour cette raison que @BBE trouve que je suis un grand malade)
Et moi je fait quasi l’inverse comme expliqué dans ma présentation: tout en mushroom, tout à l’interface graphique… (avec juste quelques déplacement de boutons avec card-mod…) Et je suis même entrain d’essayer de tout passer en section avec quasi que des cartes « standard »…
Poste une copie d’écran de ta carte entité si tu veux un exemple basé sur celle-ci en version custom:button-card (en expliquant clairement quel résultat tu souhaites obtenir).
Pour celui-là c’est ok (je peaufinerais les différentes couleurs)
sauf que je ne vois pas comment conditionner le couleur de l’icone (ha-state-icon?) en blanc ou noir selon la back-ground-color pour avoir un contraste adéquat.
)
