Things just keep getting better. It was said that adding a Drag’n’Drop interface to the built-in Dashboard was impossible, but by way of a great collaboration between @Markus and @Spelcheck, this is now not only possible, but EASY to use. Smartly Inject was designed to either use independently, or you can use it in conjunction with Smartly 2.0
Introducing SMARTLY 2.0 featuring SMARTLY INJECT
THE SMARTLY COMPANION
While we were ironing out the last few kinks in the Pre-Release and getting screenshots and videos ready, we were listening and we heard you. We put extra effort into building additional functionality that you can take advantage of in the newly released Smartly 2.0+.
Parallax background effects are available to give your dashboards the depth they’ve been missing.
Temperature and humidity tiles can be enabled dashboard-wide and per tile using @techmedx gradients using cutting edge chroma.js library.
Battery tiles can be configured dashboard-wide and adjusted per tile using concise thresholds for RED/YELLOW/GREEN.
DRAG and DROP interface [included by default]
Root-tile div auto-classing [included by default] – Tile state and level (where applicable) are now injected as classes into the root tile-div!
Dashboard name injected as Page Title [included by default]
When visiting your dashboard via the cloud, the supporting files will be accessed remotely at the 100% donation-funded smartly project servers at AWS.
Follow the installation steps below:
Open the dashboard that you wish to apply smartly to. In the upper right hand corner, click the gear icon. Then, click “Advanced” in the right hand corner of the window and choose “Layout”. This will display your layout file. Copy your Layout JSON using the instructions in the illustration below.
and paste your HE Dashboard ‘Layout JSON’ into the green box by right clicking in the box and choosing “paste”.
You will need to make any edits here before returning the code back to the json in HE. Clicking on tiles will reveal settings that you can customize. Do this prior to copying back.
Once you’re done Click ‘Update’. Click ‘copy to clipboard’ and paste back into your HE Dashboard ‘Layout JSON’. ‘Save JSON’ and refresh (or when using HE app, back out and click back into your dashboard).
1. INSTALL the DRIVER - The Smartly Inject Driver
To use this feature you need to install the “ Smartly Inject “ 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 Inject’ driver manually, but you wont receive updates automatically and you will need to install the Support Files manually within the hub File Manager (below). The ‘Smartly Inject’ driver code is is located here. Support Files here
Download the 3 files and unzip them to somewhere you will be able to easily find them again. Do NOT rename the files. They must have the exact names that are listed in the repo.
Go to settings in HE and click on File Manager and choose upload. You will need to upload each file individually.
- Next - Visit here for the driver code. Choose Raw and copy all of the code to your clipboard. Return to your HE menu and choose Driver’s Code and New Driver in the upper right hand corner. Paste the driver text into the window at line 1 and click save. The window will not disappear after you save it, but you are safe to move to the next step by clicking Devices in the menu.
2. ADD the DEVICE - Create the virtual device, add the JSInject tile
Go to your menu and choose Devices. In the upper right hand corner click “Add Virtual Device” and create just one virtual smartly device. Call this Smartly Inject and Label Smartly Inject. Scroll down to the user portion of the driver list and choose Smartly Inject. Click Save
You’ll now see a ‘paw’ icon next to the other icons on the top right of your dashboard. Click the paw to enable DRAG and DROP. Click the save icon to save, the Reload icon to reload from the current dashboard, and the Paw to exit.