I’m not exactly sure what you mean. Basically, you should make sure your images have the correct aspect ratio for your screen. Since you’ll probably use different devices with different aspect ratios, it won’t look right on every one of them.
I have a problem on all devices. If you set kiosk_mode, on some screens it is smaller, and on others it is larger and you have to scroll. How can I customize it for each screen?
As I haven’t customized it for every screen myself, I can’t exactly tell you how. Maybe layout card could be of help, you should find it easily enough on this forum (sorry, I’m on the road, can’t provide you with the direct link right now).
What I’ve done is get the pictures in the aspect ratio fitting most screens (tablets and computers) and I will do a mobile adaptation at some point.
No help so I had to solve it myself.
The correct syntax is:
${ "hue-rotate(" + (states['light.sfeerlamp'].attributes.hs_color ?
states['light.sfeerlamp'].attributes.hs_color[0]:0) + 'deg'}
Now everything works fine.
I only have created a new problem by using the swipe-card in combination with the config-template-card. Parts of my floorplan turn into all shades of gray.
I added some more information about weather an temperature inside and outside home and nice animation with wind arrow which turns base on wind direction and rain drops which increase base on rain quantity.
6 Likes
Okay, so please forgive my noobishness. I’m still a relative novice to HA and my CSS skills date back to when XHTML 1.0 became a standard.
I’ve been going through this line by line (and learning a lot, so thank you for this!) So far I’ve managed to get a floorplan going (I’m doing this in a separate dashboard vs a ui-lovelace file). On the floorplan, I was able to get the png’s to swap out when I turn lights on and off. So far so good. Having a bit of trouble with the transparent pngs, but I think that’s a matter of the size of the png and properly positioning it via CSS. I did get the individual light icons working, so yay for that.
Anyway, the next part of the code is where I’m running into trouble. I added the sidebar and it displays over my floorplan, cutting off the left-hand side. I don’t know if that’s because my floorplan is 1920x1080 or if maybe I need to add an additional card to separate it out or something. That’s where I’m stuck right now. So I guess the question is, how do I either a) push my floorplan to the right so it’s not being covered by the sidebar or b) resize it slightly/scale it down so it’s not covered. Though honestly, I’d prefer being able to push it to the right. My house is long and narrow, so “landscape” format for the floorplan.
The reason your sidebar is covering your floorplan has little to do with CSS and much to do with the way this dashboard is built. It is essentially a full-screen picture-element card with varied icons, images etc. on top of it. That means that if your floorplan image is fullscreen at 1920x1080, your sidebar will cover up your image.
Two ways to go about this: either modify your image, so you have empty space on the left where the sidebar is, or you can use a layout-card to wrap your sidebar and floorplan in different grid columns. The second approach implies some rewriting of the code, since you’d end up with two picture-elements cards wrapped within a layout-card as opposed to a full-screen picture-elements card with many elements on top of it.
What you’re saying makes sense, but the original floor plan images Luke used are 2560x1600 and yet they aren’t being eclipsed by the sidebar, so what am I doing wrong?
True, but as you can see in his demo, his image is also cut off by the sidebar. You don’t see the entire terrace 
1 Like
Haha oh that’s true - the staircase and whatever else that is in front of it.
So what determines max size of the dashboard? I get the concept - dashboard wraps custom-config wraps picture-elements. But I couldn’t find anything that would help determine size or if it would support flex. Like I’m also trying to avoid px definitions and using relative values (percent etc)
Well, to be honest, I figured it out with some trial and error until I got it straight and it was a while ago. I can tell you that it’s more a question of aspect ratio than absolute size. So 16:9, you want some part of it reserved for the sidebar, say 2:9, which would mean your floorplan image should be positioned on the 14:9 right-most part of your image. Bearing in mind that your base image will be 16:9, you’d only reposition the floorplan on it.
One thing to bear in mind, though, is that this will not scale very well on a screen with another aspect ratio (16:10, for instance).
1 Like
I’ll have to poke around with it then. I think just redoing my images, as much as a pain that will be, is the easier option. I guess it’s my own fault. I did my images slightly differently. Rather than having the entire floorplan for each light image, I have just the room/light and the rest transparent. But I did it in such a way where I masked out the rest of the floorplan. So the room is visible, the rest transparent, the entire image 1920x1080, if that makes sense. Which means if I shift the floorplan, the other images will have to be redone (keeping the same overall image size)
Yup, I get your meaning. The idea’s not bad, the images would be quicker to load. I’ve redone the images about 10 times as well, until I got it right… and then figured I’d work with the aforementioned second way of doing it.
How difficult was it to work with changing the wrappers?
I really wish there was a visual editor (not the visual editor in HASS. That’s not ideal.). Something like back in the day when I could use Detail and Code view in Macromedia’s Dreamweaver. I could hardcode all my HTML and see realtime updates. I need this for the YAML. So many things are nested in this and indentation matters so much, it’s hard to just “add something” sometimes.
It was ok. The two main hurdles were getting rid of margins with CSS and redoing the navigation buttons with button-card in order to have the current view highlighted.
I can share my code a bit later, it’s kind of multilayered because I use decluttering-card and button-card templates.
1 Like
Thank you. Nesting the cards is driving me nuts. Haha. It will be helpful to look at a working model to compare to.
Making progress. Now I just need to figure out what I screwed up. Haha. I started to copy/paste your files in hopes of getting error messages, so I can try to tackle one at a time. Right now I have two columns both in red saying no card type configured on the left and no card type defined on the right. Oh boy. Haha
That usually points to either indentation, a dash that’s missing or a dash too many.
Ok, so have you installed layout-card, decluttering-card, button-card, card-mod and config-template-card? The one on the right sure does look like you’re missing that config-template-card.