Is hat moon graphic dynamic? Meaning, do you have different pictures for different phases of the moon or is that just a generic picture? If the former, any chance of sharing them or the source?
And @j4Media and @Abeksis I really like what you are doing here and fully expect to, ahem, copy it at some point.
This is an image in png format, the image varies depending on the weather condition
I updated my repo if all the latest changes. Please click on the star above.
This could be the best looking frontend Ive seen so far. Very very clean.
I love it. Can you share your config so I can copy lol:)
This could be the best looking frontend Ive seen so far. Very very clean.
@j4Media this was a great help to me to propel me up to the next level with doing stuff with HA. Nice organised structure and things finally clicked. I used some of your idea for a base, so thanks very much.
One question I ad though was that this type of layout does not work well for both mobile phone and tablet, as it uses fixed font sizes in the display. While it is fine on my laptop and tablet, both obviously landscape devices, when viewing in portrait on my phone, the font sizes destroy the display.
I was wondering if there is a way to get adaptive font sizes in the yaml by defining some variable based on the user agent of the rendering device - or if there is some other way to make this work better.
Hi @bowesmana, I’m glad it was a great help to you!
Best practice with the amount of customization in my interface is to create different views for each device, but if you don’t want to go that route you can try experimenting with font-size in em and % units instead of static units. You can learn more about that here: https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent
When getting the images to cover a full screen what was your method of doing this. Was it trial and error.
Hello j4Media
I’m new with Hassio. I found your creation very good! Thus, I would like to create something similar for me at home. Because I don’t have big knowledges to create something similar from nothing, I would like to adapt your solution;-)
My question is: should I copy/paste all documents and folder of your GitHub repository in my Hassio installation and them adapt them with my devices/entities?
Thanks
Hi @David_P, glad you like my design. The short answer is, Yes, download my GitHub as a ZIP file and unzip in your Hassio install and make sure all folders line up as they should. You would then, as you mentioned, create your own devices/entities and plug them into the YAML file replacing the devices/entities that I have. Feel free to comment back with any questions if you get stuck.
Good Luck!
Yes that’s right, the background images for each of the 3 sections. Love your layout. But on my tablet there’s a empty space below the presence detection background image. Not had much time to play around on photoshop but did you just increase the image height by trial and error until the entire screen. Or did you make the 3 images total height = screen resolution?
Yes, I created the background images to be the same resolution of my tablet, and then tweaked here and there to have it appear just as I wanted it.
Wow
Just wow
I’m just starting with HA and this is best I’ve seen so far, simply and modern
If you can explain how to do this, copy from you
Thanks
Really nice. I’m trying to implement this approach, using a custom layout card to lock my layout for a kindle fire 8hd, which is 1280x800px. By theme is dark so when I’m in kiosk and panel mode, I can’t get rid of the white margin around the edge of the custom layout card. Is there a way to force the custom layout card to fill edge to edge? I’ve tried altering the css with card-mod but haven’t had any success.
What am I missing?
So far, my work around to get rid of the whitespace on the tablet is to change the theme to an all black background. Nothing complex, just added this to my configuration.yaml file:
# themes
frontend:
themes:
kiosk:
card-background-color: '#000000'
primary-background-color: '#000000'
@j4Media you ever think about putting the elements into a grid layout vs having to use picture-elements to style them all? just curious