start generic two-way implementation, fix some typos

examples/particle_explorer/generic.js

@@ -0,0 +1,130 @@
+//
+//  main.js
+//  
+//
+//  Created by James B. Pollack @imgntnon 9/26/2015
+//  Copyright 2014 High Fidelity, Inc.
+//
+//  Web app side of the App - contains GUI.
+//  Quickly edit the aesthetics of a particle system.  This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.  
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+//  todo: folders, color pickers, animation settings, scale gui width with window resizing  
+//
+
+var Settings = function() {
+    return;
+}
+
+//we need a way to keep track of our gui controllers
+var controllers = [];
+var settings = new Settings();
+
+function loadGUI() {
+    console.log('loadGUI loadGUI loadGUI loadGUI')
+        //instantiate our object
+
+    //whether or not to autoplace
+    var gui = new dat.GUI({
+        autoPlace: false
+    });
+
+    //if not autoplacing, put gui in a custom container
+    if (gui.autoPlace === false) {
+
+        var customContainer = document.getElementById('my-gui-container');
+        customContainer.appendChild(gui.domElement);
+        gui.width = 400;
+
+    }
+
+    //add save settings ability (try not to use localstorage)
+    gui.remember(settings);
+
+    //get object keys
+    var keys = _.keys(settings);
+
+    //for each key...
+    _.each(keys, function(key) {
+        console.log('KEY KEY KEY' + key);
+        //add this key as a controller to the gui
+        var controller = gui.add(settings, key).listen();
+        // the call below is potentially expensive but will enable two way binding.  needs testing to see how many it supports at once.
+        //var controller = gui.add(particleExplorer, key).listen();
+        //keep track of our controller
+        controllers.push(controller);
+
+        //hook into change events for this gui controller
+        controller.onChange(function(value) {
+            // Fires on every change, drag, keypress, etc.
+        });
+
+        controller.onFinishChange(function(value) {
+            // Fires when a controller loses focus.
+            writeDataToInterface(this.property, value)
+        });
+
+    });
+
+};
+
+function writeDataToInterface(property, value, shouldGroup) {
+    var data = {
+        type: "settings_update",
+        updatedSettings: settings,
+    }
+
+    var stringifiedData = JSON.stringify(data)
+
+    // console.log('stringifiedData',stringifiedData)
+    if (typeof EventBridge !== 'undefined') {
+        EventBridge.emitWebEvent(
+            stringifiedData
+        );
+    }
+
+}
+
+function listenForSettingsUpdates() {
+    console.log('listening for messages')
+    if (typeof EventBridge !== 'undefined') {
+        console.log('WE HAVE AN EVENT BRIDGE')
+        EventBridge.scriptEventReceived.connect(function(data) {
+            console.log('GOT MESSAGE FROM EVENT BRIDGE')
+            data = JSON.parse(data);
+            if (data.messageType === 'initialSettings') {
+                console.log('INITIAL SETTINGS:::' + JSON.stringify(data.initialSettings))
+                var initialSettings = data.initialSettings;
+                _.each(initialSettings, function(value, key) {
+                    console.log('key  ' + key);
+                    console.log('value  ' + JSON.stringify(value));
+
+                    settings[key] = {};
+                    settings[key] = value;
+                })
+                loadGUI();
+            }
+            if (data.messageType === 'settingsUpdate') {
+                var initialSettings = data.updatedSettings;
+                _.each(initialSettings, function(value, key) {
+                    console.log('setting,value', setting, value)
+                    settings[key] = value;
+                })
+
+
+            }
+        });
+    }
+}
+
+
+function manuallyUpdateDisplay(gui) {
+    // Iterate over all controllers
+    for (var i in gui.__controllers) {
+        gui.__controllers[i].updateDisplay();
+    }
+}
+
+listenForSettingsUpdates();

examples/particle_explorer/genericProperties.js

@@ -0,0 +1,99 @@
+//
+//  particleExplorer.js
+//  
+//
+//  Created by James B. Pollack @imgntnon 9/26/2015
+//  Copyright 2014 High Fidelity, Inc.
+//
+//  Interface side of the App.
+//  Quickly edit the aesthetics of a particle system.  This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.  
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+//  todo: folders, color pickers, animation settings, scale gui width with window resizing  
+//
+
+SettingsWindow = function() {
+    var _this = this;
+    this.webWindow = null;
+    this.init = function() {
+        _this.webWindow = new WebWindow('genericProperties', Script.resolvePath('index.html'), 400, 600, true);
+        _this.webWindow.setVisible(true);
+        _this.webWindow.eventBridge.webEventReceived.connect(_this.onWebEventReceived);
+        var boxPoint;
+
+        var boxPoint = Vec3.sum(MyAvatar.position, Vec3.multiply(4.0, Quat.getFront(Camera.getOrientation())));
+
+        _this.box = Entities.addEntity({
+            type: 'box',
+            visible: true,
+            collisionsWillMove: true,
+            color: {
+                red: 0,
+                green: 255,
+                blue: 0
+
+            },
+            dimensions: {
+                x: 1,
+                y: 1,
+                z: 1,
+            },
+            position: boxPoint
+        });
+
+    };
+    this.sendData = function(data) {
+        print('sending data' + JSON.stringify(data));
+        _this.webWindow.eventBridge.emitScriptEvent(JSON.stringify(data));
+    };
+    this.onWebEventReceived = function(data) {
+        // print('DATA ' + data)
+        var _data = JSON.parse(data)
+        if (_data.type !== 'settings_update') {
+            return;
+        }
+        print('GOT A SETTINGS UPDATE EVENT')
+        editEntity(_data.updatedSettings)
+
+    }
+
+
+}
+
+function sendInitialSettings() {
+
+
+    var settings = {
+        messageType: 'initialSettings',
+        initialSettings: Entities.getEntityProperties(SettingsWindow.box)
+    }
+    settingsWindow.sendData(settings)
+
+
+
+}
+
+function editEntity(properties) {
+    Entities.editEntity(SettingsWindow.box, properties);
+    var currentProperties = Entities.getEntityProperties(SettingsWindow.box);
+    settingsWindow.sendData({
+        messageType: 'settingsUpdate',
+        updatedSettings: currentProperties
+    })
+}
+
+
+var settingsWindow = new SettingsWindow();
+settingsWindow.init();
+Script.setTimeout(function() {
+    sendInitialSettings();
+}, 1000)
+
+
+function cleanup() {
+    Entities.deleteEntity(testParticles);
+    Entities.deleteEntity(box);
+}
+Script.scriptEnding.connect(cleanup);

examples/particle_explorer/index.html

@@ -12,7 +12,7 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 //  todo: folders, color pickers, animation settings, scale gui width with window resizing  
- -->
+ -->   
 <html>
 <head>
 <script type="text/javascript" src="dat.gui.min.js"></script>
@@ -21,7 +21,7 @@
 <script>
 </script>
 <style>
-#my-gui-container{
+#my-gui-container{ 
 	width:100%;
 	height:100%;
 }

examples/particle_explorer/particleExplorer.js

@@ -174,7 +174,7 @@ function editEntity(properties) {
     Entities.editEntity(testParticles, properties);
     var currentProperties = Entities.getEntityProperties(testParticles)
     // print('CURRENT PROPS', JSON.stringify(currentProperties))
-    SettingsWindow.sendData({type:'particleSettingsUpdate',particleSettings:currentProperties})
+    settingsWindow.sendData({type:'particleSettingsUpdate',particleSettings:currentProperties})
 }