Your Smartphone is a Sensorpack

Zig Indicator Datastream etablieren

Hier kannst du ein Helperprogramm (Zig Indicator) herunterladen um die Verbindung zwischen deinem Smartphone und deinem PC zu testen:

• Windows: https://zig-project.com/release/ZIG_indicator_v1.1.0_x64.zip
• macOS: https://zig-project.com/release/ZIG_indicator_v1.1.0_osx.zip

Zig Indicator hilft dir herauszufinden welche Einstellungen für deine Übertragung die Richtige ist.

Um die Verbindung herstellen zu können sind folgende Eckdaten wichtig:

• PROTOCOL
  • UDP/TCP
• IP ADDRESS
  • z.B. 172.20.10.2 (beide Geräte müssen im selben Netzwerk sein.)
• PORT NUMBER
  • z.B. 50000
• MESSAGE FORMAT
  • JSON / OSC
• OUTPUT PORT NUMBER
  • z.B. 50000

Einen ersten Test zu starten musst du die Einstellungen in deiner App (Zig Sim Pro) und dem Helperprogramm (Zig Indicator) abgleichen:

In der Smartphone App

1. Settings:
   1. Protocol unbedingt UDP einstellen!
   2. IP gleich wie in Zig Indicator
   3. Port gleich wie in Zig Indicator
   4. Message Format unbedingt JSON einstellen!
2. Sensors: Sensoren auswählen in diesem Beispiel (Acceleration, Quaternion, Compass)
3. Start: Clickst du auf «Start» so sollten deine Sensoren nun gestreamt werden und im ZigIndicator abgefangen werden können.

Clickst du nun bei Zig Indicator auf Start kannst du die Sensorwerte empfangen:

Wenn dieser erste Versuch erfolgreich hergestellt werden konnte können die Folgenden Experimente gestartet werden:

P5.js

Github Code Download

Github Code Package

Um Zig Sim mit P5.js nutzen zu können müssen wir einige kleinigkeiten installieren. Diese Anleitung befasst sich mit der Installation in Visual Studio Code. Als erstes lädst du das Codepackage herunter und speicherst es an einem Ort der auf deinem Computer dafür geeignet ist. Der Ordner soll während dem ganzen Prototypen nicht verschoben werden.

Installation

Du brauchst Node.js für die folgenden Schritte falls du es noch nicht installiert hast, ist es ratsam dies jetzt zu tun.

In Visual Studio Code öffnest du den Ordner zigsimp5 mit dem Terminal und installierst die Dependecies in dem du folgenden Befehl ausführst.

npm init -y

npm install express ws
npm install osc ws
sudo npm install -g http-server

// Set up UDP socket for OSC
const udpPort = new osc.UDPPort({
localAddress:"172.20.10.2",
localPort:50000
});

Nachdem du alle dependencies installiert hast und die App Einstellungen, sowie Scripanpassungen vorgenommen hast, sollte es möglich sein das Server.js script im Terminal zu starten und die Beispiele zu starten: Öffne das Terminal im Ordner zigsimp5 und füre folgenden Befehl aus:

# Terminal 1
cd zigsimp5
node server.js

Öffne ein zweites Terminal und führ folgenden Befehl aus:

# Terminal 2 
cd zigsimp5/public 
http-server

Im Terminal solltest du nun eine IP angezeigt bekommen die du in einem Browser öffnen kannst:

In meinem Beispiel ist es 127.0.0.1:8080 oder 127.20.10.2:8080 öffne ich eine dieser Adressen sehe ich das aktive Script.

Scripts auswählen

Code Beispiele

Als Beispiele haben wir dir folgendes Vorbereitet: