Difference between revisions of "Widget:Logo"

From Hackerspace ACKspace
Jump to: navigation, search
m (add `snowBump(n)`)
(normalized colors)
Line 39: Line 39:
 
     "use strict";
 
     "use strict";
  
 +
    var timer = null;
 
     var start = null;
 
     var start = null;
 
     var oldTimestamp = null;
 
     var oldTimestamp = null;
Line 67: Line 68:
 
     var nToggle = 0;
 
     var nToggle = 0;
 
     var treeLights = [
 
     var treeLights = [
−
         { x:  84, y: 16, c: "red",   on: false },
+
         { x:  84, y: 16, c: [0xff,0x00,0x00], on: false },
−
         { x: 101, y: 40, c: "orange", on: false },
+
         { x: 101, y: 40, c: [0xff,0xa5,0x00], on: false },
−
         { x:  87, y: 60, c: "pink",   on: false },
+
         { x:  87, y: 60, c: [0xff,0xc0,0xcb], on: false },
−
         { x:  64, y: 79, c: "#36f",   on: false },
+
         { x:  64, y: 79, c: [0x33,0x66,0xff], on: false },
−
         { x: 119, y: 91, c: "yellow", on: false }
+
         { x: 119, y: 91, c: [0xff,0xff,0x00], on: false }
 
     ];
 
     ];
 +
    var snow = [255,255,255];
 +
    var ackbit = [255,0,0];
  
 
     var oldTimestamp = null;
 
     var oldTimestamp = null;
Line 83: Line 86:
  
 
         if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) )
 
         if ( ( progress / 500 ) > snowFlakes.length && ( _timestamp - oldTimestamp < 50 ) )
−
             snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c:[255,255,255] } );
+
             snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c:snow.slice() } );
 
         oldTimestamp = _timestamp;
 
         oldTimestamp = _timestamp;
  
Line 111: Line 114:
 
                     dynamicImage.data[ pixelPos + 1 ] = flake.c[1];
 
                     dynamicImage.data[ pixelPos + 1 ] = flake.c[1];
 
                     dynamicImage.data[ pixelPos + 2 ] = flake.c[2];
 
                     dynamicImage.data[ pixelPos + 2 ] = flake.c[2];
−
                     dynamicImage.data[ pixelPos + 3 ] = 255;
+
                     dynamicImage.data[ pixelPos + 3 ] = 254;
  
 
                     // Generate new flake
 
                     // Generate new flake
−
                     flake = { x: ( Math.random( ) * width ) | 0, y: 0, c:[255,255,255] };
+
                     flake = { x: ( Math.random( ) * width ) | 0, y: 0, c:snow.slice() };
 
                 }
 
                 }
  
Line 146: Line 149:
  
 
             // Draw the glowing ACK bit
 
             // Draw the glowing ACK bit
−
             ctx.strokeStyle = ctx.shadowColor = 'red';
+
             ctx.strokeStyle = ctx.shadowColor = 'rgb(' + ackbit.c[0] + ',' + ackbit.c[1] + ',' + ackbit.c[2] + ')';
 
             ctx.globalAlpha = 1;
 
             ctx.globalAlpha = 1;
 
             ctx.lineWidth = 10;
 
             ctx.lineWidth = 10;
Line 190: Line 193:
 
     function drawTreeLight( _treeLight, _glow )
 
     function drawTreeLight( _treeLight, _glow )
 
     {
 
     {
−
         ctx.strokeStyle = ctx.shadowColor = _treeLight.c;
+
         ctx.strokeStyle = ctx.shadowColor = 'rgb(' + _treeLight.c[0] + ',' + _treeLight.c[1] + ',' + _treeLight.c[2] + ')';
  
 
         if ( !_glow )
 
         if ( !_glow )
Line 379: Line 382:
 
         {
 
         {
 
             window.requestAnimationFrame( snowFall );
 
             window.requestAnimationFrame( snowFall );
−
             setInterval( blink, 1500 );
+
             timer = setInterval( blink, 1500 );
 
         }
 
         }
 
     }
 
     }
Line 388: Line 391:
 
           && dynamicImage.data[ ( _x + width * _y ) * 4 + 1 ] === 255
 
           && dynamicImage.data[ ( _x + width * _y ) * 4 + 1 ] === 255
 
           && dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] === 255
 
           && dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] === 255
−
           && dynamicImage.data[ ( _x + width * _y ) * 4 + 3 ] === 255 )
+
           && dynamicImage.data[ ( _x + width * _y ) * 4 + 3 ] === 254 )
 
         {
 
         {
 
             dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] = 0;
 
             dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] = 0;
Line 394: Line 397:
 
         }
 
         }
 
     }
 
     }
 +
 +
    document.addEventListener("data", function( e )
 +
    {
 +
        if ( timer )
 +
        {
 +
            clearInterval( timer );
 +
            timer = null;
 +
        }
 +
 +
        if ( !e.detail && !e.detail.length )
 +
          return;
 +
        var d = e.detail;
 +
        var l = d.length;
 +
        var m = treeLights.length;
 +
        for ( var n=0; n < m; ++n )
 +
        {
 +
            treeLights[n].c = d.slice(3*n,3+3*n);
 +
        }
 +
        m *= 3;
 +
        if ( l > m )
 +
            ackbit = d.slice(m,m+=3);
 +
        if ( debug && l == 255 )
 +
            snow = d.slice(252,255);
 +
    });
  
 
     window.addEventListener( "load", window_load, false );
 
     window.addEventListener( "load", window_load, false );

Revision as of 10:34, 12 December 2019

This widget creates an animated themed ACKspace logo.

Created by xopr

Using this widget

To insert this widget, use the following code: 

{{#widget:Logo
|image=/w/images/e/e9/ACKsmass_logo.png
|width=600px
|height=200px
|padding=8px
|float=right
}}

This will give the following result:

Notes

  • it will display snow in December - March and will show Christmas lights between 7 December and 7 January
  • image is mandatory, the rest is optional.
    it also must be written without protocol since colon (:) is not allowed, and may be relative, for example: //ackspace.nl/w/images/e/e9/ACKsmass_logo.png or /w/images/e/e9/ACKsmass_logo.png
  • You must provide a unit for the sizes (i.e. px, %, etc.)

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:Logo article.


Retrieved from "https://ackspace.nl/w/index.php?title=Widget:Logo&oldid=8623"