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).
'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).
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.
- 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).
- [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.
- 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