[Floor Map] dashboard et carte de température - edit: et couleur d'ampoule

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
, , ,
1

Hello,
c’est complètement inutile mais bien amusant à faire… qui d’autre l’a déjà tenté?
En tout cas voici un tableau de bord dont les couleurs des pièces s’adaptent aux température avec un dégradé du bleu/violet (à 14°C) au rouge vif (à 24°C) qui se superpose entre chaque pièce dans le style heatmap (je me suis directement inspiré d’ici https://www.reddit.com/r/homeassistant/comments/lqhwvo/anyway_to_produce_a_temperature_heat_map/ mais je demande qui a eut l’idée originale) → EDIT 5 février: je propose une solution beaucoup plus simple ici.

image
image627×566 48.1 KB

et sans le fond image
image
image560×529 68.9 KB

prérequis

environ 30min (c’est un peu répétitif avec les différentes pièces)

C’est beaucoup moins compliqué que ça en a l’air :wink:

    1. il faut bien sûr une carte picture elements avec en image de fond le plan
    1. faire les png rouges vif (ici j’en ai 6 pour 6 températures, une par pièce), C’est un rectangle qui déborde de la pièce avec un dégradé rouge vif centré sur le capteur de température (facile avec inkscape pour faire la découpe automatique des murs, mais paint ou sekevouvoulez ça marche aussi) - voici un exemple pour le couloir :
      HMcouloir
      HMcouloir1875×1680 76.6 KB

      → copier/coller le png dans le dossier home assistant www/community/nom_de_votre_theme/, par ex ici mon couloir c’est www/community/rock-theme/HMcouloir.png (pour copier facilement le fichier dans votre HA c’est utile d’avoir installé le module SAMBA).
    1. mettre le code correspondant dans picture elements pour chaque pièce (en remplaçant le nom du sensor température et du png - les if c’est pour mon échelle de température du froid bleu ou violet très froid, au jaune confort - en évitant le vert, jusqu’au rouge bien chaud):
  - type: image
    image: /local/community/rock-theme/HMcouloir.png
    style:
      left: 50%
      top: 50%
      width: 100%
      opacity: 0.5
    card_mod:
      style: |
        :host {
          {% set temp = states['sensor.couloir_temperature'].state | float %}
          {% if temp <= 14 %}
            {% set hue = 300 %}
          {% elif temp <= 17 %}
            {% set hue = 300 - ((temp - 14) * (300 - 180) / (17 - 14)) %}
          {% elif temp <= 17.5 %}
            {% set hue = 180 - ((temp - 17) * (180 - 65) / (17.5 - 17)) %}
          {% elif temp <= 21 %}
            {% set hue = 65 - ((temp - 17.5) * (65 - 45) / (21 - 17.5)) %}
          {% elif temp <= 24 %}
            {% set hue = 45 - ((temp - 21) * (45 - 0) / (24 - 21)) %}
          {% else %}
            {% set hue = 0 %}
          {% endif %}
          filter: hue-rotate({{ hue }}deg);
        }
    tap_action:
      action: none
    hold_action:
      action: none
  • Et c’est tout :slight_smile:

EDIT: en image de jour on voit mieux les nuances de couleurs
EDIT 5février: complètement inutile de faire des sensors en plus quand on utilise card_mod, beaucoup plus direct!

3 « J'aime »
2

Dans le même esprit, il me semble que certains représentent la couleur de leurs ampoules connectées(avec une approche du coup différente de inkscape)

3

oui, pour la couleur de l’ampoule on peut faire exactement la même chose (et la même technique avec un png, c’est indépendant de inkscape, inkscape c’est juste que c’est plus pratique pour produire les png sur mesure), mais pour la température j’y trouve à la fois un intérêt pratique et esthétique
c’est tellement intuitif de juste regarder la couleur sans quasi regarder la valeur de température…

et pour les ampoules et radiateurs allumés j’ai essayé d’améliorer mes icones avec une lueur animée en svg (ce qu’on ne voit pas sur la capture d’écran) sans dénaturer la couleur de température.

image
image761×670 60.6 KB

voici les svg animées (sans copyright, c’est production perso :wink: ) pour ceux qui seraient intéressés (animation à voir dans son picture elements)

light4ON radiateur4ON fan2ON

et en off
light4OFF fanOFF radiateur5OFF

EDIT: on pourrait pousser le « bouchon » en allant jusqu’à colorer la lueur de l’ampoule en fonction de la couleur de la lumière, mais ça ferait vraiment trop de couleurs à mon goût.

2 « J'aime »
4

Bonjour et bravo pour le boulot !

Question bête : tu fais comment pour afficher la map et le « statut » de tes ampoules ?

Tu utilises la card ?

image
image288×365 18.6 KB

par dessus tu rajoutes les entities ?

Merci pour ton aide.

Belle journée.

1 « J'aime »
5

Hello,

Je me permet de répondre, il faut voir picture element comme un mille feuille,mettre l’image de fond tout en haut du code de la picture element et mettre ce qu’on veut voir par dessus dans l’ordre inverse jusqu’en pas
image de fond
image d’éclairage
…
state badge de température tout en bas ( c’est ce qui sera au dessus du reste )

il suffit d’avoir le bon ordre

ex:

image
image402×293 2.8 KB

cdt

2 « J'aime »
6

exactement ça, un millefeuille d’images en réfléchissant bien à l’ordre des « feuilles »

et pour préciser par rapport à la question sur les entités utilisées,
j’utilise principalement des entités images ou icon, par exemple pour mon ventilateur je sais directement son statut par l’image qu’il m’affiche (pas besoin d’écrire ON quand on le voit tourner, non ?) :

type: image
style:
  left: 85%
  top: 29%
  width: 8%
entity: fan.ceiling_fan
state_image:
  "on": /local/community/rock-theme/fan2ON.svg
  "off": /local/community/rock-theme/fanOFF.svg
tap_action:
  action: toggle

Et pour afficher la température ou un autre statut je reste minimaliste sans rajouter les gros boutons « badges » proposés par défaut comme sur l’image (mais je n’utilisais que ça au début), avec juste le texte que je veux, par ex:

type: state-label
entity: sensor.salon2_temperature
style:
  left: 58%
  top: 53%
  color: "#FFFFFF60"
  background-color: "#FFFFFF00"
  line-height: 0px
  font-size: 12px

et pour les entités uniquement visuelles comme la couleur de température il faut bien penser à désactiver l’interaction ce que j’ai spécifié en ajoutant dans mon exemple ci-dessus le code

    tap_action:
      action: none
    hold_action:
      action: none

dans mon cas j’ai un mille feuilles à 6 « calques » superposés pour une pièce:

  • le plan général (ça c’est une seule image pour toutes les pièces en bonne résolution)
  • le calque bleu/gris transparent pour la nuit lui aussi général à toutes mes pièces (en basse résolution, il ne s’affiche que s’il fait nuit) > (sinon le jour image vide transparente)
  • un calque noir transparent pour chaque pièce équipée de volets roulants pour quand je ferme les volets roulants qui assombri la pièce (sinon image vide transparente)
  • le calque de la pièce éclairée qui s’affiche si la lumière est allumée (et cache donc la nuit ou le calque volets roulants)
  • le calque de température transparente pour la pièce
  • et pour terminer l’ampoule ou un autre appareil par dessus qui lui aura bien sûr sa propre tap_action pour allumer ou éteindre par ex
7

Mise à jour beaucoup beaucoup plus efficace!

BONUS : les couleurs des lampes

Avec mon icône ampoule en SVG blanche voici le code pour qu’elle s’affiche de la couleur RGB de la lampe (à peu près, ce n’est pas parfait mais c’est beau :slight_smile: ) et ça tient en une ligne ! (2 min à copier/coller le code)

  - type: image
    style:
      left: 85%
      top: 63%
      width: 7%
    entity: light.bureau
    state_image:
      "on": /local/community/rock-theme/light4ON.svg
      "off": /local/community/rock-theme/light7OFF.svg
    card_mod:
      style: |
        :host {
          {% if is_state('light.bureau', 'on') %}
            {% set rgb = state_attr('light.bureau', 'rgb_color') %}
            {% if rgb %}
              {% set r, g, b = rgb %}
              filter: sepia(1) saturate(10) hue-rotate({{ (r * 0.299 + g * 0.587 + b * 0.114) - 180 }}deg) brightness(1.5);
            {% endif %}
          {% endif %}
        }
    tap_action:
      action: toggle
3 « J'aime »