Microsoft Tag

Scritto da  Nicolò Carandini il mercoledì 11 agosto 2010
Linguaggio: C#   •  Framework: 2.0,3.0,3.5,4.0   •  Livello: 100

Download sorgenti

Download pdf

Premessa

Microsoft Tag è un codice a barre bidimensionale che può essere letto dalla maggior parte dei telefoni "smartphone" tramite apposito programma, liberamente scaricabile dal sito http://gettag.mobi. Una volta installato è possibile leggere le informazioni contenute in un tag semplicemente inquadrandolo con la telecamera del cellulare. A seconda del tipo di informazioni contenute il programma provvederà ad eseguire l'azione corrispondente.

Codici a barre bidimensionali

 Softstrip, il primo codice a barre bidimensionale, risale al 1985 e fu utilizzato dall'allora famosa rivista Byte per pubblicare i listati contenuti negli articoli dedicati allo sviluppo software. Data la scarsissima diffusione di scanner all'epoca, l'esperimento fu di breve durata. In seguito sono stati realizzati molti altri formati[1], tra i quali il QR code e il DataMatrix.

Grazie a Gavin Jancke, direttore della divisione Engineering di Microsoft Research, nel 2007 la Microsoft ha presentato un nuovo formato chiamato HCCB ( High Capacity Color Barcode) che utilizzando elementi colorati di forma triangolare consente la codifica di una maggior quantità di informazioni a parità di spazio utilizzato. Test di laboratorio hanno dimostrato la possibilità di poter codificare con una palette di otto colori sino a 3500 caratteri per pollice quadrato e di poter recuperare tale informazione con un normale scanner di biglietti da visita da 600 dpi. Inoltre, a differenza degli altri codici a barre bidimensionali, il formato HCCB consente la codifica di differenti informazioni in un unico codice.

Introduzione a Microsoft Tag

Microsoft Tag è un sistema che implementa il formato HCCB con due modalità pensate per essere utilizzate dai cellulari smartphone. La prima utilizza 5 righe e una palette di 4 colori mentre la seconda utilizza 7 righe in bianco e nero. Il sistema è formato da un insieme di componenti che consentono la generazione del tag, la sua lettura e l'analisi della sua fruizione, secondo lo schema seguente:

Per un elenco dei telefoni supportati, si veda http://tag.microsoft.com/resources/mobile-support.aspx.

Il Tag Manager

E' possibile utilizzare il Tag Manager direttamente dal sito Microsoft Tag o tramite Web Services. L'uso del tag manager dal sito Microsoft è molto semplice, com'è possibile notare dall'immagine seguente:

E' possibile definire delle categorie per raggruppare una serie di tag a fini statistici.

Le informazioni che possono essere codificate nel tag sono attualmente di quattro tipi:

• URL (Uniform Resource Locator), di solito corrispondente all'indirizzo di una pagina web
• Testo
• Le informazioni di contatto (Nome, Cognome, Società, Telefono, etc. etc.)
• Dialer

E' possibile definire inoltre la data di inizio e di fine della validità del tag, prima e dopo la quale la sua eventuale lettura non sortisce alcun effetto. All'interno del periodo di validità, il tag può essere abilitato o disabilitato e anche in questo caso l'eventuale lettura di un tag disabilitato non sortisce effetto.

Una volta creato con le informazioni associate, un tag può essere prodotto nei vari formati disponibili:

• Vettoriali (.pdf, .wmf)
• Raster (.jpeg, .png, .gif, .tiff)
• Microsoft Tags File Format (.tag)

I formati vettoriali sono preferibili perché possono essere ingranditi a piacere, mentre quelli raster devono mantenere le medesime dimensioni dichiarate al momento della loro creazione. Il "Tag File Format" è un formato proprietario della Microsoft utile nel caso si voglia realizzare l'immagine all'interno di un proprio programma, seguendo le indicazioni riportate nella documentazione.

Inoltre, la prima volta che si produce un tag viene richiesta la lettura della documentazione relativa all'uso (come posizionarli, quale dimensione debbano avere in rapporto alla distanza prevista di lettura, etc. etc.). Il documento è relativamente breve e per certi aspetti necessario, per cui se ne consiglia vivamente la lettura.

Per ultimo, ma non meno importante, vi è la possibilità di visualizzare i report d'uso dei tag grazie alla tracciabilità delle scansioni effettuate dai vari lettori.

Tag Analytics

Una delle particolarità del sistema Microsoft Tag (a dire il vero mutuato da quanto già realizzato con QR code) è il meccanismo che sottende alla lettura del tag e recupero delle informazioni in esso codificate. A differenza di quanto si possa immaginare, le informazioni associate al tag non sono contenute nel tag stesso quanto nel Tag Manager Microsoft (disponibile "on the cloud"), e la lettura di un tag comporta l'esecuzione dei seguenti passi:

Poiché ogni lettura di tag coinvolge il Tag Manager, ad ogni lettura viene registrata la data, l'orario e l'identificativo dello smartphone univoco per l'editore, e in tal modo è possibile ottenere vari report:

Device ID

Il Device ID è un identificativo anonimo, univoco e persistente associato all'apparecchio utilizzato per leggere i tag. E' anonimo perché non contiene alcuna informazione relativa all'utente o all'apparecchio dell'utente, è univoco perché non vi possono essere due diversi apparecchi con lo stesso identificativo ed è persistente perché rimane lo stesso per tutte le letture effettuate dal medesimo apparecchio, per tutti i tag creati da un medesimo editore. Infatti, al fine di tutelare ulteriormente la privacy dell'utente, editori diversi riceveranno per lo stesso apparecchio identificativi diversi, secondo lo schema seguente:

Affinché il Device ID venga inserito nell'URL basta inserire il testo "{!deviceID}" nel punto desiderato. Ad esempio, se è stato realizzato un tag con il seguente URL: "/?id={!deviceID}", il Tag Reader dello smartphone con Device ID pari a "ABCXYZ" aprirà il web browser all'indirizzo "/?id= ABCXYZ".

Web Services

Come già accennato, tutte le operazioni eseguibili a mano nel Tag Manager possono essere gestite da un programma mediante le Web Services API. Per accedere al servizio occorre compilare la scheda di registrazione e ricevere via email l'indirizzo del web service e un "token" che associa le nostre operazioni al nostro identificativo di editore.

Per mostrare alcuni esempi d'uso delle Web Services API abbiamo realizzato una piccola applicazione dimostrativa con la quale è possibile creare nuove categorie e tag di tipo URL:

Per poter utilizzare il Web Service bisogna aggiungere il riferimento inserendo l'indirizzo ricevuto via email, eventualmente rinominandolo con un nome più significativo (nel nostro caso abbiamo usato "TagService"):

E dichiararne l'uso con:

using MsTagDemo.TagService;

Dove MsTagDemo è il nome del progetto. Vediamo ora il codice associato al pulsante "Crea categoria":

private void creaCategoria_Click(object sender, RoutedEventArgs e)

{

    try

    {

        MIBPContractClient contractClient = new MIBPContractClient();



        UserCredential userCredential = new UserCredential();

        userCredential.AccessToken = EditorToken.Text;



        TagService.Category tagCategory = new MsTagDemo.TagService.Category();

        tagCategory.Name = TagCategory.Text;

        tagCategory.UTCStartDate = DateTime.Now;

        tagCategory.UTCEndDate = null;



        bool result = contractClient.CreateCategory(userCredential, tagCategory);

        if (result)

        {

            MessageBox.Show("La categoria è stata creata.");

        }

        else

        {

            MessageBox.Show("Si è verificato un errore durante la creazione della categoria.");

        }

    }

    catch (Exception ex)

    {

        MessageBox.Show(ex.ToString());

    }

}

Tutte le richieste al servizio vengono effettuate tramite chiamate all'oggetto MIBPContractClient passando le credenziali tramite l'oggetto UserCredential, dopo aver assegnato alla sua proprietà AccessToken il valore testuale contenuto nel textBox EditorToken della finestra principale del programma. Viene poi creata una istanza dell'oggetto Category e vengono assegnati i valori alle sue proprietà Name, UTCStartDate e UTCEndDate. A questo punto viene effettuata la chiamata al metodo CreateCategory dell'oggetto MIBPContractClient passandogli come parametri le credenziali e la categoria.

Vediamo ora il codice associato al pulsante "Crea tag":

private void creaTag_Click(object sender, RoutedEventArgs e)

{

    try

    {

        MIBPContractClient contractClient = new MIBPContractClient();



        UserCredential userCredential = new UserCredential();

        userCredential.AccessToken = EditorToken.Text;



        string _category = TagCategory.Text;



        URITag uriTag = new URITag();

        uriTag.Title = TagTitle.Text;

        uriTag.UTCStartDate = validFrom.SelectedDate ?? DateTime.Now;

        uriTag.UTCEndDate = validTo.SelectedDate;

        uriTag.MedFiUrl = info.Text;

        bool result = contractClient.CreateTag(userCredential, _category, uriTag);

        if (result)

        {

            MessageBox.Show("Il tag è stato creato.");

        }

        else

        {

            MessageBox.Show("Si è verificato un errore durante la creazione del tag.");

        }

    }

    catch (Exception ex)

    {

        MessageBox.Show(ex.ToString());

    }

}

Come sempre, la richiesta al servizio viene effettuata istanziando un oggetto di tipo MIBPContractClient e chiamando il metodo CreateTag, al quale passiamo le credenziali del richiedente, la categoria e una istanza derivata della classe tag.

Per fornire le credenziali  utilizziamo l'oggetto UserCredential, avendo assegnato alla sua proprietà AccessToken il valore testuale contenuto nel textBox EditorToken della finestra principale del programma.

Per la categoria passiamo una stringa contenente il nome di una categoria precedentemente creata.

Per quanto riguarda il tag, esiste una classe base e quattro classi derivate, una per ciascuno dei possibili tipi disponibili, meglio illustrati dal seguente diagramma di classe:

Poiché in questa demo l'unico radio button abilitato è quello relativo al tag di tipo URL, viene utilizzato un oggetto di tipo URITag e vengono impostati i valori delle seguenti proprietà:

• Title
• UTCStartDate
• UTCEndDate
• MedFiUrl

Se nella creazione della categoria avevamo impostato (per semplicità dimostrativa) i valori della data iniziale e finale di validità della categoria direttamente nel codice sorgente, in questo caso utilizziamo le rispettive date impostate dall'utente tramite i due DatePicker validFrom e validTo.

Da notare che per impostare la data iniziale di validità (uriTag.UTCStartDate ) usiamo l'operatore di null-coalescing. In questo modo, se l'utente non ha scelto la data iniziale, la proprietà SelectedDate di un DatePiker è pari a null e l'operatore ?? restituisce il valore di default da noi prescelto, cioè DateTime.Now. Nel caso della data finale (uriTag.UTCEndDate ), invece, null è proprio il valore giusto da usare se l'utente non ha effettuato alcuna scelta. Quindi utilizziamo direttamente il valore di SelectedDate del DatePicker validTo. 

Vediamo infine il codice associato al pulsante "Disegna tag":

private void disegnaTag_Click(object sender, RoutedEventArgs e)

{

    try

    {

        MIBPContractClient contractClient = new MIBPContractClient();



        UserCredential userCredential = new UserCredential();

        userCredential.AccessToken = EditorToken.Text;



        string _category = TagCategory.Text;

        string _title = TagTitle.Text;



        DecorationType tagDecorationType = new DecorationType();

        if (TagDecorationNone.IsChecked == true)

        {

            tagDecorationType = DecorationType.HCCBRP_DECORATION_NONE;

        }

        if (TagDecorationDownload.IsChecked == true)

        {

            tagDecorationType = DecorationType.HCCBRP_DECORATION_DOWNLOAD;

        }

        if (TagDecorationStylized.IsChecked == true)

        {

            tagDecorationType = DecorationType.HCCBENCODEFLAG_STYLIZED;

        }

        if (TagDecorationFramePlain.IsChecked == true)

        {

            tagDecorationType = DecorationType.HCCBRP_DECORATION_FRAMEPLAIN;

        }



        byte[] b = contractClient.GetBarcode(userCredential, _category, _title, ImageTypes.png,

                                             0.75f, tagDecorationType, false);

        MemoryStream ms = new MemoryStream(b);

        BitmapImage bitImage = new BitmapImage();

        bitImage.BeginInit();

        bitImage.StreamSource = ms;

        bitImage.EndInit();



        TagImageDialog tagImageDialog = new TagImageDialog();

        tagImageDialog.tagImage.Source = bitImage;

        tagImageDialog.ShowDialog();

    }

    catch (Exception ex)

    {

        MessageBox.Show(ex.ToString());

    }

}

Qui viene utilizzato il metodo MIBPContractClient.GetBarcode, che richiede i seguenti parametri:

• UserCredential userCredential
• string categoryName
• string tagName
• ImageTypes imageType
• float sizeInInches
• DecorationType decorationsType
• bool isBlackWhite

L'imageType può essere di tipo pdf (Adobe® Portable Document Format), wmf (Windows Metafile format), jpeg (Joint Photographic Experts Group), png, gif, tiff e tag (Tagged Binary File Format).

La misura dell'immagine, che ha senso solo per i formati non vettoriali, viene fornita con un unico valore (compreso tra 0,75 e 120 pollici) in quanto l'immagine del tag è quadrata. La risoluzione dell'immagine restituita dal servizio è di 600 dpi (punti pollice).

Il decorationType definisce il tipo di immagine:

• HCCBRP_DECORATION_NONE
• HCCBRP_DECORATION_DOWNLOAD
• HCCBENCODEFLAG_STYLIZED
• HCCBRP_DECORATION_FRAMEPLAIN
• HCCBRP_DECORATION_TEXT

Il flag booleano isBlackWhite viene settato a vero se si vuole ottenere un tag in bianco e nero.

Il metodo GetBarcode restituisce le informazioni relative all'immagine in un array di byte. Con WPF è facile convertire l'array in una immagine utilizzando la BitmapImage e il MemoryStream e visualizzarla in un'altra finestra aperta come un dialog modale con il metodo ShowModal.

Se non ci sono stati errori e se la configurazione del servizio è impostata in modo tale da poter ricevere la consistente quantità di dati restituiti dal servizio, viene aperta la finestra con l'immagine del tag:

Scenari d'uso

I possibili scenari d'uso sono veramente tanti, grazie alla possibilità di associare all'URL l'identificativo dell'apparecchio utilizzato per la lettura e quindi in definitiva l'utente. Recentemente, al Remix10 abbiamo utilizzato il Microsoft Tag per votare le sessioni. Il sito della Microsoft contiene molti altri scenari d'uso a cui rimandiamo per maggiori approfondimenti.

Conclusioni

Microsoft Tag è la versione "ready to use" del più completo HCCB, e viene fornito gratuitamente da Microsoft completo di una gestione dei tag utilizzabile sia manualmente che tramite Web Services API. Come abbiamo potuto vedere, le API sono molto semplici da utilizzare e consentono di realizzare tutte le operazioni disponibili nel sito web di gestione manuale dei tag direttamente dal nostro applicativo.

Riferimenti

Di seguito i link principali per approfondire l'argomento:

• Sito ufficiale Microsoft Tag: http://tag.microsoft.com
• Risorse e Guide: http://tag.microsoft.com/resources/resources-home.aspx
• Per gli sviluppatori: http://tag.microsoft.com/developer/index.aspx

Per un elenco dei codici a barre si veda la relativa voce su Wikipedia (http://en.wikipedia.org/wiki/Barcode)