[RELEASE] smartly - the hubitat dashboard skin engine

DETAILED INSTRUCTIONS on our WIKI @ github.com/ezeek/smartly/wiki

introducing smartly

the hubitat dashboard skin engine

Goal: "Make hubitat dashboard prettier and more 'marketable', hubitat sales will increase, hubitat will hire more developers that fix all the things, smartly ends up being unneeded."

note from me, ezeek

I'm a huge fan of Hubitat, what it stands for and the concept of local automation. Sadly, when compared to SmartThings, ActionTiles, etc the dashboard was lacking a modern feel. Sure, HE developers allowed Custom CSS so you can do anything you'd like with it, but along with a few basic shortcomings there was no consistent design and no consistent way to 'skin' the dashboard.

"Let's face it, the stock HE dashboard isn't pretty. Let's give HE an assist to get them over the hump."

With this in mind, and with the help of an excellent team of testers and new friends over the past two months, we've built a user-friendly skin engine. I hope you'll enjoy using smartly, and I hope you'll continue to support the development by reporting issues and with your patience.

These skins use image and font assets that are hosted on a CloudFlare mirrored server. A docker-based locally hosted option with JSinject intelligent switching between local and cloud assets is in development (see Roadmap below).

DETAILED INSTRUCTIONS on our WIKI @ github.com/ezeek/smartly/wiki

Quickstart

'Layout JSON' is within your HE Dashboard > 'settings' gear top-right > 'Advanced' tab > 'Layout' tab

  • Visit https://hubitat.ezeek.us/smartly
  • Copy and paste your HE Dashboard 'Layout JSON' into the green box.
  • Click 'Update'.
  • Click 'Updated! Copy to Clipboard' and paste back into your HE Dashboard 'Layout JSON'.
  • Click 'Save JSON'
  • refresh (or when using HE app, back out and click back into your dashboard).

DETAILED INSTRUCTIONS on our WIKI @ github.com/ezeek/smartly/wiki

Quickstart Video

Wiki direct links

For more detailed instructions, step-by-step screenshots AND videos, visit our github wiki.

  • home - this quickstart
  • instructions - detailed instructions with videos and step-by-step screenshots
  • settings - screen calibration and smartly dashboard global settings
  • zoomy (advanced) - can't find your device in 'calibrate my device'? we've thought of that.

Features

  • Title replacement/customization.
  • Add personalized/custom labels to image and video tiles.
  • Icon replacement per tile and per state with 5200+ modern material design icons (now with search!)
  • Responsive device screen calibration (no more creating separate dashboards for each device!)
  • Visually pleasing 'smartly base' skin and additional skins being actively developed.
  • All skins carefully designed to allow for 'half height' tiles (smarter use of space).
  • HE dashboard UI facelift (with focus on useable mobile design).

Roadmap

  • [built, testing] Make your own skins! Extensible and dead-simple skin creation. (see smartly-skins repo)
  • [in development] Docker-based image, prebuilt specifically for local storage of all required skin assets.
  • [in development] JSinject Device Driver for intelligently switching between using local or cloudflare hosted assets.
  • [proof of concept done] We have a 'developer' theme in the works that enables full css targeting of the parent tile div, using nothing but CSS and HE's JSON without using psuedo classes or JSinject. stay tuned
  • Allow 5200+ material icon chooser to be used per tile TYPE to set default tile type icons.
  • Allow simple color and border changes per tile and per tile state.
  • Allow replacement of titles on 'dashboard links' and others that are non-standard.

Changelog

  • v1.04 | 4-7-20 | issues #50 #51, #52, #6 (smartly-base), #7 (smartly-base)
  • v1.03 | 4-4-20 | issues #47, #48, #49, #2 (smartly-base), #5 (smartly-base)
  • v1.02 | 3-31-20 | issues #42, #43
  • v1.01 | 3-28-20 | issues #1, #38, #39, #40, #41
  • v1.00 | 3-22-20 | initial release

DETAILED INSTRUCTIONS on our WIKI @ github.com/ezeek/smartly/wiki

43 Likes

Reserved one.

2 Likes

Reserved :v:

1 Like

Reserved three.

1 Like

One for future use.

2 Likes

Congratulations @spelcheck on publishing this! Great work! I almost snagged your second post, but waited a bit :stuck_out_tongue:

4 Likes

@spelcheck This is great! I don't use dashboards very much, but I can still appreciate all the thought that you put into this. Really nice work!

4 Likes

Can I just say I am hugely impressed at significant contributions like this that move HE forward in directions that Hubitat themselves might not have expected (but indirectly provided the ability to implement) and users just wished for.

Huge kudos from me ...

6 Likes

Awesome @spelcheck. I was playing with the skin since the first time you posted it in the show off your dashboards thread. I am very happy to see how it evolved - specifically how easy it is to use and the new ability to change an individual tile's title and state icons.

Great work and thanks for letting me help test. My wife is really impressed with the new look of the dashboard on our wall mounted Fire HD 8 tablets.

3 Likes

Nothing constructive to add, other than this is freaking awesome.
Thank you @spelcheck

5 Likes

First of all, great job! You made it very versatile.

I tried to import one of my dashboards. Worked flawlessy except it didn't maintain my column width (50) and row height (35). Once I imported the new JSON, I changed these options, worked okay, but it looks like row 1 is half height (aka, about 17.5). My first row of icons are on line one and they don't line up.

If you need more information, please request!

Alan

1 Like

Have you done a full page refresh after updating the json code? It's trivial that you do that.

1 Like

Thank you for trying smartly!

Though in the future we'll be allowing selective updating (keep your modified settings), it's by design that updating resets those values. Sorry!

The smartly designs are curated, striving for pixel-perfect use of space. The base smartly skin and others will be improved on as we go, but if everybody were using different tile sizes there would be no way of keeping it consistent and no way to support it.

For now, especially for this first release and until we get a feel for how people are using it, I have to discourage the use of custom column width and row heights*. Try to use the 1x 'half height' tiles when you can, and use 2x height tiles (square) for other types that require the extra real estate.

"custom column width and row heights"

Caveat- if you use a row height that divides evenly into the stock row height (60 +/- 2), everything will work as designed so long as you're comfortable doing that. @joehuntley is one of our testers and he's perfected the '1/4 height' method for his dashes. Maybe we can have him share how he does it. I'll add these Q&A and mods to the original post as we go so others can benefit.

Oh yes, the reason that looks strange is because the 'dashboard link' tile type is designed to stand out from other tiles by taking up 1/2 the available row height, centered vertically. This would come in handy when visually setting a row of dashboard links along the top or bottom of your dash.

An alternative, if you really would like your dashboard links to occupy the same real estate as a normal tile, is to create a 'link' type tile and manually enter your direct dashboard URL.

1 Like

Awesome work team! A lot of great input made this possible, thank you all.

4 Likes

I probably need to test some more, but so far none of the dashboards I converted came out to something usable without a lot of reorganizing and work. Probably some setting issue on my end.

EDIT: It was user error. Refresh after pasting the json... I saw that in the instructions, but forgot to do it. :frowning:

4 Likes

Thanks for trying smartly!

  1. It appears you haven't refreshed since pasting the updated JSON into HE and saving. Make sure to refresh!

  2. On your first update, it'll open up a bunch of real estate you didn't have before, as smartly makes use of 'half height' tile design, only using the space the tiles need to get the job done. This is a great opportunity to move tiles around and make use of the space. The example screenshots under 'Instructions' in the wiki have my commentary and hints on this process.

It'll make more sense once you refresh and it doesn't look like it does in that screenshot :+1:

1 Like

Ah, thanks for the reminder. User error. This is what the second one looks like after refresh. Much better, even if the switch icon is cut off on some tiles with long text (may have to do some title replacements):

Pretty cool!

2 Likes

Nice work! Ok so at this point definitely look at the Instructions in the wiki. It goes over shortening those long titles (that are pushing the icon down), replacing icons and calibrating your dashboard for multiple devices.

Edit: Example 7 and 8 should get you set up :+1: There is a link at the very top of the wiki instructions section that'll scroll you down. There are also videos for each of those steps thanks to @techmedx!

1 Like

I've read through it, very helpful. Most of my devices have pretty long titles (as I often prefix the device name with room name), so I guess I'll have a lot of title shortening to do. Understandable, as there is only so much space to be had! :grinning:

Really a very cool tool. Thanks for making this, and I'll be curious to see where it goes over time.

3 Likes

Smartly has taken my Dashboards from being frowned upon by my wife to absolutely loving what I am doing to our home with automation and smart control. Thank you :raised_hands:!!

5 Likes