[RELEASE] Smartly 2.0 featuring Smartly Inject

[RELEASE] SMARTLY 2.0 featuring SMARTLY INJECT

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 in conjunction with Smartly 2.0

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

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

  • 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).

Introducing 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 effect is available to give your dashboards the depth we've been missing.
  • Temperature and humidity tiles can be enabled dashboard-wide and tile-specific using @techmedx gradients using cutting edge chroma.js library.
  • Battery tiles can be configured dashboard-wide and tile-specific 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 ]
     
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.

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.

... 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.
:wink:

27 Likes

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. :facepunch:

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). :raised_hands: 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

image

touch slider - stock percentage

image


battery - custom thresholds
[requires smartly-inject]


temperature - custom gradient
[requires smartly-inject]

3 Likes

Reserved 2 :stuck_out_tongue:

Reserved 3

Great work guys very cool indeed.

1 Like

Just tested install using HPM, working perfectly. Thank you!
Would you mind explaining what the parallax effect is and how to activate?

1 Like

Have you guys found a route to creating iframes in dashboards?

I've added release notes with screenshots and a video example of parallax here.

The parallax background effect requires updating your JSON with smartly, and can be enabled in smartly dashboard settings.

Could you explain further? I want to make sure I understand.

I’d like to imbed iframes from other sites in my dashboards an immediate use case would be grafana graphs but there is all sorts of content on the web that we could grab and display.

1 Like

Normally this is done using a custom device, built to display an iframe within an attribute tile. Hubigraph and a few BPT tiles utilize iframes. Someone else might be able to answer in more detail.

I asked for some help with that route here but could never get it working.

Hey Spelcheck,

I'm not seeing the new 2.0 features yet. Am I forgetting to do something?

1 Like

Visit the normal url @ https://hubitat.ezeek.us/smartly in case you might be using another one.

You'll know you are in the right place then you see 2.0 in dark mode :slight_smile:

1 Like

Had to clear the cache and finally got it. Thanks

1 Like

Simply stunning work. I think you all need to be provided superhero names and costumes... :smiley:

1 Like

@potts.mike Check out this driver. I found it from another member on this forum and edited it to my needs. there are instructions and optional CSS in the driver header to include on your dashboard to make it look better/fill the tile:
https://raw.githubusercontent.com/michaelbarone/hubitat/master/drivers/iFrame.groovy

I use it for grafana and other web content on my dashboards.

1 Like

Take a look at @Cobras SuperTiles. Normally HTML tags are stripped from the dash. SuperTiles let’s you set brackets { } instead of < > tags.

So your html could be

{iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"}{/iframe}

You may not have to specify a size, not sure.

This should work. I haven’t tried it myself, but I use quite a lot of html using SuperTiles.

1 Like

You just need to register https://cobra-apps.co.uk
It’s 100% free and the app and instructions are on the site.

Feel free to PM me if needed as I don’t want to derail this thread :+1:

Love the new feature making tiles editable! I had seen some talk of issues with the iPad in the previous thread... I tried it anyway with my iPad and it seems to work. I just had an issue with scrolling when I was working on dashboards that are longer than a screen.

I am also seeing something odd... the dashboard looks good in Safari, but not in the app on the iPad or the iPhone... see screenshots. Let me know what information I can provide to help debug, unless you know what I may have done incorrectly...



Json

{"localization":"English","roundedCorners":5,"dateFormat":"DD/MM/YYYY","hideLabels":false,"customColors":[{"template":"dimmer","bgColor":"rgba(33,100,223,0.9)","iconColor":"rgb(255,255,255)","state":"on"},{"template":"dimmer","bgColor":"rgba(255,255,255,.9)","iconColor":"rgb(80,80,80)","state":"off"},{"template":"motion","bgColor":"rgba(255,255,255,0.9)","iconColor":"rgb(0,0,0)","state":"inactive"},{"template":"motion","bgColor":"rgba(255,248,46,.9)","iconColor":"rgb(0,0,0)","state":"active"},{"template":"switches","bgColor":"rgba(33,100,223,0.9)","iconColor":"rgb(255,255,255)","state":"on"},{"template":"switches","bgColor":"rgba(255,255,255,.9)","iconColor":"rgb(80,80,80)","state":"off"},{"template":"multi","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"closed"},{"template":"multi","bgColor":"rgba(210, 13, 13, 0.9)","iconColor":"rgb(255,255,255)","state":"open"},{"template":"window","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"closed"},{"template":"window","bgColor":"rgb(251,104,14)","iconColor":"","state":"open"},{"template":"door","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"closed"},{"template":"door","bgColor":"rgb(251,104,14)","state":"open"},{"template":"fan","bgColor":"rgba(33,100,223,0.9)","iconColor":"","state":"low"},{"template":"fan","bgColor":"rgba(33,100,223,0.9)","iconColor":"","state":"medium-low"},{"template":"fan","bgColor":"rgba(33,100,223,0.9)","iconColor":"","state":"medium"},{"template":"fan","bgColor":"rgba(33,100,223,0.9)","iconColor":"","state":"medium-high"},{"template":"fan","bgColor":"rgba(33,100,223,0.9)","iconColor":"","state":"high"},{"template":"garage-control","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"closed"},{"template":"garage-control","bgColor":"rgba(210, 13, 13, 0.9)","iconColor":"rgb(255,255,255)","state":"open"},{"template":"garage-control","bgColor":"rgb(251,104,14)","iconColor":"","state":"opening"},{"template":"garage-control","bgColor":"rgb(251,104,14)","iconColor":"","state":"closing"},{"template":"garage","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"closed"},{"template":"garage","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"open"},{"template":"garage","bgColor":"rgb(251,104,14)","iconColor":"","state":"opening"},{"template":"garage","bgColor":"rgb(251,104,14)","iconColor":"","state":"closing"},{"template":"shades","bgColor":"hsla(0,0%,50.2%,.5)","iconColor":"","state":"off"},{"template":"shades","bgColor":"rgba(33,100,223,0.9)","iconColor":"","state":"on"},{"template":"shades","bgColor":"rgb(251,104,14)","iconColor":"","state":"opening"},{"template":"shades","bgColor":"rgb(251,104,14)","iconColor":"","state":"closing"},{"template":"shades","bgColor":"rgb(67,166,52)","iconColor":"","state":"open"},{"template":"door-control","bgColor":"rgb(251,104,14)","iconColor":"","state":"opening"},{"template":"door-control","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"open"},{"template":"door-control","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"closed"},{"template":"lock","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"locked"},{"template":"lock","bgColor":"rgba(251,104,14,.9)","state":"unlocked"},{"template":"water","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"wet"},{"template":"water","bgColor":"rgba(0,243,255,0.9)","iconColor":"rgba(0,0,0,0.66)","state":"dry"},{"template":"smoke","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"detected"},{"template":"smoke","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"clear"},{"template":"bulb","bgColor":"rgba(33,100,223,0.9)","iconColor":"rgb(255,255,255)","state":"on"},{"template":"bulb","bgColor":"rgba(255,255,255,.9)","iconColor":"rgb(80,80,80)","state":"off"},{"template":"presence","bgColor":"rgba(27,176,116,0.9)","iconColor":"rgb(255,255,255)","state":"present"},{"template":"presence","bgColor":"","iconColor":"","state":"not present"},{"template":"temperature","bgColor":"rgba(37,147,187,.9)","iconColor":"rgb(255,255,255)","state":"default"},{"template":"contact","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"closed"},{"template":"contact","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"open"},{"template":"bulb-color","bgColor":"rgba(33,100,223,0.9)","iconColor":"rgb(255,255,255)","state":"on"},{"template":"bulb-color","bgColor":"rgba(255,255,255,.9)","iconColor":"rgba(80,80,80)","state":"off"},{"template":"carbon-monoxide","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"detected"},{"template":"carbon-monoxide","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"clear"},{"template":"outlet","bgColor":"rgba(33,100,223,0.9)","iconColor":"rgb(255,255,255)","state":"on"},{"template":"outlet","bgColor":"rgba(255,255,255,0.9)","iconColor":"rgb(80,80,80)","state":"off"},{"template":"humidity","bgColor":"rgba(58,186,161,.85)","iconColor":"rgb(255,255,255)","state":"default"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"50"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"51"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"52"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"53"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"54"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"55"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"56"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"57"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"58"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"59"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"60"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"61"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"62"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"63"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"64"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"65"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"66"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"67"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"68"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"69"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"70"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"71"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"72"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"73"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"74"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"75"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"76"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"77"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"78"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"79"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"80"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"81"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"82"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"83"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"84"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"85"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"86"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"87"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"88"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"89"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"90"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"91"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"92"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"93"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"94"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"95"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"96"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"97"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"98"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"99"},{"template":"battery","bgColor":"rgba(0,255,105,0.75)","iconColor":"rgba(0,0,0,0.66)","state":"100"},{"template":"battery","bgColor":"rgba(251,104,12,0.9)","iconColor":"rgb(255,255,255)","state":"16"},{"template":"battery","bgColor":"rgba(255,0,0,0.65)","iconColor":"rgb(255,255,255)","state":"15"},{"template":"battery","bgColor":"rgba(255,0,0,0.65)","iconColor":"rgb(255,255,255)","state":"14"},{"template":"battery","bgColor":"rgba(255,0,0,0.65)","iconColor":"rgb(255,255,255)","state":"13"},{"template":"battery","bgColor":"rgba(255,0,0,0.65)","iconColor":"rgb(255,255,255)","state":"12"},{"template":"battery","bgColor":"rgba(255,0,0,0.65)","iconColor":"rgb(255,255,255)","state":"11"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"10"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"9"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"8"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"7"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"6"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"5"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"4"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"3"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"2"},{"template":"battery","bgColor":"rgba(210,13,13,.9)","iconColor":"rgb(255,255,255)","state":"1"},{"template":"battery","bgColor":"rgba(255,0,0,0.65)","iconColor":"rgb(255,255,255)","state":"0"},{"template":"music-player","bgColor":"rgba(20,20,20,.9)","iconColor":"","customIcon":"","state":"default"}],"colWidth":"","cloudRefresh":5,"hsmPin":"","hide3dot":false,"clockMode":false,"gridGap":15,"tiles":[{"template":"smartly","id":0,"device":"smartly","templateExtra":"{"tiles":{"4":{"id":4,"template":"dashboard","templateExtra":"387","pos":1,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"7":{"id":7,"template":"dashboard","templateExtra":"112","pos":2,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"10":{"id":10,"template":"dashboard","templateExtra":"547","pos":3,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"1":{"id":1,"template":"water","templateExtra":null,"pos":4,"mods":{"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"wet":{"code":null,"class":"he-water"},"dry":{"code":null,"class":"he-water_dry"}}},"0":{"id":0,"template":"switches","templateExtra":null,"pos":5,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"on":{"code":null,"class":"he-switch_2_flipped"},"off":{"code":null,"class":"he-switch_2"}}},"5":{"id":5,"template":"dashboard","templateExtra":"320","pos":6,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"8":{"id":8,"template":"dashboard","templateExtra":"679","pos":7,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"11":{"id":11,"template":"dashboard","templateExtra":"702","pos":8,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"12":{"id":12,"template":"window","templateExtra":null,"pos":9,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"open":{"code":null,"class":"he-window_2"},"closed":{"code":null,"class":"he-window_1"}}},"13":{"id":13,"template":"thermostat","templateExtra":null,"pos":10,"mods":{"zoomable":{"value":null},"label":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}}},"6":{"id":6,"template":"dashboard","templateExtra":"316","pos":11,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"9":{"id":9,"template":"dashboard","templateExtra":"125","pos":12,"mods":{"height_alignment":{"value":null},"buttonize":{"value":null,"modifier":{"icon_only":{"value":null}}},"icon":{"value":null},"zoomable":{"value":null},"label":{"value":null},"color_fg":{"value":null},"color_bg":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"default":{"code":null,"class":""}}},"3":{"id":3,"template":"motion","templateExtra":null,"pos":13,"mods":{"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"active":{"code":null,"class":"he-running"},"inactive":{"code":null,"class":"he-motion-sensor"}}},"2":{"id":2,"template":"dimmer","templateExtra":null,"pos":14,"mods":{"touch_slider":{"value":null,"modifier":{"layout":{"value":null}}},"title":{"value":null},"text_alignment":{"value":null},"remove_title":{"value":null},"nudge":{"value":null},"icon":{"value":null},"zoomable":{"value":null},"border":{"value":null,"modifier":{"border_size":{"value":null}}}},"states":{"off":{"code":null,"class":"he-dimmer_low"},"on":{"code":null,"class":"he-dimmer_medium"}}}},"settings":{"commit":"9621aa326d944b39fea8ea373ba73507a6c7d388","calibration":{"source":"\/var\/www\/html\/smartly\/assets\/data\/device_cals.json","colwidth":"","gridgap":15,"colcount":6},"iconSize":"30","fontSize":"14"},"dashboard":{"mods":{"cal_devices":["apple_ipad-mini-4","apple_ipad-pro","apple_iphonex"],"cal_devices_2col":null,"header":{"value":"default"},"hide_scrollbars":{"value":null},"parallax":{"value":true},"chroma_battery":{"value":null},"chroma_temperature":{"value":"chroma_temperature"},"chroma_humidity":{"value":"chroma_humidity"}}}}"},{"rowSpan":1,"template":"dashboard","col":1,"colSpan":2,"id":4,"row":1,"device":"0","templateExtra":"387"},{"rowSpan":1,"template":"dashboard","col":1,"colSpan":2,"id":7,"row":3,"device":"0","templateExtra":"112"},{"rowSpan":1,"template":"dashboard","col":1,"colSpan":2,"id":10,"row":5,"device":"0","templateExtra":"547"},{"rowSpan":2,"template":"water","col":1,"colSpan":2,"id":1,"row":7,"device":"328","templateExtra":null},{"rowSpan":2,"template":"switches","col":1,"colSpan":2,"id":0,"row":11,"device":"56","customIcon":"he-washing_machine_2"},{"rowSpan":1,"template":"dashboard","col":3,"colSpan":2,"id":5,"row":1,"device":"0","templateExtra":"320"},{"rowSpan":1,"template":"dashboard","col":3,"colSpan":2,"id":8,"row":3,"device":"0","templateExtra":"679"},{"rowSpan":1,"template":"dashboard","col":3,"colSpan":2,"id":11,"row":5,"device":"0","templateExtra":"702"},{"rowSpan":2,"template":"window","col":3,"colSpan":2,"id":12,"row":7,"device":"2402"},{"rowSpan":2,"template":"thermostat","col":3,"colSpan":2,"id":13,"row":11,"device":"2467"},{"rowSpan":1,"template":"dashboard","col":5,"colSpan":2,"id":6,"row":1,"device":"0","templateExtra":"316"},{"rowSpan":1,"template":"dashboard","col":5,"colSpan":2,"id":9,"row":3,"device":"0","templateExtra":"125"},{"rowSpan":2,"template":"motion","col":5,"colSpan":2,"id":3,"row":7,"device":"269","templateExtra":null},{"rowSpan":2,"template":"dimmer","col":5,"colSpan":2,"id":2,"row":11,"device":"85","templateExtra":null,"customIcon":"he-sink_2"}],"goBack":true,"modePin":"","bgColor":"white","lanRefresh":2,"iconSize":"30","cols":6,"rowHeight":60,"hideEvents":false,"tempScale":"C","noColors":false,"readOnly":null,"rows":12,"hideIconText":false,"name":"Downstairs Bathroom","fontSize":"14","background":"https://hubitat.ezeek.us/smartly-skins/studio/assets/images/bg_studio.jpg","customCSS":"/* ------- DO NOT EDIT - Smartly Base CSS ------- /\r\n\r\n/ https://api.github.com/repos/ezeek/smartly-base/git/commits/9fffaf1db0bc8106b575c1ce65b5547ce9cbe1b8 /\r\n\r\n@font-face {\n font-family: 'Barlow Condensed';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: local('Barlow Condensed Regular'),local('BarlowCondensed-Regular'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2g.woff2) format('woff2');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD\n}\n\n@font-face {\n font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:local('Barlow Condensed Medium'),local('BarlowCondensed-Medium'),url(https://fonts.gstatic.com/s/barlowcondensed/v4/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD\n}\n\n#app,body {\n font-family: 'Barlow Condensed',sans-serif\n}\n\n@font-face {\n font-family:"Material Design Icons";src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.eot?#iefix&v=4.9.95) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/fonts/materialdesignicons-webfont.ttf) format("truetype");font-weight:400;font-style:normal;unicode-range:U+F000-FFFFF\n}\n\n@font-face {\n font-family:'Material Design Icons';src:url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.08) format('woff'),url(https://hubitat.ezeek.us/smartly-base/assets/fonts/mtd-public.woff?v=1.065) format('truetype');font-weight:400;font-style:normal;unicode-range:U+E900-EFFF,U+0000-008E\n}\n\n.he-bulb_off:before,.he-bulb_on:before,.he-dimmer_low:before,.he-dimmer_medium:before,.he-door_closed:before,.he-door_open:before,.he-fire1:before,.he-fire_alarm_clear:before,.he-garage_closed:before,.he-garage_closing:before,.he-garage_open:before,.he-garage_opening:before,.he-hour-glass:before,.he-motion-sensor:before,.he-motion_detector_3:before,.he-motion_detector_3_filled:before,.he-not_present:before,.he-outlet_3:before,.he-outlet_off:before,.he-running:before,.he-shades_closed:before,.he-shades_partially_open:before,.he-switch_2:before,.he-switch_2_flipped:before,.he-water_dry:before,.he-water_wet:before,.he-window_1:before,.he-window_2:before,.tile.dashboard .tile-primary::before,.tile.shades .tile-primary i.material-icons{font-family:"Material Design Icons"!important}.he-shades_open:before{content:"\F0149"}.he-shades_closed:before{content:"\F0147"}.tile.shades .tile-primary.closing i.material-icons:before,.tile.shades .tile-primary.opening i.material-icons:before,.tile.shades .tile-primary.partially.open i.material-icons:before{content:"\F0148"}.he-not_present:before{content:"\FA47"}.he-outlet_3:before{content:"\F6A4"}.he-outlet_off:before{content:"\F6A5"}.he-bulb_off,.he-bulb_on,.he-dimmer_low,.he-dimmer_medium{margin-bottom:4px}.he-bulb_off,.he-bulb_on{padding:3px!important}.popup-content .he-bulb_off,.popup-content .he-bulb_on{color:#000!important}.popup-content{margin-left:auto;margin-right:auto}.tile.bulb-color .tile-primary{padding-bottom:0!important;overflow:visible}.he-bulb_on:before{content:"\F6E8";display:block}.he-bulb_off:before{content:"\F336"}.he-fire_alarm_clear:before{content:"\F392"}.he-fire1:before{content:"\F238"}.he-water_wet:before{content:"\F58C"}.he-water_dry:before{content:"\F58D"}.he-garage_closed:before{content:"\F6D8";font-size:120%}.he-garage_open:before{content:"\F6D9";font-size:120%}.he-garage_closing:before,.he-garage_opening:before{font-size:120%;content:"\F871"}.he-hour-glass:before{content:"\F1D8"}.he-running:before{content:"\e94d"}.he-motion-sensor:before{content:"\e94c"}.he-dimmer_low:before,.he-switch_2:before{content:"\FA18"}.he-dimmer_medium:before,.he-switch_2_flipped:before{content:"\F521"}.he-dimmer_low:before,.he-dimmer_medium:before{margin-top:-5px}.he-window_1:before{content:"\F5AE"}.he-window_2:before{content:"\F5B1"}.he-door_open:before{content:"\F81B"}.he-door_closed:before{content:"\F819"}.text-tile{background:0 0!important;color:#000;padding:0 10px;margin:0}.text-tile .justify-center,.text-tile .text-center{text-align:unset;justify-content:unset}.tile.date>div{background-color:#fff}.tile.date .flex{line-height:normal;font-size:100%}.tile.date .border-black{border:0;border-radius:20px}.tile.date .text-25{font-size:80%}.tile.date .day,.tile.date .weekday,.tile.date .year{padding:0}.tile.attribute,.tile.clock,.tile.dashboard,.tile.date-clock,.tile.mode,.tile.music-player{border:2px solid #fff}.tile.date-clock .tile-primary{font-weight:500;color:#fff}.tile.date-clock .tile-primary div{font-size:80%!important;font-weight:400;padding-left:10px}.tile.date-clock .tile-contents{margin-top:0;height:calc(100%)!important}.tile.date-clock small{margin-left:3px}.tile.dashboard{overflow:visible;background-color:rgba(255,255,255,.5);height:50%;margin-top:auto;margin-bottom:auto}.tile.dashboard .tile-title{display:none}.tile.dashboard .tile-primary{color:#000;align-self:center;padding:0;margin:0;display:inline-block}.tile.dashboard .tile-contents{margin-top:0;display:flex;justify-content:center;vertical-align:middle;height:100%}.tile.thermostat>.absolute.bottom-0{top:2em;left:1em;text-align:center;width:calc(100% - 2em);font-weight:500;line-height:1em;height:1em}.tile.thermostat .w-full.my-1{position:absolute;bottom:0}.tile.thermostat .heating.pt-1{padding-bottom:21px}.tile.thermostat .cooling .inline-block,.tile.thermostat .heating .inline-block{font-size:25px;vertical-align:super}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:5px}.tile.link{border:2px solid #fff}.tile.link .tile-title{display:none}.tile.link .tile-contents{height:calc(100%);padding:0;margin:0}.tile.link .tile-primary{padding:0;margin:0}.tile.link .tile-primary div{margin-top:0}.tile.link .tile-primary div:hover{margin-top:-4px}.tile.dimmer .tile-primary .dimmer{margin-bottom:7px;margin-top:3px}.tile.shades .dimmer{margin-top:6px}.tile.image .inset-auto img{object-fit:cover}.tile.energy{border:2px solid rgba(236,255,34)}.tile.hsm{overflow:hidden}.tile.hsm .popup-content .top-0.right-0.absolute{padding:.5em 1em;margin:0;width:auto!important}.vue-slider{padding:0 0 5px!important}.tile{text-shadow:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin-left:1px}.dashName{font-size:25px;text-shadow:none;margin-left:10px}.tile-secondary{display:none}.tile-title{position:relative;left:auto;right:auto;padding:7px 6px 1px;font-weight:500;line-height:1.2em;letter-spacing:1px;opacity:.8;overflow:unset}.tile-title::after{white-space:pre-wrap}.dashBack{text-shadow:none;padding-left:5px}.he-logo-mark:before{font-size:40px}.tile-tertiary{padding:5px;position:absolute;left:8px;bottom:auto;font-size:85%;top:auto;right:auto;opacity:.8}.tile-contents{height:calc(80%);width:calc(100%);padding:0 4px}.text-green-600{color:rgba(0,255,105,.75);text-shadow:none}.dashboard div .header{padding:10px 10px 10px 15px}.wrapper{margin-left:0;margin-bottom:0;padding-left:15px;width:calc(100%);overflow:auto}.tile-edit{top:auto;bottom:10px;opacity:.3}.tile-primary{padding-bottom:calc(10%);overflow:visible}smartly{grid-column-end:-1;grid-row-end:-1;display:inline-block;height:calc(100% + 25px);z-index:-1;width:calc(100% + 15px)}@media (min-width:768px) and (max-width:1000px){.md\:w-2\/3{width:80%}}.navHeader{height:3em}.navHeader div.navLink.float-right:first-child,.navHeader div.navLink:last-child{background-color:red;font-weight:700;padding:0 1em}.navHeader div.navLink.float-right,.navHeader>.flex>div{text-transform:uppercase;font-size:1.3em;margin:0 4px;height:auto;text-align:center;padding:0 .5em;background-color:#323232;border-radius:20px;display:inline-table}.navHeader>.flex>div.pl-2{display:none}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer{border:1px solid gray;margin:.5em 0 0 .5em;padding:1em;border-radius:6px;line-height:.5em}#app>.popup-container .exportBox{margin-top:1em}.md\:w-1\/2 .md\:w-1\/2{width:50%}.deviceSelect .devices .search input,.selectTemplate .templates .search input{padding:5px;border-radius:8px;margin-left:5px;width:100%}.deviceSelect .devices .search,.selectTemplate .templates .search{padding:1em;font-size:160%}.devices .deviceList,.templates .templates{font-size:1.5em}[type=checkbox],[type=radio]{height:1em;width:1em;margin:.25em 0}h4{font-size:1.2em;margin:.5em 0;opacity:.8;font-weight:500}h3{margin-bottom:auto}.text-lg,h3,label span{font-size:1.5em;display:inline-block}.text-lg,h3{color:#000;overflow:visible;margin-left:.5em;border-bottom:1px solid rgba(0,0,0,.5);width:auto;margin-top:auto}label span{margin-top:-1px;padding-top:.25em;vertical-align:top;margin-bottom:.5em}button,input,select,textarea{font-size:180%}h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif}.popup-content .top-0.right-0.absolute{background-color:red;color:#fff;font-weight:700}@media (max-width:767px){#app .popup-container .menu{width:98%}.md\:w-2\/3{width:96%}#app>.popup-container .menu .overflow-auto .flex .cursor-pointer,.navHeader div.navLink.float-right,.navHeader i.material-icons,.navHeader>.flex>div{font-size:1em}.navHeader{height:2.5em}}.tile-primary>div{margin-top:4px}.text-lg{margin-bottom:.5em}.tile.date-clock .tile-title{padding:0;margin:0;height:2px}@media (max-width:767px){.popup-content.h-85p{height:auto}}.tile.thermostat i{display:inline-block}.tile.dashboard .tile-edit{bottom:auto;top:1px}@media screen and (max-width:1284px) and (min-width:1280px){.tile.dashboard{zoom:unset}}@media screen and (max-width:1924px) and (min-width:1920px){.tile.dashboard{zoom:unset}}.tile.date>div.h-full.w-full{font-size:1.5em!important}.tile.date div.weekday,.tile.date div.year{font-size:140%!important;line-height:.75em}.tile.date div.day{font-size:250%!important;font-weight:700}.mt-12{margin-top:5em}.mt-16{margin-top:7em}[class=" battery-"]>i.material-icons::before{font-family:"Material Design Icons"}.battery-100>i.material-icons::before,.battery-99>i.material-icons::before{content:"\F079"}.battery-91>i.material-icons::before,.battery-92>i.material-icons::before,.battery-93>i.material-icons::before,.battery-94>i.material-icons::before,.battery-95>i.material-icons::before,.battery-96>i.material-icons::before,.battery-97>i.material-icons::before,.battery-98>i.material-icons::before{content:"\F082"}.battery-81>i.material-icons::before,.battery-82>i.material-icons::before,.battery-83>i.material-icons::before,.battery-84>i.material-icons::before,.battery-85>i.material-icons::before,.battery-86>i.material-icons::before,.battery-87>i.material-icons::before,.battery-88>i.material-icons::before,.battery-89>i.material-icons::before,.battery-90>i.material-icons::before{content:"\F081"}.battery-71>i.material-icons::before,.battery-72>i.material-icons::before,.battery-73>i.material-icons::before,.battery-74>i.material-icons::before,.battery-75>i.material-icons::before,.battery-76>i.material-icons::before,.battery-77>i.material-icons::before,.battery-78>i.material-icons::before,.battery-79>i.material-icons::before,.battery-80>i.material-icons::before{content:"\F080"}.battery-61>i.material-icons::before,.battery-62>i.material-icons::before,.battery-63>i.material-icons::before,.battery-64>i.material-icons::before,.battery-65>i.material-icons::before,.battery-66>i.material-icons::before,.battery-67>i.material-icons::before,.battery-68>i.material-icons::before,.battery-69>i.material-icons::before,.battery-70>i.material-icons::before{content:"\F07F"}.battery-51>i.material-icons::before,.battery-52>i.material-icons::before,.battery-53>i.material-icons::before,.battery-54>i.material-icons::before,.battery-55>i.material-icons::before,.battery-56>i.material-icons::before,.battery-57>i.material-icons::before,.battery-58>i.material-icons::before,.battery-59>i.material-icons::before,.battery-60>i.material-icons::before{content:"\F07E"}.battery-41>i.material-icons::before,.battery-42>i.material-icons::before,.battery-43>i.material-icons::before,.battery-44>i.material-icons::before,.battery-45>i.material-icons::before,.battery-46>i.material-icons::before,.battery-47>i.material-icons::before,.battery-48>i.material-icons::before,.battery-49>i.material-icons::before,.battery-50>i.material-icons::before{content:"\F07D"}.battery-31>i.material-icons::before,.battery-32>i.material-icons::before,.battery-33>i.material-icons::before,.battery-34>i.material-icons::before,.battery-35>i.material-icons::before,.battery-36>i.material-icons::before,.battery-37>i.material-icons::before,.battery-38>i.material-icons::before,.battery-39>i.material-icons::before,.battery-40>i.material-icons::before{content:"\F07C"}.battery-21>i.material-icons::before,.battery-22>i.material-icons::before,.battery-23>i.material-icons::before,.battery-24>i.material-icons::before,.battery-25>i.material-icons::before,.battery-26>i.material-icons::before,.battery-27>i.material-icons::before,.battery-28>i.material-icons::before,.battery-29>i.material-icons::before,.battery-30>i.material-icons::before{content:"\F07B"}.battery-11>i.material-icons::before,.battery-12>i.material-icons::before,.battery-13>i.material-icons::before,.battery-14>i.material-icons::before,.battery-15>i.material-icons::before,.battery-16>i.material-icons::before,.battery-17>i.material-icons::before,.battery-18>i.material-icons::before,.battery-19>i.material-icons::before,.battery-20>i.material-icons::before{content:"\F07A"}.tile.battery .tile-primary{grid-template-columns:repeat(2,50%);display:grid;height:calc(100%);align-items:center;grid-template-rows:100%}.tile.battery .tile-primary>i.material-icons{text-align:right}.tile.battery .tile-primary>div{text-align:left}.tile.battery{background-color:rgba(0,255,105,.75);color:rgba(0,0,0,.66)}.tile.battery .tile-primary,.tile.humidity .tile-primary,.tile.temperature .tile-primary,.tile.illuminance .tile-primary,.tile.energy .tile-primary,.tile.power .tile-primary,.tile.attribute .tile-primary{width:100%;margin-top:-3px;padding-left:5px;line-height:1em}.tile.humidity .tile-contents .tile-edit{bottom:20px}.tile.battery .tile-contents{display:block}.dashboard>div>.header,.tile.text-tile{color:#fff}#app>.dashboard{-moz-transform-origin:0 0}html[style*="background-color: darkgray;"] .tile.text-tile,html[style*="background-color: gold;"] .tile.text-tile,html[style*="background-color: ivory;"] .tile.text-tile,html[style*="background-color: lightcyan;"] .tile.text-tile,html[style*="background-color: lightgray;"] .tile.text-tile,html[style*="background-color: silver;"] .tile.text-tile,html[style*="background-color: skyblue;"] .tile.text-tile,html[style*="background-color: tan;"] .tile.text-tile,html[style*="background-color: white;"] .tile.text-tile,html[style*="background-color: whitesmoke;"] .tile.text-tile,html[style*="background-color: darkgray;"] #grid-header,html[style*="background-color: gold;"] #grid-header,html[style*="background-color: ivory;"] #grid-header,html[style*="background-color: lightcyan;"] #grid-header,html[style*="background-color: lightgray;"] #grid-header,html[style*="background-color: silver;"] #grid-header,html[style*="background-color: skyblue;"] #grid-header,html[style*="background-color: tan;"] #grid-header,html[style*="background-color: white;"] #grid-header,html[style*="background-color: whitesmoke;"] #grid-header,html[style*="background-color: darkgray;"] .dashboard>div>.header,html[style*="background-color: gold;"] .dashboard>div>.header,html[style*="background-color: ivory;"] .dashboard>div>.header,html[style*="background-color: lightcyan;"] .dashboard>div>.header,html[style*="background-color: lightgray;"] .dashboard>div>.header,html[style*="background-color: silver;"] .dashboard>div>.header,html[style*="background-color: skyblue;"] .dashboard>div>.header,html[style*="background-color: tan;"] .dashboard>div>.header,html[style*="background-color: white;"] .dashboard>div>.header,html[style*="background-color: whitesmoke;"] .dashboard>div>.header{color:#000}.showSidePanelBtn{text-shadow:none}@media{body,html,.dashboard{-webkit-text-size-adjust:auto}.tile-title{font-size:95%!important}.tile-primary{overflow:visible!important}.tile.bulb-color .tile-primary>div{margin:0}.tile.dashboard .tile-edit{bottom:auto;top:0}.inset-auto:after{font-size:1.3em!important}.tile.dashboard{margin-top:calc(12%);margin-bottom:calc(12%)}}.tile.water .tile-secondary,.tile.motion .tile-secondary,.tile.mmulti .tile-secondary{display:block;opacity:.8;font-size:85%;padding:5px;position:absolute;right:1.25em;width:unset}.tile.bulb-color .tile-primary>div{margin-top:-3px}.tile.bulb .tile-primary>div{margin-top:0}.tile.thermostat{display:grid;grid-template-rows:1.8em auto}.tile.thermostat>.absolute.bottom-0{grid-row:1;position:relative;padding-top:.5em;top:unset;height:2em}.tile.thermostat>.flex.items-stretch{grid-row:2;display:grid;grid-template-rows:3.4em auto;grid-template-columns:calc(100%);height:auto}.tile.thermostat>.flex.items-stretch .cooling.w-full{grid-row:1}.tile.thermostat>.flex.items-stretch>.flex{display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;width:100%;grid-row:2;flex-flow:wrap-reverse}.tile.thermostat>.flex>.flex>.heating.pt-1,.tile.thermostat>.flex>.flex>.cooling.w-full{min-width:10em;min-height:10em;margin:0;border-radius:1em;-webkit-flex-grow:1;flex-grow:1;width:50%;margin:0;padding:0}.tile.thermostat>.flex>.flex>.heating.pt-1>.inline-block,.tile.thermostat>.flex>.flex>.cooling.w-full>.inline-block{display:inline-flex}.tile.thermostat .w-full.my-1{width:100%}.tile.thermostat .tile-edit{top:.75em}.tile.thermostat .w-full.my-1>div{width:3px!important}.tile.thermostat .w-full.my-1>div.inline-block{width:unset!important;padding:2px 2px 5px;min-width:32%}.tile.thermostat .cooling .inline-block br,.tile.thermostat .heating .inline-block br{content:" ";padding:2px}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(1){border-radius:.5em 0 0 .5em}.tile.thermostat .w-full.my-1>div.inline-block:nth-child(3){border-radius:0 .5em .5em 0}.tile.thermostat .w-full.my-1{position:relative;bottom:unset;margin:0;margin-bottom:.5em}.tile.thermostat .p-1{padding:0}.tile.image{position:relative}html[style*="background-color: darkgray;"] #loading-overlay,html[style*="background-color: gold;"] #loading-overlay,html[style*="background-color: ivory;"] #loading-overlay,html[style*="background-color: lightcyan;"] #loading-overlay,html[style*="background-color: lightgray;"] #loading-overlay,html[style*="background-color: silver;"] #loading-overlay,html[style*="background-color: skyblue;"] #loading-overlay,html[style*="background-color: tan;"] #loading-overlay,html[style*="background-color: white;"] #loading-overlay,html[style*="background-color: whitesmoke;"] #loading-overlay{background-color:rgba(255,255,255,.9);color:#000;z-index:99999;position:fixed}\r\n\r\n/* ------- DO NOT EDIT - Custom Skin CSS ------- /\r\n\r\n/ studio: https://api.github.com/repos/ezeek/smartly-skins/git/commits/b99d5307229b9ec436e4df019064e376a7bb4775 /\r\n\r\n/ ------- DO NOT EDIT - Smartly Generated CSS below ------- /\r\n\r\n@media screen and (orientation: portrait) and (max-width:769px) and (min-width:767px){.dashboard{zoom:3.938; -moz-transform:scale(3.938);}}@media screen and (orientation: landscape) and (max-width:1025px) and (min-width:1023px){.dashboard{zoom:5.251; -moz-transform:scale(5.251);}}@media screen and (orientation: portrait) and (max-width:1025px) and (min-width:1023px){.dashboard{zoom:5.251; -moz-transform:scale(5.251);}}@media screen and (orientation: landscape) and (max-width:1367px) and (min-width:1365px){.dashboard{zoom:7.005; -moz-transform:scale(7.005);}}@media screen and (orientation: portrait) and (max-width:376px) and (min-width:374px){.dashboard{zoom:6.25; -moz-transform:scale(6.25);}}@media screen and (orientation: landscape) and (max-width:725px) and (min-width:723px){.dashboard{zoom:3.713; -moz-transform:scale(3.713);}}\r\n\r\n/ ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */\r\n\r\n\r\n\r\n"}

1 Like