Page 1 of 1

Gauges seem to know only one instance per gauge

Posted: Fri 03 Apr 2020 5:41 pm
by HansR
I am working on a new website which has a dashboard with the figures and a dashboard with the gauges. The user can toggle.
But the gauges seem to know only one instance per gauge. Originally I had the wind gauges displayed on one dashboard but after creating the second board, also with those gauges, they disappeared from the first. So it is not the coding because that is the same for those three gauges in both dashboards:

Code: Select all

<canvas id="canvas_wind" class="gaugeSizeSml"></canvas>
Effectively the second display is shown first and it seems it claims the gauges. You can see the effect here (this is currently a trial site so it's possible that.... :o ).

Can you explain this and how can I get what I want?

Re: Gauges seem to know only one instance per gauge

Posted: Fri 03 Apr 2020 9:40 pm
by beteljuice
Problem is simple ....

You can't use id= "a_name" more than once in a page.
Only the first one found will do what you want.

Fixing it with ss duplicate gauges ... :shock:

Re: Gauges seem to know only one instance per gauge

Posted: Sat 04 Apr 2020 4:39 am
by HansR
Yes, a typical 'end of the day' question.
Found my solution waking up ;)
Thanks.

Re: Gauges seem to know only one instance per gauge

Posted: Fri 17 Apr 2020 9:35 am
by HansR
I forked and modified the gauges.js to accomplish some tasks for CumulusUtils.

I heavily stripped the code to the bare bone (took out the pop ups) and brought in some code to be able to pause the system and actually switch and restart. The code is in a public repository and under the same licence as required. I will not bring back code to Mark's repository because the changes have nothing to do with it and I would like to maintain the liberty to make other changes which may be required.

I would like to reproduce Mark's note on maintenance in the 'extras' directory here because this code is actually exactly that although I left it in the original dir:
The files provided in this folder are either experimental, incomplete,
partially functioning, or all of the above!

They are are for more advanced users to tweak, enhance etc. as they see fit.
If you do find issues and correct them, please feedback to the community for
the benefit of others.

Given the above, I do not want to spend hours supporting them and
hand-holding people getting them working!

Cheers
Mark

--------------------------------------------------------

17 april 2020 - Note with v1.0.0 CumulusUtils release of gauges.js

Given the message from Mark above, I made a fork to create a gauges version for CumulusUtils.
It will be in public Github repository, but further I will maintain the same attitude as Mark: no support.

Cheers, Hans
If there's any problem with the repository or my remarks, please let me know.

Re: Gauges seem to know only one instance per gauge

Posted: Sat 18 Apr 2020 12:31 pm
by HansR
OK, apart from complying to what keeps this kind of software development alive (code sharing) I assume some of you may be curious to what happened in the development of CumulusUtils.

First I designed the user interface to have the swapping dashboards with the gauges. That created problems pretty soon, where I could not get the windRose to show after the switch. Mark helped me out and indicated to throw away the rose and build it a new one by calling the initialisation of the gauges. That appeared to be Pandora's box in the sense that some more items needed to be published globally so we had to change things in gauges.js. Later the initialisation was done, not by calling init(), but by calling $.getScript().

The first changes were small so they were made in the general code. Then, while testing, it became more complex. Because BCJkiwi is currently launching his new template the testers @PaulMy and @laulau used multiple instances of websites with the same origin so it was needed that CumulusUtils had the possibility to point to a RealTime location other than its own root. Those changes could be made, but it meant all kinds of errors came up including the failing of the Ajax calls.

The essence of the problem was that with all timers outstanding, neither CumulusUtils nor gauges.js with its Ajax calls were re-entrant. I could not call the re-initialisation from gauges itself, nor from CumulusUtils. So I had to fix that.

I did the following.

In gauges.js:
  1. I removed all code not required for CumulusUtils (basically the popups). Non-essential but it cleared the view on the code.
  2. I created a function Pause() which stops the timers and cancels an outstanding Ajax request.
  3. I published config, gaugeGlobals, init and Pause.
In cumulusutils.js:
  1. I gave the variables gauges.config.realTimeUrl and gauges.config.realtimeInterval its required value in the Document Ready function.
  2. Also started the reatime.txt reading on the CumulusUtils level (which has its own timer)
  3. In the actual function which does the switch ( ToggleDashboard() )
    • I cancelled all timers and outstanding Ajax requests.
    • Did the switch
    • Removed the windRose
    • Reinitialised gauges.js by calling $.getScript and doing so in a synced way (to prevent the non-re-entrance problems)
    • Emulate the Document Ready function to set the variables under the first point
In coding terms the solution is as follows:

Code: Select all

    
   Pause = function () {
      PauseInEffect = true;  // To prevent the Ajax call from happening during restart when that is not completely finished

      clearTimeout(downloadTimer);
      clearInterval(tickTockInterval);
      if ($.active > 0) { jqXHR.abort(); jqXHR = null; }
    },

Code: Select all

             function ToggleDashboard() {
               gauges.Pause(true);
               clearTimeout(RT_timer);
             
               [... do the actual switch ...]
             
               $('#rosePlot').parent().remove();
               $.when( $.getScript('lib/gauges.js'),
                  $.Deferred(function(deferred){ $(deferred.resolve); })
               ).done(function(){ 
                   gauges.config.realTimeUrl = '{Sup.GetUtilsIniValue("Website", "CumulusRealTimeLocation", "")}realtimegauges.txt';
                   gauges.config.realtimeInterval = {Sup.GetUtilsIniValue("Website", "CumulusRealTimeInterval", "15")};
                   RT_timer = setInterval(loadRealtimeTxt, {Sup.GetUtilsIniValue("Website", "CumulusRealTimeInterval", "15")} * 1000);
              });
            }
That's it 8-)
Thanks to @laulau for helping debugging :clap: .

Re: Gauges seem to know only one instance per gauge

Posted: Sat 18 Apr 2020 4:42 pm
by beteljuice
... thinking aloud ..

Wouldn't eg. changeLang(LANG.EN) 're-boot' the gauges ??

Re: Gauges seem to know only one instance per gauge

Posted: Sat 18 Apr 2020 4:58 pm
by HansR
@beteljuice:
As far as I can see, the language setting is activated in the init()-call.
I think that means you need to refresh the page, there is no run-time re-initialisation (in the standard gauges.js)

Re: Gauges seem to know only one instance per gauge

Posted: Sat 18 Apr 2020 10:33 pm
by beteljuice
Had a quick look-see changeLang(); which is available to the containing page.
Won't do a re-initialization of the gauges instance', but it will force a redraw (update) of the gauges.

Re: Gauges seem to know only one instance per gauge

Posted: Sun 19 Apr 2020 8:07 am
by HansR
@beteljuice: But update of the gauges are given every timer interrupt with change of data? Isn't it.

And that did not work. To be more specific, it did not work for the windRose which triggered the whole exercise, which in the end showed it had to do with the painting of the rose, but also with the interruption of the Ajax call. Remember it is not a normal update of a gauge, I switch and than expect to continue normally. Which it did not.

Anyway, if you are really, really, curious, I could get the old situation back and see what happens with the language switch i.s.o. my code: would that get the rose OK?