diff --git a/README.md b/README.md
index 14ed5b365267cff5097a71467c0e000f5278e725..024156723ab93c0f5f5fb69108cfba0f7667b3dc 100644
--- 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
diff --git a/folder_template.html b/folder_template.html
index 1ca12cd35c03701b450812283359d5e5df46d432..d2f7943085b05b9eb91ba7a5c63cacacad955fd9 100644
--- 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}
diff --git a/quack.css b/quack.css
index 671d513bed9ae8b165c392439e2ec5116fdf2605..55a637273e84e8aae6c6c3fad19bcbfb889b690d 100644
--- 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;
+}
diff --git a/quack.js b/quack.js
index f1252aba7c72cd71f45d6f0cf023f5277aa636b0..e2b3495bdcbcc12fb3b227b89dfeac25ff12006d 100644
--- a/quack.js
+++ b/quack.js
@@ -1,6 +1,7 @@
//! 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;
+
diff --git a/quack.sh b/quack.sh
index 2bff434374c3a89e292e821fb98e1b2b4ca19aa8..a58a0e61fd474dbc81c22e2a1224f190a2ce3220 100755
--- 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'
diff --git a/quack_folder.js b/quack_folder.js
new file mode 100644
index 0000000000000000000000000000000000000000..33a7f1776748832d652024626aacac994a746f81
--- /dev/null
+++ b/quack_folder.js
@@ -0,0 +1,28 @@
+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;