Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[OliverIO]

Da ich dieses widget auch ausserhalb von iobroker bereits eingesetzt habe, wollte ich dies auch für die
Lautstärkeregelung meiner Multiroomlösung einsetzen.
Als i-Tüpfelchen wollte ich einen animierten Glüheffekt umsetzen, welches mir nach einigem tüfteln auch gelungen ist.

Was ich noch nicht als so optimal gelöst finde ist: (wer Verbesserungen hat bitte melden).

1. die Initialisierung des CircleKnob mit dem Glüheffekt. Ich habe kein echtes Ereignis finden können, an dem man erkennen kann, das das Widget nun fertig initialisiert ist. Erst dann kann ich da drauf aufsetzen, daher die setInterval-Lösung
2. da der Glüheffekt durch mehrfaches malen eines größer werdenden Kreissegmentes entsteht, multipliziert sich auch die angewendete Opacity. Daher muss hier ein sehr niedriger Wert angegeben werden,

Ansonsten bitte testen und Feedback.

Den folgenden Skriptanteil einfach in einer View mit einem CircleKnob in den Skript-Reiter kopieren und starten.
Es gibt für alles Defaultwerte, welche aber auch individuell angepasst werden können (vgl. auskommentierter Bereich am Anfang)

setInterval(function () {
    $('.vis-tpl-hqwidgets-CircleKnob input').each(function (a, elem, c) {
        if ($(elem).data('kontroled') && $(elem).data('draw') === undefined) {
            $(elem).data('draw', true);

            $(elem).trigger(
                'configure', {
                //"glowWidth":42,           //default=30% von lineWidth
                //"framestep":0.01,         //default=0.01
                //"opacity":0.2,            //default=0.2
                //"glowcolor":"#ff0000",    //default=normale Standardzeichenfarbe
                'draw': function (v) {
                    if (v !== true && this.o.first)
                        return;
                    this.o.first = true;
                    this.g = this.c;
                    this.clear();
                    var c = this.g, // context
                    a = this.arc(this.cv), // Arc
                    pa, // Previous arc
                    r = 1;

                    // glow init start
                    if (!this.o.glowWidth)
                        this.o.glowWidth = this.lineWidth + (this.lineWidth * 0.3);
                    if (!this.o.framestart)
                        this.o.framestart = 0;
                    if (!this.o.framestep)
                        this.o.framestep = 0.01;
                    if (!this.o.opacity)
                        this.o.opacity = 0.2;
                    // glow init end

                    c.lineWidth = this.lineWidth;
                    c.lineCap = this.lineCap;

                    if (this.o.bgColor !== "none") {
                        c.beginPath();
                        c.strokeStyle = this.o.bgColor;
                        c.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, this.startAngle + 0.00001, true);
                        c.stroke();
                    }

                    if (this.o.displayPrevious) {
                        pa = this.arc(this.v);
                        c.beginPath();
                        c.strokeStyle = this.o.colorize(this.pColor, this.v, true);
                        c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d);
                        c.stroke();
                        r = this.cv == this.v;
                    }
                    // glow part start
                    function glowarc(self, radius, arc, glowWidth) {
                        var sa,
                        ea;
                        var ab = arc.e - arc.s;
                        gb = ((radius * ab) + glowWidth) / radius;
                        var v = (gb - ab) / 2;
                        sa = arc.s - v;
                        se = arc.e + v;

                        return {
                            s: sa,
                            e: se,
                            d: self.o.flip && !self.o.cursor
                        };
                    }
                    var delta = this.o.glowWidth - this.lineWidth;
                    if (this.o.glowcolor)
                        c.strokeStyle = this.o.glowcolor;
                    for (var i = 0; i <= Math.floor(Math.abs(Math.sin(this.o.framestart) * delta)) + 1; i++) {
                        c.lineWidth = this.lineWidth + i;
                        c.globalAlpha = this.o.opacity;
                        var g = glowarc(this, this.radius, a, i);
                        c.beginPath();
                        c.arc(this.xy, this.xy, this.radius, g.s, g.e, g.d);
                        c.stroke();
                    }
                    this.o.framestart += this.o.framestep;
                    c.globalAlpha = 1;
                    c.lineWidth = this.lineWidth;
                    // glow part ende
                    c.beginPath();
                    c.strokeStyle = r ? this.o.colorize(this.o.fgColor, this.cv, true) : this.o.colorize(this.o.fgColor, this.cv, false);
                    c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d);
                    c.stroke();
                    window.requestAnimationFrame(this.dH.bind(this, true));
                    return false;
                }
            });
        }
    });

}, 1000);