Ouvrir une carte mini-graph-card quand on clic sur l'icône d'une carte (donc action du `icon_tap_action`))

MilesTEG1 · Juin 26, 2025, 7:45

Bonjour,

Mon problème

J’ai un dashboard de températures et d’humidité que j’ai simplifié pour utiliser auto-entities et la cartecustom:entity-progress-card :

J’aimerais pouvoir ouvrir une autre carte de graphique (avec mini-graph-card) avec un clic sur ma carte de température au lieu du graphique par défaut :

Est-ce que c’est possible ?
Si oui comment ?

Merci d’avance
Bonne journée

Ma configuration

Texte à remplacer par votre configuration

Comment récupérer ma configuration :
Dans votre HA, Menu latéral Paramètres > Système > Corrections puis les trois petits points en haut a droite > Informations Système puis une fois en bas Copier

WarC0zes · Juin 26, 2025, 7:52

Salut,
partage le code, c’est plus simple pour aider.

MilesTEG1 · Juin 26, 2025, 7:53

Bien vu

type: custom:auto-entities
filter:
  include:
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: temperature
        icon_tap_action:
          action: more-info
        unit: °C
        min_value: 0
        max_value: 40
      label: Sous-sol
      entity_id: sensor.temp_hum_*_temperature
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: humidity
        icon_tap_action:
          action: more-info
      label: Sous-sol
      entity_id: sensor.temp_hum_*_humidity
card:
  square: false
  type: grid
  columns: 2
show_empty: true
card_param: cards
sort:
  method: name
  numeric: false
  ignore_case: false

Les autres sections ont un code similaire, qui est juste adapté avec les filtres adéquats

WarC0zes · Juin 26, 2025, 7:54

As tu browser-mod installé ?

MilesTEG1 · Juin 26, 2025, 7:56

Il me semble oui.
Je vais vérifier

edit : je confirme qu’il est bien présent

WarC0zes · Juin 26, 2025, 8:05

un exemple ( modifie les entity_id, je les ai changer pour tester )
Comme pour browser-mod, tu peux configurer a ta guise.

popup3

edit:
mince je n’ai pas utilisé icon_tap_action: mais tap_action:. Il faut juste le changer aussi

edit2:
corriger avec le icon_tap_action

type: custom:auto-entities
filter:
  include:
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: temperature
        icon_tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              right_button: Fermer
              right_button_action:
                service: browser_mod.close_popup
                data:
                  browser_id: THIS
              size: normal
              style: "--popup-border-radius: 10px;"
              content:
                type: custom:mini-graph-card
                entities:
                  - entity: this.entity_id
        unit: °C
        min_value: 0
        max_value: 40
      label: Sous-sol
      entity_id: sensor.lywsd03mmc_*_temperature
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: humidity
        icon_tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              right_button: Fermer
              right_button_action:
                service: browser_mod.close_popup
                data:
                  browser_id: THIS
              size: normal
              style: "--popup-border-radius: 10px;"
              content:
                type: custom:mini-graph-card
                entities:
                  - entity: this.entity_id
       label: Sous-sol        
       entity_id: sensor.lywsd03mmc_*_humidity
card:
  square: false
  type: grid
  columns: 2
show_empty: true
card_param: cards
sort:
  method: name
  numeric: false
  ignore_case: false

MilesTEG1 · Juin 26, 2025, 8:13

@WarC0zes
Merci
J’ai modifié le tap_action en icon_tap_action Mais ça ne fait pas apparaitre de popup

WarC0zes · Juin 26, 2025, 8:15

Il faut configurer Browser-mod. C’est-à-dire enregistrer ton navigateur ( register ) et le faire sur tous les navigateurs ou appareils que tu utilises.

Quand tu vas afficher ton HA sur un navigateur, tu devrais voir c’est icône en bas à droite, il faut cliquer dessus.

MilesTEG1 · Juin 26, 2025, 8:20

Ha punaise je ne savais pas qu’il fallait faire ça
Merci
Une fois l’intégration ajoutée, et le browser ajouté aussi, ça fonctionne
J’ai coché l’ajout automatique des browsers ^^

Bon reste à voir la configuration de la carte pour avoir des couleurs qui varient en fonction de la valeur de la température.
Et voir à changer la carte de graphique

WarC0zes · Juin 26, 2025, 8:22

tu as la base pour afficher une autre carte. Ta plus cas configurer la carte mini-graph-card à ta guise.

Si tu ne veux pas la barre avec le bouton fermer qui s’affiche sur le popup, tu vires ce code :

              right_button: Fermer
              right_button_action:
                service: browser_mod.close_popup
                data:
                  browser_id: THIS

MilesTEG1 · Juin 26, 2025, 8:46

Merci @WarC0zes

Je posterais ma version de la carte une fois que j’aurais finalisé celle du graphique

MilesTEG1 · Juin 26, 2025, 9:15

Voilà ce que j’ai pour la carte mini-graph :

type: custom:mini-graph-card
entities:
  - entity: sensor.temp_hum_03_salle_de_bains_temperature
hours_to_show: 12
points_per_hour: 30
line_width: 3
smoothing: true
state_adaptive_color: true
hour24: true
color_thresholds_transition: smooth
animate: true
show:
  points: hover
  fill: fade
  legend: true
  labels: true
  name: true
  icon: true
  state: true
  average: true
  extrema: true
  labels_secondary: hover
  loading_indicator: true
  name_adaptive_color: true
  icon_adaptive_color: true
color_thresholds:
  - value: -25
    color: "#0d1b2a"
  - value: -20
    color: "#1b263b"
  - value: -15
    color: "#2a4365"
  - value: -10
    color: "#005f99"
  - value: -5
    color: "#008cba"
  - value: 0
    color: "#00bcd4"
  - value: 3
    color: "#26c6da"
  - value: 6
    color: "#4dd0e1"
  - value: 9
    color: "#4db6ac"
  - value: 12
    color: "#81c784"
  - value: 15
    color: "#cddc39"
  - value: 18
    color: "#ffeb3b"
  - value: 20
    color: "#ffc107"
  - value: 22
    color: "#ff9800"
  - value: 24
    color: "#ff5722"
  - value: 26
    color: "#f44336"
  - value: 28
    color: "#e91e63"
  - value: 30
    color: "#d81b60"
  - value: 32
    color: "#c2185b"
  - value: 35
    color: "#ad1457"
style: |
  ha-card {
    background: #1e1e1e;
    color: #ffffff;
    border-radius: 12px;
    box-shadow: none;
  }

Qu’en pensez-vous ?

MilesTEG1 · Juillet 8, 2025, 7:21

@WarC0zes
Salut
En utilisant CardMod je perds l’arrière plan des icônes de carte :

Saurais tu comment le remettre ?

Le code au cas où :

type: custom:auto-entities
filter:
  include:
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: temperature
        unit: °C
        min_value: 0
        max_value: 40
        icon_tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              size: normal
              timeout: 10000
              style: "--popup-border-radius: 10px;"
              content:
                type: custom:mini-graph-card
                entities:
                  - entity: this.entity_id
                hours_to_show: 12
                points_per_hour: 15
                line_width: 2
                smoothing: true
                state_adaptive_color: true
                hour24: true
                color_thresholds_transition: smooth
                animate: true
                show:
                  points: hover
                  fill: fade
                  legend: true
                  labels: true
                  name: true
                  icon: true
                  state: true
                  average: true
                  extrema: true
                  labels_secondary: hover
                  loading_indicator: true
                  name_adaptive_color: true
                  icon_adaptive_color: true
                color_thresholds:
                  - value: -25
                    color: "#0d1b2a"
                  - value: -20
                    color: "#1b263b"
                  - value: -15
                    color: "#2a4365"
                  - value: -10
                    color: "#005f99"
                  - value: -5
                    color: "#008cba"
                  - value: 0
                    color: "#00bcd4"
                  - value: 3
                    color: "#26c6da"
                  - value: 6
                    color: "#4dd0e1"
                  - value: 9
                    color: "#4db6ac"
                  - value: 12
                    color: "#81c784"
                  - value: 15
                    color: "#cddc39"
                  - value: 18
                    color: "#ffeb3b"
                  - value: 20
                    color: "#ffc107"
                  - value: 22
                    color: "#ff9800"
                  - value: 24
                    color: "#ff5722"
                  - value: 26
                    color: "#f44336"
                  - value: 28
                    color: "#e91e63"
                  - value: 30
                    color: "#d81b60"
                  - value: 32
                    color: "#c2185b"
                  - value: 35
                    color: "#ad1457"
                style: |
                  ha-card {
                    background: #1e1e1e;
                    color: #ffffff;
                    border-radius: 12px;
                    box-shadow: none;
                  }
      label: Sous-sol
      entity_id: sensor.temp_hum_*_temperature
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: humidity
        icon_tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              size: normal
              timeout: 10000
              style: "--popup-border-radius: 10px;"
              content:
                type: custom:mini-graph-card
                entities:
                  - entity: this.entity_id
                hours_to_show: 12
                points_per_hour: 15
                line_width: 2
                smoothing: true
                state_adaptive_color: true
                hour24: true
                color_thresholds_transition: smooth
                animate: true
                show:
                  points: hover
                  fill: fade
                  legend: true
                  labels: true
                  name: true
                  icon: true
                  state: true
                  average: true
                  extrema: true
                  labels_secondary: hover
                  loading_indicator: true
                  name_adaptive_color: true
                  icon_adaptive_color: true
                color_thresholds:
                  - value: 0
                    color: "#ff0000"
                  - value: 20
                    color: "#ff8c00"
                  - value: 35
                    color: "#ffc107"
                  - value: 45
                    color: "#cddc39"
                  - value: 50
                    color: "#4caf50"
                  - value: 60
                    color: "#2196f3"
                  - value: 70
                    color: "#3f51b5"
                  - value: 80
                    color: "#5e35b1"
                  - value: 90
                    color: "#7b1fa2"
                  - value: 100
                    color: "#4a148c"
                style: |
                  ha-card {
                    background: #1e1e1e;
                    color: #ffffff;
                    border-radius: 12px;
                    box-shadow: none;
                  }
      label: Sous-sol
      entity_id: sensor.temp_hum_*_humidity
card:
  square: false
  type: grid
  columns: 2
show_empty: true
card_param: cards
sort:
  method: name
  numeric: false
  ignore_case: false

Merci par avance

WarC0zes · Juillet 8, 2025, 8:30

MilesTEG1:

                style: |
                  ha-card {
                    background: #1e1e1e;
                    color: #ffffff;
                    border-radius: 12px;
                    box-shadow: none;
                  }

Salut,
il te manque le card_mod:.

                card_mod:
                  style: |
                    ha-card {
                      background: #1e1e1e;
                      color: #ffffff;
                      border-radius: 12px;
                      box-shadow: none;
                    }

Pour avoir un background sur l’icône de entity-progress-card , il faut ajouter l’option :

force_circular_background: true

MilesTEG1 · Juillet 8, 2025, 7:12

Salut @WarC0zes

Ok merci, c’est rajouté . Ça n’a pas l’air d’avoir fait changé quelque chose au Visuel de la carte…
]

Je l’ai mise là où tu l’as mise , mais je n’ai pas les fonds ronds des boutons…


type: custom:auto-entities
filter:
  include:
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: temperature
        unit: °C
        min_value: 0
        max_value: 40
        icon_tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              size: normal
              timeout: 10000
              style: "--popup-border-radius: 10px;"
              content:
                type: custom:mini-graph-card
                entities:
                  - entity: this.entity_id
                force_circular_background: true
                hours_to_show: 12
                points_per_hour: 15
                line_width: 2
                smoothing: true
                state_adaptive_color: true
                hour24: true
                color_thresholds_transition: smooth
                animate: true
                show:
                  points: hover
                  fill: fade
                  legend: true
                  labels: true
                  name: true
                  icon: true
                  state: true
                  average: true
                  extrema: true
                  labels_secondary: hover
                  loading_indicator: true
                  name_adaptive_color: true
                  icon_adaptive_color: true
                color_thresholds:
                  - value: -25
                    color: "#0d1b2a"
                  - value: -20
                    color: "#1b263b"
                  - value: -15
                    color: "#2a4365"
                  - value: -10
                    color: "#005f99"
                  - value: -5
                    color: "#008cba"
                  - value: 0
                    color: "#00bcd4"
                  - value: 3
                    color: "#26c6da"
                  - value: 6
                    color: "#4dd0e1"
                  - value: 9
                    color: "#4db6ac"
                  - value: 12
                    color: "#81c784"
                  - value: 15
                    color: "#cddc39"
                  - value: 18
                    color: "#ffeb3b"
                  - value: 20
                    color: "#ffc107"
                  - value: 22
                    color: "#ff9800"
                  - value: 24
                    color: "#ff5722"
                  - value: 26
                    color: "#f44336"
                  - value: 28
                    color: "#e91e63"
                  - value: 30
                    color: "#d81b60"
                  - value: 32
                    color: "#c2185b"
                  - value: 35
                    color: "#ad1457"
                card_mod:
                  style: |
                    ha-card {
                      background: #1e1e1e;
                      color: #ffffff;
                      border-radius: 12px;
                      box-shadow: none;
                    }
      label: Sous-sol
      entity_id: sensor.temp_hum_*_temperature
    - options:
        type: custom:entity-progress-card
        entity: this.entity_id
        theme: humidity
        icon_tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              size: normal
              timeout: 10000
              style: "--popup-border-radius: 10px;"
              content:
                type: custom:mini-graph-card
                entities:
                  - entity: this.entity_id
                hours_to_show: 12
                points_per_hour: 15
                line_width: 2
                smoothing: true
                state_adaptive_color: true
                hour24: true
                color_thresholds_transition: smooth
                animate: true
                show:
                  points: hover
                  fill: fade
                  legend: true
                  labels: true
                  name: true
                  icon: true
                  state: true
                  average: true
                  extrema: true
                  labels_secondary: hover
                  loading_indicator: true
                  name_adaptive_color: true
                  icon_adaptive_color: true
                color_thresholds:
                  - value: 0
                    color: "#ff0000"
                  - value: 20
                    color: "#ff8c00"
                  - value: 35
                    color: "#ffc107"
                  - value: 45
                    color: "#cddc39"
                  - value: 50
                    color: "#4caf50"
                  - value: 60
                    color: "#2196f3"
                  - value: 70
                    color: "#3f51b5"
                  - value: 80
                    color: "#5e35b1"
                  - value: 90
                    color: "#7b1fa2"
                  - value: 100
                    color: "#4a148c"
                card_mod:
                  style: |
                    ha-card {
                      background: #1e1e1e;
                      color: #ffffff;
                      border-radius: 12px;
                      box-shadow: none;
                    }
      label: Sous-sol
      entity_id: sensor.temp_hum_*_humidity
card:
  square: false
  type: grid
  columns: 2
show_empty: true
card_param: cards
sort:
  method: name
  numeric: false
  ignore_case: false

Tochy · Juillet 8, 2025, 7:47

Salut

MilesTEG1:

WarC0zes:
Pour avoir un background sur l’icône de entity-progress-card , il faut ajouter l’option :
force_circular_background: true
Je l’ai mise là où tu l’as mise , mais je n’ai pas les fonds ronds des boutons…

Recompares ton code et le sien et tu verras que tu ne l’a pas mis au même endroit, non.

MilesTEG1 · Juillet 8, 2025, 8:46

Certes mais il n’utilise pas auto-entities. J’ai mis là où je pensais que ça serait bon.
Du coup , où faut-il que je mette ça ?

Tochy · Juillet 8, 2025, 8:50

La propriété d’une carte se met dans la définition de la carte a laquelle elle appartient.

MilesTEG1 · Juillet 8, 2025, 8:56

Saut quand tu utilises autoentities car la carte que je veux voir reproduite n’est pas directement utilisée…

3
En tout cas le fond du bouton n’est pas présent dès lors que j’utilise browser-mod pour le icon_tap_action:
Si j’enlève le icon_tap_action: et donc le browser-mod, j’ai de nouveau les fonds des boutons.

Tochy · Juillet 8, 2025, 9:03

C’est bien dans ton code ça ?
Et c’est bien une propriété de cette carte que tu veux ajouter ?
Alors pourquoi tu va la coller derrière une carte mini graph qui est elle meme insérée dans un browser-mod ?