Difference between revisions of "Widget:Logo"

From Hackerspace ACKspace
Jump to: navigation, search
m (added date info (winter and holiday mode))
m (removed 5 year anniversary (and confetti), made code a bit smaller)
Line 67: Line 67:
 
     var nToggle = 0;
 
     var nToggle = 0;
 
     var treeLights = [
 
     var treeLights = [
         { "x" :  84, "y": 16, "color" : "red",    "on" : false },
+
         { x:  84, y: 16, c: "red",    on: false },
         { "x" : 101, "y": 40, "color" : "orange", "on" : false },
+
         { x: 101, y: 40, c: "orange", on: false },
         { "x" :  87, "y": 60, "color" : "pink",  "on" : false },
+
         { x:  87, y: 60, c: "pink",  on: false },
         { "x" :  64, "y": 79, "color" : "#36f",  "on" : false },
+
         { x:  64, y: 79, c: "#36f",  on: false },
         { "x" : 119, "y": 91, "color" : "yellow", "on" : false }
+
         { x: 119, y: 91, c: "yellow", on: false }
 
     ];
 
     ];
  
Line 83: Line 83:
  
 
         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" : getRndColor() } );
+
             snowFlakes.push( { x: ( Math.random( ) * width ) | 0, y: 0, c: "#fff" } );
 
         oldTimestamp = _timestamp;
 
         oldTimestamp = _timestamp;
  
Line 114: Line 114:
  
 
                     // Generate new flake
 
                     // Generate new flake
                     flake = { "x" : ( Math.random( ) * width ) | 0, "y" : 0, "c" : getRndColor() };
+
                     flake = { x: ( Math.random( ) * width ) | 0, y: 0, c: "#fff" };
 
                 }
 
                 }
  
Line 156: Line 156:
 
                 ctx.stroke();
 
                 ctx.stroke();
 
             }
 
             }
 
            ctx.save();
 
            ctx.translate( 307, 110 + offsetY );
 
            ctx.rotate( -0.1 );
 
 
            // Draw a glowing red '5'
 
            ctx.fillStyle = "red";
 
            ctx.font = "bold 65px sans-serif";
 
            ctx.lineWidth = 1;
 
            ctx.fillText( "5", 0, 0 );
 
            ctx.strokeText( "5", 0, 0 );
 
            ctx.textBaseline = "bottom";
 
 
            ctx.restore();
 
  
 
             // Draw all tree lights overlay: either on or off
 
             // Draw all tree lights overlay: either on or off
Line 204: Line 190:
 
     function drawTreeLight( _treeLight, _glow )
 
     function drawTreeLight( _treeLight, _glow )
 
     {
 
     {
         ctx.strokeStyle = ctx.shadowColor = _treeLight.color;
+
         ctx.strokeStyle = ctx.shadowColor = _treeLight.c;
  
 
         if ( !_glow )
 
         if ( !_glow )
Line 291: Line 277:
 
             return null;
 
             return null;
  
         var newFlake = { "x" : _flake.x + _x, "y" : _flake.y + _y, "c" : _flake.c };
+
         var newFlake = { x: _flake.x + _x, y: _flake.y + _y, c: _flake.c };
  
 
         // Check the alpha channel (apparently, our logo has opacity < 250)
 
         // Check the alpha channel (apparently, our logo has opacity < 250)

Revision as of 12:39, 7 November 2016

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.