🏠 HaCasa - A new modern dashboard

Share your Projects! Dashboards & Frontend
1

Free
Free4500Ă—3000 1.02 MB

Hi everyone,

About two year ago, I introduced HaCasa — a modern yet simple UI for the Home Assistant dashboard. It was inspired by the great work of @fredrikpersson92’s MiniHass MKII and aimed to push simplicity, usability, and visual clarity a bit further.

6 months after the initial release, development slowed down from my side. A few months ago, I picked it back up with the intention of taking HaCasa to the next level. I had several ideas planned around design improvements, usability, and feature rework.

Unfortunately, due to a lack of available time, I’m no longer able to actively develop and maintain the project.

Project status

The HaCasa project has now been archived.

  • The repository will remain available on GitHub for reference.
  • Existing users can continue using it as-is.
  • No new updates, issues, or pull requests will be accepted.

I want to thank everyone who showed interest, provided feedback, tested the UI, or reached out with ideas. I genuinely appreciate the support and enthusiasm from the community.

If someone wants to fork HaCasa and continue development independently, they are of course free to do so under the existing license.

Thanks again,
and happy automating :rocket:

— Damian Eickhoff

55 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:

4 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.

4 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:

1 Like
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?