added background download.

Signed-off-by: root <root@ipekatrinadei.ipe.kit.edu>

main.py

@@ -158,6 +158,8 @@ class UpdateHandler(tornado.web.RequestHandler):
         selected_data = DATA(index)
 
         self.write({
+            "name": name,
+            "index": index,
             "data_size": selected_data.get_size(),
             "desc": selected_data.get_desc(),
             "top_count": selected_data.get_top_count(),
@@ -242,11 +244,11 @@ class ImageHandler(tornado.web.RequestHandler):
         dtype = self.get_argument("type")
         dcounter = self.get_argument("counter").zfill(4)
         
-        if dtype == "left" or dtype == "left-resized":
+        if dtype == "left" or dtype == "left-resized" or dtype == "left-resized-mini":
             prefix = "left"
-        elif dtype == "top" or dtype == "top-resized":
+        elif dtype == "top" or dtype == "top-resized" or dtype == "top-resized-mini":
             prefix = "top"
-        elif dtype == "front" or dtype == "front-resized":
+        elif dtype == "front" or dtype == "front-resized" or dtype == "front-resized-mini":
             prefix = "front"
         
         if dtype == "preview":

static/fossil/css/dashboard.css

@@ -21,8 +21,6 @@ h1 {
  */
 
 .sidebar {
-  position: fixed;
-  top: 75px;
   bottom: 0;
   left: 0;
   z-index: 1000;
@@ -59,6 +57,7 @@ h1 {
  */
 
  /* Placeholders */
+/*
 .placeholders {
   padding-bottom: 3rem;
 }
@@ -67,6 +66,7 @@ h1 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+*/
 
 .main-liner {
   border-right: 2px solid #f8f9fa;
@@ -78,3 +78,35 @@ h1 {
     margin-left: 15px;
     white-space: normal
 }
+
+.cont {
+    margin-top: 1.5rem;
+}
+
+#top-left,
+#top-right,
+#left-left,
+#left-right,
+#front-left,
+#front-right {
+    background-color: white;
+    transition: background-color 0.5s ease;
+}
+
+#top-left:hover,
+#top-right:hover,
+#left-left:hover,
+#left-right:hover,
+#front-left:hover,
+#front-right:hover {
+    background-color: #ddd;
+}
+
+.icon {
+    width: 3%;
+    height: 3%;
+}
+
+.slice-count {
+    visibility: hidden;
+}

static/fossil/js/doWork.js

@@ -0,0 +1,42 @@
+// web worker
+self.onmessage = function(e) {
+
+    var imgFrontArray = [];
+    var imgContainer = e.data.imgContainer;
+    var name = e.data.name;
+    var id = e.data.id;
+    var front_count = e.data.front_count;
+  
+    for (i = 0; i < front_count; i++) {
+      console.log(i);
+      //var img = document.createElement('img');
+      var img = imgContainer[i];
+          img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+i;
+          img.id = "img-front";
+          img.style.width = 100 + '%';
+      imgFrontArray[i] = img;   
+    }  
+    self.postMessage(imgFrontArray);
+    
+    //self.postMessage(e.data);
+};
+
+/*
+var imgFrontArray = [];
+
+self.addEventListener('message', function(e) {
+  var name = e.name;
+  var id = e.id;
+  var front_count = e.front_count;
+
+  for (i = 0; i < front_count; i++) {
+      console.log(i);
+      var img = new Image();
+          img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+i;
+          img.id = "img-front";
+          img.style.width = 100 + '%';
+      imgFrontArray[i] = img;   
+  }  
+  self.postMessage(imgFrontArray);
+}, false);
+*/

static/fossil/js/script3.js

@@ -0,0 +1,732 @@
+var glob_width;
+var glob_height;
+var glob_elem;
+var glob_id;
+
+var stopFlag = false;
+
+$('.nav-data').click( function(e) {
+    var current_nav = $(this).text();
+    $("#header_title").text(current_nav);
+    name = current_nav.trim();
+    id = name.replace ( /[^\d.]/g, '' );
+    index = id;
+     //<img id="img-preview" width="100%" src="img?id={{ index }}&name={{ name }}&type=preview&counter=0"/>
+    stopFlag = true;
+    $("#img-preview").attr("src", "img?id="+id+"&name="+name+"&type=preview&counter=0");
+    //stopFlag = true;
+
+
+
+    $('.nav-data').each(function(index) {
+        id = "#nav"+$(this).text().replace ( /[^\d.]/g, '' );
+        if ($(this).text() != current_nav) {
+            $(id).collapse("hide");
+        } else {
+            console.log(current_nav, $(this).text());
+            //$('[data-toggle=collapse]').prop('disabled',true);
+            //$(id).collapse("show");
+        } 
+    });   
+
+    $.ajax({
+        url: 'update?index=' + index + '&name=' + name,
+        type: 'GET',
+        success: function (response) {
+            console.log("Success.");
+            console.log(response);
+            $("td#size"+response.index).text(response.data_size + " GB");
+            /*
+                $("#size").text("("+response.data_size+" GB)");
+
+                var html = "<span>Description</span>";
+                for (i = 0; i < response["desc"].length; i++) { 
+                    if (response["desc"][i]["type"] == "i") {
+                        tmp = "<i>" + response["desc"][i]["text"] + "</i>";
+                    } else if (response["desc"][i]["type"] == "p") {
+                        tmp = response["desc"][i]["text"];
+                    }
+                    html += tmp;
+                }
+                $("#description").empty().append(html);
+
+                $("#front-count-text").text(" (max: " + response.front_count + ")");
+                $("#left-count-text").text(" (max: " + response.left_count + ")");
+                $("#top-count-text").text(" (max: " + response.top_count + ")");
+                $("#front-count").text(response.front_count);
+                $("#left-count").text(response.left_count);
+                $("#top-count").text(response.top_count);
+                $("#slider-right").slider("option", "max" , response.front_count );
+                $("#slider-left").slider("option", "max" , response.left_count );
+                $("#slider-center").slider("option", "max" , response.top_count );
+            
+                var left_index = $( "#slider-left" ).slider( "option", "value" );
+                var top_index = $( "#slider-center" ).slider( "option", "value" );
+                var front_index = $( "#slider-right" ).slider( "option", "value" );
+                // update images
+                $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
+                $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
+                $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
+           
+                var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
+                var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1); 
+                var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
+                $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
+                $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
+                $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
+    
+                $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString());
+                $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString());
+                $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString()); 
+            */
+            },
+            error: function () {
+                console.log("Error.")
+            }
+        });
+
+});
+
+
+if (document.addEventListener)
+{
+    document.addEventListener('webkitfullscreenchange', exitHandler, false);
+    document.addEventListener('mozfullscreenchange', exitHandler, false);
+    document.addEventListener('fullscreenchange', exitHandler, false);
+    document.addEventListener('MSFullscreenChange', exitHandler, false);
+}
+
+function exitHandler() {
+    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+        if (!document.fullscreenElement && !document.mozFullScreenElement &&
+            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+            $(glob_elem).css("width", "100%");
+            $(glob_elem).css("height", "100%");
+            $(glob_elem).css("background-color", "white");
+            $(glob_elem).css("color", "#000");
+            $("#front-quality-text").text("Size: 25%");
+            $("#top-quality-text").text("Size: 25%");
+            $("#left-quality-text").text("Size: 25%");
+            $("#"+glob_id).width('100%');
+            $("#"+glob_id).height("100%");
+        } else {
+            $("#front-quality-text").text("Size: 100%");
+            $("#top-quality-text").text("Size: 100%");
+            $("#left-quality-text").text("Size: 100%");
+        }
+    }
+}
+
+
+function toggleFullscreen(elem, _id) {
+    elem = elem || document.documentElement;
+
+    console.log("ID: "+_id);
+    var ori_width = glob_width
+    var ori_height = glob_height;
+      
+    var fs_scale;
+    var myRatio;
+    if (window.devicePixelRatio < 1) {
+        myRatio = 1.0;
+    } else {
+        myRatio = 2.0;
+    }
+        
+    $("#"+_id).css('width', 'auto')
+    $("#"+_id).css('height', 'auto')
+
+    if (!document.fullscreenElement && !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+      if ((ori_height*1.2) > ori_width) {
+        //newWidth = screen.width * (1/Math.ceil(window.devicePixelRatio));
+        //newHeight = screen.width * (ori_height/ori_width) * (1/Math.ceil(window.devicePixelRatio));
+        newWidth = screen.width * (1/ myRatio);
+        newHeight = screen.width * (ori_height/ori_width) * (1/ myRatio);
+  
+        $("#"+_id).removeAttr('width');
+        $("#"+_id).height("80%");
+      } else {
+        newHeight = screen.height * (1/myRatio);
+        newWidth = screen.height * (ori_width/ori_height) * (1/myRatio);
+        $("#"+_id).removeAttr('height');
+        $("#"+_id).width("100%");
+        //newHeight = screen.height * (1/Math.ceil(window.devicePixelRatio));
+        //newWidth = screen.height * (ori_width/ori_height) * (1/Math.ceil(window.devicePixelRatio));
+      }
+
+      $(elem).css("height", (newHeight)+"px");
+      $(elem).css("width", (newWidth)+"px");
+
+      //$("#"+_id).removeAttr('width');
+      //$("#"+_id).height("80%");
+      //$(elem).css("width", "200px");
+      
+      $(elem).css("background-color", "black");
+      $(elem).css("color", "#ccc");
+
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    } else {
+      $("#"+_id).width('100%');
+      $("#"+_id).height("100%");
+      //$(elem).css("width", "100%");
+      $(elem).css("background-color", "white");
+      $(elem).css("color", "#000");
+
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+}
+
+function IsImageOk(img) {
+    // During the onload event, IE correctly identifies any images that
+    // weren’t downloaded as not complete. Others should too. Gecko-based
+    // browsers act like NS4 in that they report this incorrectly.
+    if (!img.complete) {
+        return false;
+    }
+
+    // However, they do have two very useful properties: naturalWidth and
+    // naturalHeight. These give the true size of the image. If it failed
+    // to load, either of these should be zero.
+
+    if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
+        return false;
+    }
+
+    // No other way of checking: assume it’s ok.
+    return true;
+}
+
+var imgTopArray = [];
+var imgFrontArray = [];
+var imgLeftArray = [];
+
+$(function() {
+
+
+    $(window).resize(function() {
+        $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString() + "%");
+        $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString() + "%");
+        $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString() + "%"); 
+    });
+
+    
+    var name;
+    var id;
+    $( "#slider-left" ).slider({
+        range: "max",
+        min: 1,
+        max: parseInt($("#left-count").text()),
+        //max: 1500,
+        value: 1,
+        stop: function(event, ui) {
+            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+(ui.value-1));
+        },
+        slide: function( event, ui ) {
+            name = $( "#header_title" ).text();
+            id = name.replace ( /[^\d.]/g, '' );
+            if (ui.value > imgFrontArray.length) {
+                $("#img-left-container").empty();
+            } else {
+                if (IsImageOk(imgLeftArray[ui.value-1]) ) {
+                    $("#img-left-container").empty().append(imgLeftArray[ui.value-1]);
+                } else {
+                    //$("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
+                }
+            }
+            $("#left-text").text(ui.value);
+        }
+    });
+    
+    $( "#slider-right" ).slider({
+        range: "max",
+        min: 1,
+        max: parseInt($("#front-count").text()),
+        value: 1,
+        start: function(event, ui) {
+            processLargeFrontArray( parseInt( $("#front-count").text()) );
+        },
+        stop: function(event, ui) {
+            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+(ui.value-1));
+        },
+        slide: function( event, ui ) {
+            name = $( "#header_title" ).text();
+            id = name.replace ( /[^\d.]/g, '' );
+            if (ui.value > imgFrontArray.length) {
+                $("#img-front-container").empty();
+            } else {
+                if (IsImageOk(imgFrontArray[ui.value-1]) ) {
+                    $("#img-front-container").empty().append(imgFrontArray[ui.value-1]);
+                } else {
+                    $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
+                }
+            }
+            $("#front-text").text(ui.value);
+        }
+    });
+    
+    $( "#slider-center" ).slider({
+        range: "max",
+        min: 1,
+        max: parseInt($("#top-count").text()),
+        //max: 1500,
+        value: 1,
+        stop: function(event, ui) {
+            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+(ui.value-1));
+        },
+        slide: function( event, ui ) {
+            name = $( "#header_title" ).text();
+            id = name.replace ( /[^\d.]/g, '' );
+            if (ui.value > imgTopArray.length) {
+                $("#img-top-container").empty();
+            } else {
+                if (IsImageOk(imgTopArray[ui.value-1]) ) {
+                    $("#img-top-container").empty().append(imgTopArray[ui.value-1]);
+                } else {
+                    $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
+                }
+            }
+            $("#top-text").text(ui.value);
+        }
+    });
+    
+    $( "#download" ).click(function(e) {
+        var did = $( "select option:selected" ).text();
+        e.preventDefault();  //stop the browser from following
+        window.location.href = 'download?did=' + did;
+    });
+
+    /*
+    $('.target').change(function() {
+        var name = $(this).find("option:selected").text();
+        var index = $(this).find("option:selected").val();
+        $.ajax({
+            url: 'update?index=' + index + '&name=' + name,
+            type: 'GET',
+            success: function (response) {
+                console.log("Success.");
+                console.log(response);
+                $("#size").text("("+response.data_size+" GB)");
+
+                var html = "<span>Description</span>";
+                for (i = 0; i < response["desc"].length; i++) { 
+                    if (response["desc"][i]["type"] == "i") {
+                        tmp = "<i>" + response["desc"][i]["text"] + "</i>";
+                    } else if (response["desc"][i]["type"] == "p") {
+                        tmp = response["desc"][i]["text"];
+                    }
+                    html += tmp;
+                }
+                $("#description").empty().append(html);
+
+                $("#front-count-text").text(" (max: " + response.front_count + ")");
+                $("#left-count-text").text(" (max: " + response.left_count + ")");
+                $("#top-count-text").text(" (max: " + response.top_count + ")");
+                $("#front-count").text(response.front_count);
+                $("#left-count").text(response.left_count);
+                $("#top-count").text(response.top_count);
+                $("#slider-right").slider("option", "max" , response.front_count );
+                $("#slider-left").slider("option", "max" , response.left_count );
+                $("#slider-center").slider("option", "max" , response.top_count );
+            
+                var left_index = $( "#slider-left" ).slider( "option", "value" );
+                var top_index = $( "#slider-center" ).slider( "option", "value" );
+                var front_index = $( "#slider-right" ).slider( "option", "value" );
+                // update images
+                $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
+                $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
+                $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
+           
+                var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
+                var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1); 
+                var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
+                $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
+                $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
+                $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
+    
+                $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString());
+                $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString());
+                $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString()); 
+            },
+            error: function () {
+                console.log("Error.")
+            }
+        });
+        $("#img-preview").attr("src", "img?id="+index+"&name="+name+"&type=preview&counter=0");
+    });
+    */
+
+    $("#front-left").click( function() {
+        var index = parseInt($("#front-text").text());
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+        index -= 1;
+        if (index < 1) {
+            index = 1;
+        }
+        $("#front-text").text(index);
+        $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
+
+        /*
+        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+            if (!document.fullscreenElement && !document.mozFullScreenElement &&
+                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
+            } else {
+                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
+            }
+        } else {
+            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
+        }
+        */
+    });
+    
+    $("#front-right").click( function() {
+        var index = parseInt($("#front-text").text());
+        var max_count = parseInt($("#front-count").text());
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+
+        //console.log(index, max_count);
+        index += 1;
+        if (index > max_count) {
+            index = max_count;
+        }
+        $("#front-text").text(index);
+        $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
+        
+        /*
+        // update image src
+        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+            if (!document.fullscreenElement && !document.mozFullScreenElement &&
+                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
+            } else {
+                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
+            }
+        } else {
+            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
+        }
+        */
+    });
+    
+    $("#top-left").click( function() {
+        var index = parseInt($("#top-text").text());
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+        index -= 1;
+        if (index < 1) {
+            index = 1;
+        }
+        $("#top-text").text(index);
+        $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
+        /*
+        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+            if (!document.fullscreenElement && !document.mozFullScreenElement &&
+                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
+            } else {
+                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
+            }
+        } else {
+            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
+        }
+        */
+    });
+    
+    $("#top-right").click( function() {
+        var index = parseInt($("#top-text").text());
+        var max_count = parseInt($("#top-count").text());
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+
+        //console.log(index, max_count);
+        index += 1;
+        if (index > max_count) {
+            index = max_count;
+        }
+        $("#top-text").text(index);
+        $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
+        /*
+        // update image src
+        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+            if (!document.fullscreenElement && !document.mozFullScreenElement &&
+                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
+            } else {
+                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
+            }
+        } else {
+            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
+        }
+        */
+    });
+    
+    $("#left-left").click( function() {
+        var index = parseInt($("#left-text").text());
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+        index -= 1;
+        if (index < 1) {
+            index = 1;
+        }
+        $("#left-text").text(index);
+        $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
+
+        /*
+        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
+        } else {
+            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
+        }
+        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+            if (!document.fullscreenElement && !document.mozFullScreenElement &&
+                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
+            } else {
+                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
+            }
+        } else {
+            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
+        }
+        */
+    });
+    
+    $("#left-right").click( function() {
+        var index = parseInt($("#left-text").text());
+        var max_count = parseInt($("#left-count").text());
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+
+        //console.log(index, max_count);
+        index += 1;
+        if (index > max_count) {
+            index = max_count;
+        }
+        $("#left-text").text(index);
+        $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
+        
+        /*
+        // update image src
+        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
+            if (!document.fullscreenElement && !document.mozFullScreenElement &&
+                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
+            } else {
+                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
+            }
+        } else {
+            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
+        }
+        */
+    });
+
+
+    /*
+    // FULLSCREEN
+    document.getElementById("img-front").addEventListener("click", function() {
+        var container = $("#photowrapper-front");
+        if (!document.fullscreenElement && !document.mozFullScreenElement &&
+            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+            glob_id = this.id;
+            glob_width = $("#photowrapper-front > img").width();
+            glob_height = $("#photowrapper-front > img").height();
+            glob_elem = $("#photowrapper-front")[0];
+        }
+        toggleFullscreen(container[0], this.id);
+    });
+
+    document.getElementById('img-top').addEventListener('click', function() {
+        var container = $("#photowrapper-top");
+        if (!document.fullscreenElement && !document.mozFullScreenElement &&
+            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+            glob_id = this.id;
+            glob_width = $("#photowrapper-top > img").width();
+            glob_height = $("#photowrapper-top > img").height();
+            glob_elem = $("#photowrapper-top")[0];
+        }
+        toggleFullscreen(container[0], this.id);
+    });
+
+    document.getElementById('placeholder-left').addEventListener('click', function() {
+        var container = $("#photowrapper-left");
+        if (!document.fullscreenElement && !document.mozFullScreenElement &&
+            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+            glob_id = this.id;
+            glob_width = $("#photowrapper-left > img").width();
+            glob_height = $("#photowrapper-left > img").height();
+            glob_elem = $("#photowrapper-left")[0];
+        }
+        toggleFullscreen(container[0], this.id);
+    });
+    */
+
+    /*
+    $("#img-top").ezPlus({
+        zoomWindowPosition: 1,
+        scrollZoom: true,
+        zoomLevel: 0.1,
+        minZoomLevel: 0.1,
+        zoomWindowWidth: 300,
+        zoomWindowHeight: 300
+    });
+ 
+    $("#placeholder-left").ezPlus({
+        zoomWindowPosition: 9,
+        scrollZoom: true,
+        zoomLevel: 0.1,
+        minZoomLevel: 0.1,
+        zoomWindowWidth: 300,
+        zoomWindowHeight: 300
+    });
+
+    $("#img-front").ezPlus({
+        zoomWindowPosition: 11,
+        scrollZoom: true,
+        zoomLevel: 0.1,
+        minZoomLevel: 0.1,
+        zoomWindowWidth: 300,
+        zoomWindowHeight: 300
+    });
+    */
+
+    /*
+     * print folder, imLeft.size, imTop.size, imFront.size
+     * NRM-PZ Ar65771 (1174, 2929) (1173, 2929) (1173, 1174)
+     * NRM-PZ Ar65772 (1122, 3200) (1173, 3200) (1173, 1122)
+     * NRM-PZ Ar65794 (1118, 3113) (1133, 3113) (1133, 1118)
+     * NRM-PZ Ar65793 (1294, 3431) (1240, 3431) (1240, 1294)
+     * NRM-PZ Ar65720 (1223, 3311) (1267, 3311) (1267, 1223)
+     * NRM-PZ Ar65767 (1302, 2936) (1284, 2936) (1284, 1302)
+     */
+    $("#front-quality-text").text("Magnification: 0.34");
+    $("#top-quality-text").text("Magnification: 0.13");
+    $("#left-quality-text").text("Magnification: 0.13"); 
+
+    /*
+    console.log("FRONT QUALITY: " + $("#img-front").width() + " / " + $("#front-count").text() );    
+    console.log("TOP QUALITY: " + $("#img-top").height() + " / " + $("#top-count").text() );    
+    console.log("LEFT QUALITY: " + $("#placeholder-left").height() + " / " + $("#left-count").text() );    
+    */
+
+    /*
+    // PRELOAD Front Images
+    for (i = 0; i < parseInt( $("#front-count").text() ); i++) {
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+
+        var img = new Image();
+            img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+i;
+            img.id = "img-front";
+            img.style.width = 100 + '%';
+        imgFrontArray[i] = img;   
+    }
+    */
+
+    function processLargeFrontArray(max_iter) {
+        // set this to whatever number of items you can process at once
+        var chunk = 10;
+        var index = 0;
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+        function doChunk() {
+            var cnt = chunk;
+            while (cnt-- && index < max_iter) {
+                var img = new Image();
+                    img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+index;
+                    img.id = "img-front";
+                    img.style.width = 100 + '%';
+                imgFrontArray[index] = img;   
+                if (stopFlag == true) {
+                    max_iter = 999999;
+                    imgFrontArray = [];
+                    stopFlag = false;
+                    break;
+                }
+                // process array[index] here
+                ++index;
+            }
+            if (index < max_iter && index < 1500) {
+                // set Timeout for async iteration
+                setTimeout(doChunk, 100);
+            } 
+            /*else {
+                processLargeFrontArray( parseInt( $("#front-count").text()) );
+            }*/
+        }    
+        doChunk();    
+    }
+    //processLargeFrontArray( parseInt( $("#front-count").text()) );
+
+    /*
+    // PRELOAD Top Images
+    for (i = 0; i < parseInt( $("#top-count").text() ); i++) {
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+
+        var img = new Image();
+            img.src = "img?id="+id+"&name="+name+"&type=top-resized&counter="+i;
+            img.id = "img-top";
+            img.style.width = 100 + '%';
+        imgTopArray[i] = img;   
+    }
+    
+    // PRELOAD Left Images
+    for (i = 0; i < parseInt( $("#left-count").text() ); i++) {
+        name = $( "#header_title" ).text();
+        id = name.replace ( /[^\d.]/g, '' );
+
+        var img = new Image();
+            img.src = "img?id="+id+"&name="+name+"&type=left-resized&counter="+i;
+            img.id = "placeholder-left";
+            img.style.width = 100 + '%';
+        imgLeftArray[i] = img;   
+    }
+    */
+
+    /*
+    // WEB WORKER APPROACH
+    var worker = new Worker('http://katrin.kit.edu/static/js/doWork.js');
+    name = $( "#header_title" ).text();
+    id = name.replace ( /[^\d.]/g, '' );
+    //worker.postMessage(999999999);
+    //
+    //
+    myArray = []
+    for (i = 0; i < parseInt( $("#front-count").text() ); i++) {
+        var img = new Image();
+        myArray[i] = img;   
+    }
+    
+    worker.postMessage({'name': name, 'id': id, 'front_count': $("#front-count").text(), 'imgContainer': myArray });
+
+    // array of images
+    // var images = [];
+
+    //worker.addEventListener('message', function(e) {
+    //    console.log(e.data);
+    //}, false);
+    
+    worker.onmessage = function(e) {
+        console.log(e.data);
+    }
+    */
+});
+
+

templates/index3.html

@@ -11,7 +11,7 @@
 
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="{{ static_url("css/bootstrap.min.css") }}">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
     <!-- Custom styles for this template -->
     <link rel="stylesheet" href="{{ static_url("css/dashboard.css") }}">
   </head>
@@ -55,7 +55,7 @@
     </nav>
 
     <div class="container-fluid">
-      <div class="row">
+      <div id="accordion" class="row">
         <nav class="col-sm-4 d-none d-sm-block bg-light sidebar">
           <ul class="nav nav-pills flex-column">
             <li class="nav-item">
@@ -91,24 +91,29 @@
 
           <ul class="nav nav-pills flex-column">
             <li class="nav-item">
-              <a class="nav-link" data-toggle="collapse" href="#collapse_NRM-PZ_Ar65720" aria-expanded="false" aria-controls="collapse_NRM-PZ_Ar65720">
+              <a class="nav-link active">
+                Data
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-data nav-link" data-toggle="collapse" href="#nav65720" aria-expanded="false" aria-controls="nav65720">
                 NRM-PZ Ar65720
               </a>
-              <div class="collapse" id="collapse_NRM-PZ_Ar65720">
+              <div class="collapse show collapse-data" id="nav65720">
                 <div class="card card-block">
                   <table class="table table-bordered">
                       <tbody>
                         <tr>
                           <th scope="row">Description</th>
-                          <td>Xenomorphia resurrecta , male; well-preserved, head hollow</td>
+                          <td id="desc65720">Xenomorphia resurrecta , male; well-preserved, head hollow</td>
                         </tr>
                         <tr>
                           <th scope="row">Size</th>
-                          <td>1.8 GB</td>
+                          <td id="size65720">1.8 GB</td>
                         </tr>
                         <tr>
                           <th scope="row">Download</th>
-                          <td>Link</td>
+                          <td id="link65720">Link</td>
                         </tr>
                       </tbody>
                     </table>
@@ -116,10 +121,10 @@
               </div>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-toggle="collapse" href="#collapse_NRM-PZ_Ar65767" aria-expanded="false" aria-controls="collapse_NRM-PZ_Ar65767">
+              <a class="nav-data nav-link" data-toggle="collapse"  href="#nav65767" aria-expanded="false" aria-controls="nav65767">
                 NRM-PZ Ar65767
               </a>
-              <div class="collapse" id="collapse_NRM-PZ_Ar65767">
+              <div class="collapse collapse-data" id="nav65767">
                 <div class="card card-block">
                   <table class="table table-bordered">
                       <tbody>
@@ -141,10 +146,10 @@
               </div>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-toggle="collapse" href="#collapse_NRM-PZ_Ar65771" aria-expanded="false" aria-controls="collapse_NRM-PZ_Ar65771">
+              <a class="nav-data nav-link" data-toggle="collapse" href="#nav65771" aria-expanded="false" aria-controls="nav65771">
                 NRM-PZ Ar65771
               </a>
-              <div class="collapse" id="collapse_NRM-PZ_Ar65771">
+              <div class="collapse collapse-data" id="nav65771">
                 <div class="card card-block">
                   <table class="table table-bordered">
                       <tbody>
@@ -166,10 +171,10 @@
               </div>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-toggle="collapse" href="#collapse_NRM-PZ_Ar65772" aria-expanded="false" aria-controls="collapse_NRM-PZ_Ar65772">
+              <a class="nav-data nav-link" data-toggle="collapse" href="#nav65772" aria-expanded="false" aria-controls="nav65772">
                 NRM-PZ Ar65772
               </a>
-              <div class="collapse" id="collapse_NRM-PZ_Ar65772">
+              <div class="collapse collapse-data" id="nav65772">
                 <div class="card card-block">
                   <table class="table table-bordered">
                       <tbody>
@@ -191,10 +196,10 @@
               </div>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-toggle="collapse" href="#collapse_NRM-PZ_Ar65793" aria-expanded="false" aria-controls="collapse_NRM-PZ_Ar65793">
+              <a class="nav-data nav-link" data-toggle="collapse" href="#nav65793" aria-expanded="false" aria-controls="nav65793">
                 NRM-PZ Ar65793
               </a>
-              <div class="collapse" id="collapse_NRM-PZ_Ar65793">
+              <div class="collapse collapse-data" id="nav65793">
                 <div class="card card-block">
                   <table class="table table-bordered">
                       <tbody>
@@ -216,10 +221,10 @@
               </div>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-toggle="collapse" href="#collapse_NRM-PZ_Ar65794" aria-expanded="false" aria-controls="collapse_NRM-PZ_Ar65794">
+              <a class="nav-data nav-link" data-toggle="collapse" href="#nav65794" aria-expanded="false" aria-controls="nav65794">
                 NRM-PZ Ar65794
               </a>
-              <div class="collapse" id="collapse_NRM-PZ_Ar65794">
+              <div class="collapse collapse-data" role="tabpanel" id="nav65794">
                 <div class="card card-block">
                   <table class="table table-bordered">
                       <tbody>
@@ -258,21 +263,43 @@
         </nav>
 
         <main class="col-8 pt-3 ml-auto" role="main">
-          <!--<h1>Dashboard</h1>-->
+        <h5 id="header_title" class="text-center">NRM-PZ Ar65720</h5>
 
           <section class="row text-center placeholders">
             <div class="col-6 col-sm-6 placeholder main-liner">
                 <span class="text-muted">Volume Rendering</span>
                 <img id="img-preview" width="100%" src="img?id={{ index }}&name={{ name }}&type=preview&counter=0"/>
-                <span class="text-muted">Top View</span>
-                <img id="img-top"  width="100%" src="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" />
-                <span class="text-muted">Left View</span>
-                <img id="placeholder-left" width="100%" src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/> 
+                <div class="cont">
+                    <img id="top-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+                    <span class="text-muted" id="image-text">Top: <span id="top-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-muted" id="top-quality-text"></span></span>
+                    <img id="top-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                </div> 
+                <div id="img-top-container">
+                <img id="img-top"  width="100%" src="img?id={{ index }}&name={{ name }}&type=top&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=top&counter=0" />
+                </div>
+                <div id="slider-center"></div><div class="slice-count" id="top-count">{{ left_count }}</div>
+               
+                <div class="cont">
+                    <img id="left-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+                    <span class="text-muted" id="image-text">Left: <span id="left-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-muted" id="left-quality-text"></span></span>
+                    <img id="left-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                </div> 
+                <div id="img-left-container">
+                    <img id="placeholder-left" width="100%" src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/> 
+                </div>
+                <div id="slider-left"></div><div class="slice-count" id="left-count">{{ top_count }}</div>
             </div>
 
             <div class="col-6 col-sm-6 placeholder">
-              <span class="text-muted">Front View</span>
-              <img id="img-front" width="100%" src="img?id={{ index }}&name={{ name }}&type=front-resized&counter=0"/>
+              <div>
+                    <img id="front-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+                    <span class="text-muted" id="image-text">Front: <span id="front-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-muted" id="front-quality-text"></span></span>
+                    <img id="front-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                </div>
+                <div id="img-front-container">
+                    <img id="img-front" width="100%" src="img?id={{ index }}&name={{ name }}&type=front&counter=0"/>
+                </div>
+                <div id="slider-right"></div><div class="slice-count" id="front-count">{{ front_count }}</div>
             </div>
           </section>
 
@@ -283,10 +310,19 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script
+          src="https://code.jquery.com/jquery-3.2.1.min.js"
+            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+              crossorigin="anonymous"></script>
+    <script
+          src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
+            integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
+              crossorigin="anonymous"></script>
+    <script src="{{ static_url("js/jquery.ez-plus.js") }}"></script>      
     <script src="{{ static_url("js/popper.min.js") }}"></script>
     <script src="{{ static_url("js/bootstrap.min.js") }}"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="{{ static_url("js/ie10-viewport-bug-workaround.js") }}"></script>
+    <script src="{{ static_url("js/script3.js") }}"></script>
   </body>
 </html>