[CARTE] Home assistant Sun card - pour les phases du soleil

je dois avoir un bug avec chrome car sur l’application android et IOS ca fonctionne j’ai l’icone :slight_smile:

1 « J'aime »

Bonjour tout le monde !
J’ai bien galéré, mais j’ai réussi !

Donc avec HACS, j’ai rajouté:
button-card, Stack In Card, Text Divider Row, Vertical Stack In Card, card-mod, Compass Card, Sun Card Custom-ui et Lovelace Meteofrance Weather Card.

Il faut en plus avoir les intégrations Moon, Season et Sun (logique)

Pour les icônes, c’est très bien expliqué plus haut.

Voici mon code complet

type: custom:stack-in-card
title: Suivi du soleil
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        card_mod:
          style: |
            ha-card {
              border-width: 0px !important;
            }
        cards:
          - type: custom:compass-card
            language: fr
            indicator_sensors:
              - sensor: sun.sun
                attribute: azimuth
                indicator:
                  type: circle
                  color: orange
                  dynamic_style:
                    sensor: sun.sun
                    attribute: elevation
                    bands:
                      - from_value: 0
                        show: true
            value_sensors:
              - sensor: sun.sun
                attribute: elevation
                units: °
                decimals: 1
            compass:
              circle:
                background_image: \local\images\home.png
                background_opacity: 0.6
              north:
                show: true
                offset: 0
              east:
                show: true
              west:
                show: true
              south:
                show: true
          - type: markdown
            content: >
              <center>Azimuth: {{ state_attr('sun.sun', 'azimuth')
              }}°</center>  
      - type: custom:sun-card
        card_mod:
          style: |
            .sun-card-footer .sun-card-text-subtitle {
                font-size: 1rem !important;
                color: var(--primary-text-color) !important;
            }
            .sun-card-header .sun-card-text-subtitle {
                font-size: 1rem  !important;
                color: var(--primary-text-color) !important;
            }
            .sun-card-header .sun-card-text-time {
                font-size: 1.1rem  !important;
                color: var(--primary-text-color) !important;
            }
            .sun-card-footer .sun-card-text-time {
                font-size: 1.1rem  !important;
                color: var(--primary-text-color) !important;
            }
            ha-card {
            border-width: 0px !important;
            }
  - type: custom:mod-card
    style:
      .: |
        :host {
          --text-divider-color: rgb(68, 115, 158);
          --text-divider-line-size: 1px;
        }
    card:
      type: custom:text-divider-row
      text: Cycles
      align: left
  - type: glance
    entities:
      - entity: sensor.moon_phases
        style: |
          div:not(.name) {
            text-overflow: unset !important;
            white-space: unset !important;
          }
          state-badge {
            height: 35px !important;
            width: 35px !important;
            margin: 21%;
          }
      - entity: sun.sun
        name: Soleil
        style: |
          div:not(.name) {
            text-overflow: unset !important;
            white-space: unset !important;
          }
          state-badge {
            height: 80px !important;
            width: 80px !important;
          }
      - entity: sensor.season
        name: Saison
        style: |
          div:not(.name) {
            text-overflow: unset !important;
            white-space: unset !important;
          }
          state-badge {
            height: 37px !important;
            width: 37px !important;
            margin: 20%;
          }
    state_color: false
    show_name: true
    show_state: true
    style: |
      ha-card {
        --paper-item-icon-color: #44739e;
        --ha-card-header-color: #44739e;
        --ha-card-header-font-size: 17px;
        --mdc-icon-size: 39px;
        font-size: 14px;
        border-width: 0px !important;

      }

Et on obtient ça:

3 « J'aime »

Je vous propose également une combinaison sur la base de tous vos partages.
J’ai un peu joué aux apprentis sorcier avec les bordures, mais bon, ça passe …

Et le code, au cas ou …

type: custom:stack-in-card
title: Extérieur Maison
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        style: |
          ha-card {
              border-width: 0px !important;
          }
        cards:
          - type: custom:compass-card
            indicator_sensors:
              - sensor: sun.sun
                attribute: azimuth
                indicator:
                  type: circle
                  color: orange
                  dynamic_style:
                    sensor: sun.sun
                    attribute: elevation
                    bands:
                      - from_value: 0
                        show: true
            value_sensors:
              - sensor: sun.sun
                attribute: elevation
                units: °
                decimals: 1
            compass:
              circle:
                background_image: /local/home/maison_allevard.jpeg
                background_opacity: 0.5
              north:
                show: true
                offset: -5
              east:
                show: true
              west:
                show: true
              south:
                show: true
          - type: markdown
            content: |
              <center>Azimuth: {{ state_attr('sun.sun', 'azimuth') }}°</center>
            style:
              .: |
                :host {
                  --border-width: 0px !important;
                }
      - type: custom:sun-card
        name: Sun
        meridiem: false
        entities:
          max_elevation: sun.sun
          sunrise: sensor.sunrise
          sunset: sensor.sunset
          noon: sensor.solar_noon
          moon_phase: sensor.moon_phase
        card_mod:
          style: |
            .sun-card-footer .sun-card-text-subtitle {
                font-size: 1rem !important;
                color: var(--primary-text-color) !important;
            }
            .sun-card-header .sun-card-text-subtitle {
                font-size: 1rem  !important;
                color: var(--primary-text-color) !important;
            }
            .sun-card-header .sun-card-text-time {
                font-size: 1.1rem  !important;
                color: var(--primary-text-color) !important;
            }
            .sun-card-footer .sun-card-text-time {
                font-size: 1.1rem  !important;
                color: var(--primary-text-color) !important;
            }
            ha-card {
              border-width: 0px !important;
            }
  - type: custom:mod-card
    style:
      .: |
        :host {
          --text-divider-color: rgb(68, 115, 158);
          --text-divider-line-size: 1px;
          --border-width: 0px !important;
        }
    card:
      type: custom:text-divider-row
      text: Ambiance extérieure
      align: left
  - type: glance
    entities:
      - entity: sensor.moon_phase
        name: Lune
      - entity: sun.sun
        name: Soleil
      - entity: sensor.season
        name: Saison
      - entity: sensor.capteur_exterieur_temperature
    state_color: false
    show_name: true
    show_state: true
    style: |
      ha-card {
        --paper-item-icon-color: #44739e;
        --ha-card-header-color: #44739e;
        --ha-card-header-font-size: 17px;
        --mdc-icon-size: 39px;
        font-size: 14px;
        border-width: 0px !important;

      }
  - type: custom:mod-card
    style:
      .: |
        :host {
          --text-divider-color: rgb(68, 115, 158);
          --text-divider-line-size: 1px;
        }
    card:
      type: custom:text-divider-row
      text: Météo
      align: left
  - type: custom:mod-card
    card:
      style: |
        ha-card {
           border-width: 0px !important;
        }
      type: custom:meteofrance-weather-card
      entity: weather.allevard
      number_of_forecasts: '7'
      name: Allevard
      detailEntity: sensor.38_weather_alert
      snowChanceEntity: sensor.allevard_snow_chance
      uvEntity: sensor.allevard_uv
      cloudCoverEntity: sensor.allevard_cloud_cover
      freezeChanceEntity: sensor.allevard_freeze_chance
      rainChanceEntity: sensor.allevard_rain_chance
      alertEntity: sensor.38_weather_alert
      details: true
      alert_forecast: true
      one_hour_forecast: true
      forecast: true
      current: true
  - type: custom:mod-card
    style:
      .: |
        :host {
          --text-divider-color: rgb(68, 115, 158);
          --text-divider-line-size: 1px;
          --border-width: 0px !important;
        }
    card:
      type: custom:text-divider-row
      text: Risque pollen
      align: left
  - type: custom:auto-entities
    card:
      type: grid
      columns: 4
      square: true
    card_param: cards
    filter:
      include:
        - entity_id: sensor.pollens_risks_*
          options:
            type: custom:button-card
            color_type: icon
            show_name: true
            show_state: true
            style: |
              ha-card {
                background: none;
                box-shadow: #ccffcc;
                border-width: 0px;
              }
            styles:
              card:
                - height: 100px
                - width: 100px
              name:
                - font-size: 14px
            state:
              - value: unknown
                operator: '=='
                color: black
              - value: '0'
                operator: '=='
                color: black
              - value: '1'
                operator: '=='
                color: '#75f94c'
              - value: '2'
                operator: '=='
                color: '#377d22'
              - value: '3'
                operator: '=='
                color: '#fffd54'
              - value: '4'
                operator: '=='
                color: '#ef8641'
              - value: '5'
                operator: '=='
                color: '#ea3522'
            size: 40%
      exclude:
        - entity_id: sensor.pollens_risks_*
          state: unknown
        - entity_id: sensor.pollens_risks_*
          state: '0'
    sort: null
    method: friendly_name
    ignore_case: true
    numeric: false

2 « J'aime »

Erreurs de configuration détectées:
bad indentation of a mapping entry (220:21)

217 | ignore_case: true
218 | numeric: false
219 |
220 | show: true
---------------------------^
221 | west:
222 | show: true

moi j’ai une erreur
merci de m’apporter des précision

Bonjour !!

Tout est là, l’indentation (les espaces devant) n’est pas correcte (proche de la ligne 220 et du caractère 21)

Capture

je voudrais ajouter de tuile en vertical c’est possible?
merci ci pour tous j’essaye de comprend

Y’a t’il une astuce pour avoir les noms sympas des différents pollens ?
Je n’arrive qu’a faire afficher ça :

image

Bonjour,
Tu n’es pas dans le bon sujet ?
j’ai rencontré le même problème, j’ai résolu en mettant un bout de code javascript (je crois)
en mettant :

  name: >-
    [[[ return ("this.entity_id").split("_")[2] + " -- "+entity.state
    ]]]

le code complet de ma carte

type: custom:stack-in-card
keep:
  box_shadow: true
  margin: true
  border_radius: true
  background: true
  outer_padding: true
cards:
  - type: custom:button-card
    entity: sensor.pollens_44
    name: Synthèse Pollens
    icon: mdi:alert
    color_type: icon
    show_name: true
    show_state: false
    state:
      - value: unknown
        operator: '=='
        color: black
      - value: nul
        operator: '=='
        color: green
      - value: très faible
        operator: '=='
        color: '#75f94c'
      - value: faible
        operator: '=='
        color: '#377d22'
      - value: moyen
        operator: '=='
        color: '#fffd54'
      - value: élevé
        operator: '=='
        color: '#ef8641'
      - value: très élevé
        operator: '=='
        color: '#ea3522'
    size: 10%
  - type: custom:auto-entities
    card:
      type: grid
      columns: 3
      square: true
    card_param: cards
    filter:
      include:
        - entity_id: sensor.pollens_44*
          options:
            type: custom:button-card
            color_type: icon
            show_name: true
            show_state: false
            style: |
              ha-card {
                background: none;
                box-shadow: #ccffcc;
              }
            styles:
              card:
                - height: 100px
                - width: 150px
                - font-size: 12px
            name: >-
              [[[ return ("this.entity_id").split("_")[2] + " -- "+entity.state
              ]]]
            state:
              - value: unknown
                operator: '=='
                color: '808080'
              - value: nul
                operator: '=='
                color: grey
              - value: 0
                operator: '=='
                color: green
              - value: très faible
                operator: '=='
                color: '#75f94c'
              - value: faible
                operator: '=='
                color: '#377d22'
              - value: moyen
                operator: '=='
                color: '#fffd54'
              - value: élevé
                operator: '=='
                color: '#ef8641'
              - value: très élevé
                operator: '=='
                color: '#ea3522'
            size: 60%
      exclude:
        - entity_id: sensor.pollens_44*
          state: unknown
        - entity_id: sensor.pollens_44*
          state: nul
        - entity_id: sensor.pollens_44
    sort: null
    method: friendly_name
    ignore_case: true
    numeric: false

1 « J'aime »

Bonjour,

Avant tout merci pour le partage de code. J’ai réussi a remonter la même chose chez moi. Par contre j’ai la saison toujours écrit en anglais et non en français. J’ai loupé quelque chose?

Malheureusement non, tu n’a rien loupé et ça risque pas de changé dans l’immédiat :
Le main-developpeur a dit, a ce sujet

This is not a bug, but by design.
Cf le bug que j’avais ouvert a l’époque : Translation of season compoment is not working · Issue #64913 · home-assistant/core · GitHub

Tu peux toujours faire un truc à base de sensor ( template)

#Season #####################################################################
- platform: template
  sensors:
    saison:
      value_template: >
        {% if is_state("sensor.season", "spring") %}
          Printemps
        {% elif is_state("sensor.season", "summer") %}
          Eté
        {% elif is_state("sensor.season", "autumn") %}
          Automne
        {% else %}
          Hiver
        {% endif %}

Tu aura sensor.season et sensor.saison

Ok, merci c’est ce que j’avais trouvé, mais il faut donc aussi changer le custom pour avoir les images

1 « J'aime »

Oui, regarde mon post [CARTE] Home assistant Sun card - pour les phases du soleil - #49 par WarC0zes

J’ai rien modifier pour être en français, ca dépend des cartes je crois. J’ai juste modifier les images du sensor par défaut .

Salut bon encore un sujet qui va me donner mal à la tete pour cete fin de weekend :wink: merci a tous de vos partage je vais essayer de rajoutes tout ceci a on Ha car je trouve la carte très completes. aller au boulot

Cette carte avait suscité pas mal d’intérêt. Mais mauvaise nouvelle, le développeur a décidé d’archiver son dépôt, ce qui signifie qu’elle ne sera plus mise à jour.
Elle est encore utilisable, mais je crains qu’il faille à terme l’abandonner :dizzy_face:
A moins qu’il y ait un volontaire pour un fork ? :innocent:

2 « J'aime »

Je viens de découvrir cette mauvaise nouvelle et j’étais justement en train de chercher une alternative tout aussi sympathique à cette carte… :smiling_face_with_tear:

Tu peux continuer avec cette carte…l’installer comme’custom repository’ en HACS
Les maj ne sont plus fait…mais il n’a plus fait des maj depuis 2 ans donc pas de soucis je pense

Il y a déja 80+ forks… qui bouchent non plus

et voilà la carte est cassé :disappointed_relieved:

les sensor ne sont plus présent de la même manière mais surtout je ne retrouve plus sensor.solar_noon

Ca fonctionne toujours chez moi. J’ai juste un message dans hacs.

sun-card

1 « J'aime »