Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.57k stars 396 forks source link

With exacticks ture and minorticks set to 0, result is infinite loop. #99

Closed vhakulinen closed 7 years ago

vhakulinen commented 7 years ago

Couldn't confirm on chrome (because it just crashed), but on firefox, this is what I managed to get (from the compiled javasccript using map file)

function drawRadialMinorTicks(context, options) {
    var radius = radialTicksRadius(context, options);
    var s = void 0,
        range = void 0,
        angle = void 0;
    var i = 0;
    var delta = 0;
    var ratio = options.ticksAngle / (options.maxValue - options.minValue);

    context.lineWidth = SmartCanvas.pixelRatio;
    context.strokeStyle = options.colorMinorTicks;

    context.save();

    if (options.exactTicks) {
        range = options.maxValue - options.minValue;
        s = range / options.minorTicks;
        delta = options.majorTicks[0] % options.minorTicks * ratio;
    } else {
        s = options.minorTicks * (options.majorTicks.length - 1);
    }

    for (; i < s; ++i) { <-- here, s is (or should be) zero - firefox optimizes s away
        angle = options.startAngle + delta + i * (options.ticksAngle / s);

        context.rotate(drawings.radians(angle));

        context.beginPath();
        context.moveTo(0, radius);
        context.lineTo(0, radius - context.max * 0.075);
        closeStrokedPath(context);
    }
}

Related config:

{
  "renderTo": {},
  "width": 201,
  "height": 200,
  "minValue": -7,
  "maxValue": 107,
  "value": 0,
  "units": false,
  "exactTicks": true,
  "majorTicks": [
    -7,
    0,
    20,
    80,
    100,
    107
  ],
  "minorTicks": 0,
  "strokeTicks": true,
  "animatedValue": false,
  "animateOnInit": false,
  "title": false,
  "borders": true,
  "numbersMargin": 1,
  "valueInt": 3,
  "valueDec": 2,
  "majorTicksInt": 1,
  "majorTicksDec": 0,
  "animation": true,
  "animationDuration": 500,
  "animationRule": "cycle",
  "colorPlate": "#fff",
  "colorPlateEnd": "",
  "colorMajorTicks": "#444",
  "colorMinorTicks": "#666",
  "colorTitle": "#888",
  "colorUnits": "#888",
  "colorNumbers": "#444",
  "colorNeedle": "rgba(240,128,128,1)",
  "colorNeedleEnd": "rgba(255,160,122,.9)",
  "colorValueText": "#444",
  "colorValueTextShadow": "rgba(0,0,0,0.3)",
  "colorBorderShadow": "rgba(0,0,0,0.5)",
  "colorBorderOuter": "#ddd",
  "colorBorderOuterEnd": "#aaa",
  "colorBorderMiddle": "#eee",
  "colorBorderMiddleEnd": "#f0f0f0",
  "colorBorderInner": "#fafafa",
  "colorBorderInnerEnd": "#ccc",
  "colorValueBoxRect": "#888",
  "colorValueBoxRectEnd": "#666",
  "colorValueBoxBackground": "#babab2",
  "colorValueBoxShadow": "rgba(0,0,0,1)",
  "colorNeedleShadowUp": "rgba(2,255,255,0.2)",
  "colorNeedleShadowDown": "rgba(188,143,143,0.45)",
  "colorBarStroke": "#222",
  "colorBar": "#ccc",
  "colorBarProgress": "#888",
  "colorBarShadow": "#000",
  "fontNumbers": "Arial",
  "fontTitle": "Arial",
  "fontUnits": "Arial",
  "fontValue": "Arial",
  "fontNumbersSize": 20,
  "fontTitleSize": 24,
  "fontUnitsSize": 22,
  "fontValueSize": 26,
  "fontNumbersStyle": "normal",
  "fontTitleStyle": "normal",
  "fontUnitsStyle": "normal",
  "fontValueStyle": "normal",
  "fontNumbersWeight": "normal",
  "fontTitleWeight": "normal",
  "fontUnitsWeight": "normal",
  "fontValueWeight": "normal",
  "needle": true,
  "needleShadow": true,
  "needleType": "arrow",
  "needleStart": 5,
  "needleEnd": 85,
  "needleWidth": 4,
  "borderOuterWidth": 3,
  "borderMiddleWidth": 3,
  "borderInnerWidth": 3,
  "borderShadowWidth": 3,
  "valueBox": true,
  "valueBoxStroke": 5,
  "valueBoxWidth": 0,
  "valueText": "",
  "valueTextShadow": true,
  "valueBoxBorderRadius": 2.5,
  "highlights": [
    {
      "from": -7,
      "to": 0,
      "color": "#FF0000"
    },
    {
      "from": 0,
      "to": 20,
      "color": "#FFF000"
    },
    {
      "from": 20,
      "to": 80,
      "color": "#00FF00"
    },
    {
      "from": 80,
      "to": 100,
      "color": "#FFF000"
    },
    {
      "from": 100,
      "to": 107,
      "color": "#FF0000"
    }
  ],
  "highlightsWidth": 15,
  "barWidth": 0,
  "barStrokeWidth": 0,
  "barProgress": true,
  "barShadow": 0,
  "ticksAngle": 270,
  "startAngle": 45,
  "colorNeedleCircleOuter": "#f0f0f0",
  "colorNeedleCircleOuterEnd": "#ccc",
  "colorNeedleCircleInner": "#e8e8e8",
  "colorNeedleCircleInnerEnd": "#f5f5f5",
  "needleCircleSize": 10,
  "needleCircleInner": true,
  "needleCircleOuter": true,
  "animationTarget": "needle",
  "useMinPath": false,
}

EDIT: Working workaround is to set minorticks to same as minValue -1

Mikhus commented 7 years ago

Fixed in branch v2.1.1 Test URL: https://rawgit.com/Mikhus/canvas-gauges/v2.1.2/examples/issue-99.html