volume-visualization/templates/volumes/render.html

{% extends "layout.html" %}

{% block head %}
    {% load staticfiles %}
    <script type="text/javascript">
        var config = {
            defaultSize : {{ defaultSize }},
            textureSizes : {{ textureSizes }}
        };
        IPE.additionalJsFiles = [
            "{% static 'js/lib/three.min.js' %}?{{ VERSION }}",
            "{% static 'js/lib/stats.min.js' %}?{{ VERSION }}",
            "{% static 'js/lib/OrbitControls.js' %}?{{ VERSION }}",
            "{% static 'js/lib/helvetiker_regular.typeface.js' %}?{{ VERSION }}",
            "{% static 'js/lib/jquery.ui.position.js' %}?{{ VERSION }}",
            "{% static 'js/lib/jquery.contextMenu.js' %}?{{ VERSION }}",
            "{% static 'js/lib/kinetic-v5.0.2.min.js' %}?{{ VERSION }}",
            "{% static 'js/generic-slider.js' %}?{{ VERSION }}",
            "{% static 'js/threeJsHelper/dist/threeJsHelper.js' %}?{{ VERSION }}",
        ];
        IPE.additionalCssFiles = [
            "{% static 'css/application.css' %}?{{ VERSION }}",
            "{% static 'css/lib/jquery.contextMenu.css' %}?{{ VERSION }}"
        ];
        IPE.page = function() {
            IPE.app.init(config);
        };
    </script>
{% endblock %}

{% block content-class %}complete-width complete-height{% endblock %}

{% block content %}
    <input type="hidden" id="volumeId" value="{{ volume.id }}"/>
    <div id="wait" class="hidden">&nbsp;</div>
    <div id="menu-buttons-small-devices" class="float-left">
        <div id="overlay-small-devices">
            <div id="content-small-devices"></div>
            <input id="hide-content-small-devices" type="button" value="hide"/>
        </div>
        <input type="button" data="sidebar" value="show sidebar"/>
        <input type="button" data="resolution-link-holder" value="show res" />
    </div>
    <div id="sidebar" class="float-left center">
        <div id="zoom-container">
            <div class="h2">zooming</div>
            <div id="axis-container" class="float-left">
                <div id="navigation-plane-ver-label" class="complete-width">y-axis</div>
                <div id="navigation-slider-label" class="complete-width">z-axis</div>
            </div>
            <div id="zoom-navigation" class="float-left">
                <div id="navigation-plane-hor-label" class="complete-width">x-axis</div>
                <div class="complete-width">
                    <div id="navigation-plane-container">
                        <div id="navigation-plane" class="draggable">&nbsp;</div>
                    </div>
                </div>
                <div class="complete-width">
                    <div id="navigation-slider-container" class="float-left">
                        <div id="navigation-slider" class="draggable">&nbsp;</div>
                    </div>
                    <div class="zoom-button-holder">
                        <input type="button" id="zoomin" value="zoomin"/>
                    </div>
                    <div class="zoom-button-holder">
                        <input type="button" id="zoomout" value="zoomout"/>
                    </div>
                </div>
            </div>
        </div>
        <div id="layer-controls">
            <div class="h2">layer selection</div>
            <div id="xlayer-slider-container" class="controls center front-red">
                <div class="left label">
                    <input type="button" class="front-red" value="control the xlayers"/>
                </div>
                <div class="control-holder hidden">
                    <span class="front-red">x layer selection</span>
                    <div id="xlayer-slider" class="slider layer"></div>
                    <input id="xMin" class="dim xlayer small-width center" value="" />
                    <input id="xMax" class="dim xlayer small-width center" value="" />
                </div>
            </div>
            <div id="ylayer-slider-container" class="controls center front-green">
                <div class="left label">
                    <input type="button" class="front-green" value="control the ylayers"/>
                </div>
                <div class="control-holder hidden">
                    <span class="front-green">y layer selection</span>
                    <div id="ylayer-slider" class="slider layer"></div>
                    <input id="yMin" class="dim ylayer small-width center" value="" />
                    <input id="yMax" class="dim ylayer small-width center" value="" />
                </div>
            </div>
            <div id="zlayer-slider-container" class="controls center front-blue">
                <div class="left label">
                    <input type="button" class="front-blue" value="control the zlayers"/>
                </div>
                <div class="control-holder hidden">
                    <span class="front-blue">z layer selection</span>
                    <div id="zlayer-slider" class="slider layer"></div>
                    <input id="zMin" class="dim zlayer small-width center" value="" />
                    <input id="zMax" class="dim zlayer small-width center" value="" />
                </div>
            </div>
        </div>

        <div id="gray-slider-container" class="controls center">
            <div class="left label margin-top">
                <input type="button" value="control the gray values"/>
            </div>

            <div class="control-holder hidden">
                <span>gray value selection</span>
                <div id="gray-slider" class="slider"></div>
                <input id="grayMin" class="gray small-width center" value="" />
                <input id="grayMax" class="gray small-width center" value="" />
                <br>

                <input type="button" id="adjust-isodata-thresholding-bottom-controls-container" value="Adjust IsoData's-thresholding"/>
                <input type="button" id="adjust-otsu-thresholding-bottom-controls-container" value="Adjust Otsu's-thresholding"/>
                <input type="button" id="adjust-yen-thresholding-bottom-controls-container" value="Adjust Yen's-thresholding"/>

            </div>

        </div>

        <div id="transfer-function-definition" class="controls center">
            <div class="left label margin-top">
                <input type="button" value="transfer-function"/>
            </div>
            <div class="control-holder complete-width hidden">
                <input id="toggle-transfer" type="button" value="toggle transfer function"/>
                <div id="transfer">
                    <div id="transfer-function-holder" class="center">
                        <canvas id="transfer-function" width="255" height="10"></canvas>
                        <canvas id="hidden-transfer" class="hidden" width="255" height="1"></canvas>
                        <img class="hidden" id="standard-tf" src="{% static 'images/standard-tf.png' %}"/>
                    </div>
                    <div id="transfer-span-holder">
                        <span class="transfer" color="blue"></span>
                        <span class="transfer" color="turquois"></span>
                        <span class="transfer" color="green"></span>
                        <span class="transfer" color="orange"></span>
                        <span class="transfer" color="red"></span>
                    </div>

                    <div id="opacity-plot-container">
                        <div id="opacity-plot" class=""></div>
                        <div id="opacity-buttons">
                            <input type="button" id="opacity-visible" value="Visible"/><br/>
                            <input type="button" id="opacity-invisible" value="Invisible"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="frame-controls" class="center hidden">
            <div class="left label">control the frames</div>
            <div id="frame-slider" class="slider"></div>
            <input id="currentFrame" class="small-width center" value=""/><br/>
            <input type="button" id="frame-play" class="frame-button"/>
            <input type="button" id="frame-pause" class="frame-button hidden"/><br/>
        </div>
        <div class="center">
            <input type="button" id="show-adv-con" value="show advanced controls"/>
            <div id="advanced-controls" class="hidden">
                <div class="control-holder">
                    <label for="steps">steps (&lt;= 200): </label><input id="steps" class="small-width center" value="100" disabled="true" /><br/>
                    <label for="steps-adjust">adjust Steps: </label><input id="steps-adjust" type="checkbox" checked="checked"/><br/>
                    <input type="button" id="save-canvas" value="Save rendered image"/>
                </div>
                <div id="background-changer" class="controls center margin-top">
                    <div class="left label">
                        <input type="button" value="Change background color"/>
                    </div>
                    <div class="control-holder complete-width hidden">
                        <span>change the background color of the 3D area</span>
                        <div id="background-slider" class="slider"></div>
                        <input id="background-input" class="background small-width center" value="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="container" class="float-left">
        <div id="container-header" class="float-left">
            <div id="container-stats" class="float-left">
            </div>
            <div id="volume-information" class="float-left">
                volume name: <span class="bold">{{ volume.name }}</span> current texture res: <span class="bold" id="currentRes"></span> px<br />
                <div id="resolution-link-holder" class="{% if ENVIRONMENT == 'prod' %} hidden {% endif %}">
                    <div id="resolution-links"></div>
                </div>

                <div id="zoom-status">zoomed out</div>

                <div id="progress">
                    <div id="progress-container" class="hidden">
                        <p>Downloading <span id="texturePath"></span></p>
                        <progress id="image-progress" class="margin-top" style="width: 100%;" value="0" max="100" ></progress>
                    </div>
                </div>
            </div>
            <div id="popup" class="hidden"></div>
        </div>
    </div>
    <div id="container-overview" class="float-left">
    </div>
    <div id="bottom-controls-container" class="hidden">
        <div id="bottom-controls">&nbsp;</div>    
        <input type="button" id="hide-bottom-controls-container" value="hide"/>
    </div>
{% endblock %}