Home > Technologie > Steuern Sie openFrameworks w / Phone + Spacebrew

Steuern Sie openFrameworks w / Phone + Spacebrew

Advertisement

Steuern Sie openFrameworks w / Phone + Spacebrew

Hallo zusammen,

In dieser Anleitung zeigen wir Ihnen, wie Sie mit dem Spacebrew Toolkit Ihr Smartphone über den eingebauten Beschleunigungssensor verbinden können, um Aspekte Ihrer openFrameworks-Skizze zu manipulieren.

Wir haben eine Installation erstellt und den Teilnehmern erlaubt, ein Mobiltelefon zu schütteln, um die Größe und Form einer oF Mesh-Skizze zu ändern. Jedoch konnten Teilnehmer einfach die Seite auf ihrem eigenen wifi / 3G ermöglichten Gerät laden, um die Skizze die Variablen zu manipulieren.

Dazu benötigen Sie:

  1. Ein Smartphone mit Beschleunigungssensor (iPhones und Androids funktionieren ganz gut)
  2. SpaceBrew Bibliothek für openframeworks (zwei Links) __> 1 2
  3. openframeworks (wir ein Beispiel Skizze geben)
  4. Eine Web-Hosting-Website Ihrer Wahl
  5. Grundlegende html und css Kenntnisse (wir geben ein Beispiel!)

Schritt 1: Laden Sie Spacebrew-Bibliotheken für oF

Steuern Sie openFrameworks w / Phone + Spacebrew

1. Bibliothek: ofxLibwebsockets

2. Bibliothek: ofxSpacebrew

Implementieren Sie sie in Ihrer openFrameworks-Skizze aber Sie mögen, aber wir verwendeten oF's Project Generator und wählten diese im "Addon" -Menü. Es ist ein wirklich einfacher Weg, um nahtlos Addons in Ihre Skizzen setzen.

**HINWEIS**

Befolgen Sie die Anweisungen auf den GITHUB READMEs für diese beiden Bibliotheken. Sie müssen eine Zeile löschen, um den Projektgenerator zu verwenden. Es ist nicht schwer, einfach zu übersehen.

Schritt 2: Erstellen Sie Ihre Skizze

Steuern Sie openFrameworks w / Phone + Spacebrew

Wir haben dieses Tutorial zu verstehen , wie eine dynamische Mesh Skizze in openframeworks zu machen: Mesh - Tutorial .

Sie können wählen, ein Netz nicht zu verwenden, aber unsere Beispielskizze verwendet ein, also möchten Sie vielleicht das Tutorial vorbei schauen.

Alternativ können Sie die Werte aus dem Beschleunigungssensor Ihres Smartphones verwenden, um eine beliebige Anzahl von Variablen für Ihre eigene Skizze, dh Größe von Objekten, Form, Farbe usw., zu manipulieren.

Hier ist der Code für unsere MeSH Skizze: Github . - Besonderes Augenmerk auf alle Orte , an denen wir spacebrew nennen (was auch immer) und am unteren Ende , wo wir nennen Leere testApp :: onMessage (Spacebrew :: Nachricht und M) Dies. Ist, wie Sie in der Lage, oF über Ihr Telefon und die Spacebrew Online-Server zu sprechen.

Wir freuen uns auf Ihre Skizzen! Post Links zu ihnen, wenn Sie eine interaktive Telefoninstallation machen.

Schritt 3: Spacebrew und Javascript

Steuern Sie openFrameworks w / Phone + Spacebrew

Laden Sie die Spacebrew Javascript - Paket auf GitHub: spacebrew.js

Folgen Sie den Anweisungen in der README-Datei.

Öffnen Sie die Beispiele und schauen Sie sich das Schieberegler-Beispiel an. Wir verwenden dieses Beispiel im Wesentlichen als Vorlage für unsere Interaktivität. Wir haben jquery mobile, um das Handy den inneren Beschleunigungsmesser-Ausgang zu lesen und verwenden Sie es in der Skizze. Hier ist unser Beispiel Skizze: GitHub .

Stellen Sie sicher, dass Sie den Namen Ihrer Skizze ändern, bevor Sie es ausführen, oder es könnte mit einer anderen Person, die unsere Beispielskizze verwirrt, verwirrt werden. Eindeutige Benennung hilft viel, wenn Sie verbinden Knoten im Spacebrew-Server.

Schritt 4: Legen Sie Ihre Spacebrew html ONLINE!

Sie müssen Ihre HTML-Datei mit der Slider-Interaktion (wie unser Beispiel) online, so dass jedes Telefon kann darauf zugreifen, wenn Sie Ihre Installation tun. Wir empfehlen, einen URL-Shortener, wie zB bit.ly, zu verwenden, damit die Benutzer schnell auf die Seite zugreifen können.

Verwenden Sie Ihre Hosting-Website der Wahl, aber wir mögen blueHost und wir verwenden Cyberduck, um Dateien online schnell zu bekommen.

Schritt 5: Verbinden Sie Ihre oF Skizze und .html Website über Spacebrew!

Steuern Sie openFrameworks w / Phone + Spacebrew

Steuern Sie openFrameworks w / Phone + Spacebrew

Steuern Sie openFrameworks w / Phone + Spacebrew

Hier ist, wo die Magie geschieht. Lassen Sie uns diese zwei Skizzen anfangen zu sprechen!

  1. Führen Sie Ihre Skizze aus!
  2. Öffnen Sie Ihre Telefoninteraktion slider .html Seite auf Ihrem Telefonbrowser!
  3. Verbinden Sie die beiden über Spacebrew öffentlichen Sitzung genannt: SpaceBrew Sandbox

Voila Ihre Skizze reagiert jetzt auf die Bewegungen Ihres Telefons! Genießen.

Related Reading