Augmented Reality DIY – Teil 3 (erweiterte Anwendung)

 

Bild_Artikel_AR_1024x460

Die Blogreihe Augmented Reality Do-it-yourself stellt dar, was Augmented Reality ist und gibt eine Anleitung, um eine einfache Augmented-Reality-Anwendung selbst zu erstellen. Im dritten Teil erstellen wir eine erweiterte Augmented-Reality-Anwendung, indem wir in das AREL Script eingreifen.

Ziel

Zusätzlich zur Einbettung eines Videos, fügen wir einen Play Button und einen Pause Button in das Augmented-Reality-Szenario ein. Der Nutzer kann so das Video abspielen oder pausieren. Beide Buttons existieren in der Realität nicht, aber man kann sie auf dem mobilen Endgerät anklicken. Hierzu fügen wir Bilder ein und passen das AREL-Script (Augmented Reality Experience Language ) an.

Voraussetzung

metaio creator 
junaio-App für das mobile Endgerät (Google Play  oder iTunes )
 keine Programmierkenntnisse nötig

Mit dem metaio creator kann man Augmented-Reality-Anwendungen erstellen, die auf dem Server von junaio hinterlegt sind.

Erstellen einer erweiterten Anwendung

In diesem Abschnitt wollen wir eine einfache Erkennung eines Objekts erstellen und Inhalte im junaio-Browser darstellen, in diesem Beispiel ein Video. D.h. ein Video soll abgespielt werden, sobald das Objekt erkannt wurde. Zudem soll das Video durch Buttons (Play & Pause) steuerbar sein.

Handlungsschritte

Wenn Du bereits die Handlungsschritte des ersten Teils erledigt hast, kannst Du Dein Projekt einfach aufrufen.

1. Öffne das Projekt aus dem ersten Teil oder führe die Handlungsschritte aus dem ersten Teil durch.
2. Buttons (Play & Pause) einfügen: Klicke auf Button (Resources).

3. Wähle das gewünschte Bild (Button1.png) aus.
4. Klicke Open.
Screenshot2
5. Wähle das gewünschte Bild (Button2.png) aus.
6. Klicke Open.
Die Buttons musst Du noch in die entsprechende Größe und Position bringen. Die „Anfasser“ befinden sich immer an den Ecken.

Alle Elemente sind nun eingefügt, müssen aber durch AREL-Script-Funktionen verbunden und angesprochen werden.

7. AREL-Script öffnen: Menu > ExtrasOpen AREL editorScreenshot4

8. Klick GlobalScript (AREL scripts).
Den Code kopieren und an entsprechender Stelle einfügen.

Hier definieren wir die Sichtbarkeit der Buttons, weisen die Funktionalität den entsprechenden Buttons zu und definieren deren Funktion.

// Here you can define your own variables, functions & objects
// Funktion für die Buttons
function showPlayButton(flag)
{
button1.setVisibility(flag, flag, flag);
}
function showPauseButton(flag)
{
button2.setVisibility(flag, flag, flag);
}

// Will be executed when this object has been loaded.
scenario.onLoaded = function () {
showPlayButton(false);
showPauseButton(false);
};

// Funktion video1 wird pausiert, wenn button2 geklickt wird
button1.onTouchStarted = function () {
video1.play();
};

// Funktion video1 wird pausiert, wenn button2 geklickt wird
button2.onTouchStarted = function () {
video1.pause();
};

// Will be executed when playback of this object has been started.
video1.onPlayed = function () {
showPlayButton(false);
showPauseButton(true);
};

// Will be executed when playback of this object has been paused.
video1.onPaused = function () {
showPlayButton(true);
showPauseButton(false);
};

// Will be executed when the playback of the move has been finished.
// Corrensponds to arel.Events.Object.ONMOVIEENDED.
video1.onMovieEnded = function () {
showPlayButton(true);
showPauseButton(false);
};

// Will be executed when this object got visible.
// Corresponds to arel.Events.Object.ONVISIBLE event.
video1.onVisible = function () {
this.pause();
showPlayButton(true);
showPauseButton(false);
};

Screenshot5

9. Schließe das Fenster und bestätige die Speicherung.
10. Klicke Upload oder erstelle einen neuen Kanal, wenn Du die bestehenden Informationen nicht überschreiben willst (Create).
Die Daten sind gespeichert. Ein QR-Code wird generiert.

11. Junaio-App starten.
12. Klicke Scan.
2014-11-27 00.23.33
13. Scanne den QR-Code.
Der entsprechende Kanal wird geladen.

14. Scanne das Objekt/Bild.
 Das Video wird automatisch abgespielt.

Die Performanz der junaio-App hängt vom Gerät und der Internetverbindung ab.

Daten zu Erstellung

Wenn Ihr wollt, könnt Ihr die Daten aus dem Beispiel hier verwenden:

Beispiel anschauen

Voraussetzung:
junaio-App installiert auf dem mobilen Endgerät
WLAN-Verbindung oder stabile Internetverbindung

  1. Öffne die junaio-App.
  2. Klicke Scan.
  3. Scanne diesen QR-Code.
    junaio_channel_349628_qrCode
  4. Öffne das Bild.
  5. Halte Dein Gerät vor das Bild (Ausdruck oder am Bildschirm).

 

Quellen: metaio | metaio Tutorials

1 comment

  1. Der metaio creator wurde von Apple aufgekauft. Vereinzelt sind wohl Downloads noch möglich und zum Probieren und Testen von AR-Anwendungen verwendbar, jedoch im Nachgang nicht kommerziell einsetzbar. Als Alternative habe ich mir CraftAR herausgesucht, aber noch nicht viel damit ausprobiert. Ggf. werde ich das gleiche Tutorial dort noch mal umsetzen und hier wieder einen Beitrag erstellen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.