Bonjour.
Je profite de ce sujet pour une requête. Séduit par les animations de cette carte, je lai reprise en adaptant les infos principales et secondaires à mon besoin. J’aimerai savoir si c’est jouable de la convertir à la nouvelle version. J’ai fait quelques tentatives mais sans résultat .
type: custom:mushroom-legacy-template-card
primary: "{% set temps = {\n\t'clear-night': 'Nuit dégagée',\n\t'cloudy': 'Nuageux',\n\t'exceptional': 'Exceptionnel',\n\t'fog': 'Brouillard',\n\t'hail': 'Grêle',\n\t'lightning': 'rages',\n\t'lightning-rainy': 'Pluies orageuses',\n\t'partlycloudy': 'Eclaircies',\n\t'pouring': 'Averses',\n\t'rainy': 'Pluvieux',\n\t'snowy': 'Neige',\n\t'snowy-rainy': 'Pluie verglaçante',\n\t'sunny': 'Ensoleillé',\n\t'windy': 'Venteux',\n\t'windy-variant': 'Venteux variable'\n } %}\n {{ temps.get(states('sensor.openweathermap_condition'), 'white')\n }} -\n {{ (states('sensor.openweathermap_temperature') | float) |\n round(1, default=0) | string | replace('.', ',') }} °C, ressenti\n {{ (states('sensor.openweathermap_feels_like_temperature') |\n float) | round(1, default=0) | string | replace('.', ',') }} °C"
secondary: >-
{% set rain = states('sensor.rain_today') | float %}
{% set rain_hour =
states('sensor.openweathermap_forecast_precipitation_next_hour_probability') |
float %}
Min: {{ states('sensor.openweathermap_forecast_temperature_low') | float | round(0, default=0) | string | replace('.', ',') }}°C - Max: {{ states('sensor.openweathermap_forecast_temperature') | float | round(0, default=0) | string | replace('.', ',') }}°C - 💨 {{ states('sensor.openweathermap_wind_speed') | float | round(0, default=0) | string | replace('.', ',') }} km/h / {{ ['N','N-NE','NE','E-NE','E','E-SE','SE','S-SE','S','S-SO','SO','O-SO','O','O-NO','NO','N-NO','N'][((states('sensor.openweathermap_wind_bearing') | float + 11.25) / 22.5) | int % 16] }}
{% if rain > 0 or rain_hour > 10 %}{% if rain > 0 %}🌧️ {{ rain | round(0) }}
mm{% endif %}{% if rain > 0 and rain_hour > 10 %} - {% endif %}{% if rain_hour
> 10 %}☔️🕐 {{ rain_hour | round(0) }}%{% endif %}
{% endif %}
icon: "{% set icons = {\n\t'clear-night': 'mdi:weather-night',\n\t'cloudy': 'mdi:weather-cloudy',\n\t'exceptional': 'mdi:weather-cloudy-alert',\n\t'fog': 'mdi:weather-fog',\n\t'hail': 'mdi:weather-hail',\n\t'lightning': 'mdi:weather-lightning',\n\t'lightning-rainy': 'mdi:weather-lightning-rainy',\n\t'partlycloudy': 'mdi:weather-partly-cloudy' if is_state('sun.sun', 'above_horizon') else 'mdi:weather-night-partly-cloudy',\n\t'pouring': 'mdi:weather-pouring',\n\t'rainy': 'mdi:weather-rainy',\n\t'snowy': 'mdi:weather-snowy',\n\t'snowy-rainy': 'mdi:weather-snowy-rainy',\n\t'sunny': 'mdi:weather-sunny',\n\t'windy': 'mdi:weather-windy',\n\t'windy-variant': 'mdi:weather-windy-variant'\n } %}\n\n {{ icons.get(states('sensor.openweathermap_condition'),\n 'mdi:help-circle') }}"
entity: weather.openweathermap
icon_color: "{% set colors = {\n\t'clear-night': 'amber',\n\t'cloudy': 'grey',\n\t'exceptional': 'red',\n\t'fog': 'grey',\n\t'hail': 'grey',\n\t'lightning': 'dark-grey',\n\t'lightning-rainy': 'dark-grey',\n\t'partlycloudy': 'orange',\n\t'pouring': 'blue',\n\t'rainy': 'light-blue',\n\t'snowy': 'grey',\n\t'snowy-rainy': 'grey',\n\t'sunny': 'amber',\n\t'windy': 'light-blue',\n\t'windy-variant': 'cyan'\n } %}\n\n {{ colors.get(states('sensor.openweathermap_condition'), 'white')\n }}"
grid_options:
columns: 12
rows: 1
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/ephemerides
multiline_secondary: true
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
height: 54px !important;
}
ha-state-icon {
{% set condition = states('sensor.openweathermap_condition') %}
{% if condition == 'clear-night' %}
animation: moon 10s linear infinite, stars 5s linear infinite;
{% elif condition == 'cloudy' %}
animation: cloudy 10s ease-in-out infinite;
{% elif condition == 'exceptional' %}
animation: exceptional 400ms ease-in-out infinite;
{% elif condition == 'fog' %}
animation: cloudy 10s ease-in-out infinite, fog 4s infinite;
{% elif condition == 'hail' %}
animation: cloudy 10s ease-in-out infinite, hail 2s infinite;
{% elif condition == 'lightning' %}
animation: cloudy 10s ease-in-out infinite, lightning 4s infinite;
{% elif condition == 'lightning-rainy' %}
animation: cloudy 10s ease-in-out infinite, lightning-rainy 4s infinite;
{% elif condition == 'partlycloudy' %}
{% if is_state('sun.sun', 'above_horizon') %}
animation: cloudy 10s ease-in-out infinite, sun-partly 2s infinite;
{% else %}
position: relative;
z-index: 1;
animation: cloudy 10s ease-in-out infinite;
/* animation: cloudy 10s ease-in-out infinite, moon-partly 10s linear infinite; */
{% endif %}
{% elif condition == 'pouring' %}
animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
{% elif condition == 'rainy' %}
animation: cloudy 10s ease-in-out infinite, rainy 1.5s infinite;
{% elif condition == 'snowy' %}
animation: cloudy 10s ease-in-out infinite, snowy 4s infinite;
{% elif condition == 'snowy-rainy' %}
animation: cloudy 10s ease-in-out infinite, snowy-rainy 4s infinite;
{% elif condition == 'sunny' %}
animation: sunny 8s ease-in-out infinite alternate;
{% elif condition == 'windy' %}
animation: windy 10s ease-in-out infinite;
transform-origin: 15% 50%
{% elif condition == 'windy-variant' %}
animation: cloudy 10s ease-in-out infinite, windy-variant 5s infinite;
{% endif %}
}
ha-state-icon::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(73,52,22,1);
clip-path: polygon(0 58%, 27% 58%, 34% 47%, 44% 42%, 55% 42%, 69% 47%, 74% 64%, 100% 67%, 100% 0, 0 0);
opacity: 0;
{% set condition = states('sensor.openweathermap_condition') %}
{% if condition == 'partlycloudy' %}
{% if is_state('sun.sun', 'below_horizon') %}
animation: moon-partly 5s ease-in-out infinite alternate 1s; /* vertraagde fade-in */
{% endif %}
{% endif %}
z-index: 2;
pointer-events: none;
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes moon-partly {
to {
opacity: 1;
}
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38%, 34%, 36% 0); }
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes exceptional {
0%, 100% { transform: translate(0, 0)}
20% { transform: translate(0px, -0.3px)}
40% { transform: translate(0px, 0.3px)}
60% { transform: translate(0px, 0.3px)}
80% { transform: translate(0px, -0.3px)}
}
@keyframes fog {
0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%,100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%);}
}
@keyframes hail {
0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
}
@keyframes lightning {
0%, 10%, 12.1%, 15%, 18.1%, 20%, 100% { color: rgb(var(--rgb-dark-grey)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 72% 71%, 61% 34%, 41% 35%, 29% 87%, 0% 100%);}
10.1%, 12%, 15.1%, 18% { color: rgb(var(--rgb-white)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@keyframes lightning-rainy {
0%, 10%, 12.1%, 15%, 18.1%, 20%, 49.9% { color: rgb(var(--rgb-dark-grey)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 73% 62%, 77% 54%, 60% 36%, 38% 36%, 20% 51%, 23% 63%, 0% 100%);}
10.1%, 12%, 15.1%, 18% { color: rgb(var(--rgb-white)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 73% 62%, 77% 54%, 60% 36%, 38% 36%, 61% 44%, 47% 100%, 0% 100%); }
50%, 100%{ color: rgb(var(--rgb-dark-grey)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 99%, 58% 47%, 60% 36%, 38% 36%, 20% 51%, 23% 63%, 0% 100%); }
}
@keyframes sun-partly {
50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
}
@keyframes pouring {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%,
54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
}
@keyframes rainy {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
@keyframes snowy {
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
51% { clip-path: inset(0 0 0 0); }
}
@keyframes snowy-rainy {
0%, 32%, 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 79% 100%, 77% 71%, 70% 44%, 26% 43%, 13% 67%, 14% 100%, 0% 100%); }
33%, 65.9% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 59% 100%, 56% 75%, 70% 44%, 26% 43%, 13% 67%, 14% 100%, 0% 100%); }
66%, 99.9% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 79% 100%, 77% 71%, 70% 44%, 45% 39%, 62% 59%, 51% 100%, 0% 100%); }
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes windy {
0%, 100% { transform: scaleX(1.2); }
30% { transform: scaleX(0.9); }
45% { transform: scaleX(1.1); }
75% { transform: scaleX(0.8); }
}
@keyframes windy-variant {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: inset(0 0 37% 0); }
}
.
. J’ai réussi à remplacer dans card_mod, “mushroom-state-info$:” par “ha-tile-info$:”. En revanche, dans une carte, j’ai une animation d’icône avec “ha-state-icon” et “
.
…
.
