@WarC0zes désolé pour le custom ui, ca doit faire 2 ans qu’il est dans mes customs cards ^^
@Plouf34 j’utilise The iOS Dark Mode Theme by @basnijholt and modified from @kalkih’s apres je modifie la transparence et le radius des bords
bon, j’y suis presque mais je butte la dessus :
j’ai bien mon animation, mais rien n’est aligné. c’est un bout de la carte de meteofrance, modifié avec card mod pour ne garder que le l’animation du logo
voici le code de la header card pour la meteo
- type: custom:meteofrance-weather-card
entity: weather.jibiline
number_of_forecasts: '5'
current: true
one_hour_forecast: false
forecast: false
alert_forecast: false
details: false
detailEntity: sensor.89_weather_alert
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
ha-card > ul > li:nth-child(2)
{
display: none;
}
ha-card > ul > li:nth-child(1)
{
transform: scale(0.5);
}
ha-card > ul > li:nth-child(3)
{
display: none;
}
le code entier de la header card
header_cards:
cards:
- type: glance
entities:
- entity: alarm_control_panel.maison
- entity: group.grp_portes
- entity: group.grp_fenetres
- entity: group.grp_lumineres
icon: bha:ceiling-lamp
tap_action:
action: more-info
show_name: false
show_icon: true
show_state: false
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
- type: markdown
content: >
{{ states("sensor.day") }} {{ states("sensor.date_fr") }}
{{ states("sensor.time") }} {{ states("sensor.temperature_exterieur") }}
°c
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
- type: custom:meteofrance-weather-card
entity: weather.jibiline
number_of_forecasts: '5'
current: true
one_hour_forecast: false
forecast: false
alert_forecast: false
details: false
detailEntity: sensor.89_weather_alert
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
ha-card > ul > li:nth-child(2)
{
display: none;
}
ha-card > ul > li:nth-child(1)
{
transform: scale(0.5);
}
ha-card > ul > li:nth-child(3)
{
display: none;
}
Je ne maitrise pas du tout card mod, j’ai fait un shadow display sur le texte pour ne garder que l’icone animé, il y a surement plus simple.
mais dans l’état, cela me conviendrait surement si tout était aligné
je ne suis pas contre un coup de main
il me semble qu’il fallait ajouter:
name: ''
pour éviter cela.
malheureusement aucun changement
ha-card {
height: 58px;
width: 58px;
}
ca diminue la taille de la carte. il manque un petit peu encore en hauteur, faudrais diminuer la taille de l’icone et sa serai bon
- type: custom:meteofrance-weather-card
entity: weather.xxxxxxxxxx
number_of_forecasts: '0'
current: true
alert_forecast: false
details: false
one_hour_forecast: false
forecast: false
style: |
ha-card > ul > li:nth-child(2)
{
display: none;
}
ha-card > ul > li:nth-child(1)
{
transform: scale(0.5);
}
ha-card > ul > li:nth-child(3)
{
display: none;
}
ha-card {
background-color: transparent;
box-shadow: none;
height: 58px;
width: 58px;
}
après on peu jouer avec la taille des icones de glance
- type: glance
entities:
- entity: alarm_control_panel.54ef44273cc1_alarm
- entity: group.grp_portes
style: |
:host {
--mdc-icon-size: 27px;
}
J’ai réussi a ajouter la lune en image dans la barre, suite a mon tuto Phase de la lune en image.
voici mon code:
header_cards:
cards:
- type: glance
columns: 6
entities:
- entity: alarm_control_panel.54ef44273cc1_alarm
- entity: group.grp_portes
style: |
:host {
--mdc-icon-size: 33px;
}
- entity: group.grp_fenetres
- entity: group.grp_lumieres
icon: bha:ceiling-lamp
- entity: sun.sun
- entity: sensor.moon_phases
style: |
state-badge {
height: 27px;
width: 27px;
}
show_name: false
show_icon: true
show_state: false
style: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mdc-icon-size: 28px;
}
Ajout de la météo et vitesse du vent avec icone ( pas d’animation).
Il faut la carte Mushroom.
code:
header_cards:
cards:
- type: glance
columns: 6
entities:
- entity: alarm_control_panel.54ef44273cc1_alarm
- entity: group.grp_portes
style: |
:host {
--mdc-icon-size: 33px;
}
- entity: group.grp_fenetres
- entity: group.grp_lumieres
icon: bha:ceiling-lamp
- entity: sun.sun
- entity: sensor.moon_phases
style: |
state-badge {
height: 27px;
width: 27px;
}
show_name: false
show_icon: true
show_state: false
style: |
ha-card {
background: none;
box-shadow: none;
}
:host {
--mdc-icon-size: 28px;
}
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.xxxxxxxxxxxx
show_conditions: false
show_temperature: true
style: |
ha-card {
background-color: transparent;
box-shadow: none;
--chip-height: 50px;
--chip-border-radius: 1px;
--chip-padding: 0 3px;
flex-direction: column !important;
}
- type: entity
entity: sensor.xxxxxxxxxxxx_wind_speed
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
background-color: transparent;
box-shadow: none;
--chip-height: 50px;
--chip-border-radius: 1px;
--chip-padding: 0 3px;
flex-direction: column !important;
}
J’ai bien installé Custom-ui, j’ai rajouté le code dans customize.yaml mais mes icones porte, fenêtre et mouvement sont tout le temps blanc
ta bien ajouter dans configuration.yaml ?
homeassistant:
customize: !include customize.yaml
dans customize.yaml
group.grp_fenetres:
friendly_name: Fenêtres
templates:
icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
icon: "if (state === 'on') return 'mdi:window-open-variant'; else return 'mdi:window-closed-variant';"
group.grp_portes:
friendly_name: Portes
templates:
icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
icon: "if (state === 'on') return 'fas:door-open'; else return 'fas:door-closed';"
et custom ui est bien ajouté?
je chercher toujours pour avoir la meteo avec l’animation, mais que soit correctement aligné, j’ai fais plusieurs (beaucoup) essai sans que ce soit aligné correctement. j’ai re ouvert le post sur les badge et leurs animations : Animation Badges - Home Assistant - Tutoriels & Partages / Interface / Lovelace / Thème / Custom Card - Home Assistant Communauté Francophone (hacf.fr) se sera surement une piste
Pareille, j’ai fais plein de test non concluant appart ce que j’ai poster. J’essaye de comprende le html avec l’outil de développement de chrome mais c’est pas facile.
Oups, j’avais oublié d’ajouter
homeassistant:
customize: !include customize.yaml
Mais maintenant j’ai une erreur:
J’ai bien le fichier customize.yaml avec le même code.
Pour répondre à ta 2ème question, oui j’ai bien installé « custom ui »
montre ton customize.yaml ?
group.all_doors:
templates:
icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
icon: "if (state === 'on') return 'mdi:door-open'; else return 'mdi:door';"
group.all-windows:
templates:
icon_color: "if (state === 'on') return '#ff0000'; else return '#00b300';"
icon: "if (state === 'on') return 'window-open-variant'; else return 'mdi:window-variant';"
group.all_cameras_motions_sensors:
templates:
icon_color: "if (state === 'on') return '#ff0000'; else return '#f77300';"
icon: "if (state === 'on') return 'mdi:motion-sensor'; else return 'mdi:motion-sensor-off';"
bien joué !! de mon coté je me batais avec custom:html-template-card sans succes non plus.
Tu es parti coté html alors? dis nous tout
group.all-windows:
change en:
group.all_windows:
c’est pas le - qui chie ?
je suis partie sur un sensor template ,je t’es mis le tuto sur ton lien du bagde.
J’ai changé mais ca ne change rien.