Quel type de carte pour capteur température + humidité?

Tu utilises ‹ sensor.capteur_temp_1_temperature › et aussi ‹ sensor.capteur_temperature_1_temperature ›, c’est l’entité qu’il faut utiliser, tu n’as sans doute pas mis toute la carte à jour avec tes entités !

Bob

Merci BOB! Je vais tester ce soir

Bonjour @herveaurel,

Oui pour finaliser ma carte je me suis inspiré de ta mise en forme.
Pour la petite histoire, je me suis tout d’abord inspiré de ça, trouvé sur le forum anglophone lorsque je cherchais à comprendre le fonctionnement d’Apexcharts :

Ce qui m’avait donné ma V1 en recollant les morceaux et les cartes :

Puis et malheureusement seulement après, j’ai découvert le forum francophone, puis ce sujet et enfin le post que tu précises. Ce qui m’a beaucoup aidé à finaliser la mise en forme et améliorer grandement le code pour obtenir la version que j’utilise actuellement :

Donc en partant initialement d’une page blanche, j’ai fini par obtenir quelque chose de similaire à ton travail, que j’ai découvert beaucoup trop tard car ça m’aurait fait économiser un temps monstrueux.

J’en profite du coup pour te remercier d’avoir partager cela, et m’excuser de ne pas t’avoir crédité dans mon post initial, ce que je vais faire de ce pas !

1 « J'aime »

Bonjour @Integra

J’utilise cette carte qui est vraiment sympa sur laquelle j’ai ajouté une info supplémentaire « link quality ».
Mon problème est que je n’arrive pas a aligner verticalement cette info avec celle de la jauge batterie, ce qui serai plus cohérent.

Merci d’avance pour votre aide…

Mon code :
type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    header:
      title: Température Chambre 1
      standard_format: true
      show: true
      show_states: false
      colorize_states: true
    series:
      - entity: sensor.z2m_capteur_snzb_ch1_temperature
        max: 40
        color: "#00FF00"
        show:
          legend_value: false
      - entity: sensor.z2m_capteur_snzb_ch1_humidity
        max: 100
        color: "#FEFEFE"
        show:
          legend_value: false
    apex_config:
      plotOptions:
        radialBar:
          offsetY: -5
          hollow:
            size: 70%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            dropShadow:
              enabled: true
              top: 3
              left: 0
              blur: 4
              opacity: 0.25
            strokeWidth: 75%
            margin: 3
      fill:
        type: gradient
        gradient:
          type: vertical
          gradientToColors:
            - "#E73E01"
            - "#0F9DE8"
          stops:
            - 0
            - 100
      legend:
        show: false
      chart:
        height: 220
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
        }
  - type: custom:button-card
    entity: sensor.z2m_capteur_snzb_ch1_temperature
    size: 6%
    icon: mdi:bed-king
    show_state: false
    show_name: false
    label: Chambre Ch1
    show_label: false
    styles:
      grid:
        - grid-template-areas: "\"link\" \"battery\" \"i\" \"l\" \"temp\" \"hum\""
      label:
        - font-size: 12px
        - font-style: italic
        - opacity: 75%
      icon:
        - opacity: 75%
      custom_fields:
        temp:
          - font-size: 27px
        hum:
          - font-size: 14px
          - font-style: italic
        battery:
          - padding-right: 220px
        link:
          - padding-left: 220px
    custom_fields:
      temp: >
        [[[ var temp = states['sensor.z2m_capteur_snzb_ch1_temperature' ].state;
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 20px; height: 20px; color: #7dc8ff ">
          </ha-icon>` + temp + '°'; ]]]
      hum: >
        [[[ var hum = states['sensor.z2m_capteur_snzb_ch1_humidity' ].state;
        return `<ha-icon
          icon="mdi:water"
          style="width: 15px; height: 15px; color: #7dc8ff ">
          </ha-icon>` + hum + '%'; ]]]
      battery: |
        [[[ var battery = states['sensor.z2m_capteur_snzb_ch1_battery' ].state;
            if (states['sensor.z2m_capteur_snzb_ch1_battery'].state >= 70) return `<ha-icon 
              icon="mdi:battery"
              style="width: 20px; height: 20px; color: green ">
              </ha-icon>` + battery + '%';
            if (states['sensor.z2m_capteur_snzb_ch1_battery'].state >= 20) return `<ha-icon 
              icon="mdi:battery-50"
              style="width: 20px; height: 20px; color: orange ">
              </ha-icon>` + battery + '%';
            if (states['sensor.z2m_capteur_snzb_ch1_battery'].state >= 1) return `<ha-icon 
              icon="mdi:battery-10"
              style="width: 20px; height: 20px; color: red ">
              </ha-icon>` + battery + '%'; ]]]
      link: >
        [[[ var link = states['sensor.z2m_capteur_snzb_sejour_linkquality'
        ].state; return `<ha-icon
          icon="mdi:signal"
          style="width: 20px; height: 20px; color: #7dc8ff ">
          </ha-icon>` + link + ' lqi'; ]]]
    card_mod:
      style: |
        ha-card {
          margin-top: -200px;
          background: none;
          box-shadow: none;
          border: none;
        }

dans le styles et custom_filed de ton link
enlève le padding-left et utilisa ça a la place :

      - position: absolute
      - left: 8%
      - top: 6%

et tu règle avec top et left l’emplacement exacte ou tu le veux.

2 « J'aime »

Merci @WarC0zes

C’est OK, parfait

2 « J'aime »

c’est chouette , j’aime beaucoup avec le cercle de confort coloré, vas falloir que je creuse :+1:

Sinon en beaucoup plus light : des badges.

image

les couleurs de fond désignent la pièce (je n’ai pas réussi , pour le moment, à afficher son nom au dessus de la valeur) et j’essaie aussi de changer la couleur de la valeur suivant celle-ci (entre autre en dessous de zéro pour l’extérieur, pour le moment c’est fixe).

Pour afficher le nom tu peux essayer les badges mushroom disponibles sur HACS. C’est pratiquement le même design mais tu peux prendre le contrôle à 100% sur les affichages.

Et avec un template tu peux mettre les deux valeurs sur la même ligne si tu veux…

mes badges sont des ‹ mushroom-chips › et ça doit être un probème de nom ou de syntaxe parce que (voir dessous) ça ne marche pas;
Pire si j’essaie de jouer sur la couleur du texte ça me fout en l’air le background (jardin_temperature)

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.t_h_salon_temperature
    primary: Salon
    icon_color: red
    use_entity_picture: true
    unit: "%"
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(230, 50, 20, 0.5);
          
  - type: entity
    entity: sensor.t_h_salon_humidite
    name: Salon
    icon_color: light-blue
    use_entity_picture: true
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(230, 50, 20, 0.5);
          --text-color: rgba(128, 255, 255, 1);
        }
  - type: entity
    entity: sensor.t_h_chambre_temperature
    name: T_Chambre
    icon_color: deep-purple
    use_entity_picture: false
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(256, 180, 60, 0.5);
          --text-color: rgba(0, 64, 30, 1);
        }
  - type: entity
    entity: sensor.t_h_chambre_humidite
    name: H_Chambre
    icon_color: light-blue
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(256, 180, 60, 0.5);
          --text-color: rgba(128, 255, 64, 1);
        }
  - type: entity
    entity: sensor.capteur_t_h_jardin_temperature
    name: T_Jardin
    icon_color: green
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(189, 256, 150, 0.4);
          {% set entity = 'sensor.capteur_t_h_jardin_temperature_h_jardin_temperature' %}
          {% if is_state(entity | float < 0 %}
          --text-color: red;
          {% elif is_state(entity,'Jaune') %}
            --text-color: yellow;
          {% elif is_state(entity,'Orange') %}
            --text-color: orange;            
          {% else %}
            --text-color: black;
          {% endif %} 
          
  - type: entity
    entity: sensor.capteur_t_h_jardin_humidite
    name: H_Jardin
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          --chip-background: rgba(189, 256, 150, 0.4);
          --text-color: rgba(128, 255, 64, 1);
        }

Bonjour @Dynaloo,

Ça rend bien comme ça et merci à @WarC0zes pour la solution !

Pour info le problème venait initialement de la ligne :

- grid-template-areas: "\"link\" \"battery\" \"i\" \"l\" \"temp\" \"hum\""

qui place tous les custom fields une ligne après l’autre.

La solution proposée par @WarC0zes est idéale car elle joue sur des réglages de carte en pourcentage et non en pixel précis (« px » comme pour le padding). Et donc lorsque l’on change d’écran la carte s’adapte bien mieux (PC <> smartphone par exemple).
Dans l’idéal, il faudrait appliquer cette même logique au style du custom field « Battery » pour qu’il ne dépende plus d’un placement en pixel mais en % sur la carte, pour éviter des bugs d’affichage entre différentes résolutions.

1 « J'aime »

Bonjour @Integra

J’ai en effet appliquer cette même logique au style du custom field « Battery »

Et, pour info, je n’ai aucun problème d’affichage sur mon smartphone.

C’est parfait

2 « J'aime »

Bonjour @Dynaloo ,
j’aime beaucoup ton affichage de température et je me suis permis de le reprendre, par contre, je n’arrive pas à le faire avec les paramètres cité par WarC0zes (en absolute), j’ai certains éléments qui se décalent.

Est-ce que tu pourrais partager ta carte svp ?
Aussi, tu penses qu’on pourrait réduire la largeur de l’ensemble pour ne pas faire trop large si j’en mets plusieurs cote à cote ?
Merci
Fabrice

J’ai abandonné quasi toutes mes cartes custom (sauf pour mes pièces : Mushroom) car je n’ai plus de temps à consacrer à la customisation, et je souhaitais un dashboard le plus léger et réactif possible.
Mon lovelace est passé de 40,000 à 9000 lignes.

Pour les cartes températures / humidité : idem.

Que des cartes natives, avec un code couleur pour me repairer facilement sur le graph.

Exemple la colonne température :

5 « J'aime »

Je comprends tout à fait, parfois je passe trop de temps sur la maintenance de mes cartes custom suite à une maj. Ton rendu est simple mais clair :+1:

Bonne idée d’associer les couleurs des pièces aux graphes :grin:
Par curiosité, quelle carte native as-tu utilisé pour le graphe multi couleur stp ?

et à quoi correspond la valeur Etage : 20.0°c ? c’est une moyenne des pièces de l’étage ?
Merci

@herveaurel je suis en train de penser comme toi.
Ton rendu est vraiment excellent :ok_hand:t2:
Tu veux bien partager ton code s’il te plaît ?

Y’a rien de sorcier : carte Tuile de base, et carte graph de base.
Vraiment rien de compliqué :wink:
(je suis au centre de permis, mon fils passe son permis dans quelques minutes :stuck_out_tongue: )

Carte titre
Carte Tile
Carte statistics-graph

Oui j’ai créé un sensor pour faire la moyenne des temp.

Bonjour @savfab

Je te joins mon code pour cette carte, ça fonctionne très bien chez moi.
Par contre je ne pourrai pas d’aider pour la réduire en largeur, peut être en utilisant une carte grille !!!

Code
type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    header:
      title: Température Salon / Cuisine
      standard_format: true
      show: true
      show_states: false
      colorize_states: true
    series:
      - entity: sensor.z2m_capteur_snzb_sejour_temperature
        max: 40
        color: "#00FF00"
        show:
          legend_value: false
      - entity: sensor.z2m_capteur_snzb_sejour_humidity
        max: 100
        color: "#FEFEFE"
        show:
          legend_value: false
    apex_config:
      plotOptions:
        radialBar:
          offsetY: -5
          hollow:
            size: 70%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            dropShadow:
              enabled: true
              top: 3
              left: 0
              blur: 4
              opacity: 0.25
            strokeWidth: 75%
            margin: 3
      fill:
        type: gradient
        gradient:
          type: vertical
          gradientToColors:
            - "#E73E01"
            - "#0F9DE8"
          stops:
            - 0
            - 100
      legend:
        show: false
      chart:
        height: 220
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
        }
  - type: custom:button-card
    entity: sensor.z2m_capteur_snzb_sejour_temperature
    size: 6%
    icon: mdi:sofa
    show_state: false
    show_name: false
    label: Chambre Ch1
    show_label: false
    styles:
      grid:
        - grid-template-areas: "\"link\" \"battery\" \"i\" \"l\" \"temp\" \"hum\""
      label:
        - font-size: 12px
        - font-style: italic
        - opacity: 75%
      icon:
        - opacity: 75%
      custom_fields:
        temp:
          - font-size: 27px
        hum:
          - font-size: 14px
          - font-style: italic
        battery:
          - position: absolute
          - left: 8%
          - top: 6%
        link:
          - position: absolute
          - left: 80%
          - top: 6%
    custom_fields:
      temp: >
        [[[ var temp = states['sensor.z2m_capteur_snzb_sejour_temperature'
        ].state; return `<ha-icon
          icon="mdi:thermometer"
          style="width: 20px; height: 20px; color: #f84c27 ">
          </ha-icon>` + temp + '°'; ]]]
      hum: >
        [[[ var hum = states['sensor.z2m_capteur_snzb_sejour_humidity' ].state;
        return `<ha-icon
          icon="mdi:water"
          style="width: 15px; height: 15px; color: #7dc8ff ">
          </ha-icon>` + hum + '%'; ]]]
      battery: >
        [[[ var battery = states['sensor.z2m_capteur_snzb_sejour_battery'
        ].state;
            if (states['sensor.z2m_capteur_snzb_sejour_battery'].state >= 70) return `<ha-icon 
              icon="mdi:battery"
              style="width: 20px; height: 20px; color: green ">
              </ha-icon>` + battery + '%';
            if (states['sensor.z2m_capteur_snzb_sejour_battery'].state >= 20) return `<ha-icon 
              icon="mdi:battery-50"
              style="width: 20px; height: 20px; color: orange ">
              </ha-icon>` + battery + '%';
            if (states['sensor.z2m_capteur_snzb_sejour_battery'].state >= 1) return `<ha-icon 
              icon="mdi:battery-10"
              style="width: 20px; height: 20px; color: red ">
              </ha-icon>` + battery + '%'; ]]]
      link: >
        [[[ var link = states['sensor.z2m_capteur_snzb_sejour_linkquality'
        ].state; return `<ha-icon
          icon="mdi:signal"
          style="width: 20px; height: 20px; color: #7dc8ff ">
          </ha-icon>` + link + ' lqi'; ]]]
    card_mod:
      style: |
        ha-card {
          margin-top: -160px;
          background: none;
          box-shadow: none;
          border: none;
        }
  - type: entities
    entities:
      - entity: sensor.z2m_capteur_snzb_sejour_last_seen
        name: " Last seen"
    card_mod:
      style: |
        ha-card {
          margin-top: -40px;
          background: none;
          box-shadow: none;
          border: none;
        }

4 « J'aime »

Vraiment top , je l’ai piqué

Merci beaucoup !

1 « J'aime »

Bonsoir,
Tout pareil @herveaurel, j’ai vu beaucoup de tes belles créations mais je reste dans le standard qui s’améliore beaucoup avec les tuiles, je préfère peaufiner les automatisations et fonctionnalités que le look qui me convient bien de base.
Bob

1 « J'aime »