Title addition to Bar widget

I was a little bit annoyed in having to always add a text widget to name a bar widget so I added the option to add a title to it and also be able to select a different color than the bar itself to have a good contrast.

Here is the code:
bar_render.js

Hope it’s for use to others too. I also have done this modification to my PV panel widgets if someone needs that too

Regards
Andi

Hi Andi,

Thanks, could you post a screenshot demonstrating how this works and if possible please submit an emoncms pull request on Github. We can then review and merge changes if this is deemed useful.

Hy Glyn

Yes sorry, forgot to add them.

On the admin Ui I have added a title field and the colour picker widget for the title:

I also did it for my PV Widget but there only a title field is visible and the text colour is because of the darker background the same as for the value

Here is a live example of a user:

Or here is a live demo of a client using the bar charts just for PV:

In this example the serial number of the micro inverters attached to the panel is shown.

My original intention is actually to use the Feed “Tag” value. Does someone know where to get it? Which file is responsible to get the feed value from the feed id?

In My Solution it would solve a lot of manual effort to have the title using the feed tag. When I onboard a client with their Enecsys Inverters I have a script which creates 8 Feeds per Inverter. They are all grouped to the tag, which is the inverter serial number. So adding a PV Widget then would automatically lookup the tag of the feed and use it as title.

Any hint on that?

Thanks
Andi

1 Like

Thanks Andi. That sounds like a good idea. What do you think @mattjgalloway and @pb66 ? You guys are doing a great job of dashboard dev at the moment.

@Andreas_Messerli could you create a github PR for the feature to name a bar widget?

Is this possible? @TrystanLea @mattjgalloway ?

That’s all courtesy of @mattjgalloway, not my doing!

But the bargraph’s look good IMO, being able to change any text colors add the flexibility to using coloured backegrounds and containers etc

It seems legit to me. I’d be happy to review a PR when you’re ready for that @Andreas_Messerli. Have you thought about doing a PR for the PV widget as well? I’d certainly make use of that!

Will do a PR later. Can someone make some tests with it? It seems to break existing bar widgets which is odd because the PV Widgets I have done are working normally with this addition.

When you do not enter a title it just does not shown anything and it should work as the normal bar widget.

Can’t we do a Dashboard section here in the forums? A dedicated one for dashboard development?
I’m thinking of adding also a font picker to it with some preset fonts so that you can change the font of it.

I have the following widgets done:

  • Vertical and horizontal PV Widgets (posted on forums)
  • LED Widget enhanced with size option (posted on forums)
  • Digital Compass widget (posted on forums)
  • Windrose Compass Widget (posted on forums)
  • Jgauge with a 2nd needle to have 2 values shown on the same gauge (posted on forums)

I need to figure out how I can do a pull request on it. I have my own fork of EmonCMS and done some enhancements to it but I’m still on an older code base 9.1. Can I do a pull request from my fork with dedicated subset of files? Or is it better to fork the actual code base and add my changes there?

Hello guys

I now have added also the ability to choose a font :slight_smile:
I used Web save fonts, at the moment there are 6 to choose from:

  • Arial Black
  • Comic Sans MS
  • Courier New
  • Arial
  • Georgia
  • Impact

Screenshots:

Which Fonts are useful to others?

I later try to add this to the text widgets… I’m not a pro when it comes to coding so it takes some time :slight_smile:

I named it bar2 for now and can be downloaded for test here: Dropbox - bar2.rar - Simplify your life
Just add it to the widget folder and it should be good to go.

Tested your bar 2 widget, the only issue I see is that when you go back to edit the color for the title reverts back to black rather than keeping the color you had previously selected.

Thank you for your contribution.

HI Paul

Yes that was right and I fixed that already some time ago :slight_smile:

Trying now to find a way to also not break the existing widgets.

1 Like

Just brainstorming here, but maybe add some kind of identifier to newly created widgets, keep the old code but only apply the new code to bar widgets that have the identifier or version number embedded in them?

Just an idea, hope this helps or at least inspires another idea that works better.