diff --git a/emperor/support_files/js/sceneplotview3d.js b/emperor/support_files/js/sceneplotview3d.js
index 3f62058f..5574744d 100644
--- a/emperor/support_files/js/sceneplotview3d.js
+++ b/emperor/support_files/js/sceneplotview3d.js
@@ -137,6 +137,38 @@ define([
event.preventDefault(); //cancel system double-click event
});
+ //Add info div as bottom of canvas
+ this.$info = $('
');
+ this.$info.css('position', 'absolute')
+ .css('bottom', 0)
+ .css('height', 16)
+ .css('width', '100%')
+ .css('padding-left', 10)
+ .css('padding-right', 10)
+ .css('font-size', 12)
+ .css('background-color', 'rgb(238, 238, 238)')
+ .css('border', '1px solid black')
+ .css('font-family', 'Verdana,Arial,sans-serif')
+ .hide();
+ $(this.renderer.domElement).parent().append(this.$info);
+
+ // register callback for populating info with clicked sample name
+ // set the timeout for fading out the info div
+ var infoDuration = 2500;
+ var infoTimeout = setTimeout(function() {
+ scope.$info.fadeOut();
+ }, infoDuration);
+
+ this.on('click', function(n, i) {
+ clearTimeout(infoTimeout);
+ scope.$info.text(n);
+
+ // reset the timeout for fading out the info div
+ infoTimeout = setTimeout(function() {
+ scope.$info.fadeOut();
+ scope.$info.text('');
+ }, infoDuration);
+ });
};
/**
@@ -361,15 +393,15 @@ define([
**/
ScenePlotView3D.prototype._eventCallback = function(eventType, event) {
event.preventDefault();
-
// don't do anything if no subscribers
if (this._subscribers[eventType].length === 0) {
return;
}
var element = this.renderer.domElement;
- this._mouse.x = ((event.clientX - element.offsetLeft) / element.width) * 2 - 1;
- this._mouse.y = -((event.clientY - element.offsetTop) / element.height) * 2 + 1;
+ var offset = $(element).offset();
+ this._mouse.x = ((event.clientX - offset.left) / element.width) * 2 - 1;
+ this._mouse.y = -((event.clientY - offset.top) / element.height) * 2 + 1;
this._raycaster.setFromCamera(this._mouse, this.camera);