Dernier truc, essaye de vider le cache de ton navigateur. Tout a l’air ok chez toi.
J’ai vidé le cache, comme mentionné dans la doc du github.
Comme ça ne fonctionnait toujours pas, j’ai viré l’intégration pour ne garder que la carte, pas très lisible, et pas éligible au nouveau redimensionnement.
Merci pour l’aide. ,)
Salut,
c’était un problème de Browser mod, que j’ai eu bien après toi.
Une nouvelle release est sortie, qui fix le soucis du popup.
Fixes for Home Assistant 2024.7 Latest
- Fix popup cards not working in Home Assistant 2024.7 - thanks @sebastian-bartkowiak
- Fix issues in settings pages - thanks @Alfiegerner and @kvanbiesen
- Fix warning about deprecated functionality - thanks @IntExCZ , @lanquarden and @hmmbob
- Fix width of header when sidebar is hidden - thanks @Garfonso
- Add ability to toggle AFJ to the settings page
- Improve how devices are selected for service calls in GUI
edit:
fonctionelle, mais j’ai du vider le cache du navigateur pour que ca fonctionne.
Impeccable, merci pour le rappel.
Est ce que tu l’utilises pour d’autres entités, juste par curiosité ?
Merci.
Avant, je l’utilisais aussi pour afficher mini-graph-card au lieu du more-info pour les températures et humidités.
Hello,
Bonne idée, du coup j’en profite pour alléger les vues en supprimant les paquets de courbes que je mets dans des popups.
1 « J'aime »
Bonjour à tous
J’avais un peu abandonné ma page météo pendant quelques semaines voir mois, mais là que j’ai un peu de temps j’aimerais là rendre propre mais je n’y arrive pas
Il me semble avoir suivi tout les petits bout de tuto renvoyé de lien en lien, mais sans succès
Voici à quoi ressemble ma page
Et voici son code
views:
- theme: Backend-selected
title: Météo
path: meteo
icon: mdi:weather-partly-cloudy
background: center / cover no-repeat url("/local/images/wallpaper-meteo.jpg") fixed
layout:
height: auto
margin: 0px 4px 0px 0px
type: custom:horizontal-layout
badges: []
cards:
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: vertical-stack
cards:
- type: custom:meteofrance-weather-card
entity: weather.assions
number_of_forecasts: '7'
forecast: true
alert_forecast: true
cloudCoverEntity: sensor.assions_cloud_cover
rainChanceEntity: sensor.assions_rain_chance
freezeChanceEntity: sensor.assions_freeze_chance
snowChanceEntity: sensor.assions_snow_chance
uvEntity: sensor.assions_uv
detailEntity: sensor.assions_wind_speed
alertEntity: sensor.meteo_alerte_11
name: Les Assions
static_icons: false
wind_forecast_icons: true
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
top: -15px;
background: none;
border: none;
}
- type: vertical-stack
cards:
- type: custom:meteofrance-weather-card
entity: weather.vals_les_bains
number_of_forecasts: '7'
forecast: true
alert_forecast: true
rainChanceEntity: sensor.vals_les_bains_rain_chance
uvEntity: sensor.vals_les_bains_uv
cloudCoverEntity: sensor.vals_les_bains_cloud_cover
freezeChanceEntity: sensor.vals_les_bains_freeze_chance
snowChanceEntity: sensor.vals_les_bains_snow_chance
alertEntity: sensor.meteo_alerte_99
detailEntity: sensor.vals_les_bains_daily_precipitation
name: Vals Les Bains
static_icons: false
wind_forecast_icons: true
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
top: -15px;
background: none;
border: none;
}
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: vertical-stack
cards:
- type: custom:gap-card
height: 25
- type: custom:tempometer-gauge-card
entity: weather.assions
attribute: pressure
title: Baromètre Les Assions
icon_color: '#44739e'
min: 960
max: 1060
decimals: 0
severity:
red: 980
yellow: 1000
green: 1020
card_mod:
style: |
:host {
--paper-card-background-color: transparent;
--ha-card-border-radius: 0px;
}
.gauge-data #percent{
font-size: 1.8rem !important;
}
.gauge-footer{
font-size: 1.4rem !important;
}
.gauge-data #title {
font-size: 1rem !important;
}
ha-card {
margin-top: -13px;
border: none;
}
- type: vertical-stack
cards:
- type: custom:compass-card
indicator_sensors:
- sensor: weather.assions
attribute: wind_bearing
indicator:
type: arrow_inward
show: false
dynamic_style:
sensor: weather.assions
attribute: wind_bearing
bands:
- from_value: 3
show: true
header:
title:
value: VENT
color: '#44739e'
icon:
color: rgb(3, 169, 244)
dynamic_style:
sensor: sensor.assions_wind_speed
bands:
- from_value: 25
color: yellow
- from_value: 45
color: orange
- from_value: 65
color: red
value_sensors:
- sensor: weather.assions
attribute: wind_speed
units: Km
compass:
circle:
background_image: \local\images\maison2.png
background_opacity: 0.6
east:
show: true
west:
show: true
south:
show: true
north:
show: true
language: fr
card_mod:
style: |
ha-card > div.header > div.name > span {
font-size: 14px;
font-weight: bold;
}
ha-card {
margin-top: -13px;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:rain-gauge-card
name: ' '
language: fr
entity: sensor.assions_daily_precipitation
is_imperial: false
border_colour: '#44739e'
max_level: 30
show_warning: false
show_error: false
card_mod:
style: |
#logo {
width: 70%;
}
ha-card {
margin: -30px 0px -5px 0px;
background: transparent;
border: none;
}
- type: custom:uv-index-card
entity: sensor.assions_uv
language: fr
show_warning: false
show_error: false
name: ' '
card_mod:
style: |
ha-card {
margin: -50px 0px -5px 0px;
background: transparent;
}
ha-card > div > div:nth-child(1) > svg {
width: 80%;
margin-top: 21px;
border: none;
}
- type: horizontal-stack
cards:
- type: markdown
content: >
<center>Avant <ha-icon icon="mdi:home-thermometer"></ha-icon>
{{
states("sensor.temperature_humidity_sensor_exterieur_av_temperature")
| round(1)}}°C</center> <center>Arrière <ha-icon
icon="mdi:home-thermometer-outline"></ha-icon> {{
states("sensor.lywsd03mmc_c948_temperature") |
round(1)}}°C</center>
card_mod:
style: |
ha-card {
--card-mod-icon-color: #44739e;
--mdc-icon-size: 28px;
font-size: 1.4rem !important;
margin-top: -20px;
margin-left: -3px;
background: transparent;
border: none;
}
- type: markdown
content: >
<center><ha-icon icon="mdi:water-percent"></ha-icon> {{
states("sensor.temperature_humidity_sensor_exterieur_av_humidity")
| round(0) }}%</center> <center><ha-icon
icon="mdi:water-percent"></ha-icon> {{
states("sensor.lywsd03mmc_c948_humidity") | round(0)
}}%</center>
card_mod:
style: |
ha-card {
--card-mod-icon-color: #44739e;
--mdc-icon-size: 28px;
font-size: 1.4rem !important;
margin-top: -20px;
margin-left: -18px;
background: transparent;
border: none;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
top: -20px;
border: none;
}
card:
type: custom:text-divider-row
text: CARTES
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -70px 5px -23px 5px;
border: none;
}
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.meteo_france_alertes_image_today
state_not: unknown
card:
type: custom:button-card
entity: camera.mf_alerte_today
name: Aujourd'hui
show_icon: false
show_entity_picture: true
aspect_ratio: 1/1
size: 100%
card_mod:
style: |
ha-card {
margin: 0px 0px 5px 0px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
}
- type: conditional
conditions:
- condition: state
entity: sensor.meteo_france_alertes_image_tomorrow
state_not: unknown
card:
type: custom:button-card
entity: camera.mf_alerte_tomorrow
name: Demain
aspect_ratio: 1/1
show_icon: false
show_entity_picture: true
size: 100%
card_mod:
style: |
ha-card {
margin: 0px 0px 5px 0px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
}
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
navigation:
keyboard:
enabled: true
onlyInViewport: true
cards:
- type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=44.4205&lon=4.1569&detailLat=44.4205&detailLon=4.1569&width=650&height=450&zoom=8&level=surface&overlay=rain&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1
aspect_ratio: 69%
card_mod:
style: |
ha-card {
border-radius: 0px;
}
- type: map
entities:
- entity: zone.home
geo_location_sources:
- blitzortung
default_zoom: 9
dark_mode: true
aspect_ratio: '4:2.76'
hours_to_show: 24
card_mod:
style: |
ha-card {
border-radius: 0px;
}
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
border: none;
}
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: false
cards:
- type: horizontal-stack
cards:
- type: custom:compass-card
language: fr
header:
title:
value: SOLEIL
color: '#44739e'
icon:
color: green
dynamic_style:
sensor: sensor.assions_uv
bands:
- from_value: 1
color: green
- from_value: 4
color: yellow
- from_value: 7
color: orange
- from_value: 9
color: red
- from_value: 12
color: purple
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
state_abbreviation:
show: true
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\maison2.png
background_opacity: 0.6
north:
show: true
offset: 0
east:
show: true
west:
show: true
south:
show: true
card_mod:
style: |
ha-card > div.header > div.name > span {
font-size: 14px;
font-weight: bold;
}
ha-card {
margin-top: -13px;
border: none;
}
- type: vertical-stack
cards:
- type: custom:horizon-card
moon: true
fields:
azimuth: true
elevation: true
moonrise: true
moonset: true
moon_phase: false
time_format: 24
card_mod:
style: |
:host {
--hc-lines: grey !important;
--hc-sun-color: orange !important;
}
.horizon-card {
padding: 0.1em !important;
}
.horizon-card-header {
margin-top: 3px !important;
}
.horizon-card-graph {
margin: 0.5em 0.1em -1em 0.1em !important;
}
.horizon-card-footer {
margin-bottom: 15px !important;
}
.horizon-card-footer > * {
margin-top: 5px !important;
}
.horizon-card-field-name {
font-size: 1rem !important;
color: rgb(68, 115, 158) !important;
}
.horizon-card-field-value {
font-size: 0.9rem !important;
}
- type: horizontal-stack
cards:
- type: custom:compass-card
indicator_sensors:
- sensor: sensor.blitzortung_lightning_azimuth
indicator:
type: arrow_outward
color: orange
show: false
dynamic_style:
sensor: sensor.blitzortung_lightning_distance
bands:
- from_value: 1
show: true
value_sensors:
- sensor: sensor.blitzortung_lightning_distance
- sensor: sensor.blitzortung_lightning_counter
header:
title:
value: Éclair
color: '#44739e'
icon:
color: green
dynamic_style:
sensor: sensor.blitzortung_lightning_counter
bands:
- from_value: 30
color: yellow
- from_value: 100
color: orange
- from_value: 200
color: red
- from_value: 400
color: purple
compass:
circle:
background_image: \local\images\maison2.png
background_opacity: 0.6
north:
show: true
east:
show: true
west:
show: true
south:
show: true
language: fr
card_mod:
style: |
.sensor-1 {
line-height: 18px;
}
.sensor-1 .value {
font-size: 18px !important;
}
.sensor-0 .value {
{% if is_state('sensor.blitzortung_lightning_distance', 'unknown') %}
font-size: 20px !important;
{% else %}
font-size: 26px !important;
{% endif %}
}
ha-card {
margin-top: -16px;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.blitzortung_lightning_counter
name: Compteur d'éclair
- entity: sensor.compteur_eclair_mensuel
name: Compteur d'éclair Mensuelle
icon: mdi:flash-alert
direction: up
height: 188px
width: 71px
columns: 2
stack: horizontal
positions:
indicator: 'off'
icon: 'off'
severity:
- color: Green
from: 0
to: 30
- color: yellow
from: 31
to: 99
- color: Orange
from: 100
to: 199
- color: Red
from: 200
to: 400
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 50px;
} #states > bar-card-row > bar-card-card >
bar-card-background > bar-card-contentbar > bar-card-name {
font-size: 12px;
} bar-card-name {
margin-top: 13px;
margin-left: 8px;
} ha-card {
margin: -16px 16px 16px 16px;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
top: -30px;
}
card:
type: custom:text-divider-row
text: CYCLES
align: left
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
entity: sensor.lune
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 23%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
border: none;
}
- type: custom:button-card
entity: sun.sun
name: Soleil
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 36%
state_display: |
[[[
if (entity.state === 'below_horizon') return "Sous l'horizon";
else return "Au-dessus de l'horizon";
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
border: none;
}
- type: custom:button-card
entity: sensor.season
name: Saison
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 28%
state_display: |
[[[
if (entity.state === 'summer') return 'été';
if (entity.state === 'winter') return 'Hiver';
if (entity.state === 'autumn') return 'Automne';
else return 'Printemps';
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
border: none;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
margin-top: -50px;
}
card:
type: custom:text-divider-row
text: POLLENS
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -30px -5px 0px -5px;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
card:
type: custom:text-divider-row
text: SÉCHERESSE
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -17px -5px 0px -5px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.alert_level
name: 'Vigieau Les Assions:'
layout: icon_name_state2nd
color_type: icon
show_name: true
show_state: true
state:
- value: Vigilance
operator: '=='
color: green
icon: mdi:water-check
styles:
state:
- color: green
- value: Alerte
operator: '=='
color: yellow
icon: mdi:water-alert
styles:
state:
- color: yellow
- value: Alerte renforcée
operator: '=='
color: orange
icon: mdi:water-remove
styles:
state:
- color: orange
- value: Crise
operator: '=='
color: red
icon: mdi:water-off
styles:
state:
- color: red
size: 60%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 15px
state:
- font-weight: bold
- font-size: 15px
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.alert_level
name: Niveau
icon: mdi:alert-circle
height: 47px
color: red
positions:
indicator: 'off'
icon: 'off'
severity:
- text: Vigilance
color: green
- text: Alerte
color: yellow
- text: Alerte renforcée
color: orange
- text: Crise
color: red
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
}
#states > bar-card-row > bar-card-card >
bar-card-background > bar-card-contentbar > bar-card-name
{
font-size: 16px;
color: white;
} ha-card {
margin-top: -2px;
background: none;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: conditional
conditions:
- entity: sensor.alert_level
state_not: Vigilance
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 5px 5px 5px 5px;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 5
square: false
card_param: cards
filter:
include:
- entity_id: sensor.*_restrictions
options:
type: custom:button-card
color_type: icon
aspect_ratio: 1/1
show_name: true
show_state: true
name: |
[[[
return entity.attributes.friendly_name
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
name:
- font-size: 11px
- white-space: normal
state:
- font-weight: bold
- font-size: 10px
- white-space: normal
state:
- value: Aucune restriction
operator: '=='
color: green
styles:
card:
- box-shadow: 0px 0px 0px 2px green
state:
- color: green
- value: Interdiction sauf exception
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
- value: Interdiction
operator: '=='
color: red
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
- value: Interdiction sur plage horaire
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
size: 50%
exclude:
- entity_id: sensor.*_restrictions
state: Aucune restriction
sort:
method: name
reverse: false
- type: custom:popup-card
entity: sensor.lune
style: |-
--popup-border-radius: 15px;
--popup-background-color: transparent;
--popup-border-width: 0px;
card:
type: picture-elements
image: /local/images/phases-lunaires.jpg
elements:
- type: conditional
conditions:
- entity: sensor.moon
state: new_moon
elements:
- type: image
image: /local/images/circle.png
style:
top: 50%
left: 54%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.moon
state: waxing_crescent
elements:
- type: image
image: /local/images/circle.png
style:
top: 30%
left: 50%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.moon
state: first_quarter
elements:
- type: image
image: /local/images/circle.png
style:
top: 24%
left: 36%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.moon
state: waxing_gibbous
elements:
- type: image
image: /local/images/circle.png
style:
top: 31%
left: 23.3%
width: 12%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.moon
state: full_moon
elements:
- type: image
image: /local/images/circle.png
style:
top: 50%
left: 17.7%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.moon
state: waning_gibbous
elements:
- type: image
image: /local/images/circle.png
style:
top: 70%
left: 23.5%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.moon
state: last_quarter
elements:
- type: image
image: /local/images/circle.png
style:
top: 77%
left: 36%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.moon
state: waning_crescent
elements:
- type: image
image: /local/images/circle.png
style:
top: 70%
left: 50%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
}
Comme vous pouvez le voir, la première carte à un bon rendu, mais les autres c’est catastrophique.
Est-ce que vous pouvez m’aider ?
Je vous remercie par avance,
Bonjour,
1/ regarde ce lien Alerte météo - #512 par starworld , une nouvelle facon de récupérer les alertes météo et qui évite les erreurs si pas d’images.
2/ Il te faut installer l’intégration lune et saison.
Pour avoir la lune en images [CARTE] Les phases de la lune en image
Pour les saisons et soleil en images Dashboard météo all inclusive V2 (maj 02/08/23) - #13 par WarC0zes
Tu n’as pas modifié les entités, il faut des thermomètres extérieurs. Sinon supprime ce bout de code si pas utiliser.
1 « J'aime »
Bonjour
C’est bien celui que j’ai suivi, mais ça ne fonctionne pas
En cliquant sur une carte voici le message que j’ai
Edit: en vérifiant les bouts de code, j’ai vu un chemin d’accès aux images qui n’était pas le bon, c’est donc corrigé
Par contre j’ai un problème avec ces cartes car elles n’arrêtent pas de monter et descendre, et je pense qu’il y a un problème d’espacement, mais je ne sais pas où !!
ah il me semblait bien qu’il me manquait ces entités, mais en relisant à plusieurs reprise le post initial je n’ai pas trouvé comment les intégrer, merci
pour le reste je regarde, merci
Dans paramètres / appareils et services. Puis ajouter une intégration et les recherchées, puis les installer.
Merci, j’avais trouvé, mais ce que je voulais dire c’est qu’il n’y a aucune indication dans le post initial pour faire remonter ces informations n’y de lien vers le post
[CARTE] Les phases de la lune en image
Par contre j’ai plein de trait en plein milieu dont les cadre gris que je n’arrive pas à enlever
une idée ?
Il te faut installer la carte card_mod.
c’est ce code qui enlève les bordure. Mais il faut card_mod installer pour que ca fonctionne.
card_mod:
style: |
ha-card {
border: none;
}
Je vais l’ajouter dans le post initial.
je l’ai, et je vais rajouter ce bout de code, merci
Super car c’était un trou dans la raquette du tuto
Merci
Re
Je vais essayer dans la soirée de corriger mes cartes
Par contre après relecture du post je ne vois rien sur comment avoir l’entité POLLEN car j’aimerais remettre cette partie du code !!!
Quel intégration faut-il utiliser ?
Je te remercie par avance
Ajouter dans le post initiale, encore un oubli 
1 « J'aime »
Merci pour l’ajout
Par contre, je ne comprends pas pourquoi il y a 2 fois le code de la page complète sachant que le deuxième à 15k de caractères en plus que le premier !!
Peux-tu préciser la différence entre les deux ?
Au passage quelle dimension doit avoir l’image maison.png pour s’ajuser au plus jute au cercle car j’ai toujours des bandes blanches dans les cercles ?
Edit: pour ce point je viens de trouver, il faut une image carré au pixel prêt
Te remerciant par avance,
version 1
version 2
Merci, j’avais du mal à comprendre à la lecture du post
Bon il y a plus qu’à trouver les bug pour corriger tout les petits problème
re
dans la partie Sècheresse du code pour entity: sensor.alert_level, il n’y a pas de XXXXX pour montrer qu’il faut le personnaliser en fonction de Vigieau et d’ailleurs c’est pareil pour les capteurs de température et humidité « Avant et Arrière »
Est-ce normal ?
Edit : ca y est je vois le bout du tunnel, mais j’ai encore un problème sur la 3ème carte
Comme on peut le voir sur le screen, il y a un décalage sous le sous-titre CYCLE, et au passage je n’ai pas trouvé comment masquer les cadres gris des 3 cycles
Ensuite la partie Sècheresse semble ne pas fonctionner correctement
Voici le code de cette carte
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: horizontal-stack
cards:
- type: custom:compass-card
language: fr
header:
title:
value: SOLEIL
color: '#44739e'
icon:
color: green
dynamic_style:
sensor: sensor.assions_uv
bands:
- from_value: 1
color: green
- from_value: 4
color: yellow
- from_value: 7
color: orange
- from_value: 9
color: red
- from_value: 12
color: purple
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
state_abbreviation:
show: true
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\maison2.png
background_opacity: 0.6
north:
show: true
offset: 0
east:
show: true
west:
show: true
south:
show: true
card_mod:
style: |
ha-card > div.header > div.name > span {
font-size: 14px;
font-weight: bold;
border: none;
}
ha-card {
margin-top: -13px;
border: none;
}
- type: vertical-stack
cards:
- type: custom:horizon-card
moon: true
fields:
azimuth: true
elevation: true
moonrise: true
moonset: true
moon_phase: false
time_format: 24
card_mod:
style: |
ha-card {
border: none;
}
:host {
--hc-lines: grey !important;
--hc-sun-color: orange !important;
}
.horizon-card {
padding: 0.1em !important;
}
.horizon-card-header {
margin-top: 3px !important;
}
.horizon-card-graph {
margin: 0.5em 0.1em -1em 0.1em !important;
}
.horizon-card-footer {
margin-bottom: 15px !important;
}
.horizon-card-footer > * {
margin-top: 5px !important;
}
.horizon-card-field-name {
font-size: 1rem !important;
color: rgb(68, 115, 158) !important;
}
.horizon-card-field-value {
font-size: 0.9rem !important;
}
- type: horizontal-stack
cards:
- type: custom:compass-card
indicator_sensors:
- sensor: sensor.blitzortung_lightning_azimuth
indicator:
type: arrow_outward
color: orange
show: false
dynamic_style:
sensor: sensor.blitzortung_lightning_distance
bands:
- from_value: 1
show: true
value_sensors:
- sensor: sensor.blitzortung_lightning_distance
- sensor: sensor.blitzortung_lightning_counter
header:
title:
value: Éclair
color: '#44739e'
icon:
color: green
dynamic_style:
sensor: sensor.blitzortung_lightning_counter
bands:
- from_value: 30
color: yellow
- from_value: 100
color: orange
- from_value: 200
color: red
- from_value: 400
color: purple
compass:
circle:
background_image: \local\images\maison2.png
background_opacity: 0.6
north:
show: true
east:
show: true
west:
show: true
south:
show: true
language: fr
card_mod:
style: |
.sensor-1 {
line-height: 18px;
}
.sensor-1 .value {
font-size: 18px !important;
}
.sensor-0 .value {
{% if is_state('sensor.blitzortung_lightning_distance', 'unknown') %}
font-size: 20px !important;
{% else %}
font-size: 26px !important;
{% endif %}
}
ha-card {
margin-top: -16px;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.blitzortung_lightning_counter
name: Compteur d'éclair
- entity: sensor.compteur_eclair_mensuel
name: Compteur d'éclair Mensuelle
icon: mdi:flash-alert
direction: up
height: 188px
width: 71px
columns: 2
stack: horizontal
positions:
indicator: 'off'
icon: 'off'
severity:
- color: Green
from: 0
to: 30
- color: yellow
from: 31
to: 99
- color: Orange
from: 100
to: 199
- color: Red
from: 200
to: 400
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 50px;
} #states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 12px;
} bar-card-name {
margin-top: 13px;
margin-left: 8px;
} ha-card {
margin: -16px 16px 16px 16px;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: custom:mod-card
card_mod:
style:
.: |
ha-card {
border: none;
}
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
top: -30px;
border: none;
}
card:
type: custom:text-divider-row
text: CYCLES
align: left
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
entity: sensor.lune
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 23%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
border: none;
}
- type: custom:button-card
entity: sun.sun
name: Soleil
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 36%
state_display: |
[[[
if (entity.state === 'below_horizon') return "Sous l'horizon";
else return "Au-dessus de l'horizon";
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
border: none;
}
- type: custom:button-card
entity: sensor.season
name: Saison
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 28%
state_display: |
[[[
if (entity.state === 'summer') return 'été';
if (entity.state === 'winter') return 'Hiver';
if (entity.state === 'autumn') return 'Automne';
else return 'Printemps';
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
border: none;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
margin-top: -50px;
border: none;
}
card:
type: custom:text-divider-row
text: POLLENS
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -30px -5px 0px -5px;
border: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pollens_07
name: 'Pollens Ardèche:'
icon: mdi:alert-decagram-outline
layout: icon_name_state2nd
color_type: icon
show_name: true
show_state: true
state:
- value: nul
operator: '=='
color: black
icon: mdi:decagram-outline
styles:
state:
- color: black
- value: faible
operator: '=='
color: green
icon: mdi:check-decagram-outline
styles:
state:
- color: green
- value: moyen
operator: '=='
color: rgb(242,234,26)
icon: mdi:alert-decagram-outline
styles:
state:
- color: rgb(242,234,26)
- value: élevé
operator: '=='
color: red
icon: mdi:alert-decagram
styles:
state:
- color: red
size: 50%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 16px
state:
- font-weight: bold
- font-size: 16px
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.pollens_07_risklevel
name: Risque Pollen
icon: mdi:alert-circle
height: 47px
color: red
min: 0
max: 3
positions:
indicator: 'off'
icon: 'off'
severity:
- color: Red
from: 2
to: 3
- color: rgb(242,234,26)
from: 1
to: 2
- color: Green
from: 0
to: 1
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: none;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 16px;
color: white;
} ha-card {
margin-top: -2px;
background: none;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: conditional
conditions:
- entity: sensor.pollens_07
state_not: nul
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 5px 5px 5px 5px;
border: none;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 5
square: false
card_param: cards
filter:
include:
- entity_id: sensor.pollens_07_*
options:
type: custom:button-card
color_type: icon
aspect_ratio: 1/1
show_name: true
show_state: true
name: |
[[[
return entity.attributes.pollen_name + ":"
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
name:
- font-size: 14px
state:
- font-weight: bold
- font-size: 12px
state:
- value: faible
operator: '=='
color: green
styles:
card:
- box-shadow: 0px 0px 0px 2px green
state:
- color: green
- value: moyen
operator: '=='
color: rgb(242,234,26)
styles:
card:
- box-shadow: 0px 0px 0px 2px rgb(242,234,26)
state:
- color: rgb(242,234,26)
- value: élevé
operator: '=='
color: red
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
size: 50%
exclude:
- entity_id: sensor.pollens_07_*
state: nul
- entity_id: sensor.pollens_07
- entity_id: sensor.pollens_07_risklevel
sort:
method: name
reverse: false
- type: custom:mod-card
card_mod:
style:
.: |
ha-card {
border: none;
}
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
card:
type: custom:text-divider-row
text: SÉCHERESSE
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -17px -5px 0px -5px;
border: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.alert_level_in_les_assions
name: 'Vigieau Les Assions:'
layout: icon_name_state2nd
color_type: icon
show_name: true
show_state: true
state:
- value: Vigilance
operator: '=='
color: green
icon: mdi:water-check
styles:
state:
- color: green
- value: Alerte
operator: '=='
color: yellow
icon: mdi:water-alert
styles:
state:
- color: yellow
- value: Alerte renforcée
operator: '=='
color: orange
icon: mdi:water-remove
styles:
state:
- color: orange
- value: Crise
operator: '=='
color: red
icon: mdi:water-off
styles:
state:
- color: red
size: 60%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 15px
state:
- font-weight: bold
- font-size: 15px
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.alert_level_in_les_assions
name: Niveau
icon: mdi:alert-circle
height: 47px
color: red
positions:
indicator: 'off'
icon: 'off'
severity:
- text: Vigilance
color: green
- text: Alerte
color: yellow
- text: Alerte renforcée
color: orange
- text: Crise
color: red
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: none;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 16px;
color: white;
} ha-card {
margin-top: -2px;
background: none;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: conditional
conditions:
- entity: sensor.alert_level_in_les_assions
state_not: Vigilance
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 5px 5px 5px 5px;
border: none;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 5
square: false
card_param: cards
filter:
include:
- entity_id: sensor.*_restrictions_les_assions
options:
type: custom:button-card
color_type: icon
aspect_ratio: 1/1
show_name: true
show_state: true
name: |
[[[
return entity.attributes.friendly_name
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
name:
- font-size: 11px
- white-space: normal
state:
- font-weight: bold
- font-size: 10px
- white-space: normal
state:
- value: Aucune restriction
operator: '=='
color: green
styles:
card:
- box-shadow: 0px 0px 0px 2px green
state:
- color: green
- value: Interdiction sauf exception
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
- value: Interdiction
operator: '=='
color: red
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
- value: Interdiction sur plage horaire
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
size: 50%
exclude:
- entity_id: sensor.*_restrictions_les_assions
state: Aucune restriction
sort:
method: name
reverse: false
- type: custom:popup-card
entity: sensor.lune
style: |-
--popup-border-radius: 15px;
--popup-background-color: transparent;
--popup-border-width: 0px;
card:
type: picture-elements
image: /local/images/phases-lunaires.jpg
elements:
- type: conditional
conditions:
- entity: sensor.lune
state: new_moon
elements:
- type: image
image: /local/images/circle.png
style:
top: 50%
left: 54%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waxing_crescent
elements:
- type: image
image: /local/images/circle.png
style:
top: 30%
left: 50%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: first_quarter
elements:
- type: image
image: /local/images/circle.png
style:
top: 24%
left: 36%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waxing_gibbous
elements:
- type: image
image: /local/images/circle.png
style:
top: 31%
left: 23.3%
width: 12%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: full_moon
elements:
- type: image
image: /local/images/circle.png
style:
top: 50%
left: 17.7%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waning_gibbous
elements:
- type: image
image: /local/images/circle.png
style:
top: 70%
left: 23.5%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: last_quarter
elements:
- type: image
image: /local/images/circle.png
style:
top: 77%
left: 36%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waning_crescent
elements:
- type: image
image: /local/images/circle.png
style:
top: 70%
left: 50%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
border: none;
}
Je remercie par avance celui qui pourra m’aider
C’est nommé comme ça chez moi par défaut. L’intégration a peut-être modifié le nom depuis 1 ans.
Rajoute - border: none dans styles et card du button-card, pour les 3 button-card du cycle.
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border: none
Code corrigé, un problème dindexion :
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: horizontal-stack
cards:
- type: custom:compass-card
language: fr
header:
title:
value: SOLEIL
color: '#44739e'
icon:
color: green
dynamic_style:
sensor: sensor.assions_uv
bands:
- from_value: 1
color: green
- from_value: 4
color: yellow
- from_value: 7
color: orange
- from_value: 9
color: red
- from_value: 12
color: purple
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
state_abbreviation:
show: true
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\maison2.png
background_opacity: 0.6
north:
show: true
offset: 0
east:
show: true
west:
show: true
south:
show: true
card_mod:
style: |
ha-card > div.header > div.name > span {
font-size: 14px;
font-weight: bold;
border: none;
}
ha-card {
margin-top: -13px;
border: none;
}
- type: vertical-stack
cards:
- type: custom:horizon-card
moon: true
fields:
azimuth: true
elevation: true
moonrise: true
moonset: true
moon_phase: false
time_format: 24
card_mod:
style: |
ha-card {
border: none;
}
:host {
--hc-lines: grey !important;
--hc-sun-color: orange !important;
}
.horizon-card {
padding: 0.1em !important;
}
.horizon-card-header {
margin-top: 3px !important;
}
.horizon-card-graph {
margin: 0.5em 0.1em -1em 0.1em !important;
}
.horizon-card-footer {
margin-bottom: 15px !important;
}
.horizon-card-footer > * {
margin-top: 5px !important;
}
.horizon-card-field-name {
font-size: 1rem !important;
color: rgb(68, 115, 158) !important;
}
.horizon-card-field-value {
font-size: 0.9rem !important;
}
- type: horizontal-stack
cards:
- type: custom:compass-card
indicator_sensors:
- sensor: sensor.blitzortung_lightning_azimuth
indicator:
type: arrow_outward
color: orange
show: false
dynamic_style:
sensor: sensor.blitzortung_lightning_distance
bands:
- from_value: 1
show: true
value_sensors:
- sensor: sensor.blitzortung_lightning_distance
- sensor: sensor.blitzortung_lightning_counter
header:
title:
value: Éclair
color: '#44739e'
icon:
color: green
dynamic_style:
sensor: sensor.blitzortung_lightning_counter
bands:
- from_value: 30
color: yellow
- from_value: 100
color: orange
- from_value: 200
color: red
- from_value: 400
color: purple
compass:
circle:
background_image: \local\images\maison2.png
background_opacity: 0.6
north:
show: true
east:
show: true
west:
show: true
south:
show: true
language: fr
card_mod:
style: |
.sensor-1 {
line-height: 18px;
}
.sensor-1 .value {
font-size: 18px !important;
}
.sensor-0 .value {
{% if is_state('sensor.blitzortung_lightning_distance', 'unknown') %}
font-size: 20px !important;
{% else %}
font-size: 26px !important;
{% endif %}
}
ha-card {
margin-top: -16px;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.blitzortung_lightning_counter
name: Compteur d'éclair
- entity: sensor.compteur_eclair_mensuel
name: Compteur d'éclair Mensuelle
icon: mdi:flash-alert
direction: up
height: 188px
width: 71px
columns: 2
stack: horizontal
positions:
indicator: 'off'
icon: 'off'
severity:
- color: Green
from: 0
to: 30
- color: yellow
from: 31
to: 99
- color: Orange
from: 100
to: 199
- color: Red
from: 200
to: 400
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 50px;
} #states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 12px;
} bar-card-name {
margin-top: 13px;
margin-left: 8px;
} ha-card {
margin: -16px 16px 16px 16px;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
top: -30px;
}
card:
type: custom:text-divider-row
text: CYCLES
align: left
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
entity: sensor.lune
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 23%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
}
- type: custom:button-card
entity: sun.sun
name: Soleil
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 36%
state_display: |
[[[
if (entity.state === 'below_horizon') return "Sous l'horizon";
else return "Au-dessus de l'horizon";
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
}
- type: custom:button-card
entity: sensor.season
name: Saison
show_state: true
show_icon: false
show_entity_picture: true
aspect_ratio: 1.5/1
size: 28%
state_display: |
[[[
if (entity.state === 'summer') return 'été';
if (entity.state === 'winter') return 'Hiver';
if (entity.state === 'autumn') return 'Automne';
else return 'Printemps';
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
state:
- font-size: 13px
card_mod:
style: |
ha-card {
margin-top: -45px
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
margin-top: -50px;
border: none;
}
card:
type: custom:text-divider-row
text: POLLENS
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -30px -5px 0px -5px;
border: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pollens_07
name: 'Pollens Ardèche:'
icon: mdi:alert-decagram-outline
layout: icon_name_state2nd
color_type: icon
show_name: true
show_state: true
state:
- value: nul
operator: '=='
color: black
icon: mdi:decagram-outline
styles:
state:
- color: black
- value: faible
operator: '=='
color: green
icon: mdi:check-decagram-outline
styles:
state:
- color: green
- value: moyen
operator: '=='
color: rgb(242,234,26)
icon: mdi:alert-decagram-outline
styles:
state:
- color: rgb(242,234,26)
- value: élevé
operator: '=='
color: red
icon: mdi:alert-decagram
styles:
state:
- color: red
size: 50%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 16px
state:
- font-weight: bold
- font-size: 16px
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.pollens_07_risklevel
name: Risque Pollen
icon: mdi:alert-circle
height: 47px
color: red
min: 0
max: 3
positions:
indicator: 'off'
icon: 'off'
severity:
- color: Red
from: 2
to: 3
- color: rgb(242,234,26)
from: 1
to: 2
- color: Green
from: 0
to: 1
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: none;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 16px;
color: white;
} ha-card {
margin-top: -2px;
background: none;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: conditional
conditions:
- entity: sensor.pollens_07
state_not: nul
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 5px 5px 5px 5px;
border: none;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 5
square: false
card_param: cards
filter:
include:
- entity_id: sensor.pollens_07_*
options:
type: custom:button-card
color_type: icon
aspect_ratio: 1/1
show_name: true
show_state: true
name: |
[[[
return entity.attributes.pollen_name + ":"
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
name:
- font-size: 14px
state:
- font-weight: bold
- font-size: 12px
state:
- value: faible
operator: '=='
color: green
styles:
card:
- box-shadow: 0px 0px 0px 2px green
state:
- color: green
- value: moyen
operator: '=='
color: rgb(242,234,26)
styles:
card:
- box-shadow: 0px 0px 0px 2px rgb(242,234,26)
state:
- color: rgb(242,234,26)
- value: élevé
operator: '=='
color: red
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
size: 50%
exclude:
- entity_id: sensor.pollens_07_*
state: nul
- entity_id: sensor.pollens_07
- entity_id: sensor.pollens_07_risklevel
sort:
method: name
reverse: false
- type: custom:mod-card
card_mod:
style:
.: |
ha-card {
border: none;
}
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
card:
type: custom:text-divider-row
text: SÉCHERESSE
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -17px -5px 0px -5px;
border: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.alert_level_in_les_assions
name: 'Vigieau Les Assions:'
layout: icon_name_state2nd
color_type: icon
show_name: true
show_state: true
state:
- value: Vigilance
operator: '=='
color: green
icon: mdi:water-check
styles:
state:
- color: green
- value: Alerte
operator: '=='
color: yellow
icon: mdi:water-alert
styles:
state:
- color: yellow
- value: Alerte renforcée
operator: '=='
color: orange
icon: mdi:water-remove
styles:
state:
- color: orange
- value: Crise
operator: '=='
color: red
icon: mdi:water-off
styles:
state:
- color: red
size: 60%
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 15px
state:
- font-weight: bold
- font-size: 15px
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.alert_level_in_les_assions
name: Niveau
icon: mdi:alert-circle
height: 47px
color: red
positions:
indicator: 'off'
icon: 'off'
severity:
- text: Vigilance
color: green
- text: Alerte
color: yellow
- text: Alerte renforcée
color: orange
- text: Crise
color: red
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
border: none;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 16px;
color: white;
} ha-card {
margin-top: -2px;
background: none;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
- type: conditional
conditions:
- entity: sensor.alert_level_in_les_assions
state_not: Vigilance
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 5px 5px 5px 5px;
border: none;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 5
square: false
card_param: cards
filter:
include:
- entity_id: sensor.*_restrictions_les_assions
options:
type: custom:button-card
color_type: icon
aspect_ratio: 1/1
show_name: true
show_state: true
name: |
[[[
return entity.attributes.friendly_name
]]]
styles:
card:
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- border-radius: 8px
name:
- font-size: 11px
- white-space: normal
state:
- font-weight: bold
- font-size: 10px
- white-space: normal
state:
- value: Aucune restriction
operator: '=='
color: green
styles:
card:
- box-shadow: 0px 0px 0px 2px green
state:
- color: green
- value: Interdiction sauf exception
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
- value: Interdiction
operator: '=='
color: red
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
- value: Interdiction sur plage horaire
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
size: 50%
exclude:
- entity_id: sensor.*_restrictions_les_assions
state: Aucune restriction
sort:
method: name
reverse: false
- type: custom:popup-card
entity: sensor.lune
style: |-
--popup-border-radius: 15px;
--popup-background-color: transparent;
--popup-border-width: 0px;
card:
type: picture-elements
image: /local/images/phases-lunaires.jpg
elements:
- type: conditional
conditions:
- entity: sensor.lune
state: new_moon
elements:
- type: image
image: /local/images/circle.png
style:
top: 50%
left: 54%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waxing_crescent
elements:
- type: image
image: /local/images/circle.png
style:
top: 30%
left: 50%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: first_quarter
elements:
- type: image
image: /local/images/circle.png
style:
top: 24%
left: 36%
width: 11%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waxing_gibbous
elements:
- type: image
image: /local/images/circle.png
style:
top: 31%
left: 23.3%
width: 12%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: full_moon
elements:
- type: image
image: /local/images/circle.png
style:
top: 50%
left: 17.7%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waning_gibbous
elements:
- type: image
image: /local/images/circle.png
style:
top: 70%
left: 23.5%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: last_quarter
elements:
- type: image
image: /local/images/circle.png
style:
top: 77%
left: 36%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
- type: conditional
conditions:
- entity: sensor.lune
state: waning_crescent
elements:
- type: image
image: /local/images/circle.png
style:
top: 70%
left: 50%
width: 11.5%
border: 2px solid yellow
border-radius: 50%
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
border: none;
}
C’est les noms des alertes qui sont plus avec une majuscule. Au début il y avait des majuscules, puis sans majuscule, puis la majuscule est revenu et maintenant plus de masjuscule. C’est a cause de vigeau.
Faut enelever la majuscule du début et mettre une minuscule a la place:
Vigilance passe en vigilance…
state:
- value: vigilance
operator: '=='
color: green
icon: mdi:water-check
styles:
state:
- color: green
- value: alerte
operator: '=='
color: yellow
icon: mdi:water-alert
styles:
state:
- color: yellow
- value: alerte renforcée
operator: '=='
color: orange
icon: mdi:water-remove
styles:
state:
- color: orange
- value: crise
operator: '=='
color: red
icon: mdi:water-off
styles:
state:
- color: red
severity:
- text: vigilance
color: green
- text: alerte
color: yellow
- text: alerte renforcée
color: orange
- text: crise
color: red
Il y a peux être les noms des restrictions qui ont changer aussi, a verifier. ( c’est chiant, ca change souvent )
state:
- value: Aucune restriction
operator: '=='
color: green
styles:
card:
- box-shadow: 0px 0px 0px 2px green
state:
- color: green
- value: Sensibiliser les usagers
operator: '=='
color: green
styles:
card:
- box-shadow: 0px 0px 0px 2px green
state:
- color: green
- value: Interdiction sauf exception
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
- value: Interdiction
operator: '=='
color: red
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
- value: Interdiction sur plage horaire
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
- value: Réduction de prélèvement
operator: '=='
color: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
- value: >-
Interdiction totale sauf impératifs sanitaires et
sécuritaires
operator: '=='
color: red
state_display: Interdiction totale
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
- value: >-
Mesures définies à l’article 10 de l’arrêté préfectoral
portant définition d'un plan d'action sécheresse dans le
département de l’Aude
operator: '=='
color: red
state_display: Mesures définies
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
1 « J'aime »