studyViewer.html

<div id="studyViewerTemplate" class="tab-pane active hidden" style="height:100%">
    <div class="studyContainer" style="height:100%">
        <div class="studyRow row" style="height:100%">

            <!-- Thumbnails -->
            <div class="thumbnailSelector">
                <div class="thumbnails list-group">
                </div>
            </div>

            <!-- Viewer -->
            <div class="viewer">
                <!-- Toolbar -->
                <div class="text-center" >
                    <div class="btn-group">
                        <!-- WW/WL -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="WW/WC"><span class="fa fa-sun-o"></span></button>
                        <!-- Invert -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
                        <!-- Zoom -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
                        <!-- Pan -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Pan"><span class="fa fa-arrows"></span></button>
                        <!-- Stack scroll -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Stack Scroll"><span class="fa fa-bars"></span></button>
                        <!-- Length measurement -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Length Measurement"><span class="fa fa-arrows-v"></span></button>
                        <!-- Angle measurement -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Angle Measurement"><span class="fa fa-angle-left"></span></button>
                        <!-- Pixel probe -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle-o"></span></button>
                        <!-- Elliptical ROI -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle-o"></span></button>
                        <!-- Rectangle ROI -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square-o"></span></button>
                        <!-- Play clip -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Play Clip"><span class="fa fa-play"></span></button>
                        <!-- Stop clip -->
                        <button type="button" class="btn btn-sm btn-default" data-container='body' data-toggle="tooltip" data-placement="bottom" title="Stop Clip"><span class="fa fa-stop"></span></button>
                        <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-container='body' data-toggle="dropdown" aria-expanded="false" data-placement="top" title="Layout"><span class="fa fa-th-large"></span></button>
                        <ul class="pull-right dropdown-menu" role="menu">
                            <li><a href="#">1x1</a></li>
                            <li><a href="#">2x1</a></li>
                            <li><a href="#">1x2</a></li>
                            <li><a href="#">2x2</a></li>
                        </ul>                    
                    </div>
                </div>

                <!-- Viewer -->
                <div class="imageViewer">
                    <!-- Viewport wrapper-->
                    <div class="viewportWrapper" style="width:100%;height:100%;position:relative;color: white;display:inline-block;background-color:black;"
                         oncontextmenu="return false"
                         class='cornerstone-enabled-image'
                         unselectable='on'
                         onselectstart='return false;'
                         onmousedown='return false;'>
                        <!-- Viewport -->
                        <div class="viewport"></div>

                        <!-- Overlays -->
                        <div class="overlay" style="top:0px; left:0px">
                            <div>Patient Name</div>
                            <div>Patient Id</div>
                        </div>

                        <div class="overlay" style="top:0px; right:0px">
                            <div>Study Description</div>
                            <div>Study Date</div>
                        </div>

                        <div class="overlay" style="bottom:0px; left:0px">
                            <div class="fps">FPS:</div>
                            <div class="renderTime">Render Time:</div>
                            <div class="currentImageAndTotalImages">Image #:</div>
                        </div>

                        <div class="overlay" style="bottom:0px; right:0px">
                            <div>Zoom:</div>
                            <div>WW/WC:</div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>