Halloween Radio - Windows Phone

Door deathgrunt op dinsdag 07 oktober 2014 13:37 - Reacties (11)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 968

Whoehahahaahaaaaaa! Voor de liefhebber... lekker ruim op tijd, ook!

- update - om te voorkomen dat het off-topic / -site reclame is, heb ik maar het script toegevoegd; zo is het opeens wel Tweakers-waardig, qua content :p (behalve dat het brakke code is).

Behalve dit basisscript, maak ik gebruik van de volgende assets;
  • halloweenradio.net - audio-api, vier streams
  • moment.js - om de dagen tot halloween op client-niveau uit te rekenen
  • jQuery, duh...
  • jPlayer - native html5 audio stream, cross-platform
  • een simpele HTM / CSS pagina
  • een zooi XAML / C# (code behind) codes
  • een 3d-render van de Nokia telefoon, icm. loops van looperman.com
...
http://deathgrunt.com/img/tweak/apps/blog_halloween-radio.png
...
http://cdn.marketplaceimages.windowsphone.com/v8/images/1934e126-ead8-4824-a528-da03e2811b67?imageType=ws_icon_largeHalloween Radio

Halloween! Celebrate the darkest day of the year in panic fear for spirits and spooks.
...
...
JavaScript: script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
var streams     = new Array();

//////////////////////////////////////////////////////////////////////
// DEBUG
//////////////////////////////////////////////////////////////////////

function debug(debug)
    {
if(window.console)console.log('[debug] - '+debug);      
    }

//////////////////////////////////////////////////////////////////////
// CHECK IF INTERNET EXPLORER
//////////////////////////////////////////////////////////////////////

(function()
    {
var rv  = -1;
IE      = false
APP     = false;

// IE10 + WP
if (navigator.appName == 'Microsoft Internet Explorer' || navigator.userAgent.match(/IEMobile\/10\.0/))
    {
var ua  = navigator.userAgent;
var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)rv = parseFloat(RegExp.$1);
    }
// IE11
else if (navigator.appName == 'Netscape')
    {
var ua  = navigator.userAgent;
var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)rv = parseFloat(RegExp.$1);
    }
if(rv>0)IE = true;

IE?theDOM = 'html':theDOM = 'body';
navigator.userAgent.match(/phone/i)?APP = true:APP = false;
userString = navigator.userAgent + ' | ' + APP;
    })();

function appReady()
    {
window.external.notify('USER:'+userString);
    }

//////////////////////////////////////////////////////////////////////
// FUNCTIONS
//////////////////////////////////////////////////////////////////////

$(function()
    {
//////////////////////////////////////////////////////////////////////
// GET TIMER
//////////////////////////////////////////////////////////////////////

theYear     = moment().get('year');
theDate     = theYear+'-10-31';
theDay      = moment().format('YYYY MM DD');
daysLeft    = moment(theDate,'YYYY MM DD').diff(moment(theDay,'YYYY MM DD'),'days');

debug('date : '+theDate+' | left : '+daysLeft);

if(daysLeft < 0)
    {
theYear     += 1;
theDate     = theYear+'-10-31';
daysLeft    = moment(theDate,'YYYY MM DD').diff(moment(theDay,'YYYY MM DD'),'days');
debug('date : '+theDate+' | left : '+daysLeft);
    }

daysLeft == 1?multiple = '':multiple = 's';
if(daysLeft == 0){daysText = '- <strong>it\'s Halloween right now!</strong> -';}
else            {daysText = '- just <strong>'+daysLeft+'</strong> day'+multiple+' \'till Halloween -';}

$('#timer').html(daysText);

//////////////////////////////////////////////////////////////////////
// SETUP GUI
//////////////////////////////////////////////////////////////////////

setTimeout(function()
    {
$('#header span').css({'height':$('#header').height(),'padding-right':$('#header').height()*2});
$('button span').css({'padding-right':$('button span').height()});
$('button').css({'padding-left':$('button span').height()+15});

$('#header h1').animate({opacity:1},1000,function()
    {
if(APP){setTimeout("appReady()",500);}
    });
    },25);

//////////////////////////////////////////////////////////////////////
// BUTTONS
//////////////////////////////////////////////////////////////////////

setTimeout(function()
    {
$('button').css({visibility:'visible'}).addClass('bounceIn');
    },1750);

$('button').each(function(index)
    {
$(this).attr('title',streams[index]);
debug('fired #'+$(this).attr('title'));
    });

activeRadio = 'null';

$('button').on('click', function()
    {
$('#jquery_jplayer').jPlayer('stop');
$('button').removeClass();

    if(activeRadio != $(this).attr('title'))
        {
    if(APP){window.external.notify('PLAY:1');}
    $(this).addClass('loading');
    activeRadio = $(this).attr('title');
    $('#jquery_jplayer').jPlayer("clearMedia");
    debug('stream cleared');
    stream = {mp3 : activeRadio}
    $('#jquery_jplayer').jPlayer("setMedia",stream)
    debug('stream set : '+activeRadio);
    activeBut = $(this);
    setTimeout(function(){$(activeBut).removeClass().addClass('playing');},1750);
    setTimeout(function(){$('#jquery_jplayer').jPlayer('play')},750);

        }
    else
        {
    if(APP){window.external.notify('PLAY:0');}
    activeRadio = 'null';       
        }
    });

//////////////////////////////////////////////////////////////////////
// JPLAYER
//////////////////////////////////////////////////////////////////////

stream =
    {
title   : 'Halloween Radio',
mp3     : streams[2]
    },

ready   = false;

$('#jquery_jplayer').jPlayer(
    {
ready   : function (event)
    {
ready   = true;
$(this).jPlayer('setMedia', stream);
    },
pause   : function()
    {
$(this).jPlayer('clearMedia');
    },
error   : function(event)
    {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET)
    {
$(this).jPlayer('setMedia', stream).jPlayer('play');
    }
    },
supplied: 'mp3',
preload : 'none',
wmode   : 'window',
volume  : 1,
    });     
    
    });

deathgrunt - tweakers.net in nightmode...

Door deathgrunt op vrijdag 15 augustus 2014 19:47 - Reacties (11)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 2.676

Lol... tweakers.net in nightmodus! En dat met (letterlijk) één regeltje code...

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
window.wp_app_NightMode = function wp_app_nightMode()
    {
var wp_app_css = '*, #menubar, .scoreButton{background-image:none !important;background-color:#000 !important;color:#999 !important;border-color:#999 !important;}#menuwrapper{opacity: .75 !important;}::selection{background-color:#999 !important;color:#000 !important;}',
wp_app_head = document.head || document.getElementsByTagName('head')[0],
wp_app_style = document.createElement('style');
wp_app_style.type   = 'text/css';
wp_app_style.appendChild(document.createTextNode(wp_app_css));
wp_app_head.appendChild(wp_app_style);      
    }

wp_app_NightMode();


Door bovenstaande code in de console [F12] uit te voeren, of simpelweg de CSS-declaraties in je custom-CSS te zetten, wordt Tweakers vanzelf in nightmode gerenderd.

...

Het is nog in bèta, want Internet Explorer ondersteunt (als enige browser...) niet de CSS-tag "filter:gray(100)", dus afbeeldingen worden helaas nog niet in grayscale gerenderd...

En dat terwijl IE notabene de eerste browser ter wereld was (in 1995) die filters los kon laten op afbeeldingen. Maar sinds IE10 is Microsoft daar van afgestapt en aangezien het grayscale-filter nog niet is goedgekeurd door W3C zijn ze nu de enige die het laten afweten...

"-ms-filter" werkt niet meer in IE10 en IE11 en ik wil niet terugvallen op jQuery of vage SVG-hacks, dus de nightmode is work in progress, maar zeker met een amoled-screen werkt het nu al goed.

...


...

http://deathgrunt.com/img/tweak/apps/tweakers_wp_night_modus.png
- tweakers.net nightmodus op een (clear black) amoled screen -


http://deathgrunt.com/img/tweak/apps/tweakers_wp_night_modus_update.png
- tweakers.net nightmodus update (low contrast) -

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Al het nieuws van je favoriete site in één
oogopslag op je Windows Phone.

...

deathgrunt - acronymen (html) op een touch-device

Door deathgrunt op dinsdag 12 augustus 2014 13:37 - Reacties (2)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.146

Acroniemen (of beter abbr) in html zijn handig; het is (meestal) een afkorting van een definitie en herkenbaar door een stippellijn onder het woord zelf. Door er even met je muis over heen te bewegen, zie je waar de afkorting voor staat.

Een nadeel van deze 'hover-actie' is dat hij (meestal) niet werkt op touch-devices. Natuurlijk, een Windows-tablet als bijvoorbeeld de Dell Venue 8 Pro kan een 'hover-actie' simuleren (door je vinger iets langer op het scherm te drukken), maar echt cross-platform is dat niet.

Daarom heb ik een Javascriptje geschreven, dat van elke acroniem een interactief element maakt.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var acronymEl = document.getElementsByTagName('acronym');

if(acronymEl.length)
    {
for(var i = 0; i < acronymEl.length; i++)
    {
var acronymTxt = acronymEl[i];

  acronymTxt.onclick = function(e)
    {
  e.preventDefault();
  alert(e.target.innerText.toUpperCase() + ' : ' + e.target.getAttribute('title'));
    }

if(window.console){console.log('acronym fired : ' + acronymTxt.innerText.toUpperCase());}
    }
    }
else
    {
if(window.console){console.log('no acronyms found');}   
    }

Het script werkt eenvoudig; eerst kijkt het of er acroniemen op de pagina aanwezig zijn (de <abbr> tag sla ik in dit voorbeeld even over).

Als er daadwerkelijk acroniemen gevonden worden, dan wordt er een actie aan verbonden waarmee je (door er op te klikken) een alertbox te zien krijgt met daarin de afkorting zelf en de aangekoppelde definitie.

Door bovenstaande code uit te voeren in de console van je browser, zie je (als je deze pagina als voorbeeld neemt) direct of er een acroniem aanwezig is en dat hij vervolgens interactief wordt gemaakt.

...

Als eenmaal bekend is welke acroniemen er zijn en wat hun definitie is, dan kan je er mee doen wat je wilt. Een optie is om in de acronym-tag automatisch een <span> te injecteren, met daarin de volledige definitie. Via css kan je vervolgens zeggen dat die <span> onzichtbaar is, maar bij een ::focus juist zichtbaar. Door met je vinger op de acroniem te drukken, wordt de <span> dan zichtbaar en verdwijnt hij weer als je de focus er af haalt.

<reclame-modus>In mijn eigen Tweakers App heb ik het script gebruikt door er een c# code aan te hangen; door te drukken op een acroniem, trigger je een request naar de app. Die vangt het request af, kijkt wat hij moet doen en toont via een customMessageBox() de definitie van het acroniem.</reclame-modus>

Onderstaande screenshots tonen hoe het in zijn werk gaat; stel je zoekt via de Meuktracker (ja, in de app is die er gewoon nog) naar het programma Wine. Dan kom je via de zoekoptie op de changelog van dat programma terecht en zie je het acroniem API staan. Door er op te drukken, zie je een nette uitleg waar het begrip voor staat.

acroniemen
...

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Al het nieuws van je favoriete site in één
oogopslag op je Windows Phone.

...

deathgrunt - iWatch ... 1986

Door deathgrunt op maandag 04 augustus 2014 13:37 - Reacties (5)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.555

Lol... voordat Apple weer begint te roepen dat hun iWatch / iHealth app revolutionair en amazing is (voorzien van een witte achtergrond en foute klassieke piano-muziek)...

Chriet had hem al in 1986 (even skippen naar minuut 1:21 - omdat de embed-tag van 81 seconden hier niet werkt, blijkbaar...).


...
Vraag ik me ineens af; zal Amber geslaagd zijn voor haar tentamen? Haar iWatch sloeg zwart uit...
...

deathgrunt - interfierce [WP]

Door deathgrunt op maandag 21 juli 2014 16:42 - Reacties (2)
Categorie: illustraties, cartoons en tekeningen (ICT), Views: 1.241

Soms maak je een app, waarvan je later denkt... "wáárom?!" Dit is er zo één...
...
http://deathgrunt.com/img/tweak/apps/blog_interfierce.png
...
http://cdn.marketplaceimages.windowsphone.com/v8/images/b3eaf099-a2ab-4efd-a19d-50fc3f431d14?imageType=ws_icon_largeinterfierce

Generate some phone interference sounds.
...
...

...en als ik dan toch aan het pluggen ben...

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/d59c15cd-487a-41c0-8e99-6c2d35c164e7?imageType=ws_icon_largeThe Alphab@

26 (typo-)graphical animations, teaching you the internet... made in 1997.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/fa6c2c3c-e0cb-4f7a-a096-517ac7d578bc?imageType=ws_icon_largeThe Kardashian Tape

View the secret Kardashian tape and share it with all your friends!

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/64955b55-c4a8-4adb-a767-7f083d442a20?imageType=ws_icon_large2IBAN

Zet een regulier rekeningnummer om naar IBAN.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/db5c6a9b-41f6-4774-893d-20675dc49869?imageType=ws_icon_largePurno de Purno

Sapperedosio!
De allereerste Purno De Purno app ter wereld, exclusief op je Windows Phone!

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/058f76c6-60dd-43cb-9f39-576cec792f4a?imageType=ws_icon_largeTweakers WP

Al het nieuws van je favoriete site in één oogopslag op je Windows Phone.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/2f17d5f4-3922-4a17-bbbd-d2f5d149029a?imageType=ws_icon_largeNU | Tech

Het actuele en belangrijkste tech nieuws van NU.nl direct op je Windows Phone.

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/abc37fb2-ba90-411a-9007-c2a7bd87c9f4?imageType=ws_icon_largeSuriname Nieuws

Het belangrijkste nieuws uit- en over Suriname in één oogopslag op je Windows Phone

...

http://cdn.marketplaceimages.windowsphone.com/v8/images/5df29e17-913e-45bd-b5ac-410076e88adb?imageType=ws_icon_largeYUIS?! (discontinued...)

A trusted and elegant designed WHOIS look-up tool. See - and share - the most important site information.

...