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"
>
<img
v-show="isVisible && streamEnabled"
v-show="isVisible && streamEnabled "
ref="click-frame"
class="uk-align-center uk-margin-remove-bottom"
:src="streamImgUri"
@ -50,10 +50,13 @@ export default {
return this.ready && !this.disableStream;
},
streamImgUri: function () {
// Only request the real stream if it's enabled AND currently visible on screen
if (this.isVisible) {
return `${this.baseUri}/camera/mjpeg_stream`;
// FIX: Require BOTH visibility AND the enabled state
if (this.isVisible && this.streamEnabled) {
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
return ONE_PIXEL_FALLBACK;
},
@ -91,6 +94,10 @@ export default {
this.stopIntersectionObserver();
}
this.store.removeStream(this.streamId);
const imgElement = this.$refs["click-frame"];
if (imgElement) {
imgElement.src = ONE_PIXEL_FALLBACK;
}
},
};
</script>

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

@ -53,7 +53,7 @@ mode.
</div>
<div v-if="taskStarted">
<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" />
<div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-width-2-3">
@ -141,6 +141,7 @@ export default {
progress: null,
log: [],
pollTimer: null,
setStreamId: this.$options.name,
};
},

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

@ -69,14 +69,16 @@ export default {
streamEnabled: function () {
return this.ready && !this.disableStream;
},
thisStreamOpen: function () {
streamOpen: function () {
// Only a single MJPEG connection should be open at a time
return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
},
streamImgUri: function () {
// Only request the real stream if it's enabled AND currently visible on screen
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
@ -141,6 +143,10 @@ export default {
this.sizeObserver.disconnect();
this.store.removeStream(this.streamId);
}
const imgElement = this.$refs["click-frame"];
if (imgElement) {
imgElement.src = ONE_PIXEL_FALLBACK;
}
},
methods: {