🏠 HaCasa - A new modern dashboard

gmeroni · January 9, 2025, 1:36pm

I have the same issue here…

Helectronic · January 12, 2025, 3:14pm

Ive done that multiple times.
From what I understand there something wrong with the config and resources, no icon at all is shown in the dashboard even though managed to get the weather working.
I really followed the guide step by step, there sure is something very basic, that the guide does not mention that I am missing.

vajdum · January 13, 2025, 6:25am

in case it got overlooked

Helectronic · January 13, 2025, 7:57am

I did manage to get it work, but do to its re configured dashboard I get a lot of errors. I can’t get the weather icons appear at all, even when I start with blank dashboard. I did made the configuration references, but my knowledge is kind of limited, ill spend some time to read and start trial and error.

ptC7H12 · January 13, 2025, 4:05pm

Post your code - The weather card was intended to ist a specific weather integration.
Which weather integration do you use?

iLostMyDinosaur · January 14, 2025, 8:03pm

Looks like you’re missing the font. If it’s not loaded properly in your configuration.yaml (I had the same issue), go to Settings > Dashboards > 3 dots in top right corner > Resources > Add Resources and enter:

https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900

Choose Stylesheet and then restart Home Assistant.

Hope this helps

MarcovDam · January 18, 2025, 10:48am

I have the same problems.

An empty dashboard…
And found this:

Logger: homeassistant.components.lovelace
Bron: components/lovelace/init.py:134
integratie: Dashboards (documentatie, problemen)
Eerst voorgekomen: 11:25:33 (1 gebeurtenissen)
Laatst gelogd: 11:25:33

Lovelace is running in storage mode. Define resources via user interface

Who can help me?

ptC7H12 · January 18, 2025, 10:46pm

Please look into the last few posts, some fixes had already mentioned there…
I think your theme is not active.
And HaCasa is designed, to be used in yaml mode… if you want to use it ui mode, you have to use some workarounds

joschilly · January 24, 2025, 2:16pm

Hi all,
love this theme. Made it work on an edge browser. But on my iphone, all the shades are not shown, colors are missing and the section headers show borders which they shouldnt.
Anyone has an idea?

ptC7H12 · January 24, 2025, 5:26pm

You haven’t selected the theme in your profile settings

joschilly · January 25, 2025, 12:26pm

haha easy fix, thanks!

reeeeevls · January 29, 2025, 5:59pm

Iam feeling really dumb right now…

How the hell do I edit the yaml code?! Where ist it?!

Nick4 · January 29, 2025, 11:28pm

Right hand top side, the pencil.

damiantje99 · February 6, 2025, 4:13pm

Hi Everyone,

I’m excited to introduce you to the newest version of HaCasa or more like a total new project!

It’s been about a year since I introduced HaCasa to the community and didn’t expect this much interest! So many people joined our Discord server and there was a lot on conversation so thank you all for that!

It’s has been a bit quiet from my side, but a few months back I dived back in to take this new version to the next level. Every card has been build back from scratch, with more options, more customization and a overall better design. The theme also got some changes where a lot of bugs were fixed and some colors were added.

What’s New in HaCasa?

More Color: A refreshed palette that adds life to your dashboard while keeping it clean and modern.
Sleeker Design: Simplified layouts and refined elements for a smoother, more intuitive experience.
Reworked Features: Improved functionality and customization options to better suit your needs.

I’ve got some exciting ideas to make it even more user-friendly, and visually appealing - but I can’t do this alone. Great things are rarely built alone, so I need you. Whether you’re a designer, a developer, or just someone with a keen eye for detail, your help and input could make a huge difference.

You can find all the information in the starting message of this topic and again, thank you

Stay Smart

water-escape · February 13, 2025, 9:55am

very nice! ready for installing via HACS? Or even no yaml dashboard but something with the new UI options ?

Seppel · February 19, 2025, 10:46am

Just started really building proper dashboards, I love the look and simplicity of HaCasa.
Can anyone give me a hint on how to make the screen dashboard wider?
I am using the dashboard also on a desktop/panel PC and for that it’s a bit wasted space - at least with the examples.

HG13 · February 26, 2025, 8:41am

Hi there, very nice work! does this also work with the sections layout from HomeAssistant?

Remcove · February 26, 2025, 1:28pm

Hello @damiantje99,

Really great work again. If you need any assistance with anything please reach out. I’ve modified you’re previous templates greatly so I can absolutely help out. For example check out a few of my changes:

and currently changing the weather card to be able to show weather warnings ontop. For example I have bad allergies from pollen so its usefull for me to get a warning if I need to take medication.

Am I correct that in the new version there are no example views like you provided in the previous version?

kind regards,
Remco

Edit:
One thing we can maybe tackle from the beginning (correct me if there is already a way which I don’t know) is the fact that you don’t have to reboot homeassistant each time you change anything in the dashboard/views. Currently after each change in the code I reboot home assistant to see the effect. I don’t think thats very healty for my setup… But when I quick reload all yaml files via the developer tools, nothing updates.

LinZeep · February 27, 2025, 2:52pm

Custom Cover Card

type: custom:button-card
styles:
  grid:
    - grid-template-areas: |
        "n action_card"
        "l action_card"
    - grid-template-rows: min-content 1fr
  card:
    - overflow: hidden
    - padding: 20px
    - height: 150px
    - pointer-events: none
  label:
    - justify-self: start
    - align-self: start
    - font-size: 1em
    - font-weight: 500
    - color: var(--contrast8)
  img_cell:
    - position: absolute
    - top: 35%
    - right: 38%
    - overflow: visible
  icon:
    - position: absolute
    - width: 30rem
    - padding-bottom: 20px
    - padding-left: 5px
    - color: "[[[ return variables.color ]]]"
  name:
    - justify-self: start
    - font-size: 1.2em
    - font-weight: 600
state:
  - value: closed
    name: Closed
    icon: mdi:garage-variant
  - value: closing
    name: Closing
    icon: mdi:garage-open-variant
  - value: open
    name: Open
    icon: mdi:garage-open-variant
    styles:
      icon:
        - color: white
      card:
        - background: var(--orange)
      name:
        - color: white
      label:
        - color: white
  - value: opening
    name: Opening
    icon: mdi:garage-open-variant
    styles:
      icon:
        - color: white
      card:
        - background: var(--green)
      name:
        - color: white
      label:
        - color: white
custom_fields:
  action_card:
    card:
      type: custom:button-card
      styles:
        grid:
          - grid-template-areas: "\"item1\""
          - row-gap: 10px
        card:
          - padding: 10px
          - border-radius: 50px
          - background-color: var(--contrast2)
          - box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 0.1)
      custom_fields:
        item1:
          card:
            type: custom:button-card
            entity: "[[[ return entity.entity_id ]]]"
            show_name: false
            show_state: false
            icon: |
              [[[
                if (states['cover.smart_garage_door_2303137426866761070148e1e9bdb3ec_garage'].state === "open") 
                  return "mdi:chevron-triple-down"
                else if (states['cover.smart_garage_door_2303137426866761070148e1e9bdb3ec_garage'].state === "closing") 
                  return "mdi:chevron-triple-down"
                else if (states['cover.smart_garage_door_2303137426866761070148e1e9bdb3ec_garage'].state === "opening") 
                  return "mdi:chevron-triple-up"
                else (states['cover.smart_garage_door_2303137426866761070148e1e9bdb3ec_garage'].state === "closed") 
                  return "mdi:chevron-triple-up"
              ]]]
            styles:
              icon:
                - width: 2.5rem
                - color: var(--contrast10)
              card:
                - padding: 10px
                - border-radius: 500px
                - box-shadow: none
                - pointer-events: auto
                - background: none
            state:
              - value: opening
                styles:
                  icon:
                    - animation: blink 1.5s ease infinite
              - value: closing
                styles:
                  icon:
                    - animation: blink 1.5s ease infinite
            tap_action:
              action: toggle

kixx2810 · March 2, 2025, 8:26am

Hi Remco,

When you are changing your code, the easiest way to show your changes on your dashboard, is to use the refresh option. Open your dashboard via the GUI and click the three dots on the top right and click refresh.

This makes your live a lot easier