#new to dashboards

1 messages · Page 1 of 1 (latest)

frigid quiver
#

is there like a website where you can build dashboards then it will give you a list of all the addons or stugg you need?

grizzled warren
#

@frigid quiver I do not think there is a website like this. However, I recommend using Mushroom Card and Bubble Card to help build your dashboard. You can get these through HACS and I have built my whole dashboard with them. Here are some links:

Mushroom Card: https://github.com/piitaya/lovelace-mushroom

Bubble Card: https://github.com/Clooos/bubble-card

HACS: https://hacs.xyz/docs/use/

GitHub

Build a beautiful Home Assistant dashboard easily. Contribute to piitaya/lovelace-mushroom development by creating an account on GitHub.

GitHub

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch. - Clooos/Bubble-Card

Everything HACS for users.

twilit pumice
#

Really, you don't need anything extra to make a good dashboard. There are guys here that have been running Home Assistant for many years and use nothing but the included cards on their dashboard. I'd suggest starting with those. They're well documented and are commonly used.
When you get to the point where something doesn't look a specific way that you want or something doesn't act/function the way you, that's where custom cards come into play. Like Shooting Star mentioned, use HACS to find and easily install custom stuff. Mushroom card and Bubble card are good to start with. I also like custom:button-card. A new card collection that I'm going to look into more is the Foundry-Card.
When you really want to modify and tinker with stuff, there's card_mod but this is starting to get into some more advanced things like working with CSS and Jinja templates.
Start with the basics and go from there. YouTube videos and the forum are good places for get information. (Try to avoid videos and threads that are more than a year or two old (unless they're active) because a lot could have changed since then.)

frigid quiver
twilit pumice
twilit pumice
#

Can you share the link for that? A lot of it looks like pretty basic stuff.

frigid quiver
twilit pumice
#

Some stuff that I pulled from the post.

The dashboard consists of mostly button cards.
I made the dashboard in sections view, using 3 vertical stacks for each column to keep the spacing right.
If there a side-by-side buttons then I am using a horizontal stack within the vertical stack.
The theme used is https://github.com/pqpxo/SWAKES_hassio
The pollen count comes from the Kleenex Pollen Radar integration. Here's an article: https://vdbrink.github.io/homeassistant/homeassistant_hacs_kleenex.html
Telsa Fleet integration https://www.home-assistant.io/integrations/tesla_fleet/
Uses Calendar Card Pro. Here's the forum thread: https://community.home-assistant.io/t/calendar-card-pro-a-beautiful-high-performance-calendar-card-for-home-assistant/863711
For the recycling info:
the bin collection data comes from my local council using waste schedule integration.
Then map it to a button card
Which might be this https://github.com/mampfes/hacs_waste_collection_schedule

#

User shared a Github link but it seems to be dead. If the YAML was available, it would have been real easy to see how he put it together.

frigid quiver
#

i have messaged him but got no response
the main things i wabt to like recreate is everything but the pollen, tesla and robot cleaner thingy

twilit pumice
#

The post is 44 weeks old and it doesn't look like he's active in the group. Majority of what he has is simply button cards. Not sure if he is using custom:button-card but it's possible. The Good Morning card is probably just a Markdown card with some formatting. The house image he created; there's one that shows when his card is there and another when it's not.

#

This is my version using a Markdown card. ```yaml
type: markdown
content: |
<table width="100%" style="margin: 0px">
<tr>
<td width=60% align="left"><font size="3"> {{ now().timestamp() | timestamp_custom('%A, %B %-d, %Y') }}</td>
<td width=40% align="right" ><font size="3"> {{ now().timestamp() | timestamp_custom('%-I:%M %p') }} </td>
</tr>
</table>
card_mod:
style: |
ha-card {
background: transparent;
border: none;
--markdown-table-border-color: transparent;
}