Sorry to be a doofus here, but this stuff really hurts my head.
I want to build this Dashboard:
I know how to do the bits and pieces. Date, weather, sliders, etc.
I don’t have the slightest notion how to go about arranging them as seen in the image.
Any guidance you could provide would be greatly appreciated.
Can you clarify what you’re actually seeing, so that your goal is clearer? I can’t really tell which part of the screenshot you posted I should focus on to try to suggest something.
What I posted is a graphic I built in PowerPoint.
It’s what I’m trying to assemble out of about 6 bits and pieces making up the display.
thanks
Okay,
I’ve put all the pits and pieces in a dashboard:
Goals:
I’ve looked at vertical stacks, horizontal stacks to no avail
cheers
Another pathetic attempt
I used a Vertical Stack card with two Horizontal Stack cards, with the Date/Weather in the upper Horizontal, and the Sliders and On/Off button (a Vertical stack) in the bottom Horizontal.
Have no earthly idea why:
Here is the yaml if it helps:
views:
- title: Home
sections:
- type: grid
cards:
- type: heading
heading: Media
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:digital-clock
dateFormat:
weekday: long
day: 2-digit
month: short
timeFormat:
hour: 2-digit
minute: 2-digit
- show_current: true
show_forecast: false
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
forecast_slots: 1
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderWidth: 200px
faderHeight: 400px
borderRadius: 24px
faderThumbColor: '#DDD'
faderTrackColor: '#DDD'
faderActiveColor: '#22ba00'
faderInactiveColor: '#F00'
faderTheme: modern
faders:
- entity_id: number.tsr_700_main_volume_db
name: Living Room
- type: custom:button-card
show_name: false
show_icon: true
size: 150px
tap_action:
action: toggle
entity: remote.bravia
name: Power
icon: mdi:power
state:
- value: 'on'
icon: mdi:power
color: green
- value: 'off'
icon: mdi:power
color: red
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderWidth: 200px
faderHeight: 400px
borderRadius: 24px
faderThumbColor: '#DDD'
faderTrackColor: '#DDD'
faderActiveColor: '#22ba00'
faderInactiveColor: '#F00'
faderTheme: modern
faders:
- entity_id: number.tsr_700_zones_volume_db_2
name: Bed Room
- type: custom:button-card
show_name: false
show_icon: true
size: 150px
tap_action:
action: toggle
entity: media_player.tsr_700_zones_2
name: Power
icon: mdi:power
state:
- value: 'on'
icon: mdi:power
color: green
- value: 'off'
icon: mdi:power
color: red
grid_options:
columns: 6
rows: 1
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderWidth: 200px
faderHeight: 400px
borderRadius: 24px
faderThumbColor: '#DDD'
faderTrackColor: '#DDD'
faderActiveColor: '#22ba00'
faderInactiveColor: '#F00'
faderTheme: modern
faders:
- entity_id: number.tsr_700_zones_zone2_volume_db_2
name: Living Room
- type: custom:button-card
show_name: false
show_icon: true
size: 150px
tap_action:
action: toggle
entity: media_player.tsr_700_zones_zone2_2
name: Power
icon: mdi:power
state:
- value: 'on'
icon: mdi:power
color: green
- value: 'off'
icon: mdi:power
color: red
grid_options:
columns: 6
rows: 1
grid_options:
columns: 6
rows: 1
column_span: 1
Cheers
Are you using the dashboard type Panel?
Test this code out in a new dashboard that is setup as a panel. I also increased the font-size.
type: panel
path: ""
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 400px
faderWidth: 200px
borderRadius: 24px
faderThumbColor: "#DDD"
faderTrackColor: "#DDD"
faderActiveColor: "#22ba00"
faderInactiveColor: "#F00"
faderTheme: modern
faders:
- entity_id: number.left_firmness
name: Living Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 30px !important;}
.fader-value {
font-size: 25px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
icon: mdi:power
state:
- value: "on"
icon: mdi:power
color: green
- value: "off"
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 300px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 400px
faderWidth: 200px
borderRadius: 24px
faderThumbColor: "#DDD"
faderTrackColor: "#DDD"
faderActiveColor: "#22ba00"
faderInactiveColor: "#F00"
faderTheme: modern
faders:
- entity_id: number.left_firmness
name: Living Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 30px !important;}
.fader-value {
font-size: 25px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
icon: mdi:power
state:
- value: "on"
icon: mdi:power
color: green
- value: "off"
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 300px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 400px
faderWidth: 200px
borderRadius: 24px
faderThumbColor: "#DDD"
faderTrackColor: "#DDD"
faderActiveColor: "#22ba00"
faderInactiveColor: "#F00"
faderTheme: modern
faders:
- entity_id: number.left_firmness
name: Living Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 30px !important;}
.fader-value {
font-size: 25px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
icon: mdi:power
state:
- value: "on"
icon: mdi:power
color: green
- value: "off"
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 300px;
}
title: Example
Thank you for your amazing work.
My installation of HA must be buggered up or something as my output looks nothing like yours.
I Created a new Dashboard, and set it to panel. I pasted your yaml verbatim. I changed the controls to be the ones for my TV and AVR’s.
The columns with the slider and button are not lined up, the text is no different in size, and changes to the size in the yaml makes no difference. And, the icons are different colors.
To make matters even worse, the display is completely different on my tablet than my computer screen.
Computer:
Tablet:
I’ve tried both sets of slider cards referenced in this thread with the same result.
I’ve about to the point of crying uncle. This should simply not be this difficult.
What version of card mod do you have installed?
That’s part of your issue. Please install v3.4.4, v3.5 was recalled.
It may beneficial to change the dashboard to Sections that is one card wide if you are using across multiple devices with different screen sizes.
Ok,
Reloaded card-mod.
Helped a bit.
This Dashboards will br displayed only on two identical tablets.
This is a start.
Let me futz around with it.
Thanks for all your help.
Here is a Sections example
type: grid
cards:
- type: heading
heading: New section
heading_style: title
grid_options:
columns: full
rows: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: "-0px 0px 0px -400px"
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 400px
faderWidth: 200px
borderRadius: 24px
faderThumbColor: "#DDD"
faderTrackColor: "#DDD"
faderActiveColor: "#22ba00"
faderInactiveColor: "#F00"
faderTheme: modern
faders:
- entity_id: number.left_firmness
name: Living Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 30px !important;}
.fader-value {
font-size: 25px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
icon: mdi:power
state:
- value: "on"
icon: mdi:power
color: green
- value: "off"
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 300px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 400px
faderWidth: 200px
borderRadius: 24px
faderThumbColor: "#DDD"
faderTrackColor: "#DDD"
faderActiveColor: "#22ba00"
faderInactiveColor: "#F00"
faderTheme: modern
faders:
- entity_id: number.left_firmness
name: Living Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 30px !important;}
.fader-value {
font-size: 25px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
icon: mdi:power
state:
- value: "on"
icon: mdi:power
color: green
- value: "off"
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 300px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 400px
faderWidth: 200px
borderRadius: 24px
faderThumbColor: "#DDD"
faderTrackColor: "#DDD"
faderActiveColor: "#22ba00"
faderInactiveColor: "#F00"
faderTheme: modern
faders:
- entity_id: number.left_firmness
name: Living Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 30px !important;}
.fader-value {
font-size: 25px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
icon: mdi:power
state:
- value: "on"
icon: mdi:power
color: green
- value: "off"
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 300px;
}
title: Example
You can shift the whole card left using this line margin: "-0px 0px 0px -400px"
Getting closer…
This is what it looks like on the tablet:
Questions:
Here is my yaml:
views:
- title: Home
sections:
- type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:digital-clock
dateFormat:
weekday: long
day: 2-digit
month: short
timeFormat:
hour: 2-digit
minute: 2-digit
- type: custom:simple-weather-card
entity: weather.forecast_home
name: Home
primary_info:
- wind_bearing
- humidity
secondary_info:
- precipitation
- precipitation_probability
- type: heading
heading: null
heading_style: title
grid_options:
columns: full
rows: 1
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: -70px 0px 0px 0px
views: null
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 200px
faderWidth: 120px
borderRadius: 24px
faderThumbColor: '#DDD'
faderTrackColor: '#DDD'
faderActiveColor: '#22ba00'
faderInactiveColor: '#F00'
faderTheme: modern
faders:
- entity_id: number.tsr_700_main_volume_db
name: Living Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 20px !important;}
.fader-value {
font-size: 15px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
size: 100px
icon: mdi:power
state:
- value: 'on'
icon: mdi:power
color: green
- value: 'off'
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 200px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 200px
faderWidth: 120px
borderRadius: 24px
faderThumbColor: '#DDD'
faderTrackColor: '#DDD'
faderActiveColor: '#22ba00'
faderInactiveColor: '#F00'
faderTheme: modern
faders:
- entity_id: number.tsr_700_zones_volume_db_2
name: Utility Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 20px !important;}
.fader-value {
font-size: 15px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: media_player.tsr_700_zones_2
name: Power
size: 100px
icon: mdi:power
state:
- value: 'on'
icon: mdi:power
color: green
- value: 'off'
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 200px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:custom-mixer-card
faderHeight: 200px
faderWidth: 120px
borderRadius: 24px
faderThumbColor: '#DDD'
faderTrackColor: '#DDD'
faderActiveColor: '#22ba00'
faderInactiveColor: '#F00'
faderTheme: modern
faders:
- entity_id: number.tsr_700_zones_zone2_volume_db_2
name: Bed Room
card_mod:
style: |
.fader {
margin-left: 20px;}
.fader-name {
font-size: 20px !important;}
.fader-value {
font-size: 15px !important;}
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: media_player.tsr_700_zones_zone2_2
name: Power
size: 100px
icon: mdi:power
state:
- value: 'on'
icon: mdi:power
color: green
- value: 'off'
icon: mdi:power
color: red
card_mod:
style: |
ha-card {
width: 200px;
}
Thank you again
To start, are you good with deleting?
- type: heading
heading: null
heading_style: title
grid_options:
columns: full
rows: 1
and changing margin: -70px 0px 0px 0px
to margin: 0px 0px 0px 0px
Yes, I’ve deleted the section and changed the margin
Sorry,
I’ve got to run out.
Will have a look at this in the morning.
Appreciate all your assistance.
No problem!
Here is the correct format for your button cards
type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: remote.bravia
name: Power
size: 100px
icon: mdi:power
state:
- value: "on"
styles:
icon:
- color: green
- value: "off"
styles:
icon:
- color: red
Thank You! We will get it the way you want it!!
You are actually able to put all 3 sliders into one card. Let me know what you think of this
type: grid
cards:
- type: custom:digital-clock
card_mod:
style: |
ha-card {
background: #111111;
border: none;}
- type: custom:simple-weather-card
entity: weather.forecast_home
card_mod:
style: |
ha-card {
background: #111111;
border: none;}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:custom-mixer-card
faderHeight: 200px
faderWidth: 120px
borderRadius: 24px
faderThumbColor: "#DDD"
faderTrackColor: "#DDD"
faderActiveColor: "#22ba00"
faderInactiveColor: "#F00"
faderTheme: modern
faders:
- entity_id: number.left_firmness
name: Living Room
- entity_id: number.right_firmness
name: Utility Room
- entity_id: number.left_firmness
name: Bed Room
card_mod:
style: |
ha-card {
background: #111111 !important;
border: none;}
.fader {
padding: 10px 12px !important;
}
.fader-name {
font-size: 20px !important;}
.fader-value {
font-size: 15px !important;}
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: input_boolean.test
name: Power
size: 100px
icon: mdi:power
styles:
card:
- width: 120px
- margin-left: 40px
- margin-top: "-20px"
- border: none
- background: "#111111"
state:
- value: "on"
styles:
icon:
- color: green
- value: "off"
styles:
icon:
- color: red
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: input_boolean.test
name: Power
size: 100px
icon: mdi:power
styles:
card:
- width: 140px
- border: none
- margin-top: "-20px"
- background: "#111111"
state:
- value: "on"
styles:
icon:
- color: green
- value: "off"
styles:
icon:
- color: red
- type: custom:button-card
show_name: false
show_icon: true
tap_action:
action: toggle
entity: input_boolean.test
name: Power
size: 100px
icon: mdi:power
styles:
card:
- width: 120px
- border: none
- margin-top: "-20px"
- background: "#111111"
state:
- value: "on"
styles:
icon:
- color: green
- value: "off"
styles:
icon:
- color: red
column_span: 1
If you want the Digital Clock and Weather Card side by side, we need to reduce the font and adjsut the layout of the weather card.
