From 9201af96bdab539b8c4b85b3ffc169b389786e03 Mon Sep 17 00:00:00 2001 From: Menithal Date: Sat, 27 May 2017 11:02:01 +0300 Subject: [PATCH] Added Changes from Alan's Feedback --- .../particle_explorer/hifi-entity-ui.js | 106 +++++------ .../particle_explorer/particle-style.css | 18 +- .../particle_explorer/particleExplorer.js | 169 ++++++++++++------ 3 files changed, 170 insertions(+), 123 deletions(-) diff --git a/scripts/system/particle_explorer/hifi-entity-ui.js b/scripts/system/particle_explorer/hifi-entity-ui.js index fb728bbd92..9eff03d696 100644 --- a/scripts/system/particle_explorer/hifi-entity-ui.js +++ b/scripts/system/particle_explorer/hifi-entity-ui.js @@ -77,8 +77,6 @@ HifiEntityUI.prototype = { fields[i].value = ""; } } - - var textareas = document.getElementsByTagName("textarea"); for (var x = 0; x < textareas.length; x++) { textareas[x].remove(); @@ -299,10 +297,10 @@ HifiEntityUI.prototype = { } return label; }, - addVector: function(parent, group, labels) { + addVector: function(parent, group, labels, domArray) { var self = this; var inputs = labels ? labels : ["x", "y", "z"]; - var domArray = []; + domArray = domArray ? domArray: []; parent.id = group.id; for (var index in inputs) { var element = document.createElement("input"); @@ -310,13 +308,29 @@ HifiEntityUI.prototype = { element.setAttribute("type", "number"); element.className = inputs[index]; element.id = group.id + "-" + inputs[index]; - element.oninput = function(event) { - self.webBridgeSync(group.id, { - x: domArray[0].value, - y: domArray[1].value, - z: domArray[2].value - }); - }; + + if (group.defaultRange) { + if (group.defaultRange.min) { + element.setAttribute("min", group.defaultRange.min); + } + if (group.defaultRange.max) { + element.setAttribute("max", group.defaultRange.max); + } + if (group.defaultRange.step) { + element.setAttribute("step", group.defaultRange.step); + } + } + if (group.oninput) { + element.oninput = group.oninput; + } else { + 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); } @@ -361,33 +375,23 @@ HifiEntityUI.prototype = { var inputs = ["red", "green", "blue"]; var domArray = []; + group.oninput = function(event) { + $colPickContainer.colpickSetColor( + { + r: domArray[0].value, + g: domArray[1].value, + b: domArray[2].value + }, + true); + }; + group.defaultRange = { + min: 0, + max: 255, + step: 1 + }; - for (var index in inputs) { - var element = document.createElement("input"); - if (group.defaultColor) { - element.value = group.defaultColor[inputs[index]]; - } else if (inputs[index] === "red") { - element.value = 255; - } else { - element.value = 0; - } - element.setAttribute("type", "number"); - element.className = inputs[index]; - element.setAttribute("min", 0); - element.setAttribute("max", 255); - element.id = group.id + "-" + inputs[index]; - element.oninput = function(event) { - $colPickContainer.colpickSetColor( - { - r: domArray[0].value, - g: domArray[1].value, - b: domArray[2].value - }, - true); - }; - element.onchange = element.oninput; - domArray.push(element); - } + parent.appendChild($colPickContainer[0]); + self.addVector(parent, group, inputs, domArray); updateColors(domArray[0].value, domArray[1].value, domArray[2].value); @@ -396,7 +400,6 @@ HifiEntityUI.prototype = { /* Color Picker Logic Here */ - parent.appendChild($colPickContainer[0]); $colPickContainer.colpick({ colorScheme: 'dark', @@ -431,29 +434,6 @@ HifiEntityUI.prototype = { }); } }); - var li = document.createElement("li"); - li.className = "cr object color"; - - - this.addLabel(parent, group); - parent.className += " property vector-section rgb"; - - // Add Tuple and the rest - var tupleContainer = document.createElement("div"); - tupleContainer.className = "tuple"; - for (var domIndex in domArray) { - var container = domArray[domIndex]; - var div = document.createElement("div"); - var label = document.createElement("label"); - label.innerHTML = inputs[domIndex] + ":"; - label.setAttribute("for", container.id); - div.appendChild(container); - div.appendChild(label); - tupleContainer.appendChild(div); - } - parent.appendChild(tupleContainer); - - }, addTextureField: function(parent, group) { var self = this; @@ -602,6 +582,10 @@ HifiEntityUI.prototype = { case "Button": var button = document.createElement("input"); button.setAttribute("type", "button"); + button.id = group.id; + if (group.disabled) { + button.disabled = group.disabled; + } button.className = group.class; button.value = group.name; diff --git a/scripts/system/particle_explorer/particle-style.css b/scripts/system/particle_explorer/particle-style.css index c4e252117e..6440d9171d 100644 --- a/scripts/system/particle_explorer/particle-style.css +++ b/scripts/system/particle_explorer/particle-style.css @@ -8,10 +8,6 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html */ -input[type="button"] { - margin: 0.4rem; - -} .property-group { max-height: 0; @@ -35,9 +31,16 @@ input[type="button"] { .property.range label{ display: block; } + +input[type="button"] { + margin: 0.2rem; +} +input[type="text"] { + margin: 0; +} .property.range input[type=number]{ margin-left: 0.8rem; - width: 4.2rem; + width: 5.4rem; height: 1.8rem; } input[type=range] { @@ -55,6 +58,9 @@ input[type=range]::-webkit-slider-thumb { background-color: #696969; border-radius: 1rem; } +input[type=range]::-webkit-slider-thumb:hover { + background-color: white; +} input[type=range]:focus { /*#252525*/ outline: none; } @@ -80,9 +86,7 @@ hr.splitter:last-of-type{ width: 1rem; } .property { - width: 14rem; min-height: 2rem; - float:left; } .property.vector-section{ diff --git a/scripts/system/particle_explorer/particleExplorer.js b/scripts/system/particle_explorer/particleExplorer.js index eef80b35af..3b3da4b0b3 100644 --- a/scripts/system/particle_explorer/particleExplorer.js +++ b/scripts/system/particle_explorer/particleExplorer.js @@ -13,7 +13,7 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // /* global HifiEntityUI, openEventBridge, console, EventBridge, document, window */ -/* eslint no-console: 0 */ +/* eslint no-console: 0, no-global-assign: 0 */ (function(){ @@ -22,45 +22,69 @@ window.onload = function(){ var ui = new HifiEntityUI(root); var textarea = document.createElement("textarea"); - + var properties = ""; var menuStructure = { General: [ { type: "Row", id: "export-import-field" }, { - id: "importSettings", - name: "Import Settings", + id: "show-properties-button", + name: "Show Properties", type: "Button", class: "blue", callback: function(event){ - var insertZone = document.getElementById("export-import-field"); - var json = ui.getSettings(); - textarea.value = JSON.stringify(json); + properties = JSON.stringify(json); + textarea.value = properties; if (!insertZone.contains(textarea)) { insertZone.appendChild(textarea); insertZone.parentNode.parentNode.style.maxHeight = insertZone.parentNode.clientHeight + "px"; - + document.getElementById("export-properties-button").removeAttribute("disabled"); + textarea.onchange = function(e) { + if (e.target.value !== properties){ + document.getElementById("import-properties-button").removeAttribute("disabled"); + } + }; + textarea.oninput = textarea.onchange; + } else { + textarea.onchange = function(){}; + textarea.oninput = textarea.onchange; + textarea.value = ""; + textarea.remove(); + insertZone.parentNode.parentNode.style.maxHeight = + insertZone.parentNode.clientHeight + "px"; + document.getElementById("export-properties-button").setAttribute("disabled",true); + document.getElementById("import-properties-button").setAttribute("disabled",true); } - textarea.onchange = function () { - ui.fillFields(JSON.parse(textarea.value)); - ui.submitChanges(JSON.parse(textarea.value)); - }; } }, { - id: "exportSettings", - name: "Export Settings", + id: "import-properties-button", + name: "Import", + type: "Button", + class: "blue", + disabled: true, + callback: function(event){ + ui.fillFields(JSON.parse(textarea.value)); + ui.submitChanges(JSON.parse(textarea.value)); + } + }, + { + id: "export-properties-button", + name: "Export", type: "Button", class: "red", + disabled: true, callback: function(event){ - var json = ui.getSettings(); - textarea.onchange = function(){}; - var insertZone = document.getElementById("export-import-field"); - textarea.value = JSON.stringify(json); - if (!insertZone.parentNode.contains(textarea)) { - insertZone.appendChild(textarea); + textarea.select(); + try { + var success = document.execCommand('copy'); + if (!success ){ + throw "Not success :("; + } + } catch (e) { + print("couldnt copy field"); } } }, @@ -99,7 +123,8 @@ id: "emitRate", name: "Emit Rate", type: "SliderInteger", - max: 1000 + max: 1000, + min: 1 }, { type: "Row" }, { @@ -108,7 +133,16 @@ type: "SliderFloat", max: 5 }, - + { type: "Row" }, + { + id: "emitDimensions", + name: "Emit Dimension", + type: "Vector", + defaultRange: { + min: 0, + step: 0.01 + } + }, { type: "Row" }, { id: "emitOrientation", @@ -124,6 +158,36 @@ }, { type: "Row" } ], + Radius: [ + { + id: "particleRadius", + name: "Particle Radius", + type: "SliderFloat", + max: 4.0 + }, + { type: "Row" }, + { + id: "radiusSpread", + name: "Radius Spread", + type: "SliderFloat", + max: 4.0 + }, + { type: "Row" }, + { + id: "radiusStart", + name: "Radius Start", + type: "SliderFloat", + max: 4.0 + }, + { type: "Row" }, + { + id: "radiusFinish", + name: "Radius Finish", + type: "SliderFloat", + max: 4.0 + }, + { type: "Row" } + ], Color: [ { id: "color", @@ -174,13 +238,19 @@ { id: "emitAcceleration", name: "Emit Acceleration", - type: "Vector" + type: "Vector", + defaultRange: { + step: 0.01 + } }, { type: "Row" }, { id: "accelerationSpread", name: "Acceleration Spread", - type: "Vector" + type: "Vector", + defaultRange: { + step: 0.01 + } }, { type: "Row" } ], @@ -243,42 +313,31 @@ type: "SliderRadian" }, { type: "Row" } - ], - Radius: [ - { - id: "particleRadius", - name: "Particle Radius", - type: "SliderFloat", - max: 4.0 - }, - { type: "Row" }, - { - id: "radiusSpread", - name: "Radius Spread", - type: "SliderFloat", - max: 4.0 - }, - { type: "Row" }, - { - id: "radiusStart", - name: "Radius Start", - type: "SliderFloat", - max: 4.0 - }, - { type: "Row" }, - { - id: "radiusFinish", - name: "Radius Finish", - type: "SliderFloat", - max: 4.0 - }, - { type: "Row" } ] }; ui.setUI(menuStructure); + ui.build(); + var overrideLoad = false; + if (openEventBridge === undefined) { + overrideLoad = true, + openEventBridge = function(callback) { + callback( + { + emitWebEvent: function(){}, + submitChanges: function(){}, + scriptEventReceived: { + connect: function() { + + } + } + }); + }; + } openEventBridge( function(EventBridge) { - ui.build(); ui.connect(EventBridge); }); + if (overrideLoad) { + openEventBridge(); + } }; })();