Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-17 22:08:27 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #10087 from druiz17/tablet-webView

Browse source 
Better webview handing for the tablet
This commit is contained in:
Seth Alves 2017-03-31 13:26:56 -07:00 committed by GitHub
commit 8d4982d794
4 changed files with 463 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
interface/resources/qml/TabletBrowser.qml Normal file
View file

@ -0,0 +1,186 @@
import QtQuick 2.5
import QtQuick.Controls 1.2
import QtWebChannel 1.0
import QtWebEngine 1.2
import "controls"
import "styles" as HifiStyles
import "styles-uit"
import "windows"
import HFWebEngineProfile 1.0
Item {
id: root
HifiConstants { id: hifi }
HifiStyles.HifiConstants { id: hifistyles }
//width: parent.width
height: 600
property variant permissionsBar: {'securityOrigin':'none','feature':'none'}
property alias url: webview.url
property WebEngineView webView: webview
property alias eventBridge: eventBridgeWrapper.eventBridge
property bool canGoBack: webview.canGoBack
property bool canGoForward: webview.canGoForward
signal loadingChanged(int status)
x: 0
y: 0
function goBack() {
webview.goBack();
}
function goForward() {
webview.goForward();
}
function gotoPage(url) {
webview.url = url;
}
function setProfile(profile) {
webview.profile = profile;
}
function reloadPage() {
webview.reloadAndBypassCache();
webview.setActiveFocusOnPress(true);
webview.setEnabled(true);
}
Item {
id:item
width: parent.width
implicitHeight: parent.height
QtObject {
id: eventBridgeWrapper
WebChannel.id: "eventBridgeWrapper"
property var eventBridge;
}
WebEngineView {
id: webview
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 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: webview.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
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: {
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();
}
}
}
}
onActiveFocusOnPressChanged: {
console.log("on active focus changed");
setActiveFocusOnPress(true);
}
onNewViewRequested:{
// desktop is not defined for web-entities
if (stackRoot.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(webview.profile);
request.openIn(newWindow.webView);
newWindow.eventBridge = web.eventBridge;
stackRoot.push(newWindow);
newWindow.webView.forceActiveFocus();
}
}
}
} // item
Keys.onPressed: {
switch(event.key) {
case Qt.Key_L:
if (event.modifiers == Qt.ControlModifier) {
event.accepted = true
addressBar.selectAll()
addressBar.forceActiveFocus()
}
break;
}
}
} // dialog

268
interface/resources/qml/controls/TabletWebView.qml Normal file
View file

@ -0,0 +1,268 @@
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
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);
newWindow.eventBridge = web.eventBridge;
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;
}
}
}

3
interface/resources/qml/hifi/tablet/TabletAddressDialog.qml
View file

@ -27,7 +27,7 @@ StackView {
initialItem: addressBarDialog
width: parent.width
height: parent.height
property var eventBridge;
property var allStories: [];
property int cardWidth: 460;
property int cardHeight: 320;
@ -59,6 +59,7 @@ StackView {
if (0 !== targetString.indexOf('hifi://')) {
var card = tabletStoryCard.createObject();
card.setUrl(addressBarDialog.metaverseServerUrl + targetString);
card.eventBridge = root.eventBridge;
root.push(card);
return;
}

100
interface/resources/qml/hifi/tablet/TabletStoryCard.qml
View file

@ -17,7 +17,8 @@ import "../../windows"
import "../"
import "../toolbars"
import "../../styles-uit" as HifiStyles
import "../../controls-uit" as HifiControls
import "../../controls-uit" as HifiControlsUit
import "../../controls" as HifiControls
Rectangle {
@ -26,104 +27,17 @@ Rectangle {
width: parent.width
height: parent.height
property string address: ""
property alias eventBridge: webview.eventBridge
function setUrl(url) {
cardRoot.address = url;
webview.url = url;
}
function goBack() {
}
function visit() {
}
Rectangle {
id: header
anchors {
left: parent.left
right: parent.right
top: parent.top
}
width: parent.width
height: 50
color: hifi.colors.white
Row {
anchors.fill: parent
spacing: 80
Item {
id: backButton
anchors {
top: parent.top
left: parent.left
leftMargin: 100
}
height: parent.height
width: parent.height
HifiStyles.FiraSansSemiBold {
text: "BACK"
elide: Text.ElideRight
anchors.fill: parent
size: 16
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: hifi.colors.lightGray
MouseArea {
id: backButtonMouseArea
anchors.fill: parent
hoverEnabled: enabled
onClicked: {
webview.goBack();
}
}
}
}
Item {
id: closeButton
anchors {
top: parent.top
right: parent.right
rightMargin: 100
}
height: parent.height
width: parent.height
HifiStyles.FiraSansSemiBold {
text: "CLOSE"
elide: Text.ElideRight
anchors.fill: parent
size: 16
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: hifi.colors.lightGray
MouseArea {
id: closeButtonMouseArea
anchors.fill: parent
hoverEnabled: enabled
onClicked: root.pop();
}
}
}
}
}
HifiControls.WebView {
HifiControls.TabletWebView {
id: webview
parentStackItem: root
anchors {
top: header.bottom
top: parent.top
right: parent.right
left: parent.left
bottom: parent.bottom