Start the UI transition from ScanList to Gallery
This commit is contained in:
Julian Stirling
parent
d358d89334
commit
5f6b54247d
5 changed files with 71 additions and 76 deletions
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<div class="uk-card">
|
||||
<div class="uk-card-body">
|
||||
<div class="uk-card-media-top">
|
||||
<div class="view-image uk-padding-remove uk-height-1-1">
|
||||
<img
|
||||
id="thumbnail-stitched-image"
|
||||
class="thumbnail-fit"
|
||||
:src="thumbnailPath"
|
||||
onerror="this.src = '/titleiconpink.svg'"
|
||||
@click="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">
|
||||
<action-button
|
||||
class="uk-width-1-2"
|
||||
thing="smart_scan"
|
||||
action="download_zip"
|
||||
submit-label="Download All"
|
||||
:can-terminate="false"
|
||||
:submit-data="{ scan_name: itemData.name }"
|
||||
:button-primary="true"
|
||||
@response="downloadZipFile"
|
||||
@error="modalError"
|
||||
/>
|
||||
<EndpointButton
|
||||
class="uk-width-1-2"
|
||||
:button-primary="true"
|
||||
:is-disabled="!itemData.stitch_available"
|
||||
:url="downloadStitchFile"
|
||||
button-label="Download JPEG"
|
||||
/>
|
||||
</div>
|
||||
<button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
|
||||
<action-button
|
||||
v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
|
||||
submit-label="Stitch Images"
|
||||
thing="smart_scan"
|
||||
action="stitch_scan"
|
||||
:can-terminate="true"
|
||||
:submit-data="{ scan_name: itemData.name }"
|
||||
:button-primary="false"
|
||||
:modal-progress="true"
|
||||
@error="modalError"
|
||||
/>
|
||||
<button
|
||||
v-if="itemData.dzi"
|
||||
class="uk-button uk-button-default uk-width-1-1"
|
||||
@click="requestViewer"
|
||||
>
|
||||
Show Stitched Scan
|
||||
</button>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<ul>
|
||||
<li>{{ itemData.number_of_images }} images</li>
|
||||
<li>Created: {{ formatDate(itemData.created) }}</li>
|
||||
<li>Duration: {{ formatDuration(itemData.duration) }}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-if="itemData.number_of_images < 3" class="warning-msg">
|
||||
Not enough images to stitch
|
||||
</li>
|
||||
<li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
|
||||
Interactive preview not available
|
||||
</li>
|
||||
<li v-else-if="!itemData.stitch_available" class="alert-msg">
|
||||
High quality stitch not available
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import actionButton from "../../labThingsComponents/actionButton.vue";
|
||||
import EndpointButton from "../../labThingsComponents/endpointButton.vue";
|
||||
import { mapState } from "pinia";
|
||||
import { useSettingsStore } from "@/stores/settings.js";
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: "GalleryCard",
|
||||
components: {
|
||||
actionButton,
|
||||
EndpointButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
itemData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ["viewer-requested", "update-requested"],
|
||||
|
||||
computed: {
|
||||
...mapState(useSettingsStore, ["baseUri"]),
|
||||
downloadStitchFile() {
|
||||
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}`;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(timestamp) {
|
||||
// Multiply by 1000 as JS uses ms not s
|
||||
let d = new Date(timestamp * 1000);
|
||||
// Convert to a string in a very javascript way!
|
||||
let yyyy = d.getFullYear();
|
||||
let mm = d.getMonth() + 1;
|
||||
let dd = d.getDate();
|
||||
let HH = d.getHours().toString().padStart(2, "0");
|
||||
let MM = d.getMinutes().toString().padStart(2, "0");
|
||||
return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
|
||||
},
|
||||
formatDuration(duration) {
|
||||
if (duration == null || isNaN(duration)) return "Not known";
|
||||
|
||||
const h = Math.floor(duration / 3600);
|
||||
const m = Math.floor((duration % 3600) / 60);
|
||||
const s = Math.floor(duration % 60);
|
||||
|
||||
const m_pad = String(m).padStart(2, "0");
|
||||
const s_pad = String(s).padStart(2, "0");
|
||||
|
||||
if (h > 0) return `${h}h ${m_pad}m ${s_pad}s`;
|
||||
if (m > 0) return `${m_pad}m ${s_pad}s`;
|
||||
return `${s_pad}s`;
|
||||
},
|
||||
requestViewer() {
|
||||
// Notify parent that thumbnail was clicked
|
||||
this.$emit("viewer-requested", this.itemData);
|
||||
},
|
||||
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}`);
|
||||
this.$emit("update-requested");
|
||||
this.modalNotify(`Deleted ${this.itemData.name}`);
|
||||
} catch (e) {
|
||||
// if the confirmation was cancelled, it's rejected with null error
|
||||
if (e) this.modalError(e);
|
||||
}
|
||||
},
|
||||
async downloadZipFile(response) {
|
||||
const scan_name = response.input.scan_name;
|
||||
const filename = `${scan_name}_images.zip`;
|
||||
const url = response.output.href;
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute("download", filename);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
ul {
|
||||
display: block;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
margin: 5px 0 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.warning-msg {
|
||||
color: red;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.alert-msg {
|
||||
color: orange;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gallery-card-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-card-title {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div ref="osdViewerContainer" class="osd-viewer-container uk-height-1-1">
|
||||
<div id="openseadragon" ref="osdContainer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OpenSeaDragon from "openseadragon";
|
||||
import { useIntersectionObserver } from "@vueuse/core";
|
||||
|
||||
export default {
|
||||
name: "OpenSeadragonViewer",
|
||||
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
brightness: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
contrast: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
saturation: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ["entering-fullscreen"],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
osdViewer: null,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
src: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.loadOpenSeaDragon(newVal);
|
||||
},
|
||||
},
|
||||
brightness() {
|
||||
this.updateFilter();
|
||||
},
|
||||
contrast() {
|
||||
this.updateFilter();
|
||||
},
|
||||
saturation() {
|
||||
this.updateFilter();
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
useIntersectionObserver(
|
||||
this.$refs.osdViewerContainer,
|
||||
([{ isIntersecting }]) => {
|
||||
this.visibilityChanged(isIntersecting);
|
||||
},
|
||||
{ threshold: 0.0 },
|
||||
);
|
||||
|
||||
if (this.src) {
|
||||
this.loadOpenSeaDragon(this.src);
|
||||
}
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
// Remove global signal listener to perform a gallery refresh
|
||||
if (this.osdViewer) {
|
||||
this.osdViewer.destroy();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
visibilityChanged(isVisible) {
|
||||
// adding this check to avoid error when the viewer is not yet initialized.
|
||||
if (isVisible) {
|
||||
if (!this.osdViewer && this.src) {
|
||||
this.loadOpenSeaDragon(this.src);
|
||||
}
|
||||
} else {
|
||||
// Don't destroy if viewer is in fullscreen
|
||||
if (this.osdViewer && !this.osdViewer.isFullPage()) {
|
||||
this.osdViewer.destroy();
|
||||
this.osdViewer = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async loadOpenSeaDragon() {
|
||||
if (this.osdViewer) {
|
||||
this.osdViewer.destroy();
|
||||
}
|
||||
await this.$nextTick();
|
||||
this.osdViewer = OpenSeaDragon({
|
||||
element: this.$refs.osdContainer,
|
||||
crossOriginPolicy: "Anonymous",
|
||||
tileSources: this.src,
|
||||
showNavigationControl: false,
|
||||
maxZoomPixelRatio: 2,
|
||||
gestureSettingsMouse: {
|
||||
clickToZoom: false,
|
||||
},
|
||||
});
|
||||
|
||||
this.updateFilter();
|
||||
},
|
||||
|
||||
updateFilter() {
|
||||
const viewerEl = this.$refs.osdContainer;
|
||||
if (viewerEl) {
|
||||
viewerEl.style.filter = `
|
||||
brightness(${this.brightness})
|
||||
contrast(${this.contrast})
|
||||
saturate(${this.saturation})
|
||||
`;
|
||||
}
|
||||
},
|
||||
openFullscreen() {
|
||||
if (this.osdViewer) {
|
||||
// Alert the modal we are about to enter fullscreen so it can prevent closing.
|
||||
this.$emit("entering-fullscreen");
|
||||
// Wait a bit for DOM to resize
|
||||
this.$nextTick(() => {
|
||||
this.osdViewer.setFullScreen(true);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#openseadragon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div id="scan-modal" ref="scanModal" uk-modal>
|
||||
<div v-if="selectedScan" id="scan-modal-body" class="uk-modal-dialog uk-modal-body">
|
||||
<h2 id="scan-modal-title" class="uk-modal-title">
|
||||
{{ selectedScan.name }}
|
||||
<button class="uk-modal-close uk-float-right" type="button">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
<button class="uk-float-right" type="button" @click="goFullscreen">
|
||||
<span class="material-symbols-outlined">fullscreen</span>
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<!-- Viewer -->
|
||||
<div v-if="selectedScanDZI" id="viewer_container" class="viewer_container">
|
||||
<OpenSeadragonViewer
|
||||
id="openseadragon"
|
||||
ref="openseadragon"
|
||||
:src="selectedScanDZI"
|
||||
:brightness="brightness"
|
||||
:contrast="contrast"
|
||||
:saturation="saturation"
|
||||
@entering-fullscreen="enteringFullscreen = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div v-if="selectedScanDZI" class="viewer-controls">
|
||||
<div class="controlsContainer">
|
||||
<label>
|
||||
Brightness
|
||||
<input v-model.number="brightness" type="range" min="0.2" max="1.8" step="0.01" />
|
||||
</label>
|
||||
<label>
|
||||
Contrast
|
||||
<input v-model.number="contrast" type="range" min="0.2" max="1.8" step="0.01" />
|
||||
</label>
|
||||
<label>
|
||||
Saturation
|
||||
<input v-model.number="saturation" type="range" min="0" max="2" step="0.01" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="uk-button uk-button-default reset-button"
|
||||
@click="resetFilters"
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UIkit from "uikit";
|
||||
import OpenSeadragonViewer from "./openSeadragonViewer.vue";
|
||||
|
||||
export default {
|
||||
name: "ScanViewerModal",
|
||||
components: {
|
||||
OpenSeadragonViewer,
|
||||
},
|
||||
props: {
|
||||
selectedScan: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
brightness: 1,
|
||||
contrast: 1,
|
||||
saturation: 1,
|
||||
enteringFullscreen: false,
|
||||
modalEl: null,
|
||||
beforeHideHandler: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedScanDZI() {
|
||||
if (this.selectedScan && this.selectedScan.dzi) {
|
||||
return `${this.baseUri}/data/smart_scan/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.modalEl = this.$refs.scanModal;
|
||||
this.beforeHideHandler = (event) => {
|
||||
if (this.enteringFullscreen) {
|
||||
event.preventDefault();
|
||||
this.enteringFullscreen = false;
|
||||
}
|
||||
};
|
||||
this.modalEl.addEventListener("beforehide", this.beforeHideHandler);
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.modalEl && this.beforeHideHandler) {
|
||||
this.modalEl.removeEventListener("beforehide", this.beforeHideHandler);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
UIkit.modal(this.$refs.scanModal).show();
|
||||
},
|
||||
hide() {
|
||||
UIkit.modal(this.$refs.scanModal).hide();
|
||||
},
|
||||
goFullscreen() {
|
||||
this.$refs.openseadragon.openFullscreen();
|
||||
},
|
||||
resetFilters() {
|
||||
this.brightness = 1;
|
||||
this.contrast = 1;
|
||||
this.saturation = 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input[type="range"] {
|
||||
pointer-events: auto;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#scan-modal {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#scan-modal-body {
|
||||
padding: 10px;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#scan-modal-title {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.controlsContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.viewer_container {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue