Effekte sind Webseiten

Effekte in SignalRGB, bekannt als Lightscripts, sind im Wesentlichen Webseiten, die mit der SignalRGB-API interagieren und einige einfache Regeln einhalten müssen, um korrekt zu funktionieren. Jedes Lightscript benötigt drei wesentliche HTML-Tags: <head>, <body> und <script>.

<head>

Dieser Abschnitt sollte alle notwendigen <meta>-Tags enthalten. Wie im Abschnitt “API-Referenz” beschrieben, können diese Tags Benutzereingabefelder erstellen (z. B. Farbton-Regler, Zahleneingaben usw.) oder auf die SignalRGB-API zugreifen, um visuelle Eingaben aus der primären Anwendung abzurufen. Zudem weist ein <title>-Tag in diesem Abschnitt dem Effekt innerhalb der Signal-App eine Bezeichnung zu.

Sehen wir uns das vorherige Beispiel nochmals an, um ein besseres Verständnis zu erlangen:

<head>
    <title>Hue Cycle</title>
    <meta description="Stock hue cycle."/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>

Dieser Header enthält vier Tags: einen <title>-Tag und drei <meta>-Tags, die Beschreibung, Herausgeber und einen einfachen Zahlenregler abdecken. Während Header statischer Effekte in der Regel klein sind, können Effekte, die auf Bildschirmaktionen reagieren, Dutzende von Messgeräten mit mehreren Auflösungseinstellungen enthalten. Es ist wichtig, organisiert zu bleiben und gute Namenskonventionen zu befolgen.

<head>

<body>

Der Body enthält genau ein Element – den <canvas>-Tag. Die wesentlichen Attribute dieses Tags sind id, das zum Abrufen des Canvas im Skript verwendet wird, sowie width und height. Die Standardabmessungen für SignalRGB betragen 320 px für die Breite und 200 px für die Höhe.

<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>

<body>

<script>

In diesem Tag passiert die Magie. Es gibt drei grundlegende Abschnitte in diesem Skript sowie zwei Funktionen, die als STANDARD für Lightscript-Entwickler gelten sollten: update und window.requestAnimationFrame.

Variablendeklarationen

Alle skript-weiten Variablen sollten gemeinsam deklariert werden, um die Entwicklung zu vereinfachen. In Zukunft werden dazu auch Meter-Deklarationen gehören, aber vorerst haben wir eine einfache Auswahl.

var c: Wird verwendet, um das Canvas-Tag von oben abzurufen.
var ctx: Der 2D-Kontext des Canvas-Elements, also der bearbeitbare Bereich für den Effekt.
height, width und hue: Diese werden hier deklariert, um den Prozess zu vereinfachen.

Erster Update-Aufruf

Am Ende des Codeblocks wird window.requestAnimationFrame(update) referenziert. “Update” ist der Name der Funktion, die die Animationsdetails verwaltet. Der aktualisierte Zustand in jedem Frame erzeugt für die Betrachter die Illusion von Bewegung.

Die hier verwendete Methode ist entscheidend: Da jede Operation in der Update-Funktion eine kleine Menge Zeit zur Ausführung benötigt, kann das direkte Aufrufen von update() zu Verzögerungen in den Animationen führen. Zum Beispiel könnte der erste Callback annehmen, dass 100 ms vergangen sind, der nächste 110 ms, und so weiter.

Durch die Verwendung von window.requestAnimationFrame wird der aktuelle Zeitstempel an die Callback-Funktion und ihre verschachtelten Callbacks übergeben, wodurch der Zustand der Animation trotz kleiner Ausführungslücken erhalten bleibt.

Kurz gesagt: Die Methode window.requestAnimationFrame(callback) sollte verwendet werden, um die Animation zu aktualisieren!

Die Update-Funktion

Diese Funktion ist zentral für ein funktionierendes Lightscript und muss so einfach und effizient wie möglich sein, da sie jeden Frame ausgeführt wird. Nach dem ersten Skript-Laden und Funktionsaufruf wird update durch seinen internen window.requestAnimationFrame-Aufruf weiter ausgeführt.

In diesem Beispiel führt jeder Frame vier Hauptoperationen durch:

Den Canvas-Füllstil mit ctx.fillStyle festlegen. Dies kann eine Farbe, ein Muster oder ein Verlauf sein und bleibt bestehen, bis es durch den nächsten ctx.fillStyle-Aufruf überschrieben wird.
Ein Rechteck (mit dem zuvor festgelegten Füllstil) mit ctx.fillRect(x, y, width, height) erstellen. In diesem Fall repräsentiert das Rechteck den gesamten Canvas.
Den hue-Wert um speed erhöhen, die Benutzereingabevariable im Header.
hue auf den Bereich 0–360 begrenzen, um dem HSL (Hue, Saturation, Lightness)-Standard zu entsprechen.

<script>
    // Variablendeklarationen -------------------------
    // Canvas-Element aus dem DOM abrufen
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // Update-Funktion --------------------------------
    function update()
    {
      // 1
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      // 2
      ctx.fillRect(0, 0, width , height);
      // 3
      hue+=(speed / 4);
      // 4
      if (hue > 360) { hue = hue % 360; }
      // Funktion erneut aufrufen
      window.requestAnimationFrame(update);
    }

    // Erster Update-Aufruf ----------------------------
    window.requestAnimationFrame(update);
</script>

Dieses allgemeine Muster (Füllstil setzen, Form zeichnen, Variablen bearbeiten) ist der Standard für Canvas-Animationen.

Wenn die Farbe falsch ist, fehlt ein Style-Fill.
Wenn die Form falsch ist, fehlt ein Shape-Fill.
Wenn sich nichts im Laufe der Zeit ändert, wurden die Variablen nicht bearbeitet.

Weitere Details und Tipps zur Fehlerbehebung findest du auf unserer nächsten Seite über HTML5 + JS.

<script>