Merge pull request #3917 from ctrlaltdavid/20202

CR for Job #20202 - Add "backgroundVisible" property to text overlays

examples/ControlACs.js

@@ -117,6 +117,7 @@ function setupToolBars() {
                                               leftMargin: TEXT_MARGIN,
                                               topMargin: TEXT_MARGIN,
                                               alpha: ALPHA_OFF,
+                                              backgroundAlpha: ALPHA_OFF,
                                               visible: true
                                               }));
 	}

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

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) {

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) {

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

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

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"
     });

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) {

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,
     });
 

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,

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

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

examples/lobby.js

@@ -113,6 +113,7 @@ function drawLobby() {
         text: "",
         lineHeight: lineHeight,
         alpha: 0.9,
+        backgroundAlpha: 0.9,
         ignoreRayIntersection: true,
         visible: false,
         isFacingAvatar: true

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

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

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"));

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,

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},

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, 
-        glColor4f(backgroundColor.red / MAX_COLOR, backgroundColor.green / MAX_COLOR, backgroundColor.blue / MAX_COLOR, alpha);
+            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;
     }

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;

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, 
-    glColor4f(backgroundColor.red / MAX_COLOR, backgroundColor.green / MAX_COLOR, backgroundColor.blue / MAX_COLOR, alpha);
+        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;
     }

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;