Show Off Your SharpTools Dashboards!

@Marz, that’s because the screen resolution ratios on the tablet and PC are different. You can follow the steps in the post below to use the browser’s Developer Tool on the PC to adjust the browser’s resolution to make it the same as the tablet. So the image should look the same as on the tablet.

1 Like

@Marz A couple notes on this… In addition to James commits

Background images in SharpTool will center and size (scale) the image to cover the dashboard (device ratios) - This also matters when in Full Screen (Kiosk) vs Edit Mode.

If you are using the images included in my original post (Floor Plan Dashboard), that was designed for an iPad. You will get a different result (i.e. image getting cut-off) on a Galaxy Tab/Other.

See if these images are better suited for your project - Hopefully they get you in the ballpark.

1 Like

@Michael - Interestingly, the image tops and bottom match your walls in fullscreen on PC and as well when I use the browser developer tools to view it in the resolution that I have on the galaxy (custom). Also, on my Galaxy Tab A it fits correctly (again top and bottom walls fit the screen properly. I checked your “png” size and mapped mine to something similar, but still no go. I will figure out what is up with my images. I appreciate your help with this as I have read many posts, but I haven’t been able to solve this yet.

@Michael - I figured it out. I added space both at the top and bottom of the actual image (so I have more "blank " space at the bottom and top) - now I can see the entire image correctly.

@Michael and @James thanks for all your suggestions, they got me on the right track!

2 Likes

Hi, how do I get these brown color boxes which I assume are not any hyperlinks / things but just labels?

I created a theme, and one of the styles for the theme I called a label style, which I used to define the look of the label.

When I add lebels, I set the customs style to the one in my theme. I use custom styles on all labels and many other devices based on the type of label or devices. This way I have predefined styles for panel labels, scene labels, security related labels, etc…

By using styles you can change the look globally by editing the theme.

1 Like

Hello everyone!

I just started using ST, currently building my first dashboard. The idea is not original, it’s pretty much a copy of something shared by u/Upstairs_Wolf2112 in Reddit for HA.

Anyway, I thought it would be a nice inspiration to get started doing tests while I’m waiting to get an Android tablet to run it.

Only 25 lines of custom CSS so far too :slight_smile:


7 Likes

@Dinis_Carvalho, welcome to the community, and that’s pretty slick looking dashboard. I am sure the community members will ask for the customizations in a dedicated post as well, since this is really a nice work. :joy:

2 Likes

Thank you, I will definitely do that once I have a bit more content, I’m planning to try and build some custom tiles and additional dashboard “pages”.

2 Likes

I’m a newbie at Dashboards but here is my masterpiece. I still need to implement the Wyze cameras to it. So far, not to shabby! Thank you for looking :blush: The tile named “Cookie” is my Samsung smart stove lol

BTW, this is running on an Amazon Fire HD10 tablet.

4 Likes

@Hilda_Lopez, welcome to the community. That’s a simple clean look dashboard. :+1:

You may be interested to check out the following post for adding Wyze camera to the dashboard using TinyCam pro as the video streaming proxy.

1 Like

Awesome, thank you :blush:

Sharing my work in progress. This is connected via the Home Assistant beta.

5 Likes

I have to thank everyone on here for their inspiration. I haven’t settled on a design, but this one at least the family will use and “kinda likes”. Hard to please everyone. The weather and calendar widgets have made this even more interactive and useful in a general sense for the family.

4 Likes

Well, I’ve been tweaking these for awhile now and about ready for prime time! I’m using Fire HD 10 tablets (latest generation) for the main dashboards. My buddy is 3D-printing wall mounts for me.

Home:

  • The door and garage tiles are Super Tiles because I wanted to add the battery levels. Too bad my Yale smart locks are claiming 100% battery after a year of use - I doubt it!
  • The “Hey Riley!” button is a Hue scene that turns all the lights in my kid’s room red. She knows that means we need her to come out.
  • The cameras are Nest Cam Outdoor which (thanks to this community) I was able to publish to URLs that are called using Media tiles.

Devices:


These are mostly just normal Thing tiles but the Call Mom/Dad buttons in the bottom right trigger virtual switches which call Alexa routines to make a call to mobile phones. My daughter doesn’t have a phone so this gives her an easy way to call us if needed.

Weather:


These are Media tiles pointing to a local news station’s weather content. It works well but I think I will try making Custom Tiles for the forecasts because I don’t love having their branding and style since it’s quite different from mine. The radar maps are animated and pop up full screen if you tap them.

Traffic:


I’m very happy with this one, the only improvement would be if I can make it interactive (right now it’s a static image that refreshes every 15 minutes). I haven’t started investigating that yet but I guess it might be possible using an iFrame.

Music:


We’ve got a number of Sonos zones so depending on the room the tablet is mounted in I will show different speakers here. This one is for the living room so I wanted to show multiple. The buttons on the right play the desired station in the room the tablet is in. The Sonos button in the bottom right opens the Sonos app in case you need more control (search for music, group/ungroup speakers, etc.).

Kid’s Room:


Finally I created a different dashboard for my kid’s room that’s more aligned with her color/background preferences. Her school publishes a calendar so that’s awesome. In the upper right are Hue Scenes that set the colors to the theme of her favorite Marvel characters. In the bottom right is just a sample RSS feed - the school uses an app called Remind to send announcements to kids (homework due dates, don’t forget to bring whatever tomorrow, etc.). Remind is not currently generating an RSS feed but expressed interest in adding one, so hopefully I could show that kind of stuff in the dashboard!

Like others I want to thank Josh and James for providing such a great product, and the whole community as well for providing amazing support and ideas!

9 Likes

Here’s my first dashboard for the man cave. Still fine tuning a few things, but pretty much done. Will be creating one for the rest of the house soon.

7 Likes

Automating the Legos, nice idea!

2 Likes

Finally integrated my BlueIris cameras into my dashboard. Wasn’t easy as it was all done through custom tiles.
The image in this state updates every few seconds. If you click on it it will load a full stream video for viewing.
The trigger/light icons will trigger and toggle the light on and off. The icons also update in real time and will turn yellow if the light is turned on or something triggers the camera as well.
The timeline icon will launch the BlueIris app to the camera selected so you can then go through the event list and view past events.

Also replicated my harmony remotes onto their own dashboards. Perfect for those times when you can’t use the physical remote (somebody lets the battery die). Better layout than the app. All done through custom times as well and javascript. The hardest part was mimicing the short press/long press actions.

4 Likes