openmct/platform/features/imagery/res/templates/imagery.html

<div class="t-imagery" ng-controller="ImageryController as imagery">
    <mct-split-pane class='abs' anchor="bottom" alias="imagery">
    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col"
        ng-mouseenter="showLocalControls = true;"
        ng-mouseleave="showLocalControls = false;">
        <div class="h-local-controls h-local-controls-overlay-content h-local-controls-trans s-local-controls local-controls-hidden l-flex-row">
            <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="l-datetime-w flex-elem grows">
                <a class="c-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="h-local-controls flex-elem">
                <a class="c-button icon-pause pause-play"
                    ng-click="imagery.paused(!imagery.paused())"
                    ng-class="{ 'is-paused': imagery.paused() }"></a>
                <a href=""
                    class="s-button l-mag s-mag vsm icon-reset"
                    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>