Share Your 2.0 Dashboards

keithcroshaw · March 20, 2019, 3:59am

I thought it would be nice to make a thread for people to show off their new 2.0 dashboards and maybe even share their themes.

Here's what I ended up with:

I tried to limit color to things that require attention.
Stole my Sharptools.io Dashboard design tbh, but the blue soothes me.

Here's the customColors:

  "customColors": [
    {
      "template": "bulb",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "on",
      "customIcon": ""
    },
    {
      "template": "bulb-color",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "on",
      "customIcon": ""
    },
    {
      "template": "presence",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "present",
      "customIcon": ""
    },
    {
      "template": "contact",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "open",
      "customIcon": ""
    },
    {
      "template": "lock",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "unlocked",
      "customIcon": ""
    },
    {
      "template": "thermostat",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "heating",
      "customIcon": ""
    },
    {
      "template": "mode",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "home",
      "customIcon": ""
    },
    {
      "template": "mode",
      "bgColor": "rgba(30,0,152,1)",
      "iconColor": "",
      "state": "night",
      "customIcon": ""
    },
    {
      "template": "mode",
      "bgColor": "rgba(0,0,0,1)",
      "iconColor": "",
      "state": "away",
      "customIcon": ""
    },
    {
      "template": "contact",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "closed",
      "customIcon": ""
    },
    {
      "template": "lock",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "locked",
      "customIcon": ""
    },
    {
      "template": "presence",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "not present",
      "customIcon": ""
    },
    {
      "template": "hsm",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "disarmed",
      "customIcon": ""
    },
    {
      "template": "weather",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "default",
      "customIcon": ""
    },
    {
      "template": "images",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "rgba(79,79,79,1)",
      "state": "default",
      "customIcon": ""
    },
    {
      "template": "thermostat",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "idle",
      "customIcon": ""
    },
    {
      "template": "bulb-color",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "off",
      "customIcon": ""
    },
    {
      "template": "dashboard",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "default",
      "customIcon": ""
    },
    {
      "template": "dimmer",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "off",
      "customIcon": ""
    },
    {
      "template": "dimmer",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "on",
      "customIcon": ""
    },
    {
      "template": "switches",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "on",
      "customIcon": ""
    },
    {
      "template": "switches",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "off",
      "customIcon": ""
    },
    {
      "template": "shades",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "on",
      "customIcon": ""
    },
    {
      "template": "shades",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "off",
      "customIcon": ""
    },
    {
      "template": "water",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "wet",
      "customIcon": ""
    },
    {
      "template": "water",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "dry",
      "customIcon": ""
    },
    {
      "template": "motion",
      "bgColor": "rgba(93,188,210,1)",
      "iconColor": "",
      "state": "active",
      "customIcon": ""
    },
    {
      "template": "motion",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "inactive",
      "customIcon": ""
    },
    {
      "template": "bulb",
      "bgColor": "rgba(79,79,79,1)",
      "iconColor": "",
      "state": "off",
      "customIcon": ""
    }
  ],

I tried to include as much as possible to tip off people who aren't aware that you can import themes where to put it. HINT, it's under advanced!

thiago · March 20, 2019, 8:23pm

keithcroshaw · March 20, 2019, 8:57pm

I like the enlarged camera tile. I should see what that looks like.

thiago · March 21, 2019, 12:22am

That's a still picture from my Arlo camera. I have a cronjob running every 15 minutes running a python script that gets that image and saves on my NAS.

murzik · March 21, 2019, 1:00am

@thiago
How did you make that weather tile? Looks great.

jcharr42 · March 21, 2019, 5:10pm

Yeah, I'd love to use that weather tile, too.

mboarman · March 21, 2019, 6:17pm

@murzik @jcharr42

Just visit: Free Weather Widget for your Website or Blog - theweather.com and create your own widget, it will give you the html code to paste into the dashboard and create the tile with the look you want. Pretty simple stuff. Good Luck.

matt.thaxton · March 21, 2019, 6:33pm

@ keithcroshaw
Is that a camera tile you have set up in the top left?

spalexander68 · March 21, 2019, 7:00pm

I got the html code, where do you paste into the dashboard at? And did you script or image?

jcharr42 · March 21, 2019, 7:36pm

Just switched over from SmartThings and ActionTiles 2 days ago. Here's my main dashboard so far, now featuring a lovely weather forecast tile courtesy of @mboarman pointing us to the widget generator. Not quite sure why the leak sensor is saying that it's -558 in the bathroom though...

spalexander68 · March 21, 2019, 7:48pm

@jcharr42, what are the devices shown in the row directly above the more than freezing bathroom sensor? Are those motion detectors?

Also, I guess I am an idiot, but I created the html code for the weather widget, but for the life of me cannot figure out how to get it into my dashboard. Can you help a guy out?

keithcroshaw · March 21, 2019, 7:58pm

It's an image tile actually. Nest spits them out of you configure it a certain way.

keithcroshaw · March 21, 2019, 7:58pm

Transparency!? Didn't know that was an option.

zarthan · March 21, 2019, 8:16pm

Is there a way to contain the dashboards within a dashboard. I have a Home dashboard and have several dashboards within that. Each of the dashboards has a link tile back to the Home dashboard. It is too easy to get back to the main list of all the dashboards. I would like to have groups of dashboards for specific purposes and it would be nice to have a way to make sure no one could go beyond the "home" dashboard for each group.

Edit: Found it under Options in the Dashboard gear icon menu.

jcharr42 · March 21, 2019, 8:26pm

@spalexander68 Yeah, those are motion sensors. The first 3 are physical. The back yard is a virtual one that's activated by our camera there by SecuritySpy. The front yard is another virtual sensor that's activated by a (somewhat flakey) physical sensor outside, a camera in SecuritySpy, and our Ring Doorbell 2 through Alexa and a virtual switch.

For the weather image, generate an image on the widget site. Then copy just the link to the image (https://www.theweather.com/wimages/[bunch of characters here].png). Then in your dashboard, create a new image tile and set your refresh. If you set it as the background image instead of the main image, it'll try to stretch to fill the entire tile.

@keithcroshaw They've all been transparent by default for me. I didn't change anything for that, but it does looks you can set the opacity in the templates for both color and background color.

mboarman · March 21, 2019, 8:28pm

Use the image option.

spalexander68 · March 21, 2019, 8:29pm

Aww, I see. I was doing code and completely missed the image option. Duh.

Thanks for the info!

matt.thaxton · March 21, 2019, 8:51pm

How often can it update? I am wanting a doorbell that will allow me to see it on my mounted tablet by the front door and haven't looked too far into it so far.

matt.thaxton · March 21, 2019, 8:52pm

Do you mind telling what sites you use for your radars? I wasn't able to find one and get it working for my dashboard.

mboarman · March 21, 2019, 8:55pm

I typically steal one from my local news website. Most use an image that retains the same name and just gets updated. So once you build the tile with the image link it automatically updates when the local news site does. Typically every 5-10 minutes.