🏠 HaCasa - A new modern dashboard

Hi!

First off, great looking dashboard! Very easy on the eyes :slight_smile:

I see some people have a navigation bar at the end, see post: 🏠 HaCasa - A new modern dashboard - #47 by matti1207

I don’t see it in the documentation nor in the posts somewhere. How is this achieveable?

Thanks in advance!

1 Like

In the Discord channel are some custom cards / templates that can be used in your dashboard. See: GitHub - damianeickhoff/HaCasa: Custom theme and cards for Home Assistant for the Discord server info.

That card looks great! Would you mind sharing the code?

Any idea why the image is missing in security card?

Hi Everyone,

First, I want to appolegize. I’ve been really absent on the HA forums. Most of the communication went through Discord. But I want to change that and what way to start better than with a new release major release?!

Still, it’s not responsive, I’m fixing the base first and then I will focus on make it responsive (and after that making it work in UI) or maybe I switch those, I don’t know yet.

Anyways, thank you all for the support, enjoy the new version and I like to here your feedback on this one!


Release v2.1.1 - Summer Vibes Edition! :sunny:

Get ready to turn up the heat with the latest HaCasa release! We’ve packed this update with exciting new features and enhancements to make your smart home experience even better.

Important Notice!

This update changes how the templates are ordered. The templates are now separated in internal_templates and custom_templates so its easier to implement custom cards without touching the core of HaCasa. I would advice to place the template folder from this release and move any custom cards to the custom_templates folder. After that, you can remove all the loose files directly underneath templates since their already inside the internal_templates folder.

Besides that, its possible that some of you will encounter a issue with the custom icons. Some icons have been renamed. If you get an error its probably because its missing a -fill icon. You can fix this by removing the

New Features

  • Peachy Theme: :peach: Hello, summer! We’ve added a brand-new Peachy theme to give your dashboard a fresh, vibrant look. It’s like sunshine for your smart home interface! Enjoy a bright, user-friendly experience that’s perfect for the warmer months.

  • Header Card: :top: A new header card has been introduced. It shows the weather, air condition and a nice photo of you :camera:.

  • Dynamic Weather Card: :sun_behind_rain_cloud: Stay one step ahead of the elements with our new Dynamic Weather Card that changes background and color based on the conditions!

  • Scene Card: :sparkles: Set the mood in a snap with the new Scene Card. Whether you’re planning a cozy “Movie Night” :popcorn: or getting ready for a bright “Good Morning” :sunrise:.

  • Navigation Bar Card: :compass: We’ve streamlined your smart home journey with the new Navigation Bar Card. This enhancement makes it smoother than ever to move between different sections of the HaCasa interface, so you can find what you need, right when you need it.

  • New Docs Framework: :books: We’ve overhauled our documentation with a brand-new framework! This update brings a better structure and organization, making it easier than ever to find the information you need to master HaCasa.

  • Improved Documentation: :hammer_and_wrench: We’ve also added more detailed documentation about implementing HaCasa. Whether you’re a seasoned pro or just getting started, you’ll find expanded explanations and practical examples to guide you through the process.

Enhancements

  • Improved several existing cards: We’ve given several of our existing cards a makeover, with a focus on boosting performance, refining the design, and enhancing the overall user experience. Smoother, faster, and better-looking!

  • Improved the original gold theme: We’ve polished the original gold theme, giving it some extra sparkle with visual and functional improvements.

  • Improved documentation: Our documentation has been generally improved, including typo fixes, clarity enhancements, and better organization, ensuring you have the best resources at your fingertips.

*If you’re stuck with updating, check out the new documentation about that, join our Discord or just comment in the forums. *

7 Likes

Hello Damian, after i have all installed like you discribed it in your dokumentation everything works, but i can‘t get the icons get to work. Can you help me? Herr ist a picture, where i placed theme in the config.

Will this be available through HACS eventually?

Mind to share the code of this card?

In all fairness, I’m relatively new to the game, especially from a Hacasa perspective. I’ve installed all the necessary dependencies through HACS and, in my opinion, have activated everything. However, when I open the Hacasa dashboard, I don’t see much. I’m wondering if this is a common issue, and if someone would be willing to help me set things up (and happy to pay for that, I speak Dutch and English)

Clicking editing, I do get this message:
The edit UI is not available when in YAML mode.

See below
CleanShot 2025-05-11 at 10.22.11

Also checked my Yaml file (and use GPT to double check if I made mistake)

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
# lovelace:
#  mode: yaml

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: "/hacsfiles/lovelace-card-mod/card-mod.js"
     type: module   
   - url: "/hacsfiles/mini-graph-card/mini-graph-card-bundle.js"
     type: module 
   - url: "/hacsfiles/lovelace-layout-card/layout-card.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-dashboard:
      mode: "yaml"
      title: HaCasa
      icon: fapro:house-fill
      show_in_sidebar: true
      filename: "dashboard/HaCasa/main.yaml"

Thank you for your support!

Hi, to edit. You need to use Studio Code Server
Here is a tutorial if needed : link

Going to give this a try, looks great !

I’m having an issue with the graph showing up for the climate card:

The second card is using the mini-graph-card while the top is the HaCasa implementation.

This is my yaml for this card:

- type: custom:button-card
  template: hc_climate_card
  entity: climate.ecobee_thermostat
  show_window_state: true
  show_mode_state: true
  show_graph: true
  graph_entity: sensor.ecobee_thermostat_current_temperature
  graph_color: var(--color-red)

Does anyone have any insight on this?

Its not formatted correctly

type: custom:button-card
entity: climate.ecobee_thermostat
template: hc_climate_card
variables:
  show_grah: true
  graph_entity: sensor.ecobee_thermostat_current_temperature
  graph_color: var(--color-red)



hc_climate_card:
  variables:
    show_graph: true
    graph_entity:
    graph_color: var(--color-red)
    current_state_label: "Current state: "
  show_label: true
  show_state: true
  tap_action:
    action: more-info

  state_display: |
    [[[ 
      return variables.current_state_label + states[entity.entity_id].attributes.hvac_action;
    ]]]
  label: |
    [[[ return states[entity.entity_id].attributes.current_temperature + '<sup style="font-size: 40px;">°</sup>' ]]]
  show_icon: false
  styles:
    grid:
      - grid-template-areas: |
          'l buttons'
          'n buttons'
          's buttons'
          'footer footer'
          'graph graph'
      - grid-template-rows: repeat(5, min-content)
    card:
      - padding: 15px
    name:
      - justify-self: start
      - align-self: end
      - font-weight: 600
      - font-size: 14px
      - z-index: 2
      - margin-bottom: -7px
      - pointer-events: none
    label:
      - font-size: 70px
      - justify-self: start
      - align-self: start
      - font-weight: 700
      - z-index: 2
    state:
      - justify-self: start
      - color: var(--subtext-color)
      - font-size: 12px
      - margin-top: 4px
      - font-weight: 500
      - z-index: 2
    custom_fields:
      graph:
        - display: |
            [[[ return variables.show_graph && variables.graph_entity ? 'block' : 'none' ]]]
        - position: absolute
        - left: 0
        - bottom: -1px
        - width: 100%
        - z-index: 1
      footer:
        - margin-top: 10px
        - display: flex
        - justify-content: center  

  custom_fields:
    buttons:
      card:
        type: custom:button-card
        styles:
          grid:
            - grid-template-areas: |
                'item_1'
                'item_2'
                'item_3'
            - row-gap: 1.20
          card:
            - padding: 10px
            - border-radius: 50px
            - box-shadow: none
            - background-color: var(--button-card-background)
            - z-index: 3
          custom_fields:
            item_2:
              - opacity: 0.7
        custom_fields:
          item_1:
            card:
              type: custom:button-card
              icon: mdi:chevron-up
              styles: &icon_style
                icon:
                  - width: 25px
                card:
                  - padding: 10px
                  - border-radius: 500px
                  - box-shadow: none
                  - background: none
              tap_action:
                action: call-service
                service: climate.set_temperature
                data:
                  temperature: |
                    [[[ return states[entity.entity_id].attributes.temperature + 0.5 ]]]
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"
              show: |
                [[[ return states[entity.entity_id].attributes.hvac_mode === 'heat' ]]]
          item_2: "[[[ return states[entity.entity_id].attributes.temperature + '°' ]]]"
          item_3:
            card:
              type: custom:button-card
              icon: mdi:chevron-down
              styles: *icon_style
              tap_action:
                action: call-service
                service: climate.set_temperature
                data:
                  temperature: |
                    [[[ return states[entity.entity_id].attributes.temperature - 0.5 ]]]
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"
              show: |
                [[[ return states[entity.entity_id].attributes.hvac_mode === 'heat' ]]]

    footer:
      card:
        type: horizontal-stack
        cards: |
          [[[
            const modes = states[entity.entity_id].attributes.hvac_modes || ['off', 'heat', 'cool', 'heat_cool', 'dry', 'fan_only'];
            return modes.map(mode => ({
              type: 'custom:button-card',
              icon: `mdi:${
                mode === 'off' ? 'power' :
                mode === 'heat' ? 'fire' :
                mode === 'cool' ? 'snowflake' :
                mode === 'heat_cool' ? 'autorenew' :
                mode === 'dry' ? 'water-off' :
                mode === 'fan_only' ? 'fan' : 'help-circle'
              }`,
              show_name: false,
              styles: {
                card: [
                  { 'margin-right': '10px' },
                  { 'border-radius': '50%' },
                  { 'box-shadow': 'none' },
                ],
                icon: [
                  { width: '25px' },
                  { color: states[entity.entity_id].state === mode ? 'var(--accent-color, #FF9500)' : 'var(--primary-text-color)' },
                ],
              },
              tap_action: {
                action: 'call-service',
                service: 'climate.set_hvac_mode',
                data: { hvac_mode: mode },
                target: { entity_id: entity.entity_id },
              },
            }));
          ]]]

    graph:
      card:
        type: custom:mini-graph-card
        entities:
          - entity: "[[[ return variables.graph_entity ]]]"
            show_fill: true
            show_line: false
        show:
          name: false
          icon: false
          state: false
          points: false
          labels: false
        height: 100
        line_width: 2
        line_color: "[[[ return variables.graph_color ]]]"
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1;
            }
        tap_action:
          action: more-info

Hello everyone!

I’m trying out this project to refresh my dashboard, which is built on Matt8707’s Lovelace. I’m currently adapting some cards. This template is for the climate system, where I’ve automatically added the operating modes to the footer and the device status in place of the repeated temperature value. If you like it, feel free to use it.


A Note for the Creators

Please review the installation proposed on the website, as there are some unnecessary configurations:

a) If the settings to hide the header have been moved to the theme, there’s no need to propose them and overlap them with Kiosk.

b) Configuring in storage mode (config.yaml - see the second photo) does not require manually declaring additional resources. These will be loaded automatically by the system if uploaded via HACS or manually in settings -> dashboards -> resources.

c) In the main.yaml file, folders should be indicated as shown in the third photo.

1 Like