Guest Post - Sviluppare per surface Dial

Questo post è stato scritto da Alessio Iafrate, MVP e Community Lead di DotNet Abruzzo.

In occasione della presentazione del nuovo Surface Studio tenutasi a Novembre, Microsoft ha presentato una nuova tipologia di device ruotabili che hanno avuto il loro primo esponente con il Surface Dial.

 

Questa nuova tipologia di device permette una esperienza di utilizzo totalmente nuova ed insieme con il Surface Studio riesce a dare il massimo della sua potenza, ma è utilizzabile anche su qualsiasi device dotato di connettività bluetooth.

Il Surface Dial ( e tutti gli altri tipi di device di questo tipo che saranno in commercio) è studiato per essere utilizzato con la mano secondaria e permette di gestire tutta una serie di azioni che l’utente può realizzare, in particolare

·       Rotazione

·       Click

·       Pressione prolungata

·       Posizionamento sullo schermo (solo sui device compatibili)

Mentre la pressione prolungata visualizza il menù principale e non può essere gestita, le altre saranno gestite dall’interfaccia e passate anche all’app sottostante in modo da poterle gestire come vogliamo.

Ecco come apparirà l’interfaccia del dial su device standard (a sinistra) e sul Surface Studio ( a destra) dove avrà una dimensione maggiore e la parte centrale sarà occupata dal device.

 

Integrazione di sistema

Il Dial mette di default a disposizione alcune operazioni contestualizzate in base a quello che l’utente sta facendo in quel momento ed in particolare permette di gestire

·       Volume

·       Scroll

·       Zoom in, zoom out

·       Annulla / Ripristina

Ulteriori azioni saranno disponibili in base alla situazione

·       Gestione delle tracce audio se c’è un file multimediale in esecuzione

·       Modifica del contrasto se disponibile

Se la nostra applicazione integra poi i controlli InkCanvas ed InkToolbar saranno presenti degli shortcut per queste funzioni.

 

Integrazione nelle applicazioni

Con il rilascio dell’Anniversary update sono state rese disponibili tutte le API per poter utilizzare il Dial nelle nostre applicazione e per personalizzarlo come meglio preferiamo, il tutto è possibile grazie alla classe RadialController.

Iniziamo a vedere un esempio di codice per aggiungere un pulsante personalizzato

RadialController myController;

 

        public MainPage()

        {

            this.InitializeComponent();

            myController = RadialController.CreateForCurrentView();

 

            // Create an icon for the custom tool.

            RandomAccessStreamReference icon =

              RandomAccessStreamReference.CreateFromUri(

                new Uri("ms-appx:///Assets/StoreLogo.png"));

 

            // Create a menu item for the custom tool.

            RadialControllerMenuItem myItem =

              RadialControllerMenuItem.CreateFromIcon("Sample", icon);

            //Remove a subset of the default system tools

          

            // Add the custom tool to the RadialController menu.

            myController.Menu.Items.Add(myItem);

           

            // Declare input handlers for the RadialController.

            myController.ButtonClicked += MyController_ButtonClicked;

            myController.RotationChanged += MyController_RotationChanged;

        }

In questo esempio con il metodo RadialController.CreateForCurrentView otteniamo un riferimento all’oggetto (se presente) ed andremo poi a creare un oggetto del menu con

 

RadialControllerMenuItem.CreateFromIcon("Sample", icon);

 

che potremo poi aggiungere alla collezione Menu all’oggetto RadialController.

Se eseguiamo l’applicazione vedremo che adesso sarà presente un pulsante aggiuntivo con il logo della nostra applicazione.

Se lo premiamo non avremo però nessuna reazione, dovremo infatti andare a gestire gli eventi ButtonClicked e RotationChanged come nel seguente codice

private void MyController_RotationChanged(RadialController sender,

          RadialControllerRotationChangedEventArgs args)

        {

            if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)

            {

                RotationSlider.Value = 100;

                return;

            }

            else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)

            {

                RotationSlider.Value = 0;

                return;

            }

            RotationSlider.Value += args.RotationDeltaInDegrees;

        }

 

        // Handler for click input from the RadialController.

        private void MyController_ButtonClicked(RadialController sender,

          RadialControllerButtonClickedEventArgs args)

        {

            ButtonToggle.IsOn = !ButtonToggle.IsOn;

 

        }

 

In questo esempio utilizzeremo il valore della rotazione per incrementare uno slider ed il click per cambiare lo stato di un toggle.

Quando utilizzeremo il device su un Surface Studio avremo valorizzata la proprieta Contact nel parametro args passato ai vari eventi a cui potremo accedere con

RadialControllerScreenContact contact = args.Contact;

e che ci permetterà di avere i dettagli sulla posizione del device sullo schermo in modo da poter eseguire operazioni più complesse, come la selezione dell’elemento presente nella porzione di schermo sotto il device.

Saranno inoltre disponibili degli eventi aggiuntivi

ScreenContactStarted

ScreenContactEnded

ScreenContactContinued

che saranno scatenati rispettivamente quando si posiziona il device sullo schermo, quando lo si elimina e quando viene spostato.

Come avrete notato dal codice gli eventi non sono disponibili sul singolo elemento del menù ma esclusivamente sul controller, per questo sarà necessario controllare quale elemento è stato selezionato grazie al metodo

myController.Menu.GetSelectedMenuItem()

e poi andando a controllare il nome od il Tag dell’elemento. Ecco un esempio di metodo che permette di ottenere il testo del controllo selezionato:

 

private string GetSelectedMenuItemName()

{

RadialControllerMenuItem selectedMenuItem = myController.Menu.GetSelectedMenuItem();

       return selectedMenuItem.DisplayText;

}

Oltre a gestire gli eventi sono possibili alcune modifiche come la disattivazione del feedback Haptico e la precisione della rotazione.

       myController.UseAutomaticHapticFeedback = false;

myController.RotationResolutionInDegrees = 1;

Linee guida

Visto la particolare tipologia di device è necessario seguire alcune linee guida per ottenere il massimo in quanto ad utilizzo e fruibilità.
Innanzitutto è necessario porre particolare attenzione all’icona utilizzata che deve rispettare i seguenti criteri

·        Dimensioni 64 x 64 pixel in formato PNG image

·        Avere il background trasparente

·        L’icona deve coprire una buona porzione dell’immagine

·        Se l’icona è di colore bianco deve avere un contorno nero per essere visibile in modalità contrasto elevato

Sarà poi utile scegliere un nome per l’azione che sia breve e facilmente comprensibile dall’utente.

E’ infine buona norma non savraccaricare il numero dei pulsanti presenti, per evitare di provocare confusione nell’utente che potrebbe faticare a raggiungerli.

Conclusioni

Il device si presenta decisamente interessante ed altamente configurabile ed è auspicabile che possa avere una buona diffusione anche grazie ad altri produttori che stanno presentando device simili che utilizzano le stesse interfacce.

Se ben usato in alcuni tipi di applicazioni può essere decisamente utile e favorire una migliore user experience. Essendo una modalità di interazione totalmente nuova, purtroppo senza provarlo è difficile poter capire le reali potenzialità, ma vi posso assicurare che una volta provato difficilmente se ne può fare a meno.

Spero di avervi fatto venire curiosità sull’argomento e di avervi fatto iniziare a pensare a come poter utilizzare questa nuova modalità di input per rendere unica la vostra app.

Buon coding!