Archive for august, 2015

Aktualizovaný postup inštalácia Windows 10 IoT na dosku Raspberry Pi 2

27. augusta 2015

Image operačného systému pre podporovanú mikrokontrolérovú dosku vytvoríte pomocou nástroja Imaging and Configuration Designer (ICD). Budete potrebovať

  • · Dosku Raspberry Pi 2 (dostupný napríklad na alza.sk).
  • · Počítač s Windows 10. Musí to byť fyzický stroj, nie virtuálny, nakoľko potrebujete prístup k čítačke pamäťových kariet
  • · 5V micro USB zdroj schopný dodať prúd aspoň 1 A, napríklad z tabletu
  • · 8GB micro SD kartu triedy 10, alebo vyššiu.
  • · HDMI a Ethernet kábel
  • · Monitor, klávesnicu a myš – budete potrebovať na pokusy s doskou po nainštalovaní operačného systému

clip_image002

Konfigurácia na prenesenie Windows 10 IoT Core na SD kartu a následné spustenie

Z webovej stránky http://go.microsoft.com/fwlink/?LinkId=616847 si stiahnite ISO image Windows 10 IoT Core, ktorý potom prenesiete na SD kartu. Veľkosť súboru je 530 MB. Po stiahnutí kliknite v aplikácii Prieskumník na ISO súbor, čím sa namapuje ako virtuálna jednotka, na ktorej je inštalačný súbor Windows_10_IoT_Core_RPi2.msi. Spustite ho a v procese inštalácie sa súbor flash.ffu prekopíruje do adresára C:\Program Files (x86)\Microsoft IoT\FFU\RaspberryPi2. Po ukončení inštalácie sa spustí aplikácia Windows 10 IoT Core Watcher

clip_image004

Dialóg ukončenia inštalácie Windows 10 IoT Core do vývojárskeho počítača

Na počítači s operačným systémom Windows 10 so slotom na micro SD kartu, alebo s externou čítačkou pamäťových kariet spustite aplikáciu IoTCoreImageHelper.exe, ktorá prenesie operačný systém Windows 10 IoT na SD kartu. Aplikáciu najjednoduchšie nájdete, ak do okna pre vyhľadávanie na paneli úloh vľavo dole vedľa tlačidla s logom Windows zadáte frázu “WindowsIoT” a nájdete odkaz “Windows IoT ImageHelper”. Vyberte písmeno jednotky na ktoré je namapovaná čítačka mikro SD karty a zadajte adresár do ktorého bol prekopírovaný súbor flash.ffu.

clip_image006

Aplikácia na prenesenie obrazu operačného systému na micro SD kartu.

Aplikácia Windows IoT ImageHelper vlastne len pripraví parametre pre príkaz dism.exe.

Po ukončení operácie aplikujte postup pre bezpečné odobranie externej pamäťovej jednotky. Týmto postupom máte vytvorený obraz operačného systému. Vložte micro SD kartu do slotu na spodnej strane dosky Raspberry PI2, , pripojte klávesnicu, myš, HDMI monitor a ethernetový kábel. Pripojte napájanie cez microe USB port. A ste vo finále. Môžete sledovať nábeh Windows 10.

clip_image008

Úvodná obrazovka pri prvom spustení, zatiaľ bez aplikácie

Adaptovanie používateľského rozhrania pre rôzne Windows 10 zariadenia

8. augusta 2015

Vaša Windows 10 aplikácia sa musí flexibilne prispôsobiť nielen rôznej veľkosti displejov a ich orientácii. Prvky používateľského rozhrania bude treba zrejme usporiadať inak pri zobrazení na veľkej obrazovke v režime na šírku a inak na menšej obrazovke telefónu pri základnej orientácii na výšku. Kombinatorika týmto nekončí, aplikácie sa na väčších obrazovkách zariadení, ktoré nie sú prepnuté do tablet módu štandardne zobrazujú v oknách, pričom ich veľkosť môže používateľ meniť.

V časti venovanej dizajnu sme vysvetlili, že Windows 10 používa algoritmus pre zmenu mierky, ktorý normalizuje spôsob zobrazovania prvkov používateľského rozhrania a fontov. Algoritmus berie do úvahy pozorovaciu vzdialenosť a rozlíšenie obrazovky pre optimalizáciu vnímania veľkosti prvkov. Pri definovaní prvkov budete namiesto skutočných pixelov používať takzvané efektívne pixely.

VyvojWindows1 Pri návrhu prvku s rozmerom 1 ” sa  bude tento prvok zdať veľký približne 1 ” na všetkých zariadeniach. Na menších zariadeniach pritom môže mať 100 x 100 fyzických pixelov a na veľkej obrazovke s vysokou hustotou pixelov, môže mať 200 x 200 fyzických pixelov.

Zmena usporiadania prvkov

Ako to funguje v praxi, ukážeme na jednoduchej aplikácii. Vo Visual Studiu 2015 vytvorte  projekt typu UWP (Universal Windows Platform) s využitím šablóny Blank App. Pre nekomerčné účely môžete využiť verziu Copmmunity Edition, ktorá je zdarma. Pri vytváraní prvého projektu na vašom vývojárskom počítači s Windows 10 budete upozornení aby ste zapli vývojársky mód umožňujúci spúšťať a ladiť aplikácie.

VyvojWindows2

Zapnutie režimu vývojára v nastaveniach Windows 10

Na stránke MainPage.xaml definujeme niekoľko prvkov používateľského rozhrania, vhodne rozmiestnených, napríklad

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <StackPanel x:Name="hlavnyPanel" Margin="8,32,0,0">
       <TextBlock Text="Flexibilná aplikácia!" Margin="0,0,0,40"/>
       <TextBlock Text="Zadajte vaše meno a priezvisko"/>
       <StackPanel x:Name="vstupnyPanel" Orientation="Horizontal" Margin="0,20,0,20">
         <TextBox x:Name="menoTB" Width="280" HorizontalAlignment="Left"/>
         <Button x:Name="pridajBT" Content="Pridaj do zoznamu"/>
       </StackPanel>
       <TextBlock x:Name="vystupTB"/>
   </StackPanel>
</Grid>

Prvky používateľského rozhrania sú zapuzdrené v dvoch vnorených vizuálnych kontejneroch typu StackPanel. Úlohou tohto kontejnera je usporiadať prvky vertikálne, čo je implicitná voľba, alebo horizontálne, ak túto voľbu nastavíte pomocou parametra Orientation. Prvý kontejner usporiadal prvky zvislo vrátane druhého kontejnera, ktorý  usporiadal prvky “menoTB” a “pridajBT” vodorovne. Nakoľko sme sa zamerali na flexibilitu používateľského rozhrania nebudeme riešiť obsluhu udalosti zatlačenia tlačidla.

VyvojWindows3

Spustenie aplikácie na vývojárskom počítači. Všimnite si diagnostické okno, ktoré ukazuje ako vaša aplikácia zaťažuje procesor, spotrebováva pamäť a iné zdroje počítača na ktorom je spustená

Na širšom displeji, v širšom okne, alebo na telefóne pri orientácii na šírku je toto usporiadanie prehľadné. Ako bude aplikácia zobrazená na displeji telefónu pri orientácii na výšku. Nemusíte pripájať telefón, ani spúšťať emulátor, stačí ak prepnete náhľadové okno vývojového prostredia do režimu vybraného typu displeja. Pri náhľade v tomto režime zistíte, že tlačidlo sa nezobrazilo celé. Takto navrhnutá aplikácia by sa zle ovládala, nehovoriac o tom, čo by si používateľ pomyslel o jej tvorcoch.

VyvojWindows4

Simulovanie zobrazenia na displeji telefónu. Všimnite si vľavo výber veľkostí displejov na ktorých môžete simulovať zobrazenie vašej aplikácie v náhľadovom okne Visual Studia.

Aby sa vaša aplikácia, presnejšie rozmiestnenie jej prvkov prispôsobilo rozmerom displeja, alebo okna, budete potrebovať triedu VisualStateManager. Jej úlohou je správa logických stavov zobrazovania a realizácia vhodných transformácií na prispôsobenie rozloženia prvkov aktuálnemu rozmeru okna aplikácie. Napríklad pri užšom okne môžete nielen inak usporiadať prvky, ale aj zmenšiť šírku okrajov a podobne.

Za úvodný tag Grid, pred prvý element StackPanel vložte blok XAML kódu

<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="641" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="narrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="vstupnyPanel.Orientation" Value="Vertical"/>
<Setter Target="pridajBT.Margin" Value="0,4,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Pokiaľ má aplikácia na šírku k dispozícii viac než 640 pixelov, zostane používateľské rozhranie nezmenené. Na užšej obrazovke sa zmení orientácia usporiadania prvkov vo vnútri vzuálneho kontejnera StackPanel „vstupnyPanel“ z horizontálnej na vertikálnu, takže tlačidlo sa  zobrazí pod prvkom na zadanie mena a priezviska.

VyvojWindows5

Zmena usporiadania prvkov na úzkej obrazovke

VisualState s názvom wideState má adaptívny trigger nastavený pomocou parametra MinWindowWidth, ktorý definuje minimálnu šírku okna 641. To znamená, že tento status je aktívny iba v prípade, ak šírka okna nie je menšia ako nastavené minimum v tomto prípade 641 pixelov. V tomto stave sa zobrazí implicitný návrh používateľského rozhrania. Nemusíte nastavovať žiadne seter objekty pre tento stav, nakoľko využíva vlastnosti rozvrhnutia a veľkosti prvkov, ktoré ste definovali v XAML návrhu stránky. Druhý VisualState, s názvom narrowState, má trigger AdaptiveTrigger, presnejšie jeho parameter MinWindowWidth nastavený na hodnotu 0. Tento stav sa použije ak je šírka okna je väčšia ako 0, ale menšia ako 641 pixelov. V tomto stave je potrebné pomocou objektov Setter definovať, ktoré vlastnosti ktorých prvkov v používateľskom rozhraní sa zmenia.

Skrývanie nepoužívaných prvkov

Na menších displejoch môžete na základne obrazovke zobraziť iba najčastejšie používané prvky a ďalšie si používateľ zobrazí napríklad posunutím. Na väčšej obrazovke zobrazíte naraz viac prvkov pre vyššiu variabilitu ovládania. Veľa aplikácií využíva zobrazenie typu master – detail. Na malej obrazovke sa vypíše zoznam objektov a po kliknutí na vybraný objekt sa vypíšu detailné informácie. Na PC a tabletoch sa detaily o vybranom objekte zobrazia spravidla vpravo od zoznamu objektov. Ako jednu z možností realizácie ukážeme využitie prvku SplitView, ktorý rozdeľuje obrazovku na dve časti. Ľavá môže byť použitá pre panel menu, alebo zoznam objektov a pravá zobrazuje vybraný obsah. V móde Overlay sa panel zobrazí tak, že prekryje hlavné okno, v móde CompactOverlay je panel prekrytý oknom obsahu. Odporúčame v tomto režime zobraziť len ikony.

VyvojWindows7

Prvok SplitView v móde CompactOverlay

V móde Inline, ktorý využijeme v príklade je panel zobrazený vedľa okna kontextu. Ukážeme to na jednoduchom príklade. :

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView Name="Split" PanePlacement="Left" OpenPaneLength="200" IsPaneOpen="False" DisplayMode="Inline">
<SplitView.Pane>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<SymbolIcon HorizontalAlignment="Left" Foreground="Gold" Symbol="Favorite"/>
<TextBlock Grid.Column="1" Text="Obľúbené" />
<SymbolIcon Grid.Row="2" HorizontalAlignment="Left" Foreground="Red" Symbol="Sync" />
<TextBlock Grid.Column="1" Grid.Row="2" Text="Synchronizuj" />
<SymbolIcon Grid.Row="4" HorizontalAlignment="Left" Foreground="Green" Symbol="Save" />
<TextBlock Grid.Column="1" Grid.Row="4" Text="Ulož" />
<SymbolIcon Grid.Row="6" HorizontalAlignment="Left" Symbol="Setting" />
<TextBlock Grid.Column="1" Grid.Row="6" Text="Nastave" />
</Grid>
</SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Background="White" Click="Button_Click">
<StackPanel>
<Rectangle Height="3" Width="20" Fill="Black" />
<Rectangle Margin="0,5" Height="3" Width="20" Fill="Black" />
<Rectangle Height="3" Width="20" Fill="Black" />
</StackPanel>
</Button>
<TextBlock Margin="10" Grid.Row="1" Text="Obsah hlavného okna" />
</Grid>
</SplitView>
</Grid>

 

Tlačidlom sa zapína, alebo vypína zobrazenie panelu

private void Button_Click(object sender, RoutedEventArgs e)
{
Split.IsPaneOpen = !Split.IsPaneOpen;
}

Teraz môžete aplikáciu vyskúšať a tlačidlom zobrazovať a skrývať panel ponuky funkcií

VyvojWindows6

Skrytý (vľavo) a zobrazený (vpravo) ľavý panel prvku SplitView

Ak ste si v predchádzajúcom príklade vyskúšali triedu VisualStateManager, pointa prispôsobenia prvku SplitView vás už určite napadla. Pri širokom displeji stačí nastaviť parameter Split.IsPaneOpen na true a na úzkom displeji na false, aby sa zobrazil len po zatlačení tlačidla.

 

Dizajn aplikácií pre Windows 10

7. augusta 2015

Možno niektorí z vás po preštudovaní predchádzajúceho dielu skúsili vytvoriť Universal Windows Platform (UWP) aplikáciu. Predpokladáme, že aplikácia sa na počítači na ktorom ste ju navrhovali zobrazovala k vašej úplnej spokojnosti. Ako by to dopadlo, keby ste svoju aplikáciu spustili na malom displeji telefónu, prípadne na projekčnom plátne, či zariadení Surface Hub s veľkou obrazovkou.

Univerzálne aplikácie vyžadujú flexibilný dizajn

UWP aplikácie bude možné spustiť na akomkoľvek zariadení so systémom Windows 10, či už z telefónu, tabletu, PC, prípadne mikrokontrolérovej dosky ako napríklad Raspberry PI 2, nositeľných zariadeniach, či dokonca domácich spotrebičoch. Preto je potrebné navrhnúť a vytvoriť užívateľské rozhranie, ktoré bude možné používať na zariadeniach s rôznymi veľkosťami displeja.

V minulej časti sme sa venovali architektúre UWP aplikácií a rozdelenie zariadení do rodín

  • IoT: mikrokontroléry, nositeľné zariadenia, domáce spotrebiče
  • Mobilné zariadenia: Windows Phone, phablety
  • Desktop: Tablety, notebooky, PC
  • Tímové zariadenia: Surface hub

Môžete vytvoriť aplikáciu pre jednu, viacero, alebo všetky produktové rodiny. Môžete navrhnúť rozhranie, ktoré funguje skvele pre tablety a osobné počítače, a rozhranie pre mobilné zariadenia, s využitím väčšiny svojho kódu. Ak by ste aplikáciu navrhnutú „natvrdo“ pre telefóny spustili na veľkom displeji, väčšina obrazovky by bola nevyužitá. Opačne, ak by ste aplikáciu navrhli primárne pre tablet, alebo PC, na menších displejoch telefónov by používateľské rozhranie aplikácie bolo nečitateľné, alebo by sa vôbec nedalo zobraziť

Efektívne pixely a mierka platformy

Aby vaša aplikácia fungovala bez úprav na širokej škále zariadení s rôznymi uhlopriečkami displeja a rôznym rozlíšením,  Windows 10 používa algoritmus pre zmenu mierky, ktorý normalizuje spôsob zobrazovania prvkov používateľského rozhrania a fontov. Algoritmus berie do úvahy pozorovaciu vzdialenosť a rozlíšenie obrazovky pre optimalizáciu vnímania veľkosti prvkov. Algoritmus mierky zabezpečí, že 24 pixelové písmo bude na Surface Hub s uhlopriečkou 84”  rovnako dobre čitateľné ako na 5 ” telefóne, na ktorý pozeráme z kratšej vzdialenosti.

Dizajn1

 

algoritmus pre zmenu mierky podľa veľkosti displeja

Vzhľadom na  fungovanie algoritmu zmeny mierky budete pri navrhovaní prvkov používateľského rozhrania používať namiesto skutočných pixelov, takzvané efektívne pixely. Umožnia vám sústrediť sa na skutočné vnímané veľkosti prvku, bez toho aby sa museli starať o hustotu pixelov alebo vzdialenosť, z ktorej sa používateľ pozerá na displej. Napríklad, pri návrhu prvku s rozmerom 1 ‘ sa  bude tento prvok zdať veľký približne 1 ” na všetkých zariadeniach. Na menších zariadeniach pritom môže mať 100 x 100 fyzických pixelov a na veľkej obrazovke s vysokou hustotou pixelov, môže mať 200 x 200 fyzických pixelov.

Vďaka efektívnym pixelom môžete pri návrhu používateľského rozhrania ignorovať hustotu pixelov a aktuálne rozlíšenie obrazovky. Pri škálovaní sa využívajú násobky štyroch.  Preto by ste mali pre ostrý vzhľad využívať pri návrhu mriežku obrazových bodov 4×4. Potom okraje, veľkosti a pozície prvkov používateľského rozhrania a pozície budú násobkom 4 efektívnych pixelov. Najlepšie to vysvetlí obrázok.

Dizajn2

Porovnanie mriežky 40 x 40 a 32 x 32 pixelov. V druhom prípade bude pri škálovaní text rozostrený

Flexibilita

Pri optimalizácii vašej aplikácie rozhranie pre špecifické šírky obrazovky môžete využiť niekoľko návrhových odporúčaní

Zmena úpravy obsahu – Pre rôzne veľkosti displeja môžete optimalizovať veľkosť rámca zobrazujúceho text, prípadne obrázok, napríklad úpravou okrajov a veľkosti prvkov používateľského rozhrania. Bude platiť jednoduché pravidlo: väčšia obrazovka – o niečo vyšší komfort, avšak aplikácia bude dobre použiteľná aj na najmenšom displeji mobilného telefónu.

Zmena pozície – môžete zmeniť umiestnenie prvkov používateľského rozhrania, aby čo najlepšie využili displej zariadenie. Typickým príkladom je zmena orientácie na výšku/na šírku.

Dizajn3

Zmena pozície prvkov používateľského rozhrania

Zmena toku – týka sa textu, prípadne usporiadania prvkov používateľského rozhrania. Typickým príkladom je rozdelenie textu pri zobrazení na širokej obrazovke do viacerých stĺpcov pre lepší komfort čítania. Taktiež ovládacie prvky vo vizuálnych kontejneroch sa môžu vhodne preskupovať.

Skrývanie a odhaľovanie – na menších displejoch môžete na základne obrazovke zobraziť iba najpoužívanejšie prvky a ďalšie si používateľ zobrazí napríklad posunutím. Prípadne na väčšej obrazovke zobrazíte naraz viac prvkov pre vyššiu variabilitu ovládania. Typickým príkladom je prehrávač multimédií, kde na malom displeji zobrazíte len nevyhnutné základné funkcie a na väčšej obrazovke aj ďalšie prvky, napríklad ekvalizér.

Zobrazovanie detailov – Vývojári Android aplikácií poznajú tento princíp ako fragmenty. Používa sa pre aplikácie zobrazujúce informácie typu master – detail. Na malej obrazovke sa vypíše zoznam objektov a po kliknutí na vybraný objekt sa vypíšu detailné informácie. Na PC a tabletoch sa detaily o vybranom objekte zobrazia spravidla vpravo od zoznamu objektov.

Dizajn4

Zobrazovanie detailov na zariadeniach s rôznou šírkou displeja

Dizajnové odporúčania

Dizajn používateľského rozhrania je výsledkom spolupráce dizajnérov, ergonómov, typografov a odborníkov v mnohých ďalších odvetviach. Vychádza z troch základných pilierov. Z nemeckého architektonického štýlu Bauhaus, ktorý sa etabloval v roku 1920, dizajnového štýlu Swis design, založeného na typografii, ktorý ovládol šesťdesiate roky a z princípu „Way finding “- dizajnu, ktorý sa v posledných desaťročiach využíva v dopravných systémoch a ktorý symbolizuje plynulosť a ľahkú orientáciu pasažierov. Zdôrazníme dva základné princípy návrhu dizajnu aplikácií – estetiku a účelnosť, ktoré sa navzájom synergicky dopĺňajú.

Dizajnéri a vývojári majú k dispozícii niekoľko veľmi silných výrazových prostriedkov na zatraktívnenie dizajnu používateľského rozhrania. Napríklad dobre navrhnuté animácie použité v rozumnom rozsahu nielenže  umocňujú dojem a zážitok z aplikácie, ale predovšetkým pomáhajú používateľom pochopiť kontext zmien pomocou vizuálnych prechodov. Poskytnite používateľovi zrozumiteľné návody, napríklad formou tipov, aby dokázali s vašou aplikáciou efektívne pracovať bez nutnosti štúdia manuálov.

Aj obrazovky na nastavovanie parametrov by mali akceptovať všetky spôsoby ovládania, ktoré prichádzajú do úvahy. Predovšetkým dotykové ovládanie na menších displejoch. Pre lepšiu prehľadnosť odporúčame umiestňovať ovládacie prvky do sekcií. Významnejšie prvky je potrebné umiestniť v hornej časti obrazovky aby boli dostupné bez nutnosti rolovania. Uvážte, či k niektorým prvkom neposkytnete vysvetlenie. Na tabletoch môžete pre nastavovanie skupín parametrov využiť zobrazenie typu master – details.

Dizajn5

Príklad dizajnu nastavovania parametrov aplikácie pre telefóny.

Dizajn6

Príklad dizajnu nastavovania parametrov aplikácie pre tablety.