Carte thermomètre pour tableau de bord

Mars190 · Janvier 26, 2024, 1:14

Bonjour,

Je recherche une carte sympa et visuelle pour afficher une température.
Avez-vous vu ce type de représentation ou autres ?

Merci.

WarC0zes · Janvier 26, 2024, 2:47

Bonjour,
il y a c’est carte qui ressemble un peu GitHub - custom-cards/canvas-gauge-card: The card makes it possible to use gauges from https://canvas-gauges.com/

exemple:

type: custom:canvas-gauge-card
entity: sensor.temperature_humidity_sensor_sejour_temperature
card_height: 323
gauge:
  type: linear-gauge
  height: 300
  width: 100
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: -20
  maxValue: 50
  valueBox: true
  majorTicks:
    - '-20'
    - '-10'
    - '0'
    - '10'
    - '20'
    - '30'
    - '40'
    - '50'

Mars190 · Janvier 26, 2024, 4:43

Merci pour ton retour.
Sur le principe c’est ce je recherche, mais sur l’aspect (représentation) c’est un peu austère (pas fun).
Je vais voir si d’autres propositions vont se faire.

Bonne soirée.

WarC0zes · Janvier 26, 2024, 4:47

Tu peu customiser la carte.
https://rawgit.com/Mikhus/canvas-gauges/master/examples/linear-component.html

anon41081891 · Janvier 26, 2024, 4:49

Tu peux faire un truc ressemblant avec button-card

WarC0zes · Janvier 26, 2024, 4:50

Allez ! au boulot

anon41081891 · Janvier 26, 2024, 4:53

Lol, pas le temps, d’autant que pour que ça soit sympa, il faudrait faire 10 custom_fields par degré celcius… (et de -30° C à 50°C, ça fait juste 800 custom_fields à se taper )

En fait, un custom_field par 1/2 degré suffirait (16 donc pour coloriser les cases de température et 17 pour les graduations).

En revanche faut oublier l’ombrage en fonction de la température…

WarC0zes · Janvier 26, 2024, 4:57

ah beh oui, ta un sacré boulot avec tout ces custom_filed. ca prends pas 5min …

Mars190 · Janvier 26, 2024, 5:24

Merci pour vos réponses.

Je cherche pas une carte hyper sophistiquée.
Juste un thermomètre avec le mercure passant du bleu vers le rouge entre 0° (et négatif) et 30° (et plus).
Il y a pourtant des cartes disponibles pour les thermostats de chauffage et mesure de l’humidité, mais rien pour la température. Hormis le graphe basique par défaut.

WarC0zes · Janvier 26, 2024, 5:50

Ta mini-graph-card ou tu peu customiser les couleurs .

Mars190 · Janvier 26, 2024, 6:07

Je vais essayer avec ce modèle.

anon41081891 · Janvier 27, 2024, 12:22

Voilà ce que ça pourrait donner avec une button-card :

Le code est à retravailler pour le changement de couleur en cas de température inférieure à 10 °C :

type: custom:button-card
aspect_ratio: 1/2
custom_fields:
  reservoir:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "10")
                  return "rgba(1,144,223,1.0)";
              ]]]
          - border-radius: 50%
          - border: none
  valeur:
    card:
      type: custom:button-card
      entity: sensor.chambre_sous_sol_thermometre_temperature
      show_icon: false
      show_name: false
      show_state: true
      aspect_ratio: 1/1
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 50%
          - border: none
        state:
          - color: white
          - font-size: 1.4em
          - font-weight: bold
  depart_curseur:
    card:
      type: custom:button-card
      aspect_ratio: 1/1.2
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "10")
                  return "rgba(1,144,223,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_0:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "-30" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-25")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-30")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_1:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "-25" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-20")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-25")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_2:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "-20" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-15")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-20")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_3:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "-15" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-10")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-15")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_4:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "-10" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-5")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-10")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_5:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "-5" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "0")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "-5")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_6:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "0" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "5")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "0")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_7:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "5" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "10")
                  return "rgba(1,144,223,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "5")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_8:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "15")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "10")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_9:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "15" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "20")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "15")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_10:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "20" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "25")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "20")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_11:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "25" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "30")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "25")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_12:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "30" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "35")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "30")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_13:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "35" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "40")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "35")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_14:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "40" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "45")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "40")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  curseur_15:
    card:
      type: custom:button-card
      aspect_ratio: 2/1.1
      styles:
        card:
          - background-color: |
              [[[
                if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "45" && states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "50")
                  return "rgba(254,48,24,1.0)";
                else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "45")
                  return "rgba(254,204,197,1.0)";
              ]]]
          - border-radius: 0%
          - border: none
  fond:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
styles:
  card:
    - background-color: |
        [[[
          if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
            return "rgba(254,204,197,1.0)";
          else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "10")
            return "rgba(191,228,247,1.0)";
        ]]]
  custom_fields:
    fond:
      - background-image: |
          [[[
            if (states['sensor.chambre_sous_sol_thermometre_temperature'].state > "10")
              return "url(/local/images/temp_pos.png)";
            else if (states['sensor.chambre_sous_sol_thermometre_temperature'].state <= "10")
              return "url(/local/images/temp_neg.png)";
          ]]]
      - position: absolute
      - left: 0
      - top: 0
      - width: 100%
      - height: 100%
      - background-size: cover
      - background-position: center
      - opacity: 0.7
    reservoir:
      - position: absolute
      - left: 38.9%
      - top: 76.5%
      - width: 22.8%
    valeur:
      - position: absolute
      - left: 38.9%
      - top: 76.5%
      - width: 22.8%
    depart_curseur:
      - position: absolute
      - left: 44.2%
      - top: 72.1%
      - width: 12%
    curseur_0:
      - position: absolute
      - left: 44.2%
      - top: 68.2%
      - width: 12%
    curseur_1:
      - position: absolute
      - left: 44.2%
      - top: 65%
      - width: 12%
    curseur_2:
      - position: absolute
      - left: 44.2%
      - top: 61.1%
      - width: 12%
    curseur_3:
      - position: absolute
      - left: 44.2%
      - top: 58%
      - width: 12%
    curseur_4:
      - position: absolute
      - left: 44.2%
      - top: 54.1%
      - width: 12%
    curseur_5:
      - position: absolute
      - left: 44.2%
      - top: 51%
      - width: 12%
    curseur_6:
      - position: absolute
      - left: 44.2%
      - top: 47%
      - width: 12%
    curseur_7:
      - position: absolute
      - left: 44.2%
      - top: 43.8%
      - width: 12%
    curseur_8:
      - position: absolute
      - left: 44.2%
      - top: 40%
      - width: 12%
    curseur_9:
      - position: absolute
      - left: 44.2%
      - top: 36.7%
      - width: 12%
    curseur_10:
      - position: absolute
      - left: 44.2%
      - top: 32.9%
      - width: 12%
    curseur_11:
      - position: absolute
      - left: 44.2%
      - top: 29.7%
      - width: 12%
    curseur_12:
      - position: absolute
      - left: 44.2%
      - top: 25.8%
      - width: 12%
    curseur_13:
      - position: absolute
      - left: 44.2%
      - top: 22.5%
      - width: 12%
    curseur_14:
      - position: absolute
      - left: 44.2%
      - top: 18.6%
      - width: 12%
    curseur_15:
      - position: absolute
      - left: 44.2%
      - top: 15.5%
      - width: 12%

Les deux images de fond :

Mars190 · Janvier 27, 2024, 8:14

Ah oui effectivement c’est un gros boulot de codage !
Merci @anon41081891

anon41081891 · Janvier 29, 2024, 12:40

Une nouvelle version avec du code beaucoup plus compact :

Le code :

type: custom:button-card
aspect_ratio: 1/1
custom_fields:
  fond:
    card:
      type: custom:button-card
      aspect_ratio: 1/2
      styles:
        card:
          - background-color: |
              [[[
                if (states['input_number.temperature'].state > "0")
                  return "rgba(255,151,138,1.0)";
                else if (states['input_number.temperature'].state <= "0")
                  return "rgba(127,199,239,1.0)";
              ]]]
          - background-image: |
              [[[
                if (states['input_number.temperature'].state > "0")
                  return "url(/local/images/temp_pos.png)";
                else if (states['input_number.temperature'].state <= "0")
                  return "url(/local/images/temp_neg.png)";
              ]]]
          - background-size: cover
          - background-position: center
          - border-radius: 0%
          - border: none
  value_bar:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: |
              [[[
                if (states['input_number.temperature'].state > "0")
                  return "rgba(254,204,197,1.0)";
                else if (states['input_number.temperature'].state <= "0")
                  return "rgba(191,228,247,1.0)";
              ]]]
          - width: 40px
          - height: |
              [[[
                if (states['input_number.temperature'].state > "0") 
                  return Math.round(193 - states['input_number.temperature'].state * 3.45) + "px";
                else if (states['input_number.temperature'].state <= "0")
                  return Math.round(193 + Math.abs(states['input_number.temperature'].state) * 3.45) + "px";
              ]]]
          - border-radius: 0%
          - border: none
  value_text:
    card:
      type: custom:button-card
      entity: input_number.temperature
      show_name: false
      show_icon: false
      show_state: false
      show_label: true
      label: |
        [[[ return states['input_number.temperature'].state + "°" ]]]
      styles:
        card:
          - background-color: transparent
          - border-radius: 0%
          - border: none
        label:
          - font-size: 1.8em
          - font-weight: bold
          - color: white
  thermometre:
    card:
      type: custom:button-card
      aspect_ratio: 1/2
      styles:
        card:
          - background-color: transparent
          - background-image: url(/local/images/thermometer.png)
          - background-size: cover
          - background-position: center
          - border-radius: 0%
          - border: none
styles:
  card: null
  custom_fields:
    fond:
      - position: absolute
      - left: 5%
      - top: 5%
      - width: 45%
      - opacity: 1
    value_bar:
      - position: absolute
      - left: 76px
      - top: 48px
      - opacity: 1
    value_text:
      - position: absolute
      - left: 9.4%
      - top: 76%
      - width: 100px
      - height: 100px
      - opacity: 1
    thermometre:
      - position: absolute
      - left: 5%
      - top: 5%
      - width: 45%
      - opacity: 1

Image du thermomètre :

Températures négatives :

Températures positives :