<Page
  x:Class="FaceEmotion.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:FaceEmotion"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">

  <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

  <Grid Height="90" x:Name="LogoStackPanel" Background="#0078D7"
     RelativePanel.AlignRightWithPanel="True"
     RelativePanel.AlignLeftWithPanel="True">

  <StackPanel Orientation="Vertical"
     HorizontalAlignment="Left"
     Margin="20,4,0,0">
  <Image Height="24"
     Margin="2,0,0,0"
     HorizontalAlignment="Left"
     Source="Images/microsoftLogo.png" />
  <TextBlock Text="Cognitive Serivces"
     FontSize="26"
     Foreground="WhiteSmoke"></TextBlock>
  <TextBlock Text="Face and Emotion Detection"
     FontSize="18"
     Foreground="WhiteSmoke"></TextBlock>
  </StackPanel>
  </Grid>

  <Grid x:Name="ImagePanel"
     RelativePanel.AlignLeftWith="LogoStackPanel"
     RelativePanel.Below="LogoStackPanel">

  <Image x:Name="FacePhoto"
     Width="600"
     Height="800"
     Margin="20,10,40,44"
     Stretch="Uniform"
     VerticalAlignment="Top"
     HorizontalAlignment="Left" />

  <Canvas Name="FacesCanvas"
     Margin="20,10,40,44" />

  <Button x:Name="BrowseButton"
     Margin="20,5,0,10"
     Height="32"
     VerticalAlignment="Bottom"
     Content="Browse..."
     Click="BrowseButton_Click" />
  </Grid>

  </RelativePanel>
</Page>

namespace FaceEmotion.ViewModels
{
  class MyFaceModel
  {
    public object Age { get; internal set; }
    public string FaceId { get; internal set; }
    public FaceRectangle FaceRect { get; internal set; }
    public object Gender { get; internal set; }
  }
}

private readonly FaceServiceClient faceServiceClient = new FaceServiceClient("replacewithyourkey");

private async void BrowseButton_Click(object sender, RoutedEventArgs e)
{
  //Upload picture
  FileOpenPicker openPicker = new FileOpenPicker();
  openPicker.ViewMode = PickerViewMode.Thumbnail;
  openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
  openPicker.FileTypeFilter.Add(".jpg");
  openPicker.FileTypeFilter.Add(".jpeg");
  openPicker.FileTypeFilter.Add(".png");

  StorageFile file = await openPicker.PickSingleFileAsync();
  var bitmapImage = new BitmapImage();

  var stream = await file.OpenAsync(FileAccessMode.Read);
  bitmapImage.SetSource(stream);

  if (file != null)
  {
    FacePhoto.Source = bitmapImage;
    scale = FacePhoto.Width / bitmapImage.PixelWidth;
  }
  else
  {
    Debug.WriteLine("Operation cancelled.");
  }

  //Remove any existing rectangles from previous events
  FacesCanvas.Children.Clear();

  //DetectFaces
  var s = await file.OpenAsync(FileAccessMode.Read);
  List<MyFaceModel> faces = await DetectFaces(s.AsStream());
  var t = await file.OpenAsync(FileAccessMode.Read);
  DrawFaces(faces);
}

//Remove any existing rectangles from previous events
FacesCanvas.Children.Clear();

//DetectFaces
var s = await file.OpenAsync(FileAccessMode.Read);
List<MyFaceModel> faces = await DetectFaces(s.AsStream());

DrawFaces(faces);

private async Task<List<MyFaceModel>> DetectFaces(Stream imageStream)
{
  var collection = new List<MyFaceModel>();
  var attributes = new List<FaceAttributeType>();
  attributes.Add(FaceAttributeType.Gender);
  attributes.Add(FaceAttributeType.Age);

  try
  {
    using (var s = imageStream)
    {
      var faces = await faceServiceClient.DetectAsync(s, true, true, attributes);
      foreach (var face in faces)
      {
       collection.Add(new MyFaceModel()
       {
       FaceId = face.FaceId.ToString(),
       FaceRect = face.FaceRectangle,
       Gender = face.FaceAttributes.Gender,
       Age = face.FaceAttributes.Age
       });
      }
    }
  }
  catch (InvalidOperationException e)
  {
    Debug.WriteLine("Error Message: " + e.Message);
  }
  return collection;
}

private void DrawFaces(List<MyFaceModel> faces)
{
  //Check if there are any faces in this image
  if (faces != null)
  {
  //For each detected face
   for (int i = 0; i < faces.Count; i++)
   {
    Rectangle faceBoundingBox = new Rectangle();

    //Set bounding box stroke properties
    faceBoundingBox.StrokeThickness = 3;

    //Highlight the first face in the set
    faceBoundingBox.Stroke = (i == 0 ? new SolidColorBrush(Colors.White) : new SolidColorBrush(Colors.DeepSkyBlue));
    if (scale == 0)
    {
     scale = 1;
    }
    faceBoundingBox.Margin = new Thickness(faces[i].FaceRect.Left * scale, faces[i].FaceRect.Top * scale, 
                                           faces[i].FaceRect.Height * scale, faces[i].FaceRect.Width * scale);
    faceBoundingBox.Width = faces[i].FaceRect.Width * scale;
    faceBoundingBox.Height = faces[i].FaceRect.Height * scale;
    TextBlock age = new TextBlock();
    var predictedAge = Convert.ToInt32(faces[i].Age);

    // Acquire keys and sort them.
    var list = detectedEmotion.Keys.ToList();
    list.Sort();

    age.Text = faces[i].Gender + ", " + predictedAge;
    age.Margin = new Thickness(faces[i].FaceRect.Left * scale, (faces[i].FaceRect.Top * scale) - 20, 
                               faces[i].FaceRect.Height * scale, faces[i].FaceRect.Width * scale);
    age.Foreground = (i == 0 ? new SolidColorBrush(Colors.White) : new SolidColorBrush(Colors.DeepSkyBlue));
    //Add grid to canvas containing all face UI objects
    FacesCanvas.Children.Add(faceBoundingBox);
    FacesCanvas.Children.Add(age);
   }
  }
  else
  {
   Debug.WriteLine("No faces identified");
  }
}

Wir sprechen schon seit Anfang der 80er Jahre über den persönlichen Computer (PC). Der PC wurde so genannt, weil er nicht nur für den professionellen Bereich eingesetzt wurde, sondern jedem den Zugang zur Technologie ermöglichen sollte. Die Computer waren damals allerdings nicht auf ihre Nutzer abgestimmt und somit nicht "persönlich" wie wir es heute verstehen. Nun beginnt eine neue Ära von "More Personal Computing". Durch die Anpassung der Technologie an den Menschen werden Mobilität und natürliche Interaktionen gefördert.

Bei More Personal Computing handelt es sich um innovative Eingabe- und Ausgabemethoden, die eine natürlichere Interaktion mit der Technologie erlauben, aber auch um Intelligenz. Als Nutzer möchte ich ein System, das intelligent genug ist, um mir nur die Optionen anzubieten, die in meiner Situation Sinn machen und meinem Naturell entsprechen. Dafür ist es wichtig den Kontext des Nutzers zu verstehen und dabei nicht nur Ort und Uhrzeit berücksichtigen, sondern auch den Menschen und seine Emotionen.

Technologien

Entwickler können das Speech SDK benutzen, um ihre eigene App per Sprache steuern zu lassen. Aber nicht nur das - auch eine Sprachausgabe ist damit möglich.

• Sample Code Speech
• Blogartikel Sprachfähige Apps entwickeln

Cortana ist Microsofts persönliche Assistentin, die den Nutzer bei verschiedenen Anforderungen und Aufgaben unterstützt. Wir können auch eigene Anwendungen mit Cortana erweitern und somit die Nutzereinbindung und Produktivität erhöhen.

• TechTalk Cortana für Entwickler

Schreiben und Zeichnen beschreiben immer noch eine natürliche Art der Kommunikation. Die Verwendung eines Stifts ist in Windows 10 mehr denn je dem natürlichen Schreiben auf Papier nachempfunden. Mit DirectInk können Entwickler sehr einfach digitale Stifteingabe in ihre eigene Apps einbauen.

In Windows 10 können wir eine direkte Manipulation mittels Touch ermöglichen, aber auch Gestensteuerung mit Kinect.

Authentifizierung durch Passwörter ist nicht mehr ausreichend. Diese sind meistens schwer zu merken und werden daher oft wiederverwendet. Somit sind sie weniger sicher. Außerdem können Passwörter das Ziel von Replay Angriffen sein bzw. Benutzer können versehentlich ihre Passwörter aufgrund von Phishing-Angriffen verfügbar machen.

Microsoft Passport erlaubt eine sichere zweistufige Authentifizierung durch eine PIN und/oder Windows Hello. Letzteres stellt eine biometrische Authentifizierung dar, so dass Nutzer sich per Fingerabdruck-, Gesichts- oder Iriserkennung anmelden können. Dabei werden die Biometriedaten verschlüsselt lokal gespeichert.

Project Oxford ist eine Sammlung von REST APIs und SDKs, mit der Entwickler intelligente Funktionen, wie Bild-, Sprach- und Texterkennung, in ihre Anwendungen integrieren können - auch ohne Machine Learning-Experte zu sein.

• https://www.projectoxford.ai/demo
• how-old.net
• TechTalk Project Oxford's Speech SDK
• TechTalk Project Oxford- Vision, Face and Emotion APIs

Mit Microsoft Band haben Entwickler Zugriff auf Sensordaten, wie Beschleunigung, UV-Strahlenintensität und Anzahl der zurückgelegten Schritte. Die SDK steht für die Plattformen iOS, Android und Windows zur Verfügung.

• Sample Code Band
• TechTalk Microsoft Health SDK

All diese Technologien ermöglichen die Entwicklung von "more personal computing" und lassen uns schon heute die Zukunft erleben.

Zwei XAML Controls erleichtern das Entwickeln von adaptiven Benutzerschnittstellen, nämlich Adaptive Trigger und Relative Panel.

Adaptive Trigger

Schon vor Windows 10 konnten wir Visual States benutzen, um das Erscheinungsbild von Steuerelemente in bestimmten Zuständen zu definieren. Bisher konnte man jedoch einen State nur im Code aktivieren und die Änderungen der UI wurden als Animationen spezifiziert. Mittels Adaptive Trigger können wir nun einen State innerhalb XAML auslösen und mit Setter die Werte jeder Property ändern.
Somit können wir die Fenstergröße dynamisch ermitteln und als Reaktion darauf das Layout ändern.

Relative Panel

Mit dem neuen XAML Control Relative Panel können Entwickler, Steuerelemente im Verhältnis zueinander oder zum Panel platzieren.
Wenn wir die State Trigger und Setter mit dem Relative Panel verbinden, können wir auf eine sehr einfache Weise Elemente neu anordnen.

Adaptive UI mit Adaptive Trigger und Relative Panel

Das Code-Snippet unten bezieht sich auf eine Beispiel-App, die zwei Visual States besitzt. Der NarrowState wird aktiviert, falls die Bildschirmgröße kleiner 660 und größer 1 ist. Der MediumLargeState dagegen, falls das Fenster oder der Bildschirm größer 660 ist. Die Größe wird in der Einheit Effektive Pixel gemessen.
Jedes Visual State Element kann eine Liste an StateTrigger und eine Liste an Setter enthalten.

<VisualStateManager.VisualStateGroups>
 <VisualStateGroup x:Name="WindowStates">
  <VisualState x:Name="NarrowState">
   <VisualState.StateTriggers>
     <AdaptiveTrigger MinWindowWidth="1"/>
   </VisualState.StateTriggers>
     <VisualState.Setters>
       <Setter Target="Title.(RelativePanel.Below)" Value="ImgUser1"> </Setter>
       <Setter Target="Title.(RelativePanel.AlignLeftWith)" Value="ImgUser1"> </Setter>
       <Setter Target="ImgUser1.(Source)" Value ="Images/CortanaUser1Cut.png"> </Setter>
       <Setter Target="ImgUser1.(Width)" Value ="500"> </Setter>
       <Setter Target="ImgUser2.(Source)" Value ="null"> </Setter>
       <Setter Target="ImgUser3.(Source)" Value ="null"> </Setter>
     </VisualState.Setters>
  </VisualState>
  <VisualState x:Name="MediumLargeState">
   <VisualState.StateTriggers>
     <AdaptiveTrigger MinWindowWidth="660"/>
   </VisualState.StateTriggers>
     <VisualState.Setters>
       <Setter Target="Title.(RelativePanel.RightOf)" Value="ImgUser2"> </Setter>
       <Setter Target="Title.(RelativePanel.AlignTopWith)" Value="ImgUser2"> </Setter>
     </VisualState.Setters>
   </VisualState>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Falls der Bildschirm größer als 660 ist, werden drei Bilder auf der linken Seite und Text auf der rechten Seite gezeigt. Diese Elemente sind innerhalb eines Relative Panels gesetzt. Zum Beispiel steht der Textparagraph unterhalb des Titels und ist links auf derselben Linie wie der Titel ausgerichtet.

<TextBlock x:Name="Content" RelativePanel.Below="Title" RelativePanel.AlignLeftWith="Title" …>

Sobald man aber das Fenster kleiner zieht, werden die drei Bilder durch das erste Bild in einem größeren Format ersetzt. Der Text springt außerdem unter das Bild. Dafür habe ich einfach mittels Setter die zwei Properties RelativePanel.Below und RelativePanel.AlignLeft geändert. 
Dieselbe Darstellung der Elemente würde auch auf dem Smartphone sichtbar sein, so dass der Nutzer den Text einfach lesen kann.

In diesem Blogpost haben wir gesehen, wie man eine adaptive Anwendung mittels Relative Panel und Adaptive Trigger mit sehr geringem Aufwand gestalten kann. Die Anpassung der UI an unterschiedliche Bildschirme ist ein wichtiger Bestandteil der Universal Windows Platform Apps und gewährt dem Nutzer eine optimale User Experience.

Weitere Infos zum Thema:

• Reaktionsfähiges Design für Universal Windows Platform (UWP)-Apps – Grundlagen
• Video über "Adaptive UI" (englisch)

Mit Windows 10 haben Entwickler die Möglichkeit, dieselbe Anwendung auf unterschiedlichen Geräte laufen zu lassen. Die Anwendung erreicht somit eine viel größere Anzahl an Nutzer mit sehr wenig zusätzlichem Programmieraufwand. Neben den vielen Vorteilen der Universal Windows Platform (UWP) muss aber auch mit der Herausforderung umgegangen werden, dass die Apps auf unterschiedlichen Bildschirmgrößen und in verschiedene Nutzungskontexte benutzerfreundlich und zugänglich bleiben.

Um die Benutzeroberfläche und die Funktionalitäten einer UWP Anwendung an die unterschiedlichen Geräte anzupassen, stellt Microsoft bestimmte Features zu Verfügung.  Entwickler werden mit integrierten Funktionen unterstützt, wie Effective Pixel, Plattformskalierung, universelle Eingabemethoden und Input Intelligence.

Effective Pixel und Plattformskalierung stellen sicher, dass die Größe der Anzeige- und Bedienelemente auf unterschiedlich großen Bildschirmen erhalten bleibt und dass Zeichensätze lesbar bleiben. Entwickler müssen sich daher keine Gedanken über die Pixeldichte oder den Abstand zum Bildschirm machen, da alles für sie automatisch geregelt wird.

Dank der universellen Eingabemethoden und des Input Intelligence-Features werden Eingabemethoden und Steuerelemente automatisch angepasst. Zum Beispiel passt sich ein Dropdown Menü automatisch an die Eingabemethode an (siehe Bild). Bei Verwendung einer Maus wird das Menü komprimiert dargestellt, während bei Toucheingabe der Inhalt auf einer größeren Fläche dargestellt wird. Somit kann man es immer bequem bedienen.

Um die beste User Experience zu erschaffen, sollten Designer und Entwickler trotzdem explizit für verschiedene Displaygrößen gestalten. Dafür gibt es drei unterschiedliche Design-Ansätze.

Responsive Design beschreibt die sukzessive Änderung der Größe und Anpassung des Inhalts. So wird zum Beispiel ein Textfeld immer an die aktuelle Größe des Bildschirms angepasst, ohne dadurch das Layout zu ändern.

Die weitere Optimierung der Darstellung wird als Adaptive Design bezeichnet. Durch die Neuanordnung des Inhalts oder Einfügen und Ersetzen von Bedienelemente kann der Bildschirm effektiver benutzt und die Navigation reduziert werden.

Natürlich haben Entwickler immer noch die Möglichkeit eigene, stark anders gestaltete User Interfaces zu implementieren. Diese Technik wird als Tailored Design bezeichnet. Ein Beispiel dafür wäre, die individuelle Gestaltung von Geräten, die mit einer Hand bedient werden können.

In dem nächsten Artikel werde ich mich hauptsächlich auf das Adaptive Design konzentrieren und erklären, wie man eine adaptive Benutzeroberfläche implementieren kann.

• Meet Cortana
• Schnellstart: Sprachbefehle mit Cortana
• Dokumentation: Speech Synthesis
• Schnellstart: Spracherkennung
• MVA Kurs: Sprachfähige Apps mit Cortana und der Speech SDK
  
  

Cortana ist Microsofts persönliche Assistentin, die den Nutzer bei verschiedenen Anforderungen und Aufgaben unterstützt. Sie wurde im Dezember 2014 in Deutschland angekündigt und befindet sich noch in der Alpha-Phase. Neben einer Vielzahl an Funktionen, bietet Cortana auch die Möglichkeit, eigene Apps einzubinden.
Diese Blogserie zeigt, wie man sprachfähige Anwendungen mit Cortana und der Speech SDK entwickeln kann.

Ich werde nun anhand von einer Sample App in diesem ersten Blogartikel zeigen, wie man Schritt für Schritt eine Anwendung mit Cortana erweitern kann. In diesem Fall überarbeite ich eine App namens GasFinder, die ich vor kurzem implementiert habe. Die App ermöglicht das Suchen und Finden von günstigen Tankstellen in der Nähe des Nutzers. Es handelt sich jedoch nur um eine Beispiel-App, die keine realen Daten enthält, sondern nur exemplarisch immer eine erfundene Tankstelle als Ergebnis zurückgibt. Das Projekt ist auch auf github verfügbar.

Für die Integration eigener Apps mit Cortana muss man hauptsächlich drei Schritten folgen:

1. Eine Voice Command Definition (VCD) XML-Datei erstellen, die die Befehle enthält.
2. Die VCD XML-Datei bei der App Inbetriebnahme registrieren.
3. Die Voice Commands entsprechend bearbeiten, falls die App mittels Cortana aktiviert wurde.

Als Erstes müssen wir also eine XML-Datei erstellen, die die Sprachbefehle enthält. Diese VoiceCommandDefinition-Datei kann aus einem oder mehreren CommandSets für unterschiedliche Sprachen bestehen. Für diese Demo habe ich nur ein Set für die deutsche Sprache erstellt. Dieses enthält die Tags <CommandPrefix>, <Example>, <Command> und mehrere <PhraseList>s.

Als <CommandPrefix> kannst du den Namen deiner Anwendung oder eine Kurzform davon eingeben. Der Nutzer wird später damit deine Anwendung starten können. Da meine App einen englischen Namen hat, habe ich den Prefix "Sprit Sucher" gegeben.

<Example> repräsentiert ein Beispiel auf der obersten Ebene, wie man mit deiner App interagieren kann. Dieses Beispiel erscheint auch, falls du Cortana "Was kann ich sagen?" fragst (siehe Bild unten).

<Command> beschreibt einen Befehl und enthält ein weiteres Beispiel: <Example>, gefolgt von dem was der Nutzer zu Cortana sagen kann: <ListenFor>, wie Cortana darauf antwortet soll: <Feedback> und welche Aktion sie ausführen soll: <Navigate>.

<ListenFor> kann mehrere Ausdrücke enthalten. Diese können darüber hinaus auch <PhraseTopic> und <PhraseList> enthalten.

Ich habe die XML-Datei "VCD" benannt und mit nur einem Befehl namens "NextStation" erweitert. Um unterschiedliche Varianten abzudecken, habe ich <PhraseList> verwendet. Zum Beispiel könnte der Nutzer statt "finde" auch "suche" oder "vermittle" sagen und verstanden werden.

<?xml version="1.0" encoding="utf-8"?>

<VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.1">
 <CommandSet xml:lang="de-DE">
  <CommandPrefix>Sprit Sucher</CommandPrefix>
  <Example> wo ist die nächste Tankstelle </Example>

  <Command Name="NextStation">
   <Example> wo ist die nächste Tankstelle </Example>
    <ListenFor> wo {ist} die nächste Tankstelle</ListenFor>
    <ListenFor> wo {ist} die nächste Tankstelle mit [billigem] {Sprit} </ListenFor>
    <ListenFor> {finde} die nächste Tankstelle </ListenFor>
    <ListenFor> {finde} die nächste Tankstelle mit [billigem] {Sprit} </ListenFor>
    <ListenFor> {finde} die nächste Tankstelle mit günstigem {Sprit} </ListenFor>
    <ListenFor> {finde} die günstigste Tankstelle [in meiner Nähe] </ListenFor>
    <Feedback> Suche Tankstelle... </Feedback>
    <Navigate />
   </Command>
    
   <PhraseList Label="ist">
     <Item> befindet sich </Item>
     <Item> finde ich </Item>
     <Item> gibt es </Item>
   </PhraseList>

   <PhraseList Label="finde">
     <Item> suche </Item>
     <Item> finde </Item>
     <Item> vermittle </Item>
     <Item> entdecke </Item>
   </PhraseList>

   <PhraseList Label="Sprit">
     <Item> Benzin </Item>
     <Item> Sprit </Item>
     <Item> E10 </Item>
     <Item> Super </Item>
     <Item> Super Plus </Item>
     <Item> Diesel </Item>
   </PhraseList>

 </CommandSet>
</VoiceCommands>

Um die erstellte XML-Datei beim Starten der App zu registrieren, muss man folgende Methode verwenden: await VoiceCommandManager.InstallCommandSetsFromStorageFileAsync(file); wobei file die VCD Datei ist. Dafür habe ich eine Methode RegisterVoiceCommands() im App.xaml.cs erstelllt, die ich dann in der OnLaunched() -Methode aufrufe.

private async void RegisterVoiceCommands()
{
     Uri uriVoiceCommands = new Uri("ms-appx:///vcd.xml", UriKind.Absolute);
     StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(uriVoiceCommands);
     try
     {
	 await VoiceCommandManager.InstallCommandSetsFromStorageFileAsync(file);
     }
	catch (Exception ex)
    {
	 string errorMessage = String.Format(
         "An error was encountered installing the Voice Command Definition file: \r\n {0:x} \r\n {1}",
         ex.HResult,
         ex.Message);
         Debug.WriteLine(errorMessage);
    }
}

In OnActivated werden dann die Befehle bearbeitet. Man kann entweder abhängig vom Befehl auf unterschiedliche Seiten der App navigieren oder immer auf eine bestimmte Seite navigieren und da die Befehle bearbeiten. Die letzte Variante ist auch die Vorgehensweise für unsere Demo-App. Wir prüfen erstmal, ob die Anwendung mittels Cortana aktiviert wurde indem wir schauen, ob ActivationKind gleich VoiceCommand ist und springen dann zur MainPage.

protected override void OnActivated(IActivatedEventArgs args)
{
     CommonInitialize();
	
    Frame rootFrame = Window.Current.Content as Frame;
    Type navType = typeof(MainPage);

    if (args.Kind == ActivationKind.VoiceCommand)
    {
      VoiceCommandActivatedEventArgs vcArgs = (VoiceCommandActivatedEventArgs)args;
      Debug.Assert(rootFrame.Navigate(navType, vcArgs.Result), 
				  "Failed to create initial page");
    }
     // Ensure the current window is active
     Window.Current.Activate();
 }

Somit sind wir mit der Integration von Cortana fertig. Diese wird nun die App GasFinder starten, sobald ein geeigneter Befehl erkannt wird. In den nächsten Blogartikeln werden ich euch vorstellen, wie man zwischen Sprach- und Text-Befehle unterscheiden kann und wie man den Dialog innerhalb der App  mittels der Speech SDK weiterführen kann.

Für das Aufnehmen der Gesten stellt Microsoft das Kinect Studio zur Verfügung. Mit diesem Programm kann man Daten von dem Kinect Sensor aufnehmen und abspielen. Die Videos werden als xrf (im RAW-Format) oder xef-Datei gespeichert und können dann im VGB in einer neuen Solution hochgeladen werden. Falls die Videos im RAW-Format gespeichert wurden, müssen sie noch mit dem KSConverter in eine xef-Datei umgewandelt werden.
 
Das Bild unten zeigt die Oberfläche des VGB Programms. Diese besteht aus unterschiedliche Fenstern und Menü-Optionen. Auf der linken Seite wird die Projektstruktur angezeigt. Eine Solution besteht aus unterschiedlichen Projekten, die jeweils einer bestimmten Geste zugeordnet sind. Jedes Projekt kann man außerdem in einem Training- und einem Analyse-Bereich unterteilen. Empfehlenswert ist ungefähr 90% der aufgenommenen Videos für das Training zu benutzen und 10% für die Analyse.
Um ein neues Projekt hinzuzufügen, kann man auf der Solution rechtsklicken und dann aus dem Kontextmenü "Create New Project" auswählen.
Ein Projekt kann entweder auf AdaBoostTrigger oder RFRProgress beruhen. Mit dem ersten Verfahren wird festgelegt, ob der Nutzer eine bestimmte Geste durchführt, während mit dem zweiten der Fortschritt der durchgeführten Geste festgelegt wird.

Das Ansichtsfenster in der Mitte zeigt eine 2D und eine 3D Sicht des Videos, das gerade bearbeitet wird. Unterhalb befindet sich das Steuerungsfenster und auf der rechten Seite die Eigenschaften des Projekts oder der Aufnahmen.
 
Das Markieren (taggen) der Videos bestimmt den Abschnitt, durch welche die Geste definiert wird und sollte aufmerksam durchgeführt werden. Tastenkürzel können dafür sehr hilfreich sein. Diese sind unterhalb des Steuerungsfensters versteckt. So kann man zum Beispiel Strg+HOME drücken, um den Cursor an den Anfang des Videos zu setzen und dann die rechte Pfeiltaste gedrückt halten um das Video zu markieren. Am Ende kann man im Falle eines AdaBoostTrigger-Projekts entweder Enter drücken um den ausgewählten Abschnitt auf "true" zu setzen oder die Leertaste drücken um den Abschnitt auf "false" zu setzen.
 
Zum Schluss kann man eine bestimmte Geste oder die ganze Datenbank (also die ganze Solution) builden und mittels Live Preview testen, ob die Gestenerkennung robust ist. Die erstellte gbd- oder gba-Datei kann dann abschließend in die Kinectanwendung eingebunden werden.
 
Insgesamt bietet Visual Gesture Builder eine schnelle und einfache Methode eigene Gesten zu erstellen und steigert somit die Produktivität. Am besten einfach gleich ausprobieren und eigene Gesten erstellen. ;)
 
Weitere Quellen: VGB Whitepaper (Englisch)
                            TechTalk - Visual Gesture Builder 
                            Custom Gestures, Kinect for Windows v2 and the Visual Gesture Builder (Englisch)
                            VGB Documentation (Englisch)

Schon vor Beginn des Hackathons hat die Veranstaltung Sign of Time 5: Get Kinected für Inspiration gesorgt. Donnerstagabend, am 04. September, wurde im Parkhuis de Zwijger sowohl die Microsoft Kinect, als auch eindrucksvolle Kinect Showcases vorgestellt. Das Event war ein kleiner Vorgeschmack auf das, was kommen sollte. Ben Lower (Kinect Community Manager bei Microsoft) hat den neuen Sensor präsentiert, während Jerry Lieveld, der Gründer und Chief Creative von DARE TO DIFR, seine Erfahrungen aus dem Bereich UX mit dem Publikum geteilt hat. Microsoft Kollegen aus Indien haben außerdem eine tolle Infotainment-Plattform namens "Ripple" gezeigt. Anschließend hat der Entwickler und Designer, Edwin Jakobs, eine Auswahl an kreativen Arbeiten von LUSTLab vorgestellt.

Der Hackathon hat Freitag um 10 Uhr mit Frühstück und einer kurzen Vorstellung der Agenda angefangen. Ben Lower erläuterte nachher die neuen Features des Kinect v2 Sensors und zeigte Beispiele, wie man den Sensor einsetzen kann.
Die Teilnehmer durften dann Projekt-Ideen pitchen und Teams bilden. Gegen 13 Uhr fing langsam das Hacken an. Geräte und Arbeitsumgebungen wurden eingerichtet und Konzepte bearbeitet. Menschen aus unterschiedlichen Ländern und mit verschiedenen Vorkenntnisse kamen zusammen, um an innovativen und kreativen Projekten gemeinsam zu arbeiten.
24 Stunden wurde fleißig gehackt und viele Teilnehmer waren so engagiert, dass sie komplett auf Schlaf verzichtet haben. Samstag um 13 Uhr wurden dann die Ergebnisse präsentiert.
Alle Projekte waren sehr gut und originell. Dabei wurden unterschiedliche Bereiche, wie Medizin und Unterhaltung, abgedeckt. Ein Team aus Berlin hat zum Beispiel ein Spiel entwickelt, welches auch für medizinische Diagnostik benutzt werden kann.
Auch zusätzliche Gadgets, wie das Oculus Rift, wurden verwendet. Dadurch entstanden während des Hackathons sehr unterschiedliche kreative Konzepte.

Den ersten Platz hat das Team Hoog+Diep mit dem Projekt My First Little Toy Story 3D gewonnen. Die Idee dahinter ist einen eigenen Film auf einer sehr einfachen Weise zu erstellen. Dafür werden Spielzeuge verwendet, die vorher mit der Kinect eingescannt wurden. Die Anwender können dann zum Beispiel mit wenig Aufwand einen Film mit den Spielzeugen nachstellen. Die Anwendung erkennt die menschliche Körper und schneidet sie aus dem Endprodukt aus, so dass nur die Spielzeuge zu sehen sind. Somit bekommt man anschließend eine einfache, aber schöne Animation.

Insgesamt war es sehr spannend zu sehen, was sich die Teilnehmer für Einsatzmöglichkeiten der Kinect überlegt haben.
Der Sensor ermöglicht neue Interaktionskonzepte und Hackathons sind eine wunderbare Gelegenheit eigene, kreative Ideen greifbar zu machen.

Ein weiterer wichtiger Aspekt, den man berücksichtigen sollte ist Barrierefreiheit. Wie kann NUI am besten eingesetzt werden um Menschen mit Behinderungen zu unterstützen? Beziehungsweise wie sollte es angepasst werden? Durch den richtigen Einsatz von NUI könnte Technologie für jeden zugänglich sein.

Ein Beispiel für eine Windows App, die mit einer zusätzlichen natürlichen Eingabemethode erweitert wurde, ist Bing Kochen und Genuss. Die Anwendung ermöglicht das Aktivieren des Freihand-Modus, so dass der Nutzer nur mit einer Handbewegung die Seiten des Kochbuchs wenden kann.
Das Umblättern mittels Gestiksteuerung kann während dem Kochen sehr praktisch sein, um den Bildschirm sauber zu halten.

Viel mehr Möglichkeiten bietet Kinect an, ein Produkt von Microsoft, das Gesichtserkennung, sowie Sprach- und Gestenerkennung beinhaltet.
Kinect ist als Erweiterung von Xbox auf dem Markt erschienen. Nutzer können Körperbewegungen, Mimik und Sprachbefehlen nutzen und so auf eine natürliche Weise das Spiel steuern.
Obwohl Kinect erst nur für den Spielbereich gedacht war, wurde sein Potential schnell erkannt und ab 2012 mittels Kinect for Windows auch in anderen Industriebereichen eingesetzt.
 
Ab diesem Jahr ist eine neue Version von Kinect verfügbar. Kinect v2 besitzt im Gegensatz zu ihrem Vorgänger eine HD Farbkamera, eine Tiefenkamera, die auf der Time-Of-Flight Technologie basiert, sowie verbesserte Mikrofone. Damit können nun bis zu sechs Personen mit 25 Gelenkpunkten erkannt werden.
 
Weitere Details der Kinect Technologie werde ich in zukünftigen Blogs abdecken.
Ich hoffe, dieser Artikel über NUI hat euer Interesse geweckt und hat euch geholfen einen ersten Überblick zu gewinnen.
 

Weitere Infos zum Thema:

Natural User Interfaces Are Not Natural – Donald A. Norman
Brave NUI World: Designing Natural User Interfaces for Touch and Gesture - Daniel Wigdor, Dennis Wixon