If you like my work...
Hello guys, this is a new UI created for Tablet only. As usual, any suggestion is appreciated.
This UI is based on the following custom components:
Essential:
Optional:
- Mini Graph Card
- Flexible Horseshoe Card
- Light Popup Card
- Stack In Card
- Atomic Calendar Revive
- Mini Climate Card
- Gap Card
- Simple Weather Card
- Config Template Card
First of all, we need to set-up two themes (Light and Dark mode).
If you want to use the same stuff shown on this repo, download the whole Theme folder and place it in your /config Home Assistant path.
Those themes are modified in order to use Card-Mod and remove the header. They also have the string background-sidebar-sx
which is used on this UI.
You can also create your own themes or use both Clear and Slate. If you want to create your own theme, be sure to set the following values:
background-color:
background-sidebar-sx:
primary-background-color: 'var(--background-color)'
Those values are highly used on the UI code.
A little explanation is necessay for the header too. Inside the Theme you'll find two files:
no-header.yaml
no-top-header.yaml
Those two files contain the necessary instructions to hide (no-header) or compress (no-top-header) the Header. You can pick one of them by changing the last line of both theme files. See below:
#HEADER
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
.: |
app-toolbar {
display: none;
}
card-mod-theme: no-header #This removes the Header. Change to no-top-header if you want Compact Header
Now, we need to set our two Themes to be used by HomeAssistant as Light and Dark themes. To do this, we have two options.
The first one, is supported only by Browser with dark mode detection:
- Go to Developer Tools;
- Select Services;
- Find the service called
frontend.set_theme
; - Insert the following data:
name: clear #or the name of your light theme mode: light
- Repeat the same with the following data:
name: slate #or the name of your dark theme mode: dark
The second one uses an automation to switch the Light and Dark themes:
Show automation code
automation:
- id: set_theme_ndrui
alias: 'Frontend: Set NdRUI Theme'
trigger:
- platform: homeassistant
event: start
- platform: state
entity_id: sun.sun
action:
- choose:
- conditions:
- condition: state
entity_id: sun.sun
state: "above_horizon"
sequence:
- service: frontend.set_theme
data:
name: clear
- conditions:
- condition: state
entity_id: sun.sun
state: "below_horizon"
sequence:
- service: frontend.set_theme
data:
name: slate
To apply our new style, we need to use the following code for each card:
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 10px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
Notice that this is the minimum code you need to apply the style, but of course you can customize it with more variables. The way how to use those themes and button cards, is also well explained by @N-l1 on his thread of SoftUI.
Another important thing is the structure of the UI, because every view has 3 main zones:
- The Left sidebar;
- The Main area;
- The Right sidebar.
To achieve this result, you have to start every view with the following code:
- title: Home #Choose the name you want
path: home #Choose the path you want
icon: 'mdi:home-roof' #Choose the icon you want
panel: false
type: custom:grid-layout
layout:
grid-template-columns: 7% auto 23% #You can customize the size of both sidebars
grid-template-rows: 100%
grid-template-areas: |
"sidebarleft main sidebarright"
badges: []
cards:
You also will see a grid template inside the 3 zones. This is used on the Main area in order to set the order of the cars, or on the Right sidebar to leave some empty space. See the examples below.
Main area config:
- type: vertical-stack
view_layout:
grid-area: main #The position of this card
cards:
- type: vertical-stack
cards:
- type: 'custom:layout-card'
layout_type: grid
layout_options:
grid-template-columns: 40% 60%
grid-template-rows:
grid-template-areas: |
"wheater calendar"
"climate camera"
"power power"
cards:
Right Sidebar config:
- type: custom:stack-in-card #We need the Stack-in-Card only to apply the background color
view_layout:
grid-area: sidebarright #The position of this card
card_mod:
style: |
ha-card {
height: 100%;
background-color: var(--background-sidebar-sx);
}
cards:
- type: 'custom:layout-card'
layout_type: grid
layout_options:
grid-template-columns: 5% 95%
grid-template-rows: 65% 35%
grid-template-areas: |
"free1 sidebar"
"graph graph"
cards:
You can go deeper on how the Grid Layout works on the Layout Card page.
Currently, popups are a work in progress, due to the fact that recently the custom component was updated with some new features wich will be added to this UI. Further update will become available soon, but meanwhile you can use this setup to get it working.
In order to use a popup, you need to add the following code to the card:
tap_action:
action: call-service
service: browser_mod.popup
service_data: !include NdRUI_Tablet_Popup/clima.yaml # <--- Use your path
The popup itself is another view, with the usual configuration:
title: Clima
style: # This is the style applied for this UI
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
hide_header: true
auto_close: false
large: true
card:
type: vertical-stack
cards:
< Card...
More info on Popups are available on Browser Mod page.
Creating a floorplan is quite long to explain, but I will give you a quick cue:
-
Create your floorplan with SweetHome3d - I suggest this Guide and this Guide to figure out how to do it;
-
Using SweetHome3D, choose a good positioning to save some pictures of your floorplan - Use the previous guide, section Rendering. You will need the following pictures:
- One pic of your floorplan during daytime, lights turned off (Note: this is the only one Pic which is optional);
- One pic of your floorplan during nighttime, lights turned off;
- One pic per each light turned on. This means that if you have 10 lights, you need 10 pictures. Use the nighttime "base" to do it;
So at this time you might have 1 or 2 pictures (depending by what you decided for the first option) + a number of pictures equal to the number of the lights you want to show on your Floorplan.
-
Use Photoshop, Pixelmator or similar to cut the edges of the whole floorplan (daytime + nightime) and every single room. See the two examples below
Dont worry if you have more lights per each room: Home Assistant (with Picture Elements card) will use the CSS property filter "mix-blend-mode: lighten" to blend all the pictures with an excelent result. -
That's all! You now have all you need to build your Picture Elements card with your floorplan. Check the code on "Room Section" to see how tu build it. Remember that the order you place each element is very important, so starts with the pictures and then proceed with the "state icon" elements to control your switches.