Use VHS previewWidget for image display

This solves the issue of flickering. Since binary messages must match the format of the existing still iamge previews, careful ordering is required to make sure that any messages are properly intercepted and propagation is candled before an await occurs. The large number of network requests remains annoying, but performance seems otherwise superior now to the video approach.
2024-12-10 15:49:12 -06:00
parent 24de9ef249
commit 0eeb3a4a8d
1 changed files with 49 additions and 36 deletions
@@ -1625,41 +1625,54 @@ app.registerExtension({
                }
            }
        }
-        let previewImages = []
-        let animateInterval
-        api.addEventListener('VHS_latentpreview', ({ detail }) => {
-            let setting = app.ui.settings.getSettingValue("VHS.LatentPreview", 'Disabled')
-            if (setting == 'Disabled') {
-                return
-            }
-            let repeat = setting == 'Continuous'
-            let id = app.runningNodeId
-            if (id == null) {
-                return
-            }
-            //let previewNode = app.graph.getNodeById(id)
-            previewImages = []
-            previewImages.length = detail
-            let displayIndex = 0
-            if (animateInterval) {
-                clearTimeout(animateInterval)
-            }
-            animateInterval = setInterval(() => {
-                if (app.runningNodeId != id || !previewImages[displayIndex]) {
-                    return
-                }
-                app.nodePreviewImages[id] = [previewImages[displayIndex]]
-                displayIndex = (displayIndex + 1) % previewImages.length
-                app.canvas.setDirty(true)
-            }, 1000/8);
-        });
-        api.addEventListener('b_preview', async (e) => {
-            const ab = await e.detail.slice(0,8).arrayBuffer()
-            const index = new DataView(ab).getUint32(4)
-            previewImages[index] = URL.createObjectURL(e.detail.slice(8))
-            e.preventDefault()
-            e.stopImmediatePropagation()
-            return false
-        }, true);
    },
 });
+let previewImages = []
+let animateInterval
+api.addEventListener('VHS_latentpreview', ({ detail }) => {
+    let setting = app.ui.settings.getSettingValue("VHS.LatentPreview", 'Disabled')
+    if (setting == 'Disabled') {
+        return
+    }
+    let repeat = setting == 'Continuous'
+    let id = app.runningNodeId
+    if (id == null) {
+        return
+    }
+    let previewNode = app.graph.getNodeById(id)
+    let previewWidget = previewNode.widgets.find((w) => w.name == 'videopreview') ??
+        _addVideoPreview(previewNode)
+    previewWidget.videoEl.hidden = true
+    previewWidget.imgEl.hidden = false
+    previewImages = []
+    previewImages.length = detail
+    let displayIndex = 0
+    if (animateInterval) {
+        clearTimeout(animateInterval)
+    }
+    animateInterval = setInterval(() => {
+        if (app.runningNodeId != id) {
+            clearTimeout(animateInterval)
+            animateInterval = undefined
+            return
+        }
+        if (!previewImages[displayIndex]) {
+            return
+        }
+        previewWidget.imgEl.src = previewImages[displayIndex]
+        displayIndex = (displayIndex + 1) % previewImages.length
+    }, 1000/8);
+});
+api.addEventListener('b_preview', async (e) => {
+    if (!animateInterval) {
+        return
+    }
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    const ab = await e.detail.slice(0,8).arrayBuffer()
+    const index = new DataView(ab).getUint32(4)
+    URL.revokeObjectURL(previewImages[index])
+    previewImages[index] = URL.createObjectURL(e.detail.slice(8))
+    return false
+}, true);