[RELEASE] smartly 2.1.0 featuring smartly-inject

spelcheck · October 28, 2020, 10:18pm

|WHAT’S UP? - view the most recent release notes

|ATTENTION - we are in the process of updating our SMARTLY instructions

For more detailed instructions for getting started with updating your dashboard with SMARTLY, visit [ARCHIVE] smartly sub-2.0 - #5. Instructions for setting up SMARTLY-INJECT (the smartly companion) look below.

SMARTLY 2.0 featuring SMARTLY-INJECT!

It was said that adding a Drag-and-drop interface to the built-in HUBITAT 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 in conjunction with SMARTLY 2.0. SMARTLY-INJECT can be used without using SMARTLY, but features will be limited.

For a detailed step by step guide with illustrations, please visit us here

Ultra-quick guide to update your JSON with SMARTY:

Go to https://hubitat.ezeek.us/smartly

MAKE A BACKUP of your dashboard JSON [just copy it into a text file].
Copy and paste your HE Dashboard ‘Layout JSON’ into the green box.
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).

Fine fine, I know SMARTLY. What’s next?

Introducing SMARTLY INJECT

THE SMARTLY COMPANION

While we were ironing out the last few kinks in the SMARTLY-INJECT 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 effect is available to give your dashboards the depth we’ve been missing. [requires SMARTLY to enable]
Temperature and humidity tiles can be enabled dashboard-wide and tile-specific using @techmedx gradients using cutting edge chroma.js library. [ requires SMARTLY to enable ]
Battery tiles can be configured dashboard-wide and tile-specific using concise thresholds for RED/YELLOW/GREEN. [ requires SMARTLY to enable ]
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 ]

Sounds great, how do I start?

|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 won’t 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 .

When visiting your dashboard via the cloud, the supporting files will be accessed remotely at the [100% donation-funded] smartly project servers at AWS.

|2. 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.

|3 … PROFIT

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.

Technical Details

The “magic” behind this integration all starts with some Javascript inject by using a virtual device driver. This combined with some additional code inserted automagically into the JSON of the Dashboard is what kick starts the integration.

spelcheck · October 28, 2020, 10:21pm

Most recent release / patches

RELEASE 2.1.0 - 11/22/2020

SMARTLY

add mod options for ‘generic’, ‘variable*’ and ‘weather’ tile types #98 @temptingtime @bBrian
add Pixel 5 calibration #106 @djw1191
text tile text alignment mod not working #108 @yoyotogblo
Thermostat ‘title replacement’ mod needs adjustment #109 @Simon
Add calibrations #110
– Lenovo Yoga Tab 3 10" @sebad90
– Samsung Galaxy S20 @yoyotogblo
add icon mod for links tiles #111 @epw

SMARTLY INJECT - Update now available on HPM!

Stock .modal conflict with grid-stack modal #24 @ncreed
– Fixed issue “I cannot click to expand any of my Image tiles”.
add attribute tile integer state extraction and class injection #31 @adam @Dan
– We extract the first whole number OR word and inject a class using ‘attribute-[extracted string or number]’ to the tile div. To use this, refer to [RELEASE] smartly 2.1.0 featuring smartly-inject - #9 by spelcheck.

Hotpatch 4 - 10/30/2020

ADVANCED to BASIC grid converter (use “911”) @BorrisTheCat
– create a way to revert a BASIC to ADVANCED grid conversion · Issue #102 · ezeek/smartly · GitHub
“Cannot set property ‘value’ of undefined” found and diagnosed by @BlueMoon23
– GREAT work on this, Blue.
– smartly_update and smartly_settings_update modals not properly disposed of on close · Issue #104 · ezeek/smartly · GitHub

Hotpatch 3 - 10/29/2020

Attempt at fixing “Cannot set property ‘value’ of undefined”

Hotpatch 2 - 10/28/2020

“Lowercase text transformed” @wecoyote5
– overzealous text-transform: lowercase should NOT affect input elements · Issue #103 · ezeek/smartly · GitHub

Hotpatch 1 - 10/25/2020

“when using the new 60/22 standard grid, calibration is 2x zoom” @jasonbalsor
– when using the new 60/22 standard grid, calibration is 2x zoom · Issue #101 · ezeek/smartly · GitHub

spelcheck · October 28, 2020, 10:21pm

Past releases

RELEASE v2.0 | 10-24-20 | see issues

For the history of smartly and a look into the work done on previous releases, visit [[ARCHIVED] smartly pre-2.0 - find us in our new thread!]

ANYONE USING quarter height / half width grid

[[smartly] ‘quarter height’ and ‘half width’ tiles HOWTO ]

If you are already using column width 60 and row height 22 then smartly will LEAVE YOUR GRID ALONE. No more resetting after every update. 60/22 is the NEW STANDARD.
If you are off by 1 pixel though, it will reset back to the OLD standard 135/60 like previous versions of smartly.
If you are using the legacy 135x60 grid and want to use the new 60/22 standard (aka quarter height, half width) then we have built a conversation system for you.

TO CONVERT 135/60 to 60/22 - In your dashboard settings ‘Options’ for both Column Width and Row Height, clear the number and type any letter on your keyboard so that HE makes it say “NaN”. This will make those two values null, not empty, null. When you update your dash through smartly with null values, it will AUTOMATICALLY CONVERT a 135/60 to 60/22.

Noteworthy Improvements

**dashboard settings - header ‘stock (scroll fade)’
**dashboard settings - parallax background
**dashboard settings - color - battery/temperature/humidity - using chroma.js
dimmer and vertical level tiles - mods - touch slider, default and ‘stock percentage’
**battery tiles - individual battery threshold overrides - using chroma.js
**temperature tiles - individual tile GRADIENT overrides - using chroma.js
**momentary button tiles - icons!

** [**requires [smartly-inject]

Huge credit to @TechMedX for his continued work and help on value-based color tiles… humidity, battery and temperature (C and F). And bigger picture, he has been my number one dude from the start, the very first tester/collaborator and a huge reason smartly turned into what it is today.

Enhancements

dashboard - mods
[**scroll fade requires [smartly-inject]

dashboard - parallax & dashboard - header - ‘stock (scroll fade)’ [requires [smartly-inject]]

dashboard - color
[**requires [smartly-inject]

dimmer / vertical level

touch slider - default

touch slider - stock percentage

battery - custom thresholds
[requires [smartly-inject]]

temperature - custom gradient
[requires [smartly-inject]]

spelcheck · October 28, 2020, 10:22pm

This is to reserve the next comment for future use 2!

adam · October 31, 2020, 3:20am

I’m really curious to know how you guys do the color differences based on attribute value. I have a screentime counter I built for my kids and I would love it if it would change color, size, etc. based on the value of screentime remaining.

Below is what my screentime dashboard looks like. The logic is built in webCore.

spelcheck · October 31, 2020, 5:29am

We don’t have value-based color on attribute tiles yet, but we do on temperature, humidity and battery… mostly because it’s predictable what the content will be. For those tiles we locate and extract the number and then run it through chroma.js.

It’ll be more difficult with attribute tiles because the content in them is completely variable, but I’m willing to try! It might have to wait a little while though, as we have some big things cooking.

So I’m not sure if anybody would be willing to take this on, but if this was a device that did this, with its own unique templateExtra value (like HubiGraph, BPT, etc) we’d be able to target it specifically. I definitely see the use

adam · October 31, 2020, 1:25pm

I could probably create a simple device handler to hold the value instead of a rule machine connector.

adam · October 31, 2020, 4:30pm

Well, I figured out a simple way to change the color and size of the attribute through a simple custom device handler. However, it does not change the background color of the tile. I might be good with just using it though. The device handler just has a value attribute and a setDangerValue, setWarningValue, and setSuccessValue command for updating the attribute. I can probably condense that down to one command with a type variable (setValue(string,type)).

spelcheck · October 31, 2020, 5:17pm

Nice work! I just added attribute value (integer) extraction and css class injection for the NEXT release. This way, we can target the tile itself and change the background color (and anything else) based on integer value. This will work for any attribute type where the contents of the tile begins with an integer. CSS example would be:

#tile-99.attribute-60,
#tile-99.attribute-59,
#tile-99.attribute-58 {
 background-color: green;
}

#tile-99.attribute-57,
#tile-99.attribute-56,
#tile-99.attribute-55 {
 background-color: yellow;
}

It’s no chroma.js-enabled tile, but it will give us the power to handle this in CSS for the time being.

adam · November 17, 2020, 8:44pm

Do you know when the next release is coming with the css class injection?

bBrian · November 17, 2020, 10:41pm

Is there a way to edit ‘mods’ and ‘color’ for variable-string types?

spelcheck · November 18, 2020, 7:23pm

State CSS Class Injection (on/off/level/heating/cooling/etc) is available with any version of Smartly Inject, but the new feature where attribute values (numbers and words extracted from attribute tiles) will be in the next version of smartly-inject. I think this should be happening in the next few days.

Will be included in the next release/hotpatch looking like it’ll be in the next few days.

adam · November 19, 2020, 1:56am

I found what your were talking about with the humidity/temp tiles with the attribute class. I wish they did that with variable types.

lewis.heidrick · November 21, 2020, 7:04am

@spelcheck I want to move the switches down some on the dimmer slider tile so they aren’t covering up the title and can’t find the code you gave me before.

spelcheck · November 21, 2020, 2:42pm

Hey man good to see you! I forget what that issue was, but could you post or PM a screenshot? Would be happy to help

hobbyboy · November 21, 2020, 3:10pm

I’m struggling with updating the Titles of tiles. I keep saving them checking that they are saved. Then I copy with the button, go to the Dash in HE, paste. It just will not update the Titles in the tiles. I’ve tried 5 times just now, I’m doing something wrong. Any suggestions? Thanks

Edit: Some sort of refresh issue (ie user error). This is working. Thanks again for all you do!

spelcheck · November 21, 2020, 3:23pm

If you’re seeing no changes saved, you might be missing the second click on the ‘Update’ button in smartly, where it says “Copy to clipboard”. It should turn blue and say “Copied!” when the updated JSON is on your clipboard.

Edit: thank you happy to hear!

hobbyboy · November 21, 2020, 8:20pm

That was it - the second click on update. Thanks Again!

spelcheck · November 23, 2020, 4:48am

RELEASE 2.1.0 - 11/22/2020

SMARTLY

add mod options for ‘generic’, ‘variable*’ and ‘weather’ tile types #98 @temptingtime @bBrian
add Pixel 5 calibration #106 @djw1191
text tile text alignment mod not working #108 @yoyotogblo
Thermostat ‘title replacement’ mod needs adjustment #109 @Simon
Add calibrations #110
– Lenovo Yoga Tab 3 10" @sebad90
– Samsung Galaxy S20 @yoyotogblo
add icon mod for links tiles #111 @epw

SMARTLY INJECT - Update now available on HPM!

Stock .modal conflict with grid-stack modal #24 @ncreed
– Fixed issue “I cannot click to expand any of my Image tiles”.
add attribute tile integer state extraction and class injection #31 @adam @Dan
– We extract the first whole number OR word and inject a class using ‘attribute-[extracted string or number]’ to the tile div. To use this, refer to [RELEASE] smartly 2.1.0 featuring smartly-inject - #9 by spelcheck

bBrian · November 23, 2020, 7:46pm

The update for Color and Mods is working great. Nice work and thanks. I’m having trouble with the basics tab. I know I never made any requests for how I’d like it to work.
This is how I have the tile set up

This is the result

I don’t know what others want. I’d like the variable name removed from the bottom of the tile and the top title replaced as indicated.

[RELEASE] smartly 2.1.0 featuring smartly-inject

|WHAT’S UP? - view the most recent release notes

|ATTENTION - we are in the process of updating our SMARTLY instructions

SMARTLY 2.0 featuring SMARTLY-INJECT!

Ultra-quick guide to update your JSON with SMARTY:

Fine fine, I know SMARTLY. What’s next?

Introducing SMARTLY INJECT

Sounds great, how do I start?

|1. INSTALL the DRIVER - The Smartly Inject Driver

When visiting your dashboard via the cloud, the supporting files will be accessed remotely at the [100% donation-funded] smartly project servers at AWS. |2. 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. |3 … PROFIT

Technical Details

Most recent release / patches

RELEASE 2.1.0 - 11/22/2020

SMARTLY

SMARTLY INJECT - Update now available on HPM!

Hotpatch 4 - 10/30/2020

Hotpatch 3 - 10/29/2020

Hotpatch 2 - 10/28/2020

Hotpatch 1 - 10/25/2020

Past releases

ANYONE USING quarter height / half width grid

RELEASE 2.1.0 - 11/22/2020

SMARTLY

SMARTLY INJECT - Update now available on HPM!

When visiting your dashboard via the cloud, the supporting files will be accessed remotely at the [100% donation-funded] smartly project servers at AWS.

|2. 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.

|3 … PROFIT