Already did. Furthermore it seems like it fails only on this tile and checking the code of the other tiles did not help. The code of all the devices shown is correct. But thank you though
Forget to mention that it’s only incorrectly displayed when the device is on. When off then it’s fine
Hi,
I have made a tab card. Every time i pushed the button it increase the background-color contrast.
Does anyone now how to set this off?
Hi, can you share the code for the temperature card?
Hey @LE0N what are you using I can’t find the font name… thanks in advance
1 Like
Hi!
Thank you so much for sharing the code! I couldn’t find an “entity” card that fits well with the theme, and you nailed it — well done!
Could you also share the other cards, like “Garage Door” or “Apple TV”?
Many thanks in advance!!
How do you make the Start vaccum card to change the name and icon if you have zones selected or not? I assume there’s a link between the toggle helpers of the zones cards and the toggle helper of the start vacuum card, but I don’t know how to set that up.
How is the date helper set up, and what else is required to be set up (script, automation) to have the date of the last vacuuming showing on the zones cards?
Anyone who have managed to get the vacuum section to work for a dreame vacuum i keep getting errors when i try to make a it clean rooms.
Make sure that your Dreame vacuum firmware is updated and supports room cleaning, use the correct Dreame-compatible integration and service calls, ensure room names/IDs match, watch for region locks or API limits, keep the integration updated to prevent errors, and share exact errors and model info if issues persist.
When i try to run the script im getting this error
Handlingen script/valg_af_stovsugning kunne ikke udføres. extra keys not allowed @ data[‘zones’]
For Dreame vacuum, use this structure to avoid the extra keys not allowed @ data['zones'] error:
data:
entity_id: vacuum.your_dreame_vacuum
command: app_segment_clean
params:
zones:
- [x1, y1, x2, y2]
- [x3, y3, x4, y4]Thx for your help 
I have now tryed with your format of the script but it seems like it wont go trough to the vacuum, I can get it to clean rooms with segment id, would it be possible to change it to use that instead ?
sequence:
- action: vacuum.send_command
target:
device_id: b406c84566293a7d902f698f76df25b1
data:
command: app_segment_clean
params:
zones:
- - -6011
- 1254
- -3044
- 4146
alias: Vacuum_TEST(CORDINATES)
description: ""
This does nothing to the vacuum but this script works
sequence:
- action: dreame_vacuum.vacuum_clean_segment
target:
device_id: b406c84566293a7d902f698f76df25b1
data:
segments:
- 3
repeats: 1
suction_level: 3
alias: Vacuum_TEST
description: ""
Are you using xiaomi miio integration for it or the dream vacuum integration ? Because it seems like i dont have app_segment_clean and app_send_command availible with my dreame vacuum
My template file looks like this (copied from first post):
Rounded:
########################################################
############### Default global variables ###############
########################################################
# Spacings and radius
horizontal-stack-card-margin: 0px 8px
vertical-stack-card-margin: 8px 0px
grid-card-gap: 16px
ha-card-border-width: "0px" # Removes default 1px line
ha-card-border-radius: 24px
masonry-view-card-margin: 40px 20px
# Main Interface Colors
primary-color: var(--blue)
accent-color: var(--blue)
primary-background-color: var(--contrast1)
secondary-background-color: var(--contrast2)
divider-color: var(--contrast3)
# Text
primary-text-color: var(--contrast20)
secondary-text-color: var(--contrast9)
text-primary-color: var(--contrast20)
disabled-text-color: var(--contrast6)
text-accent-color: var(--contrast1)
# Header:
app-header-background-color: var(--contrast1)
app-header-text-color: var(--contrast20)
app-header-selection-bar-color: transparant
app-header-edit-background-color: var(--contrast2)
app-header-edit-text-color: var(--contrast20)
# Cards
card-background-color: var(--contrast2)
ha-card-background: var(--contrast2)
ha-card-border-color: var(--contrast6)
paper-listbox-background-color: var(--contrast3)
# Tile card
state-unavailable-color: var(--contrast6)
state-light-off-color: var(--contrast10)
state-light-on-color: var(--yellow)
# Sidebar Menu
sidebar-icon-color: var(--contrast6)
sidebar-text-color: var(--contrast20)
sidebar-background-color: var(--contrast2)
sidebar-selected-icon-color: var(--blue)
sidebar-selected-text-color: var(--blue)
# Buttons
paper-item-icon-color: var(--contrast9)
mdc-button-outline-color: var(--contrast6)
# States and Badges
state-icon-color: var(--contrast9)
# Sliders
paper-slider-knob-color: var(--contrast20)
paper-slider-knob-start-color: var(--contrast15)
paper-slider-pin-color: var(--contrast5)
paper-slider-pin-start-color: var(--contrast4)
paper-slider-active-color: var(--contrast15)
paper-slider-secondary-color: var(--contrast7)
paper-slider-container-color: var(--contrast5)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--green)
switch-unchecked-button-color: var(--contrast9)
switch-unchecked-track-color: var(--contrast6)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--contrast2)
table-row-alternative-background-color: var(--contrast3)
data-table-background-color: var(--contrast1)
mdc-text-field-fill-color: var(--contrast3)
# Input
input-fill-color: var(--contrast3)
input-dropdown-icon-color: var(--contrast9)
material-background-color: var(--contrast2)
input-ink-color: var(--contrast20)
input-label-ink-color: var(--contrast9)
input-idle-line-color: var(--contrast7)
input-hover-line-color: var(--contrast20)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--input-idle-line-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-disabled-fill-color: var(--contrast3)
# Modal screen
mdc-theme-surface: var(--contrast2)
# Checkboxes
mdc-checkbox-unchecked-color: var(--contrast15)
# Colors
orange-color: var(--orange)
green-color: var(--green)
blue-color: var(--blue)
red-color: var(--red)
purple-color: var(--purple)
yellow-color: var(--yellow)
grey-color: var(--contrast10)
#######################################################
############### Custom global variables ###############
#######################################################
# Black / White
black: "#000000"
white: "#FFFFFF"
# Colors
purple: rgb(var(--purple-rgb))
yellow: rgb(var(--yellow-rgb))
orange: rgb(var(--orange-rgb))
red: rgb(var(--red-rgb))
green: rgb(var(--green-rgb))
blue: rgb(var(--blue-rgb))
# Color tints
purple-tint: rgba(var(--purple-rgb),var(--color-tint))
yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
orange-tint: rgba(var(--orange-rgb),var(--color-tint))
red-tint: rgba(var(--red-rgb),var(--color-tint))
green-tint: rgba(var(--green-rgb),var(--color-tint))
blue-tint: rgba(var(--blue-rgb),var(--color-tint))
# Gradients
brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
# Color RGB variables
purple-rgb: 239, 177, 255
yellow-rgb: 255, 218, 120
orange-rgb: 255, 181, 129
red-rgb: 255, 145, 138
green-rgb: 206, 245, 149
blue-rgb: 144, 191, 255
# Gradient RGB variables
brightness-low-rgb: 232, 176, 29
brightness-high-rgb: 255, 211, 94
temperature-low-rgb: 177, 197, 255
temperature-high-rgb: 255, 175, 131
# Contrast variables
black1: "#000000"
black2: "#111318"
black3: "#171A21"
black4: "#1C1F27"
black5: "#262A35"
black6: "#353946"
black7: "#434856"
black8: "#535865"
black9: "#636774"
black10: "#777A83"
white10: "#898C94"
white9: "#969AA6"
white8: "#A4A9B6"
white7: "#B3B8C6"
white6: "#C3C8D5"
white5: "#D4D8E2"
white4: "#E1E5EF"
white3: "#EAEDF6"
white2: "#F4F6FB"
white1: "#FFFFFF"
########################################################
############### Variables based on modes ###############
########################################################
modes:
dark:
# Black white contrats
contrast1: var(--black1)
contrast2: var(--black2)
contrast3: var(--black3)
contrast4: var(--black4)
contrast5: var(--black5)
contrast6: var(--black6)
contrast7: var(--black7)
contrast8: var(--black8)
contrast9: var(--black9)
contrast10: var(--black10)
contrast11: var(--white10)
contrast12: var(--white9)
contrast13: var(--white8)
contrast14: var(--white7)
contrast15: var(--white6)
contrast16: var(--white5)
contrast17: var(--white4)
contrast18: var(--white3)
contrast19: var(--white2)
contrast20: var(--white1)
# Color tint transparancy
color-tint: "0.15"
# Contrast RGB variables
contrast1-RGB: 0,0,0
light:
# Black white contrats
contrast1: var(--white1)
contrast2: var(--white2)
contrast3: var(--white3)
contrast4: var(--white4)
contrast5: var(--white5)
contrast6: var(--white6)
contrast7: var(--white7)
contrast8: var(--white8)
contrast9: var(--white9)
contrast10: var(--white10)
contrast11: var(--black10)
contrast12: var(--black9)
contrast13: var(--black8)
contrast14: var(--black7)
contrast15: var(--black6)
contrast16: var(--black5)
contrast17: var(--black4)
contrast18: var(--black3)
contrast19: var(--black2)
contrast20: var(--black1)
# Color tint transparancy
color-tint: "0.20"
# Contrast RGB variables
contrast1-RGB: 255,255,255
card-mod-theme: Rounded
card-mod-view-yaml: |
hui-masonry-view:
$: |
/* Swipe-card full width on mobile */
@media screen and (max-width: 599px) {
#columns .column swipe-card {
margin-left: -4px;
margin-right: -4px;
}
}
card-mod-card-yaml: |
.: |
/* General changes */
ha-card {
transition: none !important;
font-family: 'custom font, otherwise remove this line', 'Roboto', sans-serif !important;
}
/* Graph card style */
.graph {
background: var(--blue-tint);
display: flex;
overflow: hidden; /* Temporary fix for graph overflow bug */
}
.graph .name {
font-size: 12px;
line-height: 18px;
background: var(--black);
color: var(--white);
padding: 6px 10px;
border-radius: 100px;
z-index: 1;
}
.graph .icon {
display: none;
}
.graph .info {
margin-top: 0;
padding: 24px 24px 0 24px;
order: 1;
}
.graph hui-graph-header-footer {
order: 3;
}
.graph .header {
padding: 0 24px;
order: 2;
margin: 4px 0 -16px 0;
z-index: 1;
}
My card code is like this (also copied from first post):
type: custom:swipe-card
card_width: calc(100% - 48px)
parameters:
centeredSlides: true
slidesPerView: auto
spaceBetween: 16
initialSlide: 0
cards:
- type: sensor
entity: sensor.ter_01_garaz
hours_to_show: 24
detail: 1
graph: line
name: Woonkamer
icon: none
card_mod:
class: graph
Result is:
Class was not adopted by the card. Any idea why?
Hi, is it possible to create this header with time on the left and other cards on the right in the Sections view? And are you able to provide the full YAML for just the header?
2 Likes
Hi everyone, I created a rounded-style sidebar and header. Almost everything is customizable if you like. Here’s the community link.
1 Like
It took me 6 or 7 weeks or so (lead time, not in total 
), a lot of learning and help of Claude and ChatGPT but I’m finally there and last week I mounted the first wall panel. I’ve used an old Dell 27” monitor in the living room and will use two smaller ones (15.6/16”) in the bed room and home office. The 27” was stripped and converted to touch using an infrared touch digitizer. Native touch is better but it still works great.
Since I suck at designing I went looking for something already out there. Watched several Youtube vids with catch lines like ‘The ten best dashboards’ etc. and chose ‘Rounded Bubble’ and used the YAML code one of these video’s linked to. If I remember correctly is was 21k lines of YAML originally. Only four or five weeks in I found both this topic and saw @jlnbln (I’ll send you/him a donation) had started creating video’s on Youtube detailing on parts of the dashboard. Oh well, Ai and I managed as described! 
In those weeks the code also made me buy two Sonos ERA 100’s, three N100/N150 miniPC’s the size of a phone (to mount on the back of the displays), two Aqara FP300 motions sensors and swap my battery video doorbell to a wired PoE one. 
I also started using Music Assistant which looks quite familiar to Roon (I have a lifetime license for my main ‘standalone’ HiFi system). Also deployed a PiCore Audio player on an old Pi2B. All this totally worth it for the dashboard and functionality wise.
Not finished yet, like the wake-up alarms but it does read my alarm from my iPhone. I plan on migrating that function to the bed room Sonos. Also working on more reliable presence detection. Thus far I was only using DIY 2410C’s (ESP32 based) in a storage room and rest room. Next I’ll put something together similar to the Everything Presence Pro. Which will be used in other rooms than the FP300’s are in. Both mentioned are sold out all the time, so I’ll diy a bit more.
Here’s a pic, when I just mounted it and the power cable just dangling. I redacted it a bit but it displays three streaming IP cams using the Advanced Camera Card where the garbled parts are.
Ziet er tof uit! Zou je de code van je cv-ruimte kaart willen delen?