added quality indicator.

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

main.py

@@ -72,6 +72,9 @@ class DATA:
         parser.feed(data[2])
         self.desc = parser.get_data() 
         self.size = ("%.2f" % (data[3] / 1000000.0))
+        self.left_count = data[4]
+        self.top_count = data[5]
+        self.front_count = data[6]
 
     def get_index(self):
         return self.index
@@ -85,6 +88,15 @@ class DATA:
     def get_size(self):
         return self.size
     
+    def get_left_count(self):
+        return self.left_count
+    
+    def get_top_count(self):
+        return self.top_count
+    
+    def get_front_count(self):
+        return self.front_count
+    
     def slug(self, slug=None):
         if slug:
             self.slug = slug
@@ -147,7 +159,10 @@ class UpdateHandler(tornado.web.RequestHandler):
 
         self.write({
             "data_size": selected_data.get_size(),
-            "desc": selected_data.get_desc()
+            "desc": selected_data.get_desc(),
+            "top_count": selected_data.get_top_count(),
+            "left_count": selected_data.get_left_count(),
+            "front_count": selected_data.get_front_count()
         })
 
 
@@ -168,7 +183,10 @@ class MainHandler(tornado.web.RequestHandler):
             institutes = data.get_institute(),
             data_list = data.get_list(),
             desc = data.get_desc(),
-            data_size = data.get_size()
+            data_size = data.get_size(),
+            left_count = data.get_left_count(),
+            top_count = data.get_top_count(),
+            front_count = data.get_front_count()
         )
 
 
@@ -229,7 +247,7 @@ class ImageHandler(tornado.web.RequestHandler):
         elif dtype == "top" or dtype == "top-resized":
             prefix = "top"
         elif dtype == "front" or dtype == "front-resized":
-            prefix = "02_quercy_10_merged"
+            prefix = "front"
         
         if dtype == "preview":
             self.path = os.path.join(

res/fossil_reader.py

@@ -6,30 +6,41 @@ import os
 from sh import du
 
 
-directory = "/mnt/LSDF/ASTOR/fossils_for_nicholas/"
-con = lite.connect('fossil.db')
+directory = "/home/ntj/fossils_for_nicholas/"
 
+con = lite.connect('fossil.db')
 with con:
     cur = con.cursor()    
     for folder in os.listdir(directory):
         with open(directory+folder+'/'+folder+'.txt', 'r') as myfile:
             data=myfile.read().replace('\n', '')
 
-        fsize = du(directory+folder+"/slices/")
+        fsize = du(directory+folder+"/"+folder+".zip")
         fsize = fsize.stdout.split("\t")[0].strip()
-    
+
+        # path joining version for other paths
+        left_dir = directory+folder+"/left"
+        top_dir = directory+folder+"/top"
+        front_dir = directory+folder+"/front"
+        total_left = len([name for name in os.listdir(left_dir) if (os.path.join(left_dir, name)).endswith('.tif')])
+        total_top = len([name for name in os.listdir(top_dir) if (os.path.join(top_dir, name)).endswith('.tif')])
+        total_front = len([name for name in os.listdir(front_dir) if (os.path.join(front_dir, name)).endswith('.tif')])
+
         index = int(folder[-5:])
         name = str(folder)
         desc = data
         size = fsize
-        cur.execute("INSERT INTO Fossil VALUES (?, ?, ?, ?);", (index, name, desc, size)) 
+
+        #print name, size, total_left
+
+        cur.execute("INSERT INTO Fossil VALUES (?, ?, ?, ?, ?, ?, ?);", (index, name, desc, size, total_left, total_top, total_front)) 
 
 """
 #CREATE TABLE
 con = lite.connect('fossil.db')
 with con:
     cur = con.cursor()    
-    cur.execute("CREATE TABLE Fossil(Id INT, Name TEXT, Description TEXT, Size INT)")
+    cur.execute("CREATE TABLE Fossil(Id INT, Name TEXT, Description TEXT, Size INT, Left INT, Top INT, Front INT)")
     #cur.execute("INSERT INTO Cars VALUES(1,'Audi',52642)")
     #cur.execute("INSERT INTO Cars VALUES(2,'Mercedes',57127)")
     #cur.execute("INSERT INTO Cars VALUES(3,'Skoda',9000)")

static/fossil/css/style.css

@@ -331,3 +331,27 @@ hr {
 .target {
     width: auto;
 }
+
+#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;
+}
+
+.slice-count {
+    visibility: hidden;
+}
+

static/fossil/js/script.js

@@ -1,32 +1,51 @@
 $(function() {
 
+    $("#front-quality-text").text( ($("#img-front").width()  / parseInt($("#top-count").text())).toFixed(2).toString() + "%");
+    $("#top-quality-text").text( ($("#img-top").width()  / parseInt($("#front-count").text())).toFixed(2).toString() + "%");
+    $("#left-quality-text").text(  ($("#placeholder-left").width()  / parseInt($("#front-count").text())).toFixed(2).toString() + "%"); 
+
     $( "#slider-left" ).slider({
         range: "max",
         min: 1,
-        max: 2016,
+        max: parseInt($("#left-count").text()),
         value: 1,
         slide: function( event, ui ) {
-            console.log(ui.value);
+            //console.log(ui.value);
+            var name = $( "select option:selected" ).text();
+            var id = $( "select option:selected" ).val();
+            $("#left-text").text(ui.value);
+            // update image src
+            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
         }
     });
     
     $( "#slider-right" ).slider({
         range: "max",
         min: 1,
-        max: 2016,
+        max: parseInt($("#front-count").text()),
         value: 1,
         slide: function( event, ui ) {
-            console.log(ui.value);
+            //console.log(ui.value);
+            var name = $( "select option:selected" ).text();
+            var id = $( "select option:selected" ).val();
+            $("#front-text").text(ui.value);
+            // update image src
+            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
         }
     });
     
     $( "#slider-center" ).slider({
         range: "max",
         min: 1,
-        max: 2016,
+        max: parseInt($("#top-count").text()),
         value: 1,
         slide: function( event, ui ) {
-            console.log(ui.value);
+            //console.log(ui.value);
+            var name = $( "select option:selected" ).text();
+            var id = $( "select option:selected" ).val();
+            $("#top-text").text(ui.value);
+            // update image src
+            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
         }
     });
     
@@ -52,11 +71,33 @@ $(function() {
                     if (response["desc"][i]["type"] == "i") {
                         tmp = "<i>" + response["desc"][i]["text"] + "</i>";
                     } else if (response["desc"][i]["type"] == "p") {
-                        tmp = "<p>" + response["desc"][i]["text"] + "</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" );
+                $("#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));
+            
+                $("#front-quality-text").text( " " + ($("#img-front").width() / response.front_count).toFixed(2).toString() + "%");
+                $("#top-quality-text").text(" " + ($("#img-top").width()  / response.top_count).toFixed(2).toString() + "%");
+                $("#left-quality-text").text(" " + ($("#placeholder-left").width()  / response.left_count).toFixed(2).toString() + "%"); 
+            
             },
             error: function () {
                 console.log("Error.")
@@ -64,4 +105,88 @@ $(function() {
         });
         $("#img-preview").attr("src", "img?id="+index+"&name="+name+"&type=preview&counter=0");
     });
+
+    $("#front-left").click( function() {
+        var index = parseInt($("#front-text").text());
+        var name = $( "select option:selected" ).text();
+        var id = $( "select option:selected" ).val();
+        index -= 1;
+        if (index < 1) {
+            index = 1;
+        }
+        $("#front-text").text(index);
+        $("#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());
+        var name = $( "select option:selected" ).text();
+        var id = $( "select option:selected" ).val();
+
+        //console.log(index, max_count);
+        index += 1;
+        if (index > max_count) {
+            index = max_count;
+        }
+        $("#front-text").text(index);
+        // update image src
+        $("#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());
+        var name = $( "select option:selected" ).text();
+        var id = $( "select option:selected" ).val();
+        index -= 1;
+        if (index < 1) {
+            index = 1;
+        }
+        $("#top-text").text(index);
+        $("#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());
+        var name = $( "select option:selected" ).text();
+        var id = $( "select option:selected" ).val();
+
+        //console.log(index, max_count);
+        index += 1;
+        if (index > max_count) {
+            index = max_count;
+        }
+        $("#top-text").text(index);
+        // update image src
+        $("#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());
+        var name = $( "select option:selected" ).text();
+        var id = $( "select option:selected" ).val();
+        index -= 1;
+        if (index < 1) {
+            index = 1;
+        }
+        $("#left-text").text(index);
+        $("#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());
+        var name = $( "select option:selected" ).text();
+        var id = $( "select option:selected" ).val();
+
+        //console.log(index, max_count);
+        index += 1;
+        if (index > max_count) {
+            index = max_count;
+        }
+        $("#left-text").text(index);
+        // update image src
+        $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
+    });
 });

templates/index.html

@@ -96,35 +96,37 @@
 
         <div id="img-right">
             <div class="cont">
-                <img class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
-	            <span id="image-text">Front: <span>1</span></span>
-                <img class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                <img id="front-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+                <span id="image-text">Front: <span id="front-text">1</span><span id="front-count-text"> (max: {{ front_count }}) </span><span id="front-quality-text"></span></span>
+                <img id="front-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
             </div>
 	        <div class="photowrapper">
-                <img src="img?id={{ index }}&name={{ name }}&type=front-resized&counter=0"/>
+                <img id="img-front" src="img?id={{ index }}&name={{ name }}&type=front-resized&counter=0"/>
             </div>
-	        <div id="slider-right"></div>
+            <div id="slider-right"></div><div class="slice-count" id="front-count">{{ front_count }}</div>
         </div>
         
         <div id="img-center">
             <div class="cont">
-                <img class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
-	            <span id="image-text">Top: <span>1</span></span>
-                <img class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                <img id="top-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+                <span id="image-text">Top: <span id="top-text">1</span><span id="top-count-text"> (max: {{ top_count }}) </span><span id="top-quality-text"></span></span>
+                <img id="top-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
             </div>
 	        <div class="photowrapper">
-                <img src="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0"/>
+                <img id="img-top" src="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0"/>
             </div>
-	        <div id="slider-center"></div>
+	        <div id="slider-center"></div><div class="slice-count" id="top-count">{{ top_count }}</div>
+
             <div class="cont">
-                <img class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
-	            <span id="image-text">Left: <span>1</span></span>
-                <img class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                <img id="left-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
+                <span id="image-text">Left: <span id="left-text">1</span><span id="left-count-text"> (max: {{ left_count }}) </span><span id="left-quality-text"></span></span>
+                <img id="left-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
             </div>
 	        <div class="photowrapper">
-                <img src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/>
+                <img id="placeholder-left" src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/>
             </div>
-	        <div id="slider-left"></div>
+	        <div id="slider-left"></div><div class="slice-count" id="left-count">{{ left_count }}</div>
+
         </div>
     </div>
     <hr>