Update system time as part of starting image acquisition (#590)

ethanjli · web-flow · commit 20a9e0a947a8 · 2025-05-07T14:19:01.000-07:00
This PR resolves #507. TODOs: - [x] Try to achieve a single-button-press UX - [x] Implement a ridiculous workaround (20-second delay between changing system time and starting image acquisition) for eclipse-mosquitto/mosquitto#2205 + node-red/node-red#2864 (Node-RED's MQTT client disconnects for ~15 sec when system time changes) - [x] Try to reduce the MQTT reconnection interval for Node-RED from 15 sec to 1 sec - [x] Update the planktoscopehat dashboard to match changes in the adafruithat dashboard - [x] Update the changelog
diff --git a/software/CHANGELOG.md b/software/CHANGELOG.md
@@ -18,6 +18,7 @@ All dates in this file are given in the [UTC time zone](https://en.wikipedia.org
 
 ### Changed
 
+- (Breaking change; Application: GUI) When you press the "Start Acquisition" button in the Node-RED dashboard, it now automatically adjusts the PlanktoScope's system time to match the time in your web browser (but still in UTC time zone on the PlanktoScope) if the times are different by more than one minute, so that datasets will be created with correct dates in the dataset directory structure.
 - (Breaking change; System) The official PlanktoScope OS images are now built on Raspberry Pi OS 12 (bookworm) instead of Raspberry Pi OS 11 (bullseye). No support will be given for running the PlanktoScope OS setup scripts on bullseye base images, and the OS setup scripts will not work on bullseye.
 - (Application: GUI) The Node-RED dashboard now initializes the Sample page's Dilution Factor field to 1.0, instead of leaving it empty.
 - (System: networking) Wi-Fi hotspot behavior and network connection management is now based on NetworkManager, as part of an upgrade to Raspberry Pi OS 12 (bookworm). As part of this change the previous autohotspot service has been removed, as it's redundant with functionality now provided by NetworkManager.
diff --git a/software/node-red-dashboard/adafruithat/flows.json b/software/node-red-dashboard/adafruithat/flows.json
@@ -4872,32 +4872,6 @@
             []
         ]
     },
-    {
-        "id": "4b489713.ccde5",
-        "type": "ui_button",
-        "z": "baa1e3d9.cb29d",
-        "name": "",
-        "group": "4322c187.e73e5",
-        "order": 12,
-        "width": 5,
-        "height": 1,
-        "passthru": false,
-        "label": "Start Acquisition",
-        "tooltip": "",
-        "color": "",
-        "bgcolor": "",
-        "icon": "camera",
-        "payload": "",
-        "payloadType": "str",
-        "topic": "imager/image",
-        "x": 460,
-        "y": 480,
-        "wires": [
-            [
-                "c9f510c0.7d1328"
-            ]
-        ]
-    },
     {
         "id": "c9f510c0.7d1328",
         "type": "function",
@@ -4935,6 +4909,7 @@
         "ok": "OK",
         "cancel": "",
         "raw": false,
+        "className": "",
         "topic": "",
         "name": "",
         "x": 950,
@@ -4951,6 +4926,11 @@
         "topic": "",
         "qos": "",
         "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
         "broker": "8dc3722c.06efa8",
         "x": 1150,
         "y": 440,
@@ -4970,10 +4950,12 @@
         "tooltip": "",
         "color": "",
         "bgcolor": "#AD1625",
+        "className": "",
         "icon": "cancel",
         "payload": "{\"action\":\"stop\"}",
         "payloadType": "json",
         "topic": "imager/image",
+        "topicType": "str",
         "x": 460,
         "y": 520,
         "wires": [
@@ -5093,7 +5075,7 @@
         "payloadType": "str",
         "topic": "imager/image",
         "topicType": "str",
-        "x": 460,
+        "x": 680,
         "y": 440,
         "wires": [
             [
@@ -5844,6 +5826,29 @@
             ]
         ]
     },
+    {
+        "id": "f4caa15e2bbfd6e7",
+        "type": "ui_template",
+        "z": "baa1e3d9.cb29d",
+        "group": "4322c187.e73e5",
+        "name": "Start Acquisition",
+        "order": 13,
+        "width": "5",
+        "height": "1",
+        "format": "<button class=\"md-raised md-button\" type=\"button\" ng-click=\"startAcquisition()\" style=\"z-index: 1; padding: 1em; width: 100%;\">\n    <span>Start Acquisition</span>\n</button>\n\n<script>\n    (function(scope) {\n        scope.startAcquisition = async function() {\n            const systemTime = await getSystemTime();\n            if (systemTime !== undefined && isDrifted(new Date(systemTime.timestamp))) {\n                await setSystemTime((new Date()).getTime());\n                // Changing the system time seems to trigger a MQTT client\n                // disconnection+reconnection in Node-RED, and the duration of\n                // disconnection is controlled by a reconnection interval in\n                // Node-RED's settings.js file:\n                await new Promise(resolve => setTimeout(resolve, 2000));\n            }\n            scope.send({topic: 'imager/image'});\n        }\n        \n        async function getSystemTime() {\n            const response = await fetch('/ps/node-red-v2/api/system-time', {method: 'GET'});\n            if (!response.ok) {\n                alert(`Couldn't check whether system time is accurate (HTTP error ${response.status}); press OK to continue anyways...`);\n                return undefined;\n            }\n            try {\n                const result = await response.json();\n                if (!('timestamp' in result)) {\n                    // TODO: emit a notification toast message instead\n                    alert('Couldn\\'t check whether system time is accurate (invalid JSON object in response body); press OK to continue anyways...');\n                    return undefined;\n                }\n                return result;\n            } catch (e) {\n                // TODO: emit a notification toast message instead\n                alert('Couldn\\'t check whether system time is accurate (unable to parse response body as JSON); press OK to continue anyways...');\n                return undefined;\n            }\n        }\n        function isDrifted(systemTime) {\n            const browserTime = (new Date()).getTime();\n            const drift = Math.abs(browserTime - systemTime);\n            const threshold = 1000 * 60; // 1 minute\n            return drift >= threshold;\n        }\n        async function setSystemTime(timestamp) {\n            const response = await fetch('/ps/node-red-v2/api/system-time', {\n                method: 'POST',\n                headers: {'Content-Type': 'application/json; charset=UTF-8'},\n                body: JSON.stringify({timestamp: timestamp}),\n            });\n            if (!response.ok) {\n                // TODO: emit a notification toast message instead\n                alert('We might have failed to update the system time to match the time in your web browser; press OK to continue anyways...');\n                return;\n            }\n        }\n    })(scope);\n</script>",
+        "storeOutMessages": false,
+        "fwdInMessages": false,
+        "resendOnRefresh": false,
+        "templateScope": "local",
+        "className": "",
+        "x": 460,
+        "y": 480,
+        "wires": [
+            [
+                "c9f510c0.7d1328"
+            ]
+        ]
+    },
     {
         "id": "9d6abe67.6bb3d",
         "type": "ui_button",
@@ -8230,7 +8235,8 @@
         "wires": [
             [
                 "19a45f972be2b0f1",
-                "07bbdca8d6153210"
+                "07bbdca8d6153210",
+                "595df18543c8328e"
             ]
         ]
     },
@@ -8292,6 +8298,67 @@
             []
         ]
     },
+    {
+        "id": "c8be8dad272e1fa5",
+        "type": "http in",
+        "z": "1371dec5.76e671",
+        "name": "GET /api/system-time",
+        "url": "/api/system-time",
+        "method": "get",
+        "upload": false,
+        "swaggerDoc": "",
+        "x": 120,
+        "y": 420,
+        "wires": [
+            [
+                "0f4ce59587fa14e1"
+            ]
+        ]
+    },
+    {
+        "id": "0f4ce59587fa14e1",
+        "type": "function",
+        "z": "1371dec5.76e671",
+        "name": "Get system time",
+        "func": "var date = new Date();\nmsg.payload = {'timestamp': date.getTime()};\nreturn msg",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 340,
+        "y": 420,
+        "wires": [
+            [
+                "433d48a4b1bc0b27"
+            ]
+        ]
+    },
+    {
+        "id": "433d48a4b1bc0b27",
+        "type": "http response",
+        "z": "1371dec5.76e671",
+        "name": "Send GET response",
+        "statusCode": "",
+        "headers": {
+            "Content-Type": "application/json; charset=UTF-8"
+        },
+        "x": 620,
+        "y": 420,
+        "wires": []
+    },
+    {
+        "id": "595df18543c8328e",
+        "type": "http response",
+        "z": "1371dec5.76e671",
+        "name": "Send POST response",
+        "statusCode": "",
+        "headers": {},
+        "x": 620,
+        "y": 300,
+        "wires": []
+    },
     {
         "id": "1fdf77b5.24e4e",
         "type": "mqtt in",
diff --git a/software/node-red-dashboard/planktoscopehat/flows.json b/software/node-red-dashboard/planktoscopehat/flows.json
@@ -5066,32 +5066,6 @@
             []
         ]
     },
-    {
-        "id": "4b489713.ccde5",
-        "type": "ui_button",
-        "z": "baa1e3d9.cb29d",
-        "name": "",
-        "group": "4322c187.e73e5",
-        "order": 12,
-        "width": 5,
-        "height": 1,
-        "passthru": false,
-        "label": "Start Acquisition",
-        "tooltip": "",
-        "color": "",
-        "bgcolor": "",
-        "icon": "camera",
-        "payload": "",
-        "payloadType": "str",
-        "topic": "imager/image",
-        "x": 420,
-        "y": 440,
-        "wires": [
-            [
-                "c9f510c0.7d1328"
-            ]
-        ]
-    },
     {
         "id": "c9f510c0.7d1328",
         "type": "function",
@@ -6015,6 +5989,29 @@
             ]
         ]
     },
+    {
+        "id": "37116281279b9b82",
+        "type": "ui_template",
+        "z": "baa1e3d9.cb29d",
+        "group": "4322c187.e73e5",
+        "name": "Start Acquisition",
+        "order": 12,
+        "width": "5",
+        "height": "1",
+        "format": "<button class=\"md-raised md-button\" type=\"button\" ng-click=\"startAcquisition()\" style=\"z-index: 1; padding: 1em; width: 100%;\">\n    <span>Start Acquisition</span>\n</button>\n\n<script>\n    (function(scope) {\n        scope.startAcquisition = async function() {\n            const systemTime = await getSystemTime();\n            if (systemTime !== undefined && isDrifted(new Date(systemTime.timestamp))) {\n                await setSystemTime((new Date()).getTime());\n                // Changing the system time seems to trigger a MQTT client\n                // disconnection+reconnection in Node-RED, and the duration of\n                // disconnection is controlled by a reconnection interval in\n                // Node-RED's settings.js file:\n                await new Promise(resolve => setTimeout(resolve, 2000));\n            }\n            scope.send({topic: 'imager/image'});\n        }\n        \n        async function getSystemTime() {\n            const response = await fetch('/ps/node-red-v2/api/system-time', {method: 'GET'});\n            if (!response.ok) {\n                alert(`Couldn't check whether system time is accurate (HTTP error ${response.status}); press OK to continue anyways...`);\n                return undefined;\n            }\n            try {\n                const result = await response.json();\n                if (!('timestamp' in result)) {\n                    // TODO: emit a notification toast message instead\n                    alert('Couldn\\'t check whether system time is accurate (invalid JSON object in response body); press OK to continue anyways...');\n                    return undefined;\n                }\n                return result;\n            } catch (e) {\n                // TODO: emit a notification toast message instead\n                alert('Couldn\\'t check whether system time is accurate (unable to parse response body as JSON); press OK to continue anyways...');\n                return undefined;\n            }\n        }\n        function isDrifted(systemTime) {\n            const browserTime = (new Date()).getTime();\n            const drift = Math.abs(browserTime - systemTime);\n            const threshold = 1000 * 60; // 1 minute\n            return drift >= threshold;\n        }\n        async function setSystemTime(timestamp) {\n            const response = await fetch('/ps/node-red-v2/api/system-time', {\n                method: 'POST',\n                headers: {'Content-Type': 'application/json; charset=UTF-8'},\n                body: JSON.stringify({timestamp: timestamp}),\n            });\n            if (!response.ok) {\n                // TODO: emit a notification toast message instead\n                alert('We might have failed to update the system time to match the time in your web browser; press OK to continue anyways...');\n                return;\n            }\n        }\n    })(scope);\n</script>",
+        "storeOutMessages": false,
+        "fwdInMessages": false,
+        "resendOnRefresh": false,
+        "templateScope": "local",
+        "className": "",
+        "x": 420,
+        "y": 440,
+        "wires": [
+            [
+                "c9f510c0.7d1328"
+            ]
+        ]
+    },
     {
         "id": "9d6abe67.6bb3d",
         "type": "ui_button",
@@ -8088,7 +8085,8 @@
         "y": 340,
         "wires": [
             [
-                "1c4113d4c933fd4b"
+                "1c4113d4c933fd4b",
+                "423659c62bae0524"
             ]
         ]
     },
@@ -8152,6 +8150,67 @@
             []
         ]
     },
+    {
+        "id": "3822b843fda94733",
+        "type": "http in",
+        "z": "1371dec5.76e671",
+        "name": "GET /api/system-time",
+        "url": "/api/system-time",
+        "method": "get",
+        "upload": false,
+        "swaggerDoc": "",
+        "x": 120,
+        "y": 420,
+        "wires": [
+            [
+                "5b0a65d3fe187424"
+            ]
+        ]
+    },
+    {
+        "id": "5b0a65d3fe187424",
+        "type": "function",
+        "z": "1371dec5.76e671",
+        "name": "Get system time",
+        "func": "var date = new Date();\nmsg.payload = {'timestamp': date.getTime()};\nreturn msg",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 340,
+        "y": 420,
+        "wires": [
+            [
+                "312a15407574b38e"
+            ]
+        ]
+    },
+    {
+        "id": "423659c62bae0524",
+        "type": "http response",
+        "z": "1371dec5.76e671",
+        "name": "Send POST response",
+        "statusCode": "",
+        "headers": {},
+        "x": 620,
+        "y": 300,
+        "wires": []
+    },
+    {
+        "id": "312a15407574b38e",
+        "type": "http response",
+        "z": "1371dec5.76e671",
+        "name": "Send GET response",
+        "statusCode": "",
+        "headers": {
+            "Content-Type": "application/json; charset=UTF-8"
+        },
+        "x": 620,
+        "y": 420,
+        "wires": []
+    },
     {
         "id": "1fdf77b5.24e4e",
         "type": "mqtt in",
diff --git a/software/node-red-dashboard/settings.js b/software/node-red-dashboard/settings.js
