determine maximum texture size at loading, some styling

static/css/application.css

@@ -64,7 +64,7 @@ div#sidebar .slider {
 }
 
 div#volume-information {
-    width: 87%;
+    width: 86%;
     text-align: center;
     position: relative;
     height: 120px;
@@ -315,6 +315,10 @@ div#opacity-buttons {
 
 /* smartphones etc */
 @media (max-width: 640px) {
+    div#container-stats {
+        display: none;
+    }
+
     div#menu-buttons-small-devices {
         display: block;
         width: 17%;
@@ -329,11 +333,10 @@ div#opacity-buttons {
         z-index: 1000;
 
         width: 40%;
-        height: 100%;
 
         display: none;
         background-color: white;
-        opacity: 0.75;
+        border: 1px solid black;
     }
 
     div#content-small-devices {
@@ -351,7 +354,12 @@ div#opacity-buttons {
     }
 
     div#progress {
-        display: none;
+        /*display: none;*/
+    }
+
+    div.h2 {
+        margin: 0px auto;
+        text-align: center;
     }
 
     div#volume-information {

static/js/threeJsHelper/dist/threeJsHelper.js

@@ -27,6 +27,15 @@ IPE.app = {
         IPE.app.bindEvents();
         IPE.app.initData();
 
+        tempRenderer = new THREE.WebGLRenderer();
+        maximumTextureSize = tempRenderer.context.getParameter(tempRenderer.context.MAX_TEXTURE_SIZE);
+        // we have to take an power of 2 less
+        maximumTextureSize /= 2;
+
+        if(config.defaultSize > maximumTextureSize) {
+            config.defaultSize = maximumTextureSize;
+        }
+
         // Getting info file
         $.ajax({
             url: infoUrl + config.defaultSize,
@@ -542,10 +551,6 @@ function init() {
     renderer.setClearColor(0xffffff, 1);
     container.appendChild(renderer.domElement);
 
-    maximumTextureSize = renderer.context.getParameter(renderer.context.MAX_TEXTURE_SIZE);
-    // we have to take an power of 2 less
-    maximumTextureSize /= 2;
-
     $canvas = $('canvas', $container);
 
     controls1 = new THREE.OrbitControls( camera, renderer.domElement );

static/js/threeJsHelper/src/Application.js

@@ -27,6 +27,15 @@ IPE.app = {
         IPE.app.bindEvents();
         IPE.app.initData();
 
+        tempRenderer = new THREE.WebGLRenderer();
+        maximumTextureSize = tempRenderer.context.getParameter(tempRenderer.context.MAX_TEXTURE_SIZE);
+        // we have to take an power of 2 less
+        maximumTextureSize /= 2;
+
+        if(config.defaultSize > maximumTextureSize) {
+            config.defaultSize = maximumTextureSize;
+        }
+
         // Getting info file
         $.ajax({
             url: infoUrl + config.defaultSize,
@@ -542,10 +551,6 @@ function init() {
     renderer.setClearColor(0xffffff, 1);
     container.appendChild(renderer.domElement);
 
-    maximumTextureSize = renderer.context.getParameter(renderer.context.MAX_TEXTURE_SIZE);
-    // we have to take an power of 2 less
-    maximumTextureSize /= 2;
-
     $canvas = $('canvas', $container);
 
     controls1 = new THREE.OrbitControls( camera, renderer.domElement );

templates/volumes/index.html

@@ -11,7 +11,7 @@
     </td>
     <td>
     <ul class="button-box">
-      {% if volume.rendering_possible %}<li><a title="Render" href="{% url 'volumes:render-res' volume.id 1024 %}"><i class="fa fa-play-circle-o"><span>render</span></i></a></li>{% endif %}
+      {% if volume.rendering_possible %}<li><a title="Render" href="{% url 'volumes:render-res' volume.id 4096 %}"><i class="fa fa-play-circle-o"><span>render</span></i></a></li>{% endif %}
       <li><a title="Edit" href="{% url 'volumes:edit' volume.id %}"><i class="fa fa-pencil-square-o"><span>edit</span></i></a></li>
       <li><a title="Delete" href="{% url 'volumes:delete' volume.id %}"><i class="fa fa-trash-o"><span>delete</span></i></a></li>
     </ul>

templates/volumes/render.html

@@ -151,21 +151,23 @@
             <input type="button" id="frame-play" class="frame-button"/>
             <input type="button" id="frame-pause" class="frame-button hidden"/><br/>
         </div>
-        <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 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 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 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>

templates/volumes/show.html

@@ -109,7 +109,7 @@
 
 <ul class="vspace button-box">
   <li><a href="{% url 'volumes:home' %}"><i class="fa fa-arrow-circle-left"></i> back</a></li>
-  {% if volume.rendering_possible %}<li><a title="Render" href="{% url 'volumes:render-res' volume.id 1024 %}"><i class="fa fa-play-circle-o"><span>render</span></i></a></li>{% endif %}
+  {% if volume.rendering_possible %}<li><a title="Render" href="{% url 'volumes:render-res' volume.id 4096 %}"><i class="fa fa-play-circle-o"><span>render</span></i></a></li>{% endif %}
   <li><a title="Edit" href="{% url 'volumes:edit' volume.id %}"><i class="fa fa-pencil-square-o"><span>edit</span></i></a></li>
   <li><a title="Delete" href="{% url 'volumes:delete' volume.id %}"><i class="fa fa-trash-o"><span>delete</span></i></a></li>
 </ul>