Hi @DarkLite1, Welcome to HA.
I think you’re looking for HADashboard.
1 Like
Yes VDRainer, this looks more like what I’m looking for. However, is it possible to group tiles together in say Living room, First floor and Second floor? Or is that layout fixed? See the original image I posted.
Definitely check appDaemon and more especially HADashboard. This is an example of what I did (after only a couple hours or so).
Look into the forums, there are plenty of examples of very good designs. As all is in CSS, you can basically do whatever you want. And if you are not familiar with it, you can simply copy an existing design and adapt it.
2 Likes
Thx lambtho, but all I see is the same design just with different buttons and colors. In your example I would like to have one big tile called Living room that groups Living Light and Living Humidity together. Same for the Bedroom section. Could you post a link to a very different design then all the tiles sticking together? So I have a better understanding of what you mean.
Hi Thomas can I ask you what appdaemon? I was hoping to do something similar to what you have got there.
A guide to set this up would be great.
Thanks.
I think what you are looking for is Floorplan as linked by jmart518 above. You create your own dashboard using an SVG file, so you can make it look however you want. Here’s the one I am currently working on… (still VERY MUCH a work in progress)
or a very early example of the first one I created
I don’t have an exact example of what you want to do, but that would be very easy to accomplish.
8 Likes
Great community here and very helpful people. Thank you atomicpapa, it’s a bit more clear now thanks to your example. Looks really wicked I must say!
Some questions I still have:
- Are the items on Floorplan clickable? I mean for example does it toggle a light switch immediately on or off without any extra menus in between when clicked?
- How does the panel scale on a smartphone? I assume this is HTML5 or do you need to create a separate Floorplan panel for each device with it’s own dimensions? I know SVG stands for Scalable Vector Graphic, but I can’t see this whole screen displayed on a phone.
In your case, floorplan might be the way to go to offer a complete modularity.
I am almost certain it could be done too with HADashboard, but that may require very advanced skills. I think I read somewhere that some people (@ReneTode @aimc maybe do you have an example or something ?) use 1px tile size and by finetuning the dimensions of everything you can have a bit more complex result.
This is might be a bit technical to set up if you only have a very basic knowledge. I would recommend being very comfortable with HA before diving into it. See the full documentation on the links below. I think the dev of appdeamon and bruh’s automation are looking into possibly doing some setup video in the future…
https://home-assistant.io/docs/ecosystem/hadashboard/
http://appdaemon.readthedocs.io/en/latest/INSTALL.html
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_INSTALL.html
1 Like
Yes, the buttons are clickable. You can have a button either perform an action, like toggling a light, or have it pop up another menu with additional clickable items or display items (which is what I am working on in my first example). Everything is done with basically 3 files. A YAML config file, where you declare the names of the enitities you want to interact with and what they do; a CSS file that controls how they appear when you do something to them; and the SVG file, with objects with names matching the enities you are interacting with. ie clicking on a button wiht the object name light.bedroom will toggle an entity in HA named light.bedroom. And with all that said, this is very much off topic for this thread, so maybe it should be moved to the appropriate place. 
2 Likes
these themes are awesome! Thanks for all the hard work guys!!
@atomicpapa Soo… the LCARS interface… I’ve been looking for something like this. I’ve found a few different options, but never thought of using the Floorplan SVG to do it… When you get it to a working state do you plan on sharing it?
Yes!! Can you post the code?
Here you go 
christmas:
#Main colors
primary-color: '#3C8D0D' # Header
accent-color: '#d32f2f' # Accent color
dark-primary-color: 'var(--accent-color)' # Hyperlinks
light-primary-color: 'var(--accent-color)' # Horizontal line in about
#Text colors
primary-text-color: '#000000' # Primary text colour, here is referencing dark-primary-color
text-primary-color: 'var(--primary-text-color)' # Primary text colour
secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc.
disabled-text-color: '#7F848E' # Disabled text colour
label-badge-border-color: 'green' # Label badge border, just a reference value
#Background colors
primary-background-color: '#ff7878' # Settings background
secondary-background-color: '#d32f2f' # Main card UI background
divider-color: 'rgba(0, 0, 0, .12)' # Divider
#Table rows
table-row-background-color: '#353840' # Table row
table-row-alternative-background-color: '#3E424B' # Table row alternative
#Nav Menu
paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
paper-listbox-background-color: '#ffffff' # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#ffffff' # Navigation menu selection
#Paper card
paper-card-header-color: 'var(--accent-color)' # Card header text colour
paper-card-background-color: '#ffffff' # Card background colour
paper-dialog-background-color: '#ff0000' # Card dialog background colour
paper-item-icon-color: '#74d680' #'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#ff7878' # Icon color active
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#74d680' # Popup item select
paper-tabs-selection-bar-color: 'green'
#Labels
label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#ffffff' # Same, but can also be set to transparent here
#Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
#Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: '#378b29' #'var(--accent-color)'
paper-slider-active-color: '74d680' #'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
#Google colors
google-red-500: '#E45E65'
google-green-500: '#39E949'
1 Like
wow, love that theme, star trek 
?
I do indeed plan on sharing it, but I have hit a snag on the layers right now, so until I get around that issue, I am stuck. At least with what I currently have envisioned.
I’m not the only one on here doing an LCARS theme. Search “LCARS” and you will probably find at least one more
1 Like
Thanks for sharing. I liked a lot your approach. I noticed that the icons are not highlighted. How to include highlighted icons to the theme?
