I’ve already tried, also double_tap_action… nothing was triggered 
and HA shows 0 error.
Any idea?
Thanks @xyboox, you pointed me to the right direction. I’ve an extra indentation for my brower_mod: integration in my configuration.yaml.
The popup-up shows perfectly now 
ok… I’m glad it fixed your issue :))
Ok, so i resized my background to fit the 4:3 ratio, and it works.
But what about the sidebar? do i have to play with the top property ? don’t get how it works
EDIT: ok by playing with the width property, i managed to make it fit. thxs!
1 Like
A while ago I read some posts here of people experiencing slower/slugging dashboards. I mentioned that my tablet was completely useless overnight. My tablet would freeze when trying to even load the dashboard (only fix was force closing Fully Kiosk Browser). Though I don’t use UI, I do have a similar design of my own and use card-mod alot. I had a suspicion it was card-mod, since that is also heavy used in this dashboard.
I haven’t seen other reports in the card-mod thread, so decided to test myself: 🔹 Card-mod - Add css styles to any lovelace card
I now downgraded to 2.0.3 and notice it works a LOT faster on all my devices. And my tablet works as before as well, successfully loading the dasbhoard again. I wanted to post this here as well, perhaps there are other people noticing this and are willing to test this as well. This could help in creating a ticket if more people experience this.
If you decide to test this, make sure you clear caches and the browser is loading 2.0.3 through developer tools.
2 Likes
Hi, could you share your svg icon for the ambilight please ?
Is anyone could share a windows animated svg icon please.
I’ve tried but not able to make one.
Here is my custom field code:
icon_tv: |
[[[
const boolean = states['light.ambilight'].state;
const style = `
<style>
.fade-in1 {
animation: fadeIn1 ease 3s;
animation-fill-mode: forwards;
}
@keyframes fadeIn1 {
0% {opacity:0;}
97% {opacity:1;}
98% {opacity:0.9;}
99% {opacity:0.8;}
100% {opacity:0.7;}
}
.fade-in2 {
animation: fadeIn2 ease 3s;
animation-fill-mode: forwards;
}
@keyframes fadeIn2 {
0% {opacity:0;}
98% {opacity:0.7;}
99% {opacity:0.6;}
100% {opacity:0.5;}
}
.fade-in3 {
animation: fadeIn3 ease 3s;
animation-fill-mode: forwards;
}
@keyframes fadeIn3 {
0% {opacity:0;}
100% {opacity:0.3;}
}
.fade-out1 {
animation: fadeOut1 ease 2s;
animation-fill-mode: forwards;
}
@keyframes fadeOut1 {
0% {opacity:1;}
100% {opacity:0;}
}
.fade-out2 {
animation: fadeOut2 ease 2s;
animation-fill-mode: forwards;
}
@keyframes fadeOut2 {
0% {opacity:0.6;}
100% {opacity:0;}
}
.fade-out3 {
animation: fadeOut3 ease 2s;
animation-fill-mode: forwards;
}
@keyframes fadeOut3 {
0% {opacity:0.3;}
100% {opacity:0;}
}
@keyframes animate_on {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.animate_on {
animation: animate_on 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
@keyframes animate_off {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
.animate_off {
animation: animate_off 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
</style>
`;
const path = `
<path d="M56,17.1v27.5H14.1V17.1H56 M58.4,14.8H11.6V47h46.7C58.4,47,58.4,14.8,58.4,14.8z M21.9,51.2h26.3c0.6,0,1.1-0.4,1.1-1v-0.3c0-0.6-0.4-1.1-1-1.1H21.9c-0.6,0-1.1,0.4-1.1,1V50c0,0.3,0.1,0.6,0.3,0.8C21.3,51,21.6,51.1,21.9,51.2z"/>
`;
const gradient = `
<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="20.401" y1="43" x2="30.817" y2="27.74">
<stop offset="0" stop-color="#64acb7"/>
<stop offset="1" stop-color="#7fdbe9"/>
</linearGradient>
<linearGradient id="B" gradientUnits="userSpaceOnUse" x1="10" y1="110" x2="100" y2="40" >
<stop stop-color="#FF5B99" offset="0%"/>
<stop stop-color="#FF5447" offset="20%"/>
<stop stop-color="#FF7B21" offset="40%"/>
<stop stop-color="#EAFC37" offset="60%"/>
<stop stop-color="#4FCB6B" offset="80%"/>
<stop stop-color="#51F7FE" offset="100%"/>
</linearGradient>
`;
if (entity.state === 'off') {
return `
<svg viewBox="0 0 70 70"> ${style} ${gradient}
<path class="fade-out1" d="M 11.6 13.5 L 58.4 13.5 L 58.4 14.8 L 11.6 14.8 ZM 10.6 13.5 L 11.9 13.5 L 11.9 47 L 10.6 47 Z M 58.4 13.5 L 59.7 13.5 L 59.7 47 L 58.4 47 Z" fill="url(#B)"/>
<path class="fade-out2" d="M 9.3 13.5 L 10.6 13.5 L 10.6 47 L 9.3 47 Z M 9.3 12.2 L 61 12.2 L 61 13.5 L 9.3 13.5 Z M 59.7 13.5 L 61 13.5 L 61 47 L 59.7 47 Z " fill="url(#B)"/>
<path class="fade-out3" d="M 9.3 10.9 L 61 10.9 L 61 12.2 L 9.3 12.2 Z M 61 10.9 L 62.3 10.9 L 62.3 47 L 61 47 Z M 8 10.9 L 9.3 10.9 L 9.3 47 L 8 47 Z" fill="url(#B)"/>
<path class="animate_off" d="M14.1,17.1H56v27.5H14.1V17.1z" fill="url(#A)"/> ${path}
`;
}
if (entity.state === 'on' && boolean === 'on') {
return `
<svg viewBox="0 0 70 70"> ${style} ${gradient}
<path d="M14.1,17.1H56v27.5H14.1V17.1z" fill="#20262890"/>
<path d="M 7.9 47 L 11.5 47 L 11.6 11.4 L 8 11.4 Z M 11.6 11.4 L 58.4 11.4 L 58.4 14.8 L 11.6 14.8 Z M 58.4 11.4 L 62 11.4 L 62 47 L 58.4 47 Z" fill="#ffff"/>
<path class="animate_on" d="M14.1,17.1H56v27.5H14.1V17.1z" fill="url(#A)"/> ${path}
<path class="fade-in1" d="M 11.6 13.5 L 58.4 13.5 L 58.4 14.8 L 11.6 14.8 ZM 10.6 13.5 L 11.9 13.5 L 11.9 47 L 10.6 47 Z M 58.4 13.5 L 59.7 13.5 L 59.7 47 L 58.4 47 Z" fill="url(#B)"/>
<path class="fade-in2" d="M 9.3 13.5 L 10.6 13.5 L 10.6 47 L 9.3 47 Z M 9.3 12.2 L 61 12.2 L 61 13.5 L 9.3 13.5 Z M 59.7 13.5 L 61 13.5 L 61 47 L 59.7 47 Z " fill="url(#B)"/>
<path class="fade-in3" d="M 9.3 10.9 L 61 10.9 L 61 12.2 L 9.3 12.2 Z M 61 10.9 L 62.3 10.9 L 62.3 47 L 61 47 Z M 8 10.9 L 9.3 10.9 L 9.3 47 L 8 47 Z" fill="url(#B)"/>
`;
}
if (entity.state === 'on' && boolean === 'off') {
return `
<svg viewBox="0 0 70 70"> ${style} ${gradient}
<path d="M14.1,17.1H56v27.5H14.1V17.1z" fill="#20262890"/>
<path d="M 7.9 47 L 11.5 47 L 11.6 11.4 L 8 11.4 Z M 11.6 11.4 L 58.4 11.4 L 58.4 14.8 L 11.6 14.8 Z M 58.4 11.4 L 62 11.4 L 62 47 L 58.4 47 Z" fill="#ffff"/>
<path d="M14.1,17.1H56v27.5H14.1V17.1z" fill="url(#A)"/> ${path}
<path class="fade-out1" d="M 11.6 13.5 L 58.4 13.5 L 58.4 14.8 L 11.6 14.8 ZM 10.6 13.5 L 11.9 13.5 L 11.9 47 L 10.6 47 Z M 58.4 13.5 L 59.7 13.5 L 59.7 47 L 58.4 47 Z" fill="url(#B)"/>
<path class="fade-out2" d="M 9.3 13.5 L 10.6 13.5 L 10.6 47 L 9.3 47 Z M 9.3 12.2 L 61 12.2 L 61 13.5 L 9.3 13.5 Z M 59.7 13.5 L 61 13.5 L 61 47 L 59.7 47 Z " fill="url(#B)"/>
<path class="fade-out3" d="M 9.3 10.9 L 61 10.9 L 61 12.2 L 9.3 12.2 Z M 61 10.9 L 62.3 10.9 L 62.3 47 L 61 47 Z M 8 10.9 L 9.3 10.9 L 9.3 47 L 8 47 Z" fill="url(#B)"/>
</svg>
`;
}
if (entity.state === 'off' && boolean === 'on') {
return `
<svg viewBox="0 0 70 70"> ${style} ${gradient}
<path d="M14.1,17.1H56v27.5H14.1V17.1z" fill="#20262890"/>
<path d="M 7.9 47 L 11.5 47 L 11.6 11.4 L 8 11.4 Z M 11.6 11.4 L 58.4 11.4 L 58.4 14.8 L 11.6 14.8 Z M 58.4 11.4 L 62 11.4 L 62 47 L 58.4 47 Z" fill="#ffff"/>
<path d="M14.1,17.1H56v27.5H14.1V17.1z" fill="url(#A)"/> ${path}
<path class="fade-in1" d="M 11.6 13.5 L 58.4 13.5 L 58.4 14.8 L 11.6 14.8 ZM 10.6 13.5 L 11.9 13.5 L 11.9 47 L 10.6 47 Z M 58.4 13.5 L 59.7 13.5 L 59.7 47 L 58.4 47 Z" fill="url(#B)"/>
<path class="fade-in2" d="M 9.3 13.5 L 10.6 13.5 L 10.6 47 L 9.3 47 Z M 9.3 12.2 L 61 12.2 L 61 13.5 L 9.3 13.5 Z M 59.7 13.5 L 61 13.5 L 61 47 L 59.7 47 Z " fill="url(#B)"/>
<path class="fade-in3" d="M 9.3 10.9 L 61 10.9 L 61 12.2 L 9.3 12.2 Z M 61 10.9 L 62.3 10.9 L 62.3 47 L 61 47 Z M 8 10.9 L 9.3 10.9 L 9.3 47 L 8 47 Z" fill="url(#B)"/>
`;
}
]]]
1 Like
Thxs a lot.
I use this in my sidebar to show weekly incidence of my region.
<b>Inzidenzen</b><br>
<b>Bayern: <font color='#e89210'>{{ states('sensor.inzidenz_bayern')| round(0) }}</b></font><br>
<b>Memmingen: <font color='#e89210'>{{ states('sensor.inzidenz_memmingen')| round(0) }}</b></font><br>
<b>Unterallgäu: <font color='#e89210'>{{ states('sensor.inzidenz_unterallgau')| round(0) }}</b></font><br>
I want the numbers to be colored according to value.
Below 35 green
Between 35-50 orange
Over 100 red.
I dont have a clue how to realize this. Can anybody give me a hint?
From where you get this sensor?
sensor.inzidenz_bayern
First I was using this integration: https://github.com/thebino/rki_covid
But he has problems with the data source. So for the moment I changed to a rest sensor.
platform: rest
name: Inzidenz Bayern
resource: "https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/Coronaf%C3%A4lle_in_den_Bundesl%C3%A4ndern/FeatureServer/0/query?where=LAN_ew_GEN%20%3D%20%27BAYERN%27&outFields=LAN_ew_AGS,LAN_ew_GEN,cases7_bl_per_100k&outSR=4326&f=json"
value_template: '{{ value_json.features[0].attributes.cases7_bl_per_100k | round(1) }}'
scan_interval: 3600
2 Likes
Hi @Mattias_Persson, where does those vacuum sensors come from please? i checked evrywhere but not able to find it :
- sensor.main_filter
- sensor.main_brush
- sensor.sensor
- sensor.right_side_brush
####################################################
# #
# VACUUM #
# #
####################################################
roborock_filter:
friendly_name: Filtre
icon_template: custom:roborock-filter
unit_of_measurement: '%'
value_template: >
{{ ((states('sensor.main_filter') | int / 60) / 150 * 100) | round }}
roborock_mainbrush:
friendly_name: Brosse Principale
icon_template: custom:roborock-mainbrush
unit_of_measurement: '%'
value_template: >
{{ ((states('sensor.main_brush') | int / 60) / 300 * 100) | round }}
roborock_sensors:
friendly_name: Capteurs
icon_template: custom:roborock-sensor
unit_of_measurement: '%'
value_template: >
{{ ((states('sensor.sensor') | int / 60) / 30 * 100) | round }}
roborock_sidebrush:
friendly_name: Brosses latérales
icon_template: custom:roborock-sidebrush
unit_of_measurement: '%'
value_template: >
{{ ((states('sensor.right_side_brush') | int / 60) / 200 * 100) | round }}
Thxs
1 Like
Just curiosity , cause i found a way to make mine :
{{((state_attr('vacuum.roborock_vacuum', 'main_brush_left') | int *100 )/300) | round }}
I REALLY want this look. But I have copied and pasted everything and there are errors everywhere. What is it that I have to do more myself? What parts? Here is how it looks for me:
Also, I have had to flush and re-install my whole HA several times after trying to restart the server when I tried to just add the first lines in the configuration file.
Is there any way I can prevent that from happening that everything doesn’t crash and I have to re-install everything after trying to restart?
You have to solve one error after the other.
The first that I see, is that you didnt installed “swipe-card”.
And please, before doing anything other, check that every entity that is used, is a existing entity. If you refer to only one entity that doesnt exist, it could throw an error.
Go trough the whole configuration (ui-lovelace.yaml, button-templates, etc…) and check every single entity. Replace all the entities which don’t exist with similar entities from your setup.
1 Like
It’s not a “plug and play” design. You must adjust evrything manually to make it works, with an understanding of how it works
I thought maybe there would be some instructions in readme about that. But allright. And when it comes to swipe-card and so on I thought that came with the package. But okay. Good that I have something to do coming weekend then.
The swipe-card is included. But did you included the resource correctly?
The best thing is as @Djal mentioned, take your time, understand how it works and then start.
I needed two days to fully understand how it works and get it running. And a few more weeks to customize it for my dashboard.
1 Like
exactly. long story short, it consists in a picture-element wich takes the whole screen with all inside (essentially button-card but not only). take your time and you will manage to do it.