Ouvrir un thermostat en cliquant sur une carte de température

[Othar]

Bonjour à tous.

J’ai suivi ce sujet pour refaire mes cartes de suivi des températures et humidité. Quel type de carte pour capteur température + humidité?

Je suis arrivé à ce résultat qui est très bien. Hors mis un affichage de la dernière mise à jour qui ne fonctionne pas mais ce n’est pas le sujet.

Je souhaiterai ajouter l’ouverture de la gestion de ma tête thermostatique en cliquant sur la pièce correspondante. J’ai essayé plusieurs pistes, notamment avec chatGPT mais rien ne fonctionne. Je sais qu’avec HA tout est possible, quelqu’un a t’il une idée? La carte étant uniquement en YAML, je n’ai pas accès à l’interphase visuel de HA.

Voici le code de la carte:type:

* type: custom:button-card
  entity: sensor.thermometre_chambre_parentale_temperature
  size: 10%
  icon: mdi:bed-double
  show_state: false
  show_name: false
  label: Parents
  show_label: true
  styles:
  card:
  - position: relative
  grid:
  - grid-template-areas: >-
  « battery . » « i i » « l l » « temp temp » « hum hum » « update heure » « apex
  apex » « graph graph »
  - grid-template-columns: 50% 50%
  - margin-top: 3%
  - padding-bottom: 0%
  label:
  - font-size: 11px
  - font-style: italic
  - opacity: 75%
  icon:
  - opacity: 75%
  custom_fields:
  temp:
  - font-size: 20px
  hum:
  - font-size: 13px
  - font-style: italic
  battery:
  - position: absolute
  - left: 80%
  - top: 5%
  update:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  heure:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  apex:
  - position: absolute
  - top: « -5% »
  - left: « -16% »
  - width: 100%
  - height: 100%
  graph:
  - margin-top: 0%
  custom_fields:
  temp: >
  \[\[\[ var temp =
  states\[‹ sensor.thermometre_chambre_parentale_temperature ›\].state; return
  `<ha-icon       icon="mdi:thermometer"       style="width: 18px; height: 18px; color: #7dc8ff "></ha-icon>` + temp + ‹ ° ›; \]\]\]
  hum: >
  \[\[\[ var hum =
  states\[‹ sensor.thermometre_chambre_parentale_humidity ›\].state; return
  `<ha-icon       icon="mdi:water"       style="width: 15px; height: 15px; color: #7dc8ff "></ha-icon>` + hum + ‹ % ›; \]\]\]
  battery: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_chambre_parentale_battery ›\];
  if (!entity) return ‹ N/A ›;
  var battery = parseInt(entity.state);
  if (battery >= 70)
  return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>`;
  else if (battery >= 20)
  return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>`;
  else if (battery >= 1)
  return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>`;
  else
  return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>`;
  \]\]\]
  update: |
  \[\[\[
  return `<ha-icon icon="mdi:progress-clock" style="width: 20px; height: 20px;"></ha-icon>` + ’ Dernière M.A.J.';
  \]\]\]
  heure: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_chambre_parentale_last_seen ›\];
  if (!entity) return ‹ N/A ›;
  var lastSeen = entity.state;
  if (lastSeen === ‹ unknown › || lastSeen === ‹ unavailable ›) return ‹ N/A ›;
  return helpers.relativeTime(lastSeen);
  \]\]\]
  apex:
  card:
  type: custom:apexcharts-card
  chart_type: radialBar
  series:
  - entity: sensor.thermometre_chambre_parentale_temperature
  max: 40
  color: « #00FF00 »
  show:
  legend_value: false
  - entity: sensor.thermometre_chambre_parentale_humidity
  max: 100
  color: « #FEFEFE »
  show:
  legend_value: false
  apex_config:
  plotOptions:
  radialBar:
  offsetY: 0
  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: 100%
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
  graph:
  card:
  type: custom:mini-graph-card
  name: Parents
  hours_to_show: 24
  points_per_hour: 1
  hour24: true
  line_width: 2
  decimals: 1
  entities:
  - entity: sensor.thermometre_chambre_parentale_temperature
  name: Temp.
  color: « #2a75cf »
  - entity: sensor.thermometre_chambre_parentale_humidity
  color: « #ffc04c »
  name: Humidité
  show_line: true
  show_points: true
  show_legend: true
  y_axis: secondary
  show:
  fill: true
  graph: line
  icon: false
  name: false
  state: false
  labels: false
  extrema: true
  average: true
  icon_adaptive_color: false
  labels_secondary: false
  align_icon: right
  align_state: left
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
* type: custom:button-card
  entity: sensor.thermometre_salle_de_douche_temperature
  size: 10%
  icon: mdi:shower-head
  show_state: false
  show_name: false
  label: Douche
  show_label: true
  styles:
  card:
  - position: relative
  grid:
  - grid-template-areas: >-
  « battery . » « i i » « l l » « temp temp » « hum hum » « update heure » « apex
  apex » « graph graph »
  - grid-template-columns: 50% 50%
  - margin-top: 3%
  - padding-bottom: 0%
  label:
  - font-size: 11px
  - font-style: italic
  - opacity: 75%
  icon:
  - opacity: 75%
  custom_fields:
  temp:
  - font-size: 20px
  hum:
  - font-size: 13px
  - font-style: italic
  battery:
  - position: absolute
  - left: 80%
  - top: 5%
  update:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  heure:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  apex:
  - position: absolute
  - top: « -5% »
  - left: « -20% »
  - width: 100%
  - height: 100%
  graph:
  - margin-top: 0%
  custom_fields:
  temp: >
  \[\[\[ var temp =
  states\[‹ sensor.thermometre_salle_de_douche_temperature ›\].state; return
  `<ha-icon       icon="mdi:thermometer"       style="width: 18px; height: 18px; color: #7dc8ff "></ha-icon>` + temp + ‹ ° ›; \]\]\]
  hum: >
  \[\[\[ var hum =
  states\[‹ sensor.thermometre_salle_de_douche_humidity ›\].state; return
  `<ha-icon       icon="mdi:water"       style="width: 15px; height: 15px; color: #7dc8ff "></ha-icon>` + hum + ‹ % ›; \]\]\]
  battery: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_salle_de_douche_battery ›\];
  if (!entity) return ‹ N/A ›;
  var battery = parseInt(entity.state);
  if (battery >= 70)
  return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>`;
  else if (battery >= 20)
  return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>`;
  else if (battery >= 1)
  return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>`;
  else
  return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>`;
  \]\]\]
  update: |
  \[\[\[
  return `<ha-icon icon="mdi:progress-clock" style="width: 20px; height: 20px;"></ha-icon>` + ’ Dernière M.A.J.';
  \]\]\]
  heure: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_salle_de_douche_last_seen ›\];
  if (!entity) return ‹ N/A ›;
  var lastSeen = entity.state;
  if (lastSeen === ‹ unknown › || lastSeen === ‹ unavailable ›) return ‹ N/A ›;
  return helpers.relativeTime(lastSeen);
  \]\]\]
  apex:
  card:
  type: custom:apexcharts-card
  chart_type: radialBar
  series:
  - entity: sensor.thermometre_salle_de_douche_temperature
  max: 40
  color: « #00FF00 »
  show:
  legend_value: false
  - entity: sensor.thermometre_salle_de_douche_humidity
  max: 100
  color: « #FEFEFE »
  show:
  legend_value: false
  apex_config:
  plotOptions:
  radialBar:
  offsetY: 0
  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: 100%
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
  graph:
  card:
  type: custom:mini-graph-card
  name: Douche
  hours_to_show: 24
  points_per_hour: 1
  hour24: true
  line_width: 2
  decimals: 1
  entities:
  - entity: sensor.thermometre_salle_de_douche_temperature
  name: Temp.
  color: « #2a75cf »
  - entity: sensor.thermometre_salle_de_douche_humidity
  color: « #ffc04c »
  name: Humidité
  show_line: true
  show_points: true
  show_legend: true
  y_axis: secondary
  show:
  fill: true
  graph: line
  icon: false
  name: false
  state: false
  labels: false
  extrema: true
  average: true
  icon_adaptive_color: false
  labels_secondary: false
  align_icon: right
  align_state: left
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
* type: custom:button-card
  entity: sensor.thermometre_chambre_lonny_temperature
  size: 10%
  icon: mdi:human-baby-changing-table
  show_state: false
  show_name: false
  label: Lonny
  show_label: true
  styles:
  card:
  - position: relative
  grid:
  - grid-template-areas: >-
  « battery . » « i i » « l l » « temp temp » « hum hum » « update heure » « apex
  apex » « graph graph »
  - grid-template-columns: 50% 50%
  - margin-top: 3%
  - padding-bottom: 0%
  label:
  - font-size: 11px
  - font-style: italic
  - opacity: 75%
  icon:
  - opacity: 75%
  custom_fields:
  temp:
  - font-size: 20px
  hum:
  - font-size: 13px
  - font-style: italic
  battery:
  - position: absolute
  - left: 80%
  - top: 5%
  update:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  heure:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  apex:
  - position: absolute
  - top: « -5% »
  - left: « -20% »
  - width: 100%
  - height: 100%
  graph:
  - margin-top: 0%
  custom_fields:
  temp: >
  \[\[\[ var temp =
  states\[‹ sensor.thermometre_chambre_lonny_temperature ›\].state; return
  `<ha-icon icon="mdi:thermometer"       style="width: 18px; height: 18px; color: #7dc8ff;"></ha-icon>` + temp + ‹ ° ›; \]\]\]
  hum: >
  \[\[\[ var hum = states\[‹ sensor.thermometre_chambre_lonny_humidity ›\].state;
  return `<ha-icon icon="mdi:water"       style="width: 15px; height: 15px; color: #7dc8ff;"></ha-icon>` + hum + ‹ % ›; \]\]\]
  battery: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_chambre_lonny_battery ›\];
  if (!entity) return ‹ N/A ›;
  var battery = parseInt(entity.state);
  if (battery >= 70)
  return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>`;
  else if (battery >= 20)
  return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>`;
  else if (battery >= 1)
  return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>`;
  else
  return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>`;
  \]\]\]
  update: |
  \[\[\[
  return `<ha-icon icon="mdi:progress-clock" style="width: 20px; height: 20px;"></ha-icon>` + ’ Dernière M.A.J.';
  \]\]\]
  heure: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_chambre_lonny_last_seen ›\];
  if (!entity) return ‹ N/A ›;
  var lastSeen = entity.state;
  if (lastSeen === ‹ unknown › || lastSeen === ‹ unavailable ›) return ‹ N/A ›;
  return helpers.relativeTime(lastSeen);
  \]\]\]
  apex:
  card:
  type: custom:apexcharts-card
  chart_type: radialBar
  series:
  - entity: sensor.thermometre_chambre_lonny_temperature
  max: 40
  color: « #00FF00 »
  show:
  legend_value: false
  - entity: sensor.thermometre_chambre_lonny_humidity
  max: 100
  color: « #FEFEFE »
  show:
  legend_value: false
  apex_config:
  plotOptions:
  radialBar:
  offsetY: 0
  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: 100%
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
  graph:
  card:
  type: custom:mini-graph-card
  name: Lonny
  hours_to_show: 24
  points_per_hour: 1
  hour24: true
  line_width: 2
  decimals: 1
  entities:
  - entity: sensor.thermometre_chambre_lonny_temperature
  name: Temp.
  color: « #2a75cf »
  - entity: sensor.thermometre_chambre_lonny_humidity
  color: « #ffc04c »
  name: Humidité
  show_line: true
  show_points: true
  show_legend: true
  y_axis: secondary
  show:
  fill: true
  graph: line
  icon: false
  name: false
  state: false
  labels: false
  extrema: true
  average: true
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
* type: custom:button-card
  entity: sensor.thermometre_bureau_temperature
  size: 10%
  icon: mdi:printer
  show_state: false
  show_name: false
  label: Bureau
  show_label: true
  styles:
  card:
  - position: relative
  grid:
  - grid-template-areas: >-
  « battery . » « i i » « l l » « temp temp » « hum hum » « update heure » « apex
  apex » « graph graph »
  - grid-template-columns: 50% 50%
  - margin-top: 3%
  - padding-bottom: 0%
  label:
  - font-size: 11px
  - font-style: italic
  - opacity: 75%
  icon:
  - opacity: 75%
  custom_fields:
  temp:
  - font-size: 20px
  hum:
  - font-size: 13px
  - font-style: italic
  battery:
  - position: absolute
  - left: 80%
  - top: 5%
  update:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  heure:
  - justify-self: middle
  - align-self: middle
  - font-style: italic
  - font-size: 12px
  - opacity: 60%
  - margin-top: 30%
  apex:
  - position: absolute
  - top: « -5% »
  - left: « -20% »
  - width: 100%
  - height: 100%
  graph:
  - margin-top: 0%
  custom_fields:
  temp: >
  \[\[\[ var temp = states\[‹ sensor.thermometre_bureau_temperature ›\].state;
  return `<ha-icon icon="mdi:thermometer"       style="width: 18px; height: 18px; color: #7dc8ff;"></ha-icon>` + temp + ‹ ° ›; \]\]\]
  hum: >
  \[\[\[ var hum = states\[‹ sensor.thermometre_bureau_humidity ›\].state; return
  `<ha-icon icon="mdi:water"       style="width: 15px; height: 15px; color: #7dc8ff;"></ha-icon>` + hum + ‹ % ›; \]\]\]
  battery: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_bureau_battery ›\];
  if (!entity) return ‹ N/A ›;
  var battery = parseInt(entity.state);
  if (battery >= 70)
  return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>`;
  else if (battery >= 20)
  return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>`;
  else if (battery >= 1)
  return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>`;
  else
  return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>`;
  \]\]\]
  update: |
  \[\[\[
  return `<ha-icon icon="mdi:progress-clock" style="width: 20px; height: 20px;"></ha-icon>` + ’ Dernière M.A.J.';
  \]\]\]
  heure: |
  \[\[\[
  var entity = states\[‹ sensor.thermometre_bureau_last_seen ›\];
  if (!entity) return ‹ N/A ›;
  var lastSeen = entity.state;
  if (lastSeen === ‹ unknown › || lastSeen === ‹ unavailable ›) return ‹ N/A ›;
  return helpers.relativeTime(lastSeen);
  \]\]\]
  apex:
  card:
  type: custom:apexcharts-card
  chart_type: radialBar
  series:
  - entity: sensor.thermometre_bureau_temperature
  max: 40
  color: « #00FF00 »
  show:
  legend_value: false
  - entity: sensor.thermometre_bureau_humidity
  max: 100
  color: « #FEFEFE »
  show:
  legend_value: false
  apex_config:
  plotOptions:
  radialBar:
  offsetY: 0
  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: 100%
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
  graph:
  card:
  type: custom:mini-graph-card
  name: Bureau
  hours_to_show: 24
  points_per_hour: 1
  hour24: true
  line_width: 2
  decimals: 1
  entities:
  - entity: sensor.thermometre_bureau_temperature
  name: Temp.
  color: « #2a75cf »
  - entity: sensor.thermometre_bureau_humidity
  color: « #ffc04c »
  name: Humidité
  show_line: true
  show_points: true
  show_legend: true
  y_axis: secondary
  show:
  fill: true
  graph: line
  icon: false
  name: false
  state: false
  labels: false
  extrema: true
  average: true
  card_mod:
  style: |
  ha-card {
  background: none;
  box-shadow: none;
  border: none;
  }
  title: Suite parentale
  grid_options:
  columns: 48
  rows: auto

![](http://)

![](http://)

![](http://)

Voici la carte de la tête thermostatique

type: custom:versatile-thermostat-ui-card
entity: climate.chauffage_parents
name: Parents
disable_circle: true
disable_auto: true
set_current_as_main: true
disable_power_infos: true
disable_auto_fan_infos: true

Merci d’avance pour le temps accordé.

[Gilles2]

Bonjour,

En utilisant custom popup-card (inclue dans browser_mod), tu peux créer un pop-up lorsque tu clicques sur une entité par exemple.

Utilisation de Browser_mod - Entraide Home Assistant - Home Assistant Communauté Francophone

[BBE]

Ca c’est ce qui arrive quand on veut aller vite sans partir de la base: par exemple là: Un beau dashboard, tout simplement...

Blague à part, sans interface graphique (puisque tu utilises une button card), il faut trouver comment gérer les actions liées au clic.
Par exemple dans la doc: Actions object - custom:button-card documentation

On voit dans cette doc que tu peux appeler le more info d’une entité au clic, et ainsi, avec l’astuce donnée par @Gilles2 au dessus, utiliser une pop-up card…

La pop-up card, placée dans une view, va remplacer pour l’entité selectionnée la carte « more-info » de celle ci par la carte que tu auras défini, en l’occurence celle que tu donnes dans ton post.

Pour l’appeler il te suffit de savoir appeller le « more info » d’une entité bien choisie dans ta button card.

[btncrd]

Bonsoir,

Je ne vois pas trop où se situe ton problème. Il suffit de gérer le tap_action de tes cartes de pièce et d’afficher la carte de ta tête thermostatique en t’aidant d’un input_boolean et éventuellement d’un input_number ou un input_text pour définir quelle carte de tête thermostatique afficher (variable).

Pour afficher ou masquer la carte custom:versatile-thermostat-ui-card, il suffit de la mettre en custom_fields d’une cutom:button-card et de jouer avec la propriété “hidden” de celle-ci.

Par ailleurs, tu dois pouvoir virer les card_mod que tu utilises dans tes cartes de pièces pour supprimer le background, la bordure et le box-shadow de tes custom_fields.

Peux tu poster une capture d’écran de ta carte custom:versatile-thermostat-ui-card ?

Si j’ai un peu de temps, je te ferai un exemple ce WE qui sera plus parlant que des explications écrites.

[Othar]

@Gilles2 , je suis allé voir, je cherche encore comment l’adapter à mon usage, je vais chercher aujourd’hui.

@BBE , J’ai y passé plusieurs hier, je vais, je pense, y passer une bonne partie de la journée pour réussir à faire quelque chose. C’est assez vague pour le moment, comme souvent lorsque j’entame quelque chose sur HA. A force de plancher dessus, je vais finir par y arriver.

@btncrd , oulà! je vois ce dont tu parles (input_boolean, input_number, etc…) après pour la mettre en oeuvre, comme dit plus haut, il va falloir que je passe du temps pour assimiler tout ça. Et supprimer le background, box shadow, custom fields qu’est qu’il dit? J’ai encore pas mal de chose à étudier sur le YAML!

Voici ma carte thermostat.

[btncrd]

Je suis dessus… Tu utilises ce tableau de bord sur PC ou tablette (mode paysage) ou est-ce que tu l’utilises aussi sur téléphone (mode portrait) ?

[Othar]

Il sera utilisé sur une tablette murale en paysage et sur ordinateur. Je construis actuellement une version plus simple pour téléphone.

[btncrd]

La résolution d’écran de ta tablette est de combien ? Et ton ordinateur ? Je vais te faire un exemple en mode panel mais qui sera adaptable, si tu préfères, en mode section.

[Othar]

La tablette c’est une résolution de 1920 x 1200 pixels. Mon ordinateur c’est un 34 pouces 3440 x 1440 pixels

[WarC0zes]

Bonjour,
avec browser-mod, voici un exemple pour afficher une carte dans un popup-up.

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
      initial_style: normal
      title: Thermostat
      icon: mdi:thermostat
      content:
        type: custom:simple-thermostat
        entity: climate.versatile_thermostat_salon
        step_size: "0.1"
        sensors:
          - entity: sensor.0x54ef44100050f9c3_linkquality
            name: Qualité du lien
          - entity: sensor.0x54ef44100050f9c3_energy
            name: Total Conso
          - entity: sensor.versatile_thermostat_salon_power_percent
            name: Allumé Pourcent
          - entity: >-
              sensor.versatile_thermostat_salon_mean_power_cycle
            name: Power Allumé
          - entity: sensor.0x54ef44100050f9c3_power
            name: Puissance
        layout:
          step: row
          mode:
            headings: true
            icons: true
            names: true
        header: {}
        control:
          hvac:
            _name: Mode
            "off":
              name: Éteint
            heat:
              name: Chauffe
          preset:
            _name: prédéfini
            none:
              name: Manuel
              icon: mdi:thermometer-lines
            comfort:
              name: Jour
              icon: mdi:weather-sunny
            eco:
              name: Nuit
              icon: mdi:weather-night
            boost:
              name: Boost
              icon: mdi:arrow-top-right-thick
        hide:
          temperature: false
          state: 0

[BBE]

@Othar

@BBE , J’ai y passé plusieurs hier, je vais, je pense, y passer une bonne partie de la journée pour réussir à faire quelque chose. C’est assez vague pour le moment, comme souvent lorsque j’entame quelque chose sur HA. A force de plancher dessus, je vais finir par y arriver.

En même temps, c’est le prix de vouloir passer par des cartes customs extrêmement personnalisables.

Il est tellement plus simple quand on débute de rester sur des cartes avec interface graphiques comme montré dans l’article sur le dashboard…

Alors oui c’est moins beau (quoi que, les gouts et les couleurs…) mais le temps passé (perdu?) dessus, c’est du temps que l’on ne passe pas ailleurs…

Enfin ce n’est que mon avis… J’espère que tu vas finir par y arriver, c’est pas compliqué à faire, et il y a plusieurs façon de faire.
Avec @Gilles2 on t’a indiqué ce qui nous semble être le plus simple…
On peut faire mieux en YAML avec des fire-dom-event comme indiqué dans la doc de browser mod [edit] et comme montré par @WarC0zes au dessus.

Je ne sais pas ou @btncrd t’emmène, mais c’est le pro de la button-card…

[edit] a priori si tu as browser mod, tu copies colle le code de @WarC0zes dans ta button card et ça marche direct…

[WarC0zes]

@BBE

Je ne sais pas ou @btncrd t’emmène, mais c’est le pro de la button-card…

Oui et des codes a rallonge de 10000 lignes

[WarC0zes]

Voici un popup-up avec ta carte thermostat @Othar. Tu as juste à ajouter le code a ta carte button-card ou autre. Bien sûr, d’avoir installé browser-mod dans HACS et de l’avoir configuré (engristrer ta tablette dans le menu de gauche dans la barre latérale).

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
      initial_style: normal
      title: Thermostat
      icon: mdi:thermostat
      content:
        type: custom:versatile-thermostat-ui-card
        entity: climate.chauffage_parents
        name: Parents
        disable_circle: true
        disable_auto: true
        set_current_as_main: true
        disable_power_infos: true
        disable_auto_fan_infos: true

[Othar]

@WarC0zes Je vais tester cela, oui browser mod est bien installé.

@BBE , J’ai déjà des cartes faites avec l’interface graphique de HA et d’autre en YAML plus simple, je voulais avoir quelque chose de plus « jolie ». Je suis bloqué, je passe ce temps « perdu » a tenter de nouvelles choses sur HA.

[WarC0zes]

@Othar

@WarC0zes Je viens de regarder ta carte. Je dois l’ajouter à ma carte et l’adapter à mes entités?

tu as juste à ajouter ce code, sur n’importe quelle carte qui supporte le tap_action. Après change l’entité de la carte versatile-thermostat-ui-card qui est dans le popup.

@WarC0zes

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
      initial_style: normal
      title: Thermostat
      icon: mdi:thermostat
      content:
        type: custom:versatile-thermostat-ui-card
        entity: climate.chauffage_parents
        name: Parents
        disable_circle: true
        disable_auto: true
        set_current_as_main: true
        disable_power_infos: true
        disable_auto_fan_infos: true

[BBE]

tap action c’est le code yaml pour définir ce qu’il se passe lorsqu’on fait un simple clic.

Le code proposé par @WarC0zes définit que pour un simple clic tu ouvres un pop up browser mod.

Si tu regardes bien tu retrouves dedans le code de la carte que tu as fourni au premier message.

tout le code envoyé sert donc juste à dire: en cas de simple clic, affiche un pop up browser mod qui contient la carte que tu as défini.

Normalement si tu ajoutes tout ce code à ta carte initiale (une button card) lors d’un simple clic sur ta carte, tu auras le pop up que tu voulais…

[BBE]

Si tu partages proprement le code de ta carte button-card (celle sur laquelle tu veux cliquer) @WarC0zes te colleras directement le tap-action au bon endroit et avec la bonne indentation…

mais le code que tu as partagé dans ton premier message est mal formaté…

[btncrd]

@WarC0zes

Oui et des codes a rallonge de 10000 lignes

Non, là je vais faire bien plus court avec utilisation de template pour ses cartes de pièce. J’ai considéré qu’il n’était plus un débutant vu le code posté. Je vais simplement simplifier son code et ajouter un custom_fields pour afficher/masquer sa carte de thermostat (avec “hidden” )

[WarC0zes]

@btncrd

(avec “hidden” )

On se met à jour
Champagne

[WarC0zes]

@Othar , utilise la balise texte préformaté (icône ) pour mettre du code. Édite ton sujet et met à jour ton code.