diff --git a/interface/resources/qml/hifi/tablet/EditTabView.qml b/interface/resources/qml/hifi/tablet/EditTabView.qml index bd42fb06a8..c4927fdfbb 100644 --- a/interface/resources/qml/hifi/tablet/EditTabView.qml +++ b/interface/resources/qml/hifi/tablet/EditTabView.qml @@ -274,10 +274,11 @@ TabView { // that it would remove by title name instead. function enableParticles(enabled) { if (enabled && editTabView.children.length < 4) { + console.log("ADDING PARTICLES TAB"); editTabView.addTab("P", Qt.createComponent("tabs/ParticleTab.qml")); } else if (!enabled && editTabView.children.length > 2) { + console.log("REMOVING PARTICLES TAB"); editTabView.removeTab(4); - editTabView.removeTab(5); } } diff --git a/scripts/system/particle_explorer/hifi-entity-ui.js b/scripts/system/particle_explorer/hifi-entity-ui.js index cec724b2f5..0173b1f527 100644 --- a/scripts/system/particle_explorer/hifi-entity-ui.js +++ b/scripts/system/particle_explorer/hifi-entity-ui.js @@ -44,21 +44,90 @@ function HifiEntityUI(parent, structure){ this.structure = structure; var self = this; this.webBridgeSync = _.debounce(function(id, val){ - console.log(id, val); - if(self.bridge){ - self.bridge.emitWebEvent(JSON.stringify({})); + if (self.EventBridge){ + var sendPackage = {}; + sendPackage[id] = val; + var message = { + messageType: "settings_update", + updateSettings: sendPackage + }; + self.EventBridge.emitWebEvent(JSON.stringify(message)); } }, 125); } HifiEntityUI.prototype = { - bindBridge: function (bridge){ - this.bridge = bridge; + connect: function (EventBridge){ + this.EventBridge = EventBridge; + var self = this; + EventBridge.emitWebEvent(JSON.stringify({ + messageType: 'page_loaded' + })); + + EventBridge.scriptEventReceived.connect(function(data){ + data = JSON.parse(data); + if (data.messageType === 'particle_settings') { + // Update settings + var currentProperties = data.currentProperties; + // Do expected property match with structure; + Object.keys(currentProperties).forEach(function(value, index) { + var property = currentProperties[value]; + var field = self.builtRows[value]; + if (field) { + + var el = document.getElementById(value); + + console.log(value, property, field, el); + if (field.className.indexOf("radian") !== -1) { + el.value = property / RADIAN; + el.onchange({target: el}); + } else if (field.className.indexOf("range") !== -1 || field.className.indexOf("texture") !== -1){ + el.value = property; + el.onchange({target: el}); + } else if (field.className.indexOf("checkbox") !== -1) { + if (property){ + el.setAttribute("checked", property); + } else { + el.removeAttribute("checked"); + } + } else if (field.className.indexOf("vector-section") !== -1) { + if (field.className.indexOf("rgb") !== -1) { + var red = document.getElementById(value+"-red"); + var blue = document.getElementById(value+"-blue"); + var green = document.getElementById(value+"-green"); + red.value = property.red; + blue.value = property.blue; + green.value = property.green; + // crashes here. + + } else if (field.className.indexOf("xyz")) { + + var x = document.getElementById(value+"-x"); + var y = document.getElementById(value+"-y"); + var z = document.getElementById(value+"-z"); + // crashes here. + + if (value === "emitOrientation") { + + } else { + x.value = property.x; + y.value = property.y; + z.value = property.z; + } + } + } + } + + }); + } else if (data.messageType === 'particle_close') { + // Legacy event on particle close. This webview actually gets removed now + } + }); }, build: function () { var self = this; var sections = Object.keys(this.structure); - + this.builtRows = {}; sections.forEach(function(section, index){ var properties = self.structure[section]; self.addSection(self.parent,section,properties,index); @@ -86,7 +155,12 @@ HifiEntityUI.prototype = { animationWrapper.className = "section-wrap"; for (var property in properties) { - self.addElement(animationWrapper, properties[property]); + + var builtRow = self.addElement(animationWrapper, properties[property]) + var id = properties[property].id; + if (id) { + self.builtRows[id] = builtRow; + } } sectionDivBody.appendChild(animationWrapper); parent.appendChild(sectionDivBody); @@ -152,6 +226,7 @@ HifiEntityUI.prototype = { element.oninput = function(event) { self.webBridgeSync(group.id, {x: domArray[0].value, y: domArray[1].value, z: domArray[2].value}); }; + element.onchange = element.oninput; domArray.push(element); } @@ -210,6 +285,7 @@ HifiEntityUI.prototype = { $colPickContainer.colpickSetColor({r: domArray[0].value, g: domArray[1].value, b: domArray[2].value}, true); }; + element.onchange = element.oninput; domArray.push(element); } @@ -274,6 +350,7 @@ HifiEntityUI.prototype = { var textureImage = document.createElement("div"); var textureUrl = document.createElement("input"); textureUrl.setAttribute("type", "text"); + textureUrl.id = group.id; textureImage.className = "texture-image no-texture"; var image = document.createElement("img"); var imageLoad = _.debounce(function(url){ @@ -294,7 +371,7 @@ HifiEntityUI.prototype = { var url = event.target.value; imageLoad(url); }; - + textureUrl.onchange = textureUrl.oninput; textureImage.appendChild(image); parent.appendChild(textureImage); parent.appendChild(textureUrl); @@ -327,6 +404,7 @@ HifiEntityUI.prototype = { slider.value = event.target.value; self.webBridgeSync(group.id, slider.value); }; + inputField.onchange = inputField.oninput; slider.oninput = function (event){ inputField.value = event.target.value; self.webBridgeSync(group.id, slider.value); @@ -337,7 +415,7 @@ HifiEntityUI.prototype = { slider.setAttribute("min", group.min !== undefined ? group.min: 0); slider.setAttribute("max", group.max !== undefined ? group.max: 180); slider.setAttribute("step", 1); - + parent.className += " radian"; inputField.setAttribute("min", (group.min !== undefined ? group.min: 0) ); inputField.setAttribute("max", (group.max !== undefined ? group.max: 180)); @@ -345,6 +423,9 @@ HifiEntityUI.prototype = { slider.value = event.target.value; self.webBridgeSync(group.id, slider.value * RADIAN ); }; + inputField.onchange = inputField.oninput; + + inputField.id = group.id; slider.oninput = function (event){ if (event.target.value > 0){ inputField.value = Math.floor(event.target.value); @@ -361,7 +442,6 @@ HifiEntityUI.prototype = { degrees.style.paddingLeft = "0.4rem"; container.appendChild(degrees); - slider.id = group.id; } else { // Must then be Float inputField.setAttribute("min", group.min !== undefined? group.min: 0); @@ -376,6 +456,7 @@ HifiEntityUI.prototype = { self.webBridgeSync(group.id, slider.value); // bind web sock update here. }; + inputField.onchange = inputField.oninput; slider.oninput = function (event){ inputField.value = event.target.value; self.webBridgeSync(group.id, inputField.value); @@ -448,6 +529,6 @@ HifiEntityUI.prototype = { default: console.log("not defined"); } - + return row; } }; diff --git a/scripts/system/particle_explorer/particleExplorer.js b/scripts/system/particle_explorer/particleExplorer.js index 94fced626f..cbb59bd9bc 100644 --- a/scripts/system/particle_explorer/particleExplorer.js +++ b/scripts/system/particle_explorer/particleExplorer.js @@ -12,7 +12,7 @@ // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -/* HifiEntityUI */ +/* global HifiEntityUI, openEventBridge, EventBridge, document, window */ (function(){ var menuStructure = { @@ -246,8 +246,11 @@ var root = document.getElementById("particle-explorer"); - window.addEventListener('load', function(){ + window.onload = function(){ var ui = new HifiEntityUI(root, menuStructure); - ui.build(); - }); + openEventBridge( function(EventBridge) { + ui.build(); + ui.connect(EventBridge); + }) + }; })();