Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-11 04:34:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions2

Merge pull request from andrewd440/21174

Browse source 
21174 Make the Particle Emitter Easier to Use
This commit is contained in:
Zach Fox 2017-04-26 15:35:29 -07:00 committed by GitHub
commit 9ace7a7488
7 changed files with 504 additions and 340 deletions
interface/resources/qml/hifi/tablet
Edit.qmlEditTabView.qml
scripts/system
controllers
handControllerGrab.js
edit.js
libraries
entityIconOverlayManager.js
particle_explorer
particleExplorer.htmlparticleExplorer.js

280
interface/resources/qml/hifi/tablet/Edit.qml
View file

@ -1,19 +1,11 @@
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtWebEngine 1.1
import QtWebChannel 1.0
import QtQuick.Controls.Styles 1.4
import "../../controls"
import "../toolbars"
import HFWebEngineProfile 1.0
import QtGraphicalEffects 1.0
import "../../controls-uit" as HifiControls
import "../../styles-uit"
StackView {
id: editRoot
objectName: "stack"
initialItem: editBasePage
initialItem: Qt.resolvedUrl('EditTabView.qml')
property var eventBridge;
signal sendToScript(var message);
@ -30,270 +22,10 @@ StackView {
editRoot.pop();
}
Component {
id: editBasePage
TabView {
id: editTabView
// anchors.fill: parent
height: 60
Tab {
title: "CREATE"
active: true
enabled: true
property string originalUrl: ""
Rectangle {
color: "#404040"
Text {
color: "#ffffff"
text: "Choose an Entity Type to Create:"
font.pixelSize: 14
font.bold: true
anchors.top: parent.top
anchors.topMargin: 28
anchors.left: parent.left
anchors.leftMargin: 28
}
Flow {
id: createEntitiesFlow
spacing: 35
anchors.right: parent.right
anchors.rightMargin: 55
anchors.left: parent.left
anchors.leftMargin: 55
anchors.top: parent.top
anchors.topMargin: 70
NewEntityButton {
icon: "icons/create-icons/94-model-01.svg"
text: "MODEL"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newModelButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/21-cube-01.svg"
text: "CUBE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/22-sphere-01.svg"
text: "SPHERE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/24-light-01.svg"
text: "LIGHT"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newLightButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/20-text-01.svg"
text: "TEXT"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newTextButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/25-web-1-01.svg"
text: "WEB"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newWebButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/23-zone-01.svg"
text: "ZONE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/90-particles-01.svg"
text: "PARTICLE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" }
});
editTabView.currentIndex = 2
}
}
}
HifiControls.Button {
id: assetServerButton
text: "Open This Domain's Asset Server"
color: hifi.buttons.black
colorScheme: hifi.colorSchemes.dark
anchors.right: parent.right
anchors.rightMargin: 55
anchors.left: parent.left
anchors.leftMargin: 55
anchors.top: createEntitiesFlow.bottom
anchors.topMargin: 35
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
});
}
}
HifiControls.Button {
text: "Import Entities (.json)"
color: hifi.buttons.black
colorScheme: hifi.colorSchemes.dark
anchors.right: parent.right
anchors.rightMargin: 55
anchors.left: parent.left
anchors.leftMargin: 55
anchors.top: assetServerButton.bottom
anchors.topMargin: 20
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "importEntitiesButton" }
});
}
}
}
}
Tab {
title: "LIST"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: entityListToolWebView
url: "../../../../../scripts/system/html/entityList.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
Tab {
title: "PROPERTIES"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: entityPropertiesWebView
url: "../../../../../scripts/system/html/entityProperties.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
Tab {
title: "GRID"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: gridControlsWebView
url: "../../../../../scripts/system/html/gridControls.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
Tab {
title: "P"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: particleExplorerWebView
url: "../../../../../scripts/system/particle_explorer/particleExplorer.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
style: TabViewStyle {
frameOverlap: 1
tab: Rectangle {
color: styleData.selected ? "#404040" :"black"
implicitWidth: text.width + 42
implicitHeight: 40
Text {
id: text
anchors.centerIn: parent
text: styleData.title
font.pixelSize: 16
font.bold: true
color: styleData.selected ? "white" : "white"
property string glyphtext: ""
HiFiGlyphs {
anchors.centerIn: parent
size: 30
color: "#ffffff"
text: text.glyphtext
}
Component.onCompleted: if (styleData.title == "P") {
text.text = " ";
text.glyphtext = "\ue004";
}
}
}
tabBar: Rectangle {
color: "black"
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
}
}
// Passes script messages to the item on the top of the stack
function fromScript(message) {
var currentItem = editRoot.currentItem;
if (currentItem && currentItem.fromScript)
currentItem.fromScript(message);
}
}

318
interface/resources/qml/hifi/tablet/EditTabView.qml Normal file
View file

@ -0,0 +1,318 @@
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtWebEngine 1.1
import QtWebChannel 1.0
import QtQuick.Controls.Styles 1.4
import "../../controls"
import "../toolbars"
import HFWebEngineProfile 1.0
import QtGraphicalEffects 1.0
import "../../controls-uit" as HifiControls
import "../../styles-uit"
TabView {
id: editTabView
// anchors.fill: parent
height: 60
Tab {
title: "CREATE"
active: true
enabled: true
property string originalUrl: ""
Rectangle {
color: "#404040"
Text {
color: "#ffffff"
text: "Choose an Entity Type to Create:"
font.pixelSize: 14
font.bold: true
anchors.top: parent.top
anchors.topMargin: 28
anchors.left: parent.left
anchors.leftMargin: 28
}
Flow {
id: createEntitiesFlow
spacing: 35
anchors.right: parent.right
anchors.rightMargin: 55
anchors.left: parent.left
anchors.leftMargin: 55
anchors.top: parent.top
anchors.topMargin: 70
NewEntityButton {
icon: "icons/create-icons/94-model-01.svg"
text: "MODEL"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newModelButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/21-cube-01.svg"
text: "CUBE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/22-sphere-01.svg"
text: "SPHERE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/24-light-01.svg"
text: "LIGHT"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newLightButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/20-text-01.svg"
text: "TEXT"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newTextButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/25-web-1-01.svg"
text: "WEB"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newWebButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/23-zone-01.svg"
text: "ZONE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" }
});
editTabView.currentIndex = 2
}
}
NewEntityButton {
icon: "icons/create-icons/90-particles-01.svg"
text: "PARTICLE"
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" }
});
editTabView.currentIndex = 4
}
}
}
HifiControls.Button {
id: assetServerButton
text: "Open This Domain's Asset Server"
color: hifi.buttons.black
colorScheme: hifi.colorSchemes.dark
anchors.right: parent.right
anchors.rightMargin: 55
anchors.left: parent.left
anchors.leftMargin: 55
anchors.top: createEntitiesFlow.bottom
anchors.topMargin: 35
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
});
}
}
HifiControls.Button {
text: "Import Entities (.json)"
color: hifi.buttons.black
colorScheme: hifi.colorSchemes.dark
anchors.right: parent.right
anchors.rightMargin: 55
anchors.left: parent.left
anchors.leftMargin: 55
anchors.top: assetServerButton.bottom
anchors.topMargin: 20
onClicked: {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "importEntitiesButton" }
});
}
}
}
}
Tab {
title: "LIST"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: entityListToolWebView
url: "../../../../../scripts/system/html/entityList.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
Tab {
title: "PROPERTIES"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: entityPropertiesWebView
url: "../../../../../scripts/system/html/entityProperties.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
Tab {
title: "GRID"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: gridControlsWebView
url: "../../../../../scripts/system/html/gridControls.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
Tab {
title: "P"
active: true
enabled: true
property string originalUrl: ""
WebView {
id: particleExplorerWebView
url: "../../../../../scripts/system/particle_explorer/particleExplorer.html"
eventBridge: editRoot.eventBridge
anchors.fill: parent
enabled: true
}
}
style: TabViewStyle {
frameOverlap: 1
tab: Rectangle {
color: styleData.selected ? "#404040" :"black"
implicitWidth: text.width + 42
implicitHeight: 40
Text {
id: text
anchors.centerIn: parent
text: styleData.title
font.pixelSize: 16
font.bold: true
color: styleData.selected ? "white" : "white"
property string glyphtext: ""
HiFiGlyphs {
anchors.centerIn: parent
size: 30
color: "#ffffff"
text: text.glyphtext
}
Component.onCompleted: if (styleData.title == "P") {
text.text = " ";
text.glyphtext = "\ue004";
}
}
}
tabBar: Rectangle {
color: "black"
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
}
function fromScript(message) {
switch (message.method) {
case 'selectTab':
selectTab(message.params.id);
break;
default:
console.warn('Unrecognized message:', JSON.stringify(message));
}
}
// Changes the current tab based on tab index or title as input
function selectTab(id) {
if (typeof id === 'number') {
if (id >= 0 && id <= 4) {
editTabView.currentIndex = id;
} else {
console.warn('Attempt to switch to invalid tab:', id);
}
} else if (typeof id === 'string'){
switch (id.toLowerCase()) {
case 'create':
editTabView.currentIndex = 0;
break;
case 'list':
editTabView.currentIndex = 1;
break;
case 'properties':
editTabView.currentIndex = 2;
break;
case 'grid':
editTabView.currentIndex = 3;
break;
case 'particle':
editTabView.currentIndex = 4;
break;
default:
console.warn('Attempt to switch to invalid tab:', id);
}
} else {
console.warn('Attempt to switch tabs with invalid input:', JSON.stringify(id));
}
}
}

47
scripts/system/controllers/handControllerGrab.js
View file

@ -1330,7 +1330,7 @@ function MyController(hand) {
if (this.stylus) {
return;
}
var stylusProperties = {
name: "stylus",
url: Script.resourcesPath() + "meshes/tablet-stylus-fat.fbx",
@ -1420,6 +1420,14 @@ function MyController(hand) {
}
};
// Turns off indicators used for searching. Overlay line and sphere.
this.searchIndicatorOff = function() {
this.searchSphereOff();
if (PICK_WITH_HAND_RAY) {
this.overlayLineOff();
}
}
this.otherGrabbingLineOn = function(avatarPosition, entityPosition, color) {
if (this.otherGrabbingLine === null) {
var lineProperties = {
@ -1791,6 +1799,15 @@ function MyController(hand) {
}
this.processStylus();
if (isInEditMode() && !this.isNearStylusTarget) {
// Always showing lasers while in edit mode and hands/stylus is not active.
var rayPickInfo = this.calcRayPickInfo(this.hand);
this.intersectionDistance = (rayPickInfo.entityID || rayPickInfo.overlayID) ? rayPickInfo.distance : 0;
this.searchIndicatorOn(rayPickInfo.searchRay);
} else {
this.searchIndicatorOff();
}
};
this.handleLaserOnHomeButton = function(rayPickInfo) {
@ -2237,15 +2254,22 @@ function MyController(hand) {
return;
}
}
if (isInEditMode()) {
this.searchIndicatorOn(rayPickInfo.searchRay);
if (this.triggerSmoothedGrab()) {
if (!this.editTriggered && rayPickInfo.entityID) {
Messages.sendLocalMessage("entityToolUpdates", JSON.stringify({
method: "selectEntity",
entityID: rayPickInfo.entityID
}));
if (!this.editTriggered){
if (rayPickInfo.entityID) {
Messages.sendLocalMessage("entityToolUpdates", JSON.stringify({
method: "selectEntity",
entityID: rayPickInfo.entityID
}));
} else if (rayPickInfo.overlayID) {
Messages.sendLocalMessage("entityToolUpdates", JSON.stringify({
method: "selectOverlay",
overlayID: rayPickInfo.overlayID
}));
}
}
this.editTriggered = true;
}
@ -2274,7 +2298,7 @@ function MyController(hand) {
if (this.getOtherHandController().state === STATE_DISTANCE_HOLDING) {
this.setState(STATE_DISTANCE_ROTATING, "distance rotate '" + name + "'");
} else {
this.setState(STATE_DISTANCE_HOLDING, "distance hold '" + name + "'");
this.setState(STATE_DISTANCE_HOLDING, "distance hold '" + name + "'");
}
return;
} else {
@ -3341,7 +3365,14 @@ function MyController(hand) {
};
this.offEnter = function() {
// Reuse the existing search distance if lasers were active since
// they will be shown in OFF state while in edit mode.
var existingSearchDistance = this.searchSphereDistance;
this.release();
if (isInEditMode()) {
this.searchSphereDistance = existingSearchDistance;
}
};
this.entityLaserTouchingEnter = function() {

41
scripts/system/edit.js
View file

@ -12,7 +12,8 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
/* global Script, SelectionDisplay, LightOverlayManager, CameraManager, Grid, GridTool, EntityListTool, Vec3, SelectionManager, Overlays, OverlayWebWindow, UserActivityLogger, Settings, Entities, Tablet, Toolbars, Messages, Menu, Camera, progressDialog, tooltip, MyAvatar, Quat, Controller, Clipboard, HMD, UndoStack, ParticleExplorerTool */
/* global Script, SelectionDisplay, LightOverlayManager, CameraManager, Grid, GridTool, EntityListTool, Vec3, SelectionManager, Overlays, OverlayWebWindow, UserActivityLogger,
Settings, Entities, Tablet, Toolbars, Messages, Menu, Camera, progressDialog, tooltip, MyAvatar, Quat, Controller, Clipboard, HMD, UndoStack, ParticleExplorerTool */
(function() { // BEGIN LOCAL_SCOPE
@ -96,6 +97,10 @@ selectionManager.addEventListener(function () {
particleExplorerTool.webView.emitScriptEvent(JSON.stringify(particleData));
}
});
// Switch to particle explorer
var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
tablet.sendToQml({method: 'selectTab', params: {id: 'particle'}});
} else {
needToDestroyParticleExplorer = true;
}
@ -644,6 +649,27 @@ function findClickedEntity(event) {
};
}
// Handles selections on overlays while in edit mode by querying entities from
// entityIconOverlayManager.
function handleOverlaySelectionToolUpdates(channel, message, sender) {
if (sender !== MyAvatar.sessionUUID || channel !== 'entityToolUpdates')
return;
var data = JSON.parse(message);
if (data.method === "selectOverlay") {
print("setting selection to overlay " + data.overlayID);
var entity = entityIconOverlayManager.findEntity(data.overlayID);
if (entity !== null) {
selectionManager.setSelections([entity]);
}
}
}
Messages.subscribe("entityToolUpdates");
Messages.messageReceived.connect(handleOverlaySelectionToolUpdates);
var mouseHasMovedSincePress = false;
var mousePressStartTime = 0;
var mousePressStartPosition = {
@ -1063,6 +1089,13 @@ Script.scriptEnding.connect(function () {
Controller.keyReleaseEvent.disconnect(keyReleaseEvent);
Controller.keyPressEvent.disconnect(keyPressEvent);
Controller.mousePressEvent.disconnect(mousePressEvent);
Controller.mouseMoveEvent.disconnect(mouseMoveEventBuffered);
Controller.mouseReleaseEvent.disconnect(mouseReleaseEvent);
Messages.messageReceived.disconnect(handleOverlaySelectionToolUpdates);
Messages.unsubscribe("entityToolUpdates");
});
var lastOrientation = null;
@ -2029,7 +2062,11 @@ function selectParticleEntity(entityID) {
selectedParticleEntity = entityID;
particleExplorerTool.setActiveParticleEntity(entityID);
particleExplorerTool.webView.emitScriptEvent(JSON.stringify(particleData));
particleExplorerTool.webView.emitScriptEvent(JSON.stringify(particleData));
// Switch to particle explorer
var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
tablet.sendToQml({method: 'selectTab', params: {id: 'particle'}});
}
entityListTool.webView.webEventReceived.connect(function (data) {

23
scripts/system/libraries/entityIconOverlayManager.js
View file

@ -32,20 +32,25 @@ EntityIconOverlayManager = function(entityTypes, getOverlayPropertiesFunc) {
}
};
// Finds the id for the corresponding entity that is associated with an overlay id.
// Returns null if the overlay id is not contained in this manager.
this.findEntity = function(overlayId) {
for (var id in entityOverlays) {
if (overlayId === entityOverlays[id]) {
return entityIDs[id];
}
}
return null;
};
this.findRayIntersection = function(pickRay) {
var result = Overlays.findRayIntersection(pickRay);
var found = false;
if (result.intersects) {
for (var id in entityOverlays) {
if (result.overlayID === entityOverlays[id]) {
result.entityID = entityIDs[id];
found = true;
break;
}
}
result.entityID = this.findEntity(result.overlayID);
if (!found) {
if (result.entityID === null) {
result.intersects = false;
}
}

16
scripts/system/particle_explorer/particleExplorer.html
View file

@ -14,10 +14,13 @@
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="../html/css/colpick.css">
<script type="text/javascript" src="dat.gui.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="../html/js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="../html/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../html/js/colpick.js"></script>
<script type="text/javascript" src="particleExplorer.js"></script>
<script>
function loaded() {
@ -52,6 +55,19 @@ body{
white-space: pre-wrap; /* css-3 */
}
.color-box {
display: block;
width: 60%;
height: 21px;
margin-top: 4px;
float: left;
}
.color-box.highlight {
width: 13.5pt;
height: 13.5pt;
border: 1.5pt solid black;
}
::-webkit-input-placeholder {
text-align: center;

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

@ -9,24 +9,25 @@
// 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, EventBridge, dat, listenForSettingsUpdates, createVec3Folder, createQuatFolder, writeVec3ToInterface, writeDataToInterface,
$, document, _, openEventBridge */
var Settings = function() {
this.exportSettings = function() {
//copyExportSettingsToClipboard();
var Settings = function () {
this.exportSettings = function () {
// copyExportSettingsToClipboard();
showPreselectedPrompt();
};
this.importSettings = function() {
this.importSettings = function () {
importSettings();
};
};
//2-way bindings-aren't quite ready yet. see bottom of file.
// 2-way bindings-aren't quite ready yet. see bottom of file.
var AUTO_UPDATE = false;
var UPDATE_ALL_FREQUENCY = 100;
var controllers = [];
var colorControllers = [];
var colpickKeys = [];
var folders = [];
var gui = null;
var settings = new Settings();
@ -36,7 +37,7 @@ var active = false;
var currentInputField;
var storedController;
//CHANGE TO WHITELIST
// CHANGE TO WHITELIST
var keysToAllow = [
'isEmitting',
'maxParticles',
@ -73,9 +74,8 @@ var vec3Keys = [];
var quatKeys = [];
var colorKeys = [];
window.onload = function() {
openEventBridge(function() {
window.onload = function () {
openEventBridge(function () {
var stringifiedData = JSON.stringify({
messageType: 'page_loaded'
});
@ -86,17 +86,17 @@ window.onload = function() {
listenForSettingsUpdates();
window.onresize = setGUIWidthToWindowWidth;
})
});
};
function loadGUI() {
//whether or not to autoplace
// whether or not to autoplace
gui = new dat.GUI({
autoPlace: false
});
//if not autoplacing, put gui in a custom container
// if not autoplacing, put gui in a custom container
if (gui.autoPlace === false) {
var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);
@ -105,6 +105,7 @@ function loadGUI() {
// presets for the GUI itself. a little confusing and import/export is mostly what we want to do at the moment.
// gui.remember(settings);
colpickKeys = [];
var keys = _.keys(settings);
_.each(keys, function(key) {
@ -133,22 +134,22 @@ function loadGUI() {
}
});
//alphabetize our keys
// alphabetize our keys
individualKeys.sort();
vec3Keys.sort();
quatKeys.sort();
colorKeys.sort();
//add to gui in the order they should appear
// add to gui in the order they should appear
gui.add(settings, 'importSettings');
gui.add(settings, 'exportSettings');
addIndividualKeys();
addFolders();
//set the gui width to match the web window width
// set the gui width to match the web window width
gui.width = window.innerWidth;
//2-way binding stuff
// 2-way binding stuff
// if (AUTO_UPDATE) {
// setInterval(manuallyUpdateDisplay, UPDATE_ALL_FREQUENCY);
// registerDOMElementsForListenerBlocking();
@ -158,7 +159,7 @@ function loadGUI() {
function addIndividualKeys() {
_.each(individualKeys, function(key) {
//temporary patch for not crashing when this goes below 0
// temporary patch for not crashing when this goes below 0
var controller;
if (key.indexOf('emitRate') > -1) {
@ -167,13 +168,13 @@ function addIndividualKeys() {
controller = gui.add(settings, key);
}
//2-way - need to fix not being able to input exact values if constantly listening
//controller.listen();
// 2-way - need to fix not being able to input exact values if constantly listening
// controller.listen();
//keep track of our controller
// keep track of our controller
controllers.push(controller);
//hook into change events for this gui controller
// hook into change events for this gui controller
controller.onChange(function(value) {
// Fires on every change, drag, keypress, etc.
writeDataToInterface(this.property, value);
@ -196,26 +197,42 @@ function addFolders() {
function createColorPicker(key) {
var colorObject = settings[key];
var colorArray = convertColorObjectToArray(colorObject);
settings[key] = colorArray;
var controller = gui.addColor(settings, key);
controller.onChange(function(value) {
// Handle hex colors
if(_.isString(value) && value[0] === '#') {
const BASE_HEX = 16;
var colorRegExResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
value = [
parseInt(colorRegExResult[1], BASE_HEX),
parseInt(colorRegExResult[2], BASE_HEX),
parseInt(colorRegExResult[3], BASE_HEX)
];
// Embed colpick's color picker into dat.GUI
var name = document.createElement('span');
name.className = 'property-name';
name.innerHTML = key;
var container = document.createElement('div');
container.appendChild(name);
var $colPickContainer = $('<div>', {
id: key.toString(),
class: "color-box"
});
$colPickContainer.css('background-color', "rgb(" + colorObject.red + "," + colorObject.green + "," + colorObject.blue + ")");
container.appendChild($colPickContainer[0]);
var $li = $('<li>', { class: 'cr object color' });
$li.append(container);
gui.__ul.appendChild($li[0]);
gui.onResize();
$colPickContainer.colpick({
colorScheme: 'dark',
layout: 'hex',
color: { r: colorObject.red, g: colorObject.green, b: colorObject.blue },
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex);
$(el).colpickHide();
var obj = {};
obj[key] = { red: rgb.r, green: rgb.g, blue: rgb.b };
writeVec3ToInterface(obj);
}
var obj = {};
obj[key] = convertColorArrayToObject(value);
writeVec3ToInterface(obj);
});
return;
colpickKeys.push(key);
}
function createVec3Folder(category) {
@ -389,6 +406,14 @@ function manuallyUpdateDisplay() {
for (i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
// Update color pickers
for (i in colpickKeys) {
var color = settings[colpickKeys[i]];
var $object = $('#' + colpickKeys[i]);
$object.css('background-color', "rgb(" + color.red + "," + color.green + "," + color.blue + ")");
$object.colpickSetColor({ r: color.red, g: color.green, b: color.blue }, true);
}
}
function setGUIWidthToWindowWidth() {
@ -457,9 +482,9 @@ function showPreselectedPrompt() {
var elem = document.getElementById("exported-props");
var exportSettings = prepareSettingsForExport();
elem.innerHTML = "";
var buttonnode= document.createElement('input');
buttonnode.setAttribute('type','button');
buttonnode.setAttribute('value','close');
var buttonnode = document.createElement('input');
buttonnode.setAttribute('type', 'button');
buttonnode.setAttribute('value', 'close');
elem.appendChild(document.createTextNode("COPY THE BELOW FIELD TO CLIPBOARD:"));
elem.appendChild(document.createElement("br"));
var textAreaNode = document.createElement("textarea");
@ -469,11 +494,11 @@ function showPreselectedPrompt() {
elem.appendChild(buttonnode);
buttonnode.onclick = function() {
console.log("click")
console.log("click");
elem.innerHTML = "";
}
};
//window.alert("Ctrl-C to copy, then Enter.", prepareSettingsForExport());
// window.alert("Ctrl-C to copy, then Enter.", prepareSettingsForExport());
}
function removeContainerDomElement() {
@ -490,7 +515,7 @@ function removeListenerFromGUI(key) {
});
}
//the section below is to try to work at achieving two way bindings;
// the section below is to try to work at achieving two way bindings;
function addListenersBackToGUI() {
gui.__listening.push(storedController);