Share Your 2.0 Dashboards

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!

8 Likes

7 Likes

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

1 Like

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.

3 Likes

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

1 Like

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

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

7 Likes

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

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

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

6 Likes

@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?

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

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

1 Like

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.

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

Use the image option.

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

Thanks for the info!

1 Like

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.

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.

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.