Passa ai contenuti principali

Facciamo lampeggiale l’overlay icon di IE9

IE9 introduce il concetto di “pinned site” (post) con il quale gli sviluppatori possono far sembrare le proprie web application delle applicazioni desktop.

Il fatto che un sito sia “pinnabile” è fornito “di serie” con IE9 cioè qualsiasi sito è agganciabile alla task bar di Windows.

Oltre a questa funzionalità, abbiamo modo di interagire, in un certo qual modo, con l’icona presente nella task bar di Windows grazie a dei metodi Javascript della classe window.external.

In particolare il metodo msSiteModeSetIconOverlay permette di visualizzare una overlay icon (cioè una iconetta in sovraimpressione) sull’icona del sito posizionata nella task bar. Questo ci permette di attrarre l’attenzione dei nostri utenti per segnalare l’accadimento di qualcosa.

L’istruzione:

  1. window.external.msSiteModeSetIconOverlay('/images/red.ico', 'Icona in sovraimpressione!!');

ci permette di visualizzare, al di sopra dell’icona del nostro sito “pinned”, l’icona red.ico.

L’istruzione ha l’effetto desiderato se la pagina da cui è stata invocata è stata aperta utilizzando l’icona della task bar e le icone della task bar siano nel formato “grande”.

In caso positivo otteniamo una cosa del genere:

image

Possiamo utilizzare qualsiasi formato di icona poichè ci pensa IE9 ad ridimensionare opportunamente l’icona da noi utilizzata.

Inoltre possiamo utilizzare il metodo più volte ottenendo sovraimpressioni multiple.

Infine, possimao rimuovere l’icona (o le icone) visualizzate utilizzando il metodo msSiteModeClearIconOverlay. Questo metodo, a prescindere da quante icone abbiamo visualizzato, riporta la situazione alla sola visualizzazione dell’icona del sito (la favicon.ico, tanto per intenderci).

L’idea che può venirci in mente è quella di far lampeggiare l’icona utilizzando alternativamente i due comandi e l’istruzione Javascript  setInterval per ripetere il tutto un certo numero di volte:

  1. function blinkOverlayIcon(numberOfBlinks, blinkInterval, icona) {
  2.     if (window.external.msIsSiteMode) {
  3.         if (numberOfBlinks >= 0) {
  4.             try {
  5.                 if (numberOfBlinks % 2 == 0) {
  6.                     window.external.msSiteModeSetIconOverlay(icona, "");
  7.                 } else {
  8.                     window.external.msSiteModeClearIconOverlay();
  9.                 }
  10.             } catch (e) {
  11.  
  12.             }
  13.             numberOfBlinks--;
  14.             var func = "blinkOverlayIcon(" + numberOfBlinks + "," + blinkInterval + ",'" + icona + "')"
  15.             setTimeout(func, blinkInterval);
  16.  
  17.         } else {
  18.             clearTimeout();
  19.             try {
  20.                 window.external.msSiteModeClearIconOverlay();
  21.             } catch (e) {
  22.             }
  23.         }
  24.     }
  25. }

In pratica il bottone:

  1. <input type="button" name="name" value="Lampeggia" onclick="javascript:blinkOverlayIcon(20,500,'/images/red.ico');" />

Permette di ripetere 20 volte la funzione (per un totale di 10 lampeggi) con un intervallo di mezzo secondo ciascuna.

Ulteriore possibilità è quella di alternare due o più icone in modo da ottenere effetti sempre più complessi. In particolare per alternare due immagini possiamo utilizzare questa funzione

  1. function alternateOverlayIcon(numberOfBlinks, blinkInterval, icona1, icona2) {
  2.     if (window.external.msIsSiteMode) {
  3.         if (numberOfBlinks >= 0) {
  4.             try {
  5.                 var icona = '';
  6.                 if (numberOfBlinks % 2 == 0) {
  7.                     icona = icona1;
  8.                 } else {
  9.                     icona = icona2;
  10.                 }
  11.                 window.external.msSiteModeClearIconOverlay();
  12.                 window.external.msSiteModeSetIconOverlay(icona, "");
  13.             } catch (e) {
  14.  
  15.             }
  16.             numberOfBlinks--;
  17.             var func = "alternateOverlayIcon(" + numberOfBlinks + "," + blinkInterval + ",'" + icona1 + "','" + icona2 + "')"
  18.             setTimeout(func, blinkInterval);
  19.  
  20.         } else {
  21.             clearTimeout();
  22.             try {
  23.                 window.external.msSiteModeClearIconOverlay();
  24.             } catch (e) {
  25.             }
  26.         }
  27.     }
  28. }

In questo caso, il bottone:

  1. <input type="button" name="name" value="Alterna" onclick="javascript:alternateOverlayIcon(20,250,'/images/red.ico', '/images/yellow.ico');" />

alterna le icone rossa e gialla per 20 volte, ciascuna della durata di 250 millisecondi.

Evidentemente unico freno è la fantasia e, al limite, possiamo pensare di eseguire una vera e propria animazione alternando tutti i frame della stessa.

Un limite è che, poichè IE9 esegue di suo un effetto fade sulla visualizzazione dell’icona di overlay, il tempo tra una visualizzazione e l’altra non può essere piccolo a piacere.

 

Commenti

Post popolari in questo blog

MVP Reconnect …… ovvero quando entri nella “famigghia” resti sempre nella “famigghia”!!!

Ma di che “famigghia” stiamo parlando!!!!

Fermi tutti, non si tratta di robe strane o sette segrete o affari malavitosi….stiamo parlando della grande famiglia dei Microsoft MVP.

Per chi non sapesse cosa sono i Microsoft MVP, vi consiglio di fare un giro sul sito ufficiale del programma (link), ma, volendolo spiegare in pochisime parole, si tratta di un riconoscimento che Microsoft da a persone che si distinguono per il loro impegno, aiutando gli altri ad ottenere il massimo grazie alle tecnologie Microsoft. Si tratta di persone, non dipendenti Microsoft, che mettono la loro passione, il loro tempo, la loro buona volontà per la divulgazione e la condivisione della conoscenza. Non necessariamente (come qualcuno erroneamente sostiene, evidentemente non conoscendo le basi del programma) si tratta di professionisti nel termine letterale del termine ma si tratta comunque di un gruppo di persone che sacrifica un pò del suo tempo (e, a volte, vi assicuro neanche pò!!!) per la sua passione.

Pe…

Nuova versione del Band SDK

E’ di ieri l’annuncio del rilascio della nuova versione dell’SDK per il Microsoft Band.
Si tratta della versione 1.3.10417 (la precedente e, prima della serie, era la 1.3.10219 preview).
Maggiori informazioni, download dell’SDK per le tre piattaforme Windows Phone, iOS e Android all’indirizzo http://developer.microsoftband.com/.
Allo stesso indirizzo potrete trovare anche la documentazione.
Nei mesi scorsi mi sono gia’ occupato della precedente versione e questi sono i post che ne parlano:
Microsoft Band SDK Preview - First LookMicrosoft Band SDK Preview - ”Hello Band”Microsoft Band SDK Preview - Accesso ai sensoriMicrosoft Band SDK Preview - TileMicrosoft Band SDK Preview - NotificheMicrosoft Band SDK Preview - Personalizzazione
Gli argomenti trattati e il codice proposto dovrebbe, ad una prima lettura delle nuove funzionalita’ inserite, essere ancora valido e funzionante ma nei prossimi giorni prendero’ in esame tutti gli argomenti dei precedenti post e vedremo cosa cambia e cosa e’ …

Template di progetto per sviluppare applicazioni WPF con Intel® RealSense™

E’ disponibile, nella gallery di Visual Studio, la prima versione del mio template di progetto per applicazioni WPF scritte in C# che permette di realizzare applicazioni con l’SDK di Intel® RealSense™.Il template si può scaricare direttamente all’interno Visual Studio utilizzando il tool “Extensions and Updates”oppure all’indirizzo https://visualstudiogallery.msdn.microsoft.com/1c36ecfd-8c00-4aee-b20c-a1726ab6424dIl template esegue le seguenti operazioni per voi:Aggiunge la reference all’assembly libpxcclr.cs.dll (nelle due distinte versioni per x86 e x64);Aggiunge lo script di post build per copiare la libreria libpxccpp2c.dll dalla cartella dell’SDK alla cartella bin del vostro progetto.Una volta creato il progetto dovete rimuovere la configurazione di compilazione AnyCPU (che non ha più senso) dalla vostra solution e sarete pronti per sviluppare con Intel® RealSense™.Ovviamente dovete installare l’SDK che potete scaricare all’indirizzo https://software.intel.com/en-us/intel-realsen…