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

Merci pour ton aide précieuse , trop fort :v:

Bon je n’y arrive pas, j’ai beau recopier le code, le modifier, ça mouline dans l’affichage de la carte et je ne vois aucune référence à la carte apex pourtant utilisée dans l’affichage

effectivement, pas de apexcharts-card pour c’est partie de code. Mais il en utilise pour d’autre chose.
recherche apexcharts-card , tu les trouvera. il utilise des decluttering_templates, pour les apex-chart.

tu peut tester ces codes.
pour faire des decluttering_templates, faut c’est carte.

Car c’est la partie template button card qu’il faut regarder.
Le template climat_card comme indiqué dans la carte.

1 « J'aime »

@MilesTEG1 Je cherche à faire exactement ce que tu as fait sur la première image
image
Est ce que tu aurais ton code et quelle carte tu as utilisé stp ?
Merci ! :slight_smile:

Bonjour,
ta le code dans le bouton première tuile, faut cliquer pour dérouler.

Il utilise la carte lovelace-multiple-entity-row:

1 « J'aime »

Ok merci je viens de voir ça, Top !

J’ai (encore) modifié les miennes ! :laughing:

3 « J'aime »

Bonjour,
Pour température et humidité, j’ai depuis longtemps ce genre de carte:
image
J’aime bien voir un petit historique des valeurs.

Je veux bien le code ^^

Même chose ^^
Me faudra faire ça en petit, j’ai pas la place d’afficher toutes mes sondes ainsi ^^
Ou alors, j’utilise les cartes de @herveaurel avec lien dessus pour ouvrir en popup ta carte plus détaillée ^^
(faudra que je trouve comment faire ça, d’ailleurs XD)

J’ai aussi la version en plus petit, pour mettre plusieurs sonde sur un seul écran sur mon NSPanel Pro:

Le code de ces petites cartes (c'est un popup):

Le code de ces petites cartes (c’est un popup):

          type: custom:mini-graph-card
        - card_mod:
            style: |
              .header {
                padding-bottom: 0px;
              }
              .states {
                padding-bottom: 0px;
              }
              ha-card {
                height: 100px !important;
                padding-top: 4px !important;
              }
              ha-card > div.header.flex > div > span {
                opacity: 1;
              }      
          entities:
            - color: white
              entity: sensor.interieur_temperature
              name: Température
              state_adaptive_color: true
            - color: aqua
              entity: sensor.interieur_humidity
              name: Humidité
              show_state: true
              state_adaptive_color: true
              y_axis: secondary
          hour24: true
          hours_to_show: 12
          points_per_hour: 2
          line_width: 3
          name: Salon
          align_header: center
          font_size: 60
          font_size_header: 15
          show:
            graphe: line
            icon: false
            legend: false
          type: custom:mini-graph-card
        - card_mod:
            style: |
              .header {
                padding-bottom: 0px;
              }
              .states {
                padding-bottom: 0px;
              }
              ha-card {
                height: 100px !important;
                padding-top: 4px !important;
              }
              ha-card > div.header.flex > div > span {
                opacity: 1;
              }      
          entities:
            - color: white
              entity: sensor.thermometre_chambre_agathe_digital_temperature
              name: Température
              state_adaptive_color: true
            - color: aqua
              entity: sensor.thermometre_chambre_agathe_digital_humidity
              name: Humidité
              show_state: true
              state_adaptive_color: true
              y_axis: secondary
          hour24: true
          hours_to_show: 12
          points_per_hour: 2
          line_width: 3
          name: Ch. Agathe
          align_header: center
          font_size: 60
          font_size_header: 15
          show:
            graphe: line
            icon: false
            legend: false
          type: custom:mini-graph-card
        - card_mod:
            style: |
              .header {
                padding-bottom: 0px;
              }
              .states {
                padding-bottom: 0px;
              }
              ha-card {
                height: 100px !important;
                padding-top: 4px !important;
              }
              ha-card > div.header.flex > div > span {
                opacity: 1;
              }      
          entities:
            - color: white
              entity: sensor.thermometre_chambre_parents_digital_temperature
              name: Température
              state_adaptive_color: true
            - color: aqua
              entity: sensor.thermometre_chambre_parents_digital_humidity
              name: Humidité
              show_state: true
              state_adaptive_color: true
              y_axis: secondary
          hour24: true
          hours_to_show: 12
          points_per_hour: 2
          line_width: 3
          name: Ch. Parents
          align_header: center
          font_size: 60
          font_size_header: 15
          show:
            graphe: line
            icon: false
            legend: false
          type: custom:mini-graph-card

Le code de la carte plus grande et détaillée:
type: custom:mini-graph-card
name: Chambre Agathe
height: 120
hours_to_show: 48
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
  - entity: sensor.thermometre_chambre_agathe_digital_temperature
    name: Temp.
    color: orange
  - color: rgb(68, 115, 158)
    entity: sensor.thermometre_chambre_agathe_digital_humidity
    name: Humidité
    show_line: true
    show_points: true
    show_legend: true
    y_axis: secondary
show:
  fill: true
  graph: line
  icon: true
  name: true
  state: true
  labels: true
  extrema: true
  average: true
  icon_adaptive_color: false
  labels_secondary: true
align_icon: right
align_state: left
card_mod:
  style: |
    ha-card .header.flex .name.flex {
      color: rgb(68, 115, 158);
    }
    ha-card .states.flex {
      font-size: 13.5px;
    }
    ha-card .header.flex .icon {
      color: orange;
    }
    ha-card .graph .graph__container .graph__labels {
      color: rgb(68, 115, 158);
    }
    ha-card .states.flex::after {
      content:  "{{states('sensor.thermometre_chambre_agathe_digital_battery') | round(0)}} %" }};
      {% if states('sensor.thermometre_chambre_agathe_digital_battery') < '20' %} background-color: rgba(255, 115, 158,0.4); {% else %} background-color: rgba(68, 115, 158,0.4); {% endif %}
      white-space: pre;
      padding: 2px 2px 0px 2px;
      border-radius: 4px;
      font-size: 9px;
    }
    ha-card {
      margin: 0px -10px -30px -10px;
    }

bonjour
En petit et sobre j’ai fait avec les cartes de base (un peu ma marotte, utiliser au maxi les fonctions natives)

decluttering_templates:
  thermometer_card:
    card:
      type: custom:stack-in-card
      mode: vertical
      keep:
        background: true
        box-shadow: true
        margin: true
        outer_padding: false
      cards:
        - type: vertical-stack
          cards:
            - type: custom:button-card
              template:
                - ball_card
                - no_style
                - temperature_mini_card_state
              show_name: true
              entity: '[[temperature]]'
              name: '[[name]]'
              label: |
                [[[ return (entity.state* 1).toFixed(1) +"°"  ]]] 
              styles:
                card:
                  - z-index: 1
                  - margin-bottom: 30px
            - type: custom:button-card
              template:
                - badge_auto_card
                - no_style
                - humidity_mini_card_state
              show_name: false
              entity: '[[humidity]]'
              label: |
                [[[ return (entity.state* 1).toFixed(1) +"%"  ]]] 
              styles:
                card:
                  - z-index: 1
                  - margin: 0
                  - padding: 0 0 0 5px
        - type: custom:mini-graph-card
          card_mod:
            style: |
              ha-card {
                 padding: 0px;
                 margin-top: -85px;
                 background: transparent;
                 overflow: visble !important; 
                 z-index: 0
               }          
          height: 170
          hours_to_show: 48
          points_per_hour: 2
          hour24: true
          smoothing: true
          line_width: 1
          line_color:
            - rgba(var(--orange-rgb),0.9)
            - rgba(var(--blue-rgb),0.4)
          decimals: 1
          entities:
            - entity: '[[temperature]]'
              name: Température
              show_legend: false
              smoothing: true
              y_axis: secondary
            - entity: '[[humidity]]'
              name: Humidité
              show_legend: false
              smoothing: true
          show:
            fill: true
            graph: line
            icon: false
            name: false
            state: false
            labels: false
            extrema: false
            icon_adaptive_color: false
            labels_secondary: false

Pour les button-card-templates, tu peux les retrouver sur mon Github:
- base
- ball_card
- badge_card
- badge_auto_card
- no_style
- temperature_mini_card_state
- humidity_mini_card_state

1 « J'aime »

C’est bien , ça relance le sujet pour une demande de code :+1:

2 « J'aime »

Logique, ce sujet apparait dans les derniers modifiés, alors la curiosité chatouille, un p’tit clic pour voir, et on balance une info si y’en a une nouvelle ! :slight_smile:

Bonjour, j’aime beaucoup j’essaye de reproduire mais je n’arrive absolument pas a faire la même chose

aurez vous le code a me faire parvenir s’il vous plaît

Déjà donné au dessus

j’ai vue qu’il du code en haut mais quand je copie colle voici le résultat

hello un petit truc simple qui a un rendu sympa aussi :

type: custom:stack-in-card
mode: vertical
keep:
  background: true
  margin: true
  outer_padding: true
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.temp_0_ext_temperature
        icon_color: pink
      - type: entity
        entity: sensor.temp_0_ext_humidity
        icon_color: cyan
      - type: entity
        entity: sensor.temp_0_ext_battery
        icon_color: amber
    alignment: justify
  - type: custom:mini-graph-card
    height: 100
    hours_to_show: 24
    points_per_hour: 4
    hour24: true
    line_width: 4
    line_color:
      - crimson
      - dodgerblue
    decimals: 1
    entities:
      - entity: sensor.temp_0_ext_temperature
        name: TEMP_EXT
        show_legend: true
        y_axis: secondary
      - entity: sensor.temp_0_ext_humidity
        name: Humidité
        show_legend: true
    show:
      fill: true
      graph: line
      icon: true
      name: true
      state: true
      labels: true
      extrema: true
      icon_adaptive_color: false
      labels_secondary: true
1 « J'aime »