From b6901bba3efc255be73cdf01125223a0a1f81bba Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Fri, 31 Mar 2017 18:48:08 +0100 Subject: [PATCH] added tabletWebView.qml --- interface/resources/qml/TabletBrowser.qml | 156 ++------- .../resources/qml/controls/TabletWebView.qml | 267 +++++++++++++++ interface/resources/qml/controls/WebView.qml | 305 +++++------------- 3 files changed, 369 insertions(+), 359 deletions(-) create mode 100644 interface/resources/qml/controls/TabletWebView.qml diff --git a/interface/resources/qml/TabletBrowser.qml b/interface/resources/qml/TabletBrowser.qml index 95b0b88467..ffedb35cf3 100644 --- a/interface/resources/qml/TabletBrowser.qml +++ b/interface/resources/qml/TabletBrowser.qml @@ -13,42 +13,31 @@ Item { id: root HifiConstants { id: hifi } HifiStyles.HifiConstants { id: hifistyles } - width: parent.width + //width: parent.width height: 600 property variant permissionsBar: {'securityOrigin':'none','feature':'none'} - //property alias url: webview.url + property alias url: webview.url property WebEngineView webView: webview property alias eventBridge: eventBridgeWrapper.eventBridge property bool canGoBack: webview.canGoBack property bool canGoForward: webview.canGoForward - property var goForward: webview.goForward(); - property var goBack: webview.goBack(); signal loadingChanged(int status) x: 0 y: 0 - - Component.onCompleted: { - webView.address = webview.url + + function goBack() { + webview.goBack(); } - - function showPermissionsBar(){ - //permissionsContainer.visible=true; + + function goForward() { + webview.goForward(); } - - function hidePermissionsBar(){ - //permissionsContainer.visible=false; - } - - function allowPermissions(){ - webview.grantFeaturePermission(permissionsBar.securityOrigin, permissionsBar.feature, true); - hidePermissionsBar(); - } - - function setAutoAdd(auto) { - // desktop.setAutoAdd(auto); + + function gotoPage(url) { + webview.url = url; } function setProfile(profile) { @@ -66,115 +55,6 @@ Item { width: parent.width implicitHeight: parent.height - Item { - id: border - height: 48 - anchors.top: parent.top - anchors.topMargin: 8 - anchors.right: parent.right - anchors.rightMargin: 8 - anchors.left: buttons.right - anchors.leftMargin: 8 - - Item { - id: barIcon - width: parent.height - height: parent.height - Image { - //source: webview.icon; - x: (parent.height - height) / 2 - y: (parent.width - width) / 2 - sourceSize: Qt.size(width, height); - verticalAlignment: Image.AlignVCenter; - horizontalAlignment: Image.AlignHCenter - onSourceChanged: console.log("Icon url: " + source) - } - } - - TextField { - id: addressBar - anchors.right: parent.right - anchors.rightMargin: 8 - anchors.left: barIcon.right - anchors.leftMargin: 0 - anchors.verticalCenter: parent.verticalCenter - focus: true - //colorScheme: hifi.colorSchemes.dark - placeholderText: "Enter URL" - Component.onCompleted: ScriptDiscoveryService.scriptsModelFilter.filterRegExp = new RegExp("^.*$", "i") - Keys.onPressed: { - switch(event.key) { - case Qt.Key_Enter: - case Qt.Key_Return: - event.accepted = true - if (text.indexOf("http") != 0) { - text = "http://" + text; - } - root.hidePermissionsBar(); - root.keyboardRaised = false; - webview.url = text; - break; - } - } - } - } - - Rectangle { - id:permissionsContainer - visible:false - color: "#000000" - width: parent.width - anchors.top: buttons.bottom - height:40 - z:100 - gradient: Gradient { - GradientStop { position: 0.0; color: "black" } - GradientStop { position: 1.0; color: "grey" } - } - - RalewayLight { - id: permissionsInfo - anchors.right:permissionsRow.left - anchors.rightMargin: 32 - anchors.topMargin:8 - anchors.top:parent.top - text: "This site wants to use your microphone/camera" - size: 18 - color: hifi.colors.white - } - - Row { - id: permissionsRow - spacing: 4 - anchors.top:parent.top - anchors.topMargin: 8 - anchors.right: parent.right - visible: true - z:101 - - Button { - id:allow - text: "Allow" - //color: hifi.buttons.blue - //colorScheme: root.colorScheme - width: 120 - enabled: true - onClicked: root.allowPermissions(); - z:101 - } - - Button { - id:block - text: "Block" - //color: hifi.buttons.red - //colorScheme: root.colorScheme - width: 120 - enabled: true - onClicked: root.hidePermissionsBar(); - z:101 - } - } - } QtObject { id: eventBridgeWrapper @@ -190,11 +70,11 @@ Item { width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - profile: HFWebEngineProfile { - id: webviewProfile - storageName: "qmlWebEngine" - } - + //profile: HFWebEngineProfile { + //id: webviewProfile + //storageName: "qmlWebEngine" + //} + property string userScriptUrl: "" // creates a global EventBridge object. @@ -230,10 +110,12 @@ Item { Component.onCompleted: { // Ensure the JS from the web-engine makes it to our logging webview.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { + console.log("TabletBrowser"); console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); }); webview.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface"; + web.address = url; } onFeaturePermissionRequested: { @@ -277,7 +159,7 @@ Item { return; } var newWindow = component.createObject(); - newWindow.setProfile(webview.profile); + //newWindow.setProfile(webview.profile); request.openIn(newWindow.webView); stackRoot.push(newWindow); newWindow.forceActiveFocus(); diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml new file mode 100644 index 0000000000..1a4df2c2d9 --- /dev/null +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -0,0 +1,267 @@ +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import QtWebEngine 1.1 +import QtWebChannel 1.0 +import "../controls-uit" as HiFiControls +import "../styles" as HifiStyles +import "../styles-uit" +import HFWebEngineProfile 1.0 +import "../" +Item { + id: web + width: parent.width + height: parent.height + property var parentStackItem: null + property int headerHeight: 38 + property alias url: root.url + property string address: url + property alias scriptURL: root.userScriptUrl + property alias eventBridge: eventBridgeWrapper.eventBridge + property bool keyboardEnabled: HMD.active // FIXME - Keyboard HMD only: Default to false + property bool keyboardRaised: false + property bool punctuationMode: false + property bool isDesktop: false + property WebEngineView view: root + + + Row { + id: buttons + HifiConstants { id: hifi } + HifiStyles.HifiConstants { id: hifistyles } + height: headerHeight + spacing: 4 + anchors.top: parent.top + anchors.topMargin: 8 + anchors.left: parent.left + anchors.leftMargin: 8 + HiFiGlyphs { + id: back; + enabled: true; + text: hifi.glyphs.backward + color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText + size: 48 + MouseArea { anchors.fill: parent; onClicked: stackRoot.goBack() } + } + + HiFiGlyphs { + id: forward; + enabled: stackRoot.currentItem.canGoForward; + text: hifi.glyphs.forward + color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText + size: 48 + MouseArea { anchors.fill: parent; onClicked: stackRoot.currentItem.goForward() } + } + + HiFiGlyphs { + id: reload; + enabled: true; + text: webview.loading ? hifi.glyphs.close : hifi.glyphs.reload + color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText + size: 48 + MouseArea { anchors.fill: parent; onClicked: stackRoot.currentItem.reloadPage(); } + } + + } + + TextField { + id: addressBar + height: 30 + anchors.right: parent.right + anchors.rightMargin: 8 + anchors.left: buttons.right + anchors.leftMargin: 0 + anchors.verticalCenter: buttons.verticalCenter + focus: true + text: address + Component.onCompleted: ScriptDiscoveryService.scriptsModelFilter.filterRegExp = new RegExp("^.*$", "i") + + Keys.onPressed: { + switch (event.key) { + case Qt.Key_Enter: + case Qt.Key_Return: + event.accepted = true; + if (text.indexOf("http") != 0) { + text = "http://" + text; + } + //root.hidePermissionsBar(); + web.keyboardRaised = false; + stackRoot.currentItem.gotoPage(text); + break; + + + } + } + } + + + + StackView { + id: stackRoot + width: parent.width + height: parent.height - web.headerHeight + anchors.top: buttons.bottom + //property var goBack: currentItem.goBack(); + property WebEngineView view: root + + initialItem: root; + + function goBack() { + if (depth > 1 ) { + if (currentItem.canGoBack) { + currentItem.goBack(); + } else { + stackRoot.pop(); + currentItem.webView.forceActiveFocus(); + web.address = currentItem.webView.url; + } + } else { + if (currentItem.canGoBack) { + currentItem.goBack(); + } else if (parentStackItem) { + web.parentStackItem.pop(); + } + } + } + + QtObject { + id: eventBridgeWrapper + WebChannel.id: "eventBridgeWrapper" + property var eventBridge; + } + + WebEngineView { + id: root + objectName: "webEngineView" + x: 0 + y: 0 + width: parent.width + height: keyboardEnabled && keyboardRaised ? (parent.height - keyboard.height) : parent.height + //profile: HFWebEngineProfile { + //id: webviewProfile + //storageName: "qmlWebEngine" + //} + property WebEngineView webView: root + function reloadPage() { + root.reload(); + } + + function gotoPage(url) { + root.url = url; + } + + property string userScriptUrl: "" + + // creates a global EventBridge object. + WebEngineScript { + id: createGlobalEventBridge + sourceCode: eventBridgeJavaScriptToInject + injectionPoint: WebEngineScript.DocumentCreation + worldId: WebEngineScript.MainWorld + } + + // detects when to raise and lower virtual keyboard + WebEngineScript { + id: raiseAndLowerKeyboard + injectionPoint: WebEngineScript.Deferred + sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" + worldId: WebEngineScript.MainWorld + } + + // User script. + WebEngineScript { + id: userScript + sourceUrl: root.userScriptUrl + injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. + worldId: WebEngineScript.MainWorld + } + + userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + + property string newUrl: "" + + webChannel.registeredObjects: [eventBridgeWrapper] + + Component.onCompleted: { + // Ensure the JS from the web-engine makes it to our logging + root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { + console.log("WebView.qml"); + console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); + }); + + root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)" + + } + + onFeaturePermissionRequested: { + grantFeaturePermission(securityOrigin, feature, true); + } + + onLoadingChanged: { + keyboardRaised = false; + punctuationMode = false; + keyboard.resetShiftMode(false); + + // Required to support clicking on "hifi://" links + if (WebEngineView.LoadStartedStatus == loadRequest.status) { + var url = loadRequest.url.toString(); + if (urlHandler.canHandleUrl(url)) { + if (urlHandler.handleUrl(url)) { + root.stop(); + } + } + } + } + + onNewViewRequested:{ + // desktop is not defined for web-entities + if (isDesktop) { + var component = Qt.createComponent("../Browser.qml"); + var newWindow = component.createObject(desktop); + request.openIn(newWindow.webView); + } else { + var component = Qt.createComponent("../TabletBrowser.qml"); + + if (component.status != Component.Ready) { + if (component.status == Component.Error) { + console.log("Error: " + component.errorString()); + } + return; + } + var newWindow = component.createObject(); + //newWindow.setProfile(root.profile); + request.openIn(newWindow.webView); + stackRoot.push(newWindow); + } + } + } + + HiFiControls.Keyboard { + id: keyboard + raised: web.keyboardEnabled && web.keyboardRaised + numeric: web.punctuationMode + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + } + + } + + Component.onCompleted: { + stackRoot.isDesktop = (typeof desktop !== "undefined"); + address = url; + } + + Keys.onPressed: { + switch(event.key) { + case Qt.Key_L: + if (event.modifiers == Qt.ControlModifier) { + event.accepted = true + addressBar.selectAll() + addressBar.forceActiveFocus() + } + break; + } + } +} diff --git a/interface/resources/qml/controls/WebView.qml b/interface/resources/qml/controls/WebView.qml index b99b71321e..ae96590e97 100644 --- a/interface/resources/qml/controls/WebView.qml +++ b/interface/resources/qml/controls/WebView.qml @@ -1,263 +1,124 @@ import QtQuick 2.5 -import QtQuick.Controls 1.4 import QtWebEngine 1.1 import QtWebChannel 1.0 import "../controls-uit" as HiFiControls -import "../styles" as HifiStyles -import "../styles-uit" import HFWebEngineProfile 1.0 -import "../" + Item { - id: webView - width: parent.width - height: parent.height - property var parentStackItem: null - property int headerHeight: 38 property alias url: root.url - property string address: url property alias scriptURL: root.userScriptUrl property alias eventBridge: eventBridgeWrapper.eventBridge - property bool keyboardEnabled: HMD.active // FIXME - Keyboard HMD only: Default to false + property bool keyboardEnabled: true // FIXME - Keyboard HMD only: Default to false property bool keyboardRaised: false property bool punctuationMode: false - property bool isDesktop: false - property bool canGoBack: stackRoot.currentItem.canGoBack - property bool canGoForward: stackRoot.currentItem.canGoForward - property var goForward: stackRoot.currentItem.goForward(); - //property var goBack: currentItem.goBack(); - property WebEngineView view: root + // FIXME - Keyboard HMD only: Make Interface either set keyboardRaised property directly in OffscreenQmlSurface + // or provide HMDinfo object to QML in RenderableWebEntityItem and do the following. + /* + onKeyboardRaisedChanged: { + keyboardEnabled = HMDinfo.active; + } + */ - Row { - id: buttons - HifiConstants { id: hifi } - HifiStyles.HifiConstants { id: hifistyles } - height: headerHeight - spacing: 4 - anchors.top: parent.top - anchors.topMargin: 8 - anchors.left: parent.left - anchors.leftMargin: 8 - HiFiGlyphs { - id: back; - enabled: true; - text: hifi.glyphs.backward - color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText - size: 48 - MouseArea { anchors.fill: parent; onClicked: stackRoot.goBack() } - } - - HiFiGlyphs { - id: forward; - enabled: stackRoot.currentItem.canGoForward; - text: hifi.glyphs.forward - color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText - size: 48 - MouseArea { anchors.fill: parent; onClicked: stackRoot.currentItem.goForward() } - } - - HiFiGlyphs { - id: reload; - enabled: true; - text: webview.loading ? hifi.glyphs.close : hifi.glyphs.reload - color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText - size: 48 - MouseArea { anchors.fill: parent; onClicked: stackRoot.currentItem.reloadPage(); } - } - + QtObject { + id: eventBridgeWrapper + WebChannel.id: "eventBridgeWrapper" + property var eventBridge; } - TextField { - id: addressBar - height: 30 - anchors.right: parent.right - anchors.rightMargin: 8 - anchors.left: buttons.right - anchors.leftMargin: 0 - anchors.verticalCenter: buttons.verticalCenter - focus: true - text: address - Component.onCompleted: ScriptDiscoveryService.scriptsModelFilter.filterRegExp = new RegExp("^.*$", "i") - - Keys.onPressed: { - switch (event.key) { - case Qt.Key_Enter: - case Qt.Key_Return: - event.accepted = true; - if (text.indexOf("http") != 0) { - text = "http://" + text; - } - //root.hidePermissionsBar(); - //root.keyboardRaised = false; - //webview.url = text; - break; - - - } - } - } - - - - StackView { - id: stackRoot + WebEngineView { + id: root + objectName: "webEngineView" + x: 0 + y: 0 width: parent.width - height: parent.height - webView.headerHeight - anchors.top: buttons.bottom - //property var goBack: currentItem.goBack(); - property WebEngineView view: root - - initialItem: root; - + height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - // FIXME - Keyboard HMD only: Make Interface either set keyboardRaised property directly in OffscreenQmlSurface - // or provide HMDinfo object to QML in RenderableWebEntityItem and do the following. - /* - onKeyboardRaisedChanged: { - keyboardEnabled = HMDinfo.active; - } - */ - function goBack() { - if (depth > 1 ) { - if (currentItem.canGoBack) { - currentItem.goBack(); - } else { - stackRoot.pop(); - currentItem.focus = true; - currentItem.forceActiveFocus(); - currentItem.reloadPage(); - } - } else { - if (currentItem.canGoBack) { - currentItem.goBack(); - } else if (parentStackItem) { - webView.parentStackItem.pop(); - } - } + profile: HFWebEngineProfile { + id: webviewProfile + storageName: "qmlWebEngine" } - QtObject { - id: eventBridgeWrapper - WebChannel.id: "eventBridgeWrapper" - property var eventBridge; + property string userScriptUrl: "" + + // creates a global EventBridge object. + WebEngineScript { + id: createGlobalEventBridge + sourceCode: eventBridgeJavaScriptToInject + injectionPoint: WebEngineScript.DocumentCreation + worldId: WebEngineScript.MainWorld } - WebEngineView { - id: root - objectName: "webEngineView" - x: 0 - y: 0 - width: parent.width - height: keyboardEnabled && keyboardRaised ? (parent.height - keyboard.height) : parent.height - profile: HFWebEngineProfile { - id: webviewProfile - storageName: "qmlWebEngine" - } + // detects when to raise and lower virtual keyboard + WebEngineScript { + id: raiseAndLowerKeyboard + injectionPoint: WebEngineScript.Deferred + sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" + worldId: WebEngineScript.MainWorld + } - function reloadPage() { - root.reload(); - } - - property string userScriptUrl: "" + // User script. + WebEngineScript { + id: userScript + sourceUrl: root.userScriptUrl + injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. + worldId: WebEngineScript.MainWorld + } - // creates a global EventBridge object. - WebEngineScript { - id: createGlobalEventBridge - sourceCode: eventBridgeJavaScriptToInject - injectionPoint: WebEngineScript.DocumentCreation - worldId: WebEngineScript.MainWorld - } + userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - // detects when to raise and lower virtual keyboard - WebEngineScript { - id: raiseAndLowerKeyboard - injectionPoint: WebEngineScript.Deferred - sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" - worldId: WebEngineScript.MainWorld - } + property string newUrl: "" - // User script. - WebEngineScript { - id: userScript - sourceUrl: root.userScriptUrl - injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. - worldId: WebEngineScript.MainWorld - } + webChannel.registeredObjects: [eventBridgeWrapper] - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + Component.onCompleted: { + // Ensure the JS from the web-engine makes it to our logging + root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { + console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); + }); - property string newUrl: "" + root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"; + } - webChannel.registeredObjects: [eventBridgeWrapper] + onFeaturePermissionRequested: { + grantFeaturePermission(securityOrigin, feature, true); + } - Component.onCompleted: { - // Ensure the JS from the web-engine makes it to our logging - root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { - console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); - }); + onLoadingChanged: { + keyboardRaised = false; + punctuationMode = false; + keyboard.resetShiftMode(false); - root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)" - - } - - onFeaturePermissionRequested: { - grantFeaturePermission(securityOrigin, feature, true); - } - - onLoadingChanged: { - keyboardRaised = false; - punctuationMode = false; - keyboard.resetShiftMode(false); - - // Required to support clicking on "hifi://" links - if (WebEngineView.LoadStartedStatus == loadRequest.status) { - var url = loadRequest.url.toString(); - if (urlHandler.canHandleUrl(url)) { - if (urlHandler.handleUrl(url)) { - root.stop(); - } + // Required to support clicking on "hifi://" links + if (WebEngineView.LoadStartedStatus == loadRequest.status) { + var url = loadRequest.url.toString(); + if (urlHandler.canHandleUrl(url)) { + if (urlHandler.handleUrl(url)) { + root.stop(); } } } - - onNewViewRequested:{ - // desktop is not defined for web-entities - if (isDesktop) { - var component = Qt.createComponent("../Browser.qml"); - var newWindow = component.createObject(desktop); - request.openIn(newWindow.webView); - } else { - var component = Qt.createComponent("../TabletBrowser.qml"); - - if (component.status != Component.Ready) { - if (component.status == Component.Error) { - console.log("Error: " + component.errorString()); - } - return; - } - var newWindow = component.createObject(); - newWindow.setProfile(root.profile); - request.openIn(newWindow.webView); - stackRoot.push(newWindow); - } - } } - HiFiControls.Keyboard { - id: keyboard - raised: webView.keyboardEnabled && webView.keyboardRaised - numeric: webView.punctuationMode - anchors { - left: parent.left - right: parent.right - bottom: parent.bottom + onNewViewRequested:{ + // desktop is not defined for web-entities + if (desktop) { + var component = Qt.createComponent("../Browser.qml"); + var newWindow = component.createObject(desktop); + request.openIn(newWindow.webView); } } - } - Component.onCompleted: { - stackRoot.isDesktop = (typeof desktop !== "undefined"); - address = url; + HiFiControls.Keyboard { + id: keyboard + raised: parent.keyboardEnabled && parent.keyboardRaised + numeric: parent.punctuationMode + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } } + }