diff --git a/examples/particle_explorer/generic.js b/examples/particle_explorer/generic.js new file mode 100644 index 0000000000..22510cc357 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/examples/particle_explorer/genericProperties.js b/examples/particle_explorer/genericProperties.js new file mode 100644 index 0000000000..2444d78d2d --- /dev/null +++ b/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); \ No newline at end of file diff --git a/examples/particle_explorer/index.html b/examples/particle_explorer/index.html index a389bf125c..033954ba73 100644 --- a/examples/particle_explorer/index.html +++ b/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 - --> + --> @@ -21,7 +21,7 @@