start generic two-way implementation, fix some typos

This commit is contained in:
James B. Pollack 2015-09-26 23:24:00 -07:00
parent 06a6462636
commit 4f7e7e1d5f
4 changed files with 232 additions and 3 deletions

View file

@ -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();

View file

@ -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);

View file

@ -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%;
}

View file

@ -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})
}