Added transparent + colored background web entity capability dynamically.

interface/resources/qml/Web3DSurface.qml

@@ -18,22 +18,31 @@ Item {
     anchors.fill: parent
     property string url: ""
     property string scriptUrl: null
+    property string webBackgroundColor: "#FFFFFFFF"
 
     onUrlChanged: {
-        load(root.url, root.scriptUrl);
+        load(root.url, root.scriptUrl, root.webBackgroundColor);
     }
 
     onScriptUrlChanged: {
         if (root.item) {
             root.item.scriptUrl = root.scriptUrl;
         } else {
-            load(root.url, root.scriptUrl);
+            load(root.url, root.scriptUrl, root.webBackgroundColor);
+        }
+    }
+
+    onWebBackgroundColorChanged: {
+        if (root.item) {
+            root.item.webBackgroundColor = root.webBackgroundColor;
+        } else {
+            load(root.url, root.scriptUrl, root.webBackgroundColor);
         }
     }
 
     property var item: null
 
-    function load(url, scriptUrl) {
+    function load(url, scriptUrl, webBackgroundColor) {
         // Ensure we reset any existing item to "about:blank" to ensure web audio stops: DEV-2375
         if (root.item != null) {
             root.item.url = "about:blank"
@@ -44,12 +53,12 @@ Item {
             root.item = newItem
             root.item.url = url
             root.item.scriptUrl = scriptUrl
-            root.item.transparentBackground = true
+            root.item.transparentBackground = webBackgroundColor.endsWith("FF") ? true : false
         })
     }
 
     Component.onCompleted: {
-        load(root.url, root.scriptUrl);
+        load(root.url, root.scriptUrl, root.webBackgroundColor);
     }
 
     signal sendToScript(var message);

interface/resources/qml/controls/+webengine/FlickableWebViewCore.qml

@@ -15,6 +15,7 @@ Item {
     property alias webViewCore: webViewCore
     property alias webViewCoreProfile: webViewCore.profile
     property string webViewCoreUserAgent
+    property string webBackgroundColor: "#FFFFFFFF" // Fully opaque white.
 
     property string userScriptUrl: ""
     property string urlTag: "noDownload=false";
@@ -98,7 +99,10 @@ Item {
 
         width: parent.width
         height: parent.height
-        backgroundColor: "transparent"
+        //backgroundColor: "transparent"
+        //backgroundColor: "#FFFF00CC"
+        backgroundColor: flick.webBackgroundColor
+        //backgroundColor: Qt.rgba(0.502, 0.502, 0.502, 0.502)
 
         profile: HFWebEngineProfile;
         settings.pluginsEnabled: true

interface/resources/qml/controls/FlickableWebViewCore.qml

@@ -14,6 +14,8 @@ Item {
     property alias webViewCoreProfile: webViewCore.profile
     property string webViewCoreUserAgent
 
+    property string webBackgroundColor: "#FFFFFFFF"
+
     property string userScriptUrl: ""
     property string urlTag: "noDownload=false";
 

interface/resources/qml/controls/WebView.qml

@@ -23,6 +23,7 @@ Item {
     property bool passwordField: false
     property alias flickable: webroot.interactive
     property alias blurOnCtrlShift: webroot.blurOnCtrlShift
+    property alias webBackgroundColor: webroot.webBackgroundColor
 
     function stop() {
         webroot.stop();

libraries/entities-renderer/src/RenderableWebEntityItem.cpp

@@ -1,6 +1,7 @@
 //
 //  Created by Bradley Austin Davis on 2015/05/12
 //  Copyright 2013 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -226,6 +227,14 @@ void WebEntityRenderer::doRenderUpdateSynchronousTyped(const ScenePointer& scene
                     }
                 }
 
+                { 
+                    auto webBackgroundColor = entity->getWebBackgroundColor();
+                    if (_webBackgroundColor != webBackgroundColor) {
+                        _webSurface->getRootItem()->setProperty("webBackgroundColor", webBackgroundColor);
+                        _webBackgroundColor = webBackgroundColor;
+                    }
+                }
+
                 {
                     auto contextPosition = entity->getWorldPosition();
                     if (_contextPosition != contextPosition) {

libraries/entities-renderer/src/RenderableWebEntityItem.h

@@ -1,6 +1,7 @@
 //
 //  Created by Bradley Austin Davis on 2015/05/12
 //  Copyright 2013 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -93,6 +94,7 @@ private:
     uint16_t _dpi;
     QString _scriptURL;
     uint8_t _maxFPS;
+    QString _webBackgroundColor;
     WebInputMode _inputMode;
 
     glm::vec3 _contextPosition;

libraries/entities/src/EntityItemProperties.cpp

@@ -4,6 +4,7 @@
 //
 //  Created by Brad Hefta-Gaub on 12/4/13.
 //  Copyright 2013 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -601,6 +602,7 @@ EntityPropertyFlags EntityItemProperties::getChangedProperties() const {
     CHECK_PROPERTY_CHANGE(PROP_MAX_FPS, maxFPS);
     CHECK_PROPERTY_CHANGE(PROP_INPUT_MODE, inputMode);
     CHECK_PROPERTY_CHANGE(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, showKeyboardFocusHighlight);
+    CHECK_PROPERTY_CHANGE(PROP_WEB_BACKGROUND_COLOR, webBackgroundColor);
 
     // Polyline
     CHECK_PROPERTY_CHANGE(PROP_LINE_POINTS, linePoints);
@@ -1819,6 +1821,7 @@ QScriptValue EntityItemProperties::copyToScriptValue(QScriptEngine* engine, bool
         COPY_PROPERTY_TO_QSCRIPTVALUE(PROP_MAX_FPS, maxFPS);
         COPY_PROPERTY_TO_QSCRIPTVALUE_GETTER(PROP_INPUT_MODE, inputMode, getInputModeAsString());
         COPY_PROPERTY_TO_QSCRIPTVALUE(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, showKeyboardFocusHighlight);
+        COPY_PROPERTY_TO_QSCRIPTVALUE(PROP_WEB_BACKGROUND_COLOR, webBackgroundColor);
     }
 
     // PolyVoxel only
@@ -2200,6 +2203,7 @@ void EntityItemProperties::copyFromScriptValue(const QScriptValue& object, bool
     COPY_PROPERTY_FROM_QSCRIPTVALUE(maxFPS, uint8_t, setMaxFPS);
     COPY_PROPERTY_FROM_QSCRIPTVALUE_ENUM(inputMode, InputMode);
     COPY_PROPERTY_FROM_QSCRIPTVALUE(showKeyboardFocusHighlight, bool, setShowKeyboardFocusHighlight);
+    COPY_PROPERTY_FROM_QSCRIPTVALUE(webBackgroundColor, QString, setWebBackgroundColor);
 
     // Polyline
     COPY_PROPERTY_FROM_QSCRIPTVALUE(linePoints, qVectorVec3, setLinePoints);
@@ -2491,6 +2495,7 @@ void EntityItemProperties::merge(const EntityItemProperties& other) {
     COPY_PROPERTY_IF_CHANGED(maxFPS);
     COPY_PROPERTY_IF_CHANGED(inputMode);
     COPY_PROPERTY_IF_CHANGED(showKeyboardFocusHighlight);
+    COPY_PROPERTY_IF_CHANGED(webBackgroundColor);
 
     // Polyline
     COPY_PROPERTY_IF_CHANGED(linePoints);
@@ -2890,6 +2895,7 @@ bool EntityItemProperties::getPropertyInfo(const QString& propertyName, EntityPr
         ADD_PROPERTY_TO_MAP(PROP_MAX_FPS, MaxFPS, maxFPS, uint8_t);
         ADD_PROPERTY_TO_MAP(PROP_INPUT_MODE, InputMode, inputMode, WebInputMode);
         ADD_PROPERTY_TO_MAP(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, ShowKeyboardFocusHighlight, showKeyboardFocusHighlight, bool);
+        ADD_PROPERTY_TO_MAP(PROP_WEB_BACKGROUND_COLOR, WebBackgroundColor, webBackgroundColor, QString);
 
         // Polyline
         ADD_PROPERTY_TO_MAP(PROP_LINE_POINTS, LinePoints, linePoints, QVector<vec3>);
@@ -3320,6 +3326,7 @@ OctreeElement::AppendState EntityItemProperties::encodeEntityEditPacket(PacketTy
                 APPEND_ENTITY_PROPERTY(PROP_MAX_FPS, properties.getMaxFPS());
                 APPEND_ENTITY_PROPERTY(PROP_INPUT_MODE, (uint32_t)properties.getInputMode());
                 APPEND_ENTITY_PROPERTY(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, properties.getShowKeyboardFocusHighlight());
+                APPEND_ENTITY_PROPERTY(PROP_WEB_BACKGROUND_COLOR, properties.getWebBackgroundColor());
             }
 
             if (properties.getType() == EntityTypes::Line) {
@@ -3795,6 +3802,7 @@ bool EntityItemProperties::decodeEntityEditPacket(const unsigned char* data, int
         READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_MAX_FPS, uint8_t, setMaxFPS);
         READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_INPUT_MODE, WebInputMode, setInputMode);
         READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, bool, setShowKeyboardFocusHighlight);
+        READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_WEB_BACKGROUND_COLOR, QString, setWebBackgroundColor);
     }
 
     if (properties.getType() == EntityTypes::Line) {
@@ -4182,6 +4190,7 @@ void EntityItemProperties::markAllChanged() {
     _maxFPSChanged = true;
     _inputModeChanged = true;
     _showKeyboardFocusHighlightChanged = true;
+    _webBackgroundColor = true;
 
     // Polyline
     _linePointsChanged = true;
@@ -4872,6 +4881,9 @@ QList<QString> EntityItemProperties::listChangedProperties() {
     if (showKeyboardFocusHighlightChanged()) {
         out += "showKeyboardFocusHighlight";
     }
+    if (webBackgroundColorChanged()) {
+        out += "webBackgroundColor";
+    }
 
     // Shape
     if (shapeChanged()) {

libraries/entities/src/EntityItemProperties.h

@@ -4,6 +4,7 @@
 //
 //  Created by Brad Hefta-Gaub on 12/4/13.
 //  Copyright 2013 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -365,6 +366,7 @@ public:
     DEFINE_PROPERTY_REF(PROP_MAX_FPS, MaxFPS, maxFPS, uint8_t, WebEntityItem::DEFAULT_MAX_FPS);
     DEFINE_PROPERTY_REF_ENUM(PROP_INPUT_MODE, InputMode, inputMode, WebInputMode, WebInputMode::TOUCH);
     DEFINE_PROPERTY_REF(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, ShowKeyboardFocusHighlight, showKeyboardFocusHighlight, bool, true);
+    DEFINE_PROPERTY_REF(PROP_WEB_BACKGROUND_COLOR, WebBackgroundColor, webBackgroundColor, QString, WebEntityItem::DEFAULT_WEB_BACKGROUND_COLOR);
 
     // Polyline
     DEFINE_PROPERTY_REF(PROP_LINE_POINTS, LinePoints, linePoints, QVector<glm::vec3>, ENTITY_ITEM_DEFAULT_EMPTY_VEC3_QVEC);

libraries/entities/src/EntityPropertyFlags.h

@@ -4,6 +4,7 @@
 //
 //  Created by Brad Hefta-Gaub on 12/4/13.
 //  Copyright 2013 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -317,6 +318,7 @@ enum EntityPropertyList {
     PROP_MAX_FPS = PROP_DERIVED_3,
     PROP_INPUT_MODE = PROP_DERIVED_4,
     PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT = PROP_DERIVED_5,
+    PROP_WEB_BACKGROUND_COLOR = PROP_DERIVED_6,
 
     // Polyline
     PROP_LINE_POINTS = PROP_DERIVED_0,

libraries/entities/src/WebEntityItem.cpp

@@ -1,6 +1,7 @@
 //
 //  Created by Bradley Austin Davis on 2015/05/12
 //  Copyright 2013 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -22,8 +23,9 @@
 #include "EntityTree.h"
 #include "EntityTreeElement.h"
 
-const QString WebEntityItem::DEFAULT_SOURCE_URL = "http://www.google.com";
+const QString WebEntityItem::DEFAULT_SOURCE_URL = "https://www.vircadia.com";
 const uint8_t WebEntityItem::DEFAULT_MAX_FPS = 10;
+const QString WebEntityItem::DEFAULT_WEB_BACKGROUND_COLOR = "#FFFFFFFF";
 
 EntityItemPointer WebEntityItem::factory(const EntityItemID& entityID, const EntityItemProperties& properties) {
     EntityItemPointer entity(new WebEntityItem(entityID), [](EntityItem* ptr) { ptr->deleteLater(); });
@@ -60,6 +62,7 @@ EntityItemProperties WebEntityItem::getProperties(const EntityPropertyFlags& des
     COPY_ENTITY_PROPERTY_TO_PROPERTIES(maxFPS, getMaxFPS);
     COPY_ENTITY_PROPERTY_TO_PROPERTIES(inputMode, getInputMode);
     COPY_ENTITY_PROPERTY_TO_PROPERTIES(showKeyboardFocusHighlight, getShowKeyboardFocusHighlight);
+    COPY_ENTITY_PROPERTY_TO_PROPERTIES(webBackgroundColor, getWebBackgroundColor);
     return properties;
 }
 
@@ -82,6 +85,7 @@ bool WebEntityItem::setProperties(const EntityItemProperties& properties) {
     SET_ENTITY_PROPERTY_FROM_PROPERTIES(maxFPS, setMaxFPS);
     SET_ENTITY_PROPERTY_FROM_PROPERTIES(inputMode, setInputMode);
     SET_ENTITY_PROPERTY_FROM_PROPERTIES(showKeyboardFocusHighlight, setShowKeyboardFocusHighlight);
+    SET_ENTITY_PROPERTY_FROM_PROPERTIES(webBackgroundColor, setWebBackgroundColor);
 
     if (somethingChanged) {
         bool wantDebug = false;
@@ -122,6 +126,7 @@ int WebEntityItem::readEntitySubclassDataFromBuffer(const unsigned char* data, i
     READ_ENTITY_PROPERTY(PROP_MAX_FPS, uint8_t, setMaxFPS);
     READ_ENTITY_PROPERTY(PROP_INPUT_MODE, WebInputMode, setInputMode);
     READ_ENTITY_PROPERTY(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, bool, setShowKeyboardFocusHighlight);
+    READ_ENTITY_PROPERTY(PROP_WEB_BACKGROUND_COLOR, QString, setWebBackgroundColor);
 
     return bytesRead;
 }
@@ -139,6 +144,7 @@ EntityPropertyFlags WebEntityItem::getEntityProperties(EncodeBitstreamParams& pa
     requestedProperties += PROP_MAX_FPS;
     requestedProperties += PROP_INPUT_MODE;
     requestedProperties += PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT;
+    requestedProperties += PROP_WEB_BACKGROUND_COLOR;
     return requestedProperties;
 }
 
@@ -165,6 +171,7 @@ void WebEntityItem::appendSubclassData(OctreePacketData* packetData, EncodeBitst
     APPEND_ENTITY_PROPERTY(PROP_MAX_FPS, getMaxFPS());
     APPEND_ENTITY_PROPERTY(PROP_INPUT_MODE, (uint32_t)getInputMode());
     APPEND_ENTITY_PROPERTY(PROP_SHOW_KEYBOARD_FOCUS_HIGHLIGHT, getShowKeyboardFocusHighlight());
+    APPEND_ENTITY_PROPERTY(PROP_WEB_BACKGROUND_COLOR, getWebBackgroundColor());
 }
 
 glm::vec3 WebEntityItem::getRaycastDimensions() const {
@@ -307,7 +314,7 @@ void WebEntityItem::setScriptURL(const QString& value) {
     auto newURL = QUrl::fromUserInput(value);
 
     if (!newURL.isValid()) {
-                qCDebug(entities) << "Not setting web entity script URL since" << value << "cannot be parsed to a valid URL.";
+        qCDebug(entities) << "Not setting web entity script URL since" << value << "cannot be parsed to a valid URL.";
         return;
     }
 
@@ -359,6 +366,17 @@ bool WebEntityItem::getShowKeyboardFocusHighlight() const {
     return _showKeyboardFocusHighlight;
 }
 
+void WebEntityItem::setWebBackgroundColor(const QString& value) {
+    withWriteLock([&] {
+        _needsRenderUpdate |= _webBackgroundColor != value;
+        _webBackgroundColor = value;
+    });
+}
+
+QString WebEntityItem::getWebBackgroundColor() const {
+    return resultWithReadLock<QString>([&] { return _webBackgroundColor; });
+}
+
 PulsePropertyGroup WebEntityItem::getPulseProperties() const {
     return resultWithReadLock<PulsePropertyGroup>([&] {
         return _pulseProperties;

libraries/entities/src/WebEntityItem.h

@@ -1,6 +1,7 @@
 //
 //  Created by Bradley Austin Davis on 2015/05/12
 //  Copyright 2013 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -80,6 +81,10 @@ public:
     void setMaxFPS(uint8_t value);
     uint8_t getMaxFPS() const;
 
+    static const QString DEFAULT_WEB_BACKGROUND_COLOR;
+    void setWebBackgroundColor(const QString& value);
+    QString getWebBackgroundColor() const;
+
     void setInputMode(const WebInputMode& value);
     WebInputMode getInputMode() const;
 
@@ -98,6 +103,7 @@ protected:
     uint16_t _dpi;
     QString _scriptURL;
     uint8_t _maxFPS;
+    QString _webBackgroundColor;
     WebInputMode _inputMode;
     bool _showKeyboardFocusHighlight;
     bool _localSafeContext { false };