[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

2 « J'aime »

Voici ma première modification, qui la rend plus soft


j’ai juste un problème sur le carré blanc que je n’arrive pas à réduire

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
  100'%3E%3C/svg%3E
card_mod:
  style: |
    ha-card {
      #background: none !important;
      #border: none !important;
      #box-shadow: none !important;
      margin: -5% -10% -32% -10% !important; /* Compression des marges */
    }
    .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: 20px
      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: 34%
      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: 38%
      left: 50%
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Nord"; font-size: 18px; font-weight: bold; }
    style:
      top: 12%
      left: 50%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volets_nord
  - type: state-icon
    entity: switch.adap_volet_nord_automatic_control
    style:
      top: 19%
      left: 50%
      "--paper-item-icon-size": 22px
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Sud"; font-size: 18px; font-weight: bold; }
    style:
      top: 48%
      left: 50%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volets_sud
  - type: state-icon
    entity: switch.adapt_soleil_sud_automatic_control
    style:
      top: 55%
      left: 50%
      "--paper-item-icon-size": 22px
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Est"; font-size: 18px; font-weight: bold; }
    style:
      top: 33%
      left: 65%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volet_est
  - type: state-icon
    entity: switch.adap_volet_est_automatic_control
    style:
      top: 38%
      left: 65%
      "--paper-item-icon-size": 22px
  - type: state-label
    entity: sun.sun
    card_mod:
      style: |
        div { font-size: 0; }
        div::before { content: "Ouest"; font-size: 18px; font-weight: bold; }
    style:
      top: 33%
      left: 34%
      cursor: pointer
    tap_action:
      action: more-info
      entity: cover.volets_ouest
  - type: state-icon
    entity: switch.adapt_soleil_ouest_automatic_control
    style:
      top: 38%
      left: 34%
      "--paper-item-icon-size": 22px

Je suis preneur de solution pour supprimer la zone blanche

Merci d’avance