[RELEASE] smartly v1.06 - custom icons, thermostat re-design, custom dashboard link labels and icons

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, Wink, ActionTiles, SharpTools, 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 using @markus's JSinject platform to perform 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!)
  • Custom icon for all numeric tile types (temperature, humidity, energy, power, illuminance, attribute).
  • Custom attribute unit labels.
  • 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] Device Driver for intelligently switching between using local or cloudflare hosted assets built on @markus's JSinject platform.
  • [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.

Changelog closed issues

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

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

60 Likes
Show Off Your Dashboards!
Considering Switching from ST
Dashboard Representation on App vs on Web Browser
How do we "know" HE won't go the way of the Wink?
Phone Dashboard
Dashboard Representation on App vs on Web Browser
Dashboard Representation on App vs on Web Browser
Wink to start charging $4.99 a month to control your devices UNBELIEVABLE
How can i change the text of one tile?
[smartly] Custom Icon Requests
Ios app IPHONE (small screens) dashboard - wife friendly
Dashboard requests
Hubitat Elevation - Impressions after 3 weeks of ownership. Coming from SmartThings
Proper Hubitat Elevation documentation in dire need
Schlage Lock Status
Modal tiles in dashboard?
[smartly] color changing tiles - Votes in we ALL Win!
Show Off Your Dashboards!
Show Off Your Dashboards!
Show Off Your Dashboards!
Underwhelmed and Overwhelmed (I couldn't look at Underwelmed any longer) all Welcomed
Show Off Your Dashboards!
Just one dashboard, why must I choose it?
Show Off Your Dashboards!
[smartly] how to extract tile html
Help Customizing Dashboard
Question about alerts
Using Hubitat remotely
Can you Label a Dashboard Button?
Icon size-dashboard
[Beta] HubiGraphs v0.31 - Graph Speed Up! and Status!
Curious: why hasn’t hubitat made a slick dashboard (wink/HomeKit)
[smartly] 'quarter height' and 'half width' tiles HOWTO
Custom Icon per attribute state in a Dashboard Tile
Android dashboard hangs
Show Off Your Dashboards!
Dashboard - Some things you should know
My Hub does not look like the Tutorials
Hubitat App & Multiple Users
Will there be an updated app
Newbie Dashboard questions
UI Designer & new to Hubitat starting my Dashboard Journey
UI Designer & new to Hubitat starting my Dashboard Journey
How easy is Hubitat compared to Wink?
Dashboard not updating state on multiple devices
Dashboard - changing tile background color based on value (temperature, humidity, etc)
Control appearance of dashboard tile connected to a virtual switch
Dashboard Representation on App vs on Web Browser

RELEASE v1.06 | 5-4-20 | see issues

  • ADDED 79 custom icons #65
  • Add ability to change 'dashboard link' tile icons, change/hide text #61
  • Update thermostat tile layout smartly-base #10
  • Increased icon size within smartly icon replacement chooser #64
  • icon states with spaces break icon replacement selection #63
  • 'icon nudge' for some tile types has the opposite effect #8

Fixes/enhancements included for @CurtisZM @marktheknife .

Screen Shot 2020-05-04 at 11.35.02 AM Screen Shot 2020-05-04 at 11.40.57 AM
Screen Shot 2020-05-04 at 11.36.47 AM

All added codes for reference-

.mdi-curtains-closed:before{content:"\e98d"}
.mdi-curtains-open:before{content:"\e98e"}
.mdi-curtains-partially:before{content:"\e98f"}
.mdi-curtains-opening:before{content:"\e990"}
.mdi-curtains-closing:before{content:"\e991"}
.mdi-curtains-unknown:before{content:"\e992"}
.mdi-lumens:before{content:"\e993"}
.mdi-yard-light-1-off:before{content:"\e994"}
.mdi-yard-light-1-on:before{content:"\e995"}
.mdi-yard-light-2-off:before{content:"\e996"}
.mdi-yard-light-2-on:before{content:"\e997"}
.mdi-yard-light-3-off:before{content:"\e99a"}
.mdi-yard-light-3-on:before{content:"\e99b"}
.mdi-yard-light-4-off:before{content:"\e99c"}
.mdi-yard-light-4-on:before{content:"\e99d"}
.mdi-vertical-blinds-1-closed:before{content:"\e99e"}
.mdi-vertical-blinds-1-open:before{content:"\e99f"}
.mdi-vertical-blinds-1-partially:before{content:"\e9a0"}
.mdi-vertical-blinds-1-opening:before{content:"\e9a1"}
.mdi-vertical-blinds-1-closing:before{content:"\e9a2"}
.mdi-vertical-blinds-1-unknown:before{content:"\e9a3"}
.mdi-vertical-blinds-2-closed:before{content:"\e9a4"}
.mdi-vertical-blinds-2-partially:before{content:"\e9a5"}
.mdi-vertical-blinds-2-open:before{content:"\e9a6"}
.mdi-vertical-blinds-2-unknown:before{content:"\e9a7"}
.mdi-fan-2-off:before{content:"\e9a8"}
.mdi-fan-2-on:before{content:"\e9a9"}
.mdi-fan-3-off:before{content:"\e9aa"}
.mdi-fan-3-on:before{content:"\e9ab"}
.mdi-aromatherapy-off:before{content:"\e9ac"}
.mdi-aromatherapy-on:before{content:"\e9ad"}
.mdi-aromatherapy-water:before{content:"\e9ae"}
.mdi-toilet-aim:before{content:"\e9af"}
.mdi-dragon:before{content:"\e9b0"}
.mdi-blinds-partial:before{content:"\e9b1"}
.mdi-blinds-opening:before{content:"\e9b2"}
.mdi-blinds-closing:before{content:"\e9b3"}
.mdi-blinds-unknown:before{content:"\e9b4"}
.mdi-christmas-tree-1-off:before{content:"\e9b5"}
.mdi-christmas-tree-1-on:before{content:"\e9b6"}
.mdi-christmas-tree-2-off:before{content:"\e9b7"}
.mdi-christmas-tree-2-on:before{content:"\e9b8"}
.mdi-trees:before{content:"\e9b9"}
.mdi-uplight-1-off:before{content:"\e9ba"}
.mdi-uplight-1-on:before{content:"\e9bb"}
.mdi-uplight-2-off:before{content:"\e9bc"}
.mdi-uplight-2-off:before{content:"\e9bd"}
.mdi-faucet-1:before{content:"\e9be"}
.mdi-faucet-1-drip:before{content:"\e9bf"}
.mdi-faucet-2:before{content:"\e9c0"}
.mdi-faucet-2-drip:before{content:"\e9c1"}
.mdi-faucet-off:before{content:"\e9c2"}
.mdi-faucet-on:before{content:"\e9c3"}
.mdi-sink-1:before{content:"\e9c4"}
.mdi-sink-2:before{content:"\e9c5"}
.mdi-sink-3:before{content:"\e9c6"}
.mdi-sink-4:before{content:"\e9c7"}
.mdi-sink-4-drip:before{content:"\e9c8"}
.mdi-running-shoe:before{content:"\e9c9"}
.mdi-runner:before{content:"\e9ca"}
.mdi-down-light-off:before{content:"\e9cb"}
.mdi-down-light-on:before{content:"\e9cc"}
.mdi-track-light-1-off:before{content:"\e9cd"}
.mdi-track-light-1-on:before{content:"\e9ce"}
.mdi-track-light-2-off:before{content:"\e9cf"}
.mdi-track-light-2-on:before{content:"\e9d0"}
.mdi-button-light-off:before{content:"\e9d1"}
.mdi-button-light-on:before{content:"\e9d2"}
.mdi-button-light-2-off:before{content:"\e9d3"}
.mdi-button-light-2-on:before{content:"\e9d4"}
.mdi-tree-alt:before{content:"\e9d5"}
.mdi-disney:before{content:"\e9d6"}
.mdi-hbo-go:before{content:"\e9d7"}
.mdi-slingtv:before{content:"\e9d8"}
.mdi-roku:before{content:"\e9d9"}
.mdi-humidifier-2-on:before{content:"\e9da"}
.mdi-humidifier-2-water:before{content:"\e9db"}
.mdi-humidifier-2-off:before{content:"\e9dc"}
.mdi-sense:before{content:"\e9dd"}

RELEASE v1.05 | 4-12-20 | see issues

  • Attribute tile 'unit' setting in tile editor #56
  • Add icon option before value on temperature, humidity, attribute #59
  • Fix inconsistent white tile borders #54 and #8 smartly-base

Fixes/enhancements included for @markus @CurtisZM @TechMedX .

Screen Shot 2020-04-12 at 7.25.19 PM


RELEASE v1.04 | 4-7-20 | see issues

  • Add "iPad and iPad Air" to calibration #50
  • unable to click lower buttons on thermostat tile type #51 and #6 smartly-base
  • device calibration tags-input should show all options with scrollbar #52
  • centered thermostat label by default
  • removed text shadow from link type tiles #7 smartly-base

Fixes included for @TechMedX @marktheknife .

Screen Shot 2020-04-07 at 10.21.59 AM Screen Shot 2020-04-07 at 10.16.55 AM

Edit: fixes also included for @marti701.


RELEASE v1.03 | 4-4-20 | see issues

  • 'color bulb' type tile icon replacement is ignored #49
  • blank line added to top of custom CSS each time updated #48
  • 'button' type tile icon replacement doesn't work #47
  • Battery % being removed from water sensor tiles #2 smartly-base.
  • some bulb/color bulb icon spacing corrections. #5 smartly-base

Fixes included for @promotiondummy @BorrisTheCat .

Screen Shot 2020-04-04 at 1.24.01 PMScreen Shot 2020-04-04 at 1.37.23 PMScreen Shot 2020-04-04 at 1.53.43 PM

Additionally: moved hosting to AWS so should be more stable and initial testing shows that smartly is processing JSON much faster now.


RELEASE v1.02 | 3-31-20 | see issues

  • Edit and re-editing tile without Update displays inconsistent editing options. #42
  • Battery % being removed from multi/motion sensor tiles. #43

Fixes included for @greglsh @symionow .

Screen Shot 2020-03-31 at 9.29.25 AM


RELEASE v1.01 | 3-28-20 | see issues

  • Added 'razer rp2' calibration. #38
  • 2 column calibration logic updated to allow for more devices. #40
  • thermostat now allows label replacement. #39
  • thermostat design updated for square-tile HEAT and COOL. [AUTO requires 2x wide tile]. #39
  • adjust smartly stock icon placement for dimmer/bulb/colored bulb #41

Fixes included for @marti701 @TechMedX @cjkeenan .

Screen Shot 2020-03-28 at 8.45.54 PM

5 Likes

Reserved :v:

3 Likes

https://paypal.me/spelcheck

smartly is and will always be free, but the server that it runs on isn't. we are running on a modest AWS EC2 instance behind CloudFlare [free], which totals up to roughly $100/year.

we graciously accept donations, and they will be put towards covering the cost of the server, but also coffee for 'ludicrous' speed enhancements, bug fixes and support.

2 Likes

One for future use.

3 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

2 Likes

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

2 Likes

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.

2 Likes

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:

2 Likes

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!

3 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!

2 Likes

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