The custom state switch allows me to switch between ground floor and 1st floor based on the input_select.floorplan_floor which I action via a service call button in the sidebar.
For lights_rez.yaml (same for both files, but with different images and entities):
type: picture-elements
image: /local/ui/floorplan/Rez_nuit.jpg
elements:
#all images and code above the sidebar goes here
- !include sidebar.yaml
The last part is in sidebar.yaml:
type: 'custom:group-element'
style:
height: 100%
left: 0%
top: 0%
width: 23.4765625%
elements:
- action: none
hold_action:
action: none
image: /local/ui/sidebar/sidebarBG2.png
style:
height: 100%
left: 50%
top: 50%
width: 100%
tap_action:
action: none
type: image
#and keep going with the rest of the code for the sidebar, following this indentation.
Beware of the styling in sidebar.yaml as the percentages are now relative to the custom:group-element and will appear quite small if you keep the values from @lukevink.
Two final remarks: I still need to find a way of displaying “On” and “Off” buttons in the sidebar depending on the currently viewed navigation_path. I haven’t found the right solution yet, thinking of using custom:state-switch but I haven’t figured out how to get the current navigation path as a state which would trigger the state switch.
This also does not eliminate the flickering completely, since it is due to the UI reloading. To be honest, I don’t perceive it very much, though.
Thank you for sharing that. Unfortunately both your configuration and my own attempts don’t appear to stop the weather and temperature graph from flashing when other elements change. I have even just tried wrapping those two elements in the group-element card but they still flash when other elements change.
So I’ll have to keep looking into it. Thanks for your time to write up the config.
–Update: It’s nothing to do with the chosen image as ive just changed the entity_id to one that was previously working and it works flawlessly and quick. So it seems theres a problem with just these two entities. They are part of the same shelly 4Pro device (2 of 4 channels - will try the other two channels now to see if they are also reacting slowly)
–Update 2: When the offending entity is pressed, it turns the entity to the correct state almost immediately (seen via developer tools - Im not physically in the room at the moment but programming from upstairs) but changing to another entity from the same device also produces the same results.
I have three of the same devices (Shelly 4Pro) all set up at the same time with the same settings. Two of them are rendering images in lovelace perfectly and one that is not. Any ideas?
PROBLEM
I have a small problem I dont know how to solve…
I have four zones setup inside an open-plan kitchen / dining room
Two of the light entities work fine and render a new image with the light on in about 1second. The other two fail to render the image when clicked, until I click on another light and then they will both render at the same time.
They both have the same config (copy and pasted - then changed all the light.entities manually)
The only thing I can think of it being is the two entities that are not working properly have shiny surfaces with lots of light reflections. one is a glass dining table and the other is the glossy kitchen cabinets.
I have used the above patch to make the rendering quicker (on-off vs dimming the render in and out) which i have pasted below…
No problem! I really think the flashing has to do with the fact that the UI is reloading, because I have very similar behavior. However, I have no idea how to fix this… If you ever do find a solution, I’d be interested as well.
@lukevink everything is working great! thanks for sharing.
i have only one issue, if i enable “panel mode” and “kiosk mode” i do have an annoying top bar, as you can see in the attached photo. is there a way to remove it?
FYI.
What I am working towards in the end, is a big touchscreen UI for a magic mirror interace Still looking for the best hardware.
Things you see in the picture: Mechanical ventillation status, setting 1/2/3 represented by the number of fans. A motion sensor for the lights, status of the lights.
The easiest option is to use card-mod along with it’s theme support. The theme cookbook includes recipes to remove the header completely, only show the tab portion of it, etc.
Yes and no. Not in the way that CH did. I solved it by creating a copy of my theme, editing the header part to what I want on a specific device and then apply said theme on the device. A bit cumbersome, but if you’re not changing things in your theme often, it’ll do for now.
A little question. I’m making a combination of this dashboard and the one of Mattias. I want to have multiple dashboards like this one but don’t want to copy paste the sidebar.
For this to achieve I used the layout-card with 2 columns and in each a picture-elements card.
For the first picture-element card I then use include for the elements:
Ok so its a bit tricky to do a sanity check of your code from here. Theres so many things it could be. Best thing to do is right click --> Inspect in your browser and check out the console, see if there are any errors when the page is blank.
It is likely to be a javascript file somewhere. Sometimes it will also tell you the offending file or issue. Let me know what you find in the console and ill try to help you with that!
