Néanmoins il me semble que tu peux définir le nombre de cases par ligne (colonne) . Dans le tuto de @Argonaute il est défini par 3 cases. Si tu en mets plus il va automatiquement réduire la taille d’une case.
Exemple tu peux essayer avec :
columns: 4
1 « J'aime »
Merci pour le tuto. Je n’arrivai pas en comprendre le fonctionnement des sous vues. Ton tuto va donc énormément m’aider.
Je vais essayer de comprendre maintenant le principe des button-card (mais c’est un autre sujet)
1 « J'aime »
En passant par custom boutton, on peut aussi gardé la couleur?
Oui, la carte est très flexible, mais les paramètres changent par contre, et il faut revoir le YAML.Pleins de références et discussions sur le forum…
Bonjour,
Je souhaite signaler un problème que j’ai rencontré et que je ne parviens pas à résoudre.
Tout semble fonctionner correctement, à l’exception d’un problème spécifique. Lorsque j’accède à la page par défaut de mes boutons de navigation, toutes les icônes apparaissent sans couleur. Cependant, si je navigue à partir de cette page et que je reviens ensuite, les icônes affichent correctement leurs couleurs. Le problème réapparaît si je rafraîchis la page : toutes les icônes redeviennent blanches.
Ce problème se produit à la fois sur appareil mobile et sur ordinateur.
Etonnant, le problème devrait disparaître après rafraîchissement de la page.
As tu toujours le pb si tu redemarres HA ? As tu une machine assez puissante ?
Oui, j’ai le même problème si je redémarre HA.
En ce qui concerne la machine puissante, c’est installé sur ma Freebox Delta. Donc, je dirais non.
Je crois que c’est la réponse, quoi !
Je vais voir pour installer HA sur mon QNAP ! Je vais chercher sur le forum.
Merci pour la réponse.
1 « J'aime »
Bonjour!
J’ai essayé de faire la même chose chez moi, (enfin tenter serait le mot)
Je débute avec home assistant et je commence tout juste avec lovelace.
J’ai voulu faire une pile verticale avec une horizontal pour les boutons en première partie.
En dessous une carte pour passer d’une caméra à l’autre.
Bon déjà le yaml faut s’y faire pour les espaces!
Mon soucie est qu’en mode édition j’ai les 3 images des caméras qui s’affiche, mais rien lorsque je sors de ce mode (je n’ai fait que 3 caméra mais 5 boutons pour le moment)
ci-joint mon code:
type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: custom:button-card
name: Parking
entity: input_text.selection_camera
show_icon: true
color_type: card
icon: mdi:car
color: grey
state:
- value: Parking
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_camera
value: Parking
- type: custom:button-card
name: Entrée
entity: input_text.selection_camera
show_icon: true
color_type: card
icon: mdi:car
color: grey
state:
- value: Entrée
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_camera
value: Entrée
- type: custom:button-card
name: Couloir
entity: input_text.selection_camera
show_icon: true
icon: mdi:pool
color_type: card
color: grey
state:
- value: Couloir
color: red
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_camera
value: Couloir
- type: custom:button-card
name: Garage
entity: input_text.selection_camera
show_icon: true
icon: mdi:car
color_type: card
color: grey
state:
- value: Garage
color: var(--bouton-orange)
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_camera
value: Garage
- type: custom:button-card
name: Jardin
entity: input_text.selection_camera
show_icon: true
icon: mdi:car
color_type: card
color: grey
state:
- value: Jardin
color: red
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_camera
value: Jardin
columns: 3
- type: conditional
conditions:
- entity: input_text.selection_camera
state: Parking
card:
show_state: true
show_name: true
camera_view: auto
type: picture-entity
entity: camera.camera_parking
hold_action:
action: none
- type: conditional
conditions:
- entity: input_text.selection_camera
state: Entrée
card:
show_state: true
show_name: true
camera_view: auto
type: picture-entity
entity: camera.camera_entree
hold_action:
action: none
- type: conditional
conditions:
- entity: input_text.selection_camera
state: Couloir
card:
show_state: true
show_name: true
camera_view: auto
type: picture-entity
entity: camera.camera_couloir
hold_action:
action: none
Si quelqu’un a une idée, je suis preneur, car cela me réduirait énormément les pages!
merci!
Tu dois avoir un service qui, quand tu cliques sur un bouton, met une valeur dans input_text.selection_camera : « Parking », « Entrée », « Couloir », etc
PUIS les cartes s’afficheront ou nom en fonction du contenu de input_text.selection_camera.
Tu as bien cette automatisation ? Tu as regardé les traces pour voir ce qui se passe et si l’automatisation est bien appelée ?
Pour debugger, je te conseille de mettre temporairement le champs input_text.selection_camera dans ta vue sur le dashboard (c’est un champs texte…).
Ainsi :
- Si tu cliques sur un bouton => tu devrais avoir la valeur correspondante dans le champs texte (« Parking », « Entrée », « Couloir », etc)
- Si tu mets à la main une valeur dans le champs texte (« Couloir » par exemple), la carte concernée devrait s’afficher.
Cela devrait te permettre de mieux cerner l’erreur.
Si tu ne trouves pas, fourni nous le code de l’automatisation qui se déclenche quand un bouton est appuyé.
1 « J'aime »
ah ben je n’avais pas compris qu’il fallait une automatisation dans le tuto, je pensais que tout ce faisait en interne dans lovelace.
je vais voir ça, merci!
bon, navré si passe pour un guignol, mais je ne vois pas comment je peut lier une automatisation à la pression d’un bouton dans lovelace quel serait le déclencheur?
Oups, tu as raison et j’ai corrigé : ce n’est effectivement pas une automatisation dans l’article, mais un service directement appelé par le bouton.
Quand tu cliques sur un bouton, il appelle input_text.set_value en passant en paramètre le nom de la caméra :
Exemple de l’appel quand on clique sur un bouton :
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_camera
value: "Plage"
Si tu as mis l’input_text dans ton interface, tu devrais voir que la valeur qui change et prends le nom du bouton quand tu cliques sur un bouton. Est ce bien le cas ?
1 « J'aime »
alors je l’ai mis dans l’interface, mais non, ça ne change pas, mais dois-je aussi créer le service?
chez moi l’input_text reste à unknow
Non pas de service à créer, c’est un service standard de HA.
Je pense que ton input_text doit avoir un autre ID que selection_camera (?)
1 « J'aime »
arf! ben oui je l’ai appelé input_text.selection_camera donc l’entité s’appelait input_text.selection_camera…
maintenant ça marche, par contre je suis au test avec les exemples de ton tuto, les images changent bien mais elles s’affichent chacune à un autre emplacement, comment faire pour qu’elles apparaissent toutes dans le même cadre?
un grand merci pour ton aide!
1 « J'aime »
Top, content que cela fonctionne 
Dans le tuto, j’utilise la layout-card, une carte de HACS (voir « Maîtriser l’ordre des cartes dans les vues »).
Après, tu peux aussi mettre les boutons et les images de vidéos dans une vertical-card pour forcer que ce soit l’un sous l’autre.
1 « J'aime »
oui je viens de trouver et j’ai déjà tout finalisé! un grand merci! 
1 « J'aime »
Alors tout fonctionne très bien!
mais je me suis fait des sous-menus de la même façon, mais après avoir quitté un sous-menu la valeur du input_text.selection_xxx reste et donc la carte reste affichée.
J’ai essayé de faire en sorte que les autres boutons de premier niveau influent sur le sous menu, mais lovelace n’aime pas, il y a une solution pour réinitialiser un text selection?
le code (sans les tentatives de double modifications):
type: vertical-stack
cards:
- type: grid
cards:
- type: custom:button-card
name: Volets
entity: input_text.selection_piece
show_icon: true
color_type: card
icon: mdi:window-shutter
color: grey
state:
- value: Volets
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_piece
value: Volets
- type: custom:button-card
name: Lumières
entity: input_text.selection_piece
show_icon: true
color_type: card
icon: mdi:lightbulb-on-10
color: grey
state:
- value: Lumières
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_piece
value: Lumières
- type: custom:button-card
name: Piscine
entity: input_text.selection_piece
show_icon: true
icon: mdi:pool
color_type: card
color: grey
state:
- value: Piscine
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_piece
value: Piscine
columns: 3
square: false
- type: conditional
conditions:
- entity: input_text.selection_piece
state: Volets
card:
type: entities
entities:
- entity: cover.volet_porte_fenetre
- entity: cover.volet_salon
- entity: cover.volet_bureau
- entity: cover.volet_chambre_parents
- entity: cover.volet_eliott
- entity: cover.volet_entree
- entity: cover.volet_salle_de_bain_etage
- entity: cover.volet_salle_a_manger
- entity: cover.porte_garage
- type: conditional
conditions:
- entity: input_text.selection_piece
state: Lumières
card:
type: grid
cards:
- type: custom:button-card
name: Entrée
entity: input_text.selection_light
show_icon: true
color_type: card
icon: mdi:coat-rack
color: blue
state:
- value: Entrée
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Entrée
- type: custom:button-card
name: Garage
entity: input_text.selection_light
show_icon: true
color_type: card
icon: mdi:car
color: blue
state:
- value: Garage
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Garage
- type: custom:button-card
name: Buanderie
entity: input_text.selection_light
show_icon: true
icon: mdi:washing-machine
color_type: card
color: blue
state:
- value: Buanderie
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Buanderie
- type: custom:button-card
name: Cellier
entity: input_text.selection_light
show_icon: true
icon: mdi:food
color_type: card
color: blue
state:
- value: Cellier
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Cellier
- type: custom:button-card
name: Jardin
entity: input_text.selection_light
show_icon: true
icon: mdi:tree
color_type: card
color: blue
state:
- value: Jardin
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Jardin
- type: custom:button-card
name: Escalier
entity: input_text.selection_light
show_icon: true
icon: mdi:stairs
color_type: card
color: blue
state:
- value: Escalier
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Escalier
- type: custom:button-card
name: Cuisine
entity: input_text.selection_light
show_icon: true
icon: mdi:cookie
color_type: card
color: blue
state:
- value: Cuisine
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Cuisine
- type: custom:button-card
name: Salon
entity: input_text.selection_light
show_icon: true
icon: mdi:monitor-screenshot
color_type: card
color: blue
state:
- value: Salon
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Salon
- type: custom:button-card
name: Salle de bain
entity: input_text.selection_light
show_icon: true
icon: mdi:shower
color_type: card
color: blue
state:
- value: Salle de bain
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Salle de bain
- type: custom:button-card
name: Chambres
entity: input_text.selection_light
show_icon: true
icon: mdi:bed
color_type: card
color: blue
state:
- value: Chambres
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Chambres
- type: custom:button-card
name: Bureau
entity: input_text.selection_light
show_icon: true
icon: mdi:desk
color_type: card
color: blue
state:
- value: Bureau
color: orange
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.selection_light
value: Bureau
columns: 3
square: false
- type: conditional
conditions:
- entity: input_text.selection_light
state: Entrée
card:
type: entities
entities:
- entity: light.entree
title: entrée
- type: conditional
conditions:
- entity: input_text.selection_light
state: Garage
card:
type: entities
entities:
- entity: light.garage
- entity: light.atelier
title: Garage
- type: conditional
conditions:
- entity: input_text.selection_light
state: Buanderie
card:
type: entities
entities:
- entity: light.buanderie
title: Buanderie
- type: conditional
conditions:
- entity: input_text.selection_light
state: Cellier
card:
type: entities
entities:
- entity: light.cellier
title: Cellier
- type: conditional
conditions:
- entity: input_text.selection_light
state: Jardin
card:
type: entities
entities:
- entity: light.jardin
- entity: light.preau
- entity: light.serre
title: Jardin
- type: conditional
conditions:
- entity: input_text.selection_light
state: Escalier
card:
type: entities
entities:
- entity: light.escalier_bas
- entity: light.escalier_haut
title: Escalier
- type: conditional
conditions:
- entity: input_text.selection_light
state: Cuisine
card:
type: entities
entities:
- entity: light.cuisine
- entity: light.plan_de_travail
title: Cuisine
- type: conditional
conditions:
- entity: input_text.selection_light
state: Salon
card:
type: entities
entities:
- entity: light.salon
- entity: light.salle_a_manger
- entity: light.lampe_sam
- entity: light.couloir
- entity: light.balcon
title: Salon
- type: conditional
conditions:
- entity: input_text.selection_light
state: Salle de bain
card:
type: entities
entities:
- entity: light.lumiere_salle_de_bain
title: Salle de bain
- type: conditional
conditions:
- entity: input_text.selection_light
state: Chambres
card:
type: entities
entities:
- entity: light.chambre_parents
- entity: light.chambre_eliott
title: Chambres
- type: conditional
conditions:
- entity: input_text.selection_light
state: Bureau
card:
type: entities
entities:
- entity: light.bureau
title: Bureau
merci pour les idées!
Je vois en haut de ta capture, dans la barre bleu, que tu as plusieurs onglets, j’ai vu cela aussi dans des vidéos sur youtube avec la possibilité de sélectionner ces espaces sur smartphone ou autre pour séparer des choses différentes. mais je ne parviens pas du tout à les créer, j’ajoute des onglets mais ils n’apparaissent pas dans mon téléphone ni quand je referme la modification du dashboard, je ne dois pas bien m’y prendre.
Merci de ton aide
Je ne suis pas sûr de comprendre : tu as créé des vues ou des sous-vues ?
Si sous-vues, il n’y aura pas d’onglets hors édition. Si vue, tu devrais avoir 1 onglet pour chaque vue .