center image properly

index.html

@@ -194,7 +194,6 @@
             ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
             {indicator: true}
         ));
-        //openmct.install(openmct.plugins.CodeWalkthrough);
         openmct.start();
     </script>
 </html>

package.json

@@ -34,7 +34,7 @@
     "git-rev-sync": "^1.4.0",
     "glob": ">= 3.0.0",
     "html-loader": "^0.5.5",
-    "html2canvas": "^1.0.0-alpha.12",
+    "html2canvas": "^1.0.0-rc.7",
     "imports-loader": "^0.8.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^3.1.0",

src/plugins/LADTable/plugin.js

@@ -30,7 +30,7 @@ export default function plugin() {
         openmct.objectViews.addProvider(new LADTableSetViewProvider(openmct));
 
         openmct.types.addType('LadTable', {
-            name: "Latest Data Table",
+            name: "LAD Table",
             creatable: true,
             description: "A Latest Available Data tabular view in which each row displays the values for one or more contained telemetry objects.",
             cssClass: 'icon-tabular-lad',

src/plugins/codeWalkthrough/plugin.js

@@ -1,63 +0,0 @@
-export default function install(openmct) {
-    openmct.objectViews.addProvider({
-        name: "Data Table",
-        key: "data-table",
-        cssClass: "icon-packet",
-        description: "Tabular view of telemetry",
-        canView(domainObject) {
-            return true;
-        },
-        view(domainObject) {
-            return {
-                async show(element) {
-                    let telemetryMetadata = openmct.telemetry.getMetadata(domainObject).values();
-                    let table = document.createElement('table');
-                    let tableHead = document.createElement('thead');
-                    let tableBody = document.createElement('tbody');
-                    let tableHeadRow = document.createElement('tr');
-
-                    tableHead.appendChild(tableHeadRow);
-                    table.appendChild(tableHead);
-                    table.appendChild(tableBody);
-                    element.appendChild(table);
-
-                    telemetryMetadata.forEach(metadatum => {
-                        let tableHeadCell = document.createElement('td');
-                        tableHeadRow.appendChild(tableHeadCell);
-
-                        tableHeadCell.innerText = metadatum.name;
-                    });
-
-                    async function requestTelemetry() {
-                        let telemetry = await openmct.telemetry.request(domainObject);
-                        telemetry.forEach((datum) => {
-                            let dataRow = document.createElement('tr');
-                            telemetryMetadata.forEach(metadatum => {
-                                let dataCell = document.createElement('td');
-                                let formatter = openmct.telemetry.getValueFormatter(metadatum);
-
-                                let telemetryValue = formatter.format(datum[metadatum.key]);
-                                dataCell.innerText = telemetryValue;
-                                dataRow.appendChild(dataCell);
-                            });
-                            tableBody.appendChild(dataRow);
-                        });
-                    }
-
-                    openmct.time.on('bounds', () => {
-                        tableBody.innerHTML = '';
-                        requestTelemetry();
-                    });
-
-                    requestTelemetry();
-
-                    // openmct.telemetry.subscribe(domainObject, (datum) => {
-                    //     element.innerText = JSON.stringify(datum);
-                    // });
-                },
-                destroy() {
-                }
-            };
-        }
-    });
-}

src/plugins/imagery/components/Compass/Compass.vue

@@ -23,23 +23,20 @@
 <template>
 <div
     class="c-compass"
-    :style="`width: ${ sizedImageDimensions.width }px; height: ${ sizedImageDimensions.height }px`"
+    :style="`width: 100%; height: 100%`"
 >
     <CompassHUD
-        v-if="hasCameraFieldOfView"
         :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
     />
     <CompassRose
-        v-if="hasCameraFieldOfView"
-        :heading="heading"
-        :sized-image-width="sizedImageDimensions.width"
-        :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
-        :lock-compass="lockCompass"
-        @toggle-lock-compass="toggleLockCompass"
+        :compass-rose-sizing-classes="compassRoseSizingClasses"
+        :heading="heading"
+        :sized-image-dimensions="sizedImageDimensions"
+        :sun-heading="sunHeading"
     />
 </div>
 </template>
@@ -56,42 +53,20 @@ export default {
         CompassRose
     },
     props: {
-        containerWidth: {
-            type: Number,
-            required: true
-        },
-        containerHeight: {
-            type: Number,
-            required: true
-        },
-        naturalAspectRatio: {
-            type: Number,
+        compassRoseSizingClasses: {
+            type: String,
             required: true
         },
         image: {
             type: Object,
             required: true
         },
-        lockCompass: {
-            type: Boolean,
+        sizedImageDimensions: {
+            type: Object,
             required: true
         }
     },
     computed: {
-        sizedImageDimensions() {
-            let sizedImageDimensions = {};
-            if ((this.containerWidth / this.containerHeight) > this.naturalAspectRatio) {
-                // container is wider than image
-                sizedImageDimensions.width = this.containerHeight * this.naturalAspectRatio;
-                sizedImageDimensions.height = this.containerHeight;
-            } else {
-                // container is taller than image
-                sizedImageDimensions.width = this.containerWidth;
-                sizedImageDimensions.height = this.containerWidth * this.naturalAspectRatio;
-            }
-
-            return sizedImageDimensions;
-        },
         hasCameraFieldOfView() {
             return this.cameraPan !== undefined && this.cameraAngleOfView > 0;
         },
@@ -110,11 +85,6 @@ export default {
         cameraAngleOfView() {
             return CAMERA_ANGLE_OF_VIEW;
         }
-    },
-    methods: {
-        toggleLockCompass() {
-            this.$emit('toggle-lock-compass');
-        }
     }
 };
 </script>

src/plugins/imagery/components/Compass/CompassHUD.vue

@@ -104,7 +104,10 @@ export default {
         },
         cameraPan: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         }
     },
     computed: {

src/plugins/imagery/components/Compass/CompassRose.vue

@@ -25,22 +25,41 @@
     class="w-direction-rose"
     :class="compassRoseSizingClasses"
 >
-    <div
-        class="c-direction-rose"
-        @click="toggleLockCompass"
+    <div ref="directionRose"
+         class="c-direction-rose"
+         @click="toggleLockCompass"
     >
         <div
             class="c-nsew"
             :style="compassRoseStyle"
         >
-            <svg
-                class="c-nsew__minor-ticks"
-                viewBox="0 0 100 100"
+        </div>
+
+        <div
+            v-if="hasHeading"
+            class="c-spacecraft-body"
+            :style="headingStyle"
+        >
+        </div>
+
+        <div
+            v-if="hasSunHeading"
+            class="c-sun"
+            :style="sunHeadingStyle"
+        ></div>
+
+        <div ref="camField"
+             class="c-cam-field"
+             :style="cameraPanStyle"
+        >
+            <svg ref="camFieldSVG"
+                 viewBox="0 0 100 100"
             >
                 <rect
                     class="c-nsew__tick c-tick-ne"
                     x="49"
                     y="0"
+                    fill="red"
                     width="2"
                     height="5"
                 />
@@ -65,91 +84,14 @@
                     width="5"
                     height="2"
                 />
-
+                <path fill="gray"
+                      d="M50, 50
+                        L30,8
+                        A40 40 0 0 1 70,8
+                        Z
+                        "
+                />
             </svg>
-
-            <svg
-                class="c-nsew__ticks"
-                viewBox="0 0 100 100"
-            >
-                <polygon
-                    class="c-nsew__tick c-tick-n"
-                    points="50,0 60,10 40,10"
-                />
-                <rect
-                    class="c-nsew__tick c-tick-e"
-                    x="95"
-                    y="49"
-                    width="5"
-                    height="2"
-                />
-                <rect
-                    class="c-nsew__tick c-tick-w"
-                    x="0"
-                    y="49"
-                    width="5"
-                    height="2"
-                />
-                <rect
-                    class="c-nsew__tick c-tick-s"
-                    x="49"
-                    y="95"
-                    width="2"
-                    height="5"
-                />
-
-                <text
-                    class="c-nsew__label c-label-n"
-                    text-anchor="middle"
-                    :transform="northTextTransform"
-                >N</text>
-                <text
-                    class="c-nsew__label c-label-e"
-                    text-anchor="middle"
-                    :transform="eastTextTransform"
-                >E</text>
-                <text
-                    class="c-nsew__label c-label-w"
-                    text-anchor="middle"
-                    :transform="southTextTransform"
-                >W</text>
-                <text
-                    class="c-nsew__label c-label-s"
-                    text-anchor="middle"
-                    :transform="westTextTransform"
-                >S</text>
-            </svg>
-        </div>
-
-        <div
-            v-if="hasHeading"
-            class="c-spacecraft-body"
-            :style="headingStyle"
-        >
-        </div>
-
-        <div
-            v-if="hasSunHeading"
-            class="c-sun"
-            :style="sunHeadingStyle"
-        ></div>
-
-        <div
-            class="c-cam-field"
-            :style="cameraPanStyle"
-        >
-            <div class="cam-field-half cam-field-half-l">
-                <div
-                    class="cam-field-area"
-                    :style="cameraFOVStyleLeftHalf"
-                ></div>
-            </div>
-            <div class="cam-field-half cam-field-half-r">
-                <div
-                    class="cam-field-area"
-                    :style="cameraFOVStyleRightHalf"
-                ></div>
-            </div>
         </div>
     </div>
 </div>
@@ -157,16 +99,20 @@
 
 <script>
 import { rotate } from './utils';
+import { throttle } from 'lodash';
 
 export default {
     props: {
-        sizedImageWidth: {
-            type: Number,
+        compassRoseSizingClasses: {
+            type: String,
             required: true
         },
         heading: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         },
         sunHeading: {
             type: Number,
@@ -178,26 +124,22 @@ export default {
         },
         cameraPan: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         },
-        lockCompass: {
-            type: Boolean,
+        sizedImageDimensions: {
+            type: Object,
             required: true
         }
     },
+    data() {
+        return {
+            lockCompass: true
+        };
+    },
     computed: {
-        compassRoseSizingClasses() {
-            let compassRoseSizingClasses = '';
-            if (this.sizedImageWidth < 300) {
-                compassRoseSizingClasses = '--rose-small --rose-min';
-            } else if (this.sizedImageWidth < 500) {
-                compassRoseSizingClasses = '--rose-small';
-            } else if (this.sizedImageWidth > 1000) {
-                compassRoseSizingClasses = '--rose-max';
-            }
-
-            return compassRoseSizingClasses;
-        },
         compassRoseStyle() {
             return { transform: `rotate(${ this.north }deg)` };
         },
@@ -273,9 +215,29 @@ export default {
             };
         }
     },
+    watch: {
+        sizedImageDimensions() {
+            this.debounceResizeSvg();
+        }
+    },
+    mounted() {
+        this.debounceResizeSvg = throttle(this.resizeSvg, 100);
+
+        this.$nextTick(() => {
+            this.debounceResizeSvg();
+        });
+    },
     methods: {
+        resizeSvg() {
+            const svg = this.$refs.camFieldSVG;
+            svg.setAttribute('width', this.$refs.camField.clientWidth);
+            svg.setAttribute('height', this.$refs.camField.clientHeight);
+        },
+        rotateSVG() {
+            this.$refs.camField.style.transform = "rotate(45deg)";
+        },
         toggleLockCompass() {
-            this.$emit('toggle-lock-compass');
+            this.lockCompass = !this.lockCompass;
         }
     }
 };

src/plugins/imagery/components/Compass/compass.scss

@@ -12,9 +12,8 @@ $elemBg: rgba(black, 0.7);
 .c-compass {
     pointer-events: none; // This allows the image element to receive a browser-level context click
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    left: 0%;
+    top: 0%;
     z-index: 1;
     @include userSelectNone;
 }
@@ -121,7 +120,6 @@ $elemBg: rgba(black, 0.7);
 /***************************** CAMERA FIELD ANGLE */
 .c-cam-field {
     $color: white;
-    opacity: 0.3;
     top: 0;
     right: 0;
     bottom: 0;

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -55,28 +55,33 @@
                 ></a>
             </span>
         </div>
-        <div class="c-imagery__main-image__bg"
+        <div ref="imageBG"
+             class="c-imagery__main-image__bg"
              :class="{'paused unnsynced': isPaused,'stale':false }"
         >
-            <img
-                ref="focusedImage"
-                class="c-imagery__main-image__image js-imageryView-image"
-                :src="imageUrl"
-                :style="{
-                    'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
-                }"
-                :data-openmct-image-timestamp="time"
-                :data-openmct-object-keystring="keyString"
+            <div class="image-wrapper"
+                 :style="{
+                     'width': `${sizedImageDimensions.width}px`,
+                     'height': `${sizedImageDimensions.height}px`
+                 }"
             >
-            <Compass
-                v-if="shouldDisplayCompass"
-                :container-width="imageContainerWidth"
-                :container-height="imageContainerHeight"
-                :natural-aspect-ratio="focusedImageNaturalAspectRatio"
-                :image="focusedImage"
-                :lock-compass="lockCompass"
-                @toggle-lock-compass="toggleLockCompass"
-            />
+                <img ref="focusedImage"
+                     class="c-imagery__main-image__image js-imageryView-image"
+                     :src="imageUrl"
+                     :style="{
+                         'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
+                     }"
+                     :data-openmct-image-timestamp="time"
+                     :data-openmct-object-keystring="keyString"
+                >
+                <Compass
+                    v-if="shouldDisplayCompass"
+                    :compass-rose-sizing-classes="compassRoseSizingClasses"
+                    :image="focusedImage"
+                    :natural-aspect-ratio="focusedImageNaturalAspectRatio"
+                    :sized-image-dimensions="sizedImageDimensions"
+                />
+            </div>
         </div>
         <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
             <button class="c-nav c-nav--prev"
@@ -224,6 +229,18 @@ export default {
         };
     },
     computed: {
+        compassRoseSizingClasses() {
+            let compassRoseSizingClasses = '';
+            if (this.sizedImageDimensions.width < 300) {
+                compassRoseSizingClasses = '--rose-small --rose-min';
+            } else if (this.sizedImageDimensions.width < 500) {
+                compassRoseSizingClasses = '--rose-small';
+            } else if (this.sizedImageDimensions.width > 1000) {
+                compassRoseSizingClasses = '--rose-max';
+            }
+
+            return compassRoseSizingClasses;
+        },
         time() {
             return this.formatTime(this.focusedImage);
         },
@@ -347,6 +364,20 @@ export default {
             }
 
             return isFresh;
+        },
+        sizedImageDimensions() {
+            let sizedImageDimensions = {};
+            if ((this.imageContainerWidth / this.imageContainerHeight) > this.focusedImageNaturalAspectRatio) {
+                // container is wider than image
+                sizedImageDimensions.width = this.imageContainerHeight * this.focusedImageNaturalAspectRatio;
+                sizedImageDimensions.height = this.imageContainerHeight;
+            } else {
+                // container is taller than image
+                sizedImageDimensions.width = this.imageContainerWidth;
+                sizedImageDimensions.height = this.imageContainerWidth * this.focusedImageNaturalAspectRatio;
+            }
+
+            return sizedImageDimensions;
         }
     },
     watch: {
@@ -395,7 +426,7 @@ export default {
         _.debounce(this.resizeImageContainer, 400);
 
         this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
-        this.imageContainerResizeObserver.observe(this.$refs.focusedImage);
+        this.imageContainerResizeObserver.observe(this.$refs.imageBG);
 
         // For adjusting scroll bar size and position when resizing thumbs wrapper
         this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
@@ -833,12 +864,12 @@ export default {
             }, { once: true });
         },
         resizeImageContainer() {
-            if (this.$refs.focusedImage.clientWidth !== this.imageContainerWidth) {
-                this.imageContainerWidth = this.$refs.focusedImage.clientWidth;
+            if (this.$refs.imageBG.clientWidth !== this.imageContainerWidth) {
+                this.imageContainerWidth = this.$refs.imageBG.clientWidth;
             }
 
-            if (this.$refs.focusedImage.clientHeight !== this.imageContainerHeight) {
-                this.imageContainerHeight = this.$refs.focusedImage.clientHeight;
+            if (this.$refs.imageBG.clientHeight !== this.imageContainerHeight) {
+                this.imageContainerHeight = this.$refs.imageBG.clientHeight;
             }
         },
         handleThumbWindowResizeStart() {
@@ -858,9 +889,6 @@ export default {
             this.$nextTick(() => {
                 this.resizingWindow = false;
             });
-        },
-        toggleLockCompass() {
-            this.lockCompass = !this.lockCompass;
         }
     }
 };

src/plugins/imagery/components/imagery-view-layout.scss

@@ -22,6 +22,9 @@
         &__bg {
             background-color: $colorPlotBg;
             border: 1px solid transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             flex: 1 1 auto;
             height: 0;
 
@@ -33,7 +36,6 @@
         &__image {
             height: 100%;
             width: 100%;
-            object-fit: contain;
         }
     }
 

src/plugins/plugins.js

@@ -65,8 +65,7 @@ define([
     './interceptors/plugin',
     './performanceIndicator/plugin',
     './CouchDBSearchFolder/plugin',
-    './timeline/plugin',
-    './codeWalkthrough/plugin'
+    './timeline/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -112,8 +111,7 @@ define([
     ObjectInterceptors,
     PerformanceIndicator,
     CouchDBSearchFolder,
-    Timeline,
-    CodeWalkthrough
+    Timeline
 ) {
     const bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -214,7 +212,6 @@ define([
     plugins.PerformanceIndicator = PerformanceIndicator.default;
     plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
     plugins.Timeline = Timeline.default;
-    plugins.CodeWalkthrough = CodeWalkthrough.default;
 
     return plugins;
 });