From 1dae42dea485d52e52a7f58a335fa70de0515f85 Mon Sep 17 00:00:00 2001
From: Toke Eskildsen <te@ekot.dk>
Date: Thu, 9 Jan 2014 22:24:50 +0100
Subject: [PATCH] Optional histograms on overview page, related to #20 (Display
histograms on mouse-over on folder view)
---
quack.sh | 12 ++++++++++--
web/folder_template.html | 3 ++-
web/quack.css | 14 +++++++++++---
web/quack_folder.js | 18 ++++++++++++++++++
4 files changed, 41 insertions(+), 6 deletions(-)
diff --git a/quack.sh b/quack.sh
index a015ead..f904c31 100755
--- a/quack.sh
+++ b/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
diff --git a/web/folder_template.html b/web/folder_template.html
index e15bb9c..2d207ac 100644
--- a/web/folder_template.html
+++ b/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>
diff --git a/web/quack.css b/web/quack.css
index c38514f..a3b6168 100644
--- a/web/quack.css
+++ b/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; }
diff --git a/web/quack_folder.js b/web/quack_folder.js
index 33a7f17..0600e41 100644
--- a/web/quack_folder.js
+++ b/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');
--
GitLab