Dashboard Improvements

Paul · 2016-09-05T22:06:39.793Z

Git now also updated with both features.
If you appreciate Matt’s contribution - give him a Like

Paul

nchaveiro · 2016-09-06T20:00:10.197Z

Hi mattjgalloway, nice you are making this contributions.

I’ve the idea to make dashboard module more user friendly and give better support for big and small screens out of the box.
The idea is to pre-define components size like in windows phone, user can resize a component but only in specific size steps and they snap to a template grid.

Is this interesting for anyone else, can you help developing it?

I remember some platforms that make use of similar concept:

kibana, grafana, azure dashboards, atlassian jira dashboards

Paul · 2016-09-06T20:59:07.327Z

Just merged another sought after dashboard feature which was mentioned above by @pb66 - allowing dashboard item layers to be re-arranged, pulled forward or pushed back.
Also a fix to the dashboard to prevent items from being moved off-screen making them difficult to retrieve.

To update, git pull the latest dashboard, clear your browser cache and update your database.
Emonpi users - simply run ‘update’.

Paul

mattjgalloway · 2016-09-06T21:00:01.572Z

nchaveiro:

The idea is to pre-define components size like in windows phone, user can resize a component but only in specific size steps and they snap to a template grid.

Is this interesting for anyone else, can you help developing it?

Interesting idea. It could certainly make things a lot more plug and play. While I’ve been hacking on this, I did wonder if we should be using something like Bootstrap to give a grid layout system which has the benefit of being responsive. And that would fit with this idea of providing certain sizes.

WDYT to the grid layout system?

pb66 · 2016-09-06T21:30:25.314Z

Thanks again Matt

I look forward to trying these out, hopefully I’ll get a chance tomorrow.

mattjgalloway · 2016-09-06T21:32:25.073Z

pb66:

Thanks again Matt

No problem! Quite enjoyable hacking on this stuff!

Another one I’ve been working on but not happy with just yet is selecting multiple items by holding down shift. But it’s not quite as good as I’d like yet.

Paul · 2016-09-08T11:39:17.678Z

Dashboard now updated with key bindings so that dashboard objects can be deleted by using the keyboard delete key.
Thanks @mattjgalloway

Paul

Paul · 2016-09-08T16:42:40.117Z

Also from @mattjgalloway - just merged the ability to add a label to a dashboard widget/feedvalue, either leading or trailing, such as;

TempC = 26 or 26 degC

Paul

Paul · 2016-10-10T21:19:09.143Z

pb66:

Is it or could it be possible to select multiple things for moving around?

Just added to master branch Paul

Dashboard - moving several elements together - NEW FEATURE Emoncms

A really cool feature added to the git master branch this evening, courtesy of @mattjgalloway. The ability to be able to select and move several elements at the same time. For example; [image] At the present time multiple elements can only be moved by using the direction arrows, and not by mouse, but hopefully in time this will be further developed. Matt would appreciate some user feedback on this feature pls, do you find it useful? Paul

Paul

pb66 · 2016-10-15T11:19:30.403Z

Excellent work @mattjgalloway, thank you again for your continued work on the dashboards.

nchaveiro · 2016-10-15T17:38:49.199Z

Nice work.
About that pre-defined widgets size idea, i just remember that we could let user choose a grid system for the dashboard and then allow him to place each widget inside each div of the grid.
See bootstrap grid system that we already have available on emoncms: Redirecting…

The grid system already adjusts to screen size and wraps the cells to next line if screen is small.

Some examples with html code:

fist let the user create a grid system:

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

then let the user put widgets inside each grid div cell

<div class="row">
  <div class="col-md-8"><!--<iframe...widget 1...auto scale to cell content>--></div>
  <div class="col-md-4"><!--<iframe...widget 2...auto scale to cell content>--></div>
</div>

pb66 · 2016-10-17T12:22:20.891Z

@mattjgalloway - whilst trying the multi-select and the new palette I noticed how great it was to be able to deselect an item by clicking it a second time when using multi-select, It’s always been a minor niggle that you need to find a bit of clear screen to click in order to deselect without selecting another item, now we have a second option by holding a shift key and clicking the item again to “let go of it” so there is already an improvement, but I was wondering if you would know what was needed to make deselect-single-item-by-clicking-it-a-second-time work without holding a shift key?.

It is a very minor point, so not worthy of a feature request but if you do know or happen notice on your travels within the code, it would be a touch, but far from essential.

Bill.Thomson · 2016-10-17T13:02:04.462Z

Paul,

Just a guess here… Have you tried using the control key to do a single deselect?

pb66 · 2016-10-17T13:30:26.543Z

Hi Bill, No the CTRL key doesn’t work, but we do now have a key combination of SHIFT and right click, that does deselect so alternatives are not really needed, I was just keen to have the select/deselect toggle on a mouse click alone if it was easily done because the use of arrow keys to shift items around or move the page up/down if no item is selected is fantastic to use but slowed down by the need to find the shift key (moving away from the arrow keys and back) or some clear space to click (moving the mouse away from the work area and back) to deselect the item you just moved and move the page.

As i said not essential but a minor enhancement, for years we have managed with no undo/redo, multi-select, forwards/backwards or floating toolbox and a fixed grid so things are much, much better now, I think I can suffer this minor point if it’s not an easy thing.

EDIT - Oh and just to clarify, it is real easy to deselect any one of multiple items whilst using multi-select by holding the shift key and to deselect a single lone selected item by using the shift key in the same way,

mattjgalloway · 2016-10-17T13:37:07.805Z

pb66:

but I was wondering if you would know what was needed to make deselect-single-item-by-clicking-it-a-second-time work without holding a shift key?.

Should be very very easy. My only concern would be that could become annoying. It’s not how drawing apps work, and my hunch is because it wouldn’t be as usable as it sounds.

I think with holding shift to deselect a single one would be in line with how other apps work.

What do you think?

pb66 · 2016-10-17T13:42:56.076Z

No, that’s totally fine if it’s the way you prefer it to work, I just though it was a loose end left unchanged from the pre multi-select code, as I said no biggy.

mattjgalloway · 2016-10-17T13:59:49.161Z

Ah right. I’ll give it a go and see how it feels. It really will be simple to do so I don’t mind doing that. I can whack it up as a PR and others can then play if they want and give an opinion.

pb66 · 2016-10-17T14:28:01.419Z

Oooook? I think a bit of unintentional reverse psychology at play there!!

I did ponder on why you said it “could become annoying” and the only thing I could think of was if you miss those little drag handles (especially the centre one, which we shouldn’t need so much now) and accidentally deselect the item, perhaps you are right, they were always a little tricky as they are a little on the small side.

mattjgalloway · 2016-10-17T14:51:27.938Z

Yeh I want to make resizing and moving much easier. I thought it would be a good idea to make it so if you drag anywhere it moves the element, rather than just if you click the (sometimes hard to see!) centre square.

pb66 · 2016-10-17T15:25:00.048Z

mattjgalloway:

I thought it would be a good idea to make it so if you drag anywhere it moves the element

I’m not so sure that would be a good idea unless increasing the size of the resizing drag handles too, they are that small that if you miss and drag to resize you would drag your widget across the screen and have to put it back (or undo!).

It may be a concern to some that larger handles maybe ugly ( I think this has come up before) but I think there is plenty of room to increase them a bit and possibly even increase the “active zone” slightly more (if it is a separate thing to the graphic) to have a bit of a catch area, the same for the centre handle, or probably even a bit bigger than the side handles. I guess the issue with oversize handle zones is if they overlap neighboring or nested items

It’s also me worth mentioning, I have a touch screen laptop and it is impossible to use the current handles with the touchscreen even with a stylus, if the handle active area was at least the size a finger could grasp, regardless of the handle graphic size it would be very forgiving when using the mouse and much more touchscreen friendly.

And then if there was less chance of missing the current handles and it was more touchscreen friendly, I would definitely prefer the ability to un-select with a second click (or touch) over having a much larger catch area for dragging, or at least I think so.