Best tutorial for Lovelace?

I’ve been playing with HA for a bit now and am close to completing most of my current hardware integrations including:

iOS integration enabled
Proximity and zones setup
Individual family member location tracking
ecobee integration
Denon receiver
season sensor
myq garage door
Countdown script for tracking peoples birthdays and aniversaries
Alexa TTS support
Emby integration
add Date/Time platform
Thermostat changes by proximity
User proximity by composite tracker
2 flood sensors and battery info
Alexa Smart Home Skill
media_player Alexa integration for 6 Echo’s
Zooz Zen15 monitor for washer and also one for dryer
Washer/Dryer sensor of current status
Leviton DZ15S switches with usual on/off
Inovelli light bulb white on/off/dim
Leviton DZ6HD dimmer switches all over

Right now I am letting HA just add everything to the main screen. Any suggestions of a good tutorial for starting to create my own look and feel with HA? Preferably something current. List above may not be relevant but in case it matters thought I’d list what I’ve done so far.

Look at

Is there any option to convert what HA created by default with all the entities into s starter for manually customizing things?

A fast and easy way is to create groups of similar objects, whether by object type (all switches, all cameras, all smoke detectors) or by object location (living room, master bedroom, guest bedroom, den) and then create views of them on your front page. Alternately, you could move lesser-viewed items to a second or third tab.

3 dot menu in upper right corner.

Configure UI.

Take control.

The current layout isn’t wiped out.

1 Like

Hi John,
How have you progressed with this?
I am in a similar position and have just been using the default lovelace view but want to create my own.
I note that there is a reply further down this thread that says the current layout is not wiped out.
This was my concern and this is the first time I have seen that Jriker1 has stated this.
My approach to things is usually research as much as I can before I jump in feet first. I always want to have a rollback plan. I note in the 0.104.1 release that it says you can roll back to the default but I can’t find anyone who has tried it and reported on it.
Anyone who has experience here?

I’m a chicken still. I’m as you, researching a lot. I basically want to get every piece of smart technology setup I want to setup before I flip it so it’s all available in the default view.

With 0.104 I had issues so backed out of it. The media_player wasn’t working right so reverted my virtual.

OK about to get started. Just still looking at some examples others have done. Got all my entities documented, now to get started. Probably makes sense to start with the proximity status of my family at the top. Here I go.

I started yesterday. It pretty painless really. It was just the lack of other users documented experience that was daunting me but my apprehension was unfounded.

I am using version 0.104.3
I have had very little trouble.

At this stage, there are just using the UI, a few things that I am struggling with are:

  • when I create a view I can only get one column and would like to spread the cards horizontally rather than vertically but cannot find out how at this stage.
    This is what I have

  • I have used a glance card to allow me to have a single card where I can control all my lights.
    The thing that I think is missing here is the show-header-toggle tor switch at the top of the card to be able to turn the whole lot off but not sure if this is allowable. What I have will do as it’s only 4 lamps at this stage.
    If I edit the view there does not seem to be anywhere where I can adjust anything to do columns or similar.

does anyone have any solutions/suggestions?

Yeah I’m going nuts with trying to create the ultimate interface so am trying to understand this one guy’s custom presence detection setup. He uses Photoshop and overlays things to show battery life and charging and some other things on the card. So this may be a long journey for me as I’m currently trying to make this as cool as possible so will be a lot of learning.

I am mainly focused on cleaning up my old default UI at this stage. Hence the 2nd view.
I want to see my security cameras and all the badges at the top which show me data on all the Stuff I monitor like UPS voltage, NAS stats, Solar PV etc
I also have automated a few lights and so want control of these
This is what I have so far.

After a bit more of a look (couple of hours later) round I found that I was using the wrong card for my lamps. I found I could do what I wanted with the Entities card so deleted the Glance one.
I also found that you need 3 or more cards for it to start spreading out …

Yeah how to format things is a bit of a challenge. I’ve been working with the Picture Elements card and no matter what size an image is, HA decides what it wants to do. It defaults to VERY big and you have to keep adding Picture Elements or other elements in the Horizontal Stack in order to force it to shrink. So like the below, one of the two images was one physical page vertical on my PC monitor. Now I have two side by side and it takes about 1/2 of the screen. No way to manually tell it how big I want them. So if I want to make them smaller I then need to have another item in the horizontal stack:

So was thinking if I could Get the date/time in between the two it would shrink it a 1/3 more and give me more realstate. Want my first card to be all my important stuff I use a lot so want it on one page. Just not sure how I show a basic date/time with no title, and no field names and have them like on top of each other in one cell. Was thinking something in between the two proximity images above.

I am of the same mind about the Home View.
I want the import stuff up front.
I my case I have security cameras and that’s what I want to see first

Next I want to be able to Turn on and Off lights so lights view

Next is Metrics about my Solar system, & temps around the house as well as badges on other stuff

All the clutter has been moved to it’s own view.

It’s not all that fancy but it works for me.
I will improve on it as I learn more.