Hi!
First off, great looking dashboard! Very easy on the eyes 
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!
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?
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!
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.
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
Peachy Theme: 
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: 
A new header card has been introduced. It shows the weather, air condition and a nice photo of you 
.
Dynamic Weather Card: 
Stay one step ahead of the elements with our new Dynamic Weather Card that changes background and color based on the conditions!
Scene Card: 
Set the mood in a snap with the new Scene Card. Whether you’re planning a cozy “Movie Night” 
or getting ready for a bright “Good Morning” 
.
Navigation Bar Card: 
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: 
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: 
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.
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. *
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
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.
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.
I recently discovered this dashboard, and the documentation appears excellent. However, after adding the details to the config.yaml file and rebooting, while it seems to run fine, I am presented with an extensive message.
All additional HACS components have been included.
Any advice?
If you scroll all the way down to the bottom of the error it does say ‘Welcome Home, what are you upto’ as mentioned within the docs
Here is my Config.yaml
Loads default set of integrations. Do not remove.
default_config:
frontend:
themes: !include_dir_merge_named themes
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
http:
use_x_forwarded_for: true
trusted_proxies:
- 192.168.1.119
homeassistant:
packages: !include_dir_named packages
#rest: !include rests.yaml
input_boolean:
use_openai_next_driveway:
name: Use OpenAI Next (Driveway)
initial: true
use_openai_next_patio:
name: Use OpenAI Next (Patio)
initial: true
##HaCasa
lovelace:
mode: “storage”
resources:
Looks like the entity mentioned doesn’t exist
I made a cover card hope people can test it and let me know what they think
Example card
type: custom:button-card
template: hc_cover_card
name: Lounge
entity: cover.living_room_blinds
variables:
dark_mode: false
enabled_modes:
- up
- stop
- down
Switch between dark and light mode and add\remove buttons in enabled modes section
Since the modes are dynamic you can add your own in the code template and then adjust it to fit with all sorts of entities. I also made a simple speaker card that shows volume controls if the device is on.
hc_cover_card:
icon: |
[[[
const blinds = states[entity.entity_id].state;
if (blinds == 'open') return 'mdi:blinds-horizontal';
else return 'mdi:blinds-horizontal-closed';
]]]
show_icon: true
show_state: true
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content min-content 1fr
card:
- padding: 7px 15px 7px 15px
- min-height: 120px
- background: |
[[[
return variables.dark_mode === true ? '#1c1f27' : '#eff1f5';
]]]
custom_fields:
btn:
- justify-content: flex-end
- align-self: center
- display: flex
- min-height: 100px
name:
- justify-self: start
- align-self: start
- font-size: 14px
- line-height: 30px
- font-family: Montserrat
- font-weight: 600
- color: var(--primary-color)
state:
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- font-family: Montserrat
- color: rgba(96,114,116,0.7)
img_cell:
- justify-content: start
- align-self: start
icon:
- width: 35px
- color: |
[[[
return variables.dark_mode === true ? 'white' : 'black';
]]]
- opacity: '0.12'
- padding-top: 10px
- position: absolute
- align-self: start
custom_fields:
btn:
card:
type: vertical-stack
cards: |
[[[
const modes = [
{ mode: 'up', icon: 'mdi:arrow-up', action: 'open_cover', size: '25px' },
{ mode: 'stop', icon: 'mdi:stop', action: 'stop_cover', size: '25px' },
{ mode: 'down', icon: 'mdi:arrow-down', action: 'close_cover', size: '25px' }
];
const enabled_modes = variables.enabled_modes || [];
const filtered = modes.filter(mode => enabled_modes.includes(mode.mode));
if (filtered.length === 0) {
return [{
type: 'custom:button-card',
show_name: false,
styles: {
card: [
{ 'display': 'none' }
]
}
}];
} else {
return filtered.map(mode => ({
type: 'custom:button-card',
tap_action: {
action: `cover.${mode.action}`,
target: { entity_id: entity.entity_id }
},
icon: mode.icon,
show_name: false,
styles: {
card: [
{ 'padding': '4px' },
{ 'background': 'rgba(205,205,205,0.1)' },
{ 'border-radius': '99px' },
{ 'box-shadow': 'none' },
{ 'width': '30px' },
{ 'height': '30px' }
],
icon: [
{ 'width': mode.size },
{ 'color': 'var(--primary-color)' }
]
}
}));
}
]]]
Hi @NovaG, this is a great addition!
Been pouring everything I have into this project, I’m in love with it!
Between my own understanding and some AI assistance, my dashboard is coming together!
I noticed your cover card is not quite the same background as my other cards when in Dark mode.
Where in the template can I reference the same color?
Hi @pajeronda, I had set up your version of this card, but as you can see, on the right side, when my thermostat is Off, I see “Null”
I noticed in your screenshot, your thermostat is off, but it still displays a temperature.
I copied/pasted your template code. Have you made a change since the screenshot that fixes this?
Check the temperature value for your thermostat in the dev tools → state
