My Dashboard - and how do you put text in front of image?

Hi Folks -

Thanks Trystan very much for developing this great bit of software - emoncms.

I've had a great time integrating it with my offgrid system.

I use it quite differently to the way I guess it was intended - in my case I've written software for an arduino that basically constantly interrogates two victron bluesolar solar charge controllers via their serial ports and a shunt. The charge controllers give me watts produced, the shunt gives me watts stored, and the difference gives me house consumption. Simple, elegant and accurate. Here's one of my dashboards - we live in the Bush in Australia so during our winter the sun goes down behind the trees and we only produce 10% of our 3kW nominal, so we tend to switch over to mains at night - so if it seems pretty uninteresting it's probably our night time - 

Here's a video I shot of the system showing the layout

Since I'm a telco, my intention ultimately is to use emoncms to gather snmp data showing throughput of network devices and add that to the system as well.. that's going to be fun :)

OK - SO... the question. If you see the dashboard above you'll see I've imported a number of jpgs to make it pretty - the icons showing the solar panel, the battery and the house. What I'd really like to do is place the battery state of charge (SOC) reading you see at the bottom left of the dashboard directly over the battery icon. Unfortunately, though, when I drag the 'feedvalue' widget over the jpg, it always gets hidden BEHIND the jpg... does anyone have any tips about how I might make it go 'in front'?

Cheers,

M

Robert Wall's picture

Re: My Dashboard - and how do you put text in front of image?

Have a look at the style sheet and use the "Z-index" properties to get the order right?

dockarl's picture

Re: My Dashboard - and how do you put text in front of image?

Hi Robert - thanks for the suggestion... hmmm... I don't think I'd know where to start there - I'll have to do some reading up. Does emoncms self generate a style sheet for each dashboard, or would you somehow embed the z-index within the img tag?

chaveiro's picture

Re: My Dashboard - and how do you put text in front of image?

Simple way: declare the text element after the image element it will be displayed on top of it.

dockarl's picture

Re: My Dashboard - and how do you put text in front of image?

Aha! Right you are Chaveiro! I setup the SOC feedvalue widget BEFORE I added the img - just added a second feedvalue widget and it's all hunky-dorey!

So... next question - the 'snap to' grid on the dashboard editor is pretty coarse - so as you can see it's a bit tricky for me to get the feedvalue perfectly centred - actually this has been a little peeve of mine with the dashboard editor for a while.. Is there any way of making the snap-to grid finer?

Thanks guys for your help!

M

chaveiro's picture

Re: My Dashboard - and how do you put text in front of image?

XT version has it better.

On .\Modules\dashboard\Views\js\designer.js change the number of grid pixels on the line with :

    'grid_size':20,

dockarl's picture

Re: My Dashboard - and how do you put text in front of image?

Thanks Chaveiro - 

I've changed that file - tried 3 different values, 10, 5 and 1 - refreshing cache each time I changed. Unfortunately that didn't seem to work for me - grid size remains the same.

Cheers,

M

Paul Reed's picture

Re: My Dashboard - and how do you put text in front of image?

See http://openenergymonitor.org/emon/node/10922#comment-31831 in relation to removing the grid.

Paul

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.