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

Add a toggle switch for image capture to gallery

Browse source
This commit is contained in:
Julian Stirling 2026-05-23 19:29:58 +01:00
parent 2bcc98094f
commit af18850c41
3 changed files with 190 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

64
webapp/src/components/tabContentComponents/controlComponents/captureControl.vue Normal file
View file

@ -0,0 +1,64 @@
<template>
<div id="captureControl">
<p><b>Image Capture</b></p>
<toggle-switch
v-model="saveToGallery"
label-text="Save to Gallery?"
on-label="Saving"
off-label="Downloading"
/>
<div class="uk-margin">
<action-button
thing="camera"
action="capture"
:submit-data="{ capture_mode: 'standard' }"
submit-label="Capture"
:submit-on-event="'globalCaptureEvent'"
@response="handleCaptureResponse"
@error="modalError"
/>
</div>
</div>
</template>
<script>
import axios from "axios";
import toggleSwitch from "@/components/genericComponents/toggleSwitch.vue";
import ActionButton from "@/components/labThingsComponents/actionButton.vue";
export default {
name: "CaptureControl",
components: {
toggleSwitch,
ActionButton,
},
data: function () {
return {
saveToGallery: true,
};
},
methods: {
handleCaptureResponse: async function (response) {
// Retrieve the captured image and save it
let imageUri = response.output.href;
if (!imageUri) {
this.modalError("No image URI returned from capture task.");
return;
}
// To save the returned data, we make a virtual link and click it
let imageResponse = await axios.get(imageUri, { responseType: "blob" });
const url = window.URL.createObjectURL(new Blob([imageResponse.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", `OFM_${new Date().toISOString()}.jpeg`);
document.body.appendChild(link);
link.click();
},
},
};
</script>

43
webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
View file

@ -2,34 +2,20 @@
<div id="paneControl" class="uk-padding-small">
<positionControl v-if="stageAvailable" />
<autofocusControl v-if="autofocusAvailable" />
<p>Image Capture</p>
<div class="uk-margin">
<action-button
thing="camera"
action="capture"
:submit-data="{ capture_mode: 'standard' }"
submit-label="Capture"
:submit-on-event="'globalCaptureEvent'"
@response="handleCaptureResponse"
@error="modalError"
/>
</div>
<captureControl />
</div>
</template>
<script>
import axios from "axios";
import ActionButton from "../../labThingsComponents/actionButton.vue";
import captureControl from "./captureControl.vue";
import positionControl from "./positionControl.vue";
import autofocusControl from "./autofocusControl.vue";
import { eventBus } from "../../../eventBus.js";
export default {
name: "PaneControl",
components: {
ActionButton,
captureControl,
positionControl,
autofocusControl,
},
@ -42,28 +28,5 @@ export default {
return this.thingAvailable("autofocus");
},
},
methods: {
handleCaptureResponse: async function (response) {
// Retrieve the captured image and save it
let imageUri = response.output.href;
if (!imageUri) {
this.modalError("No image URI returned from capture task.");
return;
}
// Emit flash capture stream animation
eventBus.emit("globalFlashStream");
// To save the returned data, we make a virtual link and click it
let imageResponse = await axios.get(imageUri, { responseType: "blob" });
const url = window.URL.createObjectURL(new Blob([imageResponse.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", `OFM_${new Date().toISOString()}.jpeg`);
document.body.appendChild(link);
link.click();
},
},
};
</script>