[ARCHIVED] Dashboard Drag'n'Drop for the built-in Dashboard (with Smartly!) - Find us in our new thread

Drag'n'Drop interface for the built-in Dashboard!

For the full release, go to this thread:

 
This release brings a Drag'n'Drop interface to the built-in Dashboard. This is a feature that was said to be impossible, but by way of a great collaboration between @markus and @spelcheck this is now not only possible, but EASY to use.

While we are ironing out the last few kinks and getting screenshots and videos ready, we are now releasing this for general testing. If you find the instructions in this post enough to get started, please test it :slight_smile:

Follow the installation steps below:
 

INSTALL the DRIVER - The Smartly Injection Driver

To use this feature you need to install the "Smartly Injection" driver. We recommended using HPM to install this driver from @markus's repository, but you have two options:

  • Install using HPM (recommended) - When using HPM you will receive automatic updates to the driver but also the latest JS and CSS files, automatically installed into the hub File Manager so that it runs 100% locally.

  • Manually - You can install the 'Smartly Injection' driver manually, but you won't receive updates automatically and you will need to install the Support Files manually within the hub File Manager (below). The 'Smartly Injection' driver code is is located here.

UPLOAD the FILES - The Support Files (automatically installed by HPM)

If you installed the 'Smartly Injection' device via HPM, this step is already done for you. In fact, performing this step when using HPM can result in strange and unsupported behavior.

If you chose to install the Smartly Injection device manually, you'll also want to upload these Support Files to your hub using your hub File Manager.

If you choose to not install these files (or you visit your dashboard via the cloud) they will be accessed remotely at the 100% donation-funded smartly project servers at AWS.

ADD the DEVICE - Create the virtual device, add the JSInject tile

Once you have the driver, create a Virtual Device with this driver and add that device with the "javascript" attribute anywhere on your Dashboards. The tile for this device will be hidden once active so it will not clutter your Dashboard. Further details and detailed instructions here - no instructions yet.

ADD the JSON - to your Dashboard JSON (automatically added when using smartly)

If you're already a smartly user and have updated your JSON since this post was created, this step is already done for you.

If you choose to not use smartly, you'll need to manually patch your dashboard JSON with this code - not yet linked to.

Technical Details

The "magic" behind this integration all starts with some Javascript injection by using a virtual device driver. This combined with some additional code inserted either manually or by Smartly into the JSON of the Dashboard is what kick starts the integration. From there on the Dashboard is under our control. :wink:
 

Examples

TODO: Add pictures/videos

27 Likes

Reserved 1

Reserved 2

Reserved 1

Reserved 2

I am not finding " Smartly Injection " in HPM...

I looked under Markus and didn't see anything there either.

It could just be me...

It might not have updated everything yet, it was pushed into the repo a few minutes ago.
This is the manifest URL:
https://raw.githubusercontent.com/markus-li/Hubitat/release/packages/smartly-injection-driver.json

EDIT:
There was an issue with the push, fixing it now. Done!

3 Likes

Still not finding in in HPM. Added the repo that you gave.. did a search for Smartly , no go.. :confused:

These things can take a few minutes when a package is just published, it's there now. The one thing which hasn't been tested at all is the HPM install, so please bear with us as any kinks with that process are sorted.

5 Likes

ok then...

1 Like

good work team

4 Likes

I was able to install Smartly injection using HPM. I am not going to get into anything else until tomorrow.

2 Likes

Installed driver, created device, added to dashboards.

Just updated JSON for one dashboard, exited and returned to it, but don't see any drag-n-drop function available.

Please embarrass me by revealing the obvious step/action I've missed...

I instalelled first from GitHub, and then did a match-up and update from HPM, so assumed the support files got uploaded. Maybe not?

1 Like

Check the File Manager in HE, you should have two files there: "smartly.js" and "smartly-injected.min.css"

Once you put the device on there, you also need to reload the Dashboard for it to execute the first time.But since you exited and returned, you have done that. The function is a Paw-print next to the other top-right corner icons.

Wow brilliant. The ingenuity of this community is truly impressive.

5 Likes

when in doubt, reload the dashboard.

Thanks, reloaded the dashboard repeatedly, so likely the files aren't there...going off to check.

I haven't come across any issues so far. It's all been pretty smooth over the last two days.

1 Like

They are there....

Go wiggle your tiles then.

1 Like