Hi, I wanted to contribute back to this community by sharing a few screenshots of my kiosk dashboard running on a Amazon Fire and maybe inspire some other users looking to build a dashboard. It’s build in the mushroom theme with a lot customized cards and pop-up cards (the majority of the cards) to declutter the interface. If requested i can share the yaml files
6 Likes
I’d love to see more including the yaml.
2 Likes
I’m having some trouble to paste my code into pastebin not yet able to share public because of there filters. I will look into this after work. It’s a bit too much to paste in this post 
No hurry! Your interface is really clean and efficient. Whenever you get it figured out I’m excited to see how you pulled it off.
Are the icons on the left the built in sidebar, or did you add those to a dashboard and hide the sidebar?
I started with the Grid layout on a tab with this code:
grid-template-columns: 12% 3% 28% 28% 28%
grid-template-rows: 32px 770px 200px
grid-template-areas: |
"menu . top top top"
"menu . col1 col2 col3"
"col4 col4 col4 col4 col4"
after that i ‘assigned’ the vertical-stack card to the menu section and just linked every new button to a new tab in the interface, to highlight it i used card_mod to hide the background in whole, except the selected section (start in this case)
type: vertical-stack
cards:
- type: custom:simple-clock-card
hide_seconds: true
font_size: 4rem
paddingLeft_size: px
paddingRight_size: px
paddingTop_size: px
paddingBottom_size: 32px
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
view_layout:
grid-area: menu
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Start
icon: mdi:home
icon_color: light-blue
layout: horizontal
tap_action:
action: navigate
navigation_path: home
card_mod:
style: |
#ha-card {
# box-shadow: none;
# background: none;
# border: none;
#}
- type: custom:mushroom-template-card
primary: Beneden
icon: mdi:sofa
icon_color: blue
layout: horizontal
tap_action:
action: navigate
navigation_path: woonkamer
badge_color: |-
{% if is_state("media_player.chromecast_hd", "on") %}
teal
{% elif is_state("media_player.livingroom","playing") %}
purple
{% else %}
{% endif %}
badge_icon: |-
{% if is_state("media_player.chromecast_hd", "on") %}
mdi:television
{% elif is_state("media_player.livingroom","playing") %}
mdi:music
{% else %}
{% endif %}
secondary: ""
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Boven
icon: mdi:bed
icon_color: red
layout: horizontal
tap_action:
action: navigate
navigation_path: keuken
badge_color: |2-
{%if is_state('climate.airco','heat') %}
red
{% elif is_state('climate.airco','cool') %}
blue
{% elif is_state('climate.airco','heat_cool') %}
orange
{% elif is_state('climate.airco','dry') %}
grey
{% elif is_state('climate.airco','fan_only') %}
green
{% endif %}
badge_icon: |-
{% set current = states('sensor.airco_current') | float %}
{% if current > 0 %} mdi:air-conditioner
{% endif %}
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Tuin
icon: mdi:flower
icon_color: teal
layout: horizontal
tap_action:
action: navigate
navigation_path: tuin
card_mod: null
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Energie
icon: mdi:lightning-bolt
icon_color: light-blue
layout: horizontal
tap_action:
action: navigate
navigation_path: instellingen
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Media
secondary: ""
icon: mdi:play-circle-outline
icon_color: purple
fill_container: false
multiline_secondary: false
tap_action:
action: navigate
navigation_path: /dashboard-kiosk/muziek
badge_icon: |-
{% if is_state("sensor.playstation_source", "Disney+") %}
phu:disney-plus
{% elif is_state("sensor.playstation_source", "YouTube") %}
mdi:youtube
{% elif is_state("sensor.playstation_source", "Minecraft") %}
mdi:minecraft
{% endif %}
badge_color: |-
{% if is_state("sensor.playstation_source", "Disney+") %}
blue
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Mobiliteit
icon: mdi:car
icon_color: blue
layout: horizontal
tap_action:
action: navigate
navigation_path: masterslaapkamer
badge_icon: |-
{% if states("sensor.reservations") | int > 0 %}
mdi:parking
{% endif %}
badge_color: blue
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Homelab
icon: mdi:flask-outline
icon_color: green
layout: horizontal
tap_action:
action: navigate
navigation_path: manoah
badge_icon: |-
{% if states("sensor.octoprint_current_state") == "Printing" %}
mdi:printer-3d
{% endif %}
badge_color: orange
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Actueel
secondary: ""
icon: mdi:newspaper
icon_color: deep-orange
layout: horizontal
tap_action:
action: navigate
navigation_path: weer
hold_action:
action: none
double_tap_action:
action: none
badge_icon: |-
{%if is_state('number.fire_tablet_screensaver_timer','0') %}
mdi:tablet-dashboard
{% endif %}
badge_color: blue
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
- type: custom:mushroom-template-card
primary: Recepten
secondary: ""
icon: mdi:silverware
icon_color: yellow
layout: horizontal
tap_action:
action: navigate
navigation_path: mealie
hold_action:
action: none
double_tap_action:
action: none
badge_icon: |-
{%if is_state('number.fire_tablet_screensaver_timer','0') %}
mdi:tablet-dashboard
{% endif %}
badge_color: blue
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
border: none;
}
after that is a matter of copy/paste it in every tab and ajust the highlighting of the chosen tab
1 Like
I’m excited to dig in and work on my own variant of this. Thanks for following up with your code!
I’m also curious about your theme. Is that custom or do you use one from HACS? If it’s custom, are you willing to share the source of the backgrounds? Looks so nice!
I have been trying to get this working and have been struggling.
Would you be willing to paste the entire dashboard yml? I’ve tried it a bunch of ways and can’t keep the elements from overlapping.