Kontakt & Service
Jetzt Beratung vereinbaren

In wenigen Schritten einen Beratungs­termin mit unseren Experten buchen.

Anwender Helpdesk

Hilfestellung bei Problemen in Ihren SAP-Systemen.

Schulungen

Unser Schulungsangebot. Jetzt informieren!

Webinare

Unser Webinarangebot. Jetzt informieren!

Entwicklung Android-App Virtual Reality

News & Wissen Virtual Reality: Entwicklung einer Android-App mit der SAP HANA Cloud und Unity (Teil 3/3)

Marius Bossen (Junior Developer)
Autor:

Marius Bossen (Junior Developer)

Im Rahmen der Entwicklung einer Virtual Reality-App mit Daten aus der SAP HANA Cloud für Android-Smartphones haben wir im ersten Teil unsere SAP HANA Cloud-Datenbank mitsamt OData-Services erfolgreich eingerichtet. Im zweiten Teil wurde die Anwendung in Unity soweit gebracht, dass wir jetzt - im dritten und letzten Teil - die Datenbank auslesen und die Produktkategorien dynamisch als Buttons darstellen können.

Aktivierung der Blicksteuerung

Bislang funktioniert die Blicksteuerung bei unseren Category Buttons aber noch nicht, denn wir müssen die entsprechenden VR Events noch mit unseren definierten Funktionen verknüpfen. Dieses Vorgehen wiederholen wir später bei allen per Blick steuerbaren Knöpfen. Wir öffnen das „CategoryButton“-Prefab und fügen eine Component „Event Trigger“ hinzu. Auf dieser wählen wir „Add new Event Type->Pointer Enter“. Damit registrieren wir das GameObject für dieses Event, das normalerweise den Eintritt des Mauszeigers auf das GameObject bedeutet, in unserem VR Event-Kontext jedoch das Erfassen mit dem „ReticlePointer“. Diesen hatten wir der Kamera hinzugefügt, dort ist er als weißer Punkt in der Mitte des Blickfeldes zu sehen. Erfasst der ReticlePointer ein Object, wird der Punkt zu einem Kreis. Voraussetzung dafür ist, dass das Objekt für das Pointer Enter Event registriert ist und über eine Kollisionsbox verfügt. Durch das Plus-Symbol fügen wir einen Funktionsaufruf für dieses Event hinzu.

CategoryButton

Jetzt ziehen wir das GameObject „CategoryButton“ aus der Hierarchie in das Event-Feld, um zu definieren, dass wir eine Funktion in diesem GameObject ausführen wollen. Wir suchen dann in dem Dropdown rechts das Script „CategoryButton“ und die Funktion „LookedAt“. Wir erinnern uns: Die Funktionen LookedAt und NotLookedAt haben das Script „CategoryButton“ von „GazeButton“ geerbt und setzen den Boolean-Wert „selected“ auf true bzw. false. Dadurch kann das Script erkennen, ob das GameObject gerade betrachtet wird. Analog setzen wir für „Add New Event Type->Pointer Exit“ die Funktion „NotLookedAt“. Wenn wir jetzt wieder starten und testen, sehen wir, wie aus dem weißen Punkt ein Kreis wird, sobald wir den Category Button ansehen.

Produkte anzeigen: „ProductReader“

Wir erstellen ein Script „ProductReader" wie folgt (die Datei lässt sich mit jedem beliebigen Texteditor öffnen):

Der Ablauf ist analog dem vorherigen. Ein asynchroner Aufruf liest die Daten, die in einer Unity-kompatiblen Struktur gespeichert werden. Dafür wird in der Klasse eine weitere Klasse „Products“ als Datenstruktur definiert; die Produkte werden als Array mit Elementen dieser Klasse abgelegt. Es werden TextComponents angesteuert, die jeweils Felder des angezeigten Produktes wiedergeben. Zwei Navigationsfunktionen wählen den aktuell angezeigten Katalogeintrag.

Die Zeile, die wir im Script „CategoryReader“ auskommentiert haben (und nun wieder reinnehmen!), übergibt in der Funktion „setFilterUrl“ die Produkt-URL mit einem Filter auf die Kategorie.

Für Auswahl und Darstellung der Produkte werden wir ein etwas komplexeres Prefab erstellen. Dieses beinhaltet unter anderem zwei Pfeile als Navigation durch die Produkte, welche die entsprechenden Funktionen auslösen. Wir legen für die Navigationspfeile ein Script „ProductSelectButton“ mit folgendem Inhalt an (die Datei lässt sich mit jedem beliebigen Texteditor öffnen):

Wir speichern folgende einfache Grafiken auf unserem Computer und ziehen sie per Drag and Drop in unseren Ressourcen-Ordner.

Jetzt können wir mit dem Produktauswahl-Prefab starten:

Begonnen wird wieder mit der Erstellung eines Quads, das wir „ProductSelector“ nennen. Die Skalierung sollte auf 3,2,0 gesetzt werden. Wir ziehen die Hintergrundgrafik „productBack“ auf das Quad und sehen, dass diese automatisch als Textur eingesetzt wird.

Wir ziehen das GameObject wieder in den Prefab-Ordner, löschen es aus dem Szenenbaum und bearbeiten es in der Prefab-Ansicht. Dann wird die Component „ProductReader“ hinzugefügt. Darauf folgen die vier GameObjects als Child-Objekte, in denen die Textfelder untergebracht sind. Um Aufwand zu sparen, kann man ein GameObject konfigurieren und dann per Copy/Paste vervielfältigen, wobei nur noch der Objektname und die Position für unsere Virtual Reality-App geändert werden müssen. Die Objekte bekommen die bereits bekannte Component „Text Mesh Pro Text“. Im „Rect Transform“ werden „Width“ 1,5 „Height“ 0,2 und Scale x 0,5 y 0,5 z 1 eingestellt sowie Position z auf -0,05. Letzteres, damit der Text sicher vor dem Hintergrund erscheint. Denn wir erinnern uns: Es handelt sich um die Eigenschaften relativ zum Parent-Objekt X und Y-Positionen ergeben sich durch Verschieben in die gewünschte Position. In das Textfeld kann man zur Layout-Einrichtung Werte schreiben, die dynamisch überschrieben werden. Wichtig ist die Benennung in „ProdName“, „ProdManu“, „ProdPrice“, „ProdStock“.

Product Selector_1

Zwei weitere Quad-Objekte werden zu Navigationspfeilen. Auch hier empfiehlt sich zunächst nur eines zu erstellen und dann zu kopieren. Wir nennen das erste „NavLeft“, ziehen die Grafik „arrow_left“ darauf und wählen im Inspector ganz unten den Shader „Mobile->Particles->Alpha_Blended“, damit die Textur mit Transparenz dargestellt werden kann. Als Scale wählen wir x 0,3 y 0,3 und positionieren den Pfeil links mittig neben das Parent-Objekt. Wir fügen die Component „ProductSelectButton“ hinzu und geben bei „Direction“ „back“ ein. Beim Mesh Collider setzen wir einen Haken bei „Convex“. Analog dem Category Button oben richten wir wieder die Pointer Enter und Pointer Exit Events ein: Add New Event Type->Pointer Enter->Plus Button->GameObject „NavLeft“ raufziehen->Funktion ProductSelectButton.LookedAt wählen und wir kommen unserer Virtual Reality-App wieder ein Stück näher.

Für den rechten Button erstellen wir ein Duplikat von „NavLeft“, nennen es „NavRight“, setzen in der Component „ProductSelectButton“ das Attribut „Direction“ auf „forward“ und wählen entsprechend die Funktionen im EventTrigger Pointer Enter und Pointer Exit. Damit der Pfeil in die richtige Richtung zeigt, setzen wir die Transform Rotation Z auf 180. Den Pfeil platzieren wir entsprechend rechts.

Product Selector_2

Dieses Prefab kann nun in unserem „CategoryButton“-Prefab in der gleichnamigen Component als Prefab eingefügt werden:

Product Selector_3

Wenn man jetzt die VR-Anwendung startet und eine Sekunde auf eine Kategorie blickt, wird die Produkt-Anzeige geöffnet und man kann mit Blick auf die Pfeiltasten vor und zurück navigieren. Die Zeit für das Öffnen der Kategorie kann verändert werden, indem man im Script „CategoryButton“ in der Start-Methode nach dem Aufruf „Base.Start()“ die Variable „gazeTime“ neu setzt.

VR-App_Produktanzeige

Die Update-Funktion: der „Kaufen"-Button in der Produktansicht

Der Button „Kaufen" soll nach Auslösen den Lagerbestand reduzieren. Dafür legen wir ein Script „UpdateStock“ an (die Datei lässt sich mit jedem beliebigen Texteditor öffnen):

Wir erstellen ein weiteres Script „BuyButton“ (die Datei lässt sich mit jedem beliebigen Texteditor öffnen):

Danach öffnen wir wieder unser „ProductSelector“-Prefab. Dem Parent-Objekt fügen wir die Component „UpdateStock“ hinzu. Dann erzeugen wir den „Kaufen-Button“ ähnlich den Navigationspfeilen: Auf ein Quad ziehen wir die Textur „BuyNowButton“, Scale x 0,3 y 0,2 z 1, Position Z -0,05, Mesh Collider auf Convex, Event Trigger Pointer Enter und Pointer Exit mit den Funktionen LookedAt und NotLookedAt belegen.

Ein finaler Test: Beim Betrachten des Buy-Buttons sollte der Stock jetzt runterzählen. Der Wert kommt zunächst noch aus der VR-Anwendung selbst, da kein neuer READ gemacht wird. Wenn die Anwendung jetzt aber neu geöffnet wird, kann man sehen, dass der Lagerbestand tatsächlich in der Datenbank geändert wurde. Das können wir auch im Browser überprüfen, wenn wir über unsere URL wieder den Catalog Service aufrufen.

VR-App: Produktanzeige Buy-Button

Die Anwendung endlich in VR sehen

Wir rufen aus Unity - wie oben - die Build Settings auf. Mit der Schaltfläche „Add Open Scenes“ fügen wir die offene Szene zum Build hinzu. Da es unsere einzige Szene ist und wir die Build-Einstellungen bereits zu Beginn vorgenommen haben, können wir den Build der APK-Datei jetzt starten, indem wir „Build“ klicken und der Datei einen beliebigen Namen und Speicherort geben.

Virtual Reality: Scenes in Build

Bevor wir unsere Datei kopieren und installieren, bereiten wir unser Smartphone vor, indem wir auch dort Google Cardboard installieren, das im Google Playstore zu finden ist.

Google Cardboard

Die APK-Datei kopieren wir über ein USB-Kabel auf unser Smartphone und installieren sie, indem wir sie über einen Filebrowser auswählen und die Ausnahme für unbekannte Quellen zulassen. Starten wir die Anwendung auf dem Smartphone, bemerken wir, dass jetzt zwei Kameras zu sehen sind - eine für jedes Auge. Wenn wir nun das Smartphone in unsere VR-Brille legen und aufsetzen, macht sich der 3D-Effekt bemerkbar. Mit Kopfbewegungen können wir nun die Kamera steuern und Buttons auswählen, indem wir den weißen Kreis in der Mitte unseres Sichtfeldes für unsere definierte Zeitspanne auf dem Button halten. Mit dem Buy-Button können wir den Lagerbestand in unserer Cloud-Datenbank dezimieren. Screenshots der Virtual Reality-Anwendung auf dem Smartphone:

Entwicklung Virtual Reality-App_Screenshot Anwendung_1

Entwicklung Virtual Reality-App_Screenshot Anwendung 2

Fazit: Virtual Reality ist kein Hexenwerk

Dies ist nur ein kleiner Ausblick auf die Möglichkeiten, die sich durch das Zusammenspiel von SAP HANA und Unity ergeben. Virtual Reality hat technisch einen Stand erreicht, an dem produktive Anwendungen ohne schwer zu bedienendes und teures Hardware-Setup möglich sind. Schon heute sind autarke VR-Brillen auf dem Markt, die keinen Anschluss an einen PC benötigen und dennoch sehr leistungsfähig sind.

Newsletter Setzen Sie auf fundiertes Wissen aus allen Bereichen unserer Branche. Regelmäßig und stets aktuell.
2 Personen beraten am Computer
Kontakt Haben Sie Fragen oder wünschen weitere Informationen? Unsere Experten beraten Sie gerne.