Add basic WebAssembly target support

README.md

@@ -39,6 +39,20 @@ Building from source:
     $ make -j
     $ ./Pilorama
 
+### WebAssembly
+
+Qt for WebAssembly build requires the Emscripten toolchain and a Qt installation
+compiled with WebAssembly support. After installing those dependencies, the app
+can be built with:
+
+    $ emcmake cmake ../src -DQT_HOST_PATH=/path/to/qt
+    $ make -j
+
+The resulting `Pilorama.html` can be served from any HTTP server. Note that the
+WebAssembly build disables the system tray icon. The preset import/export
+buttons remain visible but are disabled with tooltips until filesystem access
+is implemented.
+
 
 ## Development / Code of Conduct 
 #### Release Process

src/Components/ExternalDrop.qml

@@ -45,12 +45,15 @@ Item{
         onExited: {
                 externalDrop.validFile = false
         }
-        onDropped: if (drop.hasText) {
+        onDropped: if (Qt.platform.os !== "wasm" && drop.hasText) {
             if (drop.proposedAction == Qt.MoveAction || drop.proposedAction == Qt.CopyAction) {
 
-                masterModel.data = fileDialogue.openFile(drop.text).data
-                masterModel.title = fileDialogue.openFile(drop.text).title
-                masterModel.load()
+                var file = fileDialogue.item ? fileDialogue.item.openFile(drop.text) : null
+                if (file) {
+                    masterModel.data = file.data
+                    masterModel.title = file.title
+                    masterModel.load()
+                }
 
                 drop.acceptProposedAction()
                 externalDrop.validFile = false

src/Components/Icon.qml

@@ -7,6 +7,8 @@ Text {
     property int size: 24
     property string source
     property bool propagateComposedEvents: true
+    property bool enabled: true
+    property alias containsMouse: iconMouse.containsMouse
 
     signal pressed()
     signal released()
@@ -18,12 +20,17 @@ Text {
     font.pixelSize: size
     renderType: Text.NativeRendering
     color: colors.getColor('light')
+    opacity: enabled ? 1.0 : 0.3
+    hoverEnabled: true
 
     Behavior on color { ColorAnimation { duration: 80 } }
 
     MouseArea {
+       id: iconMouse
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
+       enabled: icon.enabled
+       hoverEnabled: true
        propagateComposedEvents: parent.propagateComposedEvents
        onReleased: parent.released()
        onPressed: parent.pressed()

src/Components/Preferences.qml

@@ -54,6 +54,7 @@ Item {
 
         PreferenceItem {
             id: closeOnQuit
+            visible: Qt.platform.os !== "wasm"
             cellHeight: preferences.cellHeight
             fontSize: preferences.fontSize
             checked: !window.quitOnClose

src/Components/Sequence/Footer.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import QtQuick.Controls
 import ".."
 
 Rectangle {
@@ -101,8 +102,12 @@ Rectangle {
         glyph: "\uea0b"
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
+        enabled: Qt.platform.os !== "wasm"
 
-        onReleased: { fileDialogue.openDialogue() }
+        ToolTip.visible: !loadButton.enabled && loadButton.containsMouse
+        ToolTip.text: qsTr("Import not supported in WebAssembly build")
+
+        onReleased: { if (fileDialogue.item) fileDialogue.item.openDialogue() }
 
     }
 
@@ -111,8 +116,12 @@ Rectangle {
         glyph: "\uea07"
         anchors.left: loadButton.right
         anchors.verticalCenter: parent.verticalCenter
+        enabled: Qt.platform.os !== "wasm"
+
+        ToolTip.visible: !saveButton.enabled && saveButton.containsMouse
+        ToolTip.text: qsTr("Export not supported in WebAssembly build")
 
-        onReleased: { fileDialogue.saveDialogue() }
+        onReleased: { if (fileDialogue.item) fileDialogue.item.saveDialogue() }
 
     }
 }

src/FileDialogue.qml

@@ -11,11 +11,13 @@ Item{
     property var title: masterModel.title
 
     function openDialogue(){
-        openFileDialog.open()
+        if (Qt.platform.os !== "wasm")
+            openFileDialog.open()
     }
 
     function saveDialogue(){
-        saveFileDialog.open()
+        if (Qt.platform.os !== "wasm")
+            saveFileDialog.open()
     }
 
     function getTitle(url){
@@ -24,13 +26,19 @@ Item{
     }
 
     function openFile(url) {
+        if (Qt.platform.os === "wasm")
+            return { title: "", data: "" }
+
         var request = new XMLHttpRequest();
         request.open("GET", url, false);
         request.send(null)
         return { "title" : getTitle(url) , "data": request.responseText }
     }
 
     function saveFile(url) {
+        if (Qt.platform.os === "wasm")
+            return ""
+
         var request = new XMLHttpRequest();
         request.open("PUT", url, true); // async false created empty files on macos
         request.send(masterModel.data);
@@ -39,6 +47,7 @@ Item{
 
     FileDialog {
         id: openFileDialog
+        visible: Qt.platform.os !== "wasm"
         nameFilters: ["JSON files (*.json)"]
         currentFolder: StandardPaths.writableLocation(StandardPaths.DesktopLocation)
 
@@ -51,6 +60,7 @@ Item{
 
     FileDialog {
         id: saveFileDialog
+        visible: Qt.platform.os !== "wasm"
         fileMode: FileDialog.SaveFile
         nameFilters: ["JSON files (*.json)"]
         defaultSuffix : 'json'

src/FileDialogueStub.qml

@@ -0,0 +1,9 @@
+import QtQuick
+
+QtObject {
+    // Stub for platforms without file system access
+    function openDialogue() {}
+    function saveDialogue() {}
+    function openFile(url) { return { title: "", data: "" } }
+    function saveFile(url) { return "" }
+}

src/NotificationSystem.qml

@@ -33,12 +33,13 @@ QtObject {
 
     function sendWithSound(name) {
         soundNotification.play();
-        tray.send(name)
+        if (tray.item && tray.item.send)
+            tray.item.send(name)
     }
 
     function sendFromItem(item) {
         sendWithSound(masterModel.get(item.id).name)
-        if (appSettings.showOnSegmentStart)
-            tray.popUp()
+        if (appSettings.showOnSegmentStart && tray.item && tray.item.popUp)
+            tray.item.popUp()
     }
 }

src/TrayIconStub.qml

@@ -0,0 +1,7 @@
+import QtQuick
+
+QtObject {
+    // Stub for platforms without system tray support
+    function send(name) {}
+    function popUp() {}
+}

src/main.cpp

@@ -45,8 +45,10 @@ int main(int argc, char *argv[])
 
     engine.rootContext()->setContextProperty("MacOSController", &macOSController);
 
-	qputenv("QML_XHR_ALLOW_FILE_WRITE", QByteArray("1"));
-	qputenv("QML_XHR_ALLOW_FILE_READ", QByteArray("1"));
+#ifndef Q_OS_WASM
+    qputenv("QML_XHR_ALLOW_FILE_WRITE", QByteArray("1"));
+    qputenv("QML_XHR_ALLOW_FILE_READ", QByteArray("1"));
+#endif
 
     engine.load(url);
 

src/main.qml

@@ -82,8 +82,7 @@ ApplicationWindow {
                 if (appSettings.showInDock) {
                     MacOSController.hideFromDock()
                 }
-            }
-            else {
+            } else if (Qt.platform.os !== "wasm") {
                 window.visibility = ApplicationWindow.Minimized;
             }
         }
@@ -183,8 +182,9 @@ ApplicationWindow {
         durationSettings: durationSettings
     }
 
-    TrayIcon {
+    Loader {
         id: tray
+        source: Qt.platform.os === "wasm" ? "TrayIconStub.qml" : "TrayIcon.qml"
     }
 
     NotificationSystem {
@@ -199,8 +199,9 @@ ApplicationWindow {
         id: clock
     }
 
-    FileDialogue {
+    Loader {
         id: fileDialogue
+        source: Qt.platform.os === "wasm" ? "FileDialogueStub.qml" : "FileDialogue.qml"
     }
 
     QtObject {

src/qml.qrc

@@ -27,7 +27,9 @@
         <file>PiloramaTimer.qml</file>
         <file>MouseTracker.qml</file>
         <file>TrayIcon.qml</file>
+        <file>TrayIconStub.qml</file>
         <file>FileDialogue.qml</file>
+        <file>FileDialogueStub.qml</file>
         <file>MasterModel.qml</file>
         <file>ModelBurner.qml</file>
         <file>Components/Colors.qml</file>