Added Changes from Alan's Feedback

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, {
+            if (group.defaultRange) {
-                    x: domArray[0].value,
+                if (group.defaultRange.min) {
-                    y: domArray[1].value,
+                    element.setAttribute("min", group.defaultRange.min);
-                    z: domArray[2].value
+                }
-                });
+                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) {
+        parent.appendChild($colPickContainer[0]);
-            var element = document.createElement("input");
+        self.addVector(parent, group, inputs, domArray);
-            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);
-        }
 
         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;
 

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{
 

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",
+                    id: "show-properties-button",
-                    name: "Import Settings",
+                    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",
+                    id: "import-properties-button",
-                    name: "Export Settings",
+                    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.select();
-                        textarea.onchange = function(){};
+                        try {
-                        var insertZone = document.getElementById("export-import-field");
+                            var success = document.execCommand('copy');
-                        textarea.value = JSON.stringify(json);
+                            if (!success ){
-                        if (!insertZone.parentNode.contains(textarea)) {
+                                throw "Not success :(";
-                            insertZone.appendChild(textarea);
+                            }
+                        } 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();
+        }
     };
 })();