alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Support thumbnails in ImageryView and ImageryTimeView (#6132)

Browse Source 
* fix: get image thumbnail formatter

* refactor: ImageryView cleanup

* docs: add comment

* feat: Support thumbnails in ImageryView

- Prefer an image's thumbnail URL if its available

* feat: Support thumbnails in ImageryTimeView

* refactor: rename variable

* test(WIP): add thumbnail unit test, not working yet

* test: temp disable test

* feat: imagery thumbnail urls for example imagery

* test: add unit test for imagery thumbnails

* test(e2e): check for thumbnail urls

- Update imagery view tests to check for use of thumbnail urls
This commit is contained in:
Jesse Mazzella
2023-01-21 11:25:35 -08:00
committed by GitHub
parent 986c596d90
commit 5e530aa625
8 changed files with 166 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/plugins/imagery/components/ImageryView.vue
View File

@@ -171,7 +171,7 @@
>
<ImageThumbnail
v-for="(image, index) in imageHistory"
:key="image.url + image.time"
:key="`${image.thumbnailUrl || image.url}${image.time}`"
:image="image"
:active="focusedImageIndex === index"
:selected="focusedImageIndex === index && isPaused"
@@ -225,6 +225,9 @@ const SHOW_THUMBS_FULLSIZE_THRESHOLD_HEIGHT = 600;
const IMAGE_CONTAINER_BORDER_WIDTH = 1;
const DEFAULT_IMAGE_PAN_ALT_TEXT = "Alt drag to pan";
const LINUX_IMAGE_PAN_ALT_TEXT = `Ctrl+${DEFAULT_IMAGE_PAN_ALT_TEXT}`;
export default {
name: 'ImageryView',
components: {
@@ -308,8 +311,8 @@ export default {
},
focusImageStyles() {
return {
'filter': `brightness(${this.filters.brightness}%) contrast(${this.filters.contrast}%)`,
'background-image':
filter: `brightness(${this.filters.brightness}%) contrast(${this.filters.contrast}%)`,
backgroundImage:
`${this.imageUrl ? (
`url(${this.imageUrl}),
repeating-linear-gradient(
@@ -320,10 +323,10 @@ export default {
rgba(125,125,125,.2) 8px
)`
) : ''}`,
'transform': `scale(${this.zoomFactor}) translate(${this.imageTranslateX}px, ${this.imageTranslateY}px)`,
'transition': `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`,
'width': `${this.sizedImageWidth}px`,
'height': `${this.sizedImageHeight}px`
transform: `scale(${this.zoomFactor}) translate(${this.imageTranslateX}px, ${this.imageTranslateY}px)`,
transition: `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`,
width: `${this.sizedImageWidth}px`,
height: `${this.sizedImageHeight}px`
};
},
time() {
@@ -334,11 +337,12 @@ export default {
},
imageWrapperStyle() {
return {
'cursor-zoom-in': this.cursorStates.showCursorZoomIn,
'cursor-zoom-out': this.cursorStates.showCursorZoomOut,
'pannable': this.cursorStates.isPannable,
'paused unnsynced': this.isPaused && !this.isFixed,
'stale': false
cursorZoomIn: this.cursorStates.showCursorZoomIn,
cursorZoomOut: this.cursorStates.showCursorZoomOut,
pannable: this.cursorStates.isPannable,
paused: this.isPaused && !this.isFixed,
unsynced: this.isPaused && !this.isFixed,
stale: false
};
},
isImageNew() {
@@ -515,10 +519,10 @@ export default {
const navigator = window.navigator.userAgent;
if (regexLinux.test(navigator)) {
return 'Ctrl+Alt drag to pan';
return LINUX_IMAGE_PAN_ALT_TEXT;
}
return 'Alt drag to pan';
return DEFAULT_IMAGE_PAN_ALT_TEXT;
},
viewableArea() {
if (this.zoomFactor === 1) {
@@ -679,9 +683,9 @@ export default {
},
getVisibleLayerStyles(layer) {
return {
'background-image': `url(${layer.source})`,
'transform': `scale(${this.zoomFactor}) translate(${this.imageTranslateX}px, ${this.imageTranslateY}px)`,
'transition': `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`
backgroundImage: `url(${layer.source})`,
transform: `scale(${this.zoomFactor}) translate(${this.imageTranslateX}px, ${this.imageTranslateY}px)`,
transition: `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`
};
},
setTimeContext() {
@@ -759,26 +763,26 @@ export default {
return mostRecent[valueKey];
},
loadVisibleLayers() {
const metaDataValues = this.metadata.valuesForHints(['image'])[0];
this.imageFormat = this.openmct.telemetry.getValueFormatter(metaDataValues);
let layersMetadata = metaDataValues.layers;
if (layersMetadata) {
this.layers = layersMetadata;
if (this.domainObject.configuration) {
let persistedLayers = this.domainObject.configuration.layers;
layersMetadata.forEach((layer) => {
const persistedLayer = persistedLayers.find(object => object.name === layer.name);
if (persistedLayer) {
layer.visible = persistedLayer.visible === true;
}
});
this.visibleLayers = this.layers.filter(layer => layer.visible);
} else {
this.visibleLayers = [];
this.layers.forEach((layer) => {
layer.visible = false;
});
}
const layersMetadata = this.imageMetadataValue.layers;
if (!layersMetadata) {
return;
}
this.layers = layersMetadata;
if (this.domainObject.configuration) {
const persistedLayers = this.domainObject.configuration.layers;
layersMetadata.forEach((layer) => {
const persistedLayer = persistedLayers.find(object => object.name === layer.name);
if (persistedLayer) {
layer.visible = persistedLayer.visible === true;
}
});
this.visibleLayers = this.layers.filter(layer => layer.visible);
} else {
this.visibleLayers = [];
this.layers.forEach((layer) => {
layer.visible = false;
});
}
},
persistVisibleLayers() {