In a similar vein to the system page ideas topic, I’m getting to the point where I’m happy with the layout and formatting of all my pages - except for default page floorplan(s). See: https://imgur.com/a/ejMbhBO (has a few day/night examples as well).
Looking for inspiration to tart it up a bit. Or maybe replace the floorplans altogether (especially as they do not scale well to mobile devices). Maybe just some commonly used tiles? IDK.
What does your default page look like?
don’t want to hijack your post (and looking forward to the answers you will get) but I indeed like your pages, specifically the climate and devices (night) buttons.
Do you by any chance have these on a GitHub page so I can have a look at the code (setting up my Lovelace interface myself…)
my default page is somewhat more cartoonesk I am afraid, but fully device-size aware:
My default is semi-dynamic. It shows the things I want to know about. That means it only shows lights that are on, exterior doors/windows that are open, and so on. The only things that stay there are one card showing where everybody is, and the weather forecast.
The exception are some of the temperature/light/humidity sensors, but I’ll shortly be tweaking those so they only show if a room is occupied.
I’m leaning towards that idea Tinkerer. I started an ‘insights’ page but have not paid it much attention lately. Adding a few static cards could make it quite a useful default page:
@Mariusthvdb no I dont have a github page. I have pasted my raw lovelace config here: https://pastebin.com/hr9Yb5ZP
thanks for that! a lot of inspirational ideas!
How do you get all cards to have the rounded corners, is that in your theme, or a master modder somewhere?
It was that that made me think you were using Buttons, because setting border-radius: 6px is a breeze there. Ive added that to the card-modder settings per card, but don’t see you doing that anywhere in the config?
Had me turn my head inside out because of the order of your config, especially with the nested horizontal_stacks/card_modder/vertical-stack-in-card…
please let me ask why you use that order (all cards declared upside down), and not like below, which at least to me seems so much more understandable at first sight, and way easier to debug and edit (check Weather Now):
- type: 'custom:vertical-stack-in-card'
title: Weer
cards:
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.br_temperature
color_thresholds:
- color: '#039BE5'
value: -10
- color: '#0da035'
value: 0
- color: '#e0b400'
value: 20
- color: '#e45e65'
value: 30
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.dark_sky_apparent_temperature
color_thresholds:
- color: '#039BE5'
value: -10
- color: '#0da035'
value: 0
- color: '#e0b400'
value: 20
- color: '#e45e65'
value: 30
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.dark_sky_dew_point
color_thresholds:
- color: '#039BE5'
value: -10
- color: '#0da035'
value: 0
- color: '#e0b400'
value: 10
- color: '#e45e65'
value: 20
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.br_humidity
color_thresholds:
- color: '#039BE5'
value: 20
- color: '#0da035'
value: 50
- color: '#e0b400'
value: 65
- color: '#e45e65'
value: 80
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.br_pressure
color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 1000
- color: '#e0b400'
value: 1020
- color: '#e45e65'
value: 1030
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.br_precipitation
color_thresholds:
- color: '#039BE5'
value: -50
- color: '#0da035'
value: 2
- color: '#e0b400'
value: 4
- color: '#e45e65'
value: 8
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: horizontal-stack
cards:
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.br_wind_speed
color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 10
- color: '#e0b400'
value: 20
- color: '#e45e65'
value: 30
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: 'custom:mini-graph-card'
entities:
- sensor.br_wind_gust
color_thresholds:
- color: '#039BE5'
value: 0
- color: '#0da035'
value: 10
- color: '#e0b400'
value: 20
- color: '#e45e65'
value: 30
color_thresholds_transition: hard
group: false
hour24: true
line_width: 3
points_per_hour: 12
show:
icon: true
labels: false
name: true
state: true
- type: 'custom:card-modder'
style:
border: solid 2px var(--primary-color)
transform: scale(0.925)
card:
type: glance
entities:
- entity: sensor.br_wind_direction
columns: 1
show_name: true
show_state: true
thanks again for your config, very nice indeed with those mini-graphs, a masterful custom-card!
My default page only shows info that I care about at a glance. It’s built for mobile (not desktop) so the spacing is off, but here’s the desktop view:
And here’s the rest of my config if anyone is interested:
Here is mine. I used floorplans for a while, but found them ultimately no that useful, especially when using the UI on mobile devices, which in my case tends to be the only time I actually use the interface!
Mine, pretty satisfied with where its at as it’s meant to be more at a glance dashboard.
More images can be found here:
Yes it is:
ha-card-border-radius: 20px
When using storage mode HA (used to?) sort all Lovelace key: value pairs alphabetically. I got used to seeing it that way. I still use storage mode even though I construct more complex cards in an external editor and then paste into Lovelace manual cards.
Taking inspiration from what has been posted so far I’m working on a default page that shows my most used items and making it mobile compatible.
Nice (in fact they are all nice), but I just wanted to acknowledge the retro dial phone!!
This is what I knocked up in my lunch break:
Night:
Day:
This works really well on my mobile, 1080p tablet and 1920x1200 on my pc. I can see or interact with all the most common items I use.
I had to revert to flat bordered buttons though. The tiles-card I’m using does not support different values for shadow for on and off states. This coupled with the fact that the card looks abandoned means I should probably change everything over to the custom button-card.
I also might change the glance icons to mini graphs like at the top of the weather card. That needs some forecast info too. Back to work for now though.
nice! be aware though that the full templating possibilities the Tiles card offers isn’t yet as developed in the Button-card. I would move to the Button-card fast, but if you need full templating keep those in Tiles config. Button-card has templates too, but not on all fields, and not always full JS.
I have made the move for most of my Tiles now and the Buttons work swift and look beautiful. Most importantly though, as you say, is the full support on the Button card by @romrider , who is adding functionality by the week!
Ditto.
The only controls visible on the ‘front page’ are ‘what I need to know’ plus a control’s visibility is based on ‘situational awareness’. The only downside to this approach is that it doesn’t win any beauty contests because there’s so little to show … 
For people unfamiliar with this approach, imagine you are seated in the Apollo command module facing its complex console filled with switches and indicators. All of the controls are demanding your attention but, in reality, only some of them truly require your attention. Others can be safely ignored until they change state.
If you could make these non-critical ‘others’ temporarily disappear, your visual workload would be reduced so you can focus exclusively on what truly requires your attention. You can’t easily achieve this with mechanical controls but you can with the ‘soft-controls’ rendered in a GUI.
For example, when all doors and windows and locks are secured, my front page shows controls for:
If you unlock the lock or open a door, the control for arming the security panel disappears. Until that lock and door are secured, there’s no point in operating the security panel.
If you open a door, the UI displays it, otherwise when closed there’s nothing shown in the UI about that door’s status. I’m only interested in it when it’s open.
I have one door with a controllable lock. If you open that door, its new status is displayed in the UI and the control for operating its lock disappears. Why? Because it makes no sense to lock an open door.
There are badges summarizing how many:
Ideally, I would prefer to have conditional badges. If zero lights are on then the ‘All Lights’ badge would disappear. Maybe there’s a way to do this but I don’t know how.
Current design (alert wifi level lowered for demonstration purposes only). That is one massive stack of conditional cards that monitor just about everything important.
I use the default_view mainly as an overview or navigational panel for mobile viewing. I’m going to explore rounded corners and I need to get actual photos of our spaces/rooms (these are stock photos)
Could you please share the bin could you use Tom?
It’s part of a larger reminders conditional card array:
entities:
- card:
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: Garbage and Recycling Tomorrow
type: markdown
card_type: conditional
conditions:
- entity: binary_sensor.recycling_tomorrow
state: 'on'
type: 'custom:hui-element'
- card:
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: Garbage and Recycling Today
type: markdown
card_type: conditional
conditions:
- entity: binary_sensor.recycling_today
state: 'on'
type: 'custom:hui-element'
- card:
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: Garbage and Green Waste Tomorrow
type: markdown
card_type: conditional
conditions:
- entity: binary_sensor.recycling_tomorrow
state: 'off'
- entity: binary_sensor.garbage_tomorrow
state: 'on'
type: 'custom:hui-element'
- card:
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: Garbage and Green Waste Today
type: markdown
card_type: conditional
conditions:
- entity: binary_sensor.recycling_today
state: 'off'
- entity: binary_sensor.garbage_today
state: 'on'
type: 'custom:hui-element'
- card:
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: Vacuums Run Tomorrow
type: markdown
card_type: conditional
conditions:
- entity: binary_sensor.roborock_tomorrow
state: 'on'
type: 'custom:hui-element'
- card:
card_type: markdown
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: Vacuums Run Today
type: 'custom:hui-element'
card_type: conditional
conditions:
- entity: binary_sensor.roborock_today
state: 'on'
type: 'custom:hui-element'
- card:
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: AM Irrigation Run
type: markdown
card_type: conditional
conditions:
- entity: binary_sensor.irrigation_today_am
state: 'on'
- entity: binary_sensor.moisture_limit
state: 'off'
- entity: binary_sensor.rain_today_limit
state: 'off'
- entity: binary_sensor.rain_tomorrow_limit
state: 'off'
- entity: binary_sensor.am
state: 'on'
type: 'custom:hui-element'
- card:
content: ''
style: |
ha-card {
border: solid 1px var(--primary-color);
box-shadow: none;
--ha-card-background: rgba(0, 0, 0, 0);
}
title: PM Irrigation Run
type: markdown
card_type: conditional
conditions:
- entity: binary_sensor.irrigation_today_pm
state: 'on'
- entity: binary_sensor.moisture_limit
state: 'off'
- entity: binary_sensor.rain_today_limit
state: 'off'
- entity: binary_sensor.rain_tomorrow_limit
state: 'off'
- entity: binary_sensor.am
state: 'off'
type: 'custom:hui-element'
show_header_toggle: false
style:
.: |
ha-card {
border: solid 1px var(--border-color);
background: url("/local/background/card_bg_{{states('input_select.select_theme')}}.png");
}
ha-card div.card-header {
padding-top: 8px;
padding-bottom: 36px;
}
title: Reminders
type: entities
Mine looks like this. Ofcourse I have the big button light buttons etc for panels and mobile around the home.
Lights
Weather
Waste Collection
Just found this thread, (Tom) will probably hate me lol
I been struggling to figure out how to design my dashboards and even trying to figure out whats useful for the default page
I use only the mobile as of now.
my thinking was to display the main components of the house i like to monitor and use Pop up to see more. So if you clicked on one of the chips it would pop and display more info or buttons.
I keep reading about conditions, but not sure of a use case scenario?
Any feedback would be great or suggestions.
