Bonjour,
j’ai un message d’erreur quand je copie la carte météo de notre ami @WarC0zes
super, ca marche presque !!! manque que le fond !!! (pourtant le fichier /local/images/wallpaper-meteo.jpg y est: )
~ $ ls -ltr /config/www/images
total 732
-rw-rw-rw- 1 root root 11195 Mar 20 12:52 circle.png
-rw-rw-rw- 1 root root 144262 Mar 20 18:09 maison22.png
-rw-rw-rw- 1 root root 75154 Mar 26 17:26 wallpaper-meteo.jpg
-rw-rw-rw- 1 root root 64699 Mar 26 17:27 phases-lunaires.jpg
~ $
Edit: j’ai effacé tous les fichiers en cache, c’est OK pour les images
et une seconde plus tard, paf le bug
pourtant j’ai retiré et remis le sun card et le horizon-card, rebooté le pc et HA… rien n’y fait…
Voilà l’editeur de configuration de la page Météo que j’ai faite:
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
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:mod-card
card_mod:
style:
tabbed-card:
$: |
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, gray) );
border-color: gray;
border-width: 1px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
section article > * {
--ha-card-border-radius: 0px 0px 12px 12px;
}
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': '#44739e'
'--mdc-tab-text-label-color-default': gray
tabs:
- card:
type: custom:meteofrance-weather-card
entity: weather.boulogne_billancourt
name: boulogne_billancourt
alertEntity: sensor.92_weather_alert
detailEntity: sensor.boulogne_billancourt_rain_chance
cloudCoverEntity: sensor.boulogne_billancourt_cloud_cover
rainChanceEntity: sensor.boulogne_billancourt_rain_chance
freezeChanceEntity: sensor.boulogne_billancourt_freeze_chance
snowChanceEntity: sensor.boulogne_billancourt_snow_chance
uvEntity: sensor.boulogne_billancourt_uv
number_of_daily_forecasts: '0'
number_of_hourly_forecasts: '7'
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
top: -15px;
background: none;
}
attributes:
label: boulogne_billancourt
icon: mdi:weather-partly-cloudy
minWidth: true
isMinWidthIndicator: true
- card:
type: custom:meteofrance-weather-card
entity: weather.heric
name: Héric
alertEntity: sensor.44_weather_alert
detailEntity: sensor.heric_humidity
cloudCoverEntity: sensor.heric_cloud_cover
rainChanceEntity: sensor.heric_rain_chance
freezeChanceEntity: sensor.heric_freeze_chance
snowChanceEntity: sensor.heric_snow_chance
uvEntity: sensor.heric_uv
number_of_hourly_forecasts: '7'
number_of_daily_forecasts: '0'
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
top: -15px;
background: none;
}
attributes:
label: Héric
icon: mdi:weather-partly-cloudy
minWidth: true
isMinWidthIndicator: true
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
margin-top: -32px;
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.boulogne_billancourt
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: -30px;
background: transparent;
}
card:
type: custom:text-divider-row
text: Prévisions boulogne_billancourt Jours
align: left
- type: custom:meteofrance-weather-card
number_of_forecasts: '7'
entity: weather.boulogne_billancourt
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: sensor.boulogne_billancourt_pressure
title: Baromètre Boulogne Billancourt
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.boulogne_billancourt
attribute: wind_bearing
indicator:
type: arrow_inward
header:
title:
value: VENT
color: '#44739e'
value_sensors:
- sensor: sensor.boulogne_billancourt_wind_speed
compass:
circle:
background_image: \local\images\maison22.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: markdown
content: >
<center>Ouest <ha-icon
icon="mdi:home-thermometer-outline"></ha-icon> {{
states("sensor.atc_ext_ouest_temperature") |
round(1)}}°C</center> <center>Est <ha-icon
icon="mdi:home-thermometer"></ha-icon> {{
states("sensor.atc_romain_9d23_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.atc_ext_ouest_humidity") | round(0)
}}%</center> <center><ha-icon
icon="mdi:water-percent"></ha-icon> {{
states("sensor.atc_romain_9d23_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: horizontal-stack
cards:
- type: custom:rain-gauge-card
name: ' '
language: fr
entity: sensor.boulogne_billancourt_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: -35px 0px -5px 0px;
background: transparent;
}
- type: custom:uv-index-card
entity: sensor.boulogne_billancourt_uv
language: fr
show_warning: false
show_error: false
name: ' '
card_mod:
style: |
ha-card {
margin: -55px 0px -5px 0px;
background: transparent;
}
ha-card > div > div:nth-child(1) > svg {
width: 80%;
margin-top: 21px;
}
- type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=48.837&lon=2.243&detailLat=48.837&detailLon=2.243&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: 80%
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: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:compass-card
language: fr
header:
title:
value: SOLEIL
color: '#44739e'
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
state_abbreviation:
show: false
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\maison22.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:sun-card
showAzimuth: true
showElevation: true
card_mod:
style: >
.sun-card-footer .sun-card-text-subtitle {
font-size: 0.91rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-header .sun-card-text-subtitle {
font-size: 0.91rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-header .sun-card-text-time {
font-size: 0.8rem !important;
color: var(--primary-text-color) !important;
}
.sun-card-footer .sun-card-text-time {
font-size: 0.8rem !important;
color: var(--primary-text-color) !important;
}
ha-card > div > div.sun-card-body {
padding-top: 0;
}
ha-card > div > div.sun-card-footer >
div:nth-child(1) {
padding-top: 0;
}
ha-card > div > div.sun-card-footer >
div:nth-child(2) {
padding-top: 0.5rem;
}
ha-card {
margin-top: -13px;
}
- 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: CYCLES
align: left
- type: glance
entities:
- entity: sensor.lune
card_mod:
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 35px !important;
width: 35px !important;
}
- entity: sun.sun
name: Soleil
card_mod:
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 55px !important;
width: 55px !important;
margin: -1%;
}
- entity: sensor.season
name: Saison
card_mod:
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
state-badge {
height: 37px !important;
width: 37px !important;
}
state_color: false
show_name: true
show_state: true
card_mod:
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;
height: 90px !important;
top: -35px
}
- 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: POLLENS
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -15px -5px 0px -5px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pollens_92
name: 'Pollens IdF:'
icon: mdi:alert-decagram-outline
layout: icon_name_state2nd
color_type: icon
show_name: true
show_state: true
state:
- value: faible
operator: '=='
color: green
styles:
state:
- color: green
- value: moyen
operator: '=='
color: orange
styles:
state:
- color: orange
- value: élevé
operator: '=='
color: red
styles:
state:
- color: red
size: 55%
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
- type: custom:bar-card
entities:
- entity: sensor.pollens_92_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: Orange
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;
font-weight: bold;
} ha-card {
margin-top: -2px;
background: none;
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -5px 5px 7px 5px;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 5
square: true
card_param: cards
filter:
include:
- entity_id: sensor.pollens_92_*
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: orange
styles:
card:
- box-shadow: 0px 0px 0px 2px orange
state:
- color: orange
- value: élevé
operator: '=='
color: red
styles:
card:
- box-shadow: 0px 0px 0px 2px red
state:
- color: red
size: 50%
exclude:
- entity_id: sensor.pollens_92_*
state: nul
- entity_id: sensor.pollens_92
- entity_id: sensor.pollens_92_risklevel
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;
}
