Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-08 23:57:13 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

21324: Formatting and PR Feedback Changes

Browse source
This commit is contained in:
Menithal 2017-06-13 19:04:43 +03:00
parent 4842de8f07
commit 0edb763dac
2 changed files with 288 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

325
scripts/system/particle_explorer/hifi-entity-ui.js
View file

@ -43,18 +43,24 @@ and If there is any changes to either the Entities or properties of
**/ **/
var RADIAN = Math.PI / 180; var RADIANS_PER_DEGREE = Math.PI / 180;
var roundFloat = function (input, round) { var roundFloat = function (input, round) {
round = round ? round: 1000; round = round ? round : 1000;
return Math.round(parseFloat(input) * round)/round; var sanitizedInput;
if (typeof input === "string") {
sanitizedInput = parseFloat(input);
} else {
sanitizedInput = input;
}
return Math.round(sanitizedInput * round) / round;
}; };
function HifiEntityUI(parent) { function HifiEntityUI(parent) {
this.parent = parent; this.parent = parent;
var self = this; var self = this;
this.webBridgeSync = _.debounce(function(id, val) { this.webBridgeSync = _.debounce(function (id, val) {
if (self.EventBridge) { if (self.EventBridge) {
var sendPackage = {}; var sendPackage = {};
sendPackage[id] = val; sendPackage[id] = val;
@ -64,7 +70,7 @@ function HifiEntityUI(parent) {
} }
HifiEntityUI.prototype = { HifiEntityUI.prototype = {
setOnSelect: function (callback){ setOnSelect: function (callback) {
this.onSelect = callback; this.onSelect = callback;
}, },
submitChanges: function (structure) { submitChanges: function (structure) {
@ -77,7 +83,7 @@ HifiEntityUI.prototype = {
setUI: function (structure) { setUI: function (structure) {
this.structure = structure; this.structure = structure;
}, },
disableFields: function() { disableFields: function () {
var fields = document.getElementsByTagName("input"); var fields = document.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++) { for (var i = 0; i < fields.length; i++) {
if (fields[i].getAttribute("type") !== "button") { if (fields[i].getAttribute("type") !== "button") {
@ -93,7 +99,8 @@ HifiEntityUI.prototype = {
textures = document.getElementsByClassName("with-texture"); textures = document.getElementsByClassName("with-texture");
for (i = 0; i < textures.length; i++) { for (i = 0; i < textures.length; i++) {
textures[i].className = textures[i].className.replace("with-texture", "no-texture"); textures[i].classList.remove("with-textures");
textures[i].classList.add("no-texture");
} }
var textareas = document.getElementsByTagName("textarea"); var textareas = document.getElementsByTagName("textarea");
@ -101,7 +108,7 @@ HifiEntityUI.prototype = {
textareas[x].remove(); textareas[x].remove();
} }
}, },
getSettings: function() { getSettings: function () {
var self = this; var self = this;
var json = {}; var json = {};
var keys = Object.keys(self.builtRows); var keys = Object.keys(self.builtRows);
@ -110,7 +117,8 @@ HifiEntityUI.prototype = {
var key = keys[i]; var key = keys[i];
var el = self.builtRows[key]; var el = self.builtRows[key];
if (el.className.indexOf("checkbox") !== -1) { if (el.className.indexOf("checkbox") !== -1) {
json[key] = document.getElementById(key).checked ? true: false; json[key] = document.getElementById(key)
.checked ? true : false;
} else if (el.className.indexOf("vector-section") !== -1) { } else if (el.className.indexOf("vector-section") !== -1) {
var vector = {}; var vector = {};
if (el.className.indexOf("rgb") !== -1) { if (el.className.indexOf("rgb") !== -1) {
@ -136,14 +144,15 @@ HifiEntityUI.prototype = {
vector.z = z.value; vector.z = z.value;
} }
json[key] = vector; json[key] = vector;
} else if (el.className.length > 0){ } else if (el.className.length > 0) {
json[key] = document.getElementById(key).value; json[key] = document.getElementById(key)
.value;
} }
} }
return json; return json;
}, },
fillFields: function(currentProperties) { fillFields: function (currentProperties) {
var self = this; var self = this;
var fields = document.getElementsByTagName("input"); var fields = document.getElementsByTagName("input");
@ -159,64 +168,66 @@ HifiEntityUI.prototype = {
for (var e in keys) { for (var e in keys) {
var value = keys[e]; if (keys.hasOwnProperty[e]) {
var value = keys[e];
var property = currentProperties[value]; var property = currentProperties[value];
var field = self.builtRows[value]; var field = self.builtRows[value];
if (field) { if (field) {
var el = document.getElementById(value); var el = document.getElementById(value);
if (field.className.indexOf("radian") !== -1) { if (field.className.indexOf("radian") !== -1) {
el.value = property / RADIAN; el.value = property / RADIANS_PER_DEGREE;
el.onchange({ el.onchange({
target: el 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 = parseInt(property.red);
blue.value = parseInt(property.blue);
green.value = parseInt(property.green);
red.oninput({
target: red
}); });
} else if (field.className.indexOf("xyz") !== -1) { } else if (field.className.indexOf("range") !== -1 || field.className.indexOf("texture") !== -1) {
var x = document.getElementById(value + "-x"); el.value = property;
var y = document.getElementById(value + "-y"); el.onchange({
var z = document.getElementById(value + "-z"); 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 = parseInt(property.red);
blue.value = parseInt(property.blue);
green.value = parseInt(property.green);
x.value = roundFloat(property.x, 100); red.oninput({
y.value = roundFloat(property.y, 100); target: red
z.value = roundFloat(property.z, 100); });
} else if (field.className.indexOf("pyr") !== -1) { } else if (field.className.indexOf("xyz") !== -1) {
var pitch = document.getElementById(value + "-Pitch"); var x = document.getElementById(value + "-x");
var yaw = document.getElementById(value + "-Yaw"); var y = document.getElementById(value + "-y");
var roll = document.getElementById(value + "-Roll"); var z = document.getElementById(value + "-z");
pitch.value = roundFloat(property.x, 100); x.value = roundFloat(property.x, 100);
yaw.value = roundFloat(property.y, 100); y.value = roundFloat(property.y, 100);
roll.value = roundFloat(property.z, 100); z.value = roundFloat(property.z, 100);
} else if (field.className.indexOf("pyr") !== -1) {
var pitch = document.getElementById(value + "-Pitch");
var yaw = document.getElementById(value + "-Yaw");
var roll = document.getElementById(value + "-Roll");
pitch.value = roundFloat(property.x, 100);
yaw.value = roundFloat(property.y, 100);
roll.value = roundFloat(property.z, 100);
}
} }
} }
} }
} }
}, },
connect: function(EventBridge) { connect: function (EventBridge) {
this.EventBridge = EventBridge; this.EventBridge = EventBridge;
var self = this; var self = this;
@ -225,7 +236,7 @@ HifiEntityUI.prototype = {
messageType: 'page_loaded' messageType: 'page_loaded'
})); }));
EventBridge.scriptEventReceived.connect(function(data) { EventBridge.scriptEventReceived.connect(function (data) {
data = JSON.parse(data); data = JSON.parse(data);
if (data.messageType === 'particle_settings') { if (data.messageType === 'particle_settings') {
@ -238,16 +249,16 @@ HifiEntityUI.prototype = {
} }
}); });
}, },
build: function() { build: function () {
var self = this; var self = this;
var sections = Object.keys(this.structure); var sections = Object.keys(this.structure);
this.builtRows = {}; this.builtRows = {};
sections.forEach(function(section, index) { sections.forEach(function (section, index) {
var properties = self.structure[section]; var properties = self.structure[section];
self.addSection(self.parent, section, properties, index); self.addSection(self.parent, section, properties, index);
}); });
}, },
addSection: function(parent, section, properties, index) { addSection: function (parent, section, properties, index) {
var self = this; var self = this;
var sectionDivHeader = document.createElement("div"); var sectionDivHeader = document.createElement("div");
@ -272,37 +283,33 @@ HifiEntityUI.prototype = {
animationWrapper.className = "section-wrap"; animationWrapper.className = "section-wrap";
for (var property in properties) { for (var property in properties) {
if (properties.hasOwnProperty[property]) {
var builtRow = self.addElement(animationWrapper, properties[property]); var builtRow = self.addElement(animationWrapper, properties[property]);
var id = properties[property].id; var id = properties[property].id;
if (id) { if (id) {
self.builtRows[id] = builtRow; self.builtRows[id] = builtRow;
}
} }
} }
sectionDivBody.appendChild(animationWrapper); sectionDivBody.appendChild(animationWrapper);
parent.appendChild(sectionDivBody); parent.appendChild(sectionDivBody);
_.defer(function() { _.defer(function () {
var height = (animationWrapper.clientHeight) + "px"; var height = (animationWrapper.clientHeight) + "px";
if (collapsed) { if (collapsed) {
sectionDivBody.className = sectionDivBody.className sectionDivBody.classList.remove("visible");
.replace("visible", "")
.replace(/\s{2,}/g, " ");
sectionDivBody.style.maxHeight = "0px"; sectionDivBody.style.maxHeight = "0px";
} else { } else {
sectionDivBody.className += " visible"; sectionDivBody.classList.add("visible");
sectionDivBody.style.maxHeight = height; sectionDivBody.style.maxHeight = height;
} }
sectionDivHeader.onclick = function() { sectionDivHeader.onclick = function () {
collapsed = !collapsed; collapsed = !collapsed;
if (collapsed) { if (collapsed) {
sectionDivBody.className = sectionDivBody.className sectionDivBody.classList.remove("visible");
.replace("visible", "")
.replace(/\s{2,}/g, " ");
sectionDivBody.style.maxHeight = "0px"; sectionDivBody.style.maxHeight = "0px";
} else { } else {
sectionDivBody.className += " visible"; sectionDivBody.classList.add("visible");
sectionDivBody.style.maxHeight = (animationWrapper.clientHeight) + "px"; sectionDivBody.style.maxHeight = (animationWrapper.clientHeight) + "px";
} }
// sectionDivBody.style.display = collapsed ? "none": "block"; // sectionDivBody.style.display = collapsed ? "none": "block";
@ -311,7 +318,7 @@ HifiEntityUI.prototype = {
}; };
}); });
}, },
addLabel: function(parent, group) { addLabel: function (parent, group) {
var label = document.createElement("label"); var label = document.createElement("label");
label.innerHTML = group.name; label.innerHTML = group.name;
parent.appendChild(label); parent.appendChild(label);
@ -323,10 +330,10 @@ HifiEntityUI.prototype = {
} }
return label; return label;
}, },
addVector: function(parent, group, labels, domArray) { addVector: function (parent, group, labels, domArray) {
var self = this; var self = this;
var inputs = labels ? labels : ["x", "y", "z"]; var inputs = labels ? labels : ["x", "y", "z"];
domArray = domArray ? domArray: []; domArray = domArray ? domArray : [];
parent.id = group.id; parent.id = group.id;
for (var index in inputs) { for (var index in inputs) {
var element = document.createElement("input"); var element = document.createElement("input");
@ -349,7 +356,7 @@ HifiEntityUI.prototype = {
if (group.oninput) { if (group.oninput) {
element.oninput = group.oninput; element.oninput = group.oninput;
} else { } else {
element.oninput = function(event) { element.oninput = function (event) {
self.webBridgeSync(group.id, { self.webBridgeSync(group.id, {
x: domArray[0].value, x: domArray[0].value,
y: domArray[1].value, y: domArray[1].value,
@ -364,7 +371,8 @@ HifiEntityUI.prototype = {
this.addLabel(parent, group); this.addLabel(parent, group);
var className = ""; var className = "";
for (var i = 0; i < inputs.length; i++) { for (var i = 0; i < inputs.length; i++) {
className += inputs[i].charAt(0).toLowerCase(); className += inputs[i].charAt(0)
.toLowerCase();
} }
parent.className += " property vector-section " + className; parent.className += " property vector-section " + className;
@ -383,16 +391,16 @@ HifiEntityUI.prototype = {
} }
parent.appendChild(tupleContainer); parent.appendChild(tupleContainer);
}, },
addVectorQuaternion: function(parent, group) { addVectorQuaternion: function (parent, group) {
this.addVector(parent, group, ["Pitch", "Yaw", "Roll"]); this.addVector(parent, group, ["Pitch", "Yaw", "Roll"]);
}, },
addColorPicker: function(parent, group) { addColorPicker: function (parent, group) {
var self = this; var self = this;
var $colPickContainer = $('<div>', { var $colPickContainer = $('<div>', {
id: group.id, id: group.id,
class: "color-picker" class: "color-picker"
}); });
var updateColors = function(red, green, blue) { var updateColors = function (red, green, blue) {
$colPickContainer.css('background-color', "rgb(" + $colPickContainer.css('background-color', "rgb(" +
red + "," + red + "," +
green + "," + green + "," +
@ -401,7 +409,7 @@ HifiEntityUI.prototype = {
var inputs = ["red", "green", "blue"]; var inputs = ["red", "green", "blue"];
var domArray = []; var domArray = [];
group.oninput = function(event) { group.oninput = function (event) {
$colPickContainer.colpickSetColor( $colPickContainer.colpickSetColor(
{ {
r: domArray[0].value, r: domArray[0].value,
@ -435,7 +443,7 @@ HifiEntityUI.prototype = {
g: domArray[1].value, g: domArray[1].value,
b: domArray[2].value b: domArray[2].value
}, },
onChange: function(hsb, hex, rgb, el) { onChange: function (hsb, hex, rgb, el) {
updateColors(rgb.r, rgb.g, rgb.b); updateColors(rgb.r, rgb.g, rgb.b);
domArray[0].value = rgb.r; domArray[0].value = rgb.r;
@ -447,9 +455,11 @@ HifiEntityUI.prototype = {
blue: rgb.b blue: rgb.b
}); });
}, },
onSubmit: function(hsb, hex, rgb, el) { onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex); $(el)
$(el).colpickHide(); .css('background-color', '#' + hex);
$(el)
.colpickHide();
domArray[0].value = rgb.r; domArray[0].value = rgb.r;
domArray[1].value = rgb.g; domArray[1].value = rgb.g;
domArray[2].value = rgb.b; domArray[2].value = rgb.b;
@ -461,7 +471,7 @@ HifiEntityUI.prototype = {
} }
}); });
}, },
addTextureField: function(parent, group) { addTextureField: function (parent, group) {
var self = this; var self = this;
this.addLabel(parent, group); this.addLabel(parent, group);
parent.className += " property texture"; parent.className += " property texture";
@ -471,20 +481,21 @@ HifiEntityUI.prototype = {
textureUrl.id = group.id; textureUrl.id = group.id;
textureImage.className = "texture-image no-texture"; textureImage.className = "texture-image no-texture";
var image = document.createElement("img"); var image = document.createElement("img");
var imageLoad = _.debounce(function(url) { var imageLoad = _.debounce(function (url) {
if (url.length > 0) { if (url.length > 0) {
textureImage.className = textureImage.className.replace(' no-texture', ' with-texture'); textureImage.classList.remove("no-texture");
textureImage.classList.add("with-texture");
image.src = url; image.src = url;
image.style.display = "block"; image.style.display = "block";
} else { } else {
image.src = ""; image.src = "";
image.style.display = "none"; image.style.display = "none";
textureImage.className += " no-texture"; textureImage.classList.add("no-texture");
} }
self.webBridgeSync(group.id, url); self.webBridgeSync(group.id, url);
}, 250); }, 250);
textureUrl.oninput = function(event) { textureUrl.oninput = function (event) {
// Add throttle // Add throttle
var url = event.target.value; var url = event.target.value;
imageLoad(url); imageLoad(url);
@ -494,7 +505,7 @@ HifiEntityUI.prototype = {
parent.appendChild(textureImage); parent.appendChild(textureImage);
parent.appendChild(textureUrl); parent.appendChild(textureUrl);
}, },
addSlider: function(parent, group) { addSlider: function (parent, group) {
var self = this; var self = this;
this.addLabel(parent, group); this.addLabel(parent, group);
parent.className += " property range"; parent.className += " property range";
@ -518,7 +529,7 @@ HifiEntityUI.prototype = {
slider.setAttribute("max", group.max !== undefined ? group.max : 10000); slider.setAttribute("max", group.max !== undefined ? group.max : 10000);
slider.setAttribute("step", 1); slider.setAttribute("step", 1);
inputField.oninput = function(event) { inputField.oninput = function (event) {
if (parseInt(event.target.value) > parseInt(slider.getAttribute("max")) && group.max !== 1) { if (parseInt(event.target.value) > parseInt(slider.getAttribute("max")) && group.max !== 1) {
slider.setAttribute("max", event.target.value); slider.setAttribute("max", event.target.value);
@ -528,7 +539,7 @@ HifiEntityUI.prototype = {
self.webBridgeSync(group.id, slider.value); self.webBridgeSync(group.id, slider.value);
}; };
inputField.onchange = inputField.oninput; inputField.onchange = inputField.oninput;
slider.oninput = function(event) { slider.oninput = function (event) {
inputField.value = event.target.value; inputField.value = event.target.value;
self.webBridgeSync(group.id, slider.value); self.webBridgeSync(group.id, slider.value);
}; };
@ -542,20 +553,20 @@ HifiEntityUI.prototype = {
inputField.setAttribute("min", (group.min !== undefined ? group.min : 0)); inputField.setAttribute("min", (group.min !== undefined ? group.min : 0));
inputField.setAttribute("max", (group.max !== undefined ? group.max : 180)); inputField.setAttribute("max", (group.max !== undefined ? group.max : 180));
inputField.oninput = function(event) { inputField.oninput = function (event) {
slider.value = event.target.value; slider.value = event.target.value;
self.webBridgeSync(group.id, slider.value * RADIAN); self.webBridgeSync(group.id, slider.value * RADIANS_PER_DEGREE);
}; };
inputField.onchange = inputField.oninput; inputField.onchange = inputField.oninput;
inputField.id = group.id; inputField.id = group.id;
slider.oninput = function(event) { slider.oninput = function (event) {
if (event.target.value > 0) { if (event.target.value > 0) {
inputField.value = Math.floor(event.target.value); inputField.value = Math.floor(event.target.value);
} else { } else {
inputField.value = Math.ceil(event.target.value); inputField.value = Math.ceil(event.target.value);
} }
self.webBridgeSync(group.id, slider.value * RADIAN); self.webBridgeSync(group.id, slider.value * RADIANS_PER_DEGREE);
}; };
var degrees = document.createElement("label"); var degrees = document.createElement("label");
degrees.innerHTML = "&#176;"; degrees.innerHTML = "&#176;";
@ -574,7 +585,7 @@ HifiEntityUI.prototype = {
slider.setAttribute("max", group.max !== undefined ? group.max : 1); slider.setAttribute("max", group.max !== undefined ? group.max : 1);
slider.setAttribute("step", 0.01); slider.setAttribute("step", 0.01);
inputField.oninput = function(event) { inputField.oninput = function (event) {
if (parseFloat(event.target.value) > parseFloat(slider.getAttribute("max")) && group.max !== 1) { if (parseFloat(event.target.value) > parseFloat(slider.getAttribute("max")) && group.max !== 1) {
slider.setAttribute("max", event.target.value); slider.setAttribute("max", event.target.value);
} }
@ -584,7 +595,7 @@ HifiEntityUI.prototype = {
// bind web sock update here. // bind web sock update here.
}; };
inputField.onchange = inputField.oninput; inputField.onchange = inputField.oninput;
slider.oninput = function(event) { slider.oninput = function (event) {
inputField.value = event.target.value; inputField.value = event.target.value;
self.webBridgeSync(group.id, inputField.value); self.webBridgeSync(group.id, inputField.value);
}; };
@ -594,11 +605,11 @@ HifiEntityUI.prototype = {
// UpdateBinding // UpdateBinding
}, },
addCheckBox: function(parent, group) { addCheckBox: function (parent, group) {
var checkBox = document.createElement("input"); var checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkbox"); checkBox.setAttribute("type", "checkbox");
var self = this; var self = this;
checkBox.onchange = function(event) { checkBox.onchange = function (event) {
self.webBridgeSync(group.id, event.target.checked); self.webBridgeSync(group.id, event.target.checked);
}; };
checkBox.id = group.id; checkBox.id = group.id;
@ -607,62 +618,62 @@ HifiEntityUI.prototype = {
label.setAttribute("for", checkBox.id); label.setAttribute("for", checkBox.id);
parent.className += " property checkbox"; parent.className += " property checkbox";
}, },
addElement: function(parent, group) { addElement: function (parent, group) {
var self = this; var self = this;
var property = document.createElement("div"); var property = document.createElement("div");
property.id = group.id; property.id = group.id;
var row = document.createElement("div"); var row = document.createElement("div");
switch (group.type) { switch (group.type) {
case "Button": case "Button":
var button = document.createElement("input"); var button = document.createElement("input");
button.setAttribute("type", "button"); button.setAttribute("type", "button");
button.id = group.id; button.id = group.id;
if (group.disabled) { if (group.disabled) {
button.disabled = group.disabled; button.disabled = group.disabled;
} }
button.className = group.class; button.className = group.class;
button.value = group.name; button.value = group.name;
button.onclick = group.callback; button.onclick = group.callback;
parent.appendChild(button); parent.appendChild(button);
break; break;
case "Row": case "Row":
var hr = document.createElement("hr"); var hr = document.createElement("hr");
hr.className = "splitter"; hr.className = "splitter";
if (group.id) { if (group.id) {
hr.id = group.id; hr.id = group.id;
} }
parent.appendChild(hr); parent.appendChild(hr);
break; break;
case "Boolean": case "Boolean":
self.addCheckBox(row, group); self.addCheckBox(row, group);
parent.appendChild(row); parent.appendChild(row);
break; break;
case "SliderFloat": case "SliderFloat":
case "SliderInteger": case "SliderInteger":
case "SliderRadian": case "SliderRadian":
self.addSlider(row, group); self.addSlider(row, group);
parent.appendChild(row); parent.appendChild(row);
break; break;
case "Texture": case "Texture":
self.addTextureField(row, group); self.addTextureField(row, group);
parent.appendChild(row); parent.appendChild(row);
break; break;
case "Color": case "Color":
self.addColorPicker(row, group); self.addColorPicker(row, group);
parent.appendChild(row); parent.appendChild(row);
break; break;
case "Vector": case "Vector":
self.addVector(row, group); self.addVector(row, group);
parent.appendChild(row); parent.appendChild(row);
break; break;
case "VectorQuaternion": case "VectorQuaternion":
self.addVectorQuaternion(row, group); self.addVectorQuaternion(row, group);
parent.appendChild(row); parent.appendChild(row);
break; break;
default: default:
console.log("not defined"); console.log("not defined");
} }
return row; return row;
} }

175
scripts/system/particle_explorer/particleExplorer.js
View file

@ -15,24 +15,27 @@
/* global HifiEntityUI, openEventBridge, console, EventBridge, document, window */ /* global HifiEntityUI, openEventBridge, console, EventBridge, document, window */
/* eslint no-console: 0, no-global-assign: 0 */ /* eslint no-console: 0, no-global-assign: 0 */
(function(){ (function () {
var root = document.getElementById("particle-explorer"); var root = document.getElementById("particle-explorer");
window.onload = function(){ window.onload = function () {
var ui = new HifiEntityUI(root); var ui = new HifiEntityUI(root);
var textarea = document.createElement("textarea"); var textarea = document.createElement("textarea");
var properties = ""; var properties = "";
var menuStructure = { var menuStructure = {
General: [ General: [
{ type: "Row", id: "export-import-field" }, {
type: "Row",
id: "export-import-field"
},
{ {
id: "show-properties-button", id: "show-properties-button",
name: "Show Properties", name: "Show Properties",
type: "Button", type: "Button",
class: "blue", class: "blue",
disabled: true, disabled: true,
callback: function(event){ callback: function (event) {
var insertZone = document.getElementById("export-import-field"); var insertZone = document.getElementById("export-import-field");
var json = ui.getSettings(); var json = ui.getSettings();
properties = JSON.stringify(json); properties = JSON.stringify(json);
@ -41,22 +44,26 @@
insertZone.appendChild(textarea); insertZone.appendChild(textarea);
insertZone.parentNode.parentNode.style.maxHeight = insertZone.parentNode.parentNode.style.maxHeight =
insertZone.parentNode.clientHeight + "px"; insertZone.parentNode.clientHeight + "px";
document.getElementById("export-properties-button").removeAttribute("disabled"); document.getElementById("export-properties-button")
textarea.onchange = function(e) { .removeAttribute("disabled");
if (e.target.value !== properties){ textarea.onchange = function (e) {
document.getElementById("import-properties-button").removeAttribute("disabled"); if (e.target.value !== properties) {
document.getElementById("import-properties-button")
.removeAttribute("disabled");
} }
}; };
textarea.oninput = textarea.onchange; textarea.oninput = textarea.onchange;
} else { } else {
textarea.onchange = function(){}; textarea.onchange = function () {};
textarea.oninput = textarea.onchange; textarea.oninput = textarea.onchange;
textarea.value = ""; textarea.value = "";
textarea.remove(); textarea.remove();
insertZone.parentNode.parentNode.style.maxHeight = insertZone.parentNode.parentNode.style.maxHeight =
insertZone.parentNode.clientHeight + "px"; insertZone.parentNode.clientHeight + "px";
document.getElementById("export-properties-button").setAttribute("disabled",true); document.getElementById("export-properties-button")
document.getElementById("import-properties-button").setAttribute("disabled",true); .setAttribute("disabled", true);
document.getElementById("import-properties-button")
.setAttribute("disabled", true);
} }
} }
}, },
@ -66,7 +73,7 @@
type: "Button", type: "Button",
class: "blue", class: "blue",
disabled: true, disabled: true,
callback: function(event){ callback: function (event) {
ui.fillFields(JSON.parse(textarea.value)); ui.fillFields(JSON.parse(textarea.value));
ui.submitChanges(JSON.parse(textarea.value)); ui.submitChanges(JSON.parse(textarea.value));
} }
@ -77,11 +84,11 @@
type: "Button", type: "Button",
class: "red", class: "red",
disabled: true, disabled: true,
callback: function(event){ callback: function (event) {
textarea.select(); textarea.select();
try { try {
var success = document.execCommand('copy'); var success = document.execCommand('copy');
if (!success ){ if (!success) {
throw "Not success :("; throw "Not success :(";
} }
} catch (e) { } catch (e) {
@ -89,13 +96,17 @@
} }
} }
}, },
{ type: "Row"}, {
type: "Row"
},
{ {
id: "isEmitting", id: "isEmitting",
name: "Is Emitting", name: "Is Emitting",
type: "Boolean" type: "Boolean"
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "lifespan", id: "lifespan",
name: "Lifespan", name: "Lifespan",
@ -103,7 +114,9 @@
min: 0.01, min: 0.01,
max: 10 max: 10
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "maxParticles", id: "maxParticles",
name: "Max Particles", name: "Max Particles",
@ -111,13 +124,17 @@
min: 1, min: 1,
max: 10000 max: 10000
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "textures", id: "textures",
name: "Textures", name: "Textures",
type: "Texture" type: "Texture"
}, },
{ type: "Row" } {
type: "Row"
}
], ],
Emit: [ Emit: [
{ {
@ -127,14 +144,18 @@
max: 1000, max: 1000,
min: 1 min: 1
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "emitSpeed", id: "emitSpeed",
name: "Emit Speed", name: "Emit Speed",
type: "SliderFloat", type: "SliderFloat",
max: 5 max: 5
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "emitDimensions", id: "emitDimensions",
name: "Emit Dimension", name: "Emit Dimension",
@ -144,7 +165,9 @@
step: 0.01 step: 0.01
} }
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "emitOrientation", id: "emitOrientation",
unit: "deg", unit: "deg",
@ -155,13 +178,17 @@
step: 0.01 step: 0.01
} }
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "emitShouldTrail", id: "emitShouldTrail",
name: "Emit Should Trail", name: "Emit Should Trail",
type: "Boolean" type: "Boolean"
}, },
{ type: "Row" } {
type: "Row"
}
], ],
Radius: [ Radius: [
{ {
@ -170,28 +197,36 @@
type: "SliderFloat", type: "SliderFloat",
max: 4.0 max: 4.0
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "radiusSpread", id: "radiusSpread",
name: "Radius Spread", name: "Radius Spread",
type: "SliderFloat", type: "SliderFloat",
max: 4.0 max: 4.0
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "radiusStart", id: "radiusStart",
name: "Radius Start", name: "Radius Start",
type: "SliderFloat", type: "SliderFloat",
max: 4.0 max: 4.0
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "radiusFinish", id: "radiusFinish",
name: "Radius Finish", name: "Radius Finish",
type: "SliderFloat", type: "SliderFloat",
max: 4.0 max: 4.0
}, },
{ type: "Row" } {
type: "Row"
}
], ],
Color: [ Color: [
{ {
@ -204,7 +239,9 @@
blue: 255 blue: 255
} }
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "colorSpread", id: "colorSpread",
name: "Color Spread", name: "Color Spread",
@ -215,7 +252,9 @@
blue: 0 blue: 0
} }
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "colorStart", id: "colorStart",
name: "Color Start", name: "Color Start",
@ -226,7 +265,9 @@
blue: 255 blue: 255
} }
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "colorFinish", id: "colorFinish",
name: "Color Finish", name: "Color Finish",
@ -237,7 +278,9 @@
blue: 255 blue: 255
} }
}, },
{ type: "Row" } {
type: "Row"
}
], ],
Acceleration: [ Acceleration: [
{ {
@ -248,7 +291,9 @@
step: 0.01 step: 0.01
} }
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "accelerationSpread", id: "accelerationSpread",
name: "Acceleration Spread", name: "Acceleration Spread",
@ -257,7 +302,9 @@
step: 0.01 step: 0.01
} }
}, },
{ type: "Row" } {
type: "Row"
}
], ],
Alpha: [ Alpha: [
{ {
@ -265,25 +312,33 @@
name: "Alpha", name: "Alpha",
type: "SliderFloat" type: "SliderFloat"
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "alphaSpread", id: "alphaSpread",
name: "Alpha Spread", name: "Alpha Spread",
type: "SliderFloat" type: "SliderFloat"
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "alphaStart", id: "alphaStart",
name: "Alpha Start", name: "Alpha Start",
type: "SliderFloat" type: "SliderFloat"
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "alphaFinish", id: "alphaFinish",
name: "Alpha Finish", name: "Alpha Finish",
type: "SliderFloat" type: "SliderFloat"
}, },
{ type: "Row" } {
type: "Row"
}
], ],
Polar: [ Polar: [
{ {
@ -292,14 +347,18 @@
unit: "deg", unit: "deg",
type: "SliderRadian" type: "SliderRadian"
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "polarFinish", id: "polarFinish",
name: "Polar Finish", name: "Polar Finish",
unit: "deg", unit: "deg",
type: "SliderRadian" type: "SliderRadian"
}, },
{ type: "Row" } {
type: "Row"
}
], ],
Azimuth: [ Azimuth: [
{ {
@ -310,40 +369,46 @@
min: -180, min: -180,
max: 0 max: 0
}, },
{ type: "Row" }, {
type: "Row"
},
{ {
id: "azimuthFinish", id: "azimuthFinish",
name: "Azimuth Finish", name: "Azimuth Finish",
unit: "deg", unit: "deg",
type: "SliderRadian" type: "SliderRadian"
}, },
{ type: "Row" } {
type: "Row"
}
] ]
}; };
ui.setUI(menuStructure); ui.setUI(menuStructure);
ui.setOnSelect(function(){ ui.setOnSelect(function () {
document.getElementById("show-properties-button").removeAttribute("disabled"); document.getElementById("show-properties-button")
document.getElementById("export-properties-button").setAttribute("disabled",true); .removeAttribute("disabled");
document.getElementById("import-properties-button").setAttribute("disabled",true); document.getElementById("export-properties-button")
.setAttribute("disabled", true);
document.getElementById("import-properties-button")
.setAttribute("disabled", true);
}); });
ui.build(); ui.build();
var overrideLoad = false; var overrideLoad = false;
if (openEventBridge === undefined) { if (openEventBridge === undefined) {
overrideLoad = true, overrideLoad = true,
openEventBridge = function(callback) { openEventBridge = function (callback) {
callback( callback({
{ emitWebEvent: function () {},
emitWebEvent: function(){}, submitChanges: function () {},
submitChanges: function(){},
scriptEventReceived: { scriptEventReceived: {
connect: function() { connect: function () {
} }
} }
}); });
}; };
} }
openEventBridge( function(EventBridge) { openEventBridge(function (EventBridge) {
ui.connect(EventBridge); ui.connect(EventBridge);
}); });
if (overrideLoad) { if (overrideLoad) {