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