@Dingin if you were asking me, I use the side bar card from HACS.
1 Like
Hello SmartWorkx. I really like this dashboard. Would you like to share the script with me?
Here are some of my dashboards, built for a Fire 10 screen I have in the Kitchen. Lots of trial and error and learn something new everyday but this is what I have since I started this in December. I really want to use the card-mod to implement transparency but that’s next.
1 Like
8 Likes
The home page of our tablet “control center”.
I tried to keep this as uncluttered as possible, while also showing the most important aspects of our house without the need for further navigating or scrolling.
The different elements of the Home page.
The menu button on the navigation bar opens up a quick access main menu for Fully Kiosk, which runs on a tablet in our living room. This allows me to reload page, reload Fully, exit Fully and set screen brightness.
The lights page, with dimmer sliders and quick brightness buttons on top. The bottom button sets the light to 1%, as doing this with the slider was a bit fiddly.
The heat page, where I can control our panel heaters, and override automated modes as well as enable and disable all heating automations.
Power history page, where we can monitor last 24h power usage, price, as well at the correlation between the two.
Vacuum cleaner page. Here we can start, pause, and dock the vacuum, set vacuum power and monitor maintenance items of the vacuum.
The pause and dock buttons only show up when the vacuum is running.
Climate page. Here we can monitor temps and humidity of the house. The buttons on the left changes the info showed on screen. Currently showing the weather forecast for the next 24
Our family calendar. We have created a separate Google account for the house, where we add items to the phone calendar which then is synced to this page.
Information page. Here I can monitor battery status of all wireless sensors, as well as monitor and control Home Assistant.
Electricity prices page. Here we can monitor current days prices and prices for tomorrow.
18 Likes
Hi,
I realy realy like the design of your dashboard!
Could you tell how you did the main the main screen an the Navigation? And perhaps also the lightning page?
Greetings, Micha
great very nice Front Page. Where did you get the icons from and what kind of Weather Card is this? Do you mind sharing you YAML Code?
Have a look through the Lovelace config if you want:
Guess that is easier than trying to explain everything going on?
1 Like
Thanks. The icons are all Material Design Icons. Are you thinking of the climate page?
I posted the full YAML config above of you feel like taking a look.
I am very pleased with mushroom cards and using it by categorising it into 4 columns on a specific tablet dashboard. The tablet uses kiosk with a HACS integration Kiosk_mode to remove the topbar. I tried to make it easy to use so guests can use it as well.
First column categories:
- Messages / notifications (dishwasher ready, washing machine ready, garbage collection tomorrow, etc.)
- Power outlets / switches/
- Lights
Second column categories
- Activities / scenes
a. TV / Smart TV scenes
b. Babycam (turns on and shows camera stream)
c. Mini media player
Third column categories
- Living room (everything for the living room because the tablet is in the living room)
Fourth column categories
- Information (waste collection and rain forecast)
4 Likes
Been working on this for a bit, trying to utilize every bit of screen real estate to provide as much information and control as much as I can without any scrolling. The “downstairs” page is basically the same view but with different light entities.
1 Like
Initial dashboard requires a fairly high-power device to view, given it’s 3D, rotatable, zoomable, and all click-based with light physics:
Next view is a static 3D panel for lower-powered tablets (area in bottom right displays conditional information, such as open doors, windows, water flowing, etc.):
Then I devote remaining tabs to environmental data…
…Controls:
…Cameras (not shown and includes Frigate object detection with Double Take face recognition)
…Security:
And, finally, maintenance and system status:
1 Like
I posted some dashboards in Feb, but I guess I got sick of those when it got hot out. Anyway, here are some current ones but I have begun the process of building new Mushroom dashboards so hopefully I can share soon. I really appreciate the other contributions, lots of ideas and concepts I had not even considered. the floor plan ones are really good, I just need to find a way to get mine is a way that flows correctly on the dashboard.
These are for a Fire 10 screen, but I do have subsets for smaller tablets and old android phones in other areas of the house.
1 Like
I have combined a lot of Dashboard ideas into this creation and am still tweaking but this is the current result.
6 Likes
Very nice looking clean dashboards. Could you share the config please if possible? Thanks
Hi Krisztian,
would you mind sharing some info about your “room card”? The ones with temperature, humidity, and so on…
Thanks in advance,
Mirko
Hi Mirko,
here it is:
color: orange
color_off: dodgerblue
color_type: icon
custom_fields:
al: |
[[[
if (states["light.living_room_ambilight"].state === 'on')
return `<ha-icon
icon="mdi:palette" style="width: 12px; height: 12px; color: var(--button-card-light-color);"></ha-icon>
<span><span style='color: var(--text-color-sensor);'>${("ambilight be")}</span></span> `;
if (states["light.living_room_ambilight"].state === 'off')
return `<ha-icon
icon="mdi:palette" style="width: 12px; height: 12px; color: grey;"></ha-icon>
<span><span style='color: grey;'>${("ambilight ki")}</span></span> `;
]]]
humidity: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 14px; height: 14px; color: dodgerblue;">
</ha-icon><span>${states["sensor.ble_humidity_4c65a8d1fd82"].state}%</span>`
]]]
kdl: |
[[[
if (states["light.living_room"].state === 'on')
return `<ha-icon
icon="bha:ceiling-lamp" style="width: 12px; height: 12px; color: var(--button-card-light-color); "></ha-icon>
<span><span style='color: var(--text-color-sensor);'>${("lámpa be")}</span></span> `;
if (states["light.living_room"].state === 'off')
return `<ha-icon
icon="bha:ceiling-lamp" style="width: 12px; height: 12px; color: grey;"></ha-icon>
<span><span style='color: grey;'>${("lámpa ki")}</span></span> `;
]]]
nl: |
[[[
if (states["light.living_room_nightlight"].state === 'on')
return `<ha-icon
icon="mdi:weather-night" style="width: 12px; height: 12px; color: var(--button-card-light-color);"></ha-icon>
<span><span style='color: var(--text-color-sensor);'>${("holdfény be")}</span></span> `;
if (states["light.living_room_nightlight"].state === 'off')
return `<ha-icon
icon="mdi:weather-night" style="width: 12px; height: 12px; color: grey;"></ha-icon>
<span><span style='color: grey;'>${("holdfény ki")}</span></span> `;
]]]
temp: |
[[[
return `
${states['sensor.ble_temperature_4c65a8d1fd82'].state}°C</span></span>`
]]]
entity: light.living_room
icon: mdi:sofa
name: nappali
styles:
card:
- background: linear-gradient(rgba(255,255,255,0.1) 50%, rgba(0,0,20,0.3) 50%)
- border-radius: 15px
- border: solid 1.5px rgba(57,128,228)
- padding: 4%
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- width: 133px
- height: 133px
custom_fields:
al:
- align-self: middle
- justify-self: start
humidity:
- justify-self: end
- align-self: middle
- font-size: 12px
- color: deepskyblue
- font-weight: bold
kdl:
- align-self: middle
- justify-self: start
nl:
- align-self: middle
- justify-self: start
temp:
- justify-self: end
- font-size: 20px
- font-weight: bold
grid:
- grid-template-areas: '"i temp" "humidity humidity" "n n" "kdl kdl""nl nl""al al"'
- grid-template-rows: 1fr 1fr 1fr min-content min-content min-content
- grid-template-columns: 1fr 1fr
icon:
- width: 45%
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 12px
- color: white
- align-self: middle
- justify-self: start
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: nappali
content:
type: vertical-stack
cards:
- entities:
- entity: light.living_room
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- entity: light.living_room_nightlight
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- entity: light.living_room_ambilight
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- entity: light.floor_lamp
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- entity: light.bedside_lamp
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- entity: light.reading_lamp
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- switch.blitzwolf_4
- entity: light.xiaomi_gateway_2_light
hide_when_off: true
toggle: true
type: custom:slider-entity-row
show_header_toggle: false
style: ''
type: entities
- type: custom:mini-graph-card
animate: true
entities:
- entity: sensor.ble_temperature_4c65a8d1fd82
name: hőmérséklet
- entity: sensor.ble_humidity_4c65a8d1fd82
name: páratartalom
show_state: true
font_size: 80
hour24: true
hours_to_show: 24
icon: mdi:sofa
legend: true
name: ' '
show:
graph: line
type: custom:button-card
3 Likes
I like your Dashboard very much, in fact, I already trying to replicate the layout. On this I have a question.
Do you mind sharing the script " script.lys_scene_morgen" ? Thanks !
Thanks a lot!
Thank you! Sure, no problem:
alias: Lys Scene Morgen
sequence:
- service: scene.turn_on
target:
entity_id: scene.morgen
data: {}
- service: input_number.set_value
data:
value: 1
target:
entity_id: input_number.valgt_scene_lys_melding
- delay:
hours: 0
minutes: 0
seconds: 5
milliseconds: 0
mode: restart
icon: mdi:weather-sunset-up