Dashboard Improvements

Hey folks.

I was working on my dashboard today and found myself wanting to change the grid size on my dashboard. After some searching, I found it’s a common theme.

So I decided to make a couple of tweaks and submit them as pull requests:

  1. Add a grid size option to dashboard
    This one lets you change the grid size from the default of 20. Simply change the value in the dashboard settings. If you apply this, you’ll need to run database update, such as from emonPi’s admin panel.

  2. Add key bindings to move things around the dashboard editor
    This one allows you to use your arrow keys on your keyboard to move items around in your dashboard.

Thanks to @Paul for accepting the first one already!


Both are great additions, thanks.

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

If you find yourself at a loose end and can figure out how to add something like “bring forward” and “move back” to get around containers covering widget (unless put in place first) that would be great too, I’ve taken to using phpmyadmin to reorder the divs directly in the dashboards table.

1 Like

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



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

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



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?

Thanks again Matt :+1:

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

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.

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


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


Just added to master branch Paul


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

1 Like

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: http://getbootstrap.com/css/#grid

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 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>
  • 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>

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


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

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,

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?

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.

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.

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.