diff --git a/API.md b/API.md index 3ce36a60d8..39bdae95e6 100644 --- a/API.md +++ b/API.md @@ -430,6 +430,7 @@ Known hints: * `domain`: Values with a `domain` hint will be used for the x-axis of a plot, and tables will render columns for these values first. * `range`: Values with a `range` hint will be used as the y-axis on a plot, and tables will render columns for these values after the `domain` values. * `image`: Indicates that the value may be interpreted as the URL to an image file, in which case appropriate views will be made available. +* `imageDownloadName`: Indicates that the value may be interpreted as the name of the image file. ##### The Time Conductor and Telemetry diff --git a/example/imagery/plugin.js b/example/imagery/plugin.js index 78930aa53b..d76c6cd095 100644 --- a/example/imagery/plugin.js +++ b/example/imagery/plugin.js @@ -50,11 +50,16 @@ define([ const IMAGE_DELAY = 20000; function pointForTimestamp(timestamp, name) { + const url = IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length]; + const urlItems = url.split('/'); + const imageDownloadName = `example.imagery.${urlItems[urlItems.length - 1]}`; + return { - name: name, + name, utc: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY, local: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY, - url: IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length] + url, + imageDownloadName }; } @@ -139,6 +144,14 @@ define([ hints: { image: 1 } + }, + { + name: 'Image Download Name', + key: 'imageDownloadName', + format: 'imageDownloadName', + hints: { + imageDownloadName: 1 + } } ] }; diff --git a/src/plugins/imagery/components/ImageryViewLayout.vue b/src/plugins/imagery/components/ImageryViewLayout.vue index 037a18728e..f6125dd827 100644 --- a/src/plugins/imagery/components/ImageryViewLayout.vue +++ b/src/plugins/imagery/components/ImageryViewLayout.vue @@ -135,9 +135,14 @@ :class="{ selected: focusedImageIndex === index && isPaused }" @click="setFocusedImage(index, thumbnailClick)" > - + +
{{ image.formattedTime }}
@@ -218,6 +223,9 @@ export default { canTrackDuration() { return this.openmct.time.clock() && this.timeSystem.isUTCBased; }, + focusedImageDownloadName() { + return this.getImageDownloadName(this.focusedImage); + }, isNextDisabled() { let disabled = false; @@ -345,6 +353,7 @@ export default { this.imageHints = { ...this.metadata.valuesForHints(['image'])[0] }; this.durationFormatter = this.getFormatter(this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER); this.imageFormatter = this.openmct.telemetry.getValueFormatter(this.imageHints); + this.imageDownloadNameHints = { ...this.metadata.valuesForHints(['imageDownloadName'])[0]}; // related telemetry keys this.spacecraftPositionKeys = ['positionX', 'positionY', 'positionZ']; @@ -532,6 +541,15 @@ export default { // Replace ISO "T" with a space to allow wrapping return dateTimeStr.replace("T", " "); }, + getImageDownloadName(datum) { + let imageDownloadName = ''; + if (datum) { + const key = this.imageDownloadNameHints.key; + imageDownloadName = datum[key]; + } + + return imageDownloadName; + }, parseTime(datum) { if (!datum) { return; @@ -655,6 +673,7 @@ export default { image.formattedTime = this.formatTime(datum); image.url = this.formatImageUrl(datum); image.time = datum[this.timeKey]; + image.imageDownloadName = this.getImageDownloadName(datum); this.imageHistory.push(image); @@ -777,6 +796,9 @@ export default { this.focusedImageNaturalAspectRatio = undefined; const img = this.$refs.focusedImage; + if (!img) { + return; + } // TODO - should probably cache this img.addEventListener('load', () => {