Ahhh perfect. Thanks
Hi @Mattias_Persson ,
Your Lovelace Dashboard has been a big inspiration for me to create my own Dashboard gaining some insights based on your work.
At present, i am trying to figure out the missing puzzle to my Custom Light Popup. I see that you have flawlessly added the RGB wheel within the slider button pop-up.
Will you be able to share how you have got this to work, i have been looking up your yaml files that you have shared and not being able to find out the correct solution.
As shown in my code below, I’m only able to get this RGB Wheel to be called using the Settings feature inside the light-popup card.
popup:
type: custom:light-popup-card
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
settings:
openButton: Details
closeButton: Close
settingsPosition: top
settingsCard:
type: custom:light-entity-card
cardOptions:
entity: this
hide_header: false
persist_features: true
show_slider_percent: true
full_width_sliders: true
brightness: true
color_temp: true
white_value: true
color_wheel: true
color_picker: true
style: |
ha-card {
--ha-card-background: none;
width: 400px;
}
Would be grateful if you’re able to guide me in the right way, on how to get it done right.
Cheers
Thanasegar
The bottom colors are called actions. At the time light-popup-card didn’t support fire-dom-event (browser_mod popups) so I used button card instead button_card_templates.yaml#L548.
fire-dom-event is supported now Release Version 0.5 · DBuit/light-popup-card · GitHub so it should work “out-of-the-box”.
EDIT:
The “RGB wheel” card is called GitHub - ljmerza/light-entity-card: Control any light or switch entity
I can’t be the only person who hasn’t got a clue how to install and set this up?! I’ve read the first 200 posts and nobody has asked, so am feeling pretty stupid now.
If anyone can point me in the direction, I’m happy to do all the reading required. Just don’t even know where to start. 
need to coyp the files grom GH and edit as your need
thanks for the response. all that stuff goes in the config folder? and then I incorporate the stuff from the configuration.yaml to my own?
do i need any other stuff installed, beyond the standard home assistant package + these files/folders?
Can you share the code of your dashboard? after you make it work.
thank you
oh amazing thanks. ha yeah thats the 1660th post or something. I’d have never got that far!
Let’s say I want to change a button when clicked a screen popups just like the info tab in the sidebar… I have this :
- type: custom:button-card
name: Automation
tap_action:
!include popup/sidebar_automation.yaml
hold_action:
action: none
what am I doing wrong ?
I would like to implement a button in my lovelace UI that represents a room and as such collects all the data available into that room, either passing the entities to the templates (is it possible?) or fetching among the groups of entities.
For the button card I would like something similar to dwain’s dashboard:
Is there anything ready to use for Mattias’ interface that you can share?
Thanks!
Is there anyone having the SVG of HUE Ensis lamp??
Here is an Alexa svg icon:
icon_alexa:
custom_fields:
icon: >
[[[
const color = (variables.state === 'playing') ? '#00caff' : '#ffffff';
return `
<svg viewBox="0 0 50 50">
<path d="m25 6.25a18.75 18.75 0 0 0-2.5391 37.305v-3.8086c0-1.0742-0.6836-2.0508-1.6602-2.3438a13.086 13.086 0 1 1 17.285-11.914v0.0977a13.77 13.77 0 0 1 0 0.48828v0.0976a12.305 12.305 0 0 1 0 0.29297 12.695 12.695 0 0 1 0 0.39063v0.19531c-1.7578 10.547-15.527 16.504-15.625 16.504a18.945 18.945 0 0 0 2.5391 0.19532 18.75 18.75 0 0 0 0-37.5" fill="${color}" stroke-width=".097656"/>
</svg>
`;
]]]
I’m trying to change the color_fill of the circle depending on the state number.
I tried all kinds of different things but nothing works.
Could anyone help out?
custom_fields:
circle_current: >
[[[ {
const aqi = Math.round(states['sensor.blanco_way_air_quality_index'].state);
const stroke_color = states['sensor.blanco_way_air_quality_index'].state > 200 ? '#b2b2b2' : '#313638';
if (aqi < 50) {
return `fill_color = #FF8500`;
}
if (aqi >50 && aqi <100) {
return `fill_color = #FF8500`;
}
const radius = 28;
return `<svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="1.5" fill="${fill_color}" style="
transform: rotate(-90deg); transform-origin: 50% 50%; " />
<text x="50%" y="54%" fill="#f7f8fa" font-size="22" text-anchor="middle" alignment-baseline="middle">${aqi}<tspan font-size="10"></tspan></text></svg>`; } ]]]
Try:
custom_fields:
circle_current: >
[[[
let aqi = Math.round(states['sensor.blanco_way_air_quality_index'].state);
let fill_color = (aqi < 50) ? '#FF8500' : (aqi > 50 && aqi < 100) ? '#FF8500' : '<your else color here>';
stroke_color = (states['sensor.blanco_way_air_quality_index'].state > 200) ? '#b2b2b2' : '#313638';
const radius = 28;
return `<svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="1.5" fill="${fill_color}" style="transform: rotate(-90deg); transform-origin: 50% 50%; " />
<text x="50%" y="54%" fill="#f7f8fa" font-size="22" text-anchor="middle" alignment-baseline="middle">${aqi}<tspan font-size="10"></tspan></text></svg>`;
]]]
You may also want to change the color if it’s between 50 and 100 (they are the same actually)
Thanks @svalmorri
(yes I forgot to change the color in the example I posted, sorry)
I tried with this and it still doesn’t work. Did I do it wrong?
I’m also trying to change the color of the button depending on index numbers.
Buttons don’t show up at all right now.
Thanks
state:
- operator: template
value: >
[[[ return (states['sensor.blanco_way_air_quality_index'].state > 150) ]]]
styles:
card: [background-color: "rgba(255, 92, 76, 0.8)"] #RED
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- operator: template
value: >
[[[ return (states['sensor.blanco_way_air_quality_index'].state > 100) && (states['sensor.blanco_way_air_quality_index'].state < 150) ]]]
styles:
card: [background-color: "rgba(255, 210, 102, 0.8)"] #ORANGE
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- operator: template
value: >
[[[ return (states['sensor.blanco_way_air_quality_index'].state > 50) && (states['sensor.blanco_way_air_quality_index'].state < 100) ]]]
styles:
card: [background-color: "rgba(252, 255, 113, 0.8)"] #YELLOW
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- operator: template
value: >
[[[ return (states['sensor.blanco_way_air_quality_index'].state < 50) ]]]
styles:
card: [background-color: "rgba(156, 255, 214, 0.8)"] #GREEN
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
custom_fields:
circle_current: >
[[[
let aqi = Math.round(states['sensor.blanco_way_air_quality_index'].state);
let fill_color = (aqi < 50) ? '#00BA32' : (aqi > 50 && aqi < 100) ? '#FFD700' : (aqi > 100 && aqi < 150) ? '#FF8500' : (aqi > 150 ) ? '#FF3006' : '#8C0C00>';
stroke_color = (states['sensor.blanco_way_air_quality_index'].state > 200) ? '#b2b2b2' : '#313638';
const radius = 28;
return `<svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="${radius}" stroke="${stroke_color}" stroke-width="1.5" fill="${fill_color}" style="transform: rotate(-90deg); transform-origin: 50% 50%; " />
<text x="50%" y="54%" fill="#f7f8fa" font-size="22" text-anchor="middle" alignment-baseline="middle">${aqi}<tspan font-size="10"></tspan></text></svg>`;
]]]
@Mattias_Persson
what template can i use to have same kind of card layout but with my camera setup?
- type: custom:button-card
entity: camera.blueiris_reolinkrlc_520
show_live_stream: true
name: Entre
show_name: false
size: 100%
styles:
card:
- font-size: 12px
# template:
# - base
I figured it out… Was missing the const declaration for ‘stroke_color’
How do I change the width of these popups?
I just can’t find it.
I’m using this:
action: fire-dom-event
browser_mod:
command: popup
title: Awair CO2 in Living Room
style:
hui-vertical-stack-card:
$hui-history-graph-card$ : |
.content {
padding: 0.2em 1em 1.2em 1.7em !important;
}
$: |
button-card {
align-self: center;
padding: 0.5em 0 0.5em 0;
}
I went into theme.yaml but I couldn’t find a width parameter anywhere in hui-vertical-stack-card.
EDIT: I figured it out. Changed the styling.
style:
.: |
:host .content {
width: 70em;
height: 100%;
padding: 2.1em 1.9em 1.9em 2.7em;
}