[ConcoursDash] Volets Suivant Soleil

Salut à tous,

Jusqu’à aujourd’hui, les Dashboard n’était pas mes priorités et encore moins mon fort.
Avec les beaux jours qui arrive et la réactivation du pilotage de mais volets via l’intégration Adaptative Cover Pro, j’ai pu reconstater des conflits avec mes pilotages programmés par Scheduler
Je me suis du coup mis en tête de faire une carte personnalisé, et le concours m’a motiver à la faire ce soir
Oui je mis prends tard.
Bon l’IA ma bien aidé, pour ceux que ça intéresse, voici mes échanges

Gemini a luté avec la carte Compas !!!

Je n’ai pas encore testé la carte sur plusieurs jours, mais Gemini m’a proposé une petite évolution à la fin, je verrais demains ce que ça donne

  • J’ai une dernière petite suggestion pour rendre l’aspect « Pro » encore plus poussé : ajouter un changement de couleur dynamique sur les lettres (N, S, E, O) pour que tu puisses voir si l’automatisme est actif d’un coup d’œil, sans même regarder l’icône.*

Bon voici le rendu de ma carte à cette heure tardive !!

Avec les boutons, je peux activer ou non l’Adaptative Contrôle de l’orientation et en cliquant sur les points cardinaux j’ai accès aux pilotages de l’ensemble des volets de celle-ci

Et son code
type: picture-elements
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C/svg%3E"
elements:
  # 1. LA BOUSSOLE (Visualisation du soleil)
  - type: custom:compass-card
    indicator_sensors:
      - sensor: sensor.adapt_soleil_sud_decision_trace
        attribute: sun_azimuth
        indicator:
          image: mdi:white-balance-sunny
          color: gold
    value_sensors: []
    style:
      top: 50%
      left: 50%
      width: 100%
      pointer-events: none
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important;
          box-shadow: none !important;
        }
        .sensor-value, .sensor-label { 
          display: none !important; 
        }
  # 2. VALEUR CENTRALE (Élévation)
  - type: state-label
    entity: sensor.adapt_soleil_sud_decision_trace
    attribute: sun_elevation
    suffix: "°"
    style:
      top: 55%
      left: 50%
      font-size: 16px
      font-weight: bold
      text-shadow: 1px 1px 2px black

  # --- ZONE NORD (Haut) ---
  - type: state-label
    entity: sun.sun
    prefix: "Nord "
    style: { top: 22%, left: 50%, font-weight: bold, font-size: 20px, cursor: pointer }
    tap_action: { action: more-info, entity: cover.volets_nord }
  - type: state-icon
    entity: switch.adap_volet_nord_automatic_control
    style: 
      top: 33%
      left: 50%
      "--paper-item-icon-size": 22px
      cursor: pointer
    tap_action: { action: toggle }

  # --- ZONE SUD (Bas) ---
  - type: state-label
    entity: sun.sun
    prefix: "Sud "
    style: { top: 78%, left: 50%, font-weight: bold, font-size: 20px, cursor: pointer }
    tap_action: { action: more-info, entity: cover.volets_sud }
  - type: state-icon
    entity: switch.adapt_soleil_sud_automatic_control
    style: 
      top: 67%
      left: 50%
      "--paper-item-icon-size": 22px
      cursor: pointer
    tap_action: { action: toggle }

  # --- ZONE EST (Droite) ---
  - type: state-label
    entity: sun.sun
    prefix: "Est"
    style: { top: 50%, left: 78%, font-weight: bold, font-size: 20px, cursor: pointer }
    tap_action: { action: more-info, entity: cover.volet_est }
  - type: state-icon
    entity: switch.adap_volet_est_automatic_control
    style: 
      top: 55%
      left: 67%
      "--paper-item-icon-size": 22px
      cursor: pointer
    tap_action: { action: toggle }

  # --- ZONE OUEST (Gauche) ---
  - type: state-label
    entity: sun.sun
    prefix: "Ouest "
    style: { top: 50%, left: 22%, font-weight: bold, font-size: 20px, cursor: pointer }
    tap_action: { action: more-info, entity: cover.volets_ouest }
  - type: state-icon
    entity: switch.adapt_soleil_ouest_automatic_control
    style: 
      top: 55%
      left: 33%
      "--paper-item-icon-size": 22px
      cursor: pointer
    tap_action: { action: toggle }

Un Grand merci à HA et toute la communauté pour tout l’aide que HA apporte et que vous apporté et merci à l’IA sans laquelle je n’aurais jamais fait une tels carte !
Je rajouterais sûrement d’autres commandes d’Adaptaive Contrôle dans le temps, mais avec cette base, ça ne devrait pas être compliqué.

N’hésitez pas à faire des remarques et des propositions d’améliorations

Voici ma dernière modification, qui la rend plus soft, en prenant plus de place et j’ai supprimé l’espace blanc que j’avais
Voici le rendu

Voici le code de la nouvelle présentation
type: picture-elements
image: >-
  data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100
  55'%3E%3C/svg%3E
card_mod:
  style: |
    ha-card {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0px !important;
      transform: scale(1.5) !important; /* Ton zoom à 1.5 qui est à la bonne taille */
      transform-origin: top center !important; /* ANCRE LE ZOOM EN HAUT pour bloquer le titre à l'écran */
    }
    .card-content {
      padding: 0 !important;
    }
elements:
  - type: state-label
    entity: sun.sun
    prefix: "Soleil "
    content_info: none
    style:
      top: 6%
      left: 50%
      font-weight: bold
      font-size: 14px
      opacity: 0.9
  - type: custom:compass-card
    indicator_sensors:
      - sensor: sensor.adapt_soleil_sud_decision_trace
        attribute: sun_azimuth
        indicator:
          image: mdi:white-balance-sunny
          color: gold
    value_sensors: []
    style:
      top: 55%
      left: 50%
      width: 100%
      pointer-events: none
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important;
          box-shadow: none !important;
        }
        .sensor-value, .sensor-label { display: none !important; }
  - type: state-label
    entity: sensor.adapt_soleil_sud_decision_trace
    attribute: sun_elevation
    suffix: °
    style:
      top: 64%
      left: 50%
      font-size: 18px
      font-weight: bold
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Nord"; font-size: 13px; font-weight: bold; }
    style:
      top: 15%
      left: 50%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volets_nord
  - type: state-icon
    entity: switch.adap_volet_nord_automatic_control
    tap_action:
      action: toggle
    style:
      top: calc(15% + 25px)
      left: 50%
      "--paper-item-icon-size": 16px
      cursor: pointer
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Sud"; font-size: 13px; font-weight: bold; }
    style:
      top: 81%
      left: 50%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volets_sud
  - type: state-icon
    entity: switch.adapt_soleil_sud_automatic_control
    tap_action:
      action: toggle
    style:
      top: calc(81% + 25px)
      left: 50%
      "--paper-item-icon-size": 16px
      cursor: pointer
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Est"; font-size: 13px; font-weight: bold; }
    style:
      top: 50%
      left: 68%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volet_est
  - type: state-icon
    entity: switch.adap_volet_est_automatic_control
    tap_action:
      action: toggle
    style:
      top: calc(50% + 25px)
      left: 68%
      "--paper-item-icon-size": 16px
      cursor: pointer
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Ouest"; font-size: 13px; font-weight: bold; }
    style:
      top: 50%
      left: 32%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volets_ouest
  - type: state-icon
    entity: switch.adapt_soleil_ouest_automatic_control
    tap_action:
      action: toggle
    style:
      top: calc(50% + 25px)
      left: 32%
      "--paper-item-icon-size": 16px
      cursor: pointer


Salut !

Quelle était la problématique originelle ? Je n’ai pas encore installé cette automation.

Salut

L’intégration Adaptative Cover Pro sert à piloter ces occultations en fonction de l’ensoleillement afin de limiter les apports solaires
C’est très efficace en moyenne saison et même l’été pour éviter les surchauffe

Ma carte permet visuellement de voir sur quelle orientation la commande par l’intégration est activée !

Ha ok, je comprend mieux ! Pas mal du tout alors, le moment venu je regarderais ça, bravo pour ce travail du coup (et a Gemini) :slight_smile: