🏠 HaCasa - A new modern dashboard

Share your Projects! Dashboards & Frontend
1

hacasa_cover
hacasa_cover1600Ă—1120 372 KB

Hi Everyone, I like to introduce you to HaCasa, a modern but simple UI for your Home Assistant Dashboard. HaCasa is somewhat a adaptation of @fredrikpersson92 MiniHass MKII. After seeing his work, I wanted to create something that fits my needs and style, so together we created HaCasa.

I have to be honest, it’s been about 5 months since I did something with HaCasa, but I want to know how many people would really like me to develop this further. I have some awesome and great ideas, but I don’t want to take all that effort for me alone.

So without further ado, you can find the files and theme on my Github and don’t forget to check out the documentation for installing this dashboard! Needless to say that everything you need to know is on that page, like where to place the files, what you need, which cards are included and how to configure them.

So, what do I want?
First off all, I want you to use the dashboard and theme. If it’s perfect for you, great, happy to help!

But if not I would like to get your input, feedback and ideas so I can develop it further.

You can create an issue on the Github page, but I also made a Discord server. Maybe it’s a bit overkill but its way easier to communicate in case of issues.

I’m also looking for people who can help me with developing HaCasa. Maybe by designing, maintaining or documenting, but it’s all welcome! If you’re interested, let me know in the Discord server ór send me a PM.

32 Likes
2

Nice one! :+1: :partying_face:

The cards look really good, very stringent, very straight! The idea with the buttons on the right is cool, eg. the climate card. Gives it a nice “businessy” touch! I really like it!

Very promising, I’ll test it for sure. But I’ll wait until this is HACS ready, at least as a custom repository. I’m messing way to much with my installation, if I start to manually install, I’ll loose my way. But you wrote that is already on the to-do list, so I can easily wait for that.

Great addition, will keep an eye on this thread. :slight_smile:

3 Likes
3

Looks very nice and clean!

1 Like
4

Wow! That is a very well designed, clean and beautiful interface! You can see a lot of thought went in to it.

2 Likes
5

That looks really nice, I’m anxious to see it progress. Great job!

2 Likes
6

If it were possible to install it from HACS, I would have already installed it. Nice and sophisticated, great job. I will pay attention to the channel and if possible I will be one of the first to install it.

2 Likes
7

Download the Source code (zip) from the latest release
maybe it would of been better to post this thread when everything was ready to go !

1 Like
8

thanks for this!! some great ideas in it that i can use to change my own button cards… the way you have set things up is very very nice

1 Like
9

What I’m missing is an entity-card and foremost a template-card. I have so many things, that I need to show in some way, a template-card is nice in such cases!

But overall it’s a good feedback, I think! :slight_smile:

10

Anyway to install this via HACs?

11

The answer is given above: no

12

My bad! I fix this as soon as possible!

13

That is a great idea, i will work on that.

1 Like
14

This will be my prio one to find out how :sweat_smile:

1 Like
15

Looks crazy good dude!

16

When i add this to my configuration.yaml I am getting an error. See below

lovelace:
  mode: "storage"
  resources:
    - url: "/hacsfiles/button-card/button-card.js"
      type: "module"
    - url: "/hacsfiles/my-cards/my-cards.js"
      type: "module"
    - url: "/hacsfiles/kiosk-mode/kiosk-mode.js"
      type: module
    - url: "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900"
      type: css
  dashboards:
    HaCasa:
      mode: "yaml"
      title: HaCasa
      icon: mdi:script
      show_in_sidebar: true
      filename: "dashboard/HaCasa/main.yaml"

The system cannot restart because the configuration is not valid: Invalid config for 'lovelace' at configuration.yaml, line 20: Url path needs to contain a hyphen (-) for dictionary value 'lovelace->dashboards', got {'HaCasa': {'mode': 'yaml', 'title': 'HaCasa', 'icon': 'mdi:script', 'show_in_sidebar': True, 'filename': 'dashboard/HaCasa/main.yaml'}}
17

That’s an error in the documentation, you’re totally right.

The name for a dashboard needs to contain a hyphen, so in this case, you could take something like “Ha-Casa”. Or hacasa-test. Whatever you like, but with a hyphen.

I’d use something like this:

lovelace:
[...]
  dashboards:
    hacasa-test:
[...]

EDIT:
See here for the documentation:

@damiantje99t
I’m not familiar with how you setup your Github repo, so I choose to not submit a PR to change that line. :slight_smile: But you should do it, as it hinders people to install it… I haven’t noticed, but I didn’t use the original name for my test dashboard… :slight_smile:

18

I like the overall look of the theme… Nice and classy, although I think there is room for improvements.
The first one is definatly getting the possibility to install this using HACS.
And the second is getting rid of the dependencies of the other modules.
The use of templates is great, but raises the bar of a simple theme installation.

19

Hi, nice theme template :ok_hand: I saw on the repo that you have an issue to apply to the template progress bar for media players. I have this universal template that I use for my other custom button cards. I tried to insert it into your template and it seems to work including real time update.

  progress_bar:
    styles:
      custom_fields:
        progress:
          - background-color: 'rgba(0,0,0,0.1)'
          - position: absolute
          - top: unset
          - bottom: 0px
          - height: 0.5rem
          - width: 100%

        bar:
          - background-color: '#00acc1'
          - position: absolute
          - bottom: 0px
          - left: 0%
          - top: unset
          - height: 0.5rem
          - z-index: 1
          - transition: 1s ease-out
    custom_fields:
      bar: >
        [[[
          if (entity.attributes.media_position !== undefined) {
          setTimeout(() => {
            let elt = this.shadowRoot,
                card = elt.getElementById('card'),
                container = elt.getElementById('container'),
                bar = elt.getElementById('bar');
            if (elt && card && container && bar) {
                card.insertBefore(bar, container);
                  function update() {
                    let mediaPositionUpdatedAt = entity.attributes.media_position_updated_at,
                        mediaPosition = entity.attributes.media_position,
                        mediaDuration = entity.attributes.media_duration,
                        mediaContentType = entity.attributes.media_content_type;
                    let percentage = entity.state === 'paused'
                      ? (mediaPosition / mediaDuration * 100)
                      : entity.state === 'playing'
                        ? (((Date.now() / 1000) - (new Date(mediaPositionUpdatedAt).getTime() / 1000) + mediaPosition) / mediaDuration * 100)
                        : 0;
                    bar.style.width = percentage.toFixed(1) + '%';
                    requestAnimationFrame(update);
                  }
                  requestAnimationFrame(update);
            }
          }, 0);
          return ' ';}
        ]]]
      progress: >
        [[[
          if (entity.attributes.media_position !== undefined) {
          return ' ';}
        ]]]

example of use

- type: custom:button-card
  template:
    - custom_card_mediaplayer_music
    - progress_bar
  entity: media_player.spotify

progressbar

2 Likes
20

How does the navigation-bar works. Do you have code for that?