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
width: 10%
tap_action:
action: toggle
hold_action: !include popup/studio_monitorer.yaml
custom_fields:
icon_monitors: >
[[[ if (entity.state === 'on') {
return '<svg viewBox="0 0 50 50"><style>@keyframes animate{35%{transform: scale(0.8); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}36%{transform: translateY(0%);}49%{transform: scale(1.25);}63%{transform: scale(0.85); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}77%{transform: scale(1.15); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}95%{transform: scale(1);}}.animate{animation: animate 1.4s; transform-origin: center;}@keyframes rubber{0%{transform: scale(1);}40%{transform: scale(1);}49%{transform: scale(0.95);}63%{transform: scale(1);}77%{transform: scale(0.95);}100%{transform: scale(1);}}.rubber{animation: rubber 1.3s; transform-origin: center;}</style>
<g class="rubber"><path fill="#686868" d="M35.8 46.9H14.2c-1.1 0-2-1-2-2.3V6.7c0-1.3.9-2.3 2-2.3h21.5c1.1 0 2 1 2 2.3v37.9c0 1.2-.9 2.3-1.9 2.3z"/><path fill="#2a2a2a" d="M39.2 1H10.8C9.4 1 8.3 2.1 8.2 3.5v42.9a2.65 2.65 0 0 0 2.6 2.6h28.3c1.4 0 2.5-1.2 2.6-2.6V3.5c0-1.4-1.1-2.5-2.5-2.5zM25 7c1.3 0 2.4 1.1 2.4 2.4s-1.1 2.4-2.4 2.4-2.4-1.1-2.4-2.4C22.5 8 23.6 7 25 7zm10.2 35.5l-.4 1.9s-.2.6-.6.6H15.8c-.4 0-.6-.6-.6-.6s-.1-1.1-.4-1.9.6-.9.6-.9h19.3c0-.1.8-.1.5.9z"/> </g> <path class="animate" fill="#e5dd00" d="M25 15.7c-6.2 0-11.3 5.1-11.3 11.3S18.8 38.3 25 38.3 36.3 33.2 36.3 27c-.1-6.3-5.1-11.3-11.3-11.3zm0 14.5a3.33 3.33 0 0 1-3.3-3.3 3.33 3.33 0 0 1 3.3-3.3 3.33 3.33 0 0 1 3.3 3.3c-.1 1.9-1.5 3.3-3.3 3.3z"/></svg>'; }
else { return '<svg viewBox="0 0 50 50"><path fill="#9da0a2" d="M25 18.6c-4.6 0-8.4 3.8-8.4 8.4s3.8 8.4 8.4 8.4 8.4-3.8 8.4-8.4-3.7-8.4-8.4-8.4zm0 11.7a3.33 3.33 0 0 1-3.3-3.3 3.33 3.33 0 0 1 3.3-3.3 3.33 3.33 0 0 1 3.3 3.3c0 1.8-1.4 3.3-3.3 3.3zM39.2 1H10.9C9.4 1 8.3 2.1 8.3 3.6v42.9a2.65 2.65 0 0 0 2.6 2.6h28.3a2.65 2.65 0 0 0 2.6-2.6v-43C41.7 2 40.5.9 39.2 1zM25 7c1.3 0 2.4 1.1 2.4 2.4s-1.1 2.4-2.4 2.4-2.4-1.1-2.4-2.4S23.7 7 25 7zm10.3 35.5l-.4 1.9s-.2.6-.6.6H15.8c-.4 0-.6-.6-.6-.6l-.4-1.9c-.2-.9.6-.9.6-.9h19.3s.9.1.6.9zM25 38.2c-6.2 0-11.3-5.1-11.3-11.3a11.29 11.29 0 1 1 22.6 0c.1 6.3-5 11.3-11.3 11.3z"/></svg>'; } ]]]
circle: >
[[[ if (entity.state === 'on') {
const volume = states['sensor.monitors_volume'].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>`; } ]]]
styles:
custom_fields:
icon_monitors:
[top: 11%, left: 7%, width: 2.8vw, position: absolute]
ernout
(Ernout)
September 16, 2020, 11:49am
551
Thanks for that @Mattias_Persson ! Its no must have but I really liked the look of it.
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; ]]]
david1
(David)
September 20, 2020, 12:04am
554
how do you get popup information in its own card like this?
1 Like
Hey @Mattias_Persson , can u post the config of the sensor.placeholder here? i`m stucked on this.
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
spudje
September 20, 2020, 10:39am
558
3 Likes
david1
(David)
September 20, 2020, 4:33pm
560
- 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
sensor:
...
- platform: template
sensors:
...
placeholder:
value_template: ' '
You can search repos
https://github.com/matt8707/hass-config/search?l=YAML&q=placeholder
If I add the name template to my config it looks like this.
You’ve changed something, and you don’t know, I certainly don’t
Wow, Thanks. Sorry about that, i have searched before and somehow didn’t show anything. Anyway thaks man.
@Mattias_Persson , another question. Did you use a temporary token on your plex recently added or a developer token? its seens the temporary token can be valid for some hour or years depend on the case.
I followed the three steps
I’ve never had to update it
jdmartinez
(Juan Diego Martínez)
September 23, 2020, 6:40am
568
@Mattias_Persson First of all, thank you very much for sharing your config, it has been very very inspring.
I’m changing my mobile UI and, with your permission, I’ve borrowed some of your ideas, specifically the SVG generation for the states.
I’ve got a question about that: how can I reuse SVG generation to include multiple states in a button-card?
Example: a button-card for presence detection that includes charging level and state for multiple devices. Something like that:
Thank you very much.
1 Like