Is this Dashboard possible?

Hello I’m new here and a fan of HA. I am not a die hard coder, for me it’s easier to draw something. But do you think it’s possible to make something with HA?

Options Dashboard

  • Sidebar to the left with only icons en links to other pages
  • Show icon as active

I want to use this dashboard in the livingroom on a tablet.

1 Like

This looks like it has been made with lovelace and if not it can be made very similar.

1 Like

I am in the same position. I have a vision for my wall tablets but I have no idea how to implement. I am new to Home Assistant (came from HomeSeer ). I have no problem with the devices, entities, automations etc. My problem is I have no experience with Lovelace / cards and I cannot find a good resource explaining the purpose and use of each card. People also have creative ideas on how to manipulate cards in ways they were not originally thought.

I love your dashboard vision. Can we build this together as a community? Everyone can follow along with the design decisions and implement / learn along the way. This would be an excellent project for the Home Assistant community to build together. It would be a tutorial for future newbies like me.


1 Like

Go to the official documentation here, on the right hand side is a list of the official lovelace card, click on it to get a picture how it looks like and a description how it works and all the “properties” you can set. For all the custom cards, you’ll mostly find a comprehensive guide on their respective Github page, which explains their card in detail.

There are already a lot of awesome frontends here on the forum, which can be used by everyone check out HKI, Dwains Theme, A Different Take on Lovelace.

I would like to build this dashboard. I had already seen the official documentation on the cards available. My problem is that I do not have the vision to implement them into a dashboard.

For example, which card can I use to put the time in the upper right corner?

Or, do I need to start with a “grid” in order to drop cards into. I have no idea.

It’s not that easy, because here as well as in most parts of our life, there are a lot of different ways, to achieve, what you want. :expressionless:

See, the thing is, it depends on so many factors, what you can/should/want to use as a card, that there simply is no right answer. If you have specific sensors build in the background, you might want or need to use another card.

That said, the above screenshot (or mockup) is relatively easy to make in lovelace. You will need a few custom cards, but nothing fancy out of the ordinary. :smiley: Note, that this would be my first try for this design, so it may very well be, that others would do that different, or with a little more time, find potential to save ressources and so on… :wink: You get the idea. :slight_smile:

For the sidebar I’d use layout-card and a grid system. Both “text” parts in the “header” are probably made with markdown-card. For the graph I’d choose mini-graph-card. The light buttons are made with button-card. Media is likely to be mini-media-player and afterwards the standard new weather-card.

To line the cards up, I’d use a second instance of layout-card and do the sorting by hand (vertical-mode).

As I said, that would be my way to set this up. Others will very likely do it in another way. :slight_smile: The bigger problem comes now, as all of these cards have a lot (and I really mean a lot!) customization options. To locate which one is right for you, will be a time consuming process. For example, the rounded corners for buttons can be done (1) in button-card itself or (2) via card-mod. With card-mod you could change all other (card-) corners as well (in one line). And here you need to know, what can do what.

But, let’s be honest, nobody knows and has all the available options at hand. If you “work” with HA, you will eventually see a lot of things, and then find yourself in the situation, that you really want to adapt your settings. :slight_smile:

Have fun exploring all the cool things that are possible with lovelace and HA :smiley: :smiley: :smiley: