Bonjour,
j’ai installé et testé cet addons sur mon HA et c’est vraiment top!!
Mais (il y a forcément un mais 
) je rencontre un soucis sur l’application mobile IOS (iPhone 11 et application compagnon à jour 2023.2).
Mes cartes n’apparaissent pas toujours dans le header alors que sur mon PC c’est nickel.
Avez-vous le même soucis?
Merci et bonne journée.
Oui, ca arrive. Pour les remettres, click sur ton icone du compte et reviens dans ton dashboard et ca devrait revenir.
Alors moi c’est systématique et effectivement ca reviens de façon très aléatoire.
Des fois quand je vais sur Energy, des fois sur mon profil utilisateur, mais souvent ca reviens pas.
Dommage c’est top pour avoir des résumés.
Pour info j’ai 5 chips custom:mushroom-chips-card (portes, volets, fenêtres, portes de garages, lumières)
J’utilise broswer_mod 2 et kiosk_mode en pour mon iPhone (pour cacher les boutons de menu et options).
J’ai fais des essais en les désactivant mais toujours pareil
J’ai pas kiok_mode, peu etre lui qui fait bugger autant. J’ai browser_mod et des cartes glance, button-card et météo et sur android, sa bug pas souvent.
Ca doit venir d’IOS alors si ca fonctionne chez toi avec android…
j’ai testé en virant kiok_mode du fichier config, vider complétement le cache de l’app et la partie front mais toujours pareil.
Globalement ca s’affiche genre 1 fois sur 6 ou 7
Tu as configuré comment ton header_cards:
Moi je n’ai rien à part les cards mais mais je doute que les paramètres par défaut joue sur des bug d’affichage…
header_cards:
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
name: ''
entity: binary_sensor.portes
icon: >-
{{ 'mdi:door' if is_state('binary_sensor.portes','off') else
'mdi:door-open' }}
icon_color: '{{ ''blue'' if is_state(''binary_sensor.portes'',''off'') else ''orange'' }}'
content: ''
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: script.pop_up_porte_maison
J’ai même test de placer tout en bas du fichier config on sait jamais mais non lol
Voici mon code, le justify_content peu aider:
header_cards:
justify_content: right
cards:
- type: glance
columns: 6
entities:
- entity: group.grp_motion
- entity: group.grp_portes
style: |
:host {
--mdc-icon-size: 31px;
}
- entity: group.grp_fenetres
style: |
:host {
--mdc-icon-size: 37px;
}
- entity: group.grp_lumieres
icon: phu:ceiling-lamp
style: |
:host {
--mdc-icon-size: 32px;
}
- entity: sun.sun
style: |
state-badge {
height: 70px !important;
width: 70px !important;
}
- entity: sensor.moon_phases
style: |
state-badge {
height: 27px !important;
width: 27px !important;
}
show_name: false
show_icon: true
show_state: false
style: |
ha-card {
background: none;
box-shadow: none;
left: 35px;
}
:host {
--mdc-icon-size: 28px;
}
div {
display: flex;
justify-content: flex-end;
}
- type: custom:meteofrance-weather-card
entity: weather.saint_frichoux
number_of_forecasts: '0'
current: true
one_hour_forecast: false
forecast: false
alert_forecast: false
details: false
style: |
ha-card {
height: 60px !important;
width: 80px !important;
background: none;
box-shadow: none;
top: -7px;
left: -3px;
}
ha-card > ul > li:nth-child(2) {
display: none;
}
ha-card > ul > li:nth-child(3) {
display: none;
}
ha-card > ul > li:nth-child(1) {
height: 58px !important;
width: 58px !important;
}
:host {
transform: scale(0.75);
}
div {
display: flex;
justify-content: flex-end;
}
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /config/logs
show_icon: true
icon: mdi:math-log
size: 70%
styles:
card:
- height: 50px
- width: 42px
style: |
ha-card {
background: none;
box-shadow: none;
}
Bon surement un bug sur IOS car j’ai mis tes cards et supprimer tout full_kiosk mais toujours pareil. Ca s’affiche une fois de temps en temps…
Dommage c’est vraiment cool comme intégration.
et tous fonctionne bien sur mon PC.
J’ai cru voir que le projet n’étais plus maintenu dommage je n’aurai surement pas de solution.
En tous cas merci de ton aide
Bonne journée
Deux questions pour cette superbe carte.
J’affiche le % de la batterie de la tablette mais sous forme de badge. Comment faire juste une icone batterie avec le niveau qui descend. Eventuellement avec le pourcentage dessous, comme nativement sur android.
Voici ce que j’ai là :
Et sinon quelle formatage pour avoir l’heure et la date au format JJ/DD HH:MM.
Avec éventuellement l’heure au dessus de la date pour que ça prenne moins de largeur
Merci à tous
Salut @WarC0zes
J’ai utilisé ton code pour la météo et température.
Cependant, c’est pas sur 2 lignes et le fond n’est pas transparent.
Une petite idée ?
Et sur l’app Android c’est pareil.
Le menu standard ne s’affiche plus si la header card est trop large…
J’ai essayé swipe navigation mais j’ai certain menu du dashboard qui ne fonctionnait pas avec swipe navigation (thermostat, roborock,…).
Du coup la solution la plus simple que j’ai trouvé est de faire un nouveau dashboard. Tu peux copier/coller tout le code d’un coup.
Un est dédié à la tablette qui affiche le Header Card. Possibler de forcer le dashboard par défaut sur un appareil. La tablette donc.
L’autre dashboard de base (pour le tel android) n’intègre pas le Header Card.
Du coup c’est plutôt pas mal
Bonjour,
l’icone météo sur 2 lignes est avec la carte mushroom-chips-card et des options de retouche avec card-mod.
Le bon code est celui ci:
- 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;
}
Merci
j’ai bien ce code
Voici comment ça apparait
Je ne comprends pas pourquoi on n’a pas le même rendu sur 2 lignes et pourquoi le fond n’est pas transparent
Tu as installer card-mod ?
Ca pas l’air le cas, vu que ta le box-shadow activé ( contour de l’icone ), alors que dans mon code je les enlever.
box-shadow: none;
dans mon code , c’est tout la partie style: qui est faite avec carte-mod et qui permet de modifier l’aspect:
style: |
ha-card {
background-color: transparent; # pas de background
box-shadow: none; # pas de contour
--chip-height: 50px;
--chip-border-radius: 1px;
--chip-padding: 0 3px;
flex-direction: column !important; # sur 2 lignes
}
Oui par HACS sans config complémentaire et depuis un moment…
Je pige pas
En fait je m’aperçois que je n’utilises nulle par ailleurs. Il doit y avoir un souci sur card-mod.
J’ai désinstaller card-mod et réinstallé.
voila le message que j’ai si je choisi la derniere version
Vous exécutez la version '2023.3.6' de Home Assistant mais ce dépôt nécessite l'installation de la version '2023.4.0b5' au minimum.
Montre ton code complet de header cards, comme ca je vois pas trop d’ou vient ton soucis.
Je suis repassé sur la version compatible de card-mod en 3.2.0 (compatible avec HA 2023.3) La 2023.4 n’étant pas encore dispo officiellement.
Bref voici mon code, un copié collé du tient (c’est le début de mon fichier)
header_cards:
badges:
- entity: sensor.tab_a7_de_pierre_battery
name: ''
cards:
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.grenoble
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;
}
views:
- theme: Backend-selected
title: Home
icon: mdi:home
path: home
badges:
- entity: group.persons
En complément card-mod semble bien fonctionner.
J’ai testé ce code sur un mini-graph-card, ça me change bien la couleur du texte
card_mod:
style: |
ha-card {
color: red;
}
J’ai essayé ça aussi mais idem
header_cards:
badges:
- entity: sensor.tab_a7_de_pierre_battery
name: ''
cards:
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.grenoble
show_conditions: false
show_temperature: true
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
--chip-height: 50px;
--chip-border-radius: 1px;
--chip-padding: 0 3px;
flex-direction: column !important;
}
Bon, il y a eu des changements dans la carte mushroom chips.
Essaye avec ce code, ca passe chez moi. Désoler mais j’utilise plus mushroom chip.
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.xxxxxxxx
show_conditions: false
show_temperature: true
card_mod:
style: |
ha-card {
background-color: transparent !important;
box-shadow: none;
--chip-height: 50px;
--chip-border-radius: 1px;
--chip-padding: 0 3px;
}
ha-card > div {
flex-direction: column !important;
}
Edit:
j’ai pas les box-shadow dans mon thème, si ca passe pas chez toi ajoute !important a la ligne box-shadow: none; , ce qui donnera box-shadow: none !important;
Sur 2 lignes OK maintenant merci mais pas pour le fond transparent
Je connais pas grand chose en CSS mais c’est quoi la différence ?
la difference c’est le !important en plus a la ligne background-color
background-color: transparent !important;
et
le changement de flex-direction
ha-card > div {
flex-direction: column !important;
}
avant c’était:
ha-card {
flex-direction: column !important;
}
C’est le box-shadow que tu voit, le contour si tu préfère.
rajoute !imprtant a la ligne box-shadow voir si ca change.