Mobile/Tablet Dashboard module

For a while now I have been pondering writing a module to create ‘responsive’ dashboards, ie dashboards that work on both desktop and mobile tablet devices, scaling and rearranging elements as needed to display nicely no matter what form factor device you connect from.

I was really pleased to see the thread on Node-red ui for emoncms dashboards That initially looked excelant, and the examples in the thread are just fine, but Node-RED shows its weaknesses when trying to show dashbaords with widgets of different widths, eg;

When you reduce the width of the screen the widgets do not change width or location;

as opposed to what I would expect, eg something like;


see https://bigjungle.squarespace.com/dashboard.

So essentially I am back to my original plan of updating EmonCMS to support responsive dashboards.

What I was thinking was maybe the dashboards could have a mode where the positions/sizes are defined in terms of columns as you do with Bootstrap. How difficult would this be? What are the blockers/challenges? Is it best to do a new module or have a switch in the current dashboard module? Would this be useful to others? Obviously this would also need to be completely backward compatible in terms of editing, there are going to be folks that want the exact control the current editor offers.

As a tie in it would be really cool if the apps could also use these dashboards either natively rendering them (ie the a JSON definition of the dashboard is sent to the app and the app natively renders all the widgets) or just the dashboard can be an embedded webpage.

Any feedback is appreciated.

2 Likes

This was the concept behind the Emoncms ‘app’ modules e.g My Electric and My Solar (not to be confused with the mobile Android / ios apps!) These are application specific responsive dashboards. The my electric display changes depending on the screen size and orientation.

It would be difficult to add responsiveness to DIY dashboards, but maybe not impossible! Maybe two of three columns could be defined into which dashboard elements are created that then collapse down into a single column when viewed on small screen devices. Is this the sort of thing your thinking? Keen to hear your thoughts. Good mobile device support is increasingly important, I think I access emoncms to check up on things more often then not from a mobile device then a desktop browser these days.

Essentially, yes that is what I was thinking, probably with the 12 columns
that Bootstrap uses, some dashboard widgets can be quite small (eg, LED),
so no need reinvent the wheel.

I wonder if this is something that could be added to the existing dashboard editor module?

It would be very nice. maybe a option to begin creating a new dashboard using a template of columns.

I’d thought along the same lines a while back when I was first investigating dashboards.

It might be retro-fittable (is that a word?!) to the existing dashboard designer. Maybe we could have special container widgets which can be made to be a certain width in bootstrap columns.

However the way the dashboards work currently is all based around positioning divs absolutely. So it could be relatively tricky.

@jeremypoulter - do you have some thoughts on how it could be implemented? I’d happily bounce some ideas around if that helps?

1 Like

My current thinking was to fork the current dashboard module under a
different name make the changes then see what the scope of the changes is
and go from there, but was hoping to get a bit more of an idea of what I am
letting my self in for from the folks that have been working on the
dashboard :wink:

1 Like

From a UI POV I would like to get something close to how the Squarespace page editor works. Like Bootstrap that works on a 12 column layout. Essentially when you add a widget it occupies the full 12 columns, but you can drag and drop a widget to the left/right of it and the adjust the number of cols each takes up.

I have not really looked in to how to actually implement it from a technical POV, this was essentially the first step down that route.

1 Like