mirror of
https://github.com/overte-org/overte.git
synced 2025-04-27 03:16:21 +02:00
b2c7ddbd05
* Adds 3 additional keys/properties to hifi-entity-ui's specification support for
color pickers.
* layoutType: This correlates to colpick's layout property. This is expected
to be a string. Valid values are those supported by colpick, see colpick.js for
additional details.
* Within hifi-entity-ui, if this value isn't specified the default is
"hex" as was previously hard coded.
* layoutColorScheme: This correlates to colpicks's colorScheme property. This is
expected to be a string. Valid values are those supported by colpick, see colpick.js
for additional details.
* Within hifi-entity-ui, if this value isn't specified the default is
"dark" as was previously hard coded.
* useSubmitButton: This correlates to colpick's submit property. This is expected
to be a boolean. See colpick.js for additional details.
* Within hifi-entity-ui, if this value isn't specified the default is
true as was previously hard coded.
* Amends particleExplorer.js color picker descriptors to make use of the new
keys to bring the color pickers within the Particle Tab inline with the appearance
of the Properties Tab color pickers submitted within PR #12241 which don't utilize
the OK button.
Changes Committed:
modified: scripts/system/particle_explorer/hifi-entity-ui.js
modified: scripts/system/particle_explorer/particleExplorer.js
693 lines
26 KiB
JavaScript
693 lines
26 KiB
JavaScript
/* global window, document, print, alert, console,setTimeout, clearTimeout, _ $ */
|
|
/* eslint no-console: 0 */
|
|
|
|
/**
|
|
UI Builder V1.0
|
|
|
|
Created by Matti 'Menithal' Lahtinen
|
|
24/5/2017
|
|
Copyright 2017 High Fidelity, Inc.
|
|
|
|
This can eventually be expanded to all of Edit, for now, starting
|
|
with Particles Only.
|
|
|
|
This is created for the sole purpose of streamliming the bridge, and to simplify
|
|
the logic between an inputfield in WebView and Entities in High Fidelity.
|
|
|
|
We also do not need anything as heavy as jquery or any other platform,
|
|
as we are mostly only building for QT (while, all the other JS frameworks usually do alot of polyfilling)
|
|
|
|
Available Types:
|
|
|
|
JSONInputField - Accepts JSON input, once one presses Save, it will be propegated.
|
|
Button- A Button that listens for a custom event as defined by callback
|
|
Boolean - Creates a checkbox that the user can either check or uncheck
|
|
SliderFloat - Creates a slider (with input) that has Float values from min to max.
|
|
Default is min 0, max 1
|
|
SliderInteger - Creates a slider (with input) that has a Integer value from min to max.
|
|
Default is min 1, max 10000
|
|
SliderRadian - Creates a slider (with input) that has Float values in degrees,
|
|
that are converted to radians. default is min 0, max Math.PI.
|
|
Texture - Creates a Image with an url input field that points to texture.
|
|
If image cannot form, show "cannot find image"
|
|
VecQuaternion - Creates a 3D Vector field that converts to quaternions.
|
|
Checkbox exists to show quaternions instead.
|
|
Color - Create field color button, that when pressed, opens the color picker.
|
|
Vector - Create a 3D Vector field that has one to one correspondence.
|
|
|
|
The script will use this structure to build a UI that is connected The
|
|
id fields within High Fidelity
|
|
|
|
This should make editing, and everything related much more simpler to maintain,
|
|
and If there is any changes to either the Entities or properties of
|
|
|
|
**/
|
|
|
|
var RADIANS_PER_DEGREE = Math.PI / 180;
|
|
|
|
var roundFloat = function (input, round) {
|
|
round = round ? round : 1000;
|
|
var sanitizedInput;
|
|
if (typeof input === "string") {
|
|
sanitizedInput = parseFloat(input);
|
|
} else {
|
|
sanitizedInput = input;
|
|
}
|
|
return Math.round(sanitizedInput * round) / round;
|
|
};
|
|
|
|
function HifiEntityUI(parent) {
|
|
this.parent = parent;
|
|
|
|
var self = this;
|
|
this.webBridgeSync = _.debounce(function (id, val) {
|
|
if (self.EventBridge) {
|
|
var sendPackage = {};
|
|
sendPackage[id] = val;
|
|
self.submitChanges(sendPackage);
|
|
}
|
|
}, 125);
|
|
}
|
|
|
|
HifiEntityUI.prototype = {
|
|
setOnSelect: function (callback) {
|
|
this.onSelect = callback;
|
|
},
|
|
submitChanges: function (structure) {
|
|
var message = {
|
|
messageType: "settings_update",
|
|
updatedSettings: structure
|
|
};
|
|
this.EventBridge.emitWebEvent(JSON.stringify(message));
|
|
},
|
|
setUI: function (structure) {
|
|
this.structure = structure;
|
|
},
|
|
disableFields: function () {
|
|
var fields = document.getElementsByTagName("input");
|
|
for (var i = 0; i < fields.length; i++) {
|
|
if (fields[i].getAttribute("type") !== "button") {
|
|
fields[i].value = "";
|
|
}
|
|
|
|
fields[i].setAttribute("disabled", true);
|
|
}
|
|
var textures = document.getElementsByTagName("img");
|
|
for (i = 0; i < textures.length; i++) {
|
|
textures[i].src = "";
|
|
}
|
|
|
|
textures = document.getElementsByClassName("with-texture");
|
|
for (i = 0; i < textures.length; i++) {
|
|
textures[i].classList.remove("with-textures");
|
|
textures[i].classList.add("no-texture");
|
|
}
|
|
|
|
var textareas = document.getElementsByTagName("textarea");
|
|
for (var x = 0; x < textareas.length; x++) {
|
|
textareas[x].remove();
|
|
}
|
|
},
|
|
getSettings: function () {
|
|
var self = this;
|
|
var json = {};
|
|
var keys = Object.keys(self.builtRows);
|
|
|
|
for (var i = 0; i < keys.length; i++) {
|
|
var key = keys[i];
|
|
var el = self.builtRows[key];
|
|
if (el.className.indexOf("checkbox") !== -1) {
|
|
json[key] = document.getElementById(key)
|
|
.checked ? true : false;
|
|
} else if (el.className.indexOf("vector-section") !== -1) {
|
|
var vector = {};
|
|
if (el.className.indexOf("rgb") !== -1) {
|
|
var red = document.getElementById(key + "-red");
|
|
var blue = document.getElementById(key + "-blue");
|
|
var green = document.getElementById(key + "-green");
|
|
vector.red = red.value;
|
|
vector.blue = blue.value;
|
|
vector.green = green.value;
|
|
} else if (el.className.indexOf("pyr") !== -1) {
|
|
var p = document.getElementById(key + "-Pitch");
|
|
var y = document.getElementById(key + "-Yaw");
|
|
var r = document.getElementById(key + "-Roll");
|
|
vector.x = p.value;
|
|
vector.y = y.value;
|
|
vector.z = r.value;
|
|
} else {
|
|
var x = document.getElementById(key + "-x");
|
|
var ey = document.getElementById(key + "-y");
|
|
var z = document.getElementById(key + "-z");
|
|
vector.x = x.value;
|
|
vector.y = ey.value;
|
|
vector.z = z.value;
|
|
}
|
|
json[key] = vector;
|
|
} else if (el.className.length > 0) {
|
|
json[key] = document.getElementById(key)
|
|
.value;
|
|
}
|
|
}
|
|
|
|
return json;
|
|
},
|
|
fillFields: function (currentProperties) {
|
|
var self = this;
|
|
var fields = document.getElementsByTagName("input");
|
|
|
|
if (!currentProperties.locked) {
|
|
for (var i = 0; i < fields.length; i++) {
|
|
fields[i].removeAttribute("disabled");
|
|
}
|
|
}
|
|
if (self.onSelect) {
|
|
self.onSelect();
|
|
}
|
|
var keys = Object.keys(currentProperties);
|
|
|
|
|
|
for (var e in keys) {
|
|
if (keys.hasOwnProperty(e)) {
|
|
var value = keys[e];
|
|
|
|
var property = currentProperties[value];
|
|
var field = self.builtRows[value];
|
|
if (field) {
|
|
var el = document.getElementById(value);
|
|
|
|
if (field.className.indexOf("radian") !== -1) {
|
|
el.value = property / RADIANS_PER_DEGREE;
|
|
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 = parseInt(property.red);
|
|
blue.value = parseInt(property.blue);
|
|
green.value = parseInt(property.green);
|
|
|
|
red.oninput({
|
|
target: red
|
|
});
|
|
} else if (field.className.indexOf("xyz") !== -1) {
|
|
var x = document.getElementById(value + "-x");
|
|
var y = document.getElementById(value + "-y");
|
|
var z = document.getElementById(value + "-z");
|
|
|
|
x.value = roundFloat(property.x, 100);
|
|
y.value = roundFloat(property.y, 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) {
|
|
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;
|
|
self.fillFields(currentProperties);
|
|
// Do expected property match with structure;
|
|
} else if (data.messageType === 'particle_close') {
|
|
self.disableFields();
|
|
}
|
|
});
|
|
},
|
|
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);
|
|
});
|
|
},
|
|
addSection: function (parent, section, properties, index) {
|
|
var self = this;
|
|
|
|
var sectionDivHeader = document.createElement("fieldset");
|
|
var title = document.createElement("legend");
|
|
var dropDown = document.createElement("span");
|
|
|
|
dropDown.className = "arrow";
|
|
sectionDivHeader.className = "major";
|
|
title.className = "section-header";
|
|
title.id = section + "-section";
|
|
title.innerHTML = section;
|
|
title.appendChild(dropDown);
|
|
sectionDivHeader.appendChild(title);
|
|
|
|
var collapsed = index !== 0;
|
|
|
|
dropDown.innerHTML = collapsed ? "L" : "M";
|
|
sectionDivHeader.setAttribute("collapsed", collapsed);
|
|
parent.appendChild(sectionDivHeader);
|
|
|
|
var sectionDivBody = document.createElement("div");
|
|
sectionDivBody.className = "property-group";
|
|
|
|
var animationWrapper = document.createElement("div");
|
|
animationWrapper.className = "section-wrap";
|
|
|
|
for (var property in properties) {
|
|
if (properties.hasOwnProperty(property)) {
|
|
var builtRow = self.addElement(animationWrapper, properties[property]);
|
|
var id = properties[property].id;
|
|
if (id) {
|
|
self.builtRows[id] = builtRow;
|
|
}
|
|
}
|
|
}
|
|
sectionDivBody.appendChild(animationWrapper);
|
|
sectionDivHeader.appendChild(sectionDivBody);
|
|
_.defer(function () {
|
|
var height = (animationWrapper.clientHeight) + "px";
|
|
if (collapsed) {
|
|
sectionDivBody.classList.remove("visible");
|
|
sectionDivBody.style.maxHeight = "0px";
|
|
} else {
|
|
sectionDivBody.classList.add("visible");
|
|
sectionDivBody.style.maxHeight = height;
|
|
}
|
|
|
|
title.onclick = function () {
|
|
collapsed = !collapsed;
|
|
if (collapsed) {
|
|
sectionDivBody.classList.remove("visible");
|
|
sectionDivBody.style.maxHeight = "0px";
|
|
} else {
|
|
sectionDivBody.classList.add("visible");
|
|
sectionDivBody.style.maxHeight = (animationWrapper.clientHeight) + "px";
|
|
}
|
|
// sectionDivBody.style.display = collapsed ? "none": "block";
|
|
dropDown.innerHTML = collapsed ? "L" : "M";
|
|
title.setAttribute("collapsed", collapsed);
|
|
};
|
|
});
|
|
},
|
|
addLabel: function (parent, group) {
|
|
var label = document.createElement("label");
|
|
label.innerHTML = group.name;
|
|
parent.appendChild(label);
|
|
if (group.unit) {
|
|
var span = document.createElement("span");
|
|
span.innerHTML = group.unit;
|
|
span.className = "unit";
|
|
label.appendChild(span);
|
|
}
|
|
return label;
|
|
},
|
|
addVector: function (parent, group, labels, domArray) {
|
|
var self = this;
|
|
var inputs = labels ? labels : ["x", "y", "z"];
|
|
domArray = domArray ? domArray : [];
|
|
parent.id = group.id;
|
|
for (var index in inputs) {
|
|
var element = document.createElement("input");
|
|
|
|
element.setAttribute("type", "number");
|
|
element.className = inputs[index];
|
|
element.id = group.id + "-" + inputs[index];
|
|
|
|
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);
|
|
}
|
|
|
|
this.addLabel(parent, group);
|
|
var className = "";
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
className += inputs[i].charAt(0)
|
|
.toLowerCase();
|
|
}
|
|
parent.className += " property vector-section " + className;
|
|
|
|
// 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);
|
|
},
|
|
addVectorQuaternion: function (parent, group) {
|
|
this.addVector(parent, group, ["Pitch", "Yaw", "Roll"]);
|
|
},
|
|
addColorPicker: function (parent, group) {
|
|
var self = this;
|
|
var $colPickContainer = $('<div>', {
|
|
id: group.id,
|
|
class: "color-picker"
|
|
});
|
|
var updateColors = function (red, green, blue) {
|
|
$colPickContainer.css('background-color', "rgb(" +
|
|
red + "," +
|
|
green + "," +
|
|
blue + ")");
|
|
};
|
|
|
|
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
|
|
};
|
|
|
|
parent.appendChild($colPickContainer[0]);
|
|
self.addVector(parent, group, inputs, domArray);
|
|
|
|
updateColors(domArray[0].value, domArray[1].value, domArray[2].value);
|
|
|
|
// Could probably write a custom one for this to completely write out jquery,
|
|
// but for now, using the same as earlier.
|
|
|
|
/* Color Picker Logic Here */
|
|
|
|
|
|
$colPickContainer.colpick({
|
|
colorScheme: (group.layoutColorScheme === undefined ? 'dark' : group.layoutColorScheme),
|
|
layout: (group.layoutType === undefined ? 'hex' : group.layoutType),
|
|
submit: (group.useSubmitButton === undefined ? true : group.useSubmitButton),
|
|
color: {
|
|
r: domArray[0].value,
|
|
g: domArray[1].value,
|
|
b: domArray[2].value
|
|
},
|
|
onChange: function (hsb, hex, rgb, el) {
|
|
updateColors(rgb.r, rgb.g, rgb.b);
|
|
|
|
domArray[0].value = rgb.r;
|
|
domArray[1].value = rgb.g;
|
|
domArray[2].value = rgb.b;
|
|
self.webBridgeSync(group.id, {
|
|
red: rgb.r,
|
|
green: rgb.g,
|
|
blue: rgb.b
|
|
});
|
|
},
|
|
onSubmit: function (hsb, hex, rgb, el) {
|
|
$(el)
|
|
.css('background-color', '#' + hex);
|
|
$(el)
|
|
.colpickHide();
|
|
domArray[0].value = rgb.r;
|
|
domArray[1].value = rgb.g;
|
|
domArray[2].value = rgb.b;
|
|
self.webBridgeSync(group.id, {
|
|
red: rgb.r,
|
|
green: rgb.g,
|
|
blue: rgb.b
|
|
});
|
|
}
|
|
});
|
|
},
|
|
addTextureField: function (parent, group) {
|
|
var self = this;
|
|
this.addLabel(parent, group);
|
|
parent.className += " property texture";
|
|
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) {
|
|
if (url.slice(0, 5).toLowerCase() === "atp:/") {
|
|
image.src = "";
|
|
image.style.display = "none";
|
|
textureImage.classList.remove("with-texture");
|
|
textureImage.classList.remove("no-texture");
|
|
textureImage.classList.add("no-preview");
|
|
} else if (url.length > 0) {
|
|
textureImage.classList.remove("no-texture");
|
|
textureImage.classList.remove("no-preview");
|
|
textureImage.classList.add("with-texture");
|
|
image.src = url;
|
|
image.style.display = "block";
|
|
} else {
|
|
image.src = "";
|
|
image.style.display = "none";
|
|
textureImage.classList.remove("with-texture");
|
|
textureImage.classList.remove("no-preview");
|
|
textureImage.classList.add("no-texture");
|
|
}
|
|
self.webBridgeSync(group.id, url);
|
|
}, 250);
|
|
|
|
textureUrl.oninput = function (event) {
|
|
// Add throttle
|
|
var url = event.target.value;
|
|
imageLoad(url);
|
|
};
|
|
textureUrl.onchange = textureUrl.oninput;
|
|
textureImage.appendChild(image);
|
|
parent.appendChild(textureImage);
|
|
parent.appendChild(textureUrl);
|
|
},
|
|
addSlider: function (parent, group) {
|
|
var self = this;
|
|
this.addLabel(parent, group);
|
|
parent.className += " property range";
|
|
var container = document.createElement("div");
|
|
container.className = "slider-wrapper";
|
|
var slider = document.createElement("input");
|
|
slider.setAttribute("type", "range");
|
|
|
|
var inputField = document.createElement("input");
|
|
inputField.setAttribute("type", "number");
|
|
|
|
container.appendChild(slider);
|
|
container.appendChild(inputField);
|
|
parent.appendChild(container);
|
|
|
|
if (group.type === "SliderInteger") {
|
|
inputField.setAttribute("min", group.min !== undefined ? group.min : 0);
|
|
inputField.setAttribute("step", 1);
|
|
|
|
slider.setAttribute("min", group.min !== undefined ? group.min : 0);
|
|
slider.setAttribute("max", group.max !== undefined ? group.max : 10000);
|
|
slider.setAttribute("step", 1);
|
|
|
|
inputField.oninput = function (event) {
|
|
|
|
if (parseInt(event.target.value) > parseInt(slider.getAttribute("max")) && group.max !== 1) {
|
|
slider.setAttribute("max", event.target.value);
|
|
}
|
|
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);
|
|
};
|
|
|
|
inputField.id = group.id;
|
|
} else if (group.type === "SliderRadian") {
|
|
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));
|
|
|
|
inputField.oninput = function (event) {
|
|
slider.value = event.target.value;
|
|
self.webBridgeSync(group.id, slider.value * RADIANS_PER_DEGREE);
|
|
};
|
|
inputField.onchange = inputField.oninput;
|
|
|
|
inputField.id = group.id;
|
|
slider.oninput = function (event) {
|
|
if (event.target.value > 0) {
|
|
inputField.value = Math.floor(event.target.value);
|
|
} else {
|
|
inputField.value = Math.ceil(event.target.value);
|
|
}
|
|
self.webBridgeSync(group.id, slider.value * RADIANS_PER_DEGREE);
|
|
};
|
|
var degrees = document.createElement("label");
|
|
degrees.innerHTML = "°";
|
|
degrees.style.fontSize = "1.4rem";
|
|
degrees.style.display = "inline";
|
|
degrees.style.verticalAlign = "top";
|
|
degrees.style.paddingLeft = "0.4rem";
|
|
container.appendChild(degrees);
|
|
|
|
} else {
|
|
// Must then be Float
|
|
inputField.setAttribute("min", group.min !== undefined ? group.min : 0);
|
|
slider.setAttribute("step", 0.01);
|
|
|
|
slider.setAttribute("min", group.min !== undefined ? group.min : 0);
|
|
slider.setAttribute("max", group.max !== undefined ? group.max : 1);
|
|
slider.setAttribute("step", 0.01);
|
|
|
|
inputField.oninput = function (event) {
|
|
if (parseFloat(event.target.value) > parseFloat(slider.getAttribute("max")) && group.max !== 1) {
|
|
slider.setAttribute("max", event.target.value);
|
|
}
|
|
|
|
slider.value = event.target.value;
|
|
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);
|
|
};
|
|
|
|
inputField.id = group.id;
|
|
}
|
|
|
|
// UpdateBinding
|
|
},
|
|
addCheckBox: function (parent, group) {
|
|
var checkBox = document.createElement("input");
|
|
checkBox.setAttribute("type", "checkbox");
|
|
var self = this;
|
|
checkBox.onchange = function (event) {
|
|
self.webBridgeSync(group.id, event.target.checked);
|
|
};
|
|
checkBox.id = group.id;
|
|
parent.appendChild(checkBox);
|
|
var label = this.addLabel(parent, group);
|
|
label.setAttribute("for", checkBox.id);
|
|
parent.className += " property checkbox";
|
|
},
|
|
addElement: function (parent, group) {
|
|
var self = this;
|
|
var property = document.createElement("div");
|
|
property.id = group.id;
|
|
|
|
var row = document.createElement("div");
|
|
switch (group.type) {
|
|
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;
|
|
|
|
button.onclick = group.callback;
|
|
parent.appendChild(button);
|
|
break;
|
|
case "Row":
|
|
var hr = document.createElement("hr");
|
|
hr.className = "splitter";
|
|
if (group.id) {
|
|
hr.id = group.id;
|
|
}
|
|
parent.appendChild(hr);
|
|
break;
|
|
case "Boolean":
|
|
self.addCheckBox(row, group);
|
|
parent.appendChild(row);
|
|
break;
|
|
case "SliderFloat":
|
|
case "SliderInteger":
|
|
case "SliderRadian":
|
|
self.addSlider(row, group);
|
|
parent.appendChild(row);
|
|
break;
|
|
case "Texture":
|
|
self.addTextureField(row, group);
|
|
parent.appendChild(row);
|
|
break;
|
|
case "Color":
|
|
self.addColorPicker(row, group);
|
|
parent.appendChild(row);
|
|
break;
|
|
case "Vector":
|
|
self.addVector(row, group);
|
|
parent.appendChild(row);
|
|
break;
|
|
case "VectorQuaternion":
|
|
self.addVectorQuaternion(row, group);
|
|
parent.appendChild(row);
|
|
break;
|
|
default:
|
|
console.log("not defined");
|
|
}
|
|
return row;
|
|
}
|
|
};
|