OpenEnergyMonitor Community

Setting background colour of dashboard graphs

Hi @TrystanLea

I had a bit of a look at this today. The build and restore from my stable release went fine although the first boot was really slow. I have a homebrew EmonPi without an LCD screen and it seemed to start and stop the LCD driver quite a few times and wait a good while between each try, so patience was an issue and could cause the update on first boot to be interrupted for some people.

Once loaded and restored from USB, things look good. I did another full upgrade in the admin menu just to be sure the update on first boot was completed and it reported nothing to do.

I see why my standalone dark theme didn’t get any further, the user selectable themes you’ve added look great, except that multigraph still won’t respect the dashboard background colour. I appreciate that the x and y axis text is black, so that’s an issue for dark backgrounds, but perhaps not an insurmountable one?

Related to the theme and menu changes, there are a couple of issue stopping me adopting this version yet. Dashboards designed to be viewed when logged out are quite a bit less clean. The new side bar menu is in small mode by default and the top bar remain visible even when “Hide menus” is selected. Plus, the footer doesn’t respect the user selected theme colour. So my hydrometer display ends up like below, when previously it was really clean looking.

Anyway, just a little feedback for you. Thanks for all your continued hard work.


1 Like

Thanks @cmcg, I’ve just pushed up a couple of changes to emoncms core and the dashboard module (master branch for testing) to allow setting the background colour of the realtime, rawdata and bargraph visualisations, happy to extend this to the multigraph and other visualisations if it’s the right approach?

Configuration window:

Ok noted, will take another look at these, did hide menu’s have the same effect as adding &embed=1 to the dashboard url?

Fantastic, yes I think that would work well for multigraph. Thanks.

I’m sorry, I didn’t try &embed=1 and I don’t have the newer version running just now.

Ok I’ve added the background colour option to the multigraph visualisation and fixed the hide menu’s option. Both available in latest emoncms core and dashboard module master branches for testing.

Hide menu’s now uses the embed option and hides the footer as well. A multigraph with the black background is shown as 5th visualisation at the bottom below:

That’s awesome. Thanks. I’ll try to check it out soon.

1 Like

Hi, I built a spare Pi3 this morning, updated to master and restored from my stable system. The changes are excellent. Thanks so much. Hide menus and &embed=1 now work identically and do exactly what they imply. The background colour option on miltigraph gives me just what I need.

BTW. The minimise sidebar icon in the new menu floats in the middle. Shouldn’t it be on the left?

Thank again for this. My next build will have less customisation and so be a lot easier to keep up to date.


Some further thoughts on this. I was in two minds initially so didn’t go into it yesterday. It seems quite harsh that Hide Menus would also hide the “Powered by” line in the footer. I’ve never minded it, in fact I use those links quite often and I like that people can see what backend system is being used. But more importantly, given the open source nature of the project, I don’t think it’s a compromise you should have to make.
On reflection, it was fairer and actually offered more functionality as you had it before, where only ?embed=1 hid both the menus and the footer with the footer remaining visible when you just tick the Hide menus option. Instead, maybe the footer background could follow the side menu colour, so it’s less jarring with darker themes?

Finally, have you considered also adding a Text Colour option to the graphs? All of the examples above would benefit from brighter text and it frees up the choice of background colour to include those that would make it illegible. Using mid-grey works well for some situations but it isn’t ideal when the text is so small, it really needs to maintain higher contrast.

Is that the expand contract icon at the bottom? I thought it looked better at the bottom?..


Yes true, it was just easier from a implementation perspective as I could just reuse the embed feature. Perhaps if someone really wants a clean display there’s no harm hiding it…

Yes that would be good, I agree the contrast is not great!

PS: thanks for testing! :slight_smile:

Yes. Where it is now, it looks like it moves further to the right depending of the length of the longest menu title. I felt like it belonged on the left, where it would sit under the stack of menu icons above it, like this…


But honestly, it wasn’t upsetting me that much. :slight_smile:

1 Like