Hey could anyone share a new discord invite link of the HaCasa discord ? Thanks
Glad you like it,
I noticed i had a bug can you change the word “custom” to “mdi”
Also here is where you change the background
Change the ‘#1c1f27’ to the color you want.
background: |
[[[
return variables.dark_mode === true ? '#1c1f27' : '#eff1f5';
]]]
I managed to get the dashboard to display, thanks to ChatGPT. It seems one of the modules was not loaded properly, even though I copied it from the script. However, the example image links appear to be broken, so I am unsure what it is supposed to like.
I’ve continued to follow the guide, but despite modifying the YAML code, the pages do not appear to update. Could there be an additional step required? It still has not recognized the third page.
As you can tell, I am quite new to YAML dashboards! 
I have reworked the existing vacuum cards.
Thanks to the others for posting their designs on discord i have updated to make the buttons dynamic, you can choose the order and you can add your own.
The reason of this redesign is for work in the sections home design.
Here is an example of my card
type: custom:button-card
entity: vacuum.roborock_s50
template: hc_vacuum_card
variables:
icon: custom:roborock-vacuum
enabled_buttons:
- resume
- pause
- home
main_card_bg: rgb(128,10,45)
hc_vacuum_card:
label: |
[[[
const state = states[entity.entity_id].state;
return state.charAt(0).toUpperCase() + state.slice(1);
]]]
show_icon: true
icon: "[[[ return variables.icon ]]]"
styles:
grid:
- grid-template-areas: |
'i room_buttons buttons'
'i room_buttons buttons'
'i room_buttons buttons'
- grid-template-columns: 1fr auto auto
- grid-template-rows: min-content min-content min-content
card:
- overflow: hidden
- padding: 20px 20px 20px 10px
- max-height: 120px
- background: "[[[ return variables.main_card_bg ]]]"
label:
- grid-area: i
- justify-self: start
- align-self: start
- opacity: 0.8
- font-size: 12px
- font-family: montserrat
- font-weight: 400
- padding-top: 40px
- z-index: 2
name:
- grid-area: i
- justify-self: start
- align-self: start
- font-weight: 700
- font-size: 15px
- font-family: montserrat
- z-index: 2
- padding-top: 15px
img_cell:
- position: absolute
- top: 40%
- right: 40%
- overflow: visible
icon:
- position: absolute
- overflow: visible
- color: rgba(255,255,255,.3)
custom_fields:
buttons:
card:
type: custom:stack-in-card
cards: |
[[[
const state = states[entity.entity_id].state;
// Define all possible buttons with their IDs
const buttonMap = {
home: {
icon: 'mdi:home-import-outline',
perform_action: 'vacuum.return_to_base'
},
locate: {
icon: 'mdi:map-marker',
perform_action: 'vacuum.locate'
},
start: {
icon: state === 'cleaning' ? 'mdi:pause' : 'mdi:play',
perform_action: state === 'cleaning' ? 'vacuum.pause' : 'vacuum.start'
},
resume: {
icon: 'mdi:play',
perform_action: 'vacuum.start'
},
pause: {
icon: 'mdi:pause',
perform_action: 'vacuum.pause'
}
};
// Order buttons according to enabled_buttons
const enabled_buttons = variables.enabled_buttons || [];
const orderedButtons = enabled_buttons
.filter(id => buttonMap[id]) // only include valid IDs
.map(id => ({ id, ...buttonMap[id] }));
return orderedButtons.map(btn => ({
type: 'custom:button-card',
icon: btn.icon,
show_name: false,
styles: {
icon: [ { 'width': '25px' } ],
card: [
{ 'padding': '5px 5px 0px 5px' },
{ 'background': 'none' },
{ 'box-shadow': 'none' }
]
},
tap_action: {
action: 'perform-action',
perform_action: btn.perform_action,
target: { entity_id: entity.entity_id }
}
}));
]]]
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0.3) !important;
border-radius: 50px !important;
padding: 5px !important;
height: 120px !important;
}
type: custom:button-card
entity: vacuum.roborock_s50
template: hc_vacuum_card