Archivi Tag: uwp

Il futuro si fà dual (screen)

Sono passati ormai più di cinque mesi da quando a inizio ottobre Microsoft ha presentato i suoi nuovi dispositivi della linea Surface che andranno a dar vita al nuovo filone dei dispositivi Dual Screen, rispettivamente il Surface Neo per quanto riguarda il mondo Windows ed il surface Duo per quanto riguarda il mondo Android.

surface duo e neo

I device

Microsoft per questa nuova avventura non si è limitata esclusivamente alla parte hardware, altrimenti avremmo avuto solo dei bei giocattolini su cui utilizzare 2 app contemporaneamente, ma è andata a realizzare tutta una serie di librerie e di modifiche ai sistemi operativi che permettono di sfruttare al massimo la presenza dei due schermi.

Per quanto riguarda il Neo è stata realizzata una nuova versione di Windows denominata 10X alleggerita e rivista che permette di avvicinarsi più ad un’utilizzo stile Tablet mentre per il Duo è stato fatto un lavoro insieme a Google per inserire all’interno del sistema del robottino verde nuove API per la gestione dei dual screen.

Al momento non è ancora disponibile una data di rilascio dei due device ma per noi sviluppatori sono già disponibili tutta una serie di emulatori ed SDK (entrambi in versione preview) per poter iniziare a fare i test ed adattare le nostre applicazioni.

Il punto di partenza per il mondo del dual screen è la pagina docs https://docs.microsoft.com/en-us/dual-screen che ci permette di accedere a tutti gli strumenti e la documentazione di cui abbiamo bisogno.

Gli emulatori

Ma andiamo innanzitutto a vedere come avere accesso agli emulatori; per quanto riguarda quello android possiamo andare direttamente a scaricarlo dall’indirizzo https://www.microsoft.com/en-us/download/details.aspx?id=100847 dove potremo scegliere il pacchetto per il sistema operativo che stiamo utilizzando, mentre per quanto riguarda quello per windows 10X non dobbiamo far altro che andare nello store di window 10 e cercare il Windows Emulator che una volta installato ci permetterà di scegliere al primo avvio quale versione del sistema operativo vogliamo andare ad installare. Finalmente dall’ultimo aggiornamento del programma è possibile installarlo anche su una normale versione di windows senza dover per forza essere sul ramo Insider di Windows 10.

In questo momento sono disponibili due versioni del sistema operativo (naturalmente in preview) ma quando saranno rilasciate potrete installare sempre da questa schermata eventuali nuove versioni disponibili che potremo anche far coesistere.

Come sviluppare

Ok adesso che abbiamo gli emulatori il passo successivo è sapere quale tecnologia è possibile utilizzare per inziare a svilupparci. Come al solito non esiste un solo modo di farlo ma al momento il consiglio che mi sento di darvi se volete sviluppare per questi dispositivi è di utilizzare Xamarin Forms in modo da avere una sola base di codice per tutte le piattaforme, ma oltre questo sono disponibili anche gli SDK per

  • UWP
  • Xamarin nativo Android
  • Android nativo

La prima cosa che balza all’occhio è che non è presente l’SDK per ios, questo naturalmente perchè (per ora) non c’è un dispositivo targato Apple che abbia il supporto al dual screen, questo vuol dire che se stiamo sviluppando nativamente non ne abbiamo bisogno, mentre se usiamo Xamarin Forms ci penserà comunque la libreria a gestire il tutto

Cosa mi permette di fare l’sdk?

L’sdk ci permette di gestire vari scenari, naturalmente non sarà obbligatorio utilizzare in ogni sezione della nostra applicazione lo stesso tipo di scenario, ne limitarci a quelli indicati ma possiamo utilizzare quello migliore in ogni situazione.

Vediamo nel dettaglio quali sono i principali scenari a cui possiamo far riferimento

layout

Extended canvas

E’ la modalità più tradizione e permette di estendere il contenuto della nostra applicazione sui due schermi senza applicare nessuna modifica particolare.

Master detail

Una delle situazioni più comuni in cui ci trova è quella in cui abbiamo una lista di elementi (dalle fatture alle immagini ad es) che una volta selezionate ci permettono di accedere ad un dettaglio dello stesso. Avendo questa visualizzazione su due schermi potremmo accedere in modo più veloce alla selezione di un elemento senza dover tornare indietro per accedere di nuovo alla lista.

Two page

La modalità a due pagine è quella più indicata quando visualizziamo del contenuto impaginato, questo ci permetterà di simulare nel modo migliore l’utilizzo di un libro o di un documento in cui il contenuto viene disposto in modo ordinato e diviso tra le due pagine

Dual view

La doppia vista ci permette di poter presentare i dati all’utente in due modalità diverse, come ad esempio un’elenco di luoghi e la visualizzazione degli stessi su una mappa oppure due immagini quando stiamo eseguendo delle modifiche.

Companion panel

la modalità companion è quella forse più interessante che ci permette di fornire maggiori controlli all’utente che altrimenti non avrebbero spazio per essere visualizzati, come può essere ad esempio un joypad che potrebbe essere presente sul secondo schermo quando si utilizzata un gioco oppure dei controlli aggiuntivi di modifica di un elemento che invece di essere presentati in una schermata a parte possono essere visualizzati contemporaneamente all’oggetto che si stà modificando. Decisamente comoda come funzionalità!

Perchè dovrei iniziare ad utilizzarlo?

Arriviamo adesso alla domanda che tutti vi starete facendo, se ancora questi dispositivi non sono sul mercato perchè dovrei perdere tempo a rendere le mie applicazioni compatibili?

Naturalmente perchè se stai leggendo questo articolo sarai un nerd o un amante della tecnologia e questo dovrebbe bastare come giustificazione, ma se proprio c’è bisogno di una motivazione sappiate che quando usciranno questi nuovi device le vostre app saranno una gioia per gli utenti.

Ma non finisce qui, una cosa molto interessante è che utilizzare queste libreria ci permetterà di ottenere dei benefici anche quando le nostre app verranno utilizzata su device che non sono dual screen, questo perchè quando andremo ad utilizzare il componente di gestione delle pagine TwoPaneView potremmo andare a definire una MinWideModeWidth e  una MinTallModeHeight che ci permetteranno di “simulare” i due schermi quando il nostro dispositivo supera una certa larghezza o altezza, questo permetterà alle nostre app di entrare in una delle modalità viste in precedenza e di sfruttare al meglio la dimensione dello schermo.

In questo modo modo le nostre app diventaranno automaticamente ottimizzate su device con una ampia diagonale come ad esempio i tablet android o i pieghevoli,i convertibili 2 in 1 ed anche gli ipad (ma non avevamo detto che non c’è l’sdk per Ios? si ma c’è per xamarin forms 😀 ). Quante volte le vostra applicazioni sono ben gestite se le provate su un telefono mentre poi quando vengono utilizzate su un tablet  in modalità orizzontale l’utente si trova di fronte ad un’interfaccia che “affoga” schermo? Utilizzando l’sdk per dual screen avremo quindi gratis anche questa funzionalità

Direi che a questo punto non avete scuse per non utilizzarlo 😀

I prossimi articoli

In questo articolo abbiamo sollevato il velo su quello che è il mondo dello sviluppo su dispositivi con più di uno schermo, a questo ne seguiranno altri in cui vedremo come sviluppare utilizzando sia la piattaforma UWP che Xamarin Forms in attesa di avere tra le mani questi nuovi dispositivi 😀

Per adesso quindi non mi resta altro che darvi appuntamento al prossimo articolo e augurarvi buon coding!!

 

Benvenuto XAML Studio

Da pochi giorni è disponibile sullo store di Windows 10 un nuovo applicativo sviluppato da Microsoft Garage che permette di realizzare in modo molto veloce prototipi di applicazioni UWP permettendoci di avere una preview in tempo reale di quello che stiamo sviluppando.

Quello che vedete nella foto in basso è l’interfaccia del programma che in maniera molto intuitiva mette a disposizione un editor con 2 aree: una dove inserire il nostro codice e una dove vedere la preview interattiva, questo vuol dire che se inseriremo un elemento interattivo (ad es una textbox) potremo interagire con essa direttamente dalla preview.

Nonostante l’applicazione sia molto giovane ha già molte funzionalità interessanti tra cui:

  • Preview in tempo reale
  • Intellisense
  • binding da testo json o con download direttamente da url
  • documentation toolbox

la funzionalità di documentation toolbox in particolare risulta essere molto comoda in fase di apprendimento, in quanto permette di accedere direttamente alla documentazione dei vari componenti dove poter trovare i vari pezzi di codice da poter incollare direttamente nel tool per provarli

A questo punto non vi resta da fare altro che scaricarlo dallo store a questo indirizzo https://aka.ms/GetXAMLStudio ed iniziare ad utilizzarlo.

Il programma è molto interessante quindi sicuramente ci saranno altri post su questo argomento, per il momento non mi resta da fare altro che augurarvi buon coding!

How to fix error loading onnx file from filesystem

The default use of trained machine learning model in UWP apps is to add onnx file to your solution and leave Visual Studio to generate the corresponding class and load the file directly in the solution, but in some case can be useful to load the file from other sources, like the filesystem.

This is not a problem, the CreateXXXXXModel generate take a StorageFile so you can use a FilePicker to take a file, but if you try a code like this

FileOpenPicker fileOpenPicker = new FileOpenPicker();
fileOpenPicker.FileTypeFilter.Add(".onnx");
StorageFile selectedStorageFile = await fileOpenPicker.PickSingleFileAsync();
try
{
	_model = await CustomVisionModel.CreateCustomVisionModel(selectedStorageFile);
}catch(Exception ex)
{
	new MessageDialog(ex.StackTrace,ex.Message).ShowAsync();
}

You can see that an exception is thown in the calling of method LearningModelPreview.LoadModelFromStorageFileAsync in the generated class

public static async Task CreateCustomVisionModel(StorageFile file)
{
	LearningModelPreview learningModel = await LearningModelPreview.LoadModelFromStorageFileAsync(file);
	CustomVisionModel model = new CustomVisionModel();
	model.learningModel = learningModel;
	return model;
}

The exception does not give us more info about the problem

Exception from HRESULT: 0x88900103
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
at WinMLTester.CustomVisionModel.d__1.MoveNext()
— End of stack trace from previous location where exception was thrown —
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
at WinMLTester.Views.MainPage.d__6.MoveNext()

it seems that file doesn’t have some permission for made WinML works, the solution is quite simple, before creating the model we need to copy the file in the app local folder and then use this file instead of the other.

We need only few lines of codes for do this

FileOpenPicker fileOpenPicker = new FileOpenPicker(); 
fileOpenPicker.FileTypeFilter.Add(".onnx"); 
StorageFile selectedStorageFile = await fileOpenPicker.PickSingleFileAsync(); 
//Fix for loading file
StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
StorageFile sf2 = await selectedStorageFile.CopyAsync(storageFolder, selectedStorageFile.Name, NameCollisionOption.ReplaceExisting);
try
{
	_model = await CustomVisionModel.CreateCustomVisionModel(sf2);
}catch(Exception ex)
{
	new MessageDialog(ex.StackTrace,ex.Message);
}

Now your code work without problem

I have also created a new project on github for help to test your machine learning model created with Custom Vision service available on https://github.com/a-iafrate/WinMLTester that can be used to test this fix

happy coding!!

Benvenuto Windows Community Toolkit

Se sviluppate app UWP avrete sicuramente avuto a che fare con l’UWP Community Toolkit e (se non lo avete mai fatto vi consiglio di farlo 😀 ) che è un vero e proprio cortellino svizzero per noi sviluppatori e ci permette di non dover reinvere la ruota.

Da pochi giorni è disponibile una nuove versione che porta un importante cambiamento, quello del nome del progetto che passa da UWP Community Toolkit a Windows Community Toolkit il che ci fà capire anche alla luce degli annunci di Build di qualche giorno fà come presto si arricchirà di nuovi elementi e funzionalità non solo per le UWP.

Al momento non possiamo comunque lamentarci, come è possibile vedere nell’immagine i controlli presenti sono già molti ed utilissimi e  sono di grandi aiuto insime ai vari Helpers, Service che ci permettono di avere funzionalità già disponibile ad esempio per l’autenticazione sui vari social o l’utilizzo delle Notification.

Il modo migliore per avere una panoramica delle funzionalità disponibili è quello di scaricare l’applicazione demo disponibile sullo store a questo indirizzo (al momento della scrittura di questo post l’applicazione ha ancora il vecchio nome ma verrà aggiornato a breve)

Tutti i pacchetti del progetto sono disponibili su Nuget e se avete voglia di dare una mano il progetto è naturalmente OpenSource e disponibile su GitHub.

Se non lo avete mai utilizzato spero di avervi fatto cosa gradita a farvelo conoscere e come sempre

Buon Coding 😀

 

La Mixed Reality è qui

Con l’ultimo aggiornamento di windows 10 (il fall creators update) disponibile da pochi giorni la mixed reality entra nelle case di tutti a prezzi finalmente accessibili,prima d’ora infatti gli unici device a sfruttarla erano gli hololens con un prezzo decisamente proibitivo, adesso invece i nuovi device sono disponibili con prezzi di partenza sotto i 400€ diventano decisamente più interessanti.

Noi italiani (purtroppo succede spesso) siamo stati lasciati indietro per ora visto che i device non sono disponibili nel nostro territorio ma basta recarsi nella versione inglese dello store di Microsoft o di Amazon per poterli comprare e farseli recapitare a casa.

Naturalmente anche io ho approfittato e devo dire che l’esperienza d’uso è decisamente positiva (anche se gli hololens sono e rimarrano per molto un’altra cosa)

mixed_hp

Ma venendo a quello che ci interessa come sviluppatori come possiamo lavorarci?

Ci sono due strade per lo sviluppo:

  • Se vogliamo realizzare delle applicazioni immersive dobbiamo dotarci di Visual Studio 2017 in accoppiata con Unity che ci permetteranno di sfruttare tutta la potenza di questi device (maggiori dettagli qui)
  • altrimenti (e questa è la cosa più interessante) tutte app UWP saranno da subito disponibili all’interno dell’ambiente virtuale senza nessuna modifica e pronte ad essere pinnate sul muro virtuale e fatte partire (maggiori informazioni qui). Naturalmente se vorremmo dare una migliore usabilità nell’ambiente 3d dovremo utilizzare qualche accorgimento nella realizzazione dell’interfaccia e gestire anche le altre forme di input disponibili come la voce o lo sguarda.

Come potete vedere di carne al fuoco ce n’è veramente tanta e questi nuovi device non faranno altro che dare una maggiore spinta alle app UWP che adesso hanno trovato un’ulteriore casa

Vi aspetto nei prossimi articoli dove tratteremo più approfonditamente lo sviluppo sulla Mixed Reality , nel frattempo vi lascio il link dove trovare tutti i dettagli in merito https://developer.microsoft.com/en-us/windows/mixed-reality/development, e come al solito non mi resta altro che augurarvi buon coding 😀

 

 

Project Rome e cross device su IoProgrammo

ioprogrammo_july2017

Questo mese su IoProgrammo numero 215 di Luglio troverete il mio nuovo articolo su Project Rome e come utilizzarlo per condividere dati e funzionalità tra le varie piattaforme su cui la vostra applicazione è disponibile.

Una funzionalità disponibile in windows 10 che potrà dare una marcia in più alle vostre applicazioni.

Buon coding!!

 

Un nuovo mediacenter per Xbox su ioprogrammo

E’ stato pubblicato su ioprogrammo numero 2012 di aprile 2017 il mio articolo su come scrivere il proprio mediacenter per Xbox utilizzando tutta la potenza delle app UWP

4-212g

UWP: ricreiamo la funzione ToTitleCase

Come ben sappiamo la piattaforma UWP non dispone di tutte le funzionalità presenti nella versione del .Net Framework versione desktop. Una funzione che può essere utile in alcuni casi è ToTitleCase che come possiamo intuire dal nome converte il testo in parole con iniziali maiuscole come è possibile vedere nella documentazione ufficiale

https://msdn.microsoft.com/en-us/library/system.globalization.textinfo.totitlecase%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396

La versione standard permette di fare controlli più fini anche in base alla lingua di sistema ma se abbiamo bisogno solo della sua funzione base possiamo utilizzare questo semplice metodo

public string toTitleCase(string value)
{
    if (value == null)
        return null;
    if (value.Length == 0)
        return value;

    StringBuilder result = new StringBuilder(value);
    result[0] = char.ToUpper(result[0]);
    for (int i = 1; i < result.Length; ++i)
    {
        if (char.IsWhiteSpace(result[i - 1]))
            result[i] = char.ToUpper(result[i]);
        else
            result[i] = char.ToLower(result[i]);
    }
    return result.ToString();
}

che converte in maiuscolo l’iniziale di ogni parola ed in minuscolo quelle seguenti.

Una piccola utility che a volte può tornare utile

Buon coding!!!

UWP: Utilizzare immagini diverse in base al tema corrente

Una delle esigenze che maggiormente occorre tenere in considerazione nello sviluppo di un’app, soprattutto in ambito mobile, è quella di essere coerenti con il tema che l’utente stà utilizzando, per visualizzare elementi grafici che siano ben visibili ed evitare ad esempio pulsanti con immagini che si confondono con il colore di base del tema e diventano praticamente invisibili.

Una delle funzionalità più comode del framework sono i qualificatori che permettono tramite una determinata formattazione del nome del file o della cartella in cui esso è inserito di specificare se e quando deve essere utilizzato. Lo standard da utilizzare è del tipo

[resourceName].[qualifierString].extension

Come abbiamo detto è possibile utilizzarlo in due diversi modi, o creando una cartella con l’apposito nome

xaml-layout-view-ex-2

oppure specificandolo nel nome del file

xaml-layout-view-ex-1

a questo indirizzo è disponibile un elenco dei qualificatori utilizzabili per discriminare in base alla lingua, risoluzione dello schermo ecc.

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.applicationmodel.resources.core.resourcecontext.qualifiervalues.aspx

Quello che a quanto pare non viene citato nella documentazione ufficiale è la possibilità di utilizzare anche un qualificatore per indicare il tipo di tema a cui la risorsa deve fare riferimento utilizzando

theme-[dark/light]

in questo esempio

theme-dark.PNG

verrà utilizzata normalmente l’icona delete.png quando vi sarà fatto riferimento e solo in caso di tema scuro essa verrà sostituita da delete.theme-dark.png

Una soluzione decisamente interessante, soprattutto se state realizzando una UWP con Xamarin dove sarà più difficile accedere alle impostazioni del tema.

Rigrazio Fela per avermi fatto scoprire questa soluzione dopo averla cercata per ore 😀 spero possa essere utile anche a voi.

Buon coding!!

Due utili estensioni per generare gli asset delle nostre UWP

A tutti sarà successo di dover creare i vari asset per le nostre app e di aver perso molto tempo con i vari photoshop  o simili per ridimensionare tutte le immagini nelle giuste dimensioni, voglio quindi segnalarvi due estensioni per Visual Studio che possono permetterci di risparmiare un pò di tempo facendo il lavoro per noi.

UWP Tile Generator

E’ l’estensione più semplice da usare. Permette partendo da un file immagine PNG o SVG di generare tutte le immagini di cui abbiamo bisogno.

Una volta installata facendo click con il tasto detro del mouse su un file compatibile avremo a disposizione due nuove voci nel menù contestuale

uwp20context

che ci permetteranno di generare tutti i file per le nostre Tile oppure per lo splash screen.

I sorgenti del progetto sono anche disponibili su GitHub, quindi se volete potete partecipare allo sviluppo potete farvi avanti 😀

UWP Visual Assets Generator

Ha sostanzialmente le stesse funzioni di UWP Tile Generator ma con molte più opzioni che permettono di selezionare quali file generare e che caratteristiche devono avere e come potete vedere nella schermata è un pò più complessa nell’utilizzo.

screenshot

Questa estensione oltre ai file SVG e PNG permette di aprire anche file JPG e GIF ma di contro non dispone della possibilità di essere lanciata con il tasto destro su un’ immagine ma dovremmo lanciare la relativa finestra da

View -> Other Windows -> UWP Visual Assets Generator

Quale utilizzare?

Come sempre non c’è una scelta giusta ma occorre sempre decidere quale è più è utile nel nostro caso.

Se non volete preoccuparvi dei dettagli ma solo avere le vostre icone generate in automatico UWP Tile Generator è forse la scelta migliore, se invece volete avere controllo su tutti i file generati UWP Visual Assets Generator farà al vostro caso.

Voi quale avete scelto? Ne conoscete altre? Fatemi sapere nei commenti

Buon coding!!

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi