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

Finalized UI changes doing final tests

Browse source
This commit is contained in:
Menithal 2017-05-24 21:23:30 +03:00
parent 22cfd43cae
commit 3f9b306c7f
5 changed files with 510 additions and 382 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
scripts/system/edit.js
View file

@ -83,6 +83,7 @@ selectionManager.addEventListener(function () {
// Destroy the old particles web view first
particleExplorerTool.destroyWebView();
particleExplorerTool.createWebView();
print("Particle Selected");
var properties = Entities.getEntityProperties(selectedEntityID);
var particleData = {
messageType: "particle_settings",
@ -90,13 +91,8 @@ selectionManager.addEventListener(function () {
};
selectedParticleEntityID = selectedEntityID;
particleExplorerTool.setActiveParticleEntity(selectedParticleEntityID);
particleExplorerTool.webView.webEventReceived.connect(function (data) {
data = JSON.parse(data);
if (data.messageType === "page_loaded") {
particleData.emitOrientation = Quat.safeEulerAngles(particleData.emitOrientation);
particleExplorerTool.webView.emitScriptEvent(JSON.stringify(particleData));
}
});
// Switch to particle explorer
var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
@ -2083,6 +2079,7 @@ var selectedParticleEntityID = null;
function selectParticleEntity(entityID) {
var properties = Entities.getEntityProperties(entityID);
print("selected particle Entity");
var particleData = {
messageType: "particle_settings",
currentProperties: properties
@ -2114,6 +2111,7 @@ entityListTool.webView.webEventReceived.connect(function (data) {
return;
}
// Destroy the old particles web view first
print("select particles");
selectParticleEntity(ids[0]);
} else {
selectedParticleEntity = 0;
@ -2124,4 +2122,3 @@ entityListTool.webView.webEventReceived.connect(function (data) {
});
}()); // END LOCAL_SCOPE

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

@ -1,8 +1,13 @@
/* 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.
@ -39,50 +44,115 @@ and If there is any changes to either the Entities or properties of
**/
var RADIAN = Math.PI / 180;
function HifiEntityUI(parent, structure){
function HifiEntityUI(parent) {
this.parent = parent;
this.structure = structure;
var self = this;
this.webBridgeSync = _.debounce(function(id, val) {
if (self.EventBridge) {
var sendPackage = {};
sendPackage[id] = val;
var message = {
messageType: "settings_update",
updatedSettings: sendPackage
};
self.EventBridge.emitWebEvent(JSON.stringify(message));
self.submitChanges(sendPackage);
}
}, 125);
}
HifiEntityUI.prototype = {
connect: function (EventBridge){
this.EventBridge = EventBridge;
var self = this;
EventBridge.emitWebEvent(JSON.stringify({
messageType: 'page_loaded'
}));
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++) {
fields[i].setAttribute("disabled", true);
if (fields[i].getAttribute("type") !== "button") {
fields[i].value = "";
}
}
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");
for (var i = 0; i < fields.length; i++) {
fields[i].removeAttribute("disabled");
}
var keys = Object.keys(currentProperties);
for (var e in keys) {
var value = keys[e];
EventBridge.scriptEventReceived.connect(function(data){
data = JSON.parse(data);
if (data.messageType === 'particle_settings') {
// Update settings
var currentProperties = data.currentProperties;
// Do expected property match with structure;
Object.keys(currentProperties).forEach(function(value, index) {
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 / RADIAN;
el.onchange({target: el});
el.onchange({
target: el
});
} else if (field.className.indexOf("range") !== -1 || field.className.indexOf("texture") !== -1) {
el.value = property;
el.onchange({target: el});
el.onchange({
target: el
});
} else if (field.className.indexOf("checkbox") !== -1) {
if (property) {
el.setAttribute("checked", property);
@ -97,27 +167,50 @@ HifiEntityUI.prototype = {
red.value = property.red;
blue.value = property.blue;
green.value = property.green;
red.oninput({target: red});
// crashes here.
} else if (field.className.indexOf("xyz")) {
/*
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");
// crashes here.
x.value = property.x;
y.value = property.y;
z.value = property.z;
*/
} 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");
// crashes here.
pitch.value = property.x;
yaw.value = property.y;
roll.value = property.z;
}
}
}
}
},
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') {
// Legacy event on particle close. This webview actually gets removed now
self.disableFields();
}
});
},
@ -132,9 +225,11 @@ HifiEntityUI.prototype = {
},
addSection: function(parent, section, properties, index) {
var self = this;
var sectionDivHeader = document.createElement("div");
var title = document.createElement("label");
var dropDown = document.createElement("span");
dropDown.className = "arrow";
sectionDivHeader.className = "section-header";
title.innerHTML = section;
@ -148,6 +243,7 @@ HifiEntityUI.prototype = {
var sectionDivBody = document.createElement("div");
sectionDivBody.className = "property-group";
var animationWrapper = document.createElement("div");
animationWrapper.className = "section-wrap";
@ -205,7 +301,7 @@ HifiEntityUI.prototype = {
},
addVector: function(parent, group, labels) {
var self = this;
var inputs = labels | ["x","y","z"];
var inputs = labels ? labels : ["x", "y", "z"];
var domArray = [];
parent.id = group.id;
for (var index in inputs) {
@ -215,7 +311,11 @@ HifiEntityUI.prototype = {
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});
self.webBridgeSync(group.id, {
x: domArray[0].value,
y: domArray[1].value,
z: domArray[2].value
});
};
element.onchange = element.oninput;
domArray.push(element);
@ -224,7 +324,7 @@ HifiEntityUI.prototype = {
this.addLabel(parent, group);
var className = "";
for (var i = 0; i < inputs.length; i++) {
className += inputs[i];
className += inputs[i].charAt(0).toLowerCase();
}
parent.className += " property vector-section " + className;
@ -277,7 +377,12 @@ HifiEntityUI.prototype = {
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},
$colPickContainer.colpickSetColor(
{
r: domArray[0].value,
g: domArray[1].value,
b: domArray[2].value
},
true);
};
element.onchange = element.oninput;
@ -296,14 +401,22 @@ HifiEntityUI.prototype = {
$colPickContainer.colpick({
colorScheme: 'dark',
layout: 'hex',
color: { r: domArray[0].value, g: domArray[1].value, b: domArray[2].value},
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} );
self.webBridgeSync(group.id, {
red: rgb.r,
green: rgb.g,
blue: rgb.b
});
},
onSubmit: function(hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex);
@ -311,7 +424,11 @@ HifiEntityUI.prototype = {
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} );
self.webBridgeSync(group.id, {
red: rgb.r,
green: rgb.g,
blue: rgb.b
});
}
});
var li = document.createElement("li");
@ -476,7 +593,6 @@ HifiEntityUI.prototype = {
parent.className += " property checkbox";
},
addElement: function(parent, group) {
var self = this;
var property = document.createElement("div");
property.id = group.id;
@ -484,15 +600,20 @@ HifiEntityUI.prototype = {
var row = document.createElement("div");
switch (group.type) {
case "Button":
var exportSettingsButton = document.createElement("input");
exportSettingsButton.setAttribute("type", "button");
exportSettingsButton.className = group.class;
exportSettingsButton.value = group.name;
parent.appendChild(exportSettingsButton);
var button = document.createElement("input");
button.setAttribute("type", "button");
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":

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

@ -12,24 +12,57 @@
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
/* global HifiEntityUI, openEventBridge, EventBridge, document, window */
/* global HifiEntityUI, openEventBridge, console, EventBridge, document, window */
/* eslint no-console: 0 */
(function(){
var root = document.getElementById("particle-explorer");
window.onload = function(){
var ui = new HifiEntityUI(root);
var textarea = document.createElement("textarea");
var menuStructure = {
General: [
{ type: "Row", id: "export-import-field" },
{
id: "importSettings",
name: "Import Settings",
type: "Button",
class: "blue",
callback: function(){}
callback: function(event){
var insertZone = document.getElementById("export-import-field");
var json = ui.getSettings();
textarea.value = JSON.stringify(json);
if (!insertZone.contains(textarea)) {
insertZone.appendChild(textarea);
insertZone.parentNode.parentNode.style.maxHeight =
insertZone.parentNode.clientHeight + "px";
}
textarea.onchange = function () {
ui.fillFields(JSON.parse(textarea.value));
ui.submitChanges(JSON.parse(textarea.value));
};
}
},
{
id: "exportSettings",
name: "Export Settings",
type: "Button",
class: "red",
callback: function(){}
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);
}
}
},
{ type: "Row"},
{
@ -242,12 +275,7 @@
{ type: "Row" }
]
};
// Web Bridge Binding here!
var root = document.getElementById("particle-explorer");
window.onload = function(){
var ui = new HifiEntityUI(root, menuStructure);
ui.setUI(menuStructure);
openEventBridge( function(EventBridge) {
ui.build();
ui.connect(EventBridge);

26
scripts/system/particle_explorer/particleExplorerTool.js
View file

@ -9,23 +9,13 @@
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
/*global window, alert, EventBridge, dat, listenForSettingsUpdates,createVec3Folder,createQuatFolder,writeVec3ToInterface,writeDataToInterface*/
/* global window, alert, ParticleExplorerTool, EventBridge, dat, listenForSettingsUpdates,createVec3Folder,createQuatFolder,writeVec3ToInterface,writeDataToInterface*/
var PARTICLE_EXPLORER_HTML_URL = Script.resolvePath(' .html');
var PARTICLE_EXPLORER_HTML_URL = Script.resolvePath('particleExplorer.html');
ParticleExplorerTool = function() {
var that = {};
var bound = false;
that.bindWebView = function() {
if (!bound) {
that.webView = Tablet.getTablet("com.highfidelity.interface.tablet.system");
that.webView.setVisible = function(value) {};
that.webView.webEventReceived.connect(that.webEventReceived);
bound = true;
}
}
/*
that.createWebView = function() {
that.webView = Tablet.getTablet("com.highfidelity.interface.tablet.system");
that.webView.setVisible = function(value) {};
@ -44,17 +34,17 @@ ParticleExplorerTool = function() {
that.webView.emitScriptEvent(JSON.stringify(messageData));
}
*/
that.webEventReceived = function(data) {
var message = JSON.parse(data);
if (message.messageType === "settings_update") {
Entities.editEntity(that.activeParticleEntity, message.updatedSettings);
var data = JSON.parse(data);
if (data.messageType === "settings_update") {
data.updatedSettings.emitOrientation = Quat.fromVec3Degrees(data.updatedSettings.emitOrientation);
Entities.editEntity(that.activeParticleEntity, data.updatedSettings);
}
}
};
that.setActiveParticleEntity = function(id) {
that.activeParticleEntity = id;
};
}
return that;
};

8
scripts/system/particle_explorer/tester.js
View file

@ -1,8 +0,0 @@
var commsPanel = new OverlayWebWindow({
title: "Explorer",
source: Script.resolvePath("particleExplorer.html"),
width: 460,
height: 900,
visible: true
});