Difference between revisions of "Widget:Logo"

From Hackerspace ACKspace
Jump to: navigation, search
m (testing globalCompositeOperation)
m (now ''really'' centered it)
 
(51 intermediate revisions by the same user not shown)
Line 8: Line 8:
  
 
  <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 
  <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
−
|image=https://ackspace.nl/w/images/e/e9/ACKsmass_logo.png
+
|image=/w/images/e/e9/ACKsmass_logo.png
 
|width=600px
 
|width=600px
 
|height=200px
 
|height=200px
Line 17: Line 17:
 
This will give the following result:<br/>
 
This will give the following result:<br/>
 
{{#widget:{{PAGENAME}}
 
{{#widget:{{PAGENAME}}
−
|image=https://ackspace.nl/w/images/e/e9/ACKsmass_logo.png
+
|image=/w/images/e/e9/ACKsmass_logo.png
 
|width=600px
 
|width=600px
 
|height=200px
 
|height=200px
Line 23: Line 23:
 
|float=right
 
|float=right
 
}}<br/>
 
}}<br/>
−
Note that '''image''' is mandatory, the rest is optional. Also, you must provide a unit for the sizes (i.e. px, %, etc.)
+
'''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.)
 +
 
 +
Also note that there is a chain of browser extensions and apps within the [[GitHub::https://github.com/ACKspace/espixelflut|espixelflut github repo]]:
 +
* [https://github.com/ACKspace/espixelflut/blob/master/chrome/FlutLogo%20app%20connector%20extension.crx FlutLogo app connector extension.crx]: the extension that listens to the UDP connector app and drives the logo "LEDs" ([https://github.com/ACKspace/espixelflut/tree/master/chrome/FlutLogo%20app%20connector%20extension source available], but it needs a static ID for the connector app)
 +
* [https://github.com/ACKspace/espixelflut/tree/master/chrome/FlutLogo%20UDP%20connector%20app FlutLogo UDP connector app] the app that listens to UDP ART-net packets and connects to the browser extension
 +
* [https://github.com/ACKspace/espixelflut/tree/master/chrome/FlutArt FlutArt]: an ART-net app that can be used to control lights (which also works on the browser extension)
 +
 
 +
Note that if you want to use the [[LED sleeve]] [[GitHub::https://github.com/AlbertVos/bitlair-ohm2013-ledstrip-contol|python code from bitlair]], you have to provide a different listening port to avoid conflicts, like this:
 +
<code>./fire2.py port=0 addr='[("127.0.0.1",6454)]'</code>
  
 
== Copy to your site ==
 
== Copy to your site ==
Line 29: Line 41:
  
 
</noinclude><includeonly>
 
</noinclude><includeonly>
−
<canvas id="logo" width="<!--{$width|escape:html|default:auto}-->" height="<!--{$height|escape:html|default:auto}-->" style="float:<!--{$float|escape:html|default:none}-->"><img id="img" src="<!--{$image|validate:url}-->"/></canvas>
+
<canvas id="logo" width="<!--{$width|escape:html|default:auto}-->" height="<!--{$height|escape:html|default:auto}-->" style="float:<!--{$float|escape:html|default:none}-->"><img id="img" src="<!--{$image|escape:urlpathinfo}-->"/></canvas>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
(function( )
 
(function( )
Line 35: Line 47:
 
     "use strict";
 
     "use strict";
  
 +
    var timer = null;
 
     var start = null;
 
     var start = null;
 
     var oldTimestamp = null;
 
     var oldTimestamp = null;
Line 63: Line 76:
 
     var nToggle = 0;
 
     var nToggle = 0;
 
     var treeLights = [
 
     var treeLights = [
−
         { "x" :  84, "y": 16, "color" : "red",   "on" : false },
+
         { x:  84, y: 16, c: [0xff,0x00,0x00], on: false },
−
         { "x" : 101, "y": 40, "color" : "orange", "on" : false },
+
         { x: 101, y: 40, c: [0xff,0xa5,0x00], on: false },
−
         { "x" :  87, "y": 60, "color" : "pink",   "on" : false },
+
         { x:  87, y: 60, c: [0xff,0xc0,0xcb], on: false },
−
         { "x" :  64, "y": 79, "color" : "#36f",   "on" : false },
+
         { x:  64, y: 79, c: [0x33,0x66,0xff], on: false },
−
         { "x" : 119, "y": 91, "color" : "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 79: Line 94:
  
 
         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 } );
+
             snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c:snow.slice() } );
 
         oldTimestamp = _timestamp;
 
         oldTimestamp = _timestamp;
  
Line 100: Line 115:
 
                 // Calculate the new position of the flake.
 
                 // Calculate the new position of the flake.
 
                 // If it can't move anywhere down (3 positions): fixate it in the dynamic image and reset the flake
 
                 // If it can't move anywhere down (3 positions): fixate it in the dynamic image and reset the flake
−
                 if ( debug ? ( !updateFlakeCanvas( flake, bufferContext ) ) : ( !updateFlake( flake, dynamicImage ) ) )
+
                 if ( !updateFlake( flake, dynamicImage ) )
 
                 {
 
                 {
 
                     // Fixate flake
 
                     // Fixate flake
−
                     if ( debug )
+
                     pixelPos = ( flake.x + width * flake.y ) * 4;
−
                    {
+
                    dynamicImage.data[ pixelPos + 0 ] = flake.c[0];
−
                        bufferContext.fillRect( flake.x, flake.y, 1, 1 );
+
                    dynamicImage.data[ pixelPos + 1 ] = flake.c[1];
−
                    }
+
                    dynamicImage.data[ pixelPos + 2 ] = flake.c[2];
−
                    else
+
                    dynamicImage.data[ pixelPos + 3 ] = 254;
−
                    {
 
−
                        pixelPos = ( flake.x + width * flake.y ) * 4;
 
−
                        dynamicImage.data[ pixelPos + 0 ] = 255;
 
−
                        dynamicImage.data[ pixelPos + 1 ] = 255;
 
−
                        dynamicImage.data[ pixelPos + 2 ] = 255;
 
−
                        dynamicImage.data[ pixelPos + 3 ] = 255;
 
−
                    }
 
  
 
                     // Generate new flake
 
                     // Generate new flake
−
                     flake = { "x" : ( Math.random( ) * width ) | 0, "y" : 0 };
+
                     flake = { x: ( Math.random( ) * width ) | 0, y: 0, c:snow.slice() };
 
                 }
 
                 }
  
Line 123: Line 131:
 
                 snowFlakes[ nFlake ] = flake;
 
                 snowFlakes[ nFlake ] = flake;
  
−
                // Draw the dynamic image
 
−
                if ( debug )
 
−
                    ctx.drawImage( buffer, 0, 0 );
 
−
                else
 
−
                    ctx.putImageData( dynamicImage, 0, 0 );
 
 
             }
 
             }
 +
 +
            // Clear the current frame
 +
 +
            // Draw the dynamic image
 +
            ctx.putImageData( dynamicImage, 0, 0 );
  
 
             // Draw all flakes
 
             // Draw all flakes
Line 137: Line 145:
 
             {
 
             {
 
                 flake = snowFlakes[ nFlake ];
 
                 flake = snowFlakes[ nFlake ];
 +
                ctx.fillStyle = 'rgb(' + flake.c[0] + ',' + flake.c[1] + ',' + flake.c[2] + ')';
 
                 ctx.fillRect( flake.x, flake.y, 1, 1 );
 
                 ctx.fillRect( flake.x, flake.y, 1, 1 );
 
             }
 
             }
Line 148: Line 157:
  
 
             // Draw the glowing ACK bit
 
             // Draw the glowing ACK bit
−
             ctx.strokeStyle = ctx.shadowColor = 'red';
+
             ctx.strokeStyle = 'rgb(' + ackbit[0] + ',' + ackbit[1] + ',' + ackbit[2] + ')';
 +
            ctx.shadowColor = 'rgba(' + ackbit[0] + ',' + ackbit[1] + ',' + ackbit[2] + ',' + (0.00130 * ackbit[0] + 0.00196 * ackbit[1] + 0.00063 * ackbit[2]) + ')';
 
             ctx.globalAlpha = 1;
 
             ctx.globalAlpha = 1;
 
             ctx.lineWidth = 10;
 
             ctx.lineWidth = 10;
Line 155: Line 165:
 
             {
 
             {
 
                 ctx.beginPath();
 
                 ctx.beginPath();
−
                 ctx.rect( 292, 92 + offsetY, 1, 1 );
+
                 ctx.rect( 287, 88 + offsetY, 8, 7 );
 
                 ctx.stroke();
 
                 ctx.stroke();
 
             }
 
             }
Line 170: Line 180:
  
 
         window.requestAnimationFrame( snowFall );
 
         window.requestAnimationFrame( snowFall );
 +
    }
 +
 +
    function getRndColor()
 +
    {
 +
        // Thanks to Adafruit's NeoPixel lib
 +
        var wheelPos = Math.random() * 255 | 0;
 +
        if( wheelPos < 85 )
 +
        {
 +
            return [ (255 - wheelPos * 2), 85, (85 + wheelPos * 2) ];
 +
        }
 +
 +
        if( wheelPos < 170 )
 +
        {
 +
            wheelPos -= 85;
 +
            return [ 85, (85 + wheelPos * 2), (255 - wheelPos * 2) ];
 +
        }
 +
        wheelPos -= 170;
 +
        return [ (85 + wheelPos * 2), (255 - wheelPos * 2), 85 ];
 
     }
 
     }
  
 
     function drawTreeLight( _treeLight, _glow )
 
     function drawTreeLight( _treeLight, _glow )
 
     {
 
     {
−
         ctx.strokeStyle = ctx.shadowColor = _treeLight.color;
+
         ctx.strokeStyle = ctx.shadowColor = 'rgb(' + _treeLight.c[0] + ',' + _treeLight.c[1] + ',' + _treeLight.c[2] + ')';
  
 
         if ( !_glow )
 
         if ( !_glow )
Line 191: Line 219:
 
             for ( var n = 0; n < 20; n++ )
 
             for ( var n = 0; n < 20; n++ )
 
             {
 
             {
−
                 ctx.globalAlpha = n / 30;
+
                 ctx.globalAlpha = (n / 30) * (0.00130 * _treeLight.c[0] + 0.00196 * _treeLight.c[1] + 0.00063 * _treeLight.c[2]);              
 
                 ctx.beginPath();
 
                 ctx.beginPath();
 
                 ctx.arc( _treeLight.x, _treeLight.y + offsetY, 22 - n, 0, 2 * Math.PI );
 
                 ctx.arc( _treeLight.x, _treeLight.y + offsetY, 22 - n, 0, 2 * Math.PI );
 
                 ctx.stroke();
 
                 ctx.stroke();
 
             }
 
             }
 +
            ctx.globalAlpha = 1;
 
         }
 
         }
 
         else
 
         else
Line 224: Line 253:
 
         }
 
         }
  
−
        // No possibilities means, no update: will fixate this flake
 
 
         if ( !possibilities.length )
 
         if ( !possibilities.length )
−
            return false;
+
         {
−
 
+
            newFlake = tryCreateFlake( _flake, -2, 1, _dynamicImage );
−
         // Pick a flake
+
            if ( newFlake )
−
        var newFlake = possibilities[ ( Math.random( ) * possibilities.length ) | 0 ];
+
                possibilities.push( newFlake );
−
        _flake.x = newFlake.x;
 
−
        _flake.y = newFlake.y;
 
−
 
 
−
        // Flake updated
 
−
        return true;
 
−
    }
 
  
−
    function tryCreateFlake( _flake, _x, _y, _dynamicImage )
+
             newFlake = tryCreateFlake( _flake, 2, 1, _dynamicImage );
−
    {
 
−
        // Don't create flake if we're off the bottom of the screen
 
−
        if ( ( _flake.y + _y ) >= height )
 
−
             return null;
 
−
 
 
−
        // Don't allow to go off the sides of the screen
 
−
        if ( ( _flake.x + _x ) < 0 )
 
−
            return null;
 
−
 
 
−
        if ( ( _flake.x + _x ) >= width )
 
−
            return null;
 
−
 
 
−
        var newFlake = { "x" : _flake.x + _x, "y" : _flake.y + _y };
 
−
 
 
−
        // Check the alpha channel (apparently, our logo has opacity < 250)
 
−
        if ( _dynamicImage.data[ ( newFlake.x + width * newFlake.y ) * 4 + 3 ] > 220 )
 
−
            return null;
 
−
 
 
−
        // All test cases valid, return the resulting flake
 
−
        return newFlake;
 
−
    }
 
−
 
 
−
    function updateFlakeCanvas( _flake, _bufferContext )
 
−
    {
 
−
        var newFlake;
 
−
 
 
−
        // Check each next possible 'y' pixel, and add it to the list of possibilities
 
−
        var possibilities = [];
 
−
 
 
−
        // Try three flake possibilities
 
−
        for ( var n = -1; n <= 1; n++ )
 
−
        {
 
−
            newFlake = tryCreateFlakeCanvas( _flake, n, 1, _bufferContext );
 
 
             if ( newFlake )
 
             if ( newFlake )
 
                 possibilities.push( newFlake );
 
                 possibilities.push( newFlake );
Line 288: Line 277:
 
     }
 
     }
  
−
     function tryCreateFlakeCanvas( _flake, _x, _y, _bufferContext )
+
     function tryCreateFlake( _flake, _x, _y, _dynamicImage )
 
     {
 
     {
 
         // Don't create flake if we're off the bottom of the screen
 
         // Don't create flake if we're off the bottom of the screen
Line 301: Line 290:
 
             return null;
 
             return null;
  
−
         var newFlake = { "x" : _flake.x + _x, "y" : _flake.y + _y };
+
        if ( debug )
 +
        {
 +
            // Make sure we're not colliding with other flakes
 +
            for ( var nFlake = 0; nFlake < snowFlakes.length; ++nFlake )
 +
            {
 +
                var f = snowFlakes[ nFlake ];
 +
                if ( f.x === _x && f.y === _y )
 +
                    return null;
 +
            }
 +
        }
 +
 
 +
         var newFlake = { x: _flake.x + _x, y: _flake.y + _y, c: _flake.c };
  
−
        var rgba = _bufferContext.getImageData( newFlake.x, newFlake.y, 1, 1 ).data;
 
 
         // Check the alpha channel (apparently, our logo has opacity < 250)
 
         // Check the alpha channel (apparently, our logo has opacity < 250)
−
         if ( rgba[ 3 ] > 220 )
+
         if ( _dynamicImage.data[ ( newFlake.x + width * newFlake.y ) * 4 + 3 ] > 220 )
 
             return null;
 
             return null;
  
Line 324: Line 323:
 
     function window_load()
 
     function window_load()
 
     {
 
     {
−
        if ( debug )
 
−
        {
 
−
            console && console.log( "winter:", is_winter() );
 
−
            console && console.log( "winter holiday:", is_winter_holiday() );
 
−
        }
 
−
 
 
         var logo = document.getElementById( "logo" );
 
         var logo = document.getElementById( "logo" );
 
         ctx = logo.getContext("2d");
 
         ctx = logo.getContext("2d");
Line 337: Line 330:
 
         buffer.height = logo.height;
 
         buffer.height = logo.height;
 
         bufferContext = buffer.getContext('2d');
 
         bufferContext = buffer.getContext('2d');
−
 
−
        if ( debug )
 
−
        {
 
−
            //ctx.globalCompositeOperation = "copy";
 
−
            bufferContext.globalCompositeOperation = "copy";
 
−
        }
 
  
 
         var img = document.getElementById("img");
 
         var img = document.getElementById("img");
Line 354: Line 341:
 
         height = logo.height;
 
         height = logo.height;
 
         dynamicImage = ctx.getImageData( 0, 0, width, height );
 
         dynamicImage = ctx.getImageData( 0, 0, width, height );
 +
        if ( debug )
 +
        {
 +
            console && console.log( "winter:", is_winter() );
 +
            console && console.log( "winter holiday:", is_winter_holiday() );
 +
            window.snowBump = function( _n )
 +
            {
 +
                for (;--_n;)
 +
                    snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c:[255,255,255] } );
 +
            };
 +
 +
            logo.addEventListener( "touchdown", function(e){ e.preventDefault(); e.stopPropagation(); }, { passive: false });
 +
            logo.addEventListener( "touchmove", function(e){ e.preventDefault(); e.stopPropagation(); }, { passive: false });
 +
            logo.addEventListener( "mousemove", function( _event )
 +
            {
 +
                if ( _event.buttons !== 1 || _event.which !== 1 )
 +
                    return;
 +
 +
                if ( window.x === null )
 +
                {
 +
                    window.x = _event.offsetX;
 +
                    window.y = _event.offsetY;
 +
                }
 +
 +
                // horizontal?
 +
                if ( Math.abs(window.x - _event.offsetX) > Math.abs(window.y - _event.offsetY) )
 +
                {
 +
                    var yInc = (_event.offsetY - window.y) / Math.abs(window.x - _event.offsetX);
 +
                    for ( ; window.x !== _event.offsetX; window.x += (_event.offsetX > window.x ? 1 : -1) )
 +
                    {
 +
                        window.y += yInc;
 +
                        drawSnow( window.x, Math.round( window.y ) )
 +
                    }
 +
                    window.y = Math.round( window.y );
 +
                }
 +
                else
 +
                {
 +
                    var xInc = (_event.offsetX - window.x) / Math.abs(window.y - _event.offsetY);
 +
                    for ( ; window.y !== _event.offsetY; window.y += (_event.offsetY > window.y ? 1 : -1) )
 +
                    {
 +
                        window.x += xInc;
 +
                        drawSnow( Math.round( window.x ), window.y )
 +
                    }
 +
                    window.x = Math.round( window.x );
 +
                }
 +
            }, false );
 +
        }
 +
 
         if ( is_winter() )
 
         if ( is_winter() )
 
         {
 
         {
 
             window.requestAnimationFrame( snowFall );
 
             window.requestAnimationFrame( snowFall );
−
             setInterval( blink, 1500 );
+
             timer = setInterval( blink, 1500 );
 +
        }
 +
    }
 +
 
 +
    function drawSnow( _x, _y )
 +
    {
 +
        if ( dynamicImage.data[ ( _x + width * _y ) * 4 + 0 ] === 255
 +
          && dynamicImage.data[ ( _x + width * _y ) * 4 + 1 ] === 255
 +
          && dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] === 255
 +
          && dynamicImage.data[ ( _x + width * _y ) * 4 + 3 ] === 254 )
 +
        {
 +
            dynamicImage.data[ ( _x + width * _y ) * 4 + 2 ] = 0;
 +
            dynamicImage.data[ ( _x + width * _y ) * 4 + 3 ] = 220;
 
         }
 
         }
 
     }
 
     }
 +
 +
    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;
 +
        var o = 74;
 +
        for ( var n=0; n < m; ++n )
 +
        {
 +
            treeLights[n].c = d.slice(3*(n+o),3+3*(n+o));
 +
            treeLights[n].on = true;
 +
        }
 +
        m = (m+o)*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 );
 +
    window.x = window.y = null;
 
}( ));
 
}( ));
 
</script>
 
</script>
 
</includeonly>
 
</includeonly>

Latest revision as of 13:24, 28 November 2021

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

Also note that there is a chain of browser extensions and apps within the espixelflut github repo:

Note that if you want to use the LED sleeve python code from bitlair, you have to provide a different listening port to avoid conflicts, like this: ./fire2.py port=0 addr='[("127.0.0.1",6454)]'

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=9056"