Help me find! Where is the apexcharts chart code? I can’t find how to translate “Söndag” into my language!
1 Like
Thank you!
I want to display the light status on a custom button-card using state vs. icon to show different activities. Within custom button-card, can I use two distinct entities: one for showing the light state and another for highlighting the icon? Any suggestions from experts?
Holy, many thanks!! Where did you manage to get the SVG’s from?
Hello everybody!
I need you to give me a tip on how to change the sidebar. I’m a perfect beginner and would like to know how to change this layout by adding animated weather card, agenda, etc.
Congratulations on the project, it’s magnificent.
I have created an additional light template in the button_card_templates folder named light_colored. Can anyone tell me how to get the circle slider dimmer to work on that template? I think I need to add light_colored in the circle.yaml but I am not sure I am doing it correctly.
/* * * * * * * * * * * * * * * * * *
* *
* CIRCLE *
* *
* * * * * * * * * * * * * * * * * */
let circle = (state, input, unit) => {
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${c};
stroke-dashoffset: ${typeof input === 'number' && c - input / 100 * c};
stroke-width: var(--c-stroke-width);
stroke: ${state ? 'var(--c-stroke-color-on)' : 'var(--c-stroke-color-off)'};
fill: ${state ? 'var(--c-fill-color-on)' : 'var(--c-fill-color-off)'};
}
text {
font-size: var(--c-font-size);
font-weight: var(--c-font-weight);
letter-spacing: var(--c-letter-spacing);
fill: var(--c-font-color);
}
tspan {
font-size: var(--c-unit-font-size);
}
#circle_value, tspan {
text-anchor: middle;
dominant-baseline: central;
}
</style>
<circle id="circle_stroke" cx="25" cy="25" r="${r}"/>
<text id="circle_value" x="50%" y="52%">${input}${tspan}${unit}</tspan></text>
</svg>
${domain === 'light', 'light_colored' && `
<input id="circle_slider" type="range" min="0" max="100" value="${input}">
`}
`;
}
/* * * * * * * * * * * * * * * * * *
* *
* LIGHT *
* *
* * * * * * * * * * * * * * * * * */
if (domain === 'light_colored', 'light' && state) {Alright I’m back with more questions. I am trying to take on animating an icon, and am failing miserably. I have the icon created as an svg. I’m wanting an animated fireplace icon that flickers when the device is turned on. Anyone care to walk me through this process, or have one that I can use?
Also,
I used a picture element card of a remote in a pop card. How can I resize the entire remote to make it smaller. The code is below. Thanks!
1 Like
share fireplace svg
I am trying to get the color wheel to pop-up without any luck. The custom-light-card works fine and the actions at the bottom change the color of the light but the color wheel will not pop-up. If I move the light-enitity-card to open on double tap of the button it works fine. Any insight? I have copied @Laffer 's light template from here with the same result.
This is what my light.yaml currently looks like.
light:
template:
- base
- circle
- loader
variables:
circle_input: >
[[[ return entity === undefined || Math.round(entity.attributes.brightness / 2.54); ]]]
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
style: >
--popup-background-color: transparent;
content:
type: custom:mod-card
card_mod:
style: |
#states {
padding-top: 0.5em;
}
card:
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)
displayType: slider
actionSize: 4.5em
actionsInARow: 2
actions:
- action: call-service
service: light.turn_on
color: "#d8d9e1"
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 153
- action: call-service
service: light.turn_on
color: "#d5b08d"
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 326
- action: call-service
service: light.turn_on
color: "#ce944b"
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 500
- action: fire-dom-event
image: >-
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
50 50"%3E%3Cstyle%3Esvg%7Bbackground:radial-gradient(circle,rgba(255,255,
255,1) 0%25,rgba(255,255,255,0) 80%25),conic-gradient(%237827e6,%23e622e7,
%23e40588,%23e41919,%23e5691e,%23e8e22e,%237de629,%2334e828,%2333e75c,
%2334e8e0,%23207de5,%231227e5,%237827e6)%7D%3C/style%3E%3C/svg%3E
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: false
2 Likes
I made a fireplace icon a while back, but got sidetracked. This is what I’m currently using.
And this is what it looks like while it’s off
icon_fireplace:
styles:
custom_fields:
icon:
- width: 110%
- margin-top: -10%
- margin-left: -5%
custom_fields:
icon: >
[[[
let
frame = ` <g class="frame"> <polygon points="3.5,5.8 3.5,8.1 6.1,10.8 43.9,10.8 46.5,8.1 46.5,5.8 "/> <path d="M42.2,11.9H7.8v28h-2l-2.3,2.3v2h43v-2l-2.3-2.3h-2V11.9z M14.2,39.9V20.5c0,0,5.4-2.2,10.8-2.2s10.8,2.2,10.8,2.2v19.4 H14.2z"/> </g> `,
back = ` <path class="back" d="M35.8,39.9V20.5c0,0-5.4-2.2-10.8-2.2s-10.8,2.2-10.8,2.2v19.4H35.8z"/>`,
flame1 = ` <path class="flame1" d="M15.9,34.7c0,0-0.3,0.4-0.4,0.6l-0.1,0.1c-0.5,1.1-0.1,2.4,0.7,3.2c0.8,0.7,1.9,0.9,2.9,0.8 c1-0.1,1.9-0.7,2.4-1.5c0.1-0.3,0.3-0.5,0.3-0.8c0.1-0.2,0.1-0.5,0.1-0.7c0.1-1-0.4-2.1-1.2-2.8c0.4,0.8,0.3,1.8-0.3,2.5 c0,0,0,0.1-0.1,0.1c-0.1,0.1-0.2,0.1-0.3,0.1C20,36,20,35.9,20,35.8c0-0.1,0-0.1,0-0.2c0.6-1.5,0.1-3.3-1.1-4.3 c-0.3-0.3-0.7-0.5-1.2-0.6c0.5,0.9,0.3,2-0.4,2.7c-0.3,0.3-0.7,0.5-1,0.8C16.1,34.4,16,34.5,15.9,34.7"/>`,
flame2 = ` <path class="flame2" d="M29.4,31.8c-0.2-0.2-0.4-0.4-0.6-0.6c-0.5-0.5-1.1-0.8-1.6-1.3c-1.2-1.1-1.4-3-0.7-4.4c-0.7,0.2-1.4,0.6-1.9,1 c-2,1.6-2.8,4.4-1.8,6.9c0,0.1,0.1,0.2,0.1,0.3c0,0.2-0.1,0.3-0.3,0.4c-0.2,0.1-0.4,0-0.5-0.1c0,0-0.1-0.1-0.1-0.1 c-0.9-1.1-1-2.7-0.4-4c-1.3,1.1-2,2.8-1.9,4.5c0,0.4,0.1,0.8,0.2,1.2c0.1,0.5,0.3,0.9,0.5,1.3c0.8,1.3,2.3,2.3,3.8,2.5 c1.7,0.2,3.4-0.1,4.7-1.2c1.4-1.3,1.9-3.3,1.2-5.1L30,32.8C29.8,32.4,29.4,31.8,29.4,31.8 M26.9,36.7c-0.2,0.2-0.6,0.4-0.8,0.5 c-0.9,0.3-1.7-0.1-2.2-0.6c0.9-0.2,1.5-0.9,1.6-1.6c0.1-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.1-1.1,0.1-1.6c0.1,0.3,0.3,0.6,0.5,0.8 c0.6,0.8,1.5,1.1,1.7,2.2c0,0.1,0,0.2,0,0.3C27.7,35.5,27.4,36.2,26.9,36.7L26.9,36.7z"/>`,
flame3 = ` <path class="flame3" d="M34.1,34.5c-0.1-0.2-0.3-0.3-0.4-0.4c-0.3-0.3-0.7-0.5-1-0.8c-0.7-0.7-0.9-1.9-0.4-2.9 c-0.5,0.1-0.9,0.4-1.2,0.7c-1.3,1-1.8,2.9-1.2,4.5c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0-0.3-0.1 c0,0-0.1-0.1-0.1-0.1C28.7,35,28.6,34,29,33.2c-0.8,0.7-1.3,1.8-1.2,2.9c0,0.3,0.1,0.5,0.1,0.8c0.1,0.3,0.2,0.6,0.4,0.9 c0.5,0.9,1.5,1.5,2.5,1.6c1.1,0.1,2.2-0.1,3-0.8c0.9-0.8,1.2-2.2,0.8-3.3l-0.1-0.1C34.4,34.9,34.1,34.5,34.1,34.5"/>`;
if (variables.state === 'off') {
return `
<svg viewBox="0 0 50 50">
<style>
.frame { fill: #9da0a2; }
</style>
${frame}</svg>
`;
}
if (variables.state_on) {
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes flames {
0% { transform: scale(1, 0.95) rotateY(0deg) skew(0deg); }
25% { transform: scale(0.9, 1.1) rotateY(30deg) skew(3deg); }
50% { transform: scale(1, 0.95) rotateY(0deg) skew(0deg); }
75% { transform: scale(0.9, 1.1) rotateY(-30deg) skew(-3deg); }
100% { transform: scale(1, 0.95) rotateY(0deg) skew(0deg); }
}
@keyframes back {
0% { fill: #ffd61f; }
50% { fill: #ffc31f; }
100% { fill: #ffd61f; }
}
.frame {
fill: #616161;
}
.back {
animation: back 0.2s linear infinite;
}
.flame1 {
fill: orangered;
animation: flames 1.3s linear infinite;
transform-origin: 37% 79%;
}
.flame2 {
fill: red;
animation: flames 1.4s linear infinite;
transform-origin: 50% 79%;
}
.flame3 {
fill: orangered;
animation: flames 1.2s linear infinite;
transform-origin: 63% 79%;
}
</style>
${back} ${frame} ${flame2} ${flame1} ${flame3} </svg>
`;
}
]]]
5 Likes
This is great! So you have separate SVG files for each component of the fireplace? I’ll use this until I can figure out how to get mine automated. Thanks a ton!
They’re separate shapes of course but all part of one svg. I just hide some of the shapes for the off position currently. I was going to add some log shapes, and eventually some extra animation transitions from on to off, and off to on.
Gotcha. Didn’t know you could separate the layers like that. I’ll mess around with that.
Very nice. Any good documentation for learning this stuff or do you just have css experience so its easy to implement?
Is there anyone else with the browser_mod pop bugged since the last update? I had everything working until yesterday. Now my pop-up cards dont work anymore and i cant find why.
Found the problem. Somehow, after the last update, the Browser_mod integration was removed from my integrations. I just added again in Settings → Devices & Services → Add Integration → Browser Mod and worked again. I hope this information can help someone with the same problem.
Heres the code for the SVG. I have tried using some of the code above with this SVG but haven’t had any luck.
What effect do you want?
Flames moving?
Flames hidden when off, flames flickering/moving when on. Thanks! If you need any icons made for yourself, let me know. I can make anything for you and save you that time.