Custom dashboard with 3d view and custom dimmer

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

  1. Design assets
  2. Dashboard settings
  3. Theme customization
  4. 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 :stuck_out_tongue: ) 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:
image

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)

image

/* 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

7 Likes

RonSwansonParksAndRecGIF

Amazing work! Thanks for sharing the finished dashboard along with the details and steps on how you achieved it! Lots of really fantastic details which ends up in a really polished design. :heart_eyes:

2 Likes

Wow, just wow. I am just starting out and this is aspirational.

3 Likes

Thanks for sharing the light dimmer component. Great work! I’ll try to use it soon. I always wanted a slider component in SharpTools.

2 Likes

I was able to successfully use the dimmer, thanks again for sharing!!

I made a small change around the getDimLevel function. For my use case, I only set the dimLevel to a value that is not 0 if the light is on.

    function getDimLevel() {
        var dimLevel = 0;
        axios.get(baseUrl + '/' + deviceId + '/status', getAxiosConfig()).then(function(response) {
            console.log('Response Status', response.status); 
            if (response.data.components.main.light.switch.value === 'on') {
                dimLevel = response.data.components.main.switchLevel.level.value;
            }
            setSlider(dimLevel);
        });
    }

@josh, if the light is dimmed or turned off (either manually or via another tile), what’s the best way to listen/subscribe to these events in a custom tile? In a perfect world, the dimmer would be adjusted or go to 0 if the light is dimmed or turned off via another action. I didn’t see anything in the developer docs around that.

Thanks.

Awesome, nice to see that the custom tile was helpful :slight_smile:
About subscriptions, does this help?

@Dinis_Carvalho, check that out :slight_smile:

I was hoping that the stio library would provide a listener that we could easily use without making extra API calls to the ST APIs.

4 Likes

Custom Tiles execute in their own sandboxed context and currently don’t have access to any SharpTools resources.

Feel free to create a feature request though – being able to access Thing data and/or Variables from SharpTools in a Custom Tile is something that I’ve personally been interested in, but we’ve been prioritizing on highly voted community feature requests first!

1 Like

Hey @josh ! I’m wondering do you know where to find the device ID for lights? I’d like to try this, but can’t seem to figure out where to find device ID for lights. Thanks in advance!

You can find the device id by going to the User Page, tap ... next to your location, select the desired device, toggle the advanced button, and you should see the device id as shown in the screenshot below.

And here is the SmartThings API doc that you may need for your reference.

2 Likes

Thanks a lot @James!