Mise en place d'une card impossible sun.sun

[Nothing]

Bj

Loin de demandé de l’aide , la je me décide à en demande car ca fait X jours que j’essai d’avoir ce résultat.

Mais voici je que j’obtiens dans la case Info 2 sur Tel

Sur PC:

le code de cette carte est

                    - type: custom:button-card
                      view_layout:
                        grid-area: four
                      template:
                        - widgets
                      tap_action:
                        action: none
                      styles:
                        custom_fields:
                          suntop:
                            - position: absolute
                            - top: 2%
                            - left: 2%
                            - font-size: 14px
                          sunbottom:
                            - position: absolute
                            - bottom: 2%
                            - left: 2%
                            - font-size: 14px
                          sun:
                            - position: absolute
                            - width: 100%
                            - height: 100%
                            - top: 0%
                      custom_fields:
                        suntop: |
                          [[[
                            if (states['sun.sun'].state == 'below_horizon'){
                              return `<div align="left"> 
                              <ha-icon icon="mdi:weather-sunset-up" style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;"> </ha-icon>
                              <b>SOL</b></font><br> 
                              <p style="margin-left:10px; margin-top:-5px; font-size:36px">
                              ${states['sun.sun'].attributes.next_rising.substr(11,5)}
                              </font></div>
                            `;
                            }
                            else {
                                   return `<div align="left"> <ha-icon
                                   icon="ios:sunset"
                                   style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;">
                                   </ha-icon><b>SOL</b></font><br>
                                   <p style="margin-left:10px; margin-top:-5px; font-size:36px">${states['sun.sun'].attributes.next_setting.substr(11,5)}</div>
                                   `;
                                   }
                               ]]]
                      sunbottom: |
                         [[[
                            if (states['sun.sun'].state == 'below_horizon'){
                              return `<div align="left"> <ha-icon icon="mdi:weather-sunset-down" style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;"> </ha-icon></font> 
                              ${states['sun.sun'].attributes.next_setting.substr(11,5)}
                              </div>
                            `; 
                            }
                          else {
                                   return `<div align="left"> <ha-icon
                                   icon="mdi:weather-sunset-up"
                                   style="width: 25px; height: px; color:rgb(255,255,255,0.5); padding: 10px;">
                                   </ha-icon></font> ${states['sun.sun'].attributes.next_rising.substr(11,5)}</div>`; }
                               ]]]
                      sun: |
                         [[[    
                             return `
                             <svg width="100%" height="100%">
                               <defs>
                                 <filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
                                   <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
                                   <feGaussianBlur result="blurOut" in="offOut" stdDeviation="4" />
                                   <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                                 </filter>
                                 <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                                   <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
                                   <stop offset="50%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
                                   <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
                                 </linearGradient>
                               </defs>
                               <circle cx="50%" cy="125%" r="80%" stroke="url(#grad1)" stroke-width="1.2%" fill="none" /> 
                               <line x1="100%" y1="${variables.line}%" x2="0" y2="${variables.line}%" style="stroke:rgb(255,255,255,0.0);stroke-width:0.5%" />
                               <circle cx="${variables.xpos}%" cy="${variables.ypos}%" rx="5" r="10" fill="rgb(255,255,255,1)" filter="url(#f2)"/>   
                             `;
                           ]]] 

et le template:

widgets:
  aspect_ratio: 1
  variables:
    forecast1pic: |
      [[[
        var state = states['weather.bresles'].attributes.forecast[1].condition;
        if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
        else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
        else if (state == "fog") return 'url("/local/weather/fog.svg")';
        else if (state == "hail") return 'url("/local/weather/snow.svg")';
        else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
        else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
        else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
        else if (state == "pouring") return 'url("/local/weather/rain.svg")';
        else if (state == "rainy") return 'url("/local/weather/rain.svg")';
        else if (state == "snowy") return 'url("/local/weather/snow.svg")';
        else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
        else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
        else if (state == "windy") return 'url("/local/weather/wind.svg")';
        else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
        else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
      ]]]
    forecast2pic: |
      [[[ 
        var state = states['weather.bresles'].attributes.forecast[2].condition;
        if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
        else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
        else if (state == "fog") return 'url("/local/weather/fog.svg")';
        else if (state == "hail") return 'url("/local/weather/snow.svg")';
        else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
        else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
        else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
        else if (state == "pouring") return 'url("/local/weather/rain.svg")';
        else if (state == "rainy") return 'url("/local/weather/rain.svg")';
        else if (state == "snowy") return 'url("/local/weather/snow.svg")';
        else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
        else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
        else if (state == "windy") return 'url("/local/weather/wind.svg")';
        else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
        else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
      ]]]
    forecast3pic: |
      [[[ 
        var state = states['weather.bresles'].attributes.forecast[3].condition;
        if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
        else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
        else if (state == "fog") return 'url("/local/weather/fog.svg")';
        else if (state == "hail") return 'url("/local/weather/snow.svg")';
        else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
        else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
        else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
        else if (state == "pouring") return 'url("/local/weather/rain.svg")';
        else if (state == "rainy") return 'url("/local/weather/rain.svg")';
        else if (state == "snowy") return 'url("/local/weather/snow.svg")';
        else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
        else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
        else if (state == "windy") return 'url("/local/weather/wind.svg")';
        else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
        else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
      ]]]
    forecast4pic: |
      [[[ 
        var state = states['weather.bresles'].attributes.forecast[4].condition;
        if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
        else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
        else if (state == "fog") return 'url("/local/weather/fog.svg")';
        else if (state == "hail") return 'url("/local/weather/snow.svg")';
        else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
        else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
        else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
        else if (state == "pouring") return 'url("/local/weather/rain.svg")';
        else if (state == "rainy") return 'url("/local/weather/rain.svg")';
        else if (state == "snowy") return 'url("/local/weather/snow.svg")';
        else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
        else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
        else if (state == "windy") return 'url("/local/weather/wind.svg")';
        else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
        else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
      ]]]
    forecast5pic: |
      [[[ 
        var state = states['weather.bresles'].attributes.forecast[5].condition;
        if (state == "cloudy") return 'url("/local/weather/cloudy.svg")';
        else if (state == "clear-night") return 'url("/local/weather/moon-last-quarter.svg")';
        else if (state == "fog") return 'url("/local/weather/fog.svg")';
        else if (state == "hail") return 'url("/local/weather/snow.svg")';
        else if (state == "lightning") return 'url("/local/weather/thunderstorms.svg")';
        else if (state == "lightning-rainy") return 'url("/local/weather/thunderstorms-rain.svg")';
        else if (state == "partlycloudy") return 'url("/local/weather/partly-cloudy-day.svg")';
        else if (state == "pouring") return 'url("/local/weather/rain.svg")';
        else if (state == "rainy") return 'url("/local/weather/rain.svg")';
        else if (state == "snowy") return 'url("/local/weather/snow.svg")';
        else if (state == "snowy-rainy") return 'url("/local/weather/sleet.svg")';
        else if (state == "sunny") return 'url("/local/weather/clear-day.svg")';
        else if (state == "windy") return 'url("/local/weather/wind.svg")';
        else if (state == "windy-variant") return 'url("/local/weather/dust-wind.svg")';
        else if (state == "exceptional") return 'url("/local/weather/clear-day.svg")';
      ]]]
    ypos: |
      [[[
        if (states["sensor.time"].state.split(":")[0] == "06"){ 
           return "49";} 
        else if (states["sensor.time"].state.split(":")[0] == "07"){ 
           return "47.9";}
        else if (states["sensor.time"].state.split(":")[0] == "08"){ 
           return "46.8";}
        else if (states["sensor.time"].state.split(":")[0] == "09"){ 
           return "45.8";}
        else if (states["sensor.time"].state.split(":")[0] == "10"){ 
           return "45.4";}
        else if (states["sensor.time"].state.split(":")[0] == "11"){ 
           return "45.1";}
        else if (states["sensor.time"].state.split(":")[0] == "12"){ 
           return "45";}
        else if (states["sensor.time"].state.split(":")[0] == "13"){ 
           return "45.1";}
        else if (states["sensor.time"].state.split(":")[0] == "14"){ 
           return "45.4";}
        else if (states["sensor.time"].state.split(":")[0] == "15"){ 
           return "45.8";}
        else if (states["sensor.time"].state.split(":")[0] == "16"){ 
           return "46.8";}
        else if (states["sensor.time"].state.split(":")[0] == "17"){ 
           return "47.9";}
        else if (states["sensor.time"].state.split(":")[0] == "18"){ 
           return "49";}
        else if (states["sensor.time"].state.split(":")[0] == "19"){ 
           return "50.6";}
        else if (states["sensor.time"].state.split(":")[0] == "21"){ 
           return "54.8";}        
        else if (states["sensor.time"].state.split(":")[0] == "22") { 
          return "56.9";}
        else if (states["sensor.time"].state.split(":")[0] == "23") { 
          return "59.4";}
        else if (states["sensor.time"].state.split(":")[0] == "24") { 
          return "60.6";}
      ]]]
    xpos: |
      [[[    
        return states["sensor.time"].state.split(":")[0] * 4.16;
      ]]]
    line: |
      [[[
        if (states['sun.sun'].attributes.next_rising.substr(11,2) == "06"){ 
           return "49";}
      ]]]
  show_icon: false
  show_state: true
  show_name: true
  tap_action:
    animation_card: |
      [[[
        const animation_speed_ms = 900;
        const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
        this.shadowRoot.getElementById("card").style.animation = animation;
        window.setTimeout(() => {
          this.shadowRoot.getElementById("card").style.animation = "none";
        }, animation_speed_ms)
      ]]]
  styles:
    card:
      - background-color: rgba(0,0,0,0.4)
      - font-color: rgb(255,255,255,0.9)
      - text-shadow: 0px 0px 1px black
      - letter-spacing: 0.05vw
    name:
      - color: rgb(255,255,255,0.6)
  extra_styles: |
    @keyframes card_bounce {
      0% {
        transform: scale(1);
      }
      15% {
        transform: scale(0.9);
      }
      25% {
        transform: scale(1);
      }
      30% {
        transform: scale(0.98);
      }
      100% {
        transform: scale(1);
      }
    }

J’arrive pas trouvé ce qui cloche !

merci

[Giga77]

Salut
J’ai l’impression qu’il y a un souci d’indentation.

@Nothing

sunbottom

@Nothing

sun

Ils ne sont pas sous custom_fields.

[Nothing]

bien vue !!

je vais corrigé , et je vois ce que cela donne

[Nothing]

AH LES BOULES !!
A passé des heures / jours pour trouvé le souci et Giga77 en 10 seconde trouvé le souci !!
c’etais bien ca grand merci @Giga77

[Ludoc]

Bonjour,
question bête, le code du template widget se met dans le fichier template ? Ou c’est juste spécifique pour l’application companion (widget) ? J’ai cherché et pas trouvé dans les docs quelque chose qui soit en rapport avec les widgets et les templates ?*
Merci.

[Nothing]

Bj

Je met mes carte dans
button_card_templates.yaml

Tous mes fichiers sont écrit en manuel , en yaml

Configuration lovelace yaml

Il te faut le créer toi même. De base, les tableaux de bord se gèrent par l’interface graphique. A lire pour approfondir tes connaissances (le dernier lien est la marche à suivre) : https://forum.hacf.fr/t/lovelace-en-yaml-bonnes-habitudes/1088 https://forum.hacf.fr/t/resources-lovelace-dans-ui-lovelace-yaml/1660 Et enfin, https://forum.hacf.fr/t/yaml-ou-graphique/5652/3?u=clemalex Voici la procédure que j’ai fais réaliser à @barto_95 pour le passage en YAML et graphique. Si lui y est arr…

[Ludoc]

Merci, j’utilise déjà le « découpage » par fichier, ma question portait sur le terme widget, je ne retrouve pas de doc sur sur ça.

[BWHOUSE]

Bonjour à tous. Superbe conception de carte, j’ai essayé de l’implémenter en mettant le modèle de widget dans ma configuration brute dans les modèles de désencombrement, puis en mettant le code de la carte à l’intérieur d’une carte, mais cela ne fonctionne certainement pas. Où puis-je obtenir des informations pour mettre en œuvre cette magnifique carte sur mon tableau ? Merci d’avance à tous.