Liste déroulante permettant de mettre a jour un graphe historique des valeurs

Bonjour,

Comme bcp de personnes j’ai quelques capteurs de température dans la maison, et je souhaite lorsque je clique sur un sensor temperature dans mon mushroom dashboard aller sur une page de mon dashboard avec ce sensor comme donnée d’entrée pour un historique des températures

Grosso modo avoir un dash board paramétrable

Peut etre que cela existe dans le monde git ou hacs mais pas trouvé

J’ai donc pensé au tout départ pour « simplifier » arriver sur une page historique avec une liste déroulante remplie de mes sensors température et qu’une fois sélectionné le sensor et bien … le graphe d’historique se mette à jour.

Je suis confronté à quelques pbs, dans la liste déroulante on affiche le name et non pas l’id, or je pense qu’il faut l’id pour afficher l’historique.

Bref je suis paumé

si vous avez quelques lumières.

Merci et bonne soirée

Arnaud

Je pense que tu peux faire ce que tu cherches en utilisant pop-up card.
Ci-dessous l’expérience que j’ai mise en place:

  • j’ai un petit dashboard sur les NSPanel qui ressemble à ça:

image
Lorsque je clicque sur la valeur de « température extérieure » (en bas à gauche), j’ai l’affichage suivant avec un pop-up qui me donne les courbes des températutres:
image
En clicquant sur « Fermer », le pop-up se ferme et l’affichange revient au dashboard initial.

Ci-dessous le code associé. Tu peux oublier tous les card-mod car j’ai eu besoin de gagner de la place sur mon dashbaord pour faire rentrer le tout sur le petit écran du NS Panel Pro.

  - show_name: true
    show_icon: false
    show_state: true
    type: glance
    entities:
      - entity: sensor.interieur_interieur_interieur_exterieur_temperature
        name: Extérieur
      - entity: sensor.interieur_temperature
        name: Salon
      - entity: sensor.thermometre_chambre_agathe_digital_temperature
        name: Ch. Agathe
      - entity: sensor.thermometre_chambre_parents_digital_temperature
        name: Ch. Parents
      - entity: sensor.ewelink_th01_temperature
        name: Bur. Sophie
    card_mod:
      style: |
        ha-card {
          padding: -20px !important;
          border: none;
          top: 0px;
          height: 70px !important;
        }
  - type: custom:popup-card
    entity: sensor.interieur_interieur_interieur_exterieur_temperature
    left_button: Fermer
    left_button_action:
      service: browser_mod.close_popup
    style: |-
      --popup-border-radius: 15px;
      --popup-background-color: transparent;
      --popup-border-width: 0px;
    card:
      type: grid
      cards:
        - 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_interieur_interieur_exterieur_temperature
              name: Température
              state_adaptive_color: true
            - color: aqua
              entity: sensor.interieur_interieur_interieur_exterieur_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: Extérieu
          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.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

``
2 « J'aime »

Merci pour ton retour, je tente cela !

Il y a plein de façon de faire cela, tout dépend de ce que tu veux faire et du temps que tu veux y passer pour le rendu final…

  • tu peux juste afficher le « plus d’info » de ton sensor sur le clic pour avoir un mini historique de ton sensor si ça te suffit.
  • tu peux définir une navigation vers une vue ou tu aurais un graphe de ton sensor (avec une carte capteur/sensor ou plus élaboré genre mini-graph-card, apex-chart ou autre…)
  • tu peux définir un pop up avec le même type de cartes que précédemment (avec browser-mod par exemple)
1 « J'aime »