Thinking about a nice “tile” based dashboard for quite some time now. As with my iPhone app post here I’m afraid I will not have the time to actually create something anytime soon.
What I’m thinking of is basically another plugin like the mobile-frontend but with a different look and limited functionality. It should be either displayed on a big screen or be used as a minimalistic UI for a tablet.
Features:
- Templates for all default pimatic devices
- Rich design with
- big icons
- nice text (webfonts)
- Interactive (react to touch)
- Rich design with
- Grid layout
- Drag/Drop arrangement of widgets
- Screensaver (show images while idle or cycle difernt dashboards)
What it explicitly should not support:
- Editing devices
- Editing rules
- changing pimatic settings
- etc.
basically it would “just” represent the “pages” functionality
I already have some kind of “prototype” up and running with http://dashing.io/ but I’m not happy with it.
For this prototype I added an socket.io client to the dashboard webpage with an login form. As soon as one logs in all events received via socket.io are forwarded to the dashing widgets then. I also added a first widget to handle switching and it works. It should not be a problem to create additional widgets to display/control other functions.
However there are quite some things I dislike about the prototype.
- Dashing is discontinued and so are some components it’s using
- My approach doesn’t use any of the data gathering/publishing mechanisms of dashing running in the “backend” and also the complete server-side events part.
The only positive currently would be that you could mix already available dashing widgets/setups with pimatic data.
I think it should be no problem serving the dashboard from the sam express instance pimatic is already running.
Maybe this could even be some kind of stripped down for of the mobile-mobile frontend using a framework other than jQuery mobile.
With current javascript technology we should only need a webserver which serves static code. the rest would be handled by js frameworks and socket.io communication.
Some links:
http://gridster.net/ jQuery plugin for grid layout
https://manifestwebdesign.github.io/angular-gridster/ grid layout supporting angular.js
https://angularjs.org/ angular framework for easy databindig etc. (maintained by google so hopefully not deprecated to soon)
https://facebook.github.io/react/ react framework for easy databindig etc. (maintained by facebook so hopefully not deprecated to soon)
Inspiration (with some really nice screenshots/photos/ideas):
https://community.smartthings.com/t/home-automation-dashboard/4926/755
I got my first Idea from here but the way the communication is implemented there is very insecure so I have chosen to implement it a bit differently (websockets and circumventing whole dashing backend)
