mirror of
https://github.com/nasa/openmct.git
synced 2025-01-10 15:02:53 +00:00
8e8c66280f
Add history imagery under large imagery view. Allow users to click on history imagery thumbs to set main image and pause the imagery view. Allow users to unpause and continue imagery stream. Users can adjust the height of the imagery panes, and the user selected height is persisted.
70 lines
3.1 KiB
HTML
70 lines
3.1 KiB
HTML
<div class="t-imagery" ng-controller="ImageryController as imagery">
|
|
<mct-split-pane class='abs' anchor="bottom" alias="imagery">
|
|
<div class="split-pane-component l-image-main-wrapper l-flex-col"
|
|
ng-mouseenter="showLocalControls = true;"
|
|
ng-mouseleave="showLocalControls = false;">
|
|
<div class="l-local-controls s-local-controls s-wrapper-transluc l-flex-row"
|
|
ng-class="{ 'hide-nice': !showLocalControls }">
|
|
<span class="holder flex-elem grows">
|
|
<input class="icon-brightness" type="range"
|
|
min="0"
|
|
max="500"
|
|
ng-model="filters.brightness">
|
|
</input>
|
|
<input class="icon-contrast" type="range"
|
|
min="0"
|
|
max="500"
|
|
ng-model="filters.contrast">
|
|
</input>
|
|
</span>
|
|
<span class="holder flex-elem t-reset-btn-holder">
|
|
<a class="s-icon-button icon-reset t-btn-reset"
|
|
ng-click="filters = { brightness: 100, contrast: 100 }"></a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="l-image-main s-image-main flex-elem grows"
|
|
ng-class="{ paused: imagery.paused(), stale:false }">
|
|
<div class="image-main"
|
|
|
|
mct-background-image="imagery.getImageUrl()"
|
|
filters="filters">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-image-main-controlbar flex-elem l-flex-row">
|
|
<div class="left flex-elem grows">
|
|
<a class="s-button show-thumbs sm hidden icon-thumbs-strip"
|
|
ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
|
|
<span class="l-time">{{imagery.getTime()}}</span>
|
|
</div>
|
|
<div class="right flex-elem">
|
|
<a class="s-button pause-play"
|
|
ng-click="imagery.paused(!imagery.paused())"
|
|
ng-class="{ paused: imagery.paused() }"></a>
|
|
<a href="{{imagery.getImageUrl()}}"
|
|
ng-if="imagery.getImageUrl()"
|
|
target="_blank"
|
|
title="Open image in new tab."
|
|
class="s-button icon-new-window">
|
|
</a>
|
|
<a href=""
|
|
class="s-button l-mag s-mag ui-symbol vsm icon-arrows-out"
|
|
ng-click="clipped = false"
|
|
ng-show="clipped === true"
|
|
title="Not all of image is visible; click to reset."></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<mct-splitter></mct-splitter>
|
|
<div class="split-pane-component l-image-thumbs-wrapper">
|
|
<div class="l-image-thumb-item" ng-class="{selected: image.selected}" ng-repeat="image in imageHistory track by $index"
|
|
ng-click="imagery.setSelectedImage(image)" ng-init="imagery.scrollToBottom()">
|
|
<img class="l-thumb"
|
|
ng-src={{imagery.getImageUrl(image)}}>
|
|
<div class="l-time">{{imagery.getTime(image)}}</div>
|
|
</div>
|
|
</div>
|
|
</mct-split-pane>
|
|
</div>
|