Round one HTML external applications using QML(Qt5) WebKit2 w/o native bindings

11 years ago · aec3e26ea0
parent 6d5d539a85
commit aec3e26ea0
3 changed files with 160 additions and 0 deletions
--- a/ethereal/assets/ethereum.js
+++ b/ethereal/assets/ethereum.js
@ -0,0 +1,48 @@
+// Helper function for generating pseudo callbacks and sending data to the QML part of the application
+function postData(data, cb) {
+	data._seed = Math.floor(Math.random() * 1000000)
+	if(cb) {
+		eth._callbacks[data._seed] = cb;
+	}
+
+	navigator.qt.postMessage(JSON.stringify(data));
+}
+
+// Main Ethereum library
+window.eth = {
+	prototype: Object(),
+
+	send: function(cb) {
+		document.getElementById("out").innerHTML = "clicked";
+		postData({message: "Hello world"}, cb);
+	}
+}
+window.eth._callbacks = {}
+
+function debug(/**/) {
+	var args = arguments;
+	var msg = ""
+	for(var i=0; i<args.length; i++){
+		if(typeof args[i] == "object") {
+			msg += " " + JSON.stringify(args[i])
+		} else {
+			msg += args[i]
+		}
+	}
+
+	document.getElementById("debug").innerHTML += "<br>" + msg
+}
+
+navigator.qt.onmessage = function(ev) {
+	var data = JSON.parse(ev.data)
+
+	if(data._seed) {
+		var cb = eth._callbacks[data._seed];
+		if(cb) {
+			// Call the callback
+			cb(data.data);
+			// Remove the "trigger" callback
+			delete eth._callbacks[ev._seed];
+		}
+	}
+}
--- a/ethereal/assets/qml/webapp.qml
+++ b/ethereal/assets/qml/webapp.qml
@ -0,0 +1,85 @@
+import QtQuick 2.0
+import QtWebKit 3.0
+import QtWebKit.experimental 1.0
+import QtQuick.Controls 1.0;
+import QtQuick.Layouts 1.0;
+import QtQuick.Window 2.1;
+import Ethereum 1.0
+
+ApplicationWindow {
+  id: window
+  title: "Webapp"
+  width: 900
+  height: 600
+  minimumHeight: 300
+  property alias url: webview.url
+
+  Item {
+    id: root
+    anchors.fill: parent
+    state: "inspectorShown"
+
+    WebView {
+      id: webview
+      anchors {
+        left: parent.left
+        right: parent.right
+        bottom: sizeGrip.top
+        top: parent.top
+      }
+      onTitleChanged: { window.title = title }
+      experimental.preferences.javascriptEnabled: true
+      experimental.preferences.navigatorQtObjectEnabled: true
+      experimental.preferences.developerExtrasEnabled: true
+      experimental.userScripts: [ui.assetPath("ethereum.js")]
+      experimental.onMessageReceived: {
+        console.log("[onMessageReceived]: ", message.data)
+        var data = JSON.parse(message.data)
+
+        webview.experimental.postMessage(JSON.stringify({data: {message: data.message}, _seed: data._seed}))
+      }
+    }
+
+    Rectangle {
+      id: sizeGrip
+      color: "gray"
+      visible: true
+      height: 10
+      anchors {
+        left: root.left
+        right: root.right
+      }
+      y: Math.round(root.height * 2 / 3)
+
+      MouseArea {
+        anchors.fill: parent
+        drag.target: sizeGrip
+        drag.minimumY: 0
+        drag.maximumY: root.height
+        drag.axis: Drag.YAxis
+      }
+    }
+
+    WebView {
+      id: inspector
+      visible: true
+      url: webview.experimental.remoteInspectorUrl
+      anchors {
+        left: root.left
+        right: root.right
+        top: sizeGrip.bottom
+        bottom: root.bottom
+      }
+    }
+
+    states: [
+      State {
+        name: "inspectorShown"
+        PropertyChanges {
+          target: inspector
+          url: webview.experimental.remoteInspectorUrl
+        }
+      }
+    ]
+  }
+}
--- a/ethereal/assets/test.html
+++ b/ethereal/assets/test.html
@ -0,0 +1,27 @@
+<html>
+<head>
+<title>Epic Works (TM)</title>
+<body>
+<h1>It just works!</h1>
+
+<p>Play with me...</p>
+
+<button onclick="test();">test</button>
+<div id="out"></div>
+<div id="in"></div>
+<div id="debug"></div>
+
+<script type="text/javascript">
+function test() {
+	eth.send(function(data) {
+			debug(data)
+			document.getElementById("in").innerHTML ="and the other way around " + data.message;
+	})
+}
+
+
+</script>
+
+</body>
+</html>
+