[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:

1 « 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