Card température/humidité

Entraide Home Assistant
,
1

Bonjour,

Mon problème

Bonjour à tous,

J’ai pu trouvé un jolie bouton qui indique la température et l’humidité d’une pièce ainsi que les graphiques associé.

card temp_hum
card temp_hum458×251 57.3 KB

je suis partie d’un model d’un personne qui a super bien bosser ( que je remercie au passage )HomeAssistant/Dashboard_oct_2024 at main · Axelle78/HomeAssistant · GitHub

A partir de la ligne 2577 le code de la carte commence.
J’ai voulu déjà copier bêtement et voici le résultat:

card temp_hum 2
card temp_hum 2521×731 25.8 KB

J’ai la fusion des cards qui ne se superposent pas. J’ai une impression que j’ai pas la vue type:horizontal-stack
Avez vous une idée de comment rentré le code ?
Voici mon code que j’ai entré:

type: sections
max_columns: 4
title: test
path: test
sections:
  - type: grid
    cards:
      - type: custom:stack-in-card
        cards:
          - type: markdown
            content: <center>Salon</center>
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.temperature_salon_temperature
                color: green
                max: 50
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -90
                  endAngle: 90
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 90%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: dark
                  type: horizontal
                  shadeIntensity: 0.5
                  inverseColors: false
                  gradientToColors:
                    - "#DCFE04"
                    - "#FEEF04"
                    - "#FEB204"
                    - "#FE4404"
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 100
              legend:
                show: false
              chart:
                height: 220
            card_mod:
              style: |
                ha-card {
                margin-top: -30px;
                 }
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.temperature_salon_humidity
                color: "#04FEF3"
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 100
                  startAngle: 90
                  endAngle: 270
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 80%
                    margin: 0
              fill:
                type: gradient
                gradient:
                  shade: light
                  type: horizontal
                  shadeIntensity: 0.3
                  inverseColors: true
                  gradientToColors:
                    - "#0408FE"
                  opacityFrom: 1
                  opacityTo: 1
                  stops:
                    - 0
                    - 100
              legend:
                show: false
              chart:
                height: 220
            card_mod:
              style: |
                ha-card {
                margin-top: -260px;
                 }
          - type: custom:mushroom-entity-card
            entity: sensor.temperature_salon_temperature
            primary_info: state
            secondary_info: none
            name: Salon
            icon_color: green
            layout: horizontal
            card_mod:
              style: |
                ha-card {
                  position: absolute;
                  top: 35%;
                  left : 24%;
                 }
                :host {
                 --card-primary-font-size: 20px !important;
                 --mush-icon-size: 25px; 
                }
          - type: custom:mushroom-entity-card
            entity: sensor.temperature_salon_humidity
            primary_info: state
            secondary_info: none
            name: Salon
            icon_color: blue
            layout: horizontal
            card_mod:
              style: |
                ha-card {
                  position: absolute;
                  top: 50%;
                  left : 24%;
                   }
                :host {
                 --card-primary-font-size: 20px !important;
                 --mush-icon-size: 25px; 
                }
    column_span: 1

System Information

version core-2025.1.2
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.13.1
os_name Linux
os_version 6.6.66-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.3
Stage running
Available Repositories 1503
Downloaded Repositories 22
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 14.1
update_channel stable
supervisor_version supervisor-2024.12.3
agent_version 1.6.0
docker_version 27.2.0
disk_total 30.8 GB
disk_used 8.7 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board ova
supervisor_api ok
version_api ok
installed_addons Duck DNS (1.18.0), File editor (5.8.0), Terminal & SSH (9.16.0), Linky (1.5.0), Zigbee2MQTT (2.0.0-2), Mosquitto broker (6.5.0), tydom2mqtt (3.5.3)
Dashboards
dashboards 3
resources 14
views 17
mode storage
Recorder
oldest_recorder_run 7 janvier 2025 à 15:36
current_recorder_run 17 janvier 2025 à 14:02
estimated_db_size 165.46 MiB
database_engine sqlite
database_version 3.47.1

Ma configuration

[center]## System Information

version core-2025.1.2
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.13.1
os_name Linux
os_version 6.6.66-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.3
Stage running
Available Repositories 1503
Downloaded Repositories 22
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 14.1
update_channel stable
supervisor_version supervisor-2024.12.3
agent_version 1.6.0
docker_version 27.2.0
disk_total 30.8 GB
disk_used 8.7 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board ova
supervisor_api ok
version_api ok
installed_addons Duck DNS (1.18.0), File editor (5.8.0), Terminal & SSH (9.16.0), Linky (1.5.0), Zigbee2MQTT (2.0.0-2), Mosquitto broker (6.5.0), tydom2mqtt (3.5.3)
Dashboards
dashboards 3
resources 14
views 17
mode storage
Recorder
oldest_recorder_run 7 janvier 2025 à 15:36
current_recorder_run 17 janvier 2025 à 14:02
estimated_db_size 165.46 MiB
database_engine sqlite
database_version 3.47.1
[/center] 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` ___
2

Bonjour,
chez moi ca donne ça:

image
image509×289 16.9 KB

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: markdown
        content: <center>TEST</center>
      - type: custom:apexcharts-card
        chart_type: radialBar
        series:
          - entity: sensor.lywsd03mmc_0945_temperature
            color: green
            max: 50
            show:
              legend_value: false
        apex_config:
          plotOptions:
            radialBar:
              offsetY: 0
              startAngle: -90
              endAngle: 90
              hollow:
                size: 80%
              dataLabels:
                name:
                  show: false
                value:
                  show: false
              track:
                strokeWidth: 90%
                margin: 0
          fill:
            type: gradient
            gradient:
              shade: dark
              type: horizontal
              shadeIntensity: 0.5
              inverseColors: false
              gradientToColors:
                - "#DCFE04"
                - "#FEEF04"
                - "#FEB204"
                - "#FE4404"
              opacityFrom: 1
              opacityTo: 1
              stops:
                - 0
                - 100
          legend:
            show: false
          chart:
            height: 220
        card_mod:
          style: |
            ha-card {
            margin-top: -30px;
             }
      - type: custom:apexcharts-card
        chart_type: radialBar
        series:
          - entity: sensor.lywsd03mmc_0945_humidity
            color: "#04FEF3"
            max: 100
            show:
              legend_value: false
        apex_config:
          plotOptions:
            radialBar:
              offsetY: 100
              startAngle: 90
              endAngle: 270
              hollow:
                size: 80%
              dataLabels:
                name:
                  show: false
                value:
                  show: false
              track:
                strokeWidth: 80%
                margin: 0
          fill:
            type: gradient
            gradient:
              shade: light
              type: horizontal
              shadeIntensity: 0.3
              inverseColors: true
              gradientToColors:
                - "#0408FE"
              opacityFrom: 1
              opacityTo: 1
              stops:
                - 0
                - 100
          legend:
            show: false
          chart:
            height: 220
        card_mod:
          style: |
            ha-card {
            margin-top: -242px;
             }
      - type: custom:mushroom-entity-card
        entity: sensor.lywsd03mmc_0945_temperature
        primary_info: state
        secondary_info: none
        name: Salon
        icon_color: green
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              position: absolute;
              top: 35%;
              left : 20%;
             }
            :host {
             --card-primary-font-size: 16px !important;
             --mush-icon-size: 25px; 
            }
      - type: custom:mushroom-entity-card
        entity: sensor.lywsd03mmc_0945_humidity
        primary_info: state
        secondary_info: none
        name: Salon
        icon_color: blue
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              position: absolute;
              top: 50%;
              left : 20%;
               }
            :host {
             --card-primary-font-size: 16px !important;
             --mush-icon-size: 25px; 
            }
  - type: vertical-stack
    cards:
      - animate: true
        color_thresholds:
          - color: "#1bc6fd"
            value: 18
          - color: "#1bfd1b"
            value: 20
          - color: "#fdf31b"
            value: 22
          - color: "#fda41b"
            value: 25
          - color: "#fd331b"
            value: 30
        entities:
          - sensor.lywsd03mmc_0945_temperature
        labels: true
        height: 130
        line_color: green
        points_per_hour: 6
        show:
          labels: true
          state: false
        name: °C
        type: custom:mini-graph-card
      - animate: true
        color_thresholds:
          - color: "#F6FE04"
            value: 20
          - color: "#04FEFE"
            value: 30
          - color: "#049FFE"
            value: 50
          - color: "#0441FE"
            value: 60
          - color: "#002FBF"
            value: 70
        entities:
          - sensor.lywsd03mmc_0945_humidity
        labels: true
        height: 130
        line_color: blue
        points_per_hour: 6
        show:
          labels: true
          state: false
        name: "%"
        type: custom:mini-graph-card

Je pense qu’il te manque la carte card-mod a installer a partir de HACS.

1 « J'aime »
3

Merci @WarC0zes , pourtant je n’avais aucune erreur hormis le type: horizontal-stack, je ne trouvais pas dans HACS, je suppose que c’est outil de card-mod alors ?

card temp_hum_test
card temp_hum_test646×332 22.5 KB

Par contre maintenant j’ai le contour de chaque cartes, est ce que c’est le fond d’écran noir qui fait que c’est supprimé sur ton image ou pas ?

4

Oui, car même si tu ne la pas installer , tu n’auras pas d’erreur dans le code.

Non, c’est parce que j’utilise un thème sans bordure.

ajoute border: none dans la partie card_mod, pour les cartes apex-chart et mushroom-entity-card.

        card_mod:
          style: |
            ha-card {
            margin-top: -30px;
            border: none;
             }

pour les deux cartes mushroom-entity pour les centrer joue avec left : 20%;

image
image241×160 6.99 KB

5

card temp_hum_test
card temp_hum_test322×290 10 KB

Cool, merci des explications, c’est vraiment difficile de faire une carte ^^
Par contre j’ai essayer avec la methode d’inclure border: none pour enlever la bordure de l’encadrer Salon une idée ?

Sur Pc cela rend bien mais sur téléphone c’est pas optimisé, mais je vais creuser avec les tailles et régler au fur et a mesure.
Merci de ton aide précieuse @WarC0zes tu gères!

6

Salut
Faire une carte n’as rien de compliqué en soit.
La en fait tu rassembles 5 cartes en une seule donc oui ça devient plus compliqué surtout sans avoir de base en css

7

@Tochy jai bien compris le decoupage de chaque cartes qui est elle meme mise dans une autres.
Je manque cruellement de synthaxe mais je suis preneur de conseil via ce super forum et les nombreux tutos :slight_smile:
En soit cest un métier :slight_smile:

8

il te manque sur la carte markdown, a ajouter juste:

        card_mod:
          style: |
            ha-card {
            border: none;
             }
9

Super merci @WarC0zes

J’ai réussi a jouer pour adapter sur téléphone :slight_smile:

1000017313
10000173131080×2197 142 KB

1 « J'aime »