🎨 [Mon Dashboard] - @Clemalex

[antyamok]

Je te remercie pour toutes ses indications.
Je vais regarder ça dès que j’ai un peu de temps.

[antyamok]

Bon j’ai enfin pris le temps de regarder. Je me retrouve avec une erreur constante, peu importe ce que je fais. J’ai le message suivant

Button-card template « volet » is missing !

J’ai tenté de mettre le code dans un fichier button_card_templates.yaml ou dans ui-lovelace.yaml mais je me retrouve toujours avec cette erreur!

Un peu d’aide serait la bien venue

[Clemalex]

Partage tes fichiers, c’est un problème d’inclusion…

Partage ton ui-lovelace.yaml et ton button-card-templates.yaml ET une capture de ton arborescence (dossiers/fichiers)

enleve les données sensible

[antyamok]

Pour info, ici n’est présent mon HA non fonctionnel. Mais qui remplacera, quand j’y arriverai le HA basique fournie par défaut.

ui-lovelace

> ##########################################################################
#                                                                        #
#                              * SETTINGS *                              #
#                                                                        #
##########################################################################

button_card_template: !include button_card_templates.yaml


##########################################################################
#                                                                        #
#                              * LOVELACE *                              #
#                                                                        #
##########################################################################

views:
  - title: La Ome
    panel: true

button_card_templates

button_card_templates:
  volet_stop:
    icon: 'mdi:stop'
    name: Stop
  volet_monter:
    icon: 'mdi:chevron-up'
    name: Monter
  volet_descendre:
    icon: 'mdi:chevron-down'
    name: Descendre
  volet_canicule:
    icon: 'mdi:weather-sunset-up'
    name: Soleil
    styles:
      icon:
        - transform: rotate(0.5turn)
  volet_stop_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    tap_action:
      action: call-service
      service: cover.stop_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet_canicule_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
    tap_action:
      action: call-service
      service: cover.set_cover_position
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
        position: 25
  volet_monter_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]  
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet_descendre_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].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: |
          [[[ return variables.volets ]]]
  volet:
    color: auto
    color_type: icon
    show_icon: true
    show_label: false
    show_last_changed: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - height: 80px
        - width: 80px
        - margin: 5px 5px 0px 11px
        - padding: 0px 0px
        - background-color: var(--primary-background-active-color)
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 2px
        - top: '-15px'
        - transform: scale(1)
        - color: var(--primary-color)
      name:
        - position: absolute
        - left: 5px
        - bottom: 5px
        - font-variant: small-caps
        - font-size: 14px
        - color: var(--primary-color)

Capture de l’arborescence

[Clemalex]

La vue est vide ? Je ne vois pas l’appel au modèle …

Il me semble que c’est bien un problème d’inclusion.

Regarde par ici pour l’exemple : GitHub - matt8707/hass-config: ✨ A different take on designing a Lovelace UI (Dashboard)

Mais pour ton cas :

@antyamok

button_card_template: !include button_card_templates.yaml

il manque un s à la clé button_card_templateS:

##########################################################################
#                                                                        #
#                              * SETTINGS *                              #
#                                                                        #
##########################################################################

#button_card_template: !include button_card_templates.yaml
button_card_templates: !include button_card_templates.yaml


##########################################################################
#                                                                        #
#                              * LOVELACE *                              #
#                                                                        #
##########################################################################

views:
  - title: La Ome
    panel: true

Et, en plus le fait de l’inclure dans un autre fichier tu dois enlever la clé du fichier inclus et tout indenter correctement :

#button_card_templates
volet_stop:
  icon: 'mdi:stop'
  name: Stop
volet_monter:
  icon: 'mdi:chevron-up'
  name: Monter
volet_descendre:
  icon: 'mdi:chevron-down'
  name: Descendre
volet_canicule:
  icon: 'mdi:weather-sunset-up'
  name: Soleil
  styles:
    icon:
      - transform: rotate(0.5turn)
volet_stop_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  tap_action:
    action: call-service
    service: cover.stop_cover
    service_data:
      entity_id: |
        [[[ return variables.volets ]]]
volet_canicule_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  styles:
    card:
      - background-color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--primary-background-inactive-color)';
            else return 'var(--primary-background-active-color)';
          ]]]
    icon:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
    name:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
  tap_action:
    action: call-service
    service: cover.set_cover_position
    service_data:
      entity_id: |
        [[[ return variables.volets ]]]
      position: 25
volet_monter_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  styles:
    card:
      - background-color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--primary-background-inactive-color)';
            else return 'var(--primary-background-active-color)';
          ]]]
    icon:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
    name:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]  
  tap_action:
    action: call-service
    service: cover.open_cover
    service_data:
      entity_id: |
        [[[ return variables.volets ]]]
volet_descendre_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  styles:
    card:
      - background-color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--primary-background-inactive-color)';
            else return 'var(--primary-background-active-color)';
          ]]]
    icon:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
    name:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].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: |
        [[[ return variables.volets ]]]
volet:
  color: auto
  color_type: icon
  show_icon: true
  show_label: false
  show_last_changed: false
  show_name: true
  show_state: false
  styles:
    card:
      - border-radius: 10px
      - height: 80px
      - width: 80px
      - margin: 5px 5px 0px 11px
      - padding: 0px 0px
      - background-color: var(--primary-background-active-color)
    grid:
      - position: relative
    icon:
      - position: absolute
      - left: 2px
      - top: '-15px'
      - transform: scale(1)
      - color: var(--primary-color)
    name:
      - position: absolute
      - left: 5px
      - bottom: 5px
      - font-variant: small-caps
      - font-size: 14px
      - color: var(--primary-color)

[antyamok]

Merci pour ton oeil avisé, c’est déjà mieux.

Par contre lorsque j’appuie sur le bouton « soleil » rien ne se passe !
Je crois que le problème vient du fait que les interrupteurs de volets ne renvoient pas l’état dans lequel se trouve le moteur (fermé à 30% ou ouvert à 50% par ex.).
C’est normal ? il y a quelque chose à faire ?

[Clemalex]

@Clemalex

service: cover.set_cover_position

C’est ce service qui est appelé, essaye le depuis Outils de développement → Onglet SERVICES

[antyamok]

Et bien j’i l’impression que mes interrupteurs gérant les volets ne comprennent pas ce service.
Lorsque je par ex :

service: cover.set_cover_position
target:
  entity_id: cover.volet_bureau
data:
  position: 50

Je n’ai rien qui se passe !

[Clemalex]

Ouvre un sujet d’entraide pour ça
En indiquant le materiel utilisé.

[antyamok]

yes. Je vais le faire !

[Clemalex]

Le code :

type: vertical-stack
cards:
  - color: auto
    color_type: icon
    icon: 'mdi:gas-station-outline'
    layout: icon_name
    name: SP95
    show_icon: true
    show_label: false
    show_last_changed: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - height: 50px
        - width: 200px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
        - background-color: 'rgba(0,0,0,0)'
        - box-shadow: none
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 25px
        - width: 30%
        - top: 0px
        - color: var(--sp95-color)
      name:
        - position: absolute
        - left: '-20px'
        - font-size: 20px
    tap_action:
      action: none
    type: 'custom:button-card'
  - color_type: icon
    custom_fields:
      price: |
        [[[
         return `
           <span style="color: var(--text-color-sensor);">${states['sensor.essence_sp95_intermarche'].state}</span>`
        ]]]
    name: Intermarché
    show_icon: false
    show_last_changed: false
    show_name: true
    styles:
      card:
        - border: 2px solid var(--primary-color)
        - border-radius: 5px
        - height: 1em
      custom_fields:
        price:
          - background-color: 'rgba(0, 0, 0, 0)'
          - position: absolute
          - bottom: '-10px'
          - right: 5px
          - font-size: 15px
          - line-height: 20px
          - '--text-color-sensor': |
              [[[
                if ( (states['sensor.essence_sp95_best_price'].state == 'intermarche') ) return 'green';
                else return 'var(--primary-color)';
              ]]]
      grid:
        - position: relative
      name:
        - font-variant: small-caps
        - justify-self: start
        - padding: 0 15px
        - color: |
            [[[
              if ( (states['sensor.essence_sp95_best_price'].state == 'intermarche') ) return 'green';
              else return 'var(--primary-color)';
            ]]]
    type: 'custom:button-card'
    color_type: icon
    icon: 'mdi:gas-station-outline'
    layout: icon_name
    name: SP95
    show_icon: true
    show_label: false
    show_last_changed: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - height: 50px
        - width: 200px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
        - background-color: 'rgba(0,0,0,0)'
        - box-shadow: none
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 25px
        - width: 30%
        - top: 0px
        - color: var(--sp95-color)
      name:
        - position: absolute
        - left: '-20px'
        - font-size: 20px
    tap_action:
      action: none
    type: 'custom:button-card'
  - color_type: icon
    custom_fields:
      price: |
        [[[
         return `
           <span style="color: var(--text-color-sensor);">${states['sensor.essence_sp95_carrefour'].state}</span>`
        ]]]
    name: Carrefour
    show_icon: false
    show_last_changed: false
    show_name: true
    styles:
      card:
        - border: 2px solid var(--primary-color)
        - border-radius: 5px
        - height: 1em
      custom_fields:
        price:
          - background-color: 'rgba(0, 0, 0, 0)'
          - position: absolute
          - bottom: '-10px'
          - right: 5px
          - font-size: 15px
          - line-height: 20px
          - '--text-color-sensor': |
              [[[
                if ( (states['sensor.essence_sp95_best_price'].state == 'carrefour') ) return 'green';
                else return 'var(--primary-color)';
              ]]]
      grid:
        - position: relative
      name:
        - font-variant: small-caps
        - justify-self: start
        - padding: 0 15px
        - color: |
            [[[
              if ( (states['sensor.essence_sp95_best_price'].state == 'carrefour') ) return 'green';
              else return 'var(--primary-color)';
            ]]]
    type: 'custom:button-card'

[engi]

Bonjour Clemalex,

Je débute avec les custom button card.
Peux tu me dire où tu stockes la valeur de cette variable : var(--sp95-color) ?
Merci pour ton aide

[Clemalex]

C’est des variables à déclarer dans le thème utilisé par l’utilisateur :

J’en parle ici-> https://forum.hacf.fr/t/comment-colorer-ses-icones-pour-les-debutants-tuto-debutant-n-1/308/44?u=clemalex

Et explique ici → https://forum.hacf.fr/t/comment-colorer-ses-icones-pour-les-debutants-tuto-debutant-n-1/308/46?u=clemalex

Et ça semble correspondre à ce sujet où je l’explique (mieux ?) :

https://forum.hacf.fr/t/utiliser-des-variables-dans-les-modeles/3141/2?u=clemalex

[engi]

Cool, merci pour la réponse et sa rapidité !

[Guizmos]

Salut,

Merci pour ce partage et pour ce super boulot.
Comment obtiens-tu ce sensor :

@Clemalex

sensor.essence_sp95_best_price

C’est tout ce qu’il me manque pour pouvoir utiliser correctement ta card

[Clemalex]

Ici :

Comparer les prix des carburants de vos stations préférées

Bonjour à tous, Ceci est mon premier article, il fait suite au commentaire de @Christianb233. N’hésitez pas à me faire des remarques ! Je vous propose de (re)découvrir l’intégration ‹ scrape › de Home Assistant. Scrape, Scraping ??? Le scraping est le simple fait d’extraire des données d’une page web et on va l’utiliser pour récupérer le prix du carburant de plusieurs stations afin de faire quelques économies en ciblant la station la moins chère et l’afficher sur votre dashboard. J’ai ch…

[Guizmos]

Merci pour la réponse, c’est parfait

[Coben]

Hello,

Je deterre un peux.

@Clemalex Possible d’avoir la carte avec le thermostat?

Merci d’avance!

[Clemalex]

Quelles cartes exactement ?