Added blowout overlays to folder view

d9f2d3bd · Toke Eskildsen · 43d71fd6 · d9f2d3bd · d9f2d3bd · d9f2d3bd
Commit d9f2d3bd authored 11 years ago by Toke Eskildsen
--- a/README.md
+++ b/README.md
@@ -34,7 +34,6 @@ An enhanced [ALTO](http://www.loc.gov/standards/alto/)-viewer for Quality Assura
  * ALTO files at another location than image files
 * Add image & ALTO sample files
 * Integrate greyscale statistics
- * Show blown high- and low-lights on the thumbnail in folder view
 ## Verbiage

--- a/folder_template.html
+++ b/folder_template.html
@@ -5,6 +5,7 @@
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quack - ${SRC_FOLDER}</title>
    <link rel="stylesheet" type="text/css" href="${UP}quack.css" />
+    <script src="${UP}quack_folder.js"></script>
 </head>
 <body class="folder">
@@ -15,6 +16,7 @@
 <div class="images">
 <h2>Pages</h2>
+<p><input type="checkbox" id="toggle_blown_thumbs" onClick="toggleBlownThumbs();">Show absolute black and white</input></p>
 <div class="thumbs">${THUMBS_HTML}</div>
 <div class="imagelinks">
 ${IMAGES_HTML}

--- a/quack.css
+++ b/quack.css
@@ -149,3 +149,22 @@ ul.alternatives li + li:before {
    border: 1px solid black;
    overflow: hidden;
 }
+/* Folder view specific styles below */
+div.imagelinks {
+    clear: both;
+}
+div.thumb {
+    float: left;
+}
+div.thumbs a {
+    position: relative;
+    display: block;
+}
+.thumboverlay {
+    /* Hidden by default, enable with JavaScript */
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
--- a/quack.js
+++ b/quack.js
 //! Toggling of grid and overlays
 function toggleGrid() {
    if (document.getElementById('toggle_grid').checked) {
        state = 'block';
    } else {
@@ -127,6 +128,8 @@ function outOverlay(overlay) {
 }
 function setupJS() {
+    // TODO: Check if this is an image page and if not, exit immediately
    toggleGrid();
    toggleTextBlock();
    toggleBlown();
@@ -152,3 +155,4 @@ function setupJS() {
    }
 }
 window.onload=setupJS;
--- a/quack.sh
+++ b/quack.sh
@@ -17,7 +17,7 @@
 #
 #
-# Quack 1.1 beta - Quality assurance tool for text scanning projects.
+# Quack 1.2 beta - Quality assurance tool for text scanning projects.
 # 
 # Generates zoomable (OpenSeadragon) views of scanned text pages with overlays
 # containing OCR-text from ALTO-files. The views are static HTML pages that
@@ -178,7 +178,7 @@ function copyFiles () {
        mkdir -p $DEST
    fi
    cp "${ROOT}/${DRAGON}" "$DEST"
-    cp "${ROOT}/quack.js" "$DEST"
+    cp ${ROOT}/*.js "$DEST"
    cp ${ROOT}/*.css "$DEST"
 }
@@ -216,6 +216,7 @@ function makeImageParams() {
    DEST_IMAGE="${DEST_FOLDER}/${BASE}.${IMAGE_DISP_EXT}"
    HIST_IMAGE="${DEST_FOLDER}/${BASE}.histogram.png"
    THUMB_IMAGE="${DEST_FOLDER}/${BASE}.thumb.jpg"
+    THUMB_LINK=${THUMB_IMAGE##*/}
    WHITE_IMAGE="${DEST_FOLDER}/${BASE}.white.png"
    BLACK_IMAGE="${DEST_FOLDER}/${BASE}.black.png"
    PRESENTATION_IMAGE="${DEST_FOLDER}/${BASE}.presentation.jpg"
@@ -265,6 +266,7 @@ function makeImages() {
    local DEST_IMAGE="${DEST_FOLDER}/${BASE}.${IMAGE_DISP_EXT}"
    local HIST_IMAGE="${DEST_FOLDER}/${BASE}.histogram.png"
    local THUMB_IMAGE="${DEST_FOLDER}/${BASE}.thumb.jpg"
+    local THUMB_LINK=${THUMB_IMAGE##*/}
    local WHITE_IMAGE="${DEST_FOLDER}/${BASE}.white.png"
    local BLACK_IMAGE="${DEST_FOLDER}/${BASE}.black.png"
    local THUMB_OVERLAY_WHITE="${DEST_FOLDER}/${BASE}.white.thumb.png"
@@ -333,8 +335,8 @@ function makeImages() {
        # handle resizing of alpha-channel PNGs followed by color reduction
        convert "$BLACK_IMAGE" -resize $THUMB_IMAGE_SIZE -colors 2 "$THUMB_OVERLAY_BLACK"
    fi
 }
+export -f makeImages
 # Generates overlays for the stated block and updates idnext & idprev
 # altoxml (newlines removed) tag class
@@ -600,7 +602,6 @@ function makePreviewPage() {
      ]"$'\n'
    fi
    IHTML=`template "$IHTML" "TILE_SOURCES" "$TILE_SOURCES"`
-    THUMB_LINK=${THUMB_IMAGE##*/}
    IHTML=`template "$IHTML" "THUMB" "$THUMB_LINK"`
    IHTML=`template "$IHTML" "THUMB_WIDTH" "$THUMB_WIDTH"`
    IHTML=`template "$IHTML" "THUMB_HEIGHT" "$THUMB_HEIGHT"`
@@ -671,7 +672,6 @@ function makeIndex() {
    # Generate graphics
    # http://stackoverflow.com/questions/11003418/calling-functions-with-xargs-within-a-bash-script
-    export -f makeImages
    echo "$IMAGES" | xargs -n 1 -I'{}' -P $THREADS bash -c 'makeImages "$@"' _ "$SRC_FOLDER" "$DEST_FOLDER" "{}" "$THUMB_IMAGE_SIZE" "$CROP_PERCENT" "$PRESENTATION_SCRIPT" "$TILE" \;
    # Generate pages
@@ -685,7 +685,9 @@ function makeIndex() {
            local NEXT_IMAGE=`echo "$IMAGES" | grep -A 1 "$I" | tail -n 1 | grep -v "$I"`
            makePreviewPage $UP $PARENT $SRC_FOLDER $DEST_FOLDER $I "$PREV_IMAGE" "$NEXT_IMAGE"
            IMAGES_HTML="${IMAGES_HTML}<li><a href=\"$PAGE_LINK\">$BASE</a></li>"$'\n'
-            THUMBS_HTML="${THUMBS_HTML}<a class=\"thumblink\" href=\"$PAGE_LINK\"><img class=\"thumbimg\" src=\"${THUMB_LINK}\" alt=\"$BASE\" title=\"$BASE\" width=\"$THUMB_WIDTH\" height=\"$THUMB_HEIGHT\"/></a>"$'\n'
+            THUMBS_HTML="${THUMBS_HTML}<div class=\"thumb\"><a class=\"thumblink\" href=\"$PAGE_LINK\"><span class=\"thumboverlay\"></span><img class=\"thumbimg\" src=\"${THUMB_LINK}\" alt=\"$BASE\" title=\"$BASE\" width=\"$THUMB_WIDTH\" height=\"$THUMB_HEIGHT\"/></a></div>"$'\n'
+#            THUMBS_HTML="${THUMBS_HTML}<a class=\"thumblink\" href=\"$PAGE_LINK\"><img class=\"thumbimg\" src=\"${THUMB_LINK}\" alt=\"$BASE\" title=\"$BASE\" width=\"$THUMB_WIDTH\" height=\"$THUMB_HEIGHT\"/></a>"$'\n'
            PREV_IMAGE=$I
        done
        IMAGES_HTML="${IMAGES_HTML}</ul>"$'\n'

--- a/quack_folder.js
+++ b/quack_folder.js
+function toggleBlownThumbs() {    
+    if (document.getElementById('toggle_blown_thumbs').checked) {
+        state = 'block';
+    } else {
+        state = 'none';
+    }
+    var content = document.getElementsByClassName('thumboverlay');
+    for (var i = 0 ; i < content.length ; i++) {
+        content[i].style.display = state;
+    }
+}
+function setupThumbOverlays() {
+    var content = document.getElementsByClassName('thumblink');
+    for (var i = 0 ; i < content.length ; i++) {
+        var href = content[i].href;
+        var span = content[i].getElementsByClassName('thumboverlay')[0];
+        var img = content[i].getElementsByClassName('thumbimg')[0];
+        var base = img.src.substr(0, img.src.lastIndexOf('.'));
+        var base = base.substr(0, base.lastIndexOf('.'));
+        span.style.width = img.width + "px";
+        span.style.height = img.height + "px";
+        span.style.background = "url(" + base + ".black.thumb.png) 100% 100%, url(" + base + ".white.thumb.png) 100% 100%";
+        document.title = span.style.background;
+    }
+}
+window.onload=setupThumbOverlays;