mirror of
https://github.com/overte-org/overte.git
synced 2025-04-20 14:03:55 +02:00
Added Changes from Alan's Feedback
This commit is contained in:
Menithal
parent
5500f8240d
commit
9201af96bd
3 changed files with 170 additions and 123 deletions
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue