c’est ce que je disais mais je n’ai pas osé poser une question en plus , je n’ai pas d’erreur , mais l’image n’apparait pas en fond , donc il y a encore un truc . je vais me passer de l’image de fond c’était un plus ! tant pis
je ne vais pas mobiliser ton temps pour moi
cordialement
il faut que ton image soit dans /homeassistant/www/images/
mais dans le code de la carte /homeassistant/www/imges/ sera /local/images/
après, un coup de vidage du cache du navigateur ne fait pas de mal ( surtout quand on utilise des images ).
tu es bien aimable
oui oui les images sont bien là ce sont les même que celles qui remplacent les icones, donc je sais quelles sont là
Je m’excuse d’avance pour le message long et le ton peut être un peu rapeux, mais j’ai vraiment l’impression que tu fait compliqué quand on peut faire simple…
La lecture des échanges ci dessus me fait juste dire:
Mais dans quel merdier tu t’embarques pour un truc tout simple au départ !!!
Du coup je vais te faire des réponses point par point:
Le but de ce champ dans la carte mushroom est de remplacer une icone… Il n’y a rien dans l’interface pour changer le fond.
Ainsi, si tu ne veux pas avoir une icone de canapé:
-
tu peux mettre une autre icone dans le champ de l’icone…
Tu remplacesmdi:sofaparmdi:bathtub
pour une salle de bain par exemple.
Liste des icones mdi:
Tu trouves l’icone qui te plait, tu notes son nom puis tu tapes mdi:nomIcone dans l’interface et bim c’est fait… -
si tu veux mettre des images à la place des icones, le tuto de départ marche tout à fait.
Si ton chemin est bien fait ça marche direct: exemple:
La photo de ma maison est dans (chemin visible avec file editor) /homeassistant/www/community/compass-card/Maison.jpg
si on tape ça dans l’interface:
Ca donne ça:
Et les chips marchent pareil dans le code des chips !!
Le code
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.votre_lumière
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
yelow
{% else %}
grey
{% endif %}
primary: Salon Simplifié
secondary: "{{ states('sensor.votre_capteur_temperature') }}°C"
layout: horizontal
tap_action:
action: navigate
navigation_path: /votre_url_salon
double_tap_action:
action: navigate
navigation_path: /votre_url_salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.votre_capteur_mouvement', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.votre_capteur__mouvement', 'on') %}
orange
{% else %}
grey
{% endif %}
picture: /local/community/compass-card/Maison.jpg
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.votre_media_player
icon: mdi:play-pause
icon_color: |-
{% if is_state(entity, 'playing') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: cover.votre_volet_salon
hold_action:
action: toggle
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
grey
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: light.votre_lumiere
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
alignment: end
Désolé je n’ai qu’une image dans mon HA, utilisée dans une carte compass card uniquement, donc c’est pas exceptionnel comme exemple… Perso j’utilise les icones…
Apres si tu veux changer de carte stack-in, jouer avec card-mod, ajouter un fond, coder en yaml etc… on est largement au delà du tuto et de l’intention de départ qui était de faire simple et basique pour juste créer une carte « pièce » qui n’existe pas en tuile ou en Mushroom…
Et du coup il y a bien plus efficace pour faire ça avec des button cards par exemple…
Et quand je lis ça:
Je me dis que tu n’as même pas lu la section débuter du portail: en particulier l’article sur l’installation dont est tiré l’image ci dessous :
Et je me demande comment tu édites tes fichiers de conf genre configuration.yaml depuis que tu as installé HA!
Du coup je m’autorise un petit conseil:
Essaie de faire les choses une par une, et de maitriser une étape avant de passer à la suivante.
Si tu te disperses et que tu cherches à aller trop vite tu vas rester débutant très longtemps car tu ne maitriseras aucune des étapes que tu auras franchi.
On est tous plus ou moins débutant ici, simplement on maitrise une partie du process et on est capable d’aider les autres dessus, et on débute sur d’autres parties.
Si je retrace ton passage sur ce fil, tu as vu une image de carte qui te plait, tu installes mushroom, tu ne trouves pas de room card dedans, tu annonces que tu vas lire les 436 messages mais que tu ne comprends pas, je te renvoie vers le tuto de départ, tu essaies de faire des trucs non prévus dans le tuto (mettre une image a la place d’une icone) puis non prévus dans la carte (mettre un background) alors que tu n’as même pas une image dispo sur ton système, tout ça sans avoir déjà fini au moins une fois le tuto de départ…
Au final, je n’ai aucun doute, tu vas finir par arriver à faire un truc avec l’aide de toutes les bonnes volontés du forum, mais seras tu capable de le refaire demain? Que va t’il se passer à la prochaine mise à jour si tu n’as pas compris la structure de ce que tu manipules?
Pour finir sur une touche d’humour plus légère. Il vaut mieux augmenter l’Enthalpie que l’Entropie… Tu as bien choisi ton pseudo, alors tache de t’en souvenir…
1 « J'aime »
Bonjour
je poste là . ce n’est pas vraiment le sujet mais .
Merci à tous !!
et commençons par la fin , l’entropie est une mesure du désordre, en constante augmentation… donc je reste Enthalpie souvenir de mes études …
Jai fini par tomber sur cet EXCELLENT article :
et la vidéo qui va avec !
et en partant de la carte pièces , sans recours à Yaml j’ai fait un très beau tableau de bord , en tout cas qui me convient et correspond à mon besoin
des petites astuces comme les 3 colonnes qui permettent de n’avoir qu’une sur smartphone !
Bref vous êtes formidables !
1 « J'aime »
Très bonne démarche !
Et pour l’article, ce n’est pas pour rien qu’il est au tout début du premier post de ce fil…
Repartir des cartes de base proposées par HA avant d’aller chercher des choses compliquées. Utiliser son dashboard au quotidien. Seulement ensuite faire des choses compliquées !
Bref augmenter l’Enthalpie (l’ Energie totale) et pas l’Entropie (le désordre)… Bravo !
C’est tout le but de l’article sur le dashboard, montrer qu’on peut faire plein de choses avec ce qui est dispo de base. Et seulement lorsqu’on atteint les limites, passer sur des cartes plus complexes… Le tuto de ce fil c’est cette deuxième étape, que j’ai cherché aussi à rendre la plus facile possible.
Hello,
Home assistant ayant pas mal évolué depuis que je l’utilise (ça va bientôt faire 5 ans tout de même), je bascule peu a peu mon dashboard vers une version graphique et délaisse ma version yaml (plus compliquée à mainteniret a faire évoluer, même si elle ne bouge pas bcp).
La carte pièces ne n’étant pas très customizable, et ne répondant pas totalement a mes besoins, je me suis pas mal inspiré de ce que j’ai trouvé sur les forums, et particulièrement sur ce topic, voici donc ma petite pierre à l’édifice.
Le rendu:
Afin de mutualisé, j’utilise decluttering_card, j’ai donc mon template dans les yaml (modifier le tableau de bord → Menu du tableau de bord → Editeur de configuration):
Code du modèle commun a toutes les cartes
decluttering_templates:
dec_room2:
default:
light_id: null
cover_id: null
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: '[[light_id]]'
state_not: unavailable
chip:
type: template
entity: '[[light_id]]'
icon: mdi:lightbulb
icon_color: |
{% if is_state('[[light_id]]', 'on') %}
amber
{% else %}
disabled
{% endif %}
double_tap_action:
action: more-info
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: '[[cover_id]]'
state: open
- condition: state
entity: '[[cover_id]]'
state: closed
chip:
type: template
entity: '[[cover_id]]'
icon: |
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
double_tap_action:
action: more-info
alignment: end
card_mod:
style: |
:host {
display: block;
height: 57px !important;
margin-bottom: 7px;
}
ha-card {
padding: 8px;
--chip-height: 42px;
--chip-border-radius: 50%;
--chip-spacing: 5px;
--chip-background: rgba(114, 114, 114, 0.7);
--chip-box-shadow: black 1px 0 5px;
margin-bottom: 7px;
}
mushroom-conditional-chip:hover {
background-color: rgba(114, 114, 114, 0.8) !important;
border-radius: 50%;
}
- type: custom:mushroom-template-card
primary: '[[room]]'
secondary: >-
{{ states('[[temp]]') ~ '°C' if states('[[temp]]') not in
['unknown', 'unavailable', 'none', ''] else '' }} {{ ' - ' ~
states('[[humid]]') ~ '%' if states('[[humid]]') not in ['unknown',
'unavailable', 'none', ''] else '' }}
layout: horizontal
tap_action:
action: navigate
navigation_path: '[[navigation]]'
card_mod:
style:
.: |
ha-card {
background: linear-gradient(rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.9) 90%);
--card-primary-font-size: 22px;
--card-secondary-font-size: 12px;
text-shadow: black 3px 0 8px;
padding-top: 0px;
padding-left: 4px;
height: 56px !important;
justify-content: flex-start
}
mushroom-state-info$: |
.secondary {
position: absolute;
top: 32px;
margin-left: 10px;
margin-bottom: -2px;
margin-top: 2px;
color: rgba(227, 227, 227, 0.85) !important;
min-height: 16px;
}
.primary {
position: absolute;
top: 12px;
overflow: visible !important;
}
card_mod:
style: |
ha-card {
background-image: url([[background]]);
background-position: center;
background-size: cover;
}
Puis dans le dashboard, j’utilise cette carte avec des variables:
Code de la carte de la cuisin
type: custom:decluttering-card
template: dec_room2
variables:
- room: Cuisine
- background: /local/images/pieces/cuisine.png
- temp: sensor.temp_cuisine
- humid: sensor.humid_cuisine
- navigation: areas-cuisine
- cover_id: cover.cuisine
- light_id: light.cuisine
grid_options:
columns: 6
rows: 2
Merci @BBE pour ce topic!
1 « J'aime »
Super !
Avec du decluttering card au passage (perso j’utilise streamline card car il me semble que decluttering n’est plus maintenu).
J’ai mis à jour le premier post du coup !
Comme quoi, ce tuto a encore un peu d’actu malgré les area cards…
Vos room cards réalisées avec ce « tuto » :
Vos réalisations
N’hésitez pas à poster dans ce fil vos réalisation à partir de ce tuto, surtout si vous avez beaucoup modifié le code ! Ceci pourra donner des idées à tous. (N’oubliez pas de partager aussi votre code !)
-
Enzy a beaucoup modifié ces cartes, il partage son code là: dans son github et en parle ici: message 377
-
@WarC0zes est toujours prolifique:
-
une première ici avec son thème : message 159
-
Une seconde ici où il change de structure pour button-card: message 280
-
-
frankb a fait plusieurs itérations:
- la première présentée là: message 165
- la deuxième ici: [Carte] Mise en forme de room-card avec mushroom et tutos - #336 par frankb
- la première présentée là: message 165
-
Tochy a fait un dashboard pour son potager là: Message 182
-
pctetra partage son code ici: Message 200
-
Bloody avec sa proposition ici: message 210
-
pascal_ha qui partage son code ici: message 219
-
une version élaborée avec Jujuka89 : Message 321
- avec card-mod:
- sans card-mod:
- avec card-mod:
-
jerome6994 partage sa réalisation ici : message 302
-
un partage de Clement_Masson ici: message 358
-
crampes2 utilise la version horizontale, son code au message 389 et le dashboard quelques messages plus bas.
-
Dapolux a réalisé une version avec declutering card, son code au message 471
1 « J'aime »
Je ne connaissais pas streamline (ça n’existait pas quand j’ai fait mes dashboards initiaux), mais du coup après un peu de lecture, ça a l’air pas mal aussi (et c’est toujours maintenu), merci pour l’info!
Une fois installé suffit juste de changer de nom dans ton yaml pour migrer…
Bonjour,
Je cherche ce style de carte avec un changement de couleur en fonction de la température.
Dans cette carte :
Le paramètre color_thresholds: ne marche pas.
Auriez-vous une idée ?
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.sensor_cuisine_temperature_2
show_icon: false
name: Bedroom
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: "-3%"
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: "\"n n\" \"temp temp\" \"graph graph\""
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.sensor_cuisine_temperature_2'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.sensor_cuisine_temperature_2'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.sensor_cuisine_temperature_2
name: Temperature
color: "#ff8c00"
- entity: sensor.sensor_cuisine_temperature_2
name: Humidity
color: "#3399ff"
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.bedroom_lights
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
Quand j’utilisais mini graph j’utilisais sa , je l’utilise tjs avec certains badges
Bonjour
Évolution de la mise en forme plus carré que rond comme au début.
Modification du thème noctis
Grosse partie card_mod a passer en streamline mais je regarderais ça en septembre après les congés et solliciterais votre aide sûrement ! 
1 « J'aime »
Un petit air de la nouvelle carte aera et du nouveau dashbord area experimental n’est-ce pas ?
Plutôt 100% mushroom template chips template etc…
Comme dans les premières parutions que j’avais faite
Alors oui les cartes area se sont inspirées de mes réalisations 
1 « J'aime »
C’est vrai qu’il y a un air de famille… Et c’est logique car ça fonctionne quand même plutôt pas mal ce dashboard automatique (j’en ai un qui tourne et de version en version il se rapproche de mon dashboard…)
Suite à cette discussion avec @piitaya dans le github de mushroom: Features in mushroom ? Especially Mushroom template card... · piitaya/lovelace-mushroom · Discussion #1741 · GitHub
J’attend de voir ce qui va sortir entre:
- une possibilité de customiser un peu plus la « area card » au fil des versions officielles (en particulier le contrôle via les boutons un peu « brutal » aujourd’hui)
- une possibilité de créer des boutons dans une carte mushroom via des features bien faites dans une future version de mushroom.
Dès qu’une des deux existe, perso j’arrête mon montage avec stack-in-card et card-mod…
Et promis je commence à regarder un peu les thèmes…
1 « J'aime »
J’ai découvert une nouvelle carte room:
2 « J'aime »
1 « J'aime »
Pas mal mais trop gros pour moi !
100% d’accord !
Mais si on considère que ce sont les premières itérations de cette carte… on est en droit d’être (raisonnablement) optimistes.
(Et il y a pas mal de monde qui râle sur github sur le fait que les boutons allument et éteignent toutes les lumières de la piece… on peut espérer au moins que qqch change sur ce point!)
On peut espérer un peu de personnalisation à l’avenir…
En tout cas on n’est pas si loin de la room card de ce post (la personnalisation en moins). Donc je trouve que c’est déjà un truc pas mal pour les débutants.
De la même façon, le dashboard automatique en mode « pièces » ou « area » est vraiment de mieux en mieux au fil des itérations… Si quelqu’un démarre aujourd’hui une installation de zeéro, c’'est vraiment un outil que j’aurai aimé avoir au début:
- pour démarrer tranquille avec un truc assez bien fait
- pour prendre la main dessus et ajouter progressivement les 2/3 trucs qui me manquent
1 « J'aime »