123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- {% 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"> </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"> </div>
- </div>
- </div>
- <div class="complete-width">
- <div id="navigation-slider-container" class="float-left">
- <div id="navigation-slider" class="draggable"> </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 (<= 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"><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"> </div>
- <input type="button" id="hide-bottom-controls-container" value="hide"/>
- </div>
- {% endblock %}
|