A different take on designing a Lovelace UI

[remsta (Remi)]

Alright so the concept of this is absolutely amazing and this dashboard looks incredible - after about 12 hours I have finally got to the stage that the dashboard is installed but doesn’t look anything like the above…

Is there anyway to get this installed as a package? I have just realized the amount of rework that I need to do to even get this to work for my house and I have no idea where to start.

i.e. we have a robot vaccum but I have no idea how to make that show up. We don’t have Plex here so how do I remove that… We don’t have lights but we have an alarm system I need to add and a pool. Anyone have any ideas where I can start?

[Vasco]

It’s a matter of getting familiar with yaml.
You used lovelace web editor, which is not right. You should download his pack and merge it manually with your files.

For plex, just remove it from ui-lovelace.yaml file. 5 sec work.

Thanks for pointing me into the right direction @Schocker

[remsta (Remi)]

@Vasco

You used lovelace web editor,

Thanks Vasco - so yes, I went and copied all the relevant files into my config using SAMBA. I then copied the lovelace piece of the confiuration.yaml into my configuration.yaml and ended up with the image above… Is there something else I need to copy across to get the dashboard looking the same as the original?

Where do I go about editing the sidebar, the titles for the main cards on the homescreen? and is there still a concept of rooms or areas with this dashboard?

Thank you!

[remsta (Remi)]

@Vasco

 - type: "custom:button-card"
        entity: sensor.garbage_today
        aspect_ratio: 1/1
        show_entity_picture: true
        show_name: true
        name: Vandaag
        show_icon: true
        style:
          - padding: 0px
        styles:
          entity_picture:
            - width: 80%
            - height: 100%
            - padding-bottom: 0%
          card:
            - border-radius: 10%
            - background-color: '#848484'         
        entity_picture: "/local/images/afval/afval_geen_large.png"
        state:
        - value: 'gft'
          entity_picture: "/local/images/afval/afval_gft_large.png"
          styles:
            card:
              - background-color: '#3B863D'
        - value: 'papier'
          entity_picture: "/local/images/afval/afval_papier_large.png"
          styles:
            card:
              - background-color: '#00B1EB'
        - value: 'plastic'
          entity_picture: "/local/images/afval/afval_pmd_large.png"
          styles:
            card:
              - background-color: '#F4A029'

      - type: "custom:button-card"
        entity: sensor.garbage_tomorrow
        aspect_ratio: 1/1
        show_entity_picture: true
        show_name: true
        name: Morgen
        show_icon: true
        style:
          - padding: 0px
        styles:
          entity_picture:
            - width: 80%
            - height: 100%
            - padding-bottom: 0%
          card:
            - border-radius: 10%
            - background-color: '#848484'         
        entity_picture: "/local/images/afval/afval_geen_large.png"
        state:
        - value: 'gft'
          entity_picture: "/local/images/afval/afval_gft_large.png"
          styles:
            card:
              - background-color: '#3B863D'
        - value: 'papier'
          entity_picture: "/local/images/afval/afval_papier_large.png"
          styles:
            card:
              - background-color: '#00B1EB'
        - value: 'plastic'
          entity_picture: "/local/images/afval/afval_pmd_large.png"
          styles:
            card:
              - background-color: '#F4A029'

So where do I paste this code exactly?

[Davst (David Stenbeck)]

Solved it to some extent… though you might have found a better way for your vertical stack… will have a look at your code as well

[Vasco]

So basically:

1. Dowload a copy from github
2. Copy all files into their respective folder. If you already have a file named the same, make sure you merge them accordingly (make sure it follows the HA config guidelines)
3. Restart Home Assistant
4. On the left side menu from HA click on your username at the very bottom. Then select: tablet as a theme
5. From there. Start adjusting things to your likings.

ui-lovelace.yaml file defines how the layout looks. Which cards are shown etc. If you read the file, you see that it’s devided into sections: sidebar, living room etc (all swedish though, because the designer is swedish) but you can rename those things to english or your own language. Learn how the grid is used and what the basics are: https://grid.layoutit.com/

button_card_template.yaml is a file where all different button designs are configured. So when you add a button to ui-lovelace.yaml and give it the template: - light
That it acts as a light. As in, one time pressing show if its on or off, percentage if dimmable, and when you hold press it for 2 sec and release, to show you a popup with some more stuff you can use to control the light bulb if supported.

Other things like icons are also defined here (lamp, door, ps5, plex etc). Here you can modify things to your liking. @Mattias_Persson designed this dashboard for himself. And he shared this template with us all as an inspiration. It’s not meant as a package that you can pick up and install. If you have that desire, because things are maybe a bit difficult atm, then the default lovelace is your best option or a package like dwains theme. GitHub - dwainscheeren/dwains-lovelace-dashboard: An fully auto generating Home Assistant UI dashboard for desktop, tablet and mobile by Dwains for desktop, tablet, mobile

Take a look to how mattias set up sensors etc. Some stuff you can copy paste, but most stuff needs to be modified to your own config. For example, an alarm. Mattias has no alarm at home, so this design does not cover that. You’d have to make your own button templates and configure it into the design. Respecting the design mattias put down, or it’ll look a mess of different designs. Lol

Things like temperature sensors, humidity sensors, (i am talking about sensors created by a Xiaomi Mijia for example). I have those so I had to design, create it myself. Garbage tiles, also not in his config. Agenda, also not there.

Therefore, it’s a start or maybe a basic tempate with a few examples. But you need the skills, time and effort to make it look like a dashboard you want.

Some good posts from @Mattias_Persson

A different take on designing a Lovelace UI

what @Vasco said, you need to use lovelace mode: yaml in configuration.yaml for !include if you ignore !include and paste the contents it should look like this button_card_templates: base: variables: ... views: - type: custom:grid-layout ... also go to your profile and choose “tablet” theme [Open your Home Assistant instance and show your Home Assistant user's profile.]

A different take on designing a Lovelace UI

Forgot to mention in the update post, I used this to https://grid.layoutit.com/ to visualise! corona is intentionally cut of if it doesn’t fit themes.yaml overflow: hidden; and white-space: nowrap; EDIT custom-layout-card-padding in themes can also be increased for smaller buttons

Also, I suggest you read the entire topic. I know its a lot of posts. But i got a lot of good info from here and there that explained a few questions I had. And Mattias does a good job helping others here in this topic.

[Vasco]

@remsta

So where do I paste this code exactly?

In the ui-lovelace.yaml file under the respective grid section. See my previous post

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

Hello everybody.
Question. The inserts to the database are executed automatically, right?
I ask because when it makes an insert it does not take into account the first field of the base which is an id.

Thanks

sqlalchemy.exc.IntegrityError: (MySQLdb._exceptions.IntegrityError) (1364, "Field 'state_id' doesn't have a default value")
[SQL: INSERT INTO states (domain, entity_id, state, attributes, event_id, last_changed, last_updated, created, old_state_id) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s)]
[parameters: ('person', 'person.pablo', 'home', '{"editable": false, "id": "pablo", "latitude": -34.6233206, "longitude": -58.4354447, "gps_accuracy": 18, "source": "person.pablo", "user_id": "89e2395f8c884aed8ffc76dffd3993cb", "friendly_name": "Pablo", "entity_picture": "/api/image/serve/c8ccf52da296b68a51ba64c697b754f5/512x512"}', 610243, datetime.datetime(2021, 6, 19, 0, 2, 28, 876290, tzinfo=datetime.timezone.utc), datetime.datetime(2021, 6, 19, 0, 2, 28, 876290, tzinfo=datetime.timezone.utc), datetime.datetime(2021, 6, 19, 0, 2, 28, 876290, tzinfo=datetime.timezone.utc), None)]
(Background on this error at: http://sqlalche.me/e/14/gkpj)

[remsta (Remi)]

Thanks so much @Vasco this has been a huge help!

[tfmeier (Thomas Meier)]

Thanks for that detailed outline. Exactly what I was looking for as I’m at ground zero atm. I’m clearly drawn to this dashboard as it just looks so professional and sleek So massive thanks @Mattias_Persson for sharing this

I’m happy to spend whatever time it takes to get my head around this and implement into my instance. Afterall home automation is a journey not a destination. Two questions remain before I jump:

1. I have seen this being mentioned a few times. This is essentially a one page dashboard. I have other pages such as solar with graphs that would have to sit on its own page. I wouldn’t really need a navigation menu to navigate to views as you can do that with the button hold action | Navigate but the question remains has anyone implemented a multi-page structure based on this and still retain the design principles?

2. Does going down this path basically mean I lose the ability of using the UI editor and instead build/extend/update my dashboard in configuration.yaml, ui-lovelace.yaml and the other referenced files?

[Vasco]

@tfmeier

1. A menu on the left is a bit difficult as the way it is designed. That’s why mattias suggested this: A different take on designing a Lovelace UI - #1346 by Mattias_Persson

I have multiple pages too, read about how to code that here: Dashboards and Views - Home Assistant

2. You can create multiple dashboards. You could have this one from Mattias (which is non editable through GUI) it’s because the gui is still somewhat limited. As this is an advanced yaml config, and the GUI is getting better, but not there yet… and you could create a new dashboard for other purposes and have that in the standard lovelace view and thus able to edit with GUI

[Vasco]

The ID in the database is the key and also auto incremental. So esch new entry/insert to the database, will automatically fill in the ID number

[elyisum]

@tfmeier
Maybe this one could help : GitHub - Tanner3644/home-assistant-config: My Home Assistant configuration for a wall mounted tablet.
I’m going to mix the Mattias lovelace and this one to fit my needs

[Vasco]

This is a different design approach too. Nothing to do with mattias latest release. So yes, could be an alternative.

[pex81]

Hi, I really like this dashboard, I have installed it but I don’t understand how to manage the fonts and the theme.
Can someone help me?

[Vasco]

A different take on designing a Lovelace UI

So basically: Dowload a copy from github Copy all files into their respective folder. If you already have a file named the same, make sure you merge them accordingly (make sure it follows the HA config guidelines) Restart Home Assistant On the left side menu from HA click on your username at the very bottom. Then select: tablet as a theme From there. Start adjusting things to your likings. ui-lovelace.yaml file defines how the layout looks. Which cards are shown etc. If you read the file, you…

[Gs_Adads]

How do i make this im new to home assistant and dont know that much

[Gs_Adads]

I sort of got it to work but it look like this

Does anyone know how to fix this?

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

Yes I understand that. But I don’t understand why that error occurs. I think I have no way to intervene in the INSERT. That I imagine is fine. I copied the base from mattias’s project.
Thanks for the reply

[Mattias_Persson]

I’m using an external db, Delete the recorder entry in configuration.yaml