Comments (10)
well, I am not sure just yet which causes what.
to start with: my person entities only use the mobile_app device_tracker, so it only updates when those update.
Having said that:
I have a set of person entities with customized entity_pictures showing dynamically on several Maps (see below), and they are rock solid.
The maps themselves are configured inside a config-template-card for the dark or light versions, so all possible customizations at work ;-)
however, the HA Frontend changed quite a bit, and now 'subscribes' to the entities. config-tmeplate-card always was a card in my configs that caused some serious lag/performance, thats why I was very cautious in using it.
It might be that all has come together now, and the flickering you experience is cause by the Congo-template-card updating the frontend. Did you test without it? (in other words: is it config-template-card or is it something else...)
fwiw, this is an example config:
type: conditional
conditions:
- entity: binary_sensor.family_home_united
state: 'off'
card:
type: entities
title: Family on the road
card_mod:
class: class-header-margin
entities:
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -8px -16px -16px -16px;
}
show_empty: false
filter:
exclude:
- state: home
include:
- domain: person
- type: custom:fold-entity-row
head:
type: section
label: Map
card_mod: &label
style: |
.label {
margin-left: 0px;
}
card_mod:
style: |
div#items {
margin: 16px -16px -16px -16px;
}
padding: 0
entities:
- type: custom:config-template-card
entities:
- input_select.theme
variables:
theme: states['input_select.theme'].state
card:
type: custom:auto-entities
show_empty: false
filter:
include:
- domain: person
not:
state: home
card:
type: map
hours_to_show: 48
dark_mode: ${(/ight|Dark|Matrix/).test(theme)}
card_mod:
style: |
ha-card {
box-shadow: none;
}
and it doesnt suffer the frequent updating @bratanon suffers in the linked frontend issue either. As said, rock solid currently.
HA 2022.5.0.dev20220421
Frontend 20220420.0 - latest
Custom-ui: 20220419.1
and customizations:
homeassistant:
customize:
person.marijn: &picture
hide_attributes:
- templates
templates:
entity_picture: >
var id = entity.entity_id.split('.')[1];
var sensor = 'sensor.' + id + '_picture';
if (entities[sensor]) return entities[sensor].state;
return '/local/family/' + id + '_not_home.png';
country: >
var id = entity.entity_id.split('.')[1];
var sensor= 'sensor.' + id + '_app_geocoded_location';
if (entities[sensor]) return entities[sensor].attributes.Country;
return 'Searching...'
for all person entities....
from custom-ui.
btw @ildar170975 Ildar, please try if rewriting your template in a better way helps:
icon_color: >-
if (state <= 10) return 'yellow';
if (state <= 20) return 'brown';
if (state <= 30) return 'magenta';
if (state <= 40) return 'lightblue';
if (state <= 50) return 'green';
if (state <= 60) return 'orange';
if (state <= 70) return 'purple';
if (state <= 80) return 'red';
if (state <= 90) return 'gold';
return 'cyan';
from custom-ui.
please try if rewriting your template in a better way helps:
Surely I may rewrite the code.
But from my very old Java experience these codes are supposed to give same result:
icon_color: >-
if (...) return 'yellow';
else
if (..) return 'brown';
else
return 'cyan';
vs
icon_color: >-
if (...) return 'yellow';
if (..) return 'brown';
return 'cyan';
The same approach is in C/C++ (using it from 1997).
In the 2nd method in general you MAY get wrong results in case of using do_something()
instead of return(...)
.
So I usually use the 1st method, it's a matter of habit.
my person entities only use the mobile_app device_tracker, so it only updates when those update.
I noticed a flickering in the Map card when the person
entity was not changing neither it's state nor it's attributes.
When I got rid of Custom UI and customized entity_picture
by a "traditional" way - this flickering stopped occurring.
No config-template-card
was used for the map (as I said in the 1st post).
The same was with entities inside multiple-entity-row
.
See the 2nd GIF in my 1st post.
Here flickering occurred as changing a box-shadow
(or similar) style.
The main entity in the row was a sensor (not a person
entity) with customized entity_picture
by Custom UI. Other elements of the multiple-entity-row
are this sensor's attributes. All these data were NOT changing during the test.
The config-template-card
is ONLY used inside a tap_action
for the right icon - I am using an attribute which is URL to open a weblink.
Currently I only keep using Custom UI for:
- battery level sensors (icon color green, yellow, red);
- test samples.
from custom-ui.
there are so many variables in this post, it is hard to track tbh.
I didnt say the template was wrong, I just asked you to try the cleaner method. It is what is working in my 3 test setups, so I can compare.
I need to stay at that format, as it has been working ever since the conception of the original custom-ui.
as for the multiple-entity-row: I have several card setup with that where custom:auto-entities is filled with eg
switches, (and their power and energy)
or lights:
and none of them blink at all, and have customized icons and/or color.
so hard for me to reproduce that
person entities are spot on, no blinking at all, and customized in rather an extensive way in my config.
config-template-card is a hard one for the system, and I do feel we need to keep it at a minimum, as it seems to recalculate anything in the card when the variable changes. this can truly become cumbersome depending on the embedded card config.
So if we want to get this further, I feel we need to break down in a single problem issue, and go from there
from custom-ui.
@ildar170975 I have tested your config now (for the first icon flickering problem you mentioned), and I can not reproduce the issue you having with config-template-card.
This got me thinking. As we are doing this on the client side (browser), in some cases, the browser could be the failing point.
I mean, we have no control over the client. If the client is super slow, have a bad connection, hitting a RAM usage limit or something like that, it could take a while to process our script, and change the color/icon.
Could this be the case here?
from custom-ui.
Same with the multiple-entity-row
. Can't reproduce it.
from custom-ui.
the browser could be the failing point
Could be.
But - this flickering
- on Map card (w/o
config-template-card
), - on Entities card (with
config-template-card
), - on
multiple-entity-row
(withconfig-template-card
)
a) was happening in Chrome (cache cleared many times within these last week),
b) was happening in Firefox (cache was not cleared for 2-3 months - cannot do it now, many tabs are open & history is needed),
c) stopped occurring right after rewriting these entities w/o Custom UI.
It's OK that someone do not see it.
For me that was just a reason to find other options.
I will continue testing Custom UI.
from custom-ui.
closing as this can not be reproduced.
please create a new issue on an isolated config concerning custom-ui if needed, so we can reproduce.
from custom-ui.
please be nice, and help us help you. no need to be so personally involving.
we all want a faultless experience.
I guess what I was saying is we need more to be able to boil it down to custom-ui
from custom-ui.
No need to be offended.
We tested this in a clean install of HA, and it works like it should for us. Why its not working for you in your setup is impossible for us to tell when we dont have access to your whole setup.
When not testing on a clean installation, there are so many other possibilities of failure and things that could cause the issues you are seeing, but we are unfortunately not able to investigate your specific setup.
I did test this with the cards you mentioned, and the result was fine. That why we concluded that custom-ui works when no other things interfere with it, so it has to be something special in your setup.
from custom-ui.
Related Issues (20)
- 2023.9 custom-more-info: null is not an object (near '...elector("ha-dialog") HOT 8
- TypeError: Cannot read properties of null (reading 'getElementsByClassName') HOT 2
- Struggling to get custom-ui to work HOT 4
- Uncaught error from Edge 117.0.2045.60 on Windows 10 ReferenceError: Polymer is not defined /hacsfiles/fan-control-entity-row/fan-control-entity-row.js:9:28 HOT 2
- Custom-ui templated attributes dont show in dev tools and backend Jinja templates HOT 29
- HA 2023.11 breaks more info hide_attributes, open call to assist HOT 1
- release '20231123' is broken on HACS HOT 3
- Colors not shown in companion App HOT 3
- _updateHass are called with the same unchanged states HOT 5
- Is it just my system or does custom-ui prevent yaml reloading via Location & Customizations? HOT 5
- Adding wildcard to sensor name causes error HOT 2
- icon changes defined in customize_glob stopped working on HA 2022.4 HOT 6
- list of CustomUI's not displayed in 2022.5 UI config HOT 1
- 2022.9: hide_attributes no longer functional HOT 4
- custom-ui causing issues in /Settings menu? HOT 3
- Icon color not working in 2023.1 HOT 24
- Failed to load resource: the server responded with a status of 404 (Not Found) HOT 8
- TypeError: undefined is not an object HOT 26
- MQTT sensors and dynamic icon and icon color HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from custom-ui.