🏠 HaCasa - A new modern dashboard

Share your Projects! Dashboards & Frontend
1

Free
Free4500Ă—3000 1.02 MB

Ko-fi Discord GitHub Release GitHub Repo stars

Hi Everyone, and welcome to HaCasa :purple_heart:

I’m excited to introduce you to HaCasa - a modern yet simple UI for your Home Assistant dashboard.

What is HaCasa?

The sole purpose of HaCasa is to provide a modern, minimalistic dashboard for Home Assistant. It is designed to be easy to use and customize, while still providing a professional look and feel. The SOAP (significant other acceptance parameters) is a key aspect of the design, ensuring that the interface is not only functional and understandable but also visually appealing to everyone in your household.

So, its just a theme?

Not even close! HaCasa is more than just a theme. It includes a complete set of card designs that are tailored to work seamlessly with the theme. Without the HaCasa cards the theme means nothing and without the theme the cards are just a collection of buttons.

Where does it come from?

There are a lot of great themes and dashboards out there, but I was never really satisfied. Always wanted something different and easy to understand for my family. Thats why I deciced to create something of my own and thus HaCasa was born. I can’t say this team is based on a certain designer, I just took a lot of inspiration from the HomeAssistant community and every designer showcase page out there.

Credits

Contributing

Do you have a card design that fits our modern, minimalistic vibe? Share your creations with us! Check out the Contributing section.

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

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?