Thramahr
May 6, 2024, 2:04pm
1
Full disclosure i am very new to HA, I have been struggling to get a dashboard setup that includes my controls for my Sleep number bed. I like the look of guage, but wish it gave me the ability to adjust without having to step into the button to adjust a slider. I am considering using vertical stack to keep them all together. Then thought, perhaps I am reinventing the wheel. Does anyone have a good sleep number dashboard/button setup? I have an adjustable base, but none of the other super fancy heating/cooling stuff.
-Thrak
I just got my I8 today and quickly created this on an ancient android tablet I had laying around. Plan to make it look pretty once we settle on what we want on the dashboard and where.
1 Like
I just got a SleepNumber bed and wanted to see if you would be willing to share your dashboard?
2 Likes
would you be willing to share this? it looks great!
I have changed it quite a bit since then.
Do you have a link to the card/code you used? Love this.
Here’s the entire view I created. I used Mushroom Cards and Card-Mod for more personalization. I think a lot of the new built in Tile cards can be used instead with the recent updates.
views:
- title: Sleep Number
path: sleep-number
icon: ''
type: sections
max_columns: 1
sections:
- type: grid
cards:
- type: heading
icon: ''
heading_style: subtitle
- features:
- style: slider
type: numeric-input
type: tile
entity: number.sleepnumber_bed_right_foot_position
features_position: inline
vertical: false
hide_state: false
color: primary
icon: mdi:foot-print
name: Foot
grid_options:
columns: 12
rows: 1
- type: picture-elements
elements:
- type: custom:mushroom-chips-card
style:
top: 21%
left: 5%
chips:
- type: entity
entity: light.sleepnumber_bed_light_1
icon: mdi:lightbulb-on-90
icon_color: amber
name: Underbed Lights
content_info: none
tap_action:
action: toggle
- type: custom:mushroom-template-card
layout: vertical
primary: '{{ states[''number.sleepnumber_bed_stephan_firmness''].state }}'
secondary: ''
style:
top: 45%
left: 21%
entity: number.sleepnumber_bed_stephan_firmness
icon: mdi:air-filter
icon_color: light-blue
tap_action:
action: fire-dom-event
browser_mod:
browser_id: THIS
service: browser_mod.popup
data:
title: ' '
size: normal
autoclose: false
content:
type: custom:mushroom-number-card
entity: number.sleepnumber_bed_stephan_firmness
layout: vertical
name: STEPHAN FIRMNESS
icon_color: light-blue
target: {}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 0px 4px 2px rgba(255,255,255,.7) !important;
}
.: |
ha-card {
background-color: rgba(0,0,0,.8);
}
:host {
--mush-icon-symbol-size: 30px;
--mush-icon-size: 33px;
}
- type: custom:mushroom-template-card
layout: vertical
primary: '{{ states[''number.sleepnumber_bed_other_firmness''].state }}'
secondary: ''
style:
top: 45%
left: 78%
entity: number.sleepnumber_bed_other_firmness
icon: mdi:air-filter
icon_color: purple
tap_action:
action: fire-dom-event
browser_mod:
browser_id: THIS
service: browser_mod.popup
data:
title: ' '
size: normal
autoclose: false
content:
type: custom:mushroom-number-card
entity: number.sleepnumber_bed_other_firmness
layout: vertical
name: OTHER FIRMNESS
icon_color: purple
target: {}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 0px 4px 2px rgba(255,255,255,.7) !important;
}
.: |
ha-card {
background-color: rgba(0,0,0,.8);
}
:host {
--mush-icon-symbol-size: 30px;
--mush-icon-size: 33px;
}
layout_options:
grid_columns: 16
grid_rows: auto
image: /api/image/serve/abcdefg/512x512
card_mod:
style: |
ha-card {
background-color: transparent;
border: transparent;
}
- features:
- style: slider
type: numeric-input
type: tile
entity: number.sleepnumber_bed_left_head_position
features_position: bottom
vertical: false
hide_state: false
color: primary
icon: mdi:face-man
name: ' Stephan Head'
grid_options:
columns: 6
rows: 2
- features:
- style: slider
type: numeric-input
type: tile
entity: number.sleepnumber_bed_right_head_position
features_position: bottom
vertical: false
hide_state: false
color: deep-purple
icon: mdi:face-woman
name: ' Other Head'
grid_options:
columns: 6
rows: 2
- type: heading
icon: ''
heading_style: subtitle
column_span: 1
- type: grid
cards:
- type: custom:mushroom-select-card
entity: select.sleepnumber_bed_foundation_preset_left
name: Stephan Presets
icon_type: none
fill_container: true
secondary_info: none
icon_color: light-blue
icon: none
primary_info: none
layout: horizontal
layout_options:
grid_columns: 2
grid_rows: 1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 0px 4px 3px rgba(39,148,212,.7) !important;
}
.: |
ha-card {
background-color: rgba(39,148,212,.1);
border: solid 1px rgba(39,148,212,.3);
border-radius: 3px
}
:host {
--mush-icon-symbol-size: 35px;
--mush-icon-size: 45px;
}
- type: custom:mushroom-select-card
entity: select.sleepnumber_bed_foundation_preset_right
icon_type: none
fill_container: true
secondary_info: none
name: ' Other Presets'
primary_info: none
icon_color: purple
icon: ''
layout: horizontal
layout_options:
grid_columns: 2
grid_rows: 1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 0px 4px 3px rgba(202,111,249,.7) !important;
}
.: |
ha-card {
background-color: rgba(202,111,249,.1);
border: solid 1px rgba(202,111,249,.3);
border-radius: 3px
}
:host {
--mush-icon-symbol-size: 35px;
--mush-icon-size: 45px;
}
badges:
- type: entity
show_name: false
show_state: true
show_icon: true
color: blue
entity: binary_sensor.sleepnumber_bed_stephan_is_in_bed
name: Stephan In Bed
show_entity_picture: false
state_content: name
icon: mdi:face-man
- type: entity
show_name: false
show_state: true
show_icon: true
color: deep-purple
entity: binary_sensor.sleepnumber_bed_other_is_in_bed
name: Other In Bed
show_entity_picture: false
state_content: name
icon: mdi:face-woman-outline
cards: []
header:
layout: center
badges_position: bottom
- subview: true
path: stephan-head
type: sections
max_columns: 1
icon: mdi:face-man
sections:
- type: grid
cards:
- type: custom:mushroom-number-card
entity: number.sleepnumber_bed_left_head_position
layout: vertical
name: STEPHAN HEAD POSITION
icon_color: light-blue
icon: mdi:face-man-outline
primary_info: name
secondary_info: state
layout_options:
grid_columns: 4
grid_rows: 3
card_mod:
style: |
ha-card {
background: transparent;
border: transparent
}
- type: custom:mushroom-number-card
entity: number.sleepnumber_bed_left_head_position
layout: vertical
name: STEPHAN HEAD POSITION
icon_color: light-blue
display_mode: buttons
primary_info: none
secondary_info: none
icon_type: none
layout_options:
grid_columns: 4
grid_rows: 1
card_mod:
style: |
ha-card {
background: transparent;
border: transparent
}
cards: []
- icon: mdi:face-woman
path: other-head
title: Other Head
subview: true
type: sections
max_columns: 1
sections:
- type: grid
cards:
- type: custom:mushroom-number-card
entity: number.sleepnumber_bed_right_head_position
layout: vertical
name: OTHER HEAD POSITION
icon_color: deep-purple
icon: mdi:face-man-outline
primary_info: name
secondary_info: state
layout_options:
grid_columns: 4
grid_rows: 3
card_mod:
style: |
ha-card {
background: transparent;
border: transparent
}
- type: custom:mushroom-number-card
entity: number.sleepnumber_bed_right_head_position
layout: vertical
name: OTHER HEAD POSITION
icon_color: deep-purple
display_mode: buttons
primary_info: none
secondary_info: none
icon_type: none
layout_options:
grid_columns: 4
grid_rows: 1
card_mod:
style: |
ha-card {
background: transparent;
border: transparent
}
doobes
October 9, 2025, 8:43pm
8
Thank you. Great Dashboard.
I’ve got everything working but the background image.
Can you please provide guidance on where, exactly the image goes and the format?
chris
I uploaded the image via the UI (Visual Editor) in the Picture elements card
1 Like
kartcon
December 10, 2025, 1:15am
11
Question for SleepNumber bed owners: Do you find the connection to the API a bit quirky? About once a week the bed will fail to raise or lower as commanded. Sometimes just reloading the integration will fix it, other times a full reboot of the bed works. But sometimes nothing works and I have to revert to using my phone via BlueTooth.
Art
