Merge pull request #10279 from andrewd440/21174

21174 Make the Particle Emitter Easier to Use

interface/resources/qml/hifi/tablet/Edit.qml

@@ -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();
     }
 
-
+    // Passes script messages to the item on the top of the stack
-    Component {
+    function fromScript(message) {
-        id: editBasePage
+        var currentItem = editRoot.currentItem;
-        TabView {
+        if (currentItem && currentItem.fromScript)
-            id: editTabView
+            currentItem.fromScript(message);
-            // 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
-                }
-            }
-        }
     }
 }

interface/resources/qml/hifi/tablet/EditTabView.qml

@@ -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));
+        }
+    }
+}

scripts/system/controllers/handControllerGrab.js

@@ -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) {
@@ -2241,11 +2258,18 @@ function MyController(hand) {
         if (isInEditMode()) {
             this.searchIndicatorOn(rayPickInfo.searchRay);
             if (this.triggerSmoothedGrab()) {
-                if (!this.editTriggered && rayPickInfo.entityID) {
+                if (!this.editTriggered){
-                    Messages.sendLocalMessage("entityToolUpdates", JSON.stringify({
+                    if (rayPickInfo.entityID) {
-                        method: "selectEntity",
+                        Messages.sendLocalMessage("entityToolUpdates", JSON.stringify({
-                        entityID: rayPickInfo.entityID
+                            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() {

scripts/system/edit.js

@@ -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;
@@ -2030,6 +2063,10 @@ function selectParticleEntity(entityID) {
     selectedParticleEntity = entityID;
     particleExplorerTool.setActiveParticleEntity(entityID);
     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) {

scripts/system/libraries/entityIconOverlayManager.js

@@ -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) {
+            result.entityID = this.findEntity(result.overlayID);
-                if (result.overlayID === entityOverlays[id]) {
-                    result.entityID = entityIDs[id];
-                    found = true;
-                    break;
-                }
-            }
 
-            if (!found) {
+            if (result.entityID === null) {
                 result.intersects = false;
             }
         }

scripts/system/particle_explorer/particleExplorer.html

@@ -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;

scripts/system/particle_explorer/particleExplorer.js

@@ -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() {
+var Settings = function () {
-    this.exportSettings = function() {
+    this.exportSettings = function () {
-        //copyExportSettingsToClipboard();
+        // 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() {
+window.onload = function () {
-
+    openEventBridge(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
+        // 2-way - need to fix not being able to input exact values if constantly listening
-        //controller.listen();
+        // 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;
+    // Embed colpick's color picker into dat.GUI
-    var controller = gui.addColor(settings, key);
+    var name = document.createElement('span');
-    controller.onChange(function(value) {
+    name.className = 'property-name';
-        // Handle hex colors
+    name.innerHTML = key;
-        if(_.isString(value) && value[0] === '#') {
+
-            const BASE_HEX = 16;
+    var container = document.createElement('div');
-            var colorRegExResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
+    container.appendChild(name);
-            value = [
+
-                parseInt(colorRegExResult[1], BASE_HEX),
+    var $colPickContainer = $('<div>', {
-                parseInt(colorRegExResult[2], BASE_HEX),
+        id: key.toString(), 
-                parseInt(colorRegExResult[3], BASE_HEX)
+        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');
+    var buttonnode = document.createElement('input');
-    buttonnode.setAttribute('type','button');
+    buttonnode.setAttribute('type', 'button');
-    buttonnode.setAttribute('value','close');
+    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);