MiniHass MKII UI Dashboard


As you can see here I created the subfolders and files but when I try to input in my config button_card_templates: !include_dir_merge_named…it tells me integration error…

Hey, you need to put that in the dashboard config. Not “configuration.yaml”.
Mine is called “ui-lovelace_minihass.yaml”

Sorry Fred, just following up with a reply the other thread was closed. I also have lovelace_minimalist dashboard and trying to create a second lovelace dashboard for minihass.

I want to exactly get the layout of folders as you have shown in your pic.

Can you please share what’s your code in ui-lovelace_minihass.yaml? for theme and views?

also you have a views folder, I assume you are creating different yaml for each page like home,alarm,light etc?

Sorry for asking again as the way shown in your readme is not the way as you have done it and I would like to :grinning:

Hi, here is my ui-lovelace_minihass.yaml:

---
title: "MiniHass"
background: "var(--background-image)"
icon: mdi:view-dashboard-variant-outline
kiosk_mode:
  hide_header: false

views:
  - !include views/start.yaml
  - !include views/smarthome.yaml
  - !include views/media.yaml
  - !include views/energy.yaml
  - !include views/security.yaml


button_card_templates: !include_dir_merge_named "/config/ui_lovelace_minihass/templates/"

lovelace:
  mode: yaml
  resources:
  - url: /www/community/button-card/button-card.js
    type: module
  - url: /local/state-switch.js
    type: module
  - url: /local/auto-reload-card.js
    type: module
  - url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/swipe-card/swipe-card.js
    type: module
  - url: /local/stack-in-card.js
    type: module
  - url: https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
    type: css

Correct, there is one yaml file for each view :slight_smile:

2 Likes

Thanks this is very helpful.
I have understood now that you are not entering theme option in this yaml.

I have now started to add theme option to each view page which seems to work. For Eg

title: Home
path: "home"
theme: MiniHass_Dark
cards:

I hope this is the right way.
But I cannot toggle theme, with your toggle that comes with header_right.
I have created the toggle helper boolean (matched the name) and setup an automation like you have shared.Any advise?

Lastly, is there no way the theme changes dark/light mode automatically ?
I even added this yaml minihass_with_mode_switch.yaml

But it doesnt change colour automatically and stuck in Light mode.

Did you add my theme from Github?
The one file basically includes two themes. One dark and one light. It is not using dark and light mode, but are two seperate themes. This is because I have not found a way to toggle dark/light mode from a dashboard. But you can however toggle themes.

To it like I did, you need this theme: https://github.com/fredrikpersson92/minihass/blob/40ac9c70a16aad05b754c6fb85173267463e0c48/theme/minihass.yaml

Not the other one.

To toggle the themes, you need to create an automation for this. This is linked here:

Looks amazing, do you have a climate page? Looking for inspiration on how to display all my temp sensors, TRVs and heating controls.

Hi, sorry no :slight_smile:

1 Like

Hi Frederik,
thanks so much for sharing your amazing dashboard! I was quite impressed by everything Smart Home introducing it. So as soon as I am back home I will give it a try!!!
Cheers
Hauke

2 Likes

Amazing work Fredrik! I’m very impressed. Do you expect to share more cards or yaml of your dashboard?

Glad you like it :slight_smile: Yes there will be many updates coming and also my full dashboard. Just don’t have the time for the time being. But keep checking in!

3 Likes

Build my own version based on Fredrik’s design for irrigation zones… not so clean and perfect as the original ones… but probably interesting…
irrigation_animation

3 Likes

For the garbage collection I also extended Fredrik’s card by the types… and animation…
garbage_collection
The icon’s turn into color, when the day of collection is < 2 days…

3 Likes

Can you share the code of your card?

Amazing dashboard, this is what I created so far with it!



1 Like

Hej Damian,
so you too had a similar idea of improving the initial work of Fredrik :slight_smile:
Do you have an idea of how to nicely create a card for roller shutters? I do not like the typical design with icon, plus, minus or slider… and was thinking about beautifying the slider-button-card…
Cheers!

Sure: here is my GitHub

1 Like

@Schimmelreiter yeah, I really like the modern look but was missing some cards so I created them myself (with help from Fredrik).

Now only need to create a thermostat card and I’m settled (I think for now).

Unfortunately I have no shutters or something similar so I hadn’t had a change to think about a design. But after a quick google, this would def. be a option for me with obviously the Fredrik style.

This Dashboard is so great and very nice looking. Thanks for sharing!

I need this for my wall mounted tablets.