From 94abc457c13ef9133fe570bf56cba60530383d79 Mon Sep 17 00:00:00 2001 From: "pls.153" Date: Fri, 25 Mar 2022 20:20:52 +0100 Subject: [PATCH] make 'clog-demo' work on latest android (ditch websocket, use direct JS calls) --- examples/clog-demo/app.asd | 2 +- .../clog-demo/clog-assets/demos/01-demo.lisp | 11 ++- examples/clog-demo/clog-assets/htm/js/boot.js | 95 ++----------------- examples/clog-demo/lisp/clog-bridge.lisp | 25 +++-- examples/clog-demo/make.lisp | 6 +- .../platforms/android/AndroidManifest.xml | 4 +- examples/clog-demo/qml/ext/Browser.qml | 14 +++ examples/clog-demo/qml/ext/Log.qml | 24 +++++ examples/clog-demo/qml/ext/Server.qml | 69 -------------- examples/clog-demo/qml/main.qml | 14 ++- examples/clog-demo/run.lisp | 5 +- 11 files changed, 80 insertions(+), 189 deletions(-) create mode 100644 examples/clog-demo/qml/ext/Log.qml delete mode 100644 examples/clog-demo/qml/ext/Server.qml diff --git a/examples/clog-demo/app.asd b/examples/clog-demo/app.asd index 6a6925b..39022cb 100644 --- a/examples/clog-demo/app.asd +++ b/examples/clog-demo/app.asd @@ -1,6 +1,6 @@ (defsystem :app :serial t - :depends-on (:clog) ; requires this fork: https://github.com/pls153/clog + :depends-on (#-clog-loaded :clog) ; requires this fork: https://github.com/pls153/clog :components ((:file "lisp/package") (:file "lisp/ui-vars") (:file "lisp/swank-quicklisp") diff --git a/examples/clog-demo/clog-assets/demos/01-demo.lisp b/examples/clog-demo/clog-assets/demos/01-demo.lisp index 9e987a1..ae79f43 100644 --- a/examples/clog-demo/clog-assets/demos/01-demo.lisp +++ b/examples/clog-demo/clog-assets/demos/01-demo.lisp @@ -128,11 +128,12 @@ (defun on-click (obj) (let ((app (connection-data-item obj "app-data")) - (btn-txt (text obj))) - (cond ((equal btn-txt " <-- ") (setf (snake-direction app) :left)) - ((equal btn-txt " --> ") (setf (snake-direction app) :right)) - ((equal btn-txt " -^- ") (setf (snake-direction app) :up)) - ((equal btn-txt " -v- ") (setf (snake-direction app) :down))))) + (btn-txt (text obj))) + ;; LQML note: ignore whitespace (see hack in 'boot.js') + (cond ((search "<--" btn-txt) (setf (snake-direction app) :left)) + ((search "-->" btn-txt) (setf (snake-direction app) :right)) + ((search "-^-" btn-txt) (setf (snake-direction app) :up)) + ((search "-v-" btn-txt) (setf (snake-direction app) :down))))) (defun start-game (body) (let* ((app (connection-data-item body "app-data")) diff --git a/examples/clog-demo/clog-assets/htm/js/boot.js b/examples/clog-demo/clog-assets/htm/js/boot.js index ab6f4f0..8cd1716 100644 --- a/examples/clog-demo/clog-assets/htm/js/boot.js +++ b/examples/clog-demo/clog-assets/htm/js/boot.js @@ -1,72 +1,17 @@ /*static version*/ -var ws; -var adr; var clog={}; -var pingerid; if (typeof clog_debug == 'undefined') { clog_debug = false; } -function Ping_ws() { - if (ws.readyState == 1) { - ws.send ('0'); +const ws = { + send: function(message) { + // hack: notify QML (see 'onTitleChanged()') + document.title = message; + document.title = "-"; // reset (not empty!) } -} - -function Shutdown_ws(event) { - if (ws != null) { - ws.onerror = null; - ws.onclose = null; - ws.close (); - ws = null; - } - clearInterval (pingerid); - if (clog['html_on_close'] != '') { - $(document.body).html(clog['html_on_close']); - } -} - -function Setup_ws() { - ws.onmessage = function (event) { - try { - if (clog_debug == true) { - console.log ('eval data = ' + event.data); - } - eval (event.data); - } catch (e) { - console.error (e.message); - } - } - - ws.onerror = function (event) { - console.log ('onerror: reconnect'); - ws = null; - ws = new WebSocket (adr + '?r=' + clog['connection_id']); - ws.onopen = function (event) { - console.log ('onerror: reconnect successful'); - Setup_ws(); - } - ws.onclose = function (event) { - console.log ('onerror: reconnect failure'); - Shutdown_ws(event); - } - } - - ws.onclose = function (event) { - console.log ('onclose: reconnect'); - ws = null; - ws = new WebSocket (adr + '?r=' + clog['connection_id']); - ws.onopen = function (event) { - console.log ('onclose: reconnect successful'); - Setup_ws(); - } - ws.onclose = function (event) { - console.log ('onclose: reconnect failure'); - Shutdown_ws(event); - } - } -} +}; $( document ).ready(function() { var s = document.location.search; @@ -80,32 +25,4 @@ $( document ).ready(function() { clog['navigator']=navigator; clog['document']=window.document; clog['location']=window.location; - - if (location.protocol == 'https:') { - adr = 'wss://' + location.hostname; - } else { - adr = 'ws://' + location.hostname; - } - - if (location.port != '') { adr = adr + ':' + location.port; } - //adr = adr + '/clog'; - adr = adr + '127.0.0.1:8080/'; // for LQML - - try { - console.log ('connecting to ' + adr); - ws = new WebSocket (adr); - } catch (e) { - console.log ('trying again, connecting to ' + adr); - ws = new WebSocket (adr); - } - - if (ws != null) { - ws.onopen = function (event) { - console.log ('connection successful'); - Setup_ws(); - } - pingerid = setInterval (function () {Ping_ws ();}, 10000); - } else { - document.writeln ('If you are seeing this your browser or your connection to the internet is blocking websockets.'); - } }); diff --git a/examples/clog-demo/lisp/clog-bridge.lisp b/examples/clog-demo/lisp/clog-bridge.lisp index 96da4f0..add6154 100644 --- a/examples/clog-demo/lisp/clog-bridge.lisp +++ b/examples/clog-demo/lisp/clog-bridge.lisp @@ -1,22 +1,19 @@ ;;; this requires a CLOG fork prepared for mobile -(in-package :clog-connection) - -(setf *websocket-server-send* - (lambda (text) (qml:qjs |send| ui:*server* text))) - -(defun server/on-new-connection () - (handle-new-connection 'qml-websocket-server nil)) - -(defun server/on-message (message) - (handle-message 'qml-websocket-server message)) - -(defun server/on-close () - (handle-close-connection 'qml-websocket-server)) - (in-package :clog) +(setf clog-connection::*send-to-webview* + (lambda (js) + (qml:q! |runJavaScript| ui:*browser* js))) + +(defun webview/on-new-connection () + (clog-connection::handle-new-connection 'qml-webview nil)) + +(defun webview/on-message (message) + (clog-connection::handle-message 'qml-webview message)) + (defun boot () + (clog-connection::handle-close-connection 'qml-webview) (qml:q> |url| ui:*browser* (format nil "file://~A" (merge-pathnames "htm/boot.html")))) diff --git a/examples/clog-demo/make.lisp b/examples/clog-demo/make.lisp index 9cd4dcc..4a1ec84 100644 --- a/examples/clog-demo/make.lisp +++ b/examples/clog-demo/make.lisp @@ -38,9 +38,9 @@ "/lib/ecl-*/"))) (shell (cc "cp " lib "*.doc " *assets*)) (shell (cc "cp -r " lib "encodings " *assets*)))) - (unless (probe-file (cc *assets* "htm/")) - (shell (cc "cp -r ../clog-assets/htm " *assets*)) - (shell (cc "cp -r ../clog-assets/*.asd " *assets*)))) + (shell (cc "rm -r " *assets* "htm/*")) ; may have changed + (shell (cc "cp -r ../clog-assets/htm " *assets*)) + (shell (cc "cp -r ../clog-assets/*.asd " *assets*))) #+mobile (unless (find-swank) diff --git a/examples/clog-demo/platforms/android/AndroidManifest.xml b/examples/clog-demo/platforms/android/AndroidManifest.xml index 7985cb0..adb46f3 100644 --- a/examples/clog-demo/platforms/android/AndroidManifest.xml +++ b/examples/clog-demo/platforms/android/AndroidManifest.xml @@ -10,10 +10,10 @@ - + - + diff --git a/examples/clog-demo/qml/ext/Browser.qml b/examples/clog-demo/qml/ext/Browser.qml index 666ceb4..e90e832 100644 --- a/examples/clog-demo/qml/ext/Browser.qml +++ b/examples/clog-demo/qml/ext/Browser.qml @@ -9,6 +9,20 @@ Item { width: parent. width height: parent.height - reload.height visible: !busy.visible + + onLoadingChanged: { + if (loadRequest.status === WebView.LoadSucceededStatus) { + Lisp.call("clog:webview/on-new-connection") + } + } + + // hack to get notified from the browser, see 'boot.js' + onTitleChanged: { + if ((title !== "-") && (title !== "boot.html")) { + Lisp.call("clog:webview/on-message", title) + main.log(title) + } + } } Button { diff --git a/examples/clog-demo/qml/ext/Log.qml b/examples/clog-demo/qml/ext/Log.qml new file mode 100644 index 0000000..c5b06c9 --- /dev/null +++ b/examples/clog-demo/qml/ext/Log.qml @@ -0,0 +1,24 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import "." as Ext + +Rectangle { + color: "lavender" + + Ext.Repl {} + + function addLine(message) { + logModel.append({ message: message }) + listView.positionViewAtEnd() + } + + ListView { + id: listView + anchors.fill: parent + model: ListModel { id: logModel } + delegate: Text { + font.pixelSize: 14 + text: message + } + } +} diff --git a/examples/clog-demo/qml/ext/Server.qml b/examples/clog-demo/qml/ext/Server.qml deleted file mode 100644 index aa5f382..0000000 --- a/examples/clog-demo/qml/ext/Server.qml +++ /dev/null @@ -1,69 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtWebSockets 1.15 -import "." as Ext - -Rectangle { - color: "lavender" - - Ext.Repl {} - - WebSocketServer { - id: server - objectName: "server" - port: 8080 - listen: true - - property int counter: 0 - property var connection - - function send(message) { // called from CLOG - connection.sendTextMessage(message) - } - - function log(dictionary) { - logModel.append(dictionary) - view.positionViewAtEnd() - } - - onClientConnected: { - connection = webSocket - webSocket.objectName = ++counter - log({ message: "[new] " + counter, error: false }) - Lisp.call(webSocket, "clog-connection:server/on-new-connection") // call CLOG - - webSocket.onTextMessageReceived.connect(function(message) { - log({ message: message, error: false }) - Lisp.call(webSocket, "clog-connection:server/on-message", message) // call CLOG - }) - - webSocket.onStatusChanged.connect(function(status) { - var state - switch (status) { - case WebSocket.Closed: state = "close"; break - case WebSocket.Error: state = "error"; break - default: return - } - log({ message: "[status] " + state, error: (status === WebSocket.Error) }) - if (status === WebSocket.Closed) { - Lisp.call(webSocket, "clog-connection:server/on-close") // call CLOG - } - }) - } - - onErrorStringChanged: { - log({ message: "[server error] " + errorString, error: true }); - } - } - - ListView { - id: view - anchors.fill: parent - model: ListModel { id: logModel } - delegate: Text { - font.pixelSize: 14 - color: error ? "red" : "#111" - text: message - } - } -} diff --git a/examples/clog-demo/qml/main.qml b/examples/clog-demo/qml/main.qml index 75e324c..357ad96 100644 --- a/examples/clog-demo/qml/main.qml +++ b/examples/clog-demo/qml/main.qml @@ -9,6 +9,10 @@ Rectangle { objectName: "main" color: "#bbb" + function log(message) { + logPage.addLine(message) + } + SwipeView { id: view objectName: "view" @@ -17,8 +21,8 @@ Rectangle { // page 1: webview (native on mobile) Ext.Browser {} - // page 2: websocket server, log, repl - Ext.Server {} + // page 2: log, repl + Ext.Log { id: logPage } } PageIndicator { @@ -32,7 +36,11 @@ Rectangle { Keys.onPressed: { if(event.key === Qt.Key_Back) { event.accepted = true - view.currentIndex = Math.max(0, view.currentIndex - 1) + if (view.currentIndex === 0) { + Lisp.call("qml:qquit") + } else { + view.currentIndex-- + } } } diff --git a/examples/clog-demo/run.lisp b/examples/clog-demo/run.lisp index 111b814..e498414 100644 --- a/examples/clog-demo/run.lisp +++ b/examples/clog-demo/run.lisp @@ -9,7 +9,8 @@ (push (merge-pathnames "./") asdf:*central-registry*) -(pushnew :interpreter *features*) +(push :interpreter *features*) +(push :clog-loaded *features*) (asdf:operate 'asdf:load-source-op :app) @@ -32,5 +33,3 @@ (when (option "-slime") (load "~/slime/lqml-start-swank")) ; for 'slime-connect' from Emacs - -(clog-demo-1:start-demo)