Effecten zijn webpagina's

Effecten in SignalRGB, bekend als Lightscripts, zijn in wezen webpagina’s die communiceren met de SignalRGB API en moeten voldoen aan enkele eenvoudige regels om correct te functioneren. Elke Lightscript vereist drie essentiële HTML-tags: <head>, <body> en <script>.

<head>

Deze sectie moet alle benodigde <meta>-tags bevatten. Zoals beschreven in de sectie “API-referentie” kunnen deze tags gebruikersinvoervelden aanmaken (zoals tintschuifregelaars, getalselecties, enz.) of toegang krijgen tot de SignalRGB API om visuele invoer op te halen uit uw primaire applicatie. Bovendien zal een <title>-tag in deze sectie een label toewijzen aan uw effect in de Signal-app.

Laten we het vorige voorbeeld opnieuw bekijken voor een beter begrip:

<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>

Deze header bevat vier tags: een <title>-tag en drie <meta>-tags die de beschrijving, uitgever en een eenvoudige getalschuifregelaar bevatten. Hoewel statische effectheaders gewoonlijk klein zijn, kunnen effecten die reageren op schermacties tientallen meters bevatten, elk met meerdere resolutie-instellingen. Het is belangrijk om georganiseerd te blijven en goede naamgevingsconventies te volgen.

<head>

<body>

De body bevat slechts één element — de <canvas>-tag. De essentiële attributen voor deze tag zijn id, gebruikt voor het ophalen van het canvas in het script, en breedte en hoogte. De standaardafmetingen voor SignalRGB zijn 320px voor de breedte en 200px voor de hoogte.

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

<body>

<script>

Deze tag is waar de magie gebeurt. Er zijn drie basisonderdelen in dit script, samen met twee functies die als STANDAARD moeten worden beschouwd voor Lightscript-ontwikkelaars: update en window.requestAnimationFrame.

Variabele declaraties

Alle variabelen met scriptbereik moeten samen worden gedeclareerd om uw ontwikkelproces te vereenvoudigen. In de toekomst zullen dit ook meterdeclaraties omvatten, maar voor nu hebben we een eenvoudige selectie.

var c: Dit wordt gebruikt om de canvas-tag van eerder op te halen.
var ctx: De 2D-context van het canvas-element, het bewerkbare gebied voor uw effect.
hoogte, breedte en tint: Deze worden hier gedeclareerd om het proces te vereenvoudigen.

Initiële update-aanroep

Onderaan het codeblok verwijs ik naar window.requestAnimationFrame(update). “Update” is de naam van de functie die de animatiespecificaties afhandelt. De bijgewerkte toestand in elk frame creëert de illusie van beweging voor de kijkers.

De hier gebruikte methode is cruciaal: omdat elke bewerking in uw updatefunctie een kleine hoeveelheid tijd kost om uit te voeren, kan het direct aanroepen van update() een vertraging in de animaties veroorzaken. De eerste callback denkt bijvoorbeeld dat er 100ms zijn verstreken, de volgende 110ms, enzovoort.

Door window.requestAnimationFrame te gebruiken, wordt de huidige tijdstempel doorgegeven aan de callbackfunctie en de geneste callbacks, waardoor de toestand van de animatie behouden blijft ondanks kleine uitvoeringsonderbrekingen.

Kortom: gebruik de methode window.requestAnimationFrame(callback) om uw animatie bij te werken!

De updatefunctie

Deze functie is centraal in een werkende Lightscript en moet zo eenvoudig en gestroomlijnd mogelijk zijn, omdat het elk frame wordt uitgevoerd. Na de eerste scriptlading en functie-aanroep blijft update actief via zijn interne window.requestAnimationFrame-aanroep.

In dit voorbeeld voert elk frame vier hoofdbewerkingen uit:

Stel de canvas-vulstijl in met ctx.fillStyle. Dit kan een kleur, patroon of verloop zijn en blijft actief totdat het wordt overschreven door de volgende ctx.fillStyle-aanroep.
Maak een rechthoek (met de eerder ingestelde vulstijl) met ctx.fillRect(x, y, breedte, hoogte). In dit geval vertegenwoordigt de rechthoek het hele canvas.
Itereer de tint met snelheid, de gebruikersinvoervariabele in de header.
Bind tint aan het bereik 0-360 om te passen binnen de HSL (tint, verzadiging, helderheid)-standaard.

<script>
    // Variable Declarations -------------------------
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // Update function --------------------------------
    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; }
      // Re-call the function
      window.requestAnimationFrame(update);
    }

    // Initial update call ----------------------------
    window.requestAnimationFrame(update);
</script>

Dit algemene patroon (vulstijl instellen, vorm tekenen, variabelen bewerken) is de standaard voor canvas-animaties.

Als de kleur onjuist is, heeft u een stijlvulling gemist.
Als de vorm onjuist is, heeft u een vormvulling gemist.
Als er niets verandert in de tijd, heeft u uw variabelen niet bewerkt.

Voor meer details en probleemoplossingadvies, bekijk onze volgende pagina over HTML5 + JS.

<script>