je dois avoir un bug avec chrome car sur l’application android et IOS ca fonctionne j’ai l’icone
Bonjour tout le monde !
J’ai bien galéré, mais j’ai réussi !
Donc avec HACS, j’ai rajouté:
button-card, Stack In Card, Text Divider Row, Vertical Stack In Card, card-mod, Compass Card, Sun Card Custom-ui et Lovelace Meteofrance Weather Card.
Il faut en plus avoir les intégrations Moon, Season et Sun (logique)
Pour les icônes, c’est très bien expliqué plus haut.
Voici mon code complet
type: custom:stack-in-card
title: Suivi du soleil
mode: vertical
cards:
- 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\home.png
background_opacity: 0.6
north:
show: true
offset: 0
east:
show: true
west:
show: true
south:
show: true
- type: markdown
content: >
<center>Azimuth: {{ state_attr('sun.sun', 'azimuth')
}}°</center>
- type: custom:sun-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;
}
- 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_phases
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;
}
Et on obtient ça:
Je vous propose également une combinaison sur la base de tous vos partages.
J’ai un peu joué aux apprentis sorcier avec les bordures, mais bon, ça passe …
Et le code, au cas ou …
type: custom:stack-in-card
title: Extérieur Maison
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
style: |
ha-card {
border-width: 0px !important;
}
cards:
- type: custom:compass-card
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/home/maison_allevard.jpeg
background_opacity: 0.5
north:
show: true
offset: -5
east:
show: true
west:
show: true
south:
show: true
- type: markdown
content: |
<center>Azimuth: {{ state_attr('sun.sun', 'azimuth') }}°</center>
style:
.: |
:host {
--border-width: 0px !important;
}
- type: custom:sun-card
name: Sun
meridiem: false
entities:
max_elevation: sun.sun
sunrise: sensor.sunrise
sunset: sensor.sunset
noon: sensor.solar_noon
moon_phase: sensor.moon_phase
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;
}
- type: custom:mod-card
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
--border-width: 0px !important;
}
card:
type: custom:text-divider-row
text: Ambiance extérieure
align: left
- type: glance
entities:
- entity: sensor.moon_phase
name: Lune
- entity: sun.sun
name: Soleil
- entity: sensor.season
name: Saison
- entity: sensor.capteur_exterieur_temperature
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;
}
- 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: Météo
align: left
- type: custom:mod-card
card:
style: |
ha-card {
border-width: 0px !important;
}
type: custom:meteofrance-weather-card
entity: weather.allevard
number_of_forecasts: '7'
name: Allevard
detailEntity: sensor.38_weather_alert
snowChanceEntity: sensor.allevard_snow_chance
uvEntity: sensor.allevard_uv
cloudCoverEntity: sensor.allevard_cloud_cover
freezeChanceEntity: sensor.allevard_freeze_chance
rainChanceEntity: sensor.allevard_rain_chance
alertEntity: sensor.38_weather_alert
details: true
alert_forecast: true
one_hour_forecast: true
forecast: true
current: true
- type: custom:mod-card
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
--border-width: 0px !important;
}
card:
type: custom:text-divider-row
text: Risque pollen
align: left
- type: custom:auto-entities
card:
type: grid
columns: 4
square: true
card_param: cards
filter:
include:
- entity_id: sensor.pollens_risks_*
options:
type: custom:button-card
color_type: icon
show_name: true
show_state: true
style: |
ha-card {
background: none;
box-shadow: #ccffcc;
border-width: 0px;
}
styles:
card:
- height: 100px
- width: 100px
name:
- font-size: 14px
state:
- value: unknown
operator: '=='
color: black
- value: '0'
operator: '=='
color: black
- value: '1'
operator: '=='
color: '#75f94c'
- value: '2'
operator: '=='
color: '#377d22'
- value: '3'
operator: '=='
color: '#fffd54'
- value: '4'
operator: '=='
color: '#ef8641'
- value: '5'
operator: '=='
color: '#ea3522'
size: 40%
exclude:
- entity_id: sensor.pollens_risks_*
state: unknown
- entity_id: sensor.pollens_risks_*
state: '0'
sort: null
method: friendly_name
ignore_case: true
numeric: false
Erreurs de configuration détectées:
bad indentation of a mapping entry (220:21)
217 | ignore_case: true
218 | numeric: false
219 |
220 | show: true
---------------------------^
221 | west:
222 | show: true
moi j’ai une erreur
merci de m’apporter des précision
Bonjour !!
Tout est là, l’indentation (les espaces devant) n’est pas correcte (proche de la ligne 220 et du caractère 21)
je voudrais ajouter de tuile en vertical c’est possible?
merci ci pour tous j’essaye de comprend
Y’a t’il une astuce pour avoir les noms sympas des différents pollens ?
Je n’arrive qu’a faire afficher ça :
Bonjour,
Tu n’es pas dans le bon sujet ?
j’ai rencontré le même problème, j’ai résolu en mettant un bout de code javascript (je crois)
en mettant :
name: >-
[[[ return ("this.entity_id").split("_")[2] + " -- "+entity.state
]]]
le code complet de ma carte
type: custom:stack-in-card
keep:
box_shadow: true
margin: true
border_radius: true
background: true
outer_padding: true
cards:
- type: custom:button-card
entity: sensor.pollens_44
name: Synthèse Pollens
icon: mdi:alert
color_type: icon
show_name: true
show_state: false
state:
- value: unknown
operator: '=='
color: black
- value: nul
operator: '=='
color: green
- value: très faible
operator: '=='
color: '#75f94c'
- value: faible
operator: '=='
color: '#377d22'
- value: moyen
operator: '=='
color: '#fffd54'
- value: élevé
operator: '=='
color: '#ef8641'
- value: très élevé
operator: '=='
color: '#ea3522'
size: 10%
- type: custom:auto-entities
card:
type: grid
columns: 3
square: true
card_param: cards
filter:
include:
- entity_id: sensor.pollens_44*
options:
type: custom:button-card
color_type: icon
show_name: true
show_state: false
style: |
ha-card {
background: none;
box-shadow: #ccffcc;
}
styles:
card:
- height: 100px
- width: 150px
- font-size: 12px
name: >-
[[[ return ("this.entity_id").split("_")[2] + " -- "+entity.state
]]]
state:
- value: unknown
operator: '=='
color: '808080'
- value: nul
operator: '=='
color: grey
- value: 0
operator: '=='
color: green
- value: très faible
operator: '=='
color: '#75f94c'
- value: faible
operator: '=='
color: '#377d22'
- value: moyen
operator: '=='
color: '#fffd54'
- value: élevé
operator: '=='
color: '#ef8641'
- value: très élevé
operator: '=='
color: '#ea3522'
size: 60%
exclude:
- entity_id: sensor.pollens_44*
state: unknown
- entity_id: sensor.pollens_44*
state: nul
- entity_id: sensor.pollens_44
sort: null
method: friendly_name
ignore_case: true
numeric: false
Bonjour,
Avant tout merci pour le partage de code. J’ai réussi a remonter la même chose chez moi. Par contre j’ai la saison toujours écrit en anglais et non en français. J’ai loupé quelque chose?
Malheureusement non, tu n’a rien loupé et ça risque pas de changé dans l’immédiat :
Le main-developpeur a dit, a ce sujet
This is not a bug, but by design.
Cf le bug que j’avais ouvert a l’époque : Translation of season compoment is not working · Issue #64913 · home-assistant/core · GitHub
Tu peux toujours faire un truc à base de sensor ( template)
#Season #####################################################################
- platform: template
sensors:
saison:
value_template: >
{% if is_state("sensor.season", "spring") %}
Printemps
{% elif is_state("sensor.season", "summer") %}
Eté
{% elif is_state("sensor.season", "autumn") %}
Automne
{% else %}
Hiver
{% endif %}
Tu aura sensor.season
et sensor.saison
Ok, merci c’est ce que j’avais trouvé, mais il faut donc aussi changer le custom pour avoir les images
Oui, regarde mon post [CARTE] Home assistant Sun card - pour les phases du soleil - #49 par WarC0zes
J’ai rien modifier pour être en français, ca dépend des cartes je crois. J’ai juste modifier les images du sensor par défaut .
Salut bon encore un sujet qui va me donner mal à la tete pour cete fin de weekend merci a tous de vos partage je vais essayer de rajoutes tout ceci a on Ha car je trouve la carte très completes. aller au boulot
Cette carte avait suscité pas mal d’intérêt. Mais mauvaise nouvelle, le développeur a décidé d’archiver son dépôt, ce qui signifie qu’elle ne sera plus mise à jour.
Elle est encore utilisable, mais je crains qu’il faille à terme l’abandonner
A moins qu’il y ait un volontaire pour un fork ?
Je viens de découvrir cette mauvaise nouvelle et j’étais justement en train de chercher une alternative tout aussi sympathique à cette carte…
Tu peux continuer avec cette carte…l’installer comme’custom repository’ en HACS
Les maj ne sont plus fait…mais il n’a plus fait des maj depuis 2 ans donc pas de soucis je pense
Il y a déja 80+ forks… qui bouchent non plus
et voilà la carte est cassé
les sensor ne sont plus présent de la même manière mais surtout je ne retrouve plus sensor.solar_noon