Difference between revisions of "Widget:Logo"
m (silly typo fixed) |
m (now ''really'' centered it) |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 28: | Line 28: | ||
*: 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'' | *: 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.) | * 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 149: | Line 157: | ||
// Draw the glowing ACK bit | // Draw the glowing ACK bit | ||
| − | ctx.strokeStyle = ctx.shadowColor = ' | + | 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 156: | Line 165: | ||
{ | { | ||
ctx.beginPath(); | ctx.beginPath(); | ||
| − | ctx.rect( | + | ctx.rect( 287, 88 + offsetY, 8, 7 ); |
ctx.stroke(); | ctx.stroke(); | ||
} | } | ||
| Line 210: | 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 ); | ||
| Line 406: | Line 415: | ||
} | } | ||
| − | if ( !e.detail | + | if ( !e.detail || !e.detail.length ) |
return; | return; | ||
var d = e.detail; | var d = e.detail; | ||
var l = d.length; | var l = d.length; | ||
var m = treeLights.length; | var m = treeLights.length; | ||
| + | var o = 74; | ||
for ( var n=0; n < m; ++n ) | for ( var n=0; n < m; ++n ) | ||
{ | { | ||
| − | treeLights[n].c = d.slice(3*n,3+3*n); | + | treeLights[n].c = d.slice(3*(n+o),3+3*(n+o)); |
| + | treeLights[n].on = true; | ||
} | } | ||
| − | m * | + | m = (m+o)*3; |
if ( l > m ) | if ( l > m ) | ||
ackbit = d.slice(m,m+=3); | ackbit = d.slice(m,m+=3); | ||
Latest revision as of 14: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:
- FlutLogo app connector extension.crx: the extension that listens to the UDP connector app and drives the logo "LEDs" (source available, but it needs a static ID for the connector app)
- FlutLogo UDP connector app the app that listens to UDP ART-net packets and connects to the browser extension
- 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 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.
