diff --git a/examples/ControlACs.js b/examples/ControlACs.js index bbdb1cc4ef..73a4385c24 100644 --- a/examples/ControlACs.js +++ b/examples/ControlACs.js @@ -117,6 +117,7 @@ function setupToolBars() { leftMargin: TEXT_MARGIN, topMargin: TEXT_MARGIN, alpha: ALPHA_OFF, + backgroundAlpha: ALPHA_OFF, visible: true })); } diff --git a/examples/Recorder.js b/examples/Recorder.js index 8c784bcea2..ff8c449012 100644 --- a/examples/Recorder.js +++ b/examples/Recorder.js @@ -115,6 +115,7 @@ function setupTimer() { width: 0, height: 0, alpha: 1.0, + backgroundAlpha: 1.0, visible: true }); @@ -129,6 +130,7 @@ function setupTimer() { width: slider.w, height: slider.h, alpha: 1.0, + backgroundAlpha: 1.0, visible: true }); slider.foreground = Overlays.addOverlay("text", { @@ -138,6 +140,7 @@ function setupTimer() { width: slider.pos * slider.w, height: slider.h, alpha: 1.0, + backgroundAlpha: 1.0, visible: true }); diff --git a/examples/editModels.js b/examples/editModels.js index 60ca9b6ca6..c961d55bed 100644 --- a/examples/editModels.js +++ b/examples/editModels.js @@ -206,6 +206,7 @@ var progressDialog = (function () { height: backgroundHeight, imageURL: backgroundUrl, alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); @@ -216,6 +217,7 @@ var progressDialog = (function () { textColor: textColor, backgroundColor: textBackground, alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); @@ -226,6 +228,7 @@ var progressDialog = (function () { textColor: textColor, backgroundColor: textBackground, alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); @@ -1169,24 +1172,22 @@ var toolBar = (function () { menuItemHeight = Tool.IMAGE_HEIGHT / 2 - 2; loadURLMenuItem = Overlays.addOverlay("text", { - x: newModelButton.x - menuItemWidth, - y: newModelButton.y + menuItemOffset, height: menuItemHeight, backgroundColor: menuBackgroundColor, topMargin: menuItemMargin, text: "Model URL", alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); loadFileMenuItem = Overlays.addOverlay("text", { - x: newModelButton.x - menuItemWidth, - y: newModelButton.y + menuItemOffset + menuItemHeight, height: menuItemHeight, backgroundColor: menuBackgroundColor, topMargin: menuItemMargin, text: "Model File", alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); @@ -1493,6 +1494,7 @@ var ExportMenu = function (opts) { width: scaleViewWidth, height: height, alpha: 0.0, + backgroundAlpha: 0.0, color: { red: 255, green: 255, blue: 255 }, text: "1" }); @@ -2480,6 +2482,7 @@ function Tooltip() { text: "", color: { red: 228, green: 228, blue: 228 }, alpha: 0.8, + backgroundAlpha: 0.8, visible: false }); this.show = function (doShow) { diff --git a/examples/editVoxels.js b/examples/editVoxels.js index 1dd825d3cf..ff096973a3 100644 --- a/examples/editVoxels.js +++ b/examples/editVoxels.js @@ -319,7 +319,7 @@ function ScaleSelector() { width: this.SECOND_PART, height: this.height, topMargin: 13, text: this.scale.toString(), - alpha: 0.9, + backgroundAlpha: 0.0, visible: editToolsOn }); this.powerOverlay = Overlays.addOverlay("text", { @@ -327,7 +327,7 @@ function ScaleSelector() { width: this.SECOND_PART, height: this.height, leftMargin: 28, text: this.power.toString(), - alpha: 0.0, + backgroundAlpha: 0.0, visible: false }); this.setScale = function(scale) { diff --git a/examples/fallingSand.js b/examples/fallingSand.js index 5018aeb9ca..c85196f10e 100644 --- a/examples/fallingSand.js +++ b/examples/fallingSand.js @@ -117,7 +117,7 @@ function ScaleSelector() { width: this.SECOND_PART, height: this.height, topMargin: 13, text: this.scale.toString(), - alpha: 0.0, + backgroundAlpha: 0.0, visible: editToolsOn, color: activeUIColor }); @@ -126,7 +126,7 @@ function ScaleSelector() { width: this.SECOND_PART, height: this.height, leftMargin: 28, text: this.power.toString(), - alpha: 0.0, + backgroundAlpha: 0.0, visible: false, color: activeUIColor }); diff --git a/examples/growTrees.js b/examples/growTrees.js index 13d6cdc587..a5b55eecd6 100644 --- a/examples/growTrees.js +++ b/examples/growTrees.js @@ -116,7 +116,7 @@ function ScaleSelector() { width: this.SECOND_PART, height: this.height, topMargin: 13, text: this.scale.toString(), - alpha: 0.0, + backgroundAlpha: 0.0, visible: editToolsOn, color: activeUIColor }); @@ -125,7 +125,7 @@ function ScaleSelector() { width: this.SECOND_PART, height: this.height, leftMargin: 28, text: this.power.toString(), - alpha: 0.0, + backgroundAlpha: 0.0, visible: false, color: activeUIColor }); diff --git a/examples/libraries/ExportMenu.js b/examples/libraries/ExportMenu.js index 0a47f2bd69..247391808f 100644 --- a/examples/libraries/ExportMenu.js +++ b/examples/libraries/ExportMenu.js @@ -81,7 +81,7 @@ ExportMenu = function (opts) { y: pos.y + margin, width: scaleViewWidth, height: height, - alpha: 0.0, + backgroundAlpha: 0.0, color: { red: 255, green: 255, blue: 255 }, text: "1" }); diff --git a/examples/libraries/ToolTip.js b/examples/libraries/ToolTip.js index 785a0e4d2f..590eba36d0 100644 --- a/examples/libraries/ToolTip.js +++ b/examples/libraries/ToolTip.js @@ -26,6 +26,7 @@ function Tooltip() { text: "", color: { red: 128, green: 128, blue: 128 }, alpha: 0.2, + backgroundAlpha: 0.2, visible: false }); this.show = function (doShow) { diff --git a/examples/libraries/entityCameraTool.js b/examples/libraries/entityCameraTool.js index 3cd2b8a97e..803a58f48e 100644 --- a/examples/libraries/entityCameraTool.js +++ b/examples/libraries/entityCameraTool.js @@ -390,6 +390,7 @@ var ZoomTool = function(opts) { leftMargin: 4, text: "+", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); var decreaseButton = Overlays.addOverlay("text", { @@ -403,6 +404,7 @@ var ZoomTool = function(opts) { leftMargin: 4, text: "-", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); var zoomBar = Overlays.addOverlay("text", { @@ -416,6 +418,7 @@ var ZoomTool = function(opts) { leftMargin: 4, text: "", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); var zoomHandle = Overlays.addOverlay("text", { @@ -428,6 +431,7 @@ var ZoomTool = function(opts) { leftMargin: 4, text: "", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); @@ -501,6 +505,7 @@ var ArrowTool = function(opts) { leftMargin: 4, text: "^", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); var leftButton = Overlays.addOverlay("text", { @@ -514,6 +519,7 @@ var ArrowTool = function(opts) { leftMargin: 4, text: "<", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); var rightButton = Overlays.addOverlay("text", { @@ -540,6 +546,7 @@ var ArrowTool = function(opts) { leftMargin: 4, text: "v", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); var centerButton = Overlays.addOverlay("text", { @@ -553,6 +560,7 @@ var ArrowTool = function(opts) { leftMargin: 4, text: "", alpha: 1.0, + backgroundAlpha: 1.0, visible: true, }); diff --git a/examples/libraries/entitySelectionTool.js b/examples/libraries/entitySelectionTool.js index a96eec9bbb..382b8de215 100644 --- a/examples/libraries/entitySelectionTool.js +++ b/examples/libraries/entitySelectionTool.js @@ -368,6 +368,7 @@ SelectionDisplay = (function () { color: { red: 0, green: 0, blue: 0}, backgroundColor: { red: 255, green: 255, blue: 255 }, alpha: 0.7, + backgroundAlpha: 0.7, visible: false, isFacingAvatar: true, drawInFront: true, diff --git a/examples/libraries/progressDialog.js b/examples/libraries/progressDialog.js index dff0904372..7d3b1f88e2 100644 --- a/examples/libraries/progressDialog.js +++ b/examples/libraries/progressDialog.js @@ -40,6 +40,7 @@ progressDialog = (function () { textColor: textColor, backgroundColor: textBackground, alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); @@ -50,6 +51,7 @@ progressDialog = (function () { textColor: textColor, backgroundColor: textBackground, alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); diff --git a/examples/libraries/toolBars.js b/examples/libraries/toolBars.js index dc17f02869..5802625d7b 100644 --- a/examples/libraries/toolBars.js +++ b/examples/libraries/toolBars.js @@ -138,6 +138,7 @@ ToolBar = function(x, y, direction) { width: this.width, height: this.height, alpha: 1.0, + backgroundAlpha: 1.0, visible: false }); this.spacing = []; @@ -243,7 +244,10 @@ ToolBar = function(x, y, direction) { this.tools[tool].setAlpha(alpha); } if (this.back != null) { - Overlays.editOverlay(this.back, { alpha: alpha}); + Overlays.editOverlay(this.back, { + alpha: alpha, + backgroundAlpha: alpha + }); } } else { this.tools[tool].setAlpha(alpha); @@ -263,7 +267,7 @@ ToolBar = function(x, y, direction) { ((direction == ToolBar.VERTICAL) ? 1 : 2) * ToolBar.SPACING, visible: true, backgroundColor: color, - alpha: alpha + backgroundAlpha: alpha }); } } diff --git a/examples/lobby.js b/examples/lobby.js index 9e454eccc9..c5a9645e90 100644 --- a/examples/lobby.js +++ b/examples/lobby.js @@ -113,6 +113,7 @@ function drawLobby() { text: "", lineHeight: lineHeight, alpha: 0.9, + backgroundAlpha: 0.9, ignoreRayIntersection: true, visible: false, isFacingAvatar: true diff --git a/examples/newEditEntities.js b/examples/newEditEntities.js index 606ff5955a..90208ba24e 100644 --- a/examples/newEditEntities.js +++ b/examples/newEditEntities.js @@ -140,24 +140,22 @@ var toolBar = (function () { menuItemHeight = Tool.IMAGE_HEIGHT / 2 - 2; loadURLMenuItem = Overlays.addOverlay("text", { - x: newModelButton.x - menuItemWidth, - y: newModelButton.y + menuItemOffset, height: menuItemHeight, backgroundColor: menuBackgroundColor, topMargin: menuItemMargin, text: "Model URL", alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); loadFileMenuItem = Overlays.addOverlay("text", { - x: newModelButton.x - menuItemWidth, - y: newModelButton.y + menuItemOffset + menuItemHeight, height: menuItemHeight, backgroundColor: menuBackgroundColor, topMargin: menuItemMargin, text: "Model File", alpha: 0.9, + backgroundAlpha: 0.9, visible: false }); diff --git a/examples/notifications.js b/examples/notifications.js index 16e9dd70b2..2c2c4a5c0b 100644 --- a/examples/notifications.js +++ b/examples/notifications.js @@ -115,6 +115,7 @@ function createNotification(text) { color: textColor, backgroundColor: backColor, alpha: backgroundAlpha, + backgroundAlpha: backgroundAlpha, topMargin: topMargin, leftMargin: leftMargin, font: {size: fontSize}, @@ -160,7 +161,7 @@ function fadeIn(noticeIn, buttonIn) { pauseTimer = Script.setInterval(function() { q++; qFade = q / 10.0; - Overlays.editOverlay(noticeIn, {alpha: qFade}); + Overlays.editOverlay(noticeIn, {alpha: qFade, backgroundAlpha: qFade}); Overlays.editOverlay(buttonIn, {alpha: qFade}); if (q >= 9.0) { Script.clearInterval(pauseTimer); @@ -344,7 +345,7 @@ function fadeOut(noticeOut, buttonOut, arraysOut) { pauseTimer = Script.setInterval(function() { r--; rFade = r / 10.0; - Overlays.editOverlay(noticeOut, {alpha: rFade}); + Overlays.editOverlay(noticeOut, {alpha: rFade, backgroundAlpha: rFade}); Overlays.editOverlay(buttonOut, {alpha: rFade}); if (r < 0) { dismiss(noticeOut, buttonOut, arraysOut); diff --git a/examples/overlaysExample.js b/examples/overlaysExample.js index 0d47f7ca64..4aa5b1cd75 100644 --- a/examples/overlaysExample.js +++ b/examples/overlaysExample.js @@ -69,7 +69,8 @@ var text = Overlays.addOverlay("text", { topMargin: 4, leftMargin: 4, text: "Here is some text.\nAnd a second line.", - alpha: 0.7 + alpha: 0.7, + backgroundAlpha: 0.5 }); // This will create an image overlay, which starts out as invisible @@ -170,6 +171,7 @@ var clipboardPreview = Overlays.addOverlay("clipboard", { // Demonstrate retrieving overlay properties print("Text overlay text property value =\n" + Overlays.getProperty(text, "text")); print("Text overlay alpha =\n" + Overlays.getProperty(text, "alpha")); +print("Text overlay background alpha =\n" + Overlays.getProperty(text, "backgroundAlpha")); print("Text overlay visible =\n" + Overlays.getProperty(text, "visible")); print("Text overlay font size =\n" + Overlays.getProperty(text, "font").size); print("Text overlay anchor =\n" + Overlays.getProperty(text, "anchor")); diff --git a/examples/testModelOverlaySubMeshes.js b/examples/testModelOverlaySubMeshes.js index 5195b76e60..20ec10ef7c 100644 --- a/examples/testModelOverlaySubMeshes.js +++ b/examples/testModelOverlaySubMeshes.js @@ -57,6 +57,7 @@ var statusText = Overlays.addOverlay("text", { height: 20, backgroundColor: { red: 0, green: 0, blue: 0}, alpha: 1.0, + backgroundAlpha: 1.0, color: { red: 255, green: 255, blue: 255}, topMargin: 4, leftMargin: 4, diff --git a/examples/textInputOverlayExample.js b/examples/textInputOverlayExample.js index e837e81eb5..8a5fad81cd 100644 --- a/examples/textInputOverlayExample.js +++ b/examples/textInputOverlayExample.js @@ -44,6 +44,7 @@ var inputWindow = Overlays.addOverlay("text", { color: textColor, backgroundColor: backColor, alpha: backgroundAlpha, + backgroundAlpha: backgroundAlpha, topMargin: topMargin, leftMargin: leftMargin, font: {size: fontSize}, diff --git a/interface/src/ui/overlays/Text3DOverlay.cpp b/interface/src/ui/overlays/Text3DOverlay.cpp index dbb423ad99..2e80fae8a0 100644 --- a/interface/src/ui/overlays/Text3DOverlay.cpp +++ b/interface/src/ui/overlays/Text3DOverlay.cpp @@ -16,12 +16,14 @@ #include "ui/TextRenderer.h" const xColor DEFAULT_BACKGROUND_COLOR = { 0, 0, 0 }; +const float DEFAULT_BACKGROUND_ALPHA = 0.7f; const float DEFAULT_MARGIN = 0.1f; const int FIXED_FONT_POINT_SIZE = 40; const float LINE_SCALE_RATIO = 1.2f; Text3DOverlay::Text3DOverlay() : _backgroundColor(DEFAULT_BACKGROUND_COLOR), + _backgroundAlpha(DEFAULT_BACKGROUND_ALPHA), _lineHeight(0.1f), _leftMargin(DEFAULT_MARGIN), _topMargin(DEFAULT_MARGIN), @@ -35,6 +37,7 @@ Text3DOverlay::Text3DOverlay(const Text3DOverlay* text3DOverlay) : Planar3DOverlay(text3DOverlay), _text(text3DOverlay->_text), _backgroundColor(text3DOverlay->_backgroundColor), + _backgroundAlpha(text3DOverlay->_backgroundAlpha), _lineHeight(text3DOverlay->_lineHeight), _leftMargin(text3DOverlay->_leftMargin), _topMargin(text3DOverlay->_topMargin), @@ -88,8 +91,8 @@ void Text3DOverlay::render(RenderArgs* args) { const float MAX_COLOR = 255.0f; xColor backgroundColor = getBackgroundColor(); - float alpha = getAlpha(); - glColor4f(backgroundColor.red / MAX_COLOR, backgroundColor.green / MAX_COLOR, backgroundColor.blue / MAX_COLOR, alpha); + glColor4f(backgroundColor.red / MAX_COLOR, backgroundColor.green / MAX_COLOR, backgroundColor.blue / MAX_COLOR, + getBackgroundAlpha()); glm::vec2 dimensions = getDimensions(); glm::vec2 halfDimensions = dimensions * 0.5f; @@ -124,6 +127,7 @@ void Text3DOverlay::render(RenderArgs* args) { enableClipPlane(GL_CLIP_PLANE3, 0.0f, 1.0f, 0.0f, -clipMinimum.y); glColor3f(_color.red / MAX_COLOR, _color.green / MAX_COLOR, _color.blue / MAX_COLOR); + float alpha = getAlpha(); QStringList lines = _text.split("\n"); int lineOffset = maxHeight; foreach(QString thisLine, lines) { @@ -166,6 +170,10 @@ void Text3DOverlay::setProperties(const QScriptValue& properties) { } } + if (properties.property("backgroundAlpha").isValid()) { + _backgroundAlpha = properties.property("backgroundAlpha").toVariant().toFloat(); + } + if (properties.property("lineHeight").isValid()) { setLineHeight(properties.property("lineHeight").toVariant().toFloat()); } @@ -200,6 +208,9 @@ QScriptValue Text3DOverlay::getProperty(const QString& property) { if (property == "backgroundColor") { return xColorToScriptValue(_scriptEngine, _backgroundColor); } + if (property == "backgroundAlpha") { + return _backgroundAlpha; + } if (property == "lineHeight") { return _lineHeight; } diff --git a/interface/src/ui/overlays/Text3DOverlay.h b/interface/src/ui/overlays/Text3DOverlay.h index c624830ac8..d74131391a 100644 --- a/interface/src/ui/overlays/Text3DOverlay.h +++ b/interface/src/ui/overlays/Text3DOverlay.h @@ -37,6 +37,7 @@ public: float getBottomMargin() const { return _bottomMargin; } bool getIsFacingAvatar() const { return _isFacingAvatar; } xColor getBackgroundColor(); + float getBackgroundAlpha() const { return _backgroundAlpha; } // setters void setText(const QString& text) { _text = text; } @@ -59,6 +60,7 @@ private: QString _text; xColor _backgroundColor; + float _backgroundAlpha; float _lineHeight; float _leftMargin; float _topMargin; diff --git a/interface/src/ui/overlays/TextOverlay.cpp b/interface/src/ui/overlays/TextOverlay.cpp index 1d72cf7f05..272c9bc916 100644 --- a/interface/src/ui/overlays/TextOverlay.cpp +++ b/interface/src/ui/overlays/TextOverlay.cpp @@ -19,6 +19,7 @@ TextOverlay::TextOverlay() : _backgroundColor(DEFAULT_BACKGROUND_COLOR), + _backgroundAlpha(DEFAULT_BACKGROUND_ALPHA), _leftMargin(DEFAULT_MARGIN), _topMargin(DEFAULT_MARGIN), _fontSize(DEFAULT_FONTSIZE) @@ -29,6 +30,7 @@ TextOverlay::TextOverlay(const TextOverlay* textOverlay) : Overlay2D(textOverlay), _text(textOverlay->_text), _backgroundColor(textOverlay->_backgroundColor), + _backgroundAlpha(textOverlay->_backgroundAlpha), _leftMargin(textOverlay->_leftMargin), _topMargin(textOverlay->_topMargin), _fontSize(textOverlay->_fontSize) @@ -63,11 +65,10 @@ void TextOverlay::render(RenderArgs* args) { return; // do nothing if we're not visible } - const float MAX_COLOR = 255.0f; xColor backgroundColor = getBackgroundColor(); - float alpha = getAlpha(); - glColor4f(backgroundColor.red / MAX_COLOR, backgroundColor.green / MAX_COLOR, backgroundColor.blue / MAX_COLOR, alpha); + glColor4f(backgroundColor.red / MAX_COLOR, backgroundColor.green / MAX_COLOR, backgroundColor.blue / MAX_COLOR, + getBackgroundAlpha()); glBegin(GL_QUADS); glVertex2f(_bounds.left(), _bounds.top()); @@ -85,6 +86,7 @@ void TextOverlay::render(RenderArgs* args) { int y = _bounds.top() + _topMargin + topAdjust; glColor3f(_color.red / MAX_COLOR, _color.green / MAX_COLOR, _color.blue / MAX_COLOR); + float alpha = getAlpha(); QStringList lines = _text.split("\n"); int lineOffset = 0; foreach(QString thisLine, lines) { @@ -125,6 +127,10 @@ void TextOverlay::setProperties(const QScriptValue& properties) { } } + if (properties.property("backgroundAlpha").isValid()) { + _backgroundAlpha = properties.property("backgroundAlpha").toVariant().toFloat(); + } + if (properties.property("leftMargin").isValid()) { setLeftMargin(properties.property("leftMargin").toVariant().toInt()); } @@ -150,6 +156,9 @@ QScriptValue TextOverlay::getProperty(const QString& property) { if (property == "backgroundColor") { return xColorToScriptValue(_scriptEngine, _backgroundColor); } + if (property == "backgroundAlpha") { + return _backgroundAlpha; + } if (property == "leftMargin") { return _leftMargin; } diff --git a/interface/src/ui/overlays/TextOverlay.h b/interface/src/ui/overlays/TextOverlay.h index 703e15be10..754faea2bc 100644 --- a/interface/src/ui/overlays/TextOverlay.h +++ b/interface/src/ui/overlays/TextOverlay.h @@ -28,6 +28,7 @@ #include "Overlay2D.h" const xColor DEFAULT_BACKGROUND_COLOR = { 0, 0, 0 }; +const float DEFAULT_BACKGROUND_ALPHA = 0.7f; const int DEFAULT_MARGIN = 10; const int DEFAULT_FONTSIZE = 11; const int DEFAULT_FONT_WEIGHT = 50; @@ -46,6 +47,7 @@ public: int getLeftMargin() const { return _leftMargin; } int getTopMargin() const { return _topMargin; } xColor getBackgroundColor(); + float getBackgroundAlpha() const { return _backgroundAlpha; } // setters void setText(const QString& text) { _text = text; } @@ -62,6 +64,7 @@ public: private: QString _text; xColor _backgroundColor; + float _backgroundAlpha; int _leftMargin; int _topMargin; int _fontSize;