1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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