improve generic implementation

examples/particle_explorer/generic.js

@@ -23,7 +23,7 @@ var controllers = [];
 var settings = new Settings();
 
 function loadGUI() {
-    console.log('loadGUI loadGUI loadGUI loadGUI')
+    console.log('loadGUI ')
         //instantiate our object
 
     //whether or not to autoplace
@@ -70,7 +70,10 @@ function loadGUI() {
 
 };
 
-function writeDataToInterface(property, value, shouldGroup) {
+function writeDataToInterface(property, value) {
+    console.log('WRITE SOME DATA TO INTERFACE')
+    var settings = {};
+    settings[property] = value;
     var data = {
         type: "settings_update",
         updatedSettings: settings,
@@ -87,36 +90,56 @@ function writeDataToInterface(property, value, shouldGroup) {
 
 }
 
-function listenForSettingsUpdates() {
+window.onload = function() {
-    console.log('listening for messages')
+    console.log('GUI PAGE LOADED');
+
     if (typeof EventBridge !== 'undefined') {
-        console.log('WE HAVE AN EVENT BRIDGE')
+        console.log('WE HAVE AN EVENT BRIDGE, SEND PAGE LOADED EVENT ')
-        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] = {};
+        var stringifiedData = JSON.stringify({
-                    settings[key] = value;
+            messageType: 'page_loaded'
-                })
+        })
-                loadGUI();
-            }
-            if (data.messageType === 'settingsUpdate') {
-                var initialSettings = data.updatedSettings;
-                _.each(initialSettings, function(value, key) {
-                    console.log('setting,value', setting, value)
-                    settings[key] = value;
-                })
 
+        console.log('SEND PAGE LOADED EVENT FROM GUI TO INTERFACE ')
 
-            }
+        EventBridge.emitWebEvent(
-        });
+            stringifiedData
+        );
+        listenForSettingsUpdates();
+    } else {
+        console.log('No event bridge, probably not in interface.')
     }
+
+}
+
+function listenForSettingsUpdates() {
+    console.log('GUI IS LISTENING FOR MESSAGES FROM INTERFACE')
+    EventBridge.scriptEventReceived.connect(function(data) {
+        console.log('GOT MESSAGE FROM EVENT BRIDGE')
+        data = JSON.parse(data);
+        if (data.messageType === 'initial_settings') {
+            console.log('INITIAL SETTINGS FROM INTERFACE:::' + 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 === 'settings_update') {
+            console.log('SETTINGS UPDATE FROM INTERFACE:::' + JSON.stringify(data.updatedSettings))
+            var initialSettings = data.updatedSettings;
+            _.each(initialSettings, function(value, key) {
+                console.log('setting,value', setting, value)
+                settings[key] = value;
+            })
+
+
+        }
+    });
+
 }
 
 
@@ -125,6 +148,4 @@ function manuallyUpdateDisplay(gui) {
     for (var i in gui.__controllers) {
         gui.__controllers[i].updateDisplay();
     }
-}
+}
-
-listenForSettingsUpdates();

examples/particle_explorer/genericProperties.js

@@ -6,49 +6,63 @@
 //  Copyright 2014 High Fidelity, Inc.
 //
 //  Interface side of the App.
-// This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.  
+//  This is an example of a 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 center = Vec3.sum(Vec3.sum(MyAvatar.position, {
+    x: 0,
+    y: 0.5,
+    z: 0
+}), Vec3.multiply(0.5, Quat.getFront(Camera.getOrientation())));
+
+
+var box = Entities.addEntity({
+    type: 'Sphere',
+    visible: true,
+    collisionsWillMove: true,
+    color: {
+        red: 0,
+        green: 255,
+        blue: 0
+
+    },
+    dimensions: {
+        x: 1,
+        y: 1,
+        z: 1,
+    },
+    position: center
+});
+
+var boxProperties;
 
 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);
-
+        Script.update.connect(waitForObjectAuthorization)
-        var center = Vec3.sum(Vec3.sum(MyAvatar.position, {
-            x: 0,
-            y: 0.5,
-            z: 0
-        }), Vec3.multiply(0.5, Quat.getFront(Camera.getOrientation())));
-
-
-        _this.box = Entities.addEntity({
-            type: 'Box',
-            shapeType: 'box',
-            visible: true,
-            collisionsWillMove: true,
-            color: {
-                red: 0,
-                green: 255,
-                blue: 0
-
-            },
-            dimensions: {
-                x: 1,
-                y: 1,
-                z: 1,
-            },
-            position: center
-        });
-
     };
+
+    function waitForObjectAuthorization() {
+        var properties = Entities.getEntityProperties(box, "isKnownID");
+
+        var isKnownID = properties.isKnownID
+        while (isKnownID === false || _this.pageLoaded === false) {
+            return;
+        }
+        boxProperties = properties;
+        Script.update.disconnect(waitForObjectAuthorization);
+    }
+
     this.sendData = function(data) {
         print('sending data' + JSON.stringify(data));
         _this.webWindow.eventBridge.emitScriptEvent(JSON.stringify(data));
@@ -56,49 +70,45 @@ SettingsWindow = function() {
     this.onWebEventReceived = function(data) {
         // print('DATA ' + data)
         var _data = JSON.parse(data)
-        if (_data.type !== 'settings_update') {
+        if (_data.messageType === 'page_loaded') {
+            print('PAGE LOADED UPDATE FROM GUI');
+            _this.pageLoaded = true;
+            sendInitialSettings(boxProperties);
+        }
+        if (_data.messageType === 'settings_update') {
+            print('SETTINGS UPDATE FROM GUI');
+            editEntity(_data.updatedSettings);
             return;
         }
-        print('GOT A SETTINGS UPDATE EVENT')
-        editEntity(_data.updatedSettings)
 
     }
-
-
 }
 
-function sendInitialSettings() {
+function sendInitialSettings(properties) {
-
+    print('SENDING INITIAL INTERFACE SETTINGS');
-
     var settings = {
-        messageType: 'initialSettings',
+        messageType: 'initial_settings',
-        initialSettings: Entities.getEntityProperties(SettingsWindow.box)
+        initialSettings: properties
-    }
+    };
     settingsWindow.sendData(settings)
 
-
-
 }
 
 function editEntity(properties) {
-    Entities.editEntity(SettingsWindow.box, properties);
+    Entities.editEntity(box, properties);
-    var currentProperties = Entities.getEntityProperties(SettingsWindow.box);
+    var currentProperties = Entities.getEntityProperties(box);
     settingsWindow.sendData({
-        messageType: 'settingsUpdate',
+        messageType: 'settings_update',
         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);
+
+Script.scriptEnding.connect(cleanup);
+
+var settingsWindow = new SettingsWindow();
+settingsWindow.init();

examples/particle_explorer/index.html

@@ -12,12 +12,12 @@
 //  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>
 <script type="text/javascript" src="underscore-min.js"></script>
-<script type="text/javascript" src="main.js"></script>
+<script type="text/javascript" src="generic.js"></script>
 <script>
 </script>
 <style>