Mise en forme des cartes utilisateurs

Entraide Home Assistant
1

Bonjour a toutes et tous ,

Mon problème est très simple ou trop .
Je n arrive presque jamais a intégrer des cartes utilisateurs (exemple de la carte meteo de @warcozes

j ai bien entendu installé l ensemble des javascript , renommer les entités par les miens etc .
Ma question est plutôt sur le fond .
Lors de l ajout manuel d’une carte , je me retrouve systématiquement avec Erreurs de configuration détectées:

  • duplicated mapping key

je vois bien que certaines couleurs changent lorsque j’enlève des espaces .
Il doit y avoir une règle bien précise car le simple copier/coller ( én changeant les entités bien sur )me retourne cette erreur

je ne sais pas si je me suis bien fait comprendre , je suis ouvert a fournir des screens

Merci d avoir pris le temps de me lire ,

Ma configuration

[center]
Version core-2023.10.5

Système d’exploitation hôte Home Assistant OS 11.0
Canal de mise à jour stable
Version du Supervisor supervisor-2023.10.0
Version de l’agent 1.6.0
Version de Docker 24.0.6
Taille total du disque 30.8 GB
Taille du disque utilisé 11.9 GB
Sain true
Prise en charge true
Tableau de bord ova
API du Supervisor ok
Version de l’API ok
Modules complémentaires installés Example (7.0.4), Terminal & SSH (9.7.1), ESPHome (2023.10.3), Mosquitto broker (6.3.1), Node-RED (14.6.3), Samba share (10.0.2), Samba Backup (5.2.0), File editor (5.6.0), MaryTTS (1.5.2), MyElectricalData (0.9.2), InfluxDB (4.8.0), MQTT Explorer (browser-1.0.1), Zigbee2MQTT Edge (edge), Studio Code Server (5.13.0)
2

je prends exemple de cette carte.

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: true
  margin: true
  border_radius: true
  background: true
  outer_padding: false
cards:
  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card:
          $: |
            mwc-tab {
             background: var(--ha-card-background, var(--card-background-color, gray) );
               border-color: gray;
               border-width: 1px;
               border-top-left-radius: 12px;
               border-top-right-radius: 12px;
               border-style: solid;
               overflow: hidden;
             }
             section article > * {
             --ha-card-border-radius: 0px 0px 12px 12px;
             }
    card:
      type: custom:tabbed-card
      styles:
        '--mdc-theme-primary': '#44739e'
        '--mdc-tab-text-label-color-default': gray
      tabs:
        - card:
            type: custom:meteofrance-weather-card
            entity: weather.wambrechies
            number_of_forecasts: '10'
            forecast: true
            alert_forecast: true
            cloudCoverEntity: sensor.wambrechies_cloud_cover
            rainChanceEntity: sensor.wambrechies_rain_chance
            freezeChanceEntity: sensor.wambrechies_freeze_chance
            snowChanceEntity: sensor.wambrechies_snow_chance
            uvEntity: sensor.wambrechies_uv
            detailEntity: sensor.wambrechies_daily_precipitation
            alertEntity: sensor.59_weather_alert
            name: wambrechies
            static_icons: false
            wind_forecast_icons: true
            card_mod:
              style: |
                :host {
                   --card-mod-icon-color: #44839e;
                 }
                 ha-card {
                   top: -15px;
                   background: none;
                 }
          attributes: test
          label: meteo
          icon: mdi:weather-partly-cloudy
          minWidth: true
          isMinWidthIndicator: true
          card_mod: test
          style: |
            :host {
              --card-mod-icon-color: #44739e;
            }
            ha-card {
              top: -15px;
              background: none;
            }  
            attributes:
                    label: meteo
                    icon: mdi:weather-partly-cloudy
                    minWidth: true
                    isMinWidthIndicator: true
            card_mod:
                      style: |
                        :host {
                          --card-mod-icon-color: #44739e;
                        }
                        ha-card {
                          top: -15px;
                          background: none;
                        }                
            attributes:
            label: Wambrechies
                    icon: mdi:weather-partly-cloudy
                    minWidth: true
                    isMinWidthIndicator: true
             - type: custom:mod-card
                      card_mod:
              style:
                .: |
                  :host {
                    --text-divider-color: rgb(68, 115, 158);
                    --text-divider-line-size: 1px;
                  }
                  ha-card {
                    margin-top: -32px;
                    background: transparent;
                  }
             card:
              type: custom:text-divider-row
              text: Prévisions Jours
              align: left
               card:
              type: custom:text-divider-row
              text: Prévisions Jours
              align: left
              - type: custom:meteofrance-weather-card
            number_of_forecasts: '9'
            entity: weather.wambrechies
            alert_forecast: false
            details: false
            current: false
            forecast: true
            one_hour_forecast: true
            static_icons: false
            card_mod:
              style: |
                ha-card {
                  top: -20px;
                  height: 135px;
                  background: transparent;
                }
                - type: custom:mod-card
            card_mod:
              style:
                .: |
                  :host {
                    --text-divider-color: rgb(68, 115, 158);
                    --text-divider-line-size: 1px;
                  }
                   }
                  ha-card {
                    margin-top: -30px;
                    background: transparent;
                  }
                   card:
            type: custom:text-divider-row
              text: Prévisions 2 Jours
              align: left
            - type: custom:meteofrance-weather-card
            number_of_forecasts: '7'
            entity: weather.wambrechies
            alert_forecast: false
            details: false
            current: false
            forecast: true
            one_hour_forecast: true
            static_icons: false
            card_mod:
              style: |
                ha-card {
                  top: -20px;
                  height: 135px;
                  background: transparent;
                } 
             card_mod:
                - type: custom:stack-in-card
                mode: vertical
                keep:
                box_shadow: false
                margin: false
                border_radius: false
                background: false
                outer_padding: false
                cards:
                - type: custom:stack-in-card
            mode: horizontal
             cards:
              - type: vertical-stack
                cards:
             - type: custom:gap-card
                  height: 25
             - type: custom:tempometer-gauge-card
                    entity: weather.wambrechies
                    title: Baromètre wa
                    icon_color: '#44739e'
                    min: 960
                    max: 1060
                    decimals: 0
                    severity:
                      red: 980
                      yellow: 1000
                      green: 1020
            card_mod:
             style: |
            :host {
                          --paper-card-background-color: transparent;
                          --ha-card-border-radius: 0px;
                        }
                        .gauge-data #percent{
                          font-size: 1.8rem  !important;
                        }
                        .gauge-footer{
                          font-size: 1.4rem  !important;
                        }
                        .gauge-data #title {
                          font-size: 1rem  !important;
                        }
                         - type: vertical-stack
          cards:
            - type: custom:compass-card
              indicator_sensors:
                - sensor: weather.wambrechies
                  attribute: wind_bearing
                  indicator:
                    type: arrow_inward
              header:
                title:
                  value: VENT
                  color: '#49739e'
3

Salut,

le fait que tu parles d’ajouter des Javascripts à la main me fait penser que tu n’as pas HACS d’installé, ce n’est pas obligatoire, mais permet d’avoir un catalogue de cartes custom disponibles et les installer en 1 clic.

Ensuite le copier coller de YAML ça peut être compliqué, surtout quand on voit cette carte qui est assez complexe et illisible.
Mais les duplicate mapping key ça peut venir de soucis d’indentation, qui est une chose très importante dans YAML.

Je ne demande si ici le souci n’est pas dans la partie:

cards:
  - type: custom:mod-card
    card_mod:
.....
   card:
....
1 « J'aime »
4

Oui, là par exemple … c’est très étonnant
image
Là aussi, il y a trop d’espaces
image
Là ça part en live
image

5

Je ne suis pas fautif :stuck_out_tongue:
Comme te le dit @Pulpy-Luke, il y a des problèmes d’espaces. Bien respecter les espaces dans les codes de cartes.
C’est une habitude a prendre.

6

bonsoir a tous et merci de me répondre,
dans un premier temps @WarC0zes tu n’est pas le fautif bien entendu ^^

en faite je cherche a comprendre la structure d’une carte complexe comme notre ami @WarC0zes .
je ne comprends pas du tout ou je fais erreur ,
c’est ca qui m intéresse le plus .
j’ ai bien compris les espaces peut poser problème . ( sensible a la casse ) .
je voudrais comprendre ce que je fais de mal .

voila comment je m y prends :

je fais une nouvelle card manuelle
je copie/coller l’ ensemble de la card en prenant bien soin de vérifier les entités
j ai bien vérifié avant que l ensemble des lovelaces ( les fameux .js dont je parle précédemment ) soit bien chargées
je débute , je cherche , et je demande , je migre de jeedom a HA .
Merci d’avoir pris du temps pour me lire
seb de lille

7

ba oué je comprends bien , mais comment tu fais ? tu es vite perdu en faite , 1 espace , deux espaces , 3 espaces ? je comprends pas , a moins que tu utilises un Notepad particulier ?

8

et une autre question :
Pourquoi il y a une différence entre la carte sur le forum et le copié coller sur HA ( je ne parle pas des entités mais bien des espaces et compagnies , qui me font royalement ch***** ) je pige pas

9

Pour bien commencer faut s’habituer aux indentations des cartes générées automatiquement.
C’est quasiment toujours pareil. La différence majeure que tu peux avoir c’est quand il y des listes, à cause du « - » tu peux t’y perdre :slight_smile:

Mais en règle générale, il y a toujours 2 espaces d’indentation.
(Espaces remplacés pas des é toiles ci-dessous)

keep:
**box_shadow: true
cards:
**- type: custom:mod-card
  **card_mod:

Ca c’est repris partout… après c’est claire que quan les niveaux d’imbrication augmentent à un moment c’est compliqué de suivre :slight_smile:

10

c’est pourtant un simple copié coller . je dois peut être utilisé un autre éditeur de fichier ? je fais juste un CTRL CTRLV .

11

Avec notepad++ il est possible de vérifier des choses… quand je copie ta carte de 200 lignes dedans et que je met en mode YAML on dirait que ça part de travers à partir de la ligne 72.

12

Salut

Il y a aussi le module complémentaire « Studio Code Server » (attention il est gourmand, minimum 1Go de RAM) qui permet de vérifier les fichiers yaml lorsqu’on les édite :
image

13

alors merci de me répondre ,
les deux espaces j ai lu ca sur le forum us,
la ou je veux comprendre , c est la structure du code , et surtout pourquoi quand je colle un "script "d un autre utilisateur ca fonctionne pas ( en partant dans le sens ou je modifie forcement les entités et que j ai chargé les cards (.js)
j ai bien hacs d’installé .

14

merci @Giga77 je l ai installé il y a quelque jours :wink:

15

Salut

Pour comprendre le code, il n’y a pas trop d’autre choix que d’apprendre la ‹ grammaire › yaml.
Et c’est comme pour la lecture, c’est plus facile de commencer par faire des cartes simples, petites et moches (lire un tchoupi) que de se farcir 200 lignes de code copié depuis internet (lire du Balzac).
D’autant plus que dans ton exemple, tu fais a à la fois du yaml, du CSS,du json

2 « J'aime »