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

Start showing images in gallery (requires tidy)

Browse source
This commit is contained in:
Julian Stirling 2026-06-04 17:30:28 +01:00
parent 1e12900506
commit 5a07721fc2
6 changed files with 123 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

25
webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
View file

@ -5,17 +5,17 @@
<div class="view-image uk-padding-remove uk-height-1-1">
<img
id="thumbnail-stitched-image"
:class="[itemData?.dzi ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']"
:class="[viewerAvailable ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']"
class="thumbnail-fit"
:src="thumbnailPath"
onerror="this.src = '/titleiconpink.svg'"
@click="itemData?.dzi && requestViewer()"
@click="viewerAvailable && requestViewer()"
/>
</div>
</div>
<h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
<div class="button-container">
<div class="uk-button-group gallery-card-buttons">
<div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
<action-button
class="uk-width-1-2"
thing="smart_scan"
@ -55,7 +55,7 @@
Show Stitched Scan
</button>
</div>
<div class="item-info">
<div v-if="itemData.card_type === 'Scan'" class="item-info">
<ul>
<li>{{ itemData.number_of_images }} images</li>
<li>Created: {{ formatDate(itemData.created) }}</li>
@ -107,7 +107,14 @@ export default {
return `${this.baseUri}/smart_scan/get_stitch/${this.itemData.name}`;
},
thumbnailPath() {
return `${this.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=${this.itemData.name}&modified=${this.itemData.modified}`;
if (this.itemData.card_type === "Scan") {
return `${this.baseUri}/smart_scan/scans/stitched_thumbnail.jpg?scan_name=${this.itemData.name}&modified=${this.itemData.modified}`;
}
return `${this.baseUri}/data/${this.itemData.thing}/${this.itemData.name}`;
},
viewerAvailable() {
if (this.itemData.card_type === "Scan") return Boolean(this.itemData?.dzi);
return true;
},
},
@ -144,7 +151,13 @@ export default {
async deleteScan() {
try {
await this.modalConfirm(`Are you sure you want to delete ${this.itemData.name}?`);
await axios.delete(`${this.baseUri}/smart_scan/scans/${this.itemData.name}`);
if (this.itemData.card_type === "Scan") {
await axios.delete(`${this.baseUri}/smart_scan/scans/${this.itemData.name}`);
} else {
await axios.delete(
`${this.baseUri}/${this.itemData.thing}/capture/${this.itemData.name}`,
);
}
this.$emit("update-requested");
this.modalNotify(`Deleted ${this.itemData.name}`);
} catch (e) {

2
webapp/src/components/tabContentComponents/galleryComponents/openSeadragonViewer.vue
View file

@ -13,7 +13,7 @@ export default {
props: {
src: {
type: String,
type: [String, Object],
required: true,
},
brightness: {

23
webapp/src/components/tabContentComponents/galleryComponents/scanViewer.vue
View file

@ -1,8 +1,8 @@
<template>
<div id="scan-modal" ref="scanModal" uk-modal>
<div v-if="selectedScan" id="scan-modal-body" class="uk-modal-dialog uk-modal-body">
<div v-if="selectedItem" id="scan-modal-body" class="uk-modal-dialog uk-modal-body">
<h2 id="scan-modal-title" class="uk-modal-title">
{{ selectedScan.name }}
{{ selectedItem.name }}
<button class="uk-modal-close uk-float-right" type="button">
<span class="material-symbols-outlined">close</span>
</button>
@ -12,11 +12,11 @@
</h2>
<!-- Viewer -->
<div v-if="selectedScanDZI" id="viewer_container" class="viewer_container">
<div v-if="imageSource" id="viewer_container" class="viewer_container">
<OpenSeadragonViewer
id="openseadragon"
ref="openseadragon"
:src="selectedScanDZI"
:src="imageSource"
:brightness="brightness"
:contrast="contrast"
:saturation="saturation"
@ -25,7 +25,7 @@
</div>
<!-- Controls -->
<div v-if="selectedScanDZI" class="viewer-controls">
<div v-if="imageSource" class="viewer-controls">
<div class="controlsContainer">
<label>
Brightness
@ -63,7 +63,7 @@ export default {
OpenSeadragonViewer,
},
props: {
selectedScan: {
selectedItem: {
type: Object,
default: null,
},
@ -79,9 +79,14 @@ export default {
};
},
computed: {
selectedScanDZI() {
if (this.selectedScan && this.selectedScan.dzi) {
return `${this.baseUri}/data/smart_scan/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
imageSource() {
if (this.selectedItem?.card_type === "Scan" && this.selectedItem?.dzi) {
return `${this.baseUri}/data/smart_scan/${this.selectedItem.name}/images/${this.selectedItem.dzi}`;
} else if (this.selectedItem?.card_type === "Capture") {
return {
type: "image",
url: `${this.baseUri}/data/${this.selectedItem.thing}/${this.selectedItem.name}`,
};
}
return null;
},

27
webapp/src/components/tabContentComponents/galleryContent.vue
View file

@ -41,7 +41,7 @@
</div>
</nav>
<ScanViewerModal ref="scanViewer" :selected-scan="selectedScan" :base-uri="baseUri" />
<ScanViewerModal ref="scanViewer" :selected-item="selectedItem" :base-uri="baseUri" />
<!-- Gallery -->
<div v-if="ready" class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
@ -54,7 +54,7 @@
<div v-for="itemData in paginatedItems" :key="itemData.id">
<gallery-card
:item-data="itemData"
@viewer-requested="showScan"
@viewer-requested="showItem"
@update-requested="refreshGallery"
/>
</div>
@ -95,7 +95,7 @@ export default {
data: function () {
return {
all_items: [],
selectedScan: null,
selectedItem: null,
osdViewer: null,
currentPage: 1,
itemsPerPage: 18,
@ -112,9 +112,9 @@ export default {
noItems() {
return !this.all_items || this.all_items?.length === 0;
},
selectedScanDZI() {
if (this.selectedScan && this.selectedScan.dzi != "") {
return `${this.baseUri}/data/smart_scan/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
selectedItemDZI() {
if (this.selectedItem && this.selectedItem.dzi != "") {
return `${this.baseUri}/data/smart_scan/${this.selectedItem.name}/images/${this.selectedItem.dzi}`;
} else {
return null;
}
@ -209,12 +209,17 @@ export default {
if (e) this.modalError(e);
}
},
showScan(scan) {
if (scan.dzi) {
this.selectedScan = scan;
this.$refs.scanViewer.show();
showItem(itemData) {
if (itemData.card_type === "Scan") {
if (itemData.dzi) {
this.selectedItem = itemData;
this.$refs.scanViewer.show();
} else {
this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
}
} else {
this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
this.selectedItem = itemData;
this.$refs.scanViewer.show();
}
},
changePage(page) {