Hello everyone!
I’d like to share with you my first dashboard and how I built. It’s not finished but I think the first two screens already have interesting content to share.
Disclaimer: the design was heavily influenced by a post I saw in a HA reddit post, my goal was to try and implement a similar solution using SharpTools while I learn more about the platform.
Table of contents
- Design assets
- Dashboard settings
- Theme customization
- Custom tile for light dimmer
Design assets
The most notorious part of the dashboard is the apartment 3d render, of course. Luckily I already had this done, when we purchased the apartment we wanted to plan renovations and furniture etc, so I used an app in iPad called Planner 5D (free and also has a premium version). There are other apps for this as well.
After having the 3d render done, I used Photoshop (my company pays for that 
) to work on the blurred background and see how the render could blend in nicely.
After that I used Figma to assemble the background and render and design the actual content / tiles / switches with a proper grid that matches the SharpTools gird configuration I was going to work with.
Dashboard settings
I’ll target one single device as control panel and I need a fine grid to adjust elements inside the 3d render to match the exact location, so I decided to used these settings:
Theme customization
Most of the theme customization was done by using the bult-in parameters:
Colors, sizes, remove shadow, add border radius, etc.
I wrote some custom CSS to override the default switch tile for the look I designed:
(note: this will override ALL default light switches)
/* Default light switch customization */
.tile.card-panel.switch.clickable {
background-color: transparent !important;
overflow: visible !important;
}
.tile.card-panel.switch.clickable .title,
.tile.card-panel.switch.clickable .tile-footer {
color: transparent !important;
}
.tile.card-panel.switch.clickable .main-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
transform: scale(0.6);
background-color: rgb(193 176 137 / 30%);
box-shadow: 0 0 40px 0 rgb(193 176 137 / 30%);
backdrop-filter: blur(8px);
}
.tile.active.card-panel.switch.clickable .main-content {
background-color: #ddc44070;
}
.tile.card-panel.switch.clickable .waves-ripple {
display: none;
}
Unfortunately I had to create two themes that look 100% the same, but use different background images: one with the 3d render and one without it.
Custom tile for light dimmer
This was really fun to do because I knew 0 about the SmartThings API and controlling devices.
I used the Scenes custom tile as an example of how to fetch devices and trigger actions, adapted to devices and then eventually googled my ass off until I found the right command to set the dim level.
To use the tile we just need the API key and the device ID for the light, and it’s done.
This custom tile is still very “hard coded” for my use case and I still have to get the initial level of the light, I plan to make it more of a component for the community if there is demand, but you can check it here.
That’s it, I hope this helps or inspires some of you, let me know if you have questions!
Cheers
