Optional histograms on overview page, related to #20 (Display histograms on...

Optional histograms on overview page, related to #20 (Display histograms on mouse-over on folder view)

quack.sh

@@ -321,6 +321,7 @@ function makeImageParams() {
     SOURCE_IMAGE="${SRC_FOLDER}/${IMAGE}"
     DEST_IMAGE="${DEST_FOLDER}/${BASE}.${IMAGE_DISP_EXT}"
     HIST_IMAGE="${DEST_FOLDER}/${BASE}.histogram.png"
+    HISTOGRAM_LINK=${HIST_IMAGE##*/}
     THUMB_IMAGE="${DEST_FOLDER}/${BASE}.thumb.jpg"
     THUMB_LINK=${THUMB_IMAGE##*/}
     WHITE_IMAGE="${DEST_FOLDER}/${BASE}.white.png"
@@ -373,6 +374,7 @@ function makeImages() {
     local SOURCE_IMAGE="${SRC_FOLDER}/${IMAGE}"
     local DEST_IMAGE="${DEST_FOLDER}/${BASE}.${IMAGE_DISP_EXT}"
     local HIST_IMAGE="${DEST_FOLDER}/${BASE}.histogram.png"
+    local HISTOGRAM_LINK=${HIST_IMAGE##*/}
     local THUMB_IMAGE="${DEST_FOLDER}/${BASE}.thumb.jpg"
     local THUMB_LINK=${THUMB_IMAGE##*/}
     local WHITE_IMAGE="${DEST_FOLDER}/${BASE}.white.png"
@@ -643,7 +645,7 @@ function resolveAlternatives() {
 # Creates only the HTML page itself. The corresponding makeImages must
 # be called before calling this function
 # up parent srcFolder dstFolder image prev_image next_image
-# Output: PAGE_LINK BASE THUMB_LINK THUMB_WIDTH THUMB_HEIGHT
+# Output: PAGE_LINK BASE THUMB_LINK THUMB_WIDTH THUMB_HEIGHT HISTOGRAM_LINK HISTOGRAM_WIDTH HISTOGRAM_HEIGHT
 function makePreviewPage() {
     local UP="$1"
     local PARENT="$2"
@@ -681,6 +683,9 @@ function makePreviewPage() {
     local TIDENTIFY=`identify "$THUMB_IMAGE" | grep -o " [0-9]\+x[0-9]\\+ "`
     THUMB_WIDTH=`echo $TIDENTIFY | grep -o "[0-9]\+x" | grep -o "[0-9]\+"`
     THUMB_HEIGHT=`echo $TIDENTIFY | grep -o "x[0-9]\+" | grep -o "[0-9]\+"`
+    local HIDENTIFY=`identify "$HIST_IMAGE" | grep -o " [0-9]\+x[0-9]\\+ "`
+    HISTOGRAM_WIDTH=`echo $HIDENTIFY | grep -o "[0-9]\+x" | grep -o "[0-9]\+"`
+    HISTOGRAM_HEIGHT=`echo $HIDENTIFY | grep -o "x[0-9]\+" | grep -o "[0-9]\+"`
 
     if [ ".true" == ".$PRESENTATION" ]; then
         local PIDENTIFY=`identify "$PRESENTATION_IMAGE" | grep -o " [0-9]\+x[0-9]\\+ "`
@@ -867,17 +872,20 @@ function makeIndex() {
 
     # Generate pages
     local THUMBS_HTML=""
+    local HISTOGRAMS_HTML=""
     local PREV_IMAGE=""
     if [ "." == ".$IMAGES" ]; then
         IMAGES_HTML="<p>No images</p>"$'\n'
     else
         IMAGES_HTML="<ul>"$'\n'
+        HISTOGRAMS_HTML="<ul>"$'\n'
         for I in $IMAGES; do
             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}<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'
+            HISTOGRAMS_HTML="${HISTOGRAMS_HTML}<div class=\"histograminfolder\"><a href=\"$PAGE_LINK\"><img src=\"${HISTOGRAM_LINK}\" alt=\"Histogram for $BASE\" title=\"Histogram for $BASE\" width=\"$HISTOGRAM_WIDTH\" height=\"$HISTOGRAM_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
@@ -924,7 +932,7 @@ function makeIndex() {
     fi
     popd > /dev/null
 
-    # UP, PARENT, SRC_FOLDER, DEST_FOLDER, IMAGES_HTML, THUMBS_HTML, SUBFOLDERS_HTML, EDITION_HTML, SNIPPET
+    # UP, PARENT, SRC_FOLDER, DEST_FOLDER, IMAGES_HTML, THUMBS_HTML, HISTOGRAMS_HTML, SUBFOLDERS_HTML, EDITION_HTML, SNIPPET
     ctemplate $FOLDER_TEMPLATE > $PP
     
     # Generate pages for sub folders

web/folder_template.html

@@ -17,8 +17,9 @@
 
 <div class="images">
 <h2>Pages</h2>
-<p><input type="checkbox" id="toggle_blown_thumbs" onClick="toggleBlownThumbs();">Show absolute black and white</input></p>
+<p><input type="checkbox" id="toggle_blown_thumbs" onClick="toggleBlownThumbs();">Show absolute black and white</input><br/><input type="checkbox" id="toggle_histograms" onClick="toggleHistograms();">Histogram view</input></p>
 <div class="thumbs">${THUMBS_HTML}</div>
+<div class="histograms">${HISTOGRAMS_HTML}</div>
 <div class="imagelinks">
 ${IMAGES_HTML}
 </div>

web/quack.css

@@ -223,10 +223,10 @@ ul.alternatives li + li:before {
 div.imagelinks {
     clear: both;
 }
-div.thumb {
+div.thumb, div.histograms div {
     float: left;
 }
-div.thumbs a {
+div.thumbs a, div.histograms a {
     position: relative;
     display: block;
 }
@@ -237,8 +237,16 @@ div.thumbs a {
     top: 0;
     left: 0;
 }
+.histograms img {
+    border: 1px dotted grey;
+    margin: 0.1em 0.2em 0.1em 0.2em;
+}
+.histograms {
+    display: none;
+}
+
 
-/* Linked articles */
+/* Linked articles on image page */
 
 .g1  { background-color: #FF0000; }
 .g2  { background-color: #00FF00; }

web/quack_folder.js

@@ -10,6 +10,24 @@ function toggleBlownThumbs() {
         content[i].style.display = state;
     }
 }
+function toggleHistograms() {    
+    if (document.getElementById('toggle_histograms').checked) {
+        thumb_state = 'none';
+        hist_state = 'block';
+    } else {
+        thumb_state = 'block';
+        hist_state = 'none';
+    }
+    
+    var content = document.getElementsByClassName('thumbs');
+    for (var i = 0 ; i < content.length ; i++) {
+        content[i].style.display = thumb_state;
+    }
+    var content = document.getElementsByClassName('histograms');
+    for (var i = 0 ; i < content.length ; i++) {
+        content[i].style.display = hist_state;
+    }
+}
 
 function setupThumbOverlays() {
     var content = document.getElementsByClassName('thumblink');