Clean way to drop from over max back to normal max

nospam2k commented 4 years ago

I have a gauge that goes from 0 to 100 but in an error situation the value of the gauge will go to 999 (which I want) and maxValue = false so it sets an new maxValue, BUT, when the error condition clears and the value returns to 0-100, I gauge.maxValue = 100 and then gauge.set the gauge spins around a number of times and finally settles to normal.

How do I avoid the spinning around when resetting maxValue?

kplindegaard commented 4 years ago

Have you tried to enable the limitMax option? You know

var options = {
  ...
  limitMax: true
};
// Rest of initialization as before

nospam2k commented 4 years ago

As I said, I need to be able to have a normal 0-100 and an error situation to display 999. Using limitMax: true won't allow me to see a 999 condition on the gauge.

kplindegaard commented 4 years ago

Want I meant was: Have to tried to set the options limitMax=true when the error condition clears and you either way set maxValue to 100 again? Once it exceeds 100 next time, set limitMax to false.

nospam2k commented 4 years ago

Good thought (just tried), but resetting limitMax=false doesn't reset maxValue. Here is a demo of the problem in one page (without gauge.js).

This example just toggles between 999 and 50 every 3 seconds to show the problem. What should happen is the gauge should be 100% during 999 and 50% during 50. Going from 50 to 999 is ok, but the 999 back to 50 is the problem.

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <script>
      'use strict';
      var gauge;

      function makeGauge()
      {
        var opts =
        {
          angle: 0,
          lineWidth: 0.4,
          radiusScale: 1,
          pointer:
          {
            length: 0.65,
            strokeWidth: 0.035,
            color: '#000000'
          },
          limitMax: false,
          limitMin: false,
          percentColors: [[0.0, '#00b500' ], [0.55, '#00b500'], [0.65, '#ee8000'],
              [0.70, '#ee4000'],[1.0, '#770000']],
          strokeColor: '#E0E0E0',
          generateGradient: true,
          highDpiSupport: true
        };
        var target = document.getElementById('gauge');
        gauge = new Gauge(target).setOptions(opts);
        gauge.maxValue = 100;
        gauge.setMinValue(0);
        gauge.animationSpeed = 15;
        gauge.set(0);

        high();
      }

      function high()
      {
        gauge.maxValue = 999;
        gauge.set(999);
        setTimeout(function() {
          low();
        }, 3000);  
      }

      function low()
      {
        gauge.set(50);
        gauge.maxValue = 100;
        setTimeout(function() {
          high();
        }, 3000);
      }

    </script>
    <script src="gauge.js"></script>
  </head>

  <body onload="makeGauge();">
      <div class="gauge"><canvas id="gauge"></canvas></div>
  </body>
</html>

nospam2k commented 4 years ago

Just another thought, is there a way to toggle animation (not animationSpeed). If I could turn it of and back on that would work.

bernii / gauge.js

Clean way to drop from over max back to normal max #224