When using MinPath on RadialGauge jumps

itprotj commented 5 years ago

Have utilised the below code that adjusts the needle according to a value I parse to it with jquery however I would now like to utilise "useMinPath" so that the needle does not need to go the long way around the 360 radialGauge. The needle however now jumps to the value provided instead of providing a smooth transition.

Any suggestions?

JohnLinford commented 4 years ago

I am also getting something like this. Some additional information: with useMinPath: true the needle seems to start off going quickly in the wrong direction when the value changes (i.e. longest path) before correcting itself and animating its way to the correct value via the short path. This does not happen with useMinPath: false.

These are nice gauges, thank you. I hope this little glitch can be easily fixed.

EDIT: It's not quite as simple as I suggested above. On change the needle frequently kicks in one direction or the other before settling and then animating to its new position. The direction of the kick seems to always be the short path but the magnitude varies: sometimes it kicks part way to its new value, sometimes it kicks right past the new value then animates its way back to the new value. Sometimes there is no kick at all.

Looking carefully I see the same effect on the use minimum path example page.

var gaugeDirection = new RadialGauge({ renderTo: 'gauge-Direction', width: 250, height: 250, units: 'Wind direction', minValue: 0, maxValue: 360, majorTicks: ['N','NE','E','SE','S','SW','W','NW','N'], minorTicks: 22, ticksAngle: 360, startAngle: 180, strokeTicks: false, highlights: false, colorPlate: "#fff", colorMajorTicks: "#686868", colorMinorTicks: "#686868", colorTitle: "#000", colorUnits: "#000", colorNumbers: "#686868", colorNeedle: "rgba(200, 50, 50, .75)", colorNeedleEnd: "rgba(200, 50, 50, .75)", valueInt: 1, valueDec: 0, valueBox: true, colorValueText: "#000", colorValueBoxRect: "#fff", colorValueBoxRectEnd: "#fff", colorValueBoxBackground: "#fff", colorValueBoxShadow: false, colorValueTextShadow: false, colorNeedleShadowUp: false, colorNeedleShadowDown: false, needleCircleSize: 7, needleCircleOuter: false, animationRule: "linear", animatedValue: true, animateOnInit: true, animatonTarget: "needle", needleType: "arrow", needleStart: 15, //needleEnd: 99, needleWidth: 5, borders: true, borderInnerWidth: 0, borderMiddleWidth: 0, borderOuterWidth: 5, colorBorderOuter: "#fafafa", colorBorderOuterEnd: "#cdcdcd", //colorNeedleShadowDown: "#222", borderShadowWidth: 0, animationDuration: 1500, useMinPath: true, //Stops needle going long way round to get past north //but this makes needle jittery, starting off in wrong direction) value: 0 }); gaugeDirection.draw();

videobuff commented 4 years ago

I expierence the same issues. Solved it for the time being writing some extra javascript. Bearing data in my case is send every 500ms. The first 5 data's i need to make everything look nice, and use the data-min-path etc.

    if (res == "Bearing :") {
                 res = evt.data.substr(9, 3);   _// take the bearing data from a string coming from my esp32_
                         if (Starting_App < 5){     _//upon websocket connection, Starting_App is set to 0_
                           if (Starting_App == 2){ 
                                        gaugeElement.setAttribute('data-value', res); 
                           }
                           if (Starting_App == 4){ 
                           gaugeElement.setAttribute('data-value', res);
                           gaugeElement.setAttribute('data-use-Min-Path','false');  

                           }
                            Starting_App++;
                              } else  {
                                display.setValue(res);
                                if (old_res != res) {

                                console.log("Bearing data received :"+res);
                                gaugeElement.setAttribute('data-value', res);
                                old_res = res;
                                endstop = res;                  
                                }
                              }        
         }

Here is the compass at page loading

<canvas data-type="radial-gauge"
        data-width="250"
        data-height="250"
        data-min-value="0"
        data-max-value="360"
        data-major-ticks="N,NO,O,ZO,Z,ZW,W,NW,N"
        data-minor-ticks="22"
        data-ticks-angle="360"
        data-start-angle="180"
        data-stroke-ticks="false"
        data-highlights="false"
        data-color-plate="#000000"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-numbers="#ccc"
        data-color-needle="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="false"
        data-value-text-shadow="false"
        data-color-circle-inner="#fff"
        data-color-needle-circle-outer="#ccc"
        data-needle-circle-size="15"
        data-needle-circle-outer="false"
        data-animation-rule="linear"
        data-needle-type="arrow"
        data-needle-start="20"
        data-needle-end="99"
        data-needle-width="4"
        data-borders="true"
        data-border-inner-width="0"
        data-border-middle-width="0"
        data-border-outer-width="10"
        data-color-border-outer="#ccc"
        data-color-border-outer-end="#ccc"
        data-color-needle-shadow-down="#222"
        data-border-shadow-width="0"
        data-units="PA0ESH"
        data-title="ANTENNA BEARING"
        data-font-title-size="19"
        data-color-units="#00ff1d"
        data-font-units-size="14"
        data-color-title="#f5f5f5"
        data-animation-duration="1200"
        data-value="0"
        data-use-Min-Path="true"
        data-animate-on-init="true"

></canvas>

Mikhus / canvas-gauges

When using MinPath on RadialGauge jumps #190