Add JavaScript <-> C++ interop example

7d93eacf · Morten Sorvig · ac8f28a3 · 7d93eacf · 7d93eacf · 7d93eacf
Commit 7d93eacf authored 1 year ago by Morten Sorvig
--- a/examples/javascript_interop/index.html
+++ b/examples/javascript_interop/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>JavaScript Interop</title>
+
+    <script src="../testapp/testapp.js"></script>
+    <script src="../testapp/qtloader.js"></script>
+    <script>
+
+        // JavaScript function which can be called from C++, see
+        // ../testapp/jsinterop.cpp
+        function helloJs(name) {
+            console.log("Hello " + name + " from helloJs");
+        }
+        
+        // A pice of data, can be accessed from C++ as well
+        window.data = new Uint8Array([1, 2, 3 ,4]);
+        
+        window.addEventListener('load', async () => {
+            const qtloader = QtLoader({
+                containerElements: [document.getElementById("container")],
+                showCanvas: () => {
+
+                    // This example does provide a UI. Instead, enable the "Call C++"
+                    // button which calls the function exported from jsinterop.cpp.
+                    const callCppButton = document.getElementById("callcpp");
+                    callCppButton.disabled = false;
+                    callCppButton.addEventListener("click", () => {
+                        qtloader.module()["helloCpp"]("Qt");
+                    });
+                },
+            });
+            qtloader.loadEmscriptenModule("../testapp/testapp");
+        })
+    </script>
+  </head>
+  <body>
+      <h1>Qt for WebAssembly: JavaScript Interop</h1>
+      <p> This examples show how to call C++ functions from JavaScript,
+          and vice versa. Output is printed to the JavaScript console.</p>
+      <button type="button" disabled="true" id="callcpp" disabled>Call C++ function</button>
+      <div id="container" style="width:320px; height:200px; visibility:hidden"></div>
+  </body>
+</html>
--- a/examples/testapp/CMakeLists.txt
+++ b/examples/testapp/CMakeLists.txt
@@ -6,7 +6,11 @@ set(CMAKE_AUTOMOC ON)
 find_package(Qt6 REQUIRED COMPONENTS Core Gui)

 qt_add_executable(testapp
-    main.cpp rasterwindow.cpp ../../qtwebutils.cpp popup.cpp
+    main.cpp
+    rasterwindow.cpp
+    popup.cpp
+    jsinterop.cpp
+    ../../qtwebutils.cpp
 )

 target_link_libraries(testapp PUBLIC

--- a/examples/testapp/jsinterop.cpp
+++ b/examples/testapp/jsinterop.cpp
+#include <QtCore>
+#include <algorithm>
+#include <emscripten/bind.h>
+#include <emscripten/val.h>
+
+// This example demonstrates how to interop with JavaScript code
+// and data from C++ using Emscripten bind.h and val.h.
+
+// Sample C++ function. This function is exported to JavaScript using
+// EMSCRIPTEN_BINDINGS below.
+void helloCpp(std::string name)
+{
+    qDebug() << "Hello" << QString::fromStdString(name) << "from helloCpp";
+
+    // Call JS function. See defenition in ../examples/jsinterop/jsinterop.cpp
+    // The function is accessed via the global "window" object.
+    emscripten::val window = emscripten::val::global("window");
+    window.call<void>("helloJs", name);
+
+    // Copy data from a JavaScript Array. This copies from the
+    // JavaScript heap to the C++ heap.
+    QByteArray data = QByteArray::fromEcmaUint8Array(window["data"]);
+    qDebug() << "Got data bytes" << QString::number(data[0]) << QString::number(data[1])
+                                 << QString::number(data[2]) << QString::number(data[3]);
+
+    // Clear Js-side data, if we don't want to hold a copy there
+    window.set("data", emscripten::val::null());
+    
+    // Or assign back to it
+    std::reverse(data.begin(), data.end());
+    window.set("data", data.toEcmaUint8Array());
+}
+
+EMSCRIPTEN_BINDINGS(qt_webutils) {
+    emscripten::function("helloCpp", &helloCpp);
+}