encor moi et mes probleme de carte
je n’arive pas a recadre c’est qui est entourée en noir.
Pour les deux bars des éclairs, dans la partie card-mod, recherche ces lignes.
Modifie le -16px , teste a -30px, -40px, -50px … jusqu’a trouver le bon cadrage pour toi.
ha-card {
margin: -16px 16px 16px 16px;
}
Pour le baromètre, je ne sais pas.
1 « J'aime »
Bonjour,
@WarC0zes :
J’ai à priori j’ai installé toutes les intégrations necessaires, images …
j’ai copier ton code corrigé les problèmes d’indentations automatiques éronnée, remplacé les xxx par mes noms de capteurs mais j’obtiens ça et je ne sais pas ce qui va pas car pas de message d’erreurs :
et poutant j’ai déja ça qui fonctionne :
Est-ce que tu peux m’orienter ? ce que je peux faire comme vérifications ?
mon code complet ci-dessous
- 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: true
margin: true
border_radius: true
background: true
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.montataire
number_of_forecasts: '7'
forecast: true
alert_forecast: true
cloudCoverEntity: sensor.montataire_cloud_cover_cloud_cover
rainChanceEntity: sensor.montataire_rain_chance
freezeChanceEntity: sensor.montataire_freeze_chance
snowChanceEntity: sensor.montataire_snow_chance
uvEntity: sensor.montataire_uv
detailEntity: sensor.montataire_wind_speed
alertEntity: sensor.meteo_france_alertes_60
name: Montataire
static_icons: false
wind_forecast_icons: true
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
top: -15px;
background: none;
}
- type: vertical-stack
cards:
- type: custom:meteofrance-weather-card
entity: weather.pas_de_la_case
number_of_forecasts: '7'
forecast: true
alert_forecast: true
rainChanceEntity: sensor.pas_de_la_case_rain_chance
uvEntity: sensor.pas_de_la_case_uv
cloudCoverEntity: sensor.pas_de_la_case_cloud_cover
freezeChanceEntity: sensor.pas_de_la_case_freeze_chance
snowChanceEntity: sensor.pas_de_la_case_snow_chance
alertEntity: sensor.meteo_alerte_99
detailEntity: sensor.pas_de_la_case_daily_precipitation
name: Pas de la Case
static_icons: false
wind_forecast_icons: true
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
top: -15px;
background: 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: -25px;
background: transparent;
}
card:
type: custom:text-divider-row
text: Prévisions Jours
align: left
- type: custom:meteofrance-weather-card
number_of_forecasts: '7'
entity: weather.creil
alert_forecast: false
details: false
current: false
forecast: true
one_hour_forecast: true
static_icons: false
card_mod:
style: |
ha-card {
top: -20px;
height: 135px;
background: transparent;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
margin-top: -22px;
background: transparent;
}
card:
type: custom:text-divider-row
text: Prévisions Montataire Jours
align: left
- type: custom:meteofrance-weather-card
number_of_forecasts: '7'
entity: weather.creil
alert_forecast: false
details: false
current: false
forecast: true
one_hour_forecast: true
static_icons: false
card_mod:
style: |
ha-card {
top: -20px;
height: 135px;
background: transparent;
}
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
}
- 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.montataire
attribute: pressure
title: Baromètre Montataire
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;
}
- type: vertical-stack
cards:
- type: custom:compass-card
indicator_sensors:
- sensor: weather.montataire
attribute: wind_bearing
indicator:
type: arrow_inward
show: false
dynamic_style:
sensor: weather.montataire
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.montataire_wind_speed
bands:
- from_value: 25
color: yellow
- from_value: 45
color: orange
- from_value: 65
color: red
value_sensors:
- sensor: weather.montataire
attribute: wind_speed
units: Km
compass:
circle:
background_image: \local\images\xavmontataire.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;
}
- type: horizontal-stack
cards:
- type: custom:rain-gauge-card
name: ' '
language: fr
entity: sensor.montataire_daily_precipitation
is_imperial: false
border_colour: '#44739e'
max_level: 30mm
show_warning: false
show_error: false
card_mod:
style: |
#logo {
width: 70%;
}
ha-card {
margin: -30px 0px -5px 0px;
background: transparent;
}
- type: custom:uv-index-card
entity: sensor.montataire_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;
}
- 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;
}
- 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;
}
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
top: -20px;
}
card:
type: custom:text-divider-row
text: CARTES
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -70px 5px -23px 5px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: camera.mf_alerte_today
name: Alerte météo <br/>Aujourd'hui
show_icon: false
show_entity_picture: true
aspect_ratio: 1/1
size: 100%
styles:
card:
- '--mdc-ripple-color': none
- padding: 15%
card_mod:
style: |
ha-card {
border: none;
background: transparent;
}
- type: custom:button-card
entity: camera.mf_alerte_tomorrow
name: Alerte météo <br/>Demain
aspect_ratio: 1/1
show_icon: false
show_entity_picture: true
size: 100%
styles:
card:
- '--mdc-ripple-color': none
- padding: 15%
card_mod:
style: |
ha-card {
border: none;
background: transparent;
}
- 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=43.225&lon=2.666&detailLat=43.227&detailLon=2.596&width=650&height=450&zoom=8&level=surface&overlay=wind&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;
}
- 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.montataire_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\xavmontataire.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;
}
- 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\xavmontataire.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;
}
- 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;
} 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;
}
card:
type: custom:text-divider-row
text: POLLENS
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -30px -5px 0px -5px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pollens_60
name: 'Pollens Montataire:'
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_60_risklevel
name: Risque Pollen
icon: mdi:alert-circle
height: 47px
color: red
min: 0
max: 4
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;
}
#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_60
state_not: nul
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.pollens_60_*
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_60_*
state: nul
- entity_id: sensor.pollens_60
- entity_id: sensor.pollens_60_risklevel
sort:
method: name
reverse: false
- 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 Montataire:'
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;
}
Bonjour,
le code que je partage est une page complète ( un onglet météo ). Faut le mettre avec l’éditeur de configuration.
il y a deux espace au début de - theme: Backend-selected, comparé a ton code montrer ci dessus.
- theme: Backend-selected
A voir ta capture décran, tu le copie directe dans l’editeur de carte et ca fonctionnera pas.
A toi , de prendre les cartes qui t"intéresse dans le code complet.
1 « J'aime »
MERCI !
Eh beh, j’ai encore énormement de chose à apprendre et comprendre avant de « Voler de mes propres ailes » 
Effectivement, ça fonctionne mieux quand on comprend ce qu’on fait 
Cordialement
Pour info, avec la nouvelle version d’home assistant de septembre ( qui est dispo qu’en beta pour l’instant) , l’integration métèo france évolue et il y a aura plus besoin d’utiliser une ville proche pour avoir les infos hourly & daily :
Météo-France now provides a single weather entity which supports both hourly and daily forecast.
1 « J'aime »
J’ai vu ca dans le breaking change:
The Météo-France weather entities have been updated:
- The
forecaststate attribute is deprecated and will be removed in Home Assistant Core 2024.3, you should instead use theweather.get_forecastservice. - The config entry option to select hourly or daily forecast can no longer be adjusted, but any existing configuration of the forecast period will be respected until Home Assistant Core 2024.3.
- Météo-France now provides a single weather entity which supports both hourly and daily forecast.
@ morinxav Salut, tu utilises quoi comme carte pour tes graphs (apexchart ?) ?. Merci.
Merci WarC0zes, ça n’a pas l’air de fonctionner pour toutes les entités par contre, j’ai un choix limité d’entities utilisables à la configuration de la carte.
Bonjour,
Statistic-graph et history-graph
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: history-graph
entities:
- entity: sensor.montataire_daily_precipitation
hours_to_show: 200
- chart_type: line
period: day
days_to_show: 30
type: statistics-graph
entities:
- sensor.montataire_temperature
stat_types:
- mean
- min
- max
hide_legend: false
CordialesmentBonjour, c’est normal que l’on soit en automne ? 
Cordialement
1 « J'aime »
Oui, quand on configure mal le sensor saison
1 « J'aime »
Bonsoir,
Je cherche du coup, comment et où changer ma config ?
Cordialement
on en a parlé pas plus tard qu’hier…
[C’est déjà l’automne? - Entraide Home Assistant - Home Assistant Communauté Francophone (hacf.fr)](C'est déjà l'automne?)
Bon je l’ai supprimé et recréé et là, j’ai pu choisir la bonne config.
Cordialement
Salut j’ai un petit soucis qui a mon avis n’es rien pour toi @WarC0zes , voilà.
Comme tu peut voire, un coup sur deux le cercle est vue.
Salut,
Bizarre ton soucis.
Quand la carte compass est visible, l’entité azimut a un contour gris. Mais quand la carte compass est pas visible, l’entité azimut n’a pas de contour.
Montre le code de la carte compass et l’entité azimut.
type: custom:stack-in-card
mode: vertical
cards:
- 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: Suivi du soleil
align: left
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
border-width: 0px !important;
}
cards:
- type: custom:compass-card
language: fr
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
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: falsetrue
offset: 0
east:
show: true
west:
show: true
south:
show: true
- type: markdown
content: >
<center>Azimuth: {{ state_attr('sun.sun', 'azimuth')
}}°</center>
- type: custom:horizon-card
card_mod:
style: |
.sun-card-footer .sun-card-text-subtitle {
font-size: 1rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-header .sun-card-text-subtitle {
font-size: 1rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-header .sun-card-text-time {
font-size: 1.1rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-footer .sun-card-text-time {
font-size: 1.1rem !important;
color: var(--primary-text-color) !important;
}
ha-card {
border-width: 0px !important;
}
ha-card {
border: none;
}
- type: custom:mod-card
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
card:
type: custom:text-divider-row
text: Cycles
align: left
- type: glance
entities:
- entity: sensor.moon_phase
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 35px !important;
width: 35px !important;
margin: 21%;
}
- entity: sun.sun
name: Soleil
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 80px !important;
width: 80px !important;
}
- entity: sensor.season
name: Saison
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 37px !important;
width: 37px !important;
margin: 20%;
}
state_color: false
show_name: true
show_state: true
style: |
ha-card {
--paper-item-icon-color: #44739e;
--ha-card-header-color: #44739e;
--ha-card-header-font-size: 17px;
--mdc-icon-size: 39px;
font-size: 14px;
border-width: 0px !important;
}
j’ai modifier:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
border-width: 0px !important;
}
en
- type: vertical-stack
et j’ai mis le card_mod pour enlever le bordure a la carte markdown:
- type: markdown
content: >
<center>Azimuth: {{ state_attr('sun.sun', 'azimuth')
}}°</center>
card_mod:
style: |
ha-card {
border-width: 0px !important;
}
Code complet a tester:
type: custom:stack-in-card
mode: vertical
cards:
- 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: Suivi du soleil
align: left
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:compass-card
language: fr
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
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: falsetrue
offset: 0
east:
show: true
west:
show: true
south:
show: true
- type: markdown
content: >
<center>Azimuth: {{ state_attr('sun.sun', 'azimuth')
}}°</center>
card_mod:
style: |
ha-card {
border-width: 0px !important;
}
- type: custom:horizon-card
card_mod:
style: |
.sun-card-footer .sun-card-text-subtitle {
font-size: 1rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-header .sun-card-text-subtitle {
font-size: 1rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-header .sun-card-text-time {
font-size: 1.1rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-footer .sun-card-text-time {
font-size: 1.1rem !important;
color: var(--primary-text-color) !important;
}
ha-card {
border-width: 0px !important;
}
ha-card {
border: none;
}
- type: custom:mod-card
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
card:
type: custom:text-divider-row
text: Cycles
align: left
- type: glance
entities:
- entity: sensor.moon_phase
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 35px !important;
width: 35px !important;
margin: 21%;
}
- entity: sun.sun
name: Soleil
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 80px !important;
width: 80px !important;
}
- entity: sensor.season
name: Saison
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 37px !important;
width: 37px !important;
margin: 20%;
}
state_color: false
show_name: true
show_state: true
style: |
ha-card {
--paper-item-icon-color: #44739e;
--ha-card-header-color: #44739e;
--ha-card-header-font-size: 17px;
--mdc-icon-size: 39px;
font-size: 14px;
border-width: 0px !important;
}