gauge.js, adjust the vanilla JS code for customizable labels

Discussion in 'JavaScript' started by iago111, Feb 3, 2022.

  1. #1
    Hello,
    I'm back on clocks, gauges etc. I discovered a JS tool called gauge.js
    https://bernii.github.io/gauge.js/

    As an excercise I wanted to make an RPM gauge (revolutions per minute).
    I can built the gauge with that tool and also ad the ticks with that tool.
    Now, adding labels is more complex since gauge.js does not provide a flexible method here.

    Since the code is not tool long (of gauge.js) I thought that I can adjust this on my own

    staticLabels is an object, that has the following properties: font, labels, color, fractionDigits

    gauge.js renders the labels with the code below. How can I approach that method in order to understands how it works in order to make the functionality more flexible?

    E.G. Why does the method start with M.prototype.renderStaticLabels??
    Thanks a million!

      (M.prototype.renderStaticLabels = function (t, i, e, s) {
          var n, o, a, h, r, l, p, c, u, d;
          for (
            this.ctx.save(),
              this.ctx.translate(i, e),
              l = /\d+\.?\d?/,
              r = (n = t.font || "10px Times").match(l)[0],
              c = n.slice(r.length),
              o = parseFloat(r) * this.displayScale,
              this.ctx.font = o + c,
              this.ctx.fillStyle = t.color || "#000000",
              this.ctx.textBaseline = "bottom",
              this.ctx.textAlign = "center",
              a = 0,
              h = (p = t.labels).length;
            a < h;
            a++
          )
            void 0 !== (d = p[a]).label
              ? (!this.options.limitMin || d >= this.minValue) &&
                (!this.options.limitMax || d <= this.maxValue) &&
                ((r = (n = d.font || t.font).match(l)[0]),
                (c = n.slice(r.length)),
                (o = parseFloat(r) * this.displayScale),
                (this.ctx.font = o + c),
                (u = this.getAngle(d.label) - (3 * Math.PI) / 2),
                this.ctx.rotate(u),
                this.ctx.fillText(
                  g(d.label, t.fractionDigits),
                  0,
                  -s - this.lineWidth / 2
                ),
                this.ctx.rotate(-u))
              : (!this.options.limitMin || d >= this.minValue) &&
                (!this.options.limitMax || d <= this.maxValue) &&
                ((u = this.getAngle(d) - (3 * Math.PI) / 2),
                this.ctx.rotate(u),
                this.ctx.fillText(
                  g(d, t.fractionDigits),
                  0,
                  -s - this.lineWidth / 2
                ),
                this.ctx.rotate(-u));
          return this.ctx.restore();
        }),
    Code (JavaScript):
     
    iago111, Feb 3, 2022 IP