Widgets

First, I wish to thank all within this project for sharing their good work. I have found it educational and exciting.

This emoncms is just what I needed to adapt to my monitoring needs. I will be using multiple wireless temperature sensors within a structure and monitoring them on site while raising the structures temperature to eradicate Bedbugs, Mold, Mildew and odors.

Since the temperatures can cause damage to items melting, flashpints, and fire they need to be monitored closely.

Now on to my question, On my computer screen I will have about half dozen or more temperature logging gages, I also will be using a remote wireless camera and flame detectors.

The widgets within emoncms are usable but I want to add to them or build others. What software is used to build these graphics ? Is there somewhere you can point me to that I can learn what siftware to use and how to build these widgets?

 

Kind Regards

Rex

glyn.hudson's picture

Re: Widgets

The widgets are Java Script Canvas, take a look at https://github.com/emoncms/emoncms/tree/master/Modules/dashboard/Views/js/widgets. With any luck you will be able to adapt the widgets to your needs. 

For example it's easy to change the colors on the dial or add an offest in dial.js with:

offset = -0.75;
      segment = ["#e61703","#ff6254","#ffa29a","#70ac21","#378d42","#046b34"];

What are your ideas for widgets? 

khs's picture

Re: Widgets

Thank you all for this great work here.

Referring to Glyn Hudson's question above I would like to use dials with two indicators for my hydronic balancing project here at home.

There are more than a handful of radiators here and I think it would be useful to see the water-in and water-out temperatures at a glance on one dial and have all of them on one page.

If all went well the dials should all look alike ( as in an airplane or a racing car).

Any help is very welcome.

Regards,

khs

ukmoose's picture

Re: Widgets

Have you had a look at the Cylinder Widget?

This can display 2 temperatures so you could have 1 for each radiator.  

Another way to approach the problem might be to look at a stacked bar chart per radiator, then with the top and bottom of each bar being the two temps.  

These might be easier to read on a quick glance than dials.

khs's picture

Re: Widgets

Yes, I did and the Cylinder Widget will not fit. The size of them cannot be so much reduced  that there will be at least 16 radiators displayed on one display.

The use of the Stacked Bar Chart seems to be an idea.  I have to play a bit with that but I do not understand how to display a number of different inputs; I saw there are two inputs over the  time. Here is time not so important, but the value of the temperatures for water-in and water-out, 16 side by side.

Perhaps I will resize the dials to get them all on one display, but I guess the idea with the two pointers per dial may be useful for other purposes. One can think of a dial with 3 pointers, showing the highest, the lowest and the present value of something, e.g temperature.

Regards,

khs

 

ukmoose's picture

Re: Widgets

Assuming you are running your own emoncms instance and are not using emoncms.org you can easily modify the cylinder widget to make it smaller. (And assuming you are not using the shiny new modular version of emoncms which still needs a catchier name)

Open the file <path>/emoncms/Views/dashboard/js/widgets/cylinder.js. (Usual rules about taking a backup first obviously apply  ;-) )

At about line 23 there should be a line that looks like:

var bh = 28;

Change this value to be something smaller e.g 14. and save the file.

Then as you add the widget, you can rescale the width and should be able to fit 16 on one display.

 

If you are using emoncms.org, I can't think of a way of doing what you want at the moment.

 

 

khs's picture

Re: Widgets

Thank you, ukmoose,  for the quick response.

Yes, my own emoncms instance

No, using the really shiny new version

Ok, lets wait and see. At the end I will have live with the not so convenient display, but I will not give up the idea with the multi-pointer dials :-)

 

ukmoose's picture

Re: Widgets

in the new shiny version the line you would need to change is:

line 64 in emoncms/Modules/dashboard/Views/js/widgets/cylinder/cylinder_render.js

TrystanLea's picture

Re: Widgets

love it, new shiny version :) although it should probably be shiny with kinks in it... 

TrystanLea's picture

Re: Widgets

It should be possible to rework the dial code for multiple dial needles if your interested in trying, if you navigate to:

https://github.com/emoncms/emoncms/blob/master/Modules/dashboard/Views/j...

and then the dial needle is drawn from line 150 to 159, it should be a matter of creating two of them and changing the parameter a which is the angle of the dial needle to the second dial position. 

khs's picture

Re: Widgets

Perhaps there is a way to bring in a new widget "Dial-Pointer". This widget should contain a simple dial-pointer, but with some options, like displaying a value, e.g. temperature.

Like the middle one. On the right side I just positioned two "dial-pointer" widgets just one above the other.

That looks pretty much the way I hoped.

But, as you will see it's far from being finished.

Perhaps there are some more ideas flying around.

khs

TrystanLea's picture

Re: Widgets

nice work, having two dial pointer widgets one above the other is nice because i guess that way you could add as many pointers as you want. 

ukmoose's picture

Re: Widgets

The challenge I see is that as you can't set the maximum value for the dial,how do you know the relative size of the second pointer.  All you know is that it is larger or smaller than the pointer with the declared value.

 

khs's picture

Re: Widgets

OK, its not yet completely finished, but this screenshot may give an answer.

I started with some changes at  /Modules/dashboard/Views/js/widgets/dial/dial_render.js.

Copied the "upper" dial on top of the "lower" dial and added the feedvalue widget.

 

Adding the value in figures to the "lower" dial in the container, one can follow just the pointers and can also read the values.

To clean this up will take some more time, but I hope I show what I meant.

Comment viewing options

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