non, pour l’instant j’ai mis de coté, histoire de m’occuper d’abord de mes lumieres.
Alors, j’ai bien installer homekit panel card, mais j’ai beau faire un long clic, un double ou n’importe quoi, je n’ai aucun popup qui s’ouvre.
dois-je modifier quelques chose dans les template ? car je n’arrive vraiment pas a ouvrir un popup.
pour l’intensité, tu sais dans quel template et ou je dois modifier pour qu’il m’affiche 100% a la place sur une lampe style plafonnier ?
On va essayer step by step.
Fais une nouvelle view en mode « panel » et fais cette carte (en changeant pour une entité lumière à toi) :
Code
enableColumns: true
masonry: false
home: false
rows:
- columns:
- column: 1
entities:
- entities:
- card: custom:button-card
cardOptions:
entity: light.meuble_tv
show_last_changed: true
state_display: |
[[[
if (entity.state === 'on')
return 'Allumée';
else
return 'Eteinte';
]]]
custom_fields:
icon_hue: >
<svg viewBox="0 0 32 32"><path d="M8.4395,16.668
C8.9795,16.552
9.5115,16.895 9.6285,17.435 C9.7455,17.974 9.4025,18.506 8.8625,18.623
C8.3225,18.74 7.7905,18.397 7.6735,17.857 C7.5565,17.317 7.9005,16.785
8.4395,16.668 M13.3275,15.611 C13.8665,15.495 14.3985,15.838
14.5155,16.377 C14.6325,16.917 14.2895,17.449 13.7505,17.566
C13.2105,17.683 12.6775,17.34 12.5605,16.8 C12.4445,16.261
12.7875,15.729 13.3275,15.611 M18.2135,14.555 C18.7535,14.438
19.2865,14.781 19.4025,15.32 C19.5195,15.86 19.1765,16.393 18.6365,16.51
C18.0965,16.626 17.5645,16.283 17.4485,15.743 C17.3315,15.203
17.6735,14.671 18.2135,14.555 M23.1005,13.498 C23.6405,13.381
24.1725,13.724 24.2905,14.264 C24.4065,14.804 24.0635,15.336
23.5235,15.453 C22.9835,15.569 22.4515,15.227 22.3355,14.687
C22.2175,14.147 22.5615,13.614 23.1005,13.498 M10.6695,20.639
L25.4735,17.444 C26.5535,17.211 27.2405,16.147 27.0065,15.067
C26.4495,12.484 23.9035,10.842 21.3205,11.399 L6.5165,14.594
C5.4365,14.827 4.7505,15.891 4.9835,16.971 C5.5415,19.554 8.0865,21.196
10.6695,20.639 M25,26 C24.447,26 24,25.553 24,25 C24,24.447 24.447,24
25,24 C25.553,24 26,24.447 26,25 C26,25.553 25.553,26 25,26 M20,26
C19.447,26 19,25.553 19,25 C19,24.447 19.447,24 20,24 C20.553,24
21,24.447 21,25 C21,25.553 20.553,26 20,26 M15,26 C14.447,26 14,25.553
14,25 C14,24.447 14.447,24 15,24 C15.553,24 16,24.447 16,25 C16,25.553
15.553,26 15,26 M10,26 C9.447,26 9,25.553 9,25 C9,24.447 9.447,24 10,24
C10.553,24 11,24.447 11,25 C11,25.553 10.553,26 10,26 M27,22 L9,22 C5,22
4,19 4,18 L4,23 C4,25.762 6.238,28 9,28 L27,28 C27.553,28 28,27.553
28,27 L28,23 C28,22.447 27.553,22 27,22 M22,8 C21.447,8 21,7.553 21,7
C21,6.447 21.447,6 22,6 C22.553,6 23,6.447 23,7 C23,7.553 22.553,8 22,8
M17,8 C16.447,8 16,7.553 16,7 C16,6.447 16.447,6 17,6 C17.553,6 18,6.447
18,7 C18,7.553 17.553,8 17,8 M12,8 C11.447,8 11,7.553 11,7 C11,6.447
11.447,6 12,6 C12.553,6 13,6.447 13,7 C13,7.553 12.553,8 12,8 M7,8
C6.447,8 6,7.553 6,7 C6,6.447 6.447,6 7,6 C7.553,6 8,6.447 8,7 C8,7.553
7.553,8 7,8 M23,4 L5,4 C4.447,4 4,4.447 4,5 L4,9 C4,9.553 4.447,10 5,10
L23,10 C27,10 28,13 28,14 L28,9 C28,6.238 25.762,4 23,4"
style="fill:#C0C0C0;"></path> <g><circle cx="7" cy="7" r="0.878"
style="fill:var(--button-card-light-color)"/> <circle cx="17" cy="7"
r="0.878" style="fill:var(--button-card-light-color)"/> <circle cx="22"
cy="7" r="0.878" style="fill:var(--button-card-light-color)"/> <circle
cx="8.651" cy="17.646" r="0.878"
style="fill:var(--button-card-light-color)"/> <circle cx="13.538"
cy="16.589" r="0.878" style="fill:var(--button-card-light-color)"/>
<circle cx="18.425" cy="15.532" r="0.878"
style="fill:var(--button-card-light-color)"/> <circle cx="23.313"
cy="14.475" r="0.878" style="fill:var(--button-card-light-color)"/>
<circle cx="10" cy="25" r="0.878"
style="fill:var(--button-card-light-color)"/> <circle cx="15" cy="25"
r="0.878" style="fill:var(--button-card-light-color)"/> <circle cx="20"
cy="25" r="0.878" style="fill:var(--button-card-light-color)"/> <circle
cx="25" cy="25" r="0.878" style="fill:var(--button-card-light-color)"/>
<circle cx="12" cy="7" r="0.878"
style="fill:var(--button-card-light-color)"/></g> </svg>
styles:
card:
- font-family: Sf Display
- letter-spacing: 0.05vw
- font-weight: bold
- font-size: 100%
name:
- top: 30%
- left: 54%
- position: absolute
label:
- top: 42%
- left: 54%
- position: absolute
state:
- top: 36%
- left: 54%
- position: absolute
custom_fields:
icon_hue:
- top: 2%
- left: 2%
- width: 40%
- position: absolute
circle:
- top: 2%
- left: 74%
- width: 24%
- position: absolute
- letter-spacing: 0.03vw
template: light
higherSize: 1
wider: true
widerSize: 2
noPadding: true
title: Ambiance
tileOnRow: 2
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.1);
--tile-border-radius: 10px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: none;
--tile-name-text-color: rgba(255, 255, 255, 1);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.7);
--tile-on-state-text-color: rgba(255,255,255, 1);
--tile-state-changed-text-color: rgb(255, 255, 255);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.6);
--tile-on-icon-color: #F7D959;
--tile-width-mobile: 140px;
--tile-height-mobile: 140px;
background: none;
}
type: custom:homekit-card
Dans ton éditeur de configuration Lovelace, colle ça en haut :
Code
button_card_templates:
base:
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: |
[[[
if (entity.state === 'on')
return 'Allumé';
else
return 'Eteint';
]]]
state:
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
- font-weight: bold
name:
- color: rgba(0, 0, 0, 1)
- font-weight: bold
state:
- color: rgba(0, 0, 0, 0.6)
label:
- color: rgba(0, 0, 0, 0.6)
- value: 'off'
styles:
name:
- color: rgba(0, 0, 0, 1)
- font-weight: bold
tap_action:
action: toggle
haptic: light
styles:
name:
- top: 74%
- left: 6%
- position: absolute
label:
- top: 84%
- left: 40%
- position: absolute
state:
- top: 84%
- left: 6%
- position: absolute
icon:
- top: 44%
- left: 11%
- position: absolute
card:
- font-family: Sf Display
- letter-spacing: 0.05vw
- font-weight: bold
- color: rgba(0, 0, 0, 0.4)
- font-size: 80%
- background-color: rgba(140, 140, 140, 0.8)
- border-radius: 0.8vw
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 4%
- left: 66%
- width: 30%
- position: absolute
- letter-spacing: 0.03vw
loader:
custom_fields:
loader: >
[[[ if (entity.state === 'on') { return '<img
src="/local/Icones/loader.svg" width="100%">'; } ]]]
styles:
custom_fields:
loader:
- filter: '[[[ return entity.state === ''off'' ? ''invert(1)'' : ''none''; ]]]'
- top: '-4%'
- left: 70%
- width: 36%
- position: absolute
- opacity: 0.6
light:
styles:
card:
- box-shadow: 0px 0px 20px 3px var(--button-card-light-color-no-temperature)
template:
- base
custom_fields:
circle: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) { const
brightness = Math.round(entity.attributes.brightness / 2.54); const
radius = 20.5; const circumference = radius * 2 * Math.PI; return `<svg
viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="#b2b2b2" stroke-width="1.5" fill="none" style=" transform:
rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray:
${circumference}; stroke-dashoffset: ${circumference - brightness / 100
* circumference};" /> <text x="50%" y="54%" fill="#8d8e90"
font-size="14" text-anchor="middle"
alignment-baseline="middle">${brightness}<tspan
font-size="10">%</tspan></text></svg>`; } ]]]
hold_action:
action: fire-dom-event
browser_mod:
command: popup
card:
actionSize: 60px
actions:
- color: rgb(180, 200, 250)
name: Froid
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 126
- 150
- 255
- color: rgb(80, 100, 250)
name: Myrtille
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 43
- 3
- 255
- color: rgb(0, 250, 200)
name: Turquoise
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 0
- 255
- 200
- color: rgb(255, 220, 150)
name: Chaud
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 255
- 255
- 126
actionsInARow: 4
brightnessHeight: 300px
brightnessWidth: 120px
entity: '[[[ return entity.entity_id ]]]'
icon: mdi:led-strip
settings:
closeButton: Retour
openButton: Roue Chromatique
settingsCard:
cardOptions:
cards:
- entities:
- brightness: false
brightness_icon: weather-sunny
child_card: true
color_picker: true
color_temp: true
color_wheel: true
consolidate_entities: false
effects_list: false
entity: '[[[ return entity.entity_id ]]]'
full_width_sliders: false
hide_header: true
persist_features: false
shorten_cards: false
show_slider_percent: false
smooth_color_wheel: true
temperature_icon: thermometer
type: custom:light-entity-card
white_icon: file-word-box
white_value: false
style: |
ha-card {
border-radius: 40px;
background: none;
box-shadow: none;
}
type: entities
- entities:
- colors:
- icon_color: rgb(180, 200, 250)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 126
- 150
- 255
type: call-service
- icon_color: rgb(80, 100, 250)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 43
- 3
- 255
type: call-service
- icon_color: rgb(0, 0, 250)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 0
- 2
- 255
type: call-service
- icon_color: rgb(220, 0, 250)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 146
- 2
- 255
type: call-service
- icon_color: rgb(240, 100, 250)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 255
- 0
- 250
type: call-service
- icon_color: rgb(255, 0, 0)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 255
- 0
- 0
type: call-service
- icon_color: rgb(255, 100, 0)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 255
- 40
- 0
type: call-service
- icon_color: rgb(255, 200, 0)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 255
- 200
- 0
type: call-service
- icon_color: rgb(255, 220, 150)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 255
- 255
- 126
type: call-service
- icon_color: rgb(0, 250, 200)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 0
- 255
- 200
type: call-service
- icon_color: rgb(40, 200, 40)
service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
rgb_color:
- 0
- 255
- 2
type: call-service
entity: light.lumieres_cuisine
justify: center
size: 42
type: custom:rgb-light-card
entity: '[[[ return entity.entity_id ]]]'
style: |
ha-card {
border-radius: 40px;
background: none;
box-shadow: none;
}
type: entities
type: vertical-stack
cardStyle: |
background-color:#FFF;
type: entities
sliderColoredByLight: true
switchHeight: 400px
switchWidth: 150px
type: custom:light-popup-card
deviceID:
- this
large: true
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
title: Fermer
Histoire de me remettre en question et vérifier ce que je te renseigne, j’ai créé un nouveau dashboard vierge et j’ai utilisé ces codes. Cela marche pour moi.
As-tu installé également ceci dans HACS? :
Je suis désolé, je ne comprends pas la question. Pourrais-tu me montrer par une image?
alors, oui, j’ai bien ceci:
Mais confirme moi: il y a bien une fenetre popup qui dois s’ouvrir avec par exemple un long appuie pour pouvoir regler l’intensité ou la couleur ? car ca, par contre je n’ai rien. ni appuie long, ni double clic.
et pour les 100% que je voulais te dire, je m’explique.
j’ai certaine ampoule qui, quand j’allume la lampe, me met NaN a la place de 50% ou 100% etc…(et encore, juste parce qu’elle eclaire blanc ) si je met bleue, ca fonctionne, mais bon soit, je voudrais pour les lampe que je ne sais pas regler une intensité ou la couleur, comme c’est le cas pour mon plafonnier dans une de mes chambre, qu’il m’affiche dans l’etat allumer, 100% pour ne plus avoir l’erreur du « NaN ».
voila, rien de plus.
Encore merci pour prendre de ton temps pour me donner un coup de main, c’est vraiment sympa…
Ah d’accord.
Je te confirme, lorsque je fais un clic long, une popup chez moi. C’est problématique. Tu me confirmes que tu as bien installé « light-popup-card »?
Pour cette histoire de NaN, je ne vois pas d’où cela pourrait venir. Je crois que c’est quand ça ne retourne pas d’info. La seule feinte que je peux te proposer c’est d’essayer de faire une condition afin de ne rien afficher si NaN est renvoyé. Avec un code du style :
[[[
if (entity.state === 'NaN')
return '';
else
return entity.state;
]]]
Je ne sais pas, je propose 
oui, je te confirme que light-popup-card est bien installé
c’est bien celui-ci:
Tu as vidé le cache de ton navigateur? Là je commence à sécher 
Peut-être que d’autres camarades connaissent le souci…?
Je viens de vider le cache, mais ca ne change rien.
Voici en bref ce que j’ai tester:
A savoir que:
bureau: ampoule piloter par local tuya
hifi et ambiante: ampoule legerement différente a celle du bureau mais en local tuya aussi.
Avant (et arriere) gauche - droite: yeelight
led tv: en zigbee
sonos: lampe et haut parleur en wifi (de chez ikea)
et voila donc le résultat quand j’allume. (tous sont allumer en blanc) et je n’ai pas la couleur désirer sur l’image de l’ampoule car ils sont configurer tous les 4 les même !
la première, j’ai bien le % les trois autres non.
et aucune de ces icônes ne fonctionne avec un long appuie pour ouvrir une popup carte.
Donc voila, je suis un peu bloquer a cette étape, et je ne sais pas quoi faire.
De même que, icône éteinte, je n’ai pas un fond noir. (comme mon fond d’écran, voir l’icône air pure) elle est grise, et j’aimerais avoir la même couleur que le fond (noir). je ne sais pas du tout ou changer cela.
Le tout est mis en page par une carte « grille » première carte en 4 colonnes, deuxième carte en 3 colonnes
Merci pour toute info interessante qui me permetterais d’avancer un peu plus loin.
Donc là tu es en blanc partout, mais quand tu mets de la couleur, l’icone ne suit pas, c’est bien cela? Si c’est ça, c’est le code de l’icone qui n’est pas bon. En exemple, ton post avec mon code, un peu plus haut, semble être en bleu (bon, par contre les LEDs ne sont pas alignées, bizarre…)
Sur tes 3 autres entités, tu as bien un attribut « brightness » avec une valeur entre 0 et 255?
Toujours un mystère pour moi. Si tu as bien suivi mes étapes, je ne vois pas ce qui cloche…
Pour ceci, je pense pouvoir t’aider :
Cela se passe dans l’éditeur de configuration de Lovelace. Dans le template « base », tu as le « styles » de la card. Ici tu y trouveras la valeur du background-color à modifier à ta guise. N’oublie pas de sauver en sortant et recharger Lovelace pour appliquer la MAJ.
Le code en question (j'ai abrégé pour mieux identifier ce qui t'intéresse) :
base:
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: |
....
state:
- ...
tap_action:
action: toggle
haptic: light
styles:
card:
- ...
- background-color: rgba(140, 140, 140, 0.8)
- ...
Donc si tu veux un noir absolu, change pour background-color: rgba(0, 0, 0, 0.8) ou bien background-color: rgba(140, 140, 140, 0)
ce sont des lampe tuya, je ne sais pas si cela fait quelque chose. bizarrement, j’ai le NaN uniquement en blanc, si je met bleu par exemple, il me met bien le % correcte.
non, les couleurs suivent, mais quand je met le blanc, le rendu sur l’icone n’est pas blanc, mais presque jaune. et pas le meme jaune sur toute les icone, regarde la difference entre le premier et le deuxieme.
Pour le fond noir, c’est regler, merci pour l’info.
ok, j’ai trouver.
merci pour le coup de main. super sympa de ta part… 
je rencontre une erreur avec la liste de course:
Logger: homeassistant.components.command_line.sensor
Source: components/command_line/sensor.py:120
Integration: command_line (documentation, issues)
First occurred: 11:58:15 (6 occurrences)
Last logged: 12:03:17
Unable to parse output as JSON: <b>Liste de Courses:</b><br>
une idée ? @Quintus
Là comme ça, non.
Le mieux serait de repasser en revue tout ce beau monde.
Pourrais-tu donc copier/coller le contenu de ton fichier shopping_list.py, ainsi que la partie qui nous intéresse dans ton fichier sensor.py…?
Merci
Oui bien sur, mais j’ai exactement la même chose que plus haut :
voici le shopping_list.py
#!/usr/local/bin/python
# coding: utf8
import json
with open('/config/.shopping_list.json') as data_file:
shoppingListData = json.load(data_file)
content = u"<b>Liste de Courses:</b><br>"
for entry in shoppingListData:
if not entry['complete']:
content += u"- %s<br>" % entry['name']
content += u"<br>"
print(content)
Sensor:
############################################################
## ##
## SHOPPING LIST ##
## ##
############################################################
- platform: command_line
name: Liste de Courses
command: python3 /config/shopping_list.py
json_attributes:
- name
script:
liste_courses:
alias: '[Liste de Courses] Envoyer Notification Liste'
sequence:
- data: {}
entity_id: sensor.liste_de_courses
service: homeassistant.update_entity
- delay:
hours: 0
minutes: 0
seconds: 3
milliseconds: 0
- service: notify.notify
data_template:
data:
sticky: 'true'
subject: <b>Liste de Courses</b>
message: '{{ states(''sensor.liste_de_courses'') }}'
title: Home Assistant
mode: single
Ton fichier s’appelle bien : shopping.py ?
Car dans tes sensors, tu renvoies vers shopping_list.py
J’espère que c’est de là que vient le problème…
C’est bien shopping list.py c’est une erreur de frappe sur le forum
Alors là…
À moins que tu n’aies pas placé ton fichier « shopping_list.py » dans le même dossier de « .shopping_list.json », je ne vois pas d’où vient le problème.
Si quelqu’un d’autre a une idée…?
Au fait, @Clemalex, as-tu trouvé une solution pour palier à la limite des 255 caractères ?
Moi, oui 
Partage dans un topic 
Je passe par une requête api et jq… Mais pas. Eu le temps de partager.
L’avantage des requête api via rest_command c’est que tu peux créer des attributs… Qui ne sont pas limité a 255.
Oui, ils sont bien tout les deux à la racine du dossier config\