Web Dashboard 2.0

Wiki Projects & Stories
1

Continuing the discussion from Web Dashboard:

I was working on the new and improved version of the web dashboard and I’m happy to share the new interface and functionality.

I really wanted to create a control panel that would be self contained without relying on any third party cervices. This allows you to spin as many remotes as you want with zero configuration or maintenance. You can create wall mounted panels, give links to your guests or have a control panel without installing ST Mobile app on your device.

Installing the SmartApp will give you the interface like this:

dashboard.png800×485 21.7 KB

Features

  • Modern interface optimized for mobile devices. The tile grid will adapt itself to the screen size from phone to full size monitors.
  • View/change mode
  • Interact with dimmers, switches and locks
  • View temperature
  • View state of presence and contact sensors
  • Clock
  • Themes (Color, Grey, B/W)
  • Optimized polling (Long Polling and configurable page refresh rate)
  • View Only mode

Limitations

  • Lag, as usual. If you tap the same tile too quickly things will get confused. Click Refresh tile to reload the page
  • Polling. There is no way to get around that without employing another streaming service. If someone found a different way, please share. The panel will refresh itself every so often (2 minutes by default), so there is no instant updates. I’m working on it though. Stay tuned.

Future Plans

  • Instant updates
  • Thermostats and motion sensors. I don’t have any right now, so no ETA.
  • Weather widget

Installing the Dashboard

  • Open the logs first
  • Install app as usual
  • Don’t forget to enable Oath in the SmartApp setup!
  • Check the logs to see your URL or tap app icon in Mobile App to print the URL to the logs again.

Here is the SmartApp:
https://github.com/625alex/SmartThings/blob/master/apps/WebDashboard2.groovy

Let me know what you think.
Please report bugs!

13 Likes
2

Getting an error when I try to go to the webpage.
{“error”:true,“type”:“java.lang.NullPointerException”,“message”:“An unexpected error occurred.”}

And this error in the log
error java.lang.NullPointerException: Cannot invoke method sort() on null object @ line 214

3

I figured out why I am getting the error. I dont have any locks and the smart app doesn’t like that. I created a test lock in the ide and now the dashboard works. Then I deleted the lock and the error came back.

4

Great job! Is there a way to create a tabbed interface? I’m thinking about grouping tiles into pages based on device type or location. Also, would love to have a dashboard interface for Smart Alarm and Radio Thermostat.

5

I received the same error. I have no locks either

6

Interesting, did the update, Had the same error message pointing to the lock handler. However, I have a Schlage lock that is installed and working with ST. So would not make sense to add a virtual lock here.

BTW, I second the tabbed interface. However, I think that should be possible with just running multi apps with a different configuration for each page.

Of course with the current error, this might pose a problem with those of us without locks (SMILE)

Update:: Figured out my issue. I had failed to uninstall and recreate my environment with the new applicaiton

7

@625alex,

Very nice! I had it running within a couple of minutes. Tested on MS Surface and iPad Mini and it looks and works good on both.

When the wife gets up I’ll see what kind of WAF it receives.

I agree with the earlier post, Thermostat would be great to have on the interface.

Again, great job!
@wackware

8

I just wanted to say that your hard work in doing this is Awesome!, This is one of the great things that I love about ST and the community. Now, only if ST can make it easier for all of us, but allowing an easy way to share, and update any programs that are in use.

Was wondering, if you could also add energy meters to the list, I have an AEON switch, and AEON HEM (Home Energy Meter) that would be nice to have included in the read outs.

9

I really like how easy it is to switch modes. Cool! :metal:

10

@4caulders

This workaround didn’t work for me. Is there anything else about how you created your test lock?

11

Currently, it looks like you need something selected for every type of device. It should be an easy fix for @625alex now that he knows. If you want to try it yourself, you can follow the steps below:

  1. Change the data() function to use ?.sort{} instead of .sort{} to check for no item to exist:

    def data() {
    [
    locks: locks?.collect{[type: “lock”, id: it.id, name: it.displayName, status: it.currentValue(‘lock’) == “locked” ? “locked” : “unlocked”]}?.sort{it.name},
    switches: switches?.collect{[type: “switch”, id: it.id, name: it.displayName, status: it.currentValue(‘switch’)]}?.sort{it.name},
    dimmers: dimmers?.collect{[type: “dimmer”, id: it.id, name: it.displayName, status: it.currentValue(‘switch’), level: it.currentValue(‘level’)]}?.sort{it.name},
    contacts: contacts?.collect{[type: “contact”, id: it.id, name: it.displayName, status: it.currentValue(‘contact’)]}?.sort{it.name},
    presence: presence?.collect{[type: “presence”, id: it.id, name: it.displayName, status: it.currentValue(‘presence’)]}?.sort{it.name},
    temperature: temperature?.collect{[type: “temperature”, id: it.id, name: it.displayName, status: it.currentValue(‘temperature’)]}?.sort{it.name},
    ]
    }

  2. In this function at the end of the file, add the line below:

    def renderDevice(device) {
    if (device == null) return “” // NEW LINE
    if (device.type == “dimmer”) return renderDimmer(device)

12

I updated the github code. This is applicable to other device types too.

1 Like
13

Thanks. This worked.

14

@625alex

This is insane… great job. I am seeing just a little bit of an html issue with the top row. Also would be nice to see floating point number truncated (or better yet rounded) to tenths.

http://solutionsetcetera.com/stuff/dash.png

15

@625alex Awesome job! BTW the html issue @scottinpollock is referring to is due the the javascript returning a null value when you have no locks.

16

@625alex Great job, wonderful app just keeps getting better, Thanks again.

17

Just checking int o see if you plan on submitting this in through for official publication to everyone? It is amazing.

18

I see the HTML issue too. Looks like it is showing the word “null” for me. Maybe that is where a lock should be?

19

I updated the app so that “null” will not be printed when there’s no locks or other devices.

20

@scottinpollock, your fonts look weird. Are you using Chrome on Mac?

My temperature readings from ST Multi report temperature to the whole number, but I will update the code to round off the decimals.