hey, can you share your Lovelace.yaml please? is looks really great for me.
thx
You need browser_mod and include doesn’t work with raw config editor.
Really cool layout - one thing I’m trying to do is to have the close button show above the popup panels title, instead of the X in front of the title. Like you have, with ‘Stang’ next to it.
How is this done? I might be overlooking something here.
Hi Mattias
Still loving the setup and really getting to a nice setup.
I would like my Velux window buttons to show the opening position. I have a made a sensor and is trying to use som of your stuff, but I’m doing something wrong (d’oh)
Below I have tried 2 different takes on it. Without success…
Can you spot my mistake in the “custom_fields” part, rest is working fine?
- type: custom:button-card
entity: switch.cover_kokken
style:
top: 16.35%
left: 66.14%
width: 10%
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.velux_window_2
hold_action: !include popup/cover_kokken.yaml
custom_fields:
circle: >
[[[ if (entity.state === 'on' && entity.attributes.position) {
const position = states['sensor.cover_position_kokken'].state;
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 - position / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${position}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
icon: mdi:window-closed
template: switch
- type: custom:button-card
entity: switch.cover_gang
style:
top: 16.35%
left: 55.18%
width: 10%
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.velux_window
hold_action: !include popup/cover_gang.yaml
custom_fields:
circle: >
[[[ if (entity.state === 'on') {
const volume = states['sensor.cover_position_gang'].state;
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 - volume / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
icon: mdi:window-closed
template: switch
Thanks in advance
Martin
It’s too big to fit in a forum post. No time to upload it somewhere and share (at the moment).
I don’t anymore, I just haven’t updated the screenshots. But If you really need it browse my repo history.
browser_mod.popup title: Close and then style the popup to be transparent and the card inside the popup holds the title and entities if that makes sense.
You second example is identical to mine which leads me to believe it’s the sensor.
{{ states('sensor.monitors_volume') }}
outputs int 50
Hi Mattias
Sensors seems to work fine.
Can I be because I’m using “volume” multiple times in the yaml? That is coming from you of course… is position or similar the right word here?
It shouldn’t matter since each card is isolated from each other. What’s the error message?
Does it return the state using a temp name on any working button card?
name: >
[[[ return states['sensor.cover_position_gang'].state; ]]]
There’s some math for the circle, so does this work?
name: >
[[[ return states['sensor.cover_position_gang'].state - 20; ]]]
If not, try parsing the state as an integer
name: >
[[[ return parseInt(states['sensor.cover_position_gang'].state) - 20; ]]]
2 Likes
UPDATE
Tried again, was just unable to see it.
Wuhuu, I hope? Didn’t manage to integrate it into the circle?
Hi again
No error messages. Just doesn’t appear?
I unsure what to do with that? Remove all custom field config and replace with, doesn’t help in either 3 cases:
Blockquote
name: >
[[[ return states[‘sensor.cover_position_gang’].state; ]]]
Sorry but here I’m really not that experienced 
For all who are interested, here’s my lovelace config:
https://mega.nz/file/zSB2jKjZ#XULaa_Mg3j76uQBnPcj-t7iL8CHKIDyoJM_wE9uH_dc
3 Likes
no one really asked?
- service: browser_mod.popup
service_data:
entities:
- light.bed_light
- light.kitchen_lights
- light.ceiling_lights
deviceID:
- d6416720-bbb8badf
doesnt work? do i need a picture element to call this or something?
how do i get a light botton to popup for the lights i want to turn on?
- type: 'custom:button-card'
name: 'Tänd lampan'
tap_action:
no one really asked?
Actually some did.
doesnt work?
your example leaves out things in my example
There’s also the 🔹 Browser_mod - turn your browser into a controllable device, and a media_player thread.
1 Like
- type: 'custom:button-card' name: 'Lights' tap_action: service: browser_mod.popup service_data: entities: - light.bed_light - light.kitchen_lights - light.ceiling_lights deviceID: - d6416720-bbb8badf
sensor:
...
- platform: template
sensors:
...
placeholder:
value_template: ' '
You can search repos
https://github.com/matt8707/hass-config/search?l=YAML&q=placeholder