[RELEASE] smartly v1.08 - more mods, more icons, drag and drop auto-json install

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 (aka spelcheck)

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
77 Likes
Show Off Your Dashboards!
How do we "know" HE won't go the way of the Wink?
Dashboard Representation on App vs on Web Browser
Considering Switching from ST
Phone Dashboard
Help Customizing Dashboard
Custom Icon Requests (smartly or not)
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
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?
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?
Just one dashboard, why must I choose it?
Show Off Your Dashboards!
Dashboard Text Template Font Size
Show Off Your Dashboards!
Underwhelmed and Overwhelmed (I couldn't look at Underwelmed any longer) all Welcomed
Show Off Your Dashboards!
Show Off Your Dashboards!
Dashboard HTML header Meta Name to match Dashboard name
Dashboard Optimization with mobile / tablet
Converted SmartThings User Loves Hubitat
UI Designer & new to Hubitat starting my Dashboard Journey
Change status word in dashboard
Dashboard Tile Request - Device Name Customization
Show Off Your Dashboards!
Dashboard
An (in)complete Guide to HE Dashboards
Example of css to remove device name from a tile
Dashboard template - non-dimming bulb
Actiontiles
Dashboard
Dashboard tile with dual sliders?
Mobile App questions
Where do i Choose what room a device should be in?
Newbie from Smartthings
Webcore and rule machine
Trying to justify this to myself, need some help
New user, MyQ not installing
First Time - What Apps To Download First
Making the move Smartthings to Hubitat
Show Off Your Dashboards!
A Newbie here...Just added Zooz 4:1 Sensor
King and Queen for A Day!
Hubitat or SmartThings for my gear?
Battery level on dashboard for motion sensor
Best dashboard alternatives for wall-mounted iPads
Show Off Your Dashboards!
[smartly] color changing tiles - Now in Celsius
Show Off Your Dashboards!
[smartly] how to extract tile html
Question about alerts
Using Hubitat remotely
Can you Label a Dashboard Button?
Icon size-dashboard
[Release] HubiGraphs 4.0 - "Back in Beta"
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

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

  • [pre-release] CSS Targeting Fix - tile state class (on, off, active, inactive, heat, cool, temperature value, etc etc) injected into the tile div itself.
  • Title replacement/customization/removal.
  • Mod framework for fast implementation of user requested features.
  • 3rd party tile type detection and auto css patching and mod interfaces.
  • 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).
  • Individual background, font and border color picker.
  • Custom attribute unit labels.
  • Allow color and border changes per tile and per tile state by color picker.
  • 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. not needed since launch of File Manager
  • [in development] Device Driver for intelligently switching between using local or cloudflare hosted assets built on @markus's JSinject platform.
  • Allow 5200+ material icon chooser to be used per tile TYPE to set default tile type icons.

Changelog closed issues

  • v1.07 | 9-1-20 | #69, #57, #18, #73, #76, #82, #81, #80
  • v1.06 | 5-4-20 | #79, #78, #77, #75, #71, #70, #65, #64, #63, #61, #8 (smartly-base), #10 (smartly-base)
  • 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

6 Likes

RELEASE v1.07 | 9-1-20 | see issues

Noteworthy Improvements

  • Individual tile background, font and border color (and border size!)

  • Auto-detection and auto-patching of 3rd party tiles to look their best in smartly.
    -- hubigraphs thomas.c.howard, BrianP, Navat604, TemptingTime
    -- bpt life360 welby1978, greglsh
    -- bpt tilemaster

  • New 'mod' framework for adding user-requested mods quickly. Mods added-**
    -- dashboard "header theme" header taking up too much space? try our 'stealth' mode.
    also make your header a footer! mhutchy
    -- dashboard "hide scrollbars" regardless of whether there is overflow, scrollbars will be usable but hidden
    -- "zoomable"make everything within a tile x times larger. jasonbalsor, dman2306
    -- "buttonize" change the layout of a tile to be stacked large icon and small text
    -- "icon only" modifier of buttonize, hides the text, only show the icon and make the icon even larger
    -- 'remove title' to remove the title and attempt to center the contents of a tile vertically. kahn-hubitat
    -- 'text alignment' for text tiles, alter the horizontal alignment wfoltz

Noteworthy Bug fixes

  • music tile now allows for icon replacement TechMedX

Fixes/enhancements included for [a ton of people, tagged above]

--

header 'dark (bottom)' theme

header 'light (top)' theme

header 'stealth (top right - vertical) theme

example of the slick overlay/underlay of tiles interaction with header (stock = chopped off)

auto-detect 3rd party tile mod form (BPT life360 status)

default:

light:

dark:

auto-detect 3rd party tile mod form (BPT general tiles)

auto-detect 3rd party tile mod form (HubiGraph)

auto-detect 3rd party tile mod form (BPT life360 status)

'hide scrollbars' and dashboard 'header theme' mod form

dashboard 'header theme' mod form

dashboard 'header theme' mod form

'zoomable' mod form

'remove title' mod form

'buttonize' and 'zoomable' mod form

'zoomable' mod, used on Thermostat and Clock

hubigraph auto-height/overflow patching

clock using zoomable mod, dashboard link (left) using buttonize and icon_only mod

dashboard link using 'buttonize' mod

image

music tile using new customizable icons and zoomable mod


dashboard link using buttonize mod, background color (transparent), text color yellow, border color transparent

image


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

July-August Hotpatches

  • Add iPhone XR calibration #79
  • Force 2 Column calibration generated css missing closing bracket #78
  • Add Android Essential PH-1 calibration #75
  • Fix Amazon HD10 viewport calibration #72
  • Add Wink Relay calibration #70

Original fixes

  • 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


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

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.

4 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

6 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