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

Bonjour,

J’ai récemment reçu 4 capteurs de température/humidité Tuya.
Je cherche comment en faire des cartes sympas, mais j’ai du mal à trouver comment avoir un joli rendu sympa (oui je sais, c’est assez subjectif comme notion…)

J’ai réussi à faire ceci :

ou encore ceci :

Mais ni l’une ni l’autre ne me satisfont vraiment…
La première est trop terne, et même si je mets les icones en couleur, ça restera pas terrible…

La seconde est trop grosse, et j’ai trop d’espace entre l’en-tête « Capteur TuYa n°1 » et les mesures…

Voilà le code des deux tuiles :

première tuile
type: entities
title: Temperature
entities:
  - entity: sensor.tuya_t_h_01_humidity
    type: custom:multiple-entity-row
    name: Capteur n°1
    icon: mdi:numeric-1-box-multiple
    secondary_info: last-changed
    entities:
      - entity: sensor.tuya_t_h_01_temperature
        name: false
        icon: mdi:thermometer
      - entity: sensor.tuya_t_h_01_temperature
        name: false
      - entity: sensor.tuya_t_h_01_humidity
        name: false
        icon: mdi:water-percent
  - entity: sensor.tuya_t_h_02_humidity
    type: custom:multiple-entity-row
    name: Capteur n°2
    icon: mdi:numeric-2-box-multiple
    secondary_info: last-changed
    entities:
      - entity: sensor.tuya_t_h_02_temperature
        name: false
        icon: mdi:thermometer
      - entity: sensor.tuya_t_h_02_temperature
        name: false
      - entity: sensor.tuya_t_h_02_humidity
        name: false
        icon: mdi:water-percent
  - entity: sensor.tuya_t_h_03_humidity
    type: custom:multiple-entity-row
    name: Capteur n°3
    icon: mdi:numeric-3-box-multiple
    secondary_info: last-changed
    entities:
      - entity: sensor.tuya_t_h_03_temperature
        name: false
        icon: mdi:thermometer
      - entity: sensor.tuya_t_h_03_temperature
        name: false
      - entity: sensor.tuya_t_h_03_humidity
        name: false
        icon: mdi:water-percent
  - entity: sensor.tuya_t_h_04_humidity
    type: custom:multiple-entity-row
    name: Capteur n°4
    icon: mdi:numeric-4-box-multiple
    secondary_info: last-changed
    entities:
      - entity: sensor.tuya_t_h_04_temperature
        name: false
        icon: mdi:thermometer
      - entity: sensor.tuya_t_h_04_temperature
        name: false
      - entity: sensor.tuya_t_h_04_humidity
        name: false
        icon: mdi:water-percent

Deuxième tuile
type: custom:stack-in-card
mode: horizontal
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: true
  outer_padding: false
cards:
  - type: horizontal-stack
    title: Capteur TuYa n°1
    cards:
      - type: custom:button-card
        entity: sensor.tuya_t_h_01_temperature
        layout: icon_state
        aspect_ratio: 1.8/1
        color: SeaGreen
        show_icon: true
        show_state: true
        show_name: false
        styles:
          card:
            - border-radius: 0
          state:
            - font-size: 40px
            - font-weight: bold
            - margin-left: '-10px'
            - justify-self: start
            - white-space: normal
          icon:
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 7) return 'rgb(255,64,56)';
                  if (entity.state >= 7 && entity.state < 16) return 'rgb(253,199,5)';
                  if (entity.state >= 16 && entity.state < 24) return 'rgb(45,209,96)';
                  if (entity.state >= 24 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 60) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]             
        card_mod:
          style: |
            ha-card {
              border: none;
            } 
      - type: custom:button-card
        entity: sensor.tuya_t_h_01_humidity
        name: Humidité
        layout: icon_state
        aspect_ratio: 1.8/1
        color: SeaGreen
        show_icon: true
        show_state: true
        show_name: false
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 40px
            - margin-left: '-50px'
            - white-space: normal
          state:
            - font-size: 40px
            - margin-left: '-35px'
            - font-weight: bold
            - white-space: normal
          icon:
            - left: 35px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 15) return 'rgb(255,64,56)';
                  if (entity.state >= 15 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 65) return 'rgb(45,209,96)';
                  if (entity.state >= 65 && entity.state < 75) return 'rgb(253,199,5)';
                  if (entity.state >= 75 && entity.state < 100) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]            
        card_mod:
          style: |
            ha-card {
              border: none;
            }

Je précise que ces codes ont été glanés par-ci par-là :slight_smile: Pour la première tuile c’est sur je sujet Netatmo.

Du coup, comment feriez-vous pour avoir un meilleur rendu qui ne prenne pas trop de place en hauteur ?
Merci pour vos conseils et propositions :innocent:

Perso je ne les affiches que sous forme de courbe (avec couleur sur seuils) réglé sur 96h. La valeur a l’instant T ne me sert a rien je préfère suivre des tendances.
Par contre ça prend plus de place sorry.

1 « J'aime »

Salut,
comme dirait @anon41081891, utilise button-card et des custom_fileds .

ou avec mini-graph-card
image

3 « J'aime »

Bonsoir,
Merci pour vos réponses :slight_smile:

la mini-graph-card me parait un bon compromis :slight_smile:
Faut que je teste pour la température.

Va falloir que j’ouvre un autre sujet pour cette carte et une prise connectée… la valeur qui s’affiche est la valeur totale de l’énergie depuis l’intégration dans HA, moi j’aimerais avoir la valeur sur la journée… avec un graph en adéquation, donc sur la journée des valeurs d’énergie consommées par tranches de 30 minutes par exemple, et pas juste un cumul…

Salut, j’ai ça quelque part dans mon interface:

C’est moche, mais mon besoin était que ce soit compact. Tu peux ptet partir sur une idée de tableau similaire, mais en plus beau :wink:

1 « J'aime »

Intéressant ça aussi :blush:
Il manque pas grand chose à ton tableau pour être « joli » (bien que cette notion est subjective :sweat_smile:)
Il suffirait d’avoir les icônes en couleurs et que les en-têtes soient centrés par rapport aux valeurs :blush:

Yes, mais comme c’est pas pour mon interface générale je n’ai pas pris le temps de faire ça.
Si tu arrives à tes fins, n’hésite pas à partager ton code final :wink:
Cela dit je rejoins les autres avis, la valeur instantanée n’a que peu d’intérêt en fin de compte.

une vielle carte dont je ne me sert plus si cela peut aider :


avec un popup suite appuye sur chaque graph
exemple : temp cuisine :
image
et si reclic sur la temp :
image
exemple, humidité cuisine :
image
idem si reclic sur l’humidité:
image
et pareil si clic sur batterie ou link, les graphs associés s’ouvrent en popup

Tu veux bien partager le code de ta carté s’il te plait ?

@LeLapinFou
Hmmm, je me demande si ça n’est pas ce que tu viens de me montrer qu’il me faut ^^ C’est beau !
Tu veux bien partager le code également, s’il te plait, de toutes les parties ?

Ensuite, pour l’aspect utile ou non de la valeur instantanée de la température, tout va dépendre de la personne qui veut y avoir accès.
En ce qui me concerne, c’est surtout cette valeur qui m’intéresse. L’évolution est certes intéressante, mais si je regarde la température d’une pièce, c’est pour savoir combien il y fait à cet instant ^^

voici le code d’une carte, il te suffit de la dupliquer autant de fois que voulu :
image

#TEMPERATURE CUISINE
          - type: custom:mini-graph-card
            name: Cuisine
            icon: mdi:countertop
            line_width: 8
            font_size_header: 10
            font_size: 75
            hours_to_show: 24
            points_per_hour: 1
            line_color: '#ffc400'
            entities:
              - sensor.temperature_cuisine
            tap_action: !include popup_card/temperature/temp_cuisine.yaml

voici le code du popup, la aussi, tu duplique autant de fois que besoin.
image

    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      deviceID:
        - this
        - dashboard
      data:
        title: Cuisine
        content:
          type: grid
          columns: 1
          square: false
          cards:
            - type: custom:mini-graph-card
              name: Cuisine
              icon: mdi:countertop
              line_width: 2
              hours_to_show: 24
              points_per_hour: 1
              line_color: '#ffc400'
              entities:
                - sensor.temperature_cuisine
              show:
                extrema: true
            - type: grid
              columns: 3
              square: false
              cards:
                - type: entity
                  name: humidité
                  entity: sensor.humidity_temp_cuisine
                - type: entity
                  name: batterie
                  entity: sensor.power_temp_cuisine
                - type: entity
                  name: link
                  entity: sensor.temperature_cuisine_linkquality
1 « J'aime »

@LeLapinFou
Merci beaucoup
Ton fichier popup_card/temperature/temp_cuisine.yaml c’est ce que tu as mis en tant que « code du popup » ?

oui, le fichier temp_cuisine.yaml, c’est le second code que je t’ai donné :

    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      deviceID:
        - this
        - dashboard
x
x
x
x
1 « J'aime »

Chez moi, je les ai présentés comme ça :

image

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
  - type: custom:text-divider-row
    text: Capteurs
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.temperature_salon
        primary_info: state
        secondary_info: none
        icon_color: pink
      - type: custom:mushroom-entity-card
        entity: sensor.humidite_salon
        primary_info: state
        secondary_info: none
      - type: custom:mushroom-entity-card
        entity: sensor.etat_batterie_salon
        primary_info: state
        secondary_info: none
        icon_color: amber
#################
### CARD: THS ###
#################

type: entities
entities:
  #============================================================= Main
  - type: custom:paper-buttons-row
    <<: &pbr_config
      styles:
        justify-content: space-between
      card_mod:
        style: |
          /* custom:paper-buttons-row */
          div.flex-box {
            background: none;
            display: flex;
            margin: -20px -10px !important;   
          }
    base_config:
      <<: &buttons_config
        layout: state
        tooltip: false
        ripple: none
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.navigate
            data:
              path: /nova-dashboard/apex_ths
        hold_action: none
    buttons:
      - entity: sensor.mwr_aqara_living_luminance
        state: "{{ states(config.entity) | round(0)}} lux"
      - icon: mdi:sofa-single
        <<: &icon
          layout: icon
          style:
            icon:
              color: var(--secondary-text-color)
      - icon: mdi:bed
        <<: *icon
      - icon: mdi:chair-rolling
        <<: *icon
      - icon: mdi:tools
        <<: *icon
  - type: divider
    style:
      height: 2px
      margin-top: 15px
      margin-bottom: 15px
  #============================================================= Temperature
  - type: custom:paper-buttons-row
    <<: *pbr_config
    base_config:
      <<: *buttons_config
      state: "{{ states(config.entity) | round(1)}} °C"
    buttons:
      - icon: mdi:thermometer
        <<: *icon
      - entity: sensor.ths_moes_living_temperature
      - entity: sensor.ths_moes_bedroom_main_temperature
      - entity: sensor.ths_moes_office_temperature
      - entity: sensor.ths_moes_garage_temperature
  - type: divider
    style:
      height: 2px
      margin-top: 15px
      margin-bottom: 15px
  #============================================================= Humidity
  - type: custom:paper-buttons-row
    <<: *pbr_config
    base_config:
      <<: *buttons_config
      state: "{{ states(config.entity) | round(1)}} %"
    buttons:
      - icon: mdi:water-percent
        <<: *icon
      - entity: sensor.ths_moes_living_humidity
      - entity: sensor.ths_moes_bedroom_main_humidity
      - entity: sensor.ths_moes_office_humidity
      - entity: sensor.ths_moes_garage_humidity

J’ai un souci :
si je met la ligne d’include du fichier .yaml la carte ne fonctionne pas :


Le fichier existe bien :

J’ai installé le browser_mod via HACS.

le chemin de ton dossier ou se trouve le fichier du popup est bien le bon chemin accessible là ou se trouve le dashboard qui l’appelle ?
c’est souvent un problème d’emplacement du dossier cette erreur.
le fichier popup doit etre dans un sous dossier ou se trouve le dashboard principal appelé.

et chose importante, un popup ne peut pas etre appelé dans le mode éditeur… il ne fonctionne qu’en mode yaml.
image

marche pas le popup ici…

Heu je n’ai pas tout compris :sweat_smile:

Voilà architecture des dossiers :

je n’ai pas de dossiers aux noms de mes dashboards…
La carte de température se trouve dans le dashboard Climat :
Chemin : https://ha.ndd.tld/lovelace/climat

@titoumimi
J’ai commencé à faire ceci :

Je ne connaissais pas le custom:text-divider-row, très pratique, on ne perd pas autant de place qu’avec un titre classique.
Ça va me resservir ailleurs :wink:

J’hésite toujours à présenter les températures sous formes de mini graphique, ou bien juste avec la valeur actuelle…
Je n’arrive pas à me décider…
:rofl: :crazy_face:

J’ai mis des graphiques par étage sur l’accueil de mon dashboard, en séparant humidité / température.

Par contre, dans les pages « pièces » j’affiche les valeurs numériques

1 « J'aime »