Je comprends pas les valeurs dans fill.
Tes ampoules hue arrivent a prendre la couleur verte si tu leur met la couleur verte.
Pour ma part, et avec ce que tu m’as donné, je ne peux définir que 1 à 2 couleurs. Or si on prend ton code, on peut aboir toutes les couleurs possibles reflétant les vrais couleurs des ampoules.
Tu pars d’un bouton button-card qui est personnalisé et dont l’icône n’est pas affichée de façon standard.
L’icône Hue est affiché dans un élément personnalisé du button-card (custom_fields).
Cet élément, dans le cas des ampoules HUE contient 2 SVG :
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
représente la base de l’ampoule de couleur #9da0a2 GRIS:
var(--button-card-light-color-no-temperature) :<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
représentant la partie Led et donc luminescente de l’ampoule :
La couleur de l’ampoule est donnée dans le deuxième SVG à l’aide de la propriété :
--button-card-light-color-no-temperature
Qui est une variable de la carte button-card et qui représente la couleur de l’entité Lumière sans la température (documentation)
type: 'custom:button-card'
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: false
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
double_tap_action:
action: more-info
variables:
circle_input: >
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
name:
- top: 74%
- left: 11%
- position: absolute
card:
- font-family: Passion One
- letter-spacing: 0px
- color: 'rgba(255, 255, 255, 0.3)'
- font-size: 100%
- background-color: 'rgba(80, 80, 80, 0.6)'
- border-radius: 15%
- box-shadow: none
- transition: none
- border: '1px rgba(255, 255, 255) solid'
custom_fields:
icon_hue:
- top: 11%
- left: 4.5%
- width: 3.05vw
- position: absolute
circle: &person
- top: 8.5%
- left: 56.2%
- width: 3.5vw
- position: absolute
- letter-spacing: 0.03vw
custom_fields:
circle: >
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
icon_hue: >
[[[
const state = entity.state === 'on' ? 'animate' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes animate {
0% {
transform: scale(0.85);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.95);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
.animate {
animation: animate 0.8s;
transform-origin: center;
}
</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
</svg>
`;
]]]
Voilà pour l’explication rapide.
Pour en revenir à ta demande :
Partir sur un élément personnalisé dans ton cas pour afficher une icône de base me paraît lourd.
Je passerais par l’utilisation de base du button-card avec la propriété show_icon à Vrai (même si la réponse de @Dapolux est totalement valable, je la trouve seulement moins facile d’approche pour un non initié).
Ce qui donnerais :
type: ‹ custom:button-card ›
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: true
icon: ‹ mdi:coach-lamp ›
aspect_ratio: 1/1
state:
<svg viewBox="0 0 50 50"> <style> circle { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - input / 100 * circumference}; } tspan { font-size: 10px; } </style> <circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" /> <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text> </svg>;Et si tu veux garder le principe de coloration (ajout du style de l’icône):
type: 'custom:button-card'
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: true
icon: 'mdi:coach-lamp'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-20%'
- left: 4.5%
- width: 3.05vw
- position: absolute
name:
- top: 74%
- left: 11%
- position: absolute
card:
- font-family: Passion One
- letter-spacing: 0px
- color: 'rgba(255, 255, 255, 0.3)'
- font-size: 100%
- background-color: 'rgba(80, 80, 80, 0.6)'
- border-radius: 15%
- box-shadow: none
- transition: none
- border: '1px rgba(255, 255, 255) solid'
custom_fields:
circle:
- top: 8.5%
- left: 56.2%
- width: 3.5vw
- position: absolute
- letter-spacing: 0.03vw
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
Et pour aller encore plus loin :
Il te faut récupérer l’icone svg depuis le site https://materialdesignicons.com/, et de la mettre aux mêmes dimensions que l’ampoule Hue et ajouter un élément de remplissage :
type: 'custom:button-card'
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: false
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
name:
- top: 74%
- left: 11%
- position: absolute
card:
- font-family: Passion One
- letter-spacing: 0px
- color: 'rgba(255, 255, 255, 0.3)'
- font-size: 100%
- background-color: 'rgba(80, 80, 80, 0.6)'
- border-radius: 15%
- box-shadow: none
- transition: none
- border: '1px rgba(255, 255, 255) solid'
custom_fields:
icon_hue:
- top: 11%
- left: 4.5%
- width: 3.05vw
- position: absolute
circle:
- top: 8.5%
- left: 56.2%
- width: 3.5vw
- position: absolute
- letter-spacing: 0.03vw
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
icon_hue: |
[[[
const state = entity.state === 'on' ? 'animate' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes animate {
0% {
transform: scale(0.85);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.95);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
.animate {
animation: animate 0.8s;
transform-origin: center;
}
</style>
<path fill="#9da0a2" d="M 28.73684,6.15789 26.68421,0 H 22.57895 L 20.52632,6.15789 8.21053,12.31578 h 4.10526 l 1.23158,6.15789 H 4.10526 V 10.26314 H 0 v 20.52632 h 4.10526 v -8.21053 h 10.26316 l 2.05263,10.26316 4.10526,4.10526 2.05263,4.10526 h 4.10526 l 2.05263,-4.10526 4.10526,-4.10526 4.10526,-20.52632 h 4.10526 M 29.06524,30.78945 H 20.19787 L 16.42103,12.31577 h 16.42105 z"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="m 29.45402,30.78945 h -9.27111 l -3.9488,-19.3148 h 17.16871 z"/>
</svg>
`;
]]]
Voili voilou…
PS: dans le dernier cas seul un svg est nécessaire de base car l’icône est présente de façon native dans HA, mais j’explique ainsi pour être sûr de la superposition le plus rapidement possible sans jouer avec la position de l’élément
Ok, merci merci et merci.
Regarderais cela demain et vais l’implémenter.
Par contre, j’ai l’impression que la couleur de la lumière affichée ne varie pas selon l’intensité en % qu’on applique comme sur les cards normales.
Si si, c’est le même fonctionnement… 
C’est simplement que aucun des gifs ne le montrent…
Edit : on le voit sur le dernier en fait
Super explication!
J’ai une question hors du sujet, tu utilises quel outil pour tes captures d’ecran en mode video? (Dont tu fais un gif je suppose)
C’est directement un créateur de gif dédié (super simple donc marche parfaitement) :
Aïe. Faut que je regarde car le résultat est pas top en mode 2 ou 3 colonnes. Que ce soit sur pc, encore pire sur l’iPhone.
Je n’ai testé que pour le terrasse pour le moment.
Mais en tout cas, la couleur de l’entité fonctionne.
Il ne faut pas prendre mon code pour comptant… Il faut s’en inspirer.
T’as un problème de style j’ai l’impression vu la police utilisée pour le mot Terrasse…
JE ne trouve pas solution. Sur PC, l’icone est presque normale, sur Iphone, microscopique.
Peux tu partager le code complet de la carte ?
Le code de la carte
type: vertical-stack
cards:
- type: grid
cards:
- type: 'custom:button-card'
entity: light.bonsoir
name: Bonsoir
icon: 'mdi:lightbulb-group'
template: light
- type: 'custom:button-card'
entity: light.terrasse
name: Terrasse
show_state: false
show_icon: true
icon: 'mdi:coach-lamp'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-20%'
- left: 4.5%
- width: 3.05vw
- position: absolute
name:
- top: 74%
- left: 11%
- position: absolute
card:
- font-family: Passion One
- letter-spacing: 0px
- color: 'rgba(255, 255, 255, 0.3)'
- font-size: 100%
- background-color: 'rgba(80, 80, 80, 0.6)'
- border-radius: 15%
- box-shadow: none
- transition: none
- border: '1px rgba(255, 255, 255) solid'
custom_fields:
circle:
- top: 8.5%
- left: 56.2%
- width: 3.5vw
- position: absolute
- letter-spacing: 0.03vw
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: switch.projecteur_palmiers
name: palmiers
template: light
- type: 'custom:button-card'
entity: light.orangerie
name: Orangerie
icon: 'mdi:desk-lamp'
template: light
- type: 'custom:button-card'
entity: light.patio
name: Patio
icon: 'mdi:ceiling-light'
template: light
- type: 'custom:button-card'
entity: light.veranda
name: Véranda
icon: 'mdi:floor-lamp-dual'
template: light
- type: 'custom:button-card'
template: light
entity: light.tv
name: TV
icon: 'mdi:television'
- type: 'custom:button-card'
entity: light.salon
name: Salon
icon: 'mdi:sofa'
template: light
- type: 'custom:button-card'
entity: light.lampe_bureau
name: Bureau
icon: 'mdi:desk'
template: light
- type: 'custom:button-card'
entity: light.buffet
name: Buffet
icon: 'mdi:buffet'
template: light
- type: 'custom:button-card'
entity: light.sejour
name: Séjour
icon: 'mdi:silverware'
template: light
- type: 'custom:button-card'
entity: light.couloir
name: Couloir
icon: 'mdi:track-light'
template: light
- type: 'custom:button-card'
entity: light.chambre_de_clarisse
name: Ch.Clarisse
icon: 'mdi:bed'
template: light
columns: 4
square: false
et la partie template du lovelace:
button_card_templates:
base:
aspect_ratio: 1/1
show_icon: false
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
name:
- color: 'rgba(0, 0, 0, 0.6)'
styles:
name:
- top: 78%
- left: 10%
- line-height: 100%
- position: absolute
card:
- letter-spacing: 0px
- font-weight: 400
- color: 'rgba(255, 255, 255, 0.3)'
- font-size: 110%
- background-color: 'rgba(115, 115, 115, 0.4)'
- border-radius: 10%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 12%
- left: 54%
- width: 40%
- position: absolute
hold_action:
action: more-info
light:
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>`; } ]]]
icon_hue: >
[[[ const state = entity.state === 'on' ? 'animate' : null; return `<svg
viewBox="0 0 50 50"><style>@keyframes animate{0%{transform:
scale(0.85);}20%{transform: scale(1.1);}40%{transform:
scale(0.95);}60%{transform: scale(1.03);}80%{transform:
scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate
0.8s; transform-origin: center;}</style> <path fill="#9da0a2" d="M27.4
47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0
.7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
.8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
.8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
.8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8
0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0
.1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18
3.2-18.8.1-.4.1-.5.1-.7"/> <path class="${state}"
fill="var(--button-card-light-color-no-temperature)" d="M14.1
15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9
6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5
2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]
styles:
custom_fields:
icon_hue:
- top: 16%
- left: 6%
- width: 50%
- position: absolute
En fait c’est tout con, mais je veux juste plutot utiliser cette carte, et que l’icone s’allume de la couleyur que je souhaite, et intensité que je souhaite:
Là, elle s’allume en blanc:
Code de cette carte:
type: vertical-stack
cards:
- type: grid
cards:
- type: 'custom:button-card'
entity: light.bonsoir
name: Bonsoir
icon: 'mdi:lightbulb-group'
template: light
- type: 'custom:button-card'
entity: light.terrasse
icon: 'mdi:coach-lamp'
name: Terrasse
template: light
custom_fields:
icon_hue: |
<font> <ha-icon icon="mdi:coach-lamp"> </font>
- type: 'custom:button-card'
entity: switch.projecteur_palmiers
name: palmiers
template: light
- type: 'custom:button-card'
entity: light.orangerie
name: Orangerie
icon: 'mdi:desk-lamp'
template: light
- type: 'custom:button-card'
entity: light.patio
name: Patio
icon: 'mdi:ceiling-light'
template: light
- type: 'custom:button-card'
entity: light.veranda
name: Véranda
icon: 'mdi:floor-lamp-dual'
template: light
- type: 'custom:button-card'
template: light
entity: light.tv
name: TV
icon: 'mdi:television'
- type: 'custom:button-card'
entity: light.salon
name: Salon
icon: 'mdi:sofa'
template: light
- type: 'custom:button-card'
entity: light.lampe_bureau
name: Bureau
icon: 'mdi:desk'
template: light
- type: 'custom:button-card'
entity: light.buffet
name: Buffet
icon: 'mdi:buffet'
template: light
- type: 'custom:button-card'
entity: light.sejour
name: Séjour
icon: 'mdi:silverware'
template: light
- type: 'custom:button-card'
entity: light.couloir
name: Couloir
icon: 'mdi:track-light'
template: light
- type: 'custom:button-card'
entity: light.chambre_de_clarisse
name: Ch.Clarisse
icon: 'mdi:bed'
template: light
columns: 4
square: false
Pour le problème de taille de l’icone en fonction de l’affichage, c’est a cause du paramétrage « width ».
En HUE, tu as width: 50%, alors que pour tes « Icon », tu as « width: 3.05vw », qui est une dimension qui dépend de la largeur totale de la page. J’avais eu le même problème quand j’ai adapté le thème de Mattias (lui il l’affiche sur une tablette a taille fixe), je te conseille de tout passer en %.
Pour le problème de couleur, je n’ai pas bien saisi ce que tu cherches à faire.
Quand j’allume ma lumiere, je souhaite que l’icone prenne la couleur de ma hue: Jaune, blanche, Roange Verte selon la couleur definie… et pareil pour l’intensite… là, dans mon code, quand j’allume la lumiere, l’icone devient blanche et ne reprend pas la couleur.
Extrait de code:
- type: 'custom:button-card'
entity: light.terrasse
icon: 'mdi:coach-lamp'
name: Terrasse
template: light
custom_fields:
icon_hue: |
<font> <ha-icon icon="mdi:coach-lamp"> </font>
Dans ce cas, tu ne peux pas passer juste avec un « icon », il faut du coup un SVG comme expliqué par Clemalex, avec le code associé pour cet icon:
Testé et approuvé! Merci @Clemalex
C’est bon, cela marche. Effectivement, en %, ca fonctionne bien mieux 
Ma card:
type: vertical-stack
cards:
- type: grid
cards:
- type: 'custom:button-card'
entity: light.bonsoir
name: Bonsoir
icon: 'mdi:lightbulb-group'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.terrasse
name: Terrasse
show_state: false
show_icon: true
icon: 'mdi:coach-lamp'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: switch.projecteur_palmiers
name: palmiers
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.orangerie
name: Orangerie
icon: 'mdi:desk-lamp'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.patio
name: Patio
icon: 'mdi:ceiling-light'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.veranda
name: Véranda
icon: 'mdi:floor-lamp-dual'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
icon: 'mdi:television'
entity: light.tv
name: TV
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.salon
name: Salon
icon: 'mdi:sofa'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.lampe_bureau
name: Bureau
icon: 'mdi:desk'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.buffet
name: Buffet
icon: 'mdi:buffet'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.sejour
name: Séjour
icon: 'mdi:silverware'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.couloir
name: Couloir
icon: 'mdi:track-light'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
- type: 'custom:button-card'
entity: light.chambre_de_clarisse
name: Ch.Clarisse
icon: 'mdi:bed'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
columns: 4
square: false
N’hésites pas a utiliser des « templates », cela t’évitera de devoir réécrire tout systématiquement. Comme cela tu défini par exemple dans un template tous les paramètres qui sont généraux (= identiques), puis lors de la déclaration d’un bouton, tu appelle le template, puis tu mentionne les paramètres spécifiques a ce bouton précis. Tu peux même déclarer des templates composés d’autres templates.
N’hésite pas à revoir la doc sur ce point (ou même dans le thème de Mattias, exemple avec son template « base »).
C’est ce que je voulais faire, mais là, dans mon cas, avec des icones differentes et la gestion des couleurs/intensité par icon, je n’ai pas trouvé mieux que par les card 
Bon, je débute avec HASS depuis 15j
Hello Tout le monde,
D’abord Merci @Plouf34 pour ta card, ça marche niquel.
J’apporte ma pierre a l’édifice et j’améliore ta card avec le « light-popup-card » que je trouve très esthétique (Bien sûr ce bout de code est à l’origine de Mattias_Persson).
Voici quelques photos :
Sur un hold_action :
type: 'custom:button-card'
entity: light.hue_color_lamp_1
name: Lampadaire
icon: 'bha:table-lamp-variant'
aspect_ratio: 1/1
state:
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: '1px rgba(80, 80, 80) solid'
name:
- color: 'rgba(0, 0, 0, 0.6)'
icon:
- color: var(--button-card-light-color-no-temperature)
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: |
[[[ return entity.attributes.friendly_name ]]]
card:
type: entities
entities:
- type: 'custom:light-popup-card'
entity: |
[[[ return entity.entity_id ]]]
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: 'rgba(25, 25, 25, 0.9)'
- type: 'custom:hui-element'
card_type: horizontal-stack
card_mod:
style: |
#root {
justify-content: center;
margin-top: 2em;
}
cards:
- type: 'custom:button-card'
styles:
card:
- background: '#d8d9e1'
- border-radius: 50%
- height: 4em
- width: 4em
- margin: 4px
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: |
[[[ return entity.entity_id ]]]
color_temp: 153
- type: 'custom:button-card'
styles:
card:
- background: '#d5b08d'
- border-radius: 50%
- height: 4em
- width: 4em
- margin: 4px
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: |
[[[ return entity.entity_id ]]]
color_temp: 326
- type: 'custom:hui-element'
card_type: horizontal-stack
card_mod:
style: |
#root {
justify-content: center;
margin-bottom: 1em;
}
cards:
- type: 'custom:button-card'
styles:
card:
- background: '#ce944b'
- border-radius: 50%
- height: 4em
- width: 4em
- margin: 4px
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: |
[[[ return entity.entity_id ]]]
color_temp: 500
- type: 'custom:button-card'
styles:
card:
- background: >-
radial-gradient(circle, rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 80%), conic-gradient(rgb(120, 39,
230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25,
25), rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230,
41), rgb(52, 232, 40), rgb(51, 231, 92), rgb(52, 232,
224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39,
230))
- border-radius: 50%
- height: 4em
- width: 4em
- margin: 4px
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: |
[[[ return entity.attributes.friendly_name ]]]
card:
type: 'custom:light-entity-card'
entity: |
[[[ return entity.entity_id ]]]
brightness: true
color_temp: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: '-2%'
- left: 3%
- width: 57%
- position: absolute
name:
- top: 80%
- left: 15%
- position: center
card:
- font-size: 100%
- border-radius: 15%
- box-shadow: none
- transition: none
custom_fields:
circle:
- top: 8.5%
- left: 56%
- width: 40%
- position: absolute
custom_fields:
circle: |
[[[
if (entity.state === 'on') {
const input = variables.circle_input;
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
Bon courage à tous.
