rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui_migration bugfix(component) add debug url and fallback pixel DOM for JPEG_STREAM at beforeUnmount to drop streams

Browse source
This commit is contained in:
Antonio Anaya 2026-06-03 19:19:03 -06:00
parent 22444af143
commit 8fb445bcbf
3 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
webapp/src/components/genericComponents/miniStreamDisplay.vue
View file

@ -5,7 +5,7 @@
class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget" class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
> >
<img <img
v-show="isVisible && streamEnabled" v-show="isVisible && streamEnabled "
ref="click-frame" ref="click-frame"
class="uk-align-center uk-margin-remove-bottom" class="uk-align-center uk-margin-remove-bottom"
:src="streamImgUri" :src="streamImgUri"
@ -50,10 +50,13 @@ export default {
return this.ready && !this.disableStream; return this.ready && !this.disableStream;
}, },
streamImgUri: function () { streamImgUri: function () {
// Only request the real stream if it's enabled AND currently visible on screen // FIX: Require BOTH visibility AND the enabled state
if (this.isVisible) { if (this.isVisible && this.streamEnabled) {
return `${this.baseUri}/camera/mjpeg_stream`; const url = new URL(`${this.baseUri}/camera/mjpeg_stream`);
url.searchParams.append("debugId", this.streamId);
return url.toString();
} }
// Force the browser to kill the connection by loading a 1 pixel image // Force the browser to kill the connection by loading a 1 pixel image
return ONE_PIXEL_FALLBACK; return ONE_PIXEL_FALLBACK;
}, },
@ -91,6 +94,10 @@ export default {
this.stopIntersectionObserver(); this.stopIntersectionObserver();
} }
this.store.removeStream(this.streamId); this.store.removeStream(this.streamId);
const imgElement = this.$refs["click-frame"];
if (imgElement) {
imgElement.src = ONE_PIXEL_FALLBACK;
}
}, },
}; };
</script> </script>

3
webapp/src/components/tabContentComponents/actionTab.vue
View file

@ -53,7 +53,7 @@ mode.
</div> </div>
<div v-if="taskStarted"> <div v-if="taskStarted">
<h2 v-if="taskInfoTitle" style="text-align: center">{{ taskInfoTitle }}</h2> <h2 v-if="taskInfoTitle" style="text-align: center">{{ taskInfoTitle }}</h2>
<mini-stream-display v-if="taskInfoStream" /> <mini-stream-display v-if="taskInfoStream" :stream-id="setStreamId" />
<action-log-display id="log-display" :log="log" :task-status="taskStatus" /> <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
<div class="uk-width-1-1 uk-flex uk-flex-center"> <div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-width-2-3"> <div class="uk-width-2-3">
@ -141,6 +141,7 @@ export default {
progress: null, progress: null,
log: [], log: [],
pollTimer: null, pollTimer: null,
setStreamId: this.$options.name,
}; };
}, },

10
webapp/src/components/tabContentComponents/streamContent.vue
View file

@ -69,14 +69,16 @@ export default {
streamEnabled: function () { streamEnabled: function () {
return this.ready && !this.disableStream; return this.ready && !this.disableStream;
}, },
thisStreamOpen: function () { streamOpen: function () {
// Only a single MJPEG connection should be open at a time // Only a single MJPEG connection should be open at a time
return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0); return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
}, },
streamImgUri: function () { streamImgUri: function () {
// Only request the real stream if it's enabled AND currently visible on screen // Only request the real stream if it's enabled AND currently visible on screen
if (this.isVisible && this.streamEnabled) { if (this.isVisible && this.streamEnabled) {
return `${this.baseUri}/camera/mjpeg_stream`; const url = new URL(`${this.baseUri}/camera/mjpeg_stream`);
url.searchParams.append("debugId", this.streamId);
return url.toString();
} }
// Force the browser to kill the connection by loading a 1 pixel image // Force the browser to kill the connection by loading a 1 pixel image
@ -141,6 +143,10 @@ export default {
this.sizeObserver.disconnect(); this.sizeObserver.disconnect();
this.store.removeStream(this.streamId); this.store.removeStream(this.streamId);
} }
const imgElement = this.$refs["click-frame"];
if (imgElement) {
imgElement.src = ONE_PIXEL_FALLBACK;
}
}, },
methods: { methods: {