Skip to content
Snippets Groups Projects
Commit 212f4edb authored by Toke Eskildsen's avatar Toke Eskildsen
Browse files

Merge branch 'master' of github.com:tokee/quack

parents 0e61227a 1dae42de
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
analyze.sh
+ 10
− 2
View file @ 212f4edb
......@@ -43,7 +43,7 @@ function im_identify() {
# Input: image
# Sample: foo.png
# Produces foo.grey with $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY
# Output: $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY
# Output: $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $ZEROES $HOLES
function grey_stats() {
local SRC="$1"
if [ ! -f "$SRC" ]; then
......@@ -56,6 +56,9 @@ function grey_stats() {
local INFO=`cat "$IDENTIFY"`
# TODO: No good as the histogram data might be much less than 256
local VALUES=`cat "$IDENTIFY" | grep -A 256 Histogram`
if [ ! "." == ".`echo "$VALUES" | grep Colormap`" ]; then
local VALUES=`echo "$VALUES" | grep -B 256 Colormap`
fi
local RAW_VALUES=`echo "$VALUES" | grep "[0-9]\\+: ("`
# local VALUES="$INFO"
......@@ -70,6 +73,11 @@ function grey_stats() {
local LAST_COUNT=`echo $RAW_VALUES | tail -n 1 | grep -o " [0-9]\\+:" | grep -o "[0-9]\\+"`
local LAST_GREY=`echo $RAW_VALUES | tail -n 1 | grep -o " ([0-9 ,]*)" | sed 's/ //g'`
local ZEROES=$((256-UNIQUE))
local SPAN=$((LAST_GREY-FIRST_GREY+1))
local EDGE=$((256-SPAN))
local HOLES=$((ZEROES-EDGE))
local SPIKE_COUNT=`echo $RAW_VALUES | sort -n | tail -n 1 | grep -o " [0-9]\\+:" | grep -o "[0-9]\\+"`
local SPIKE_GREY=`echo $RAW_VALUES | sort -n | tail -n 1 | grep -o " ([0-9 ,]*)" | sed 's/ //g'`
......@@ -87,7 +95,7 @@ function grey_stats() {
IFS=$SAVEIFS
echo "$PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $SPIKE_COUNT $SPIKE_PERCENT $SPIKE_GREY"
echo "$PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $SPIKE_COUNT $SPIKE_PERCENT $SPIKE_GREY $ZEROES $HOLES"
}
# Produces a histogram over greyscale intensities in the given image
......
quack.sh
+ 13
− 3
View file @ 212f4edb
......@@ -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]\\+ "`
......@@ -794,7 +799,7 @@ function makePreviewPage() {
# TODO: Use destination if that is lossless and faster to open?
local GREY=`grey_stats "$SOURCE_IMAGE"`
# $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $COUNT_SPIKE $PERCENT_SPIKE $GREY_SPIKE
# $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $COUNT_SPIKE $PERCENT_SPIKE $GREY_SPIKE $ZEROES $HOLES
# 1000095 512 82362 8.23 (0,0,0) 255 .02 (255,255,255)
GREY_PIXELS=`echo "$GREY" | cut -d\ -f1`
GREY_UNIQUE=`echo "$GREY" | cut -d\ -f2`
......@@ -807,6 +812,8 @@ function makePreviewPage() {
GREY_COUNT_SPIKE=`echo "$GREY" | cut -d\ -f9`
GREY_PERCENT_SPIKE=`echo "$GREY" | cut -d\ -f10`
GREY_SPIKE=`echo "$GREY" | cut -d\ -f11`
GREY_ZEROES=`echo "$GREY" | cut -d\ -f12`
GREY_HOLES=`echo "$GREY" | cut -d\ -f13`
local GREY_ALL_SOURCE=`im_identify "$SOURCE_IMAGE"`
GREY_ALL=`cat "$GREY_ALL_SOURCE" | grep -A 256 Histogram | tail -n 256`
......@@ -865,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
......@@ -922,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
+ 2
− 1
View file @ 212f4edb
......@@ -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/image_template.html
+ 1
− 0
View file @ 212f4edb
......@@ -30,6 +30,7 @@ Dark ${GREY_FIRST}: ${GREY_PERCENT_FIRST}%<br/>
Spike ${GREY_SPIKE}: ${GREY_PERCENT_SPIKE}%<br/>
Light ${GREY_LAST}: ${GREY_PERCENT_LAST}%<br/>
Unique greyscale values: ${GREY_UNIQUE}<br/>
Histogram holes: ${GREY_HOLES}<br/>
ALTO-PC: ${ACCURACY}%
<p><input type="checkbox" id="toggle_grid" onClick="toggleGrid();">Grid</input></p>
<p><input type="checkbox" id="toggle_textblock" checked="checked" onClick="toggleTextBlock();">TextBlocks</input></p>
......
web/quack.css
+ 140
− 9
View file @ 212f4edb
......@@ -126,21 +126,30 @@ div.openseadragon-canvas canvas {
.highlight {
opacity: 0.4;
filter: alpha(opacity=40);
margin: -2px;
border: 2px solid #BE3333;
background-color: transparent;
}
.highlight:hover, .highlight:focus {
filter: alpha(opacity=70);
opacity: 0.7;
border: 4px solid #FF3333;
/* filter: alpha(opacity=70);
opacity: 0.7;*/
/* margin: -10px;
border: 10px solid #0000FF;*/
}
.group {
background-color: #9999FF;
/* All elements in a selected group */
.group_disabled {
/* background-color: #9999FF;*/
margin: -10px;
border: 10px solid #0000FF;
}
.next {
background-color: #3333FF;
/* background-color: #3333FF;
opacity: 0.8;
filter: alpha(opacity=80);
filter: alpha(opacity=80);*/
margin: -10px;
border: 10px solid #000088;
outline: 2px solid #000000;
}
.illustration {
opacity: 0.4;
......@@ -149,6 +158,7 @@ div.openseadragon-canvas canvas {
background-color: transparent;
}
.illustration.group {
margin: -3px;
border: 3px solid #9999FF;
opacity: 1.0;
filter: alpha(opacity=100);
......@@ -213,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;
}
......@@ -227,3 +237,124 @@ 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 on image page */
.g1 { background-color: #FF0000; }
.g2 { background-color: #00FF00; }
.g3 { background-color: #0000FF; }
.g4 { background-color: #FFFF00; }
.g5 { background-color: #00FFFF; }
.g6 { background-color: #FF00FF; }
.g7 { background-color: #FFAA00; }
.g8 { background-color: #AAFF00; }
.g9 { background-color: #AA00FF; }
.g10 { background-color: #FFFFAA; }
.g11 { background-color: #AAFFFF; }
.g12 { background-color: #FFAAFF; }
.
.g13 { background-color: #FF00AA; }
.g14 { background-color: #00FFAA; }
.g15 { background-color: #00AAFF; }
.g16 { background-color: #FF5500; }
.g17 { background-color: #55FF00; }
.g18 { background-color: #5500FF; }
.g19 { background-color: #FFFF55; }
.g20 { background-color: #55FFFF; }
.g21 { background-color: #FF55FF; }
.
.g22 { background-color: #FF0055; }
.g23 { background-color: #00FF55; }
.g24 { background-color: #0055FF; }
.g25 { background-color: #FFAAAA; }
.g26 { background-color: #AAFFAA; }
.g27 { background-color: #AAAAFF; }
.g25 { background-color: #FF5555; }
.g26 { background-color: #55FF55; }
.g27 { background-color: #5555FF; }
.g28 { background-color: #550000; }
.g29 { background-color: #005500; }
.g30 { background-color: #000055; }
.g31 { background-color: #555500; }
.g32 { background-color: #005555; }
.g33 { background-color: #550055; }
.g34 { background-color: #555500; }
.g35 { background-color: #555500; }
.g36 { background-color: #550055; }
.g37 { background-color: #555555; }
.g38 { background-color: #555555; }
.g39 { background-color: #555555; }
.
.g40 { background-color: #550055; }
.g41 { background-color: #005555; }
.g42 { background-color: #005555; }
.g43 { background-color: #55AA00; }
.g44 { background-color: #AA5500; }
.g45 { background-color: #AA0055; }
.g46 { background-color: #5555AA; }
.g47 { background-color: #AA5555; }
.g48 { background-color: #55AA55; }
.
.g49 { background-color: #5500AA; }
.g50 { background-color: #0055AA; }
.g51 { background-color: #00AA55; }
.g52 { background-color: #555555; }
.g53 { background-color: #555555; }
.g54 { background-color: #555555; }
.g55 { background-color: #55AAAA; }
.g56 { background-color: #AA55AA; }
.g57 { background-color: #AAAA55; }
.g58 { background-color: #AA0000; }
.g59 { background-color: #00AA00; }
.g60 { background-color: #0000AA; }
.g61 { background-color: #AAAA00; }
.g62 { background-color: #00AAAA; }
.g63 { background-color: #AA00AA; }
.g64 { background-color: #AA5500; }
.g65 { background-color: #55AA00; }
.g66 { background-color: #5500AA; }
.g67 { background-color: #AAAA55; }
.g68 { background-color: #55AAAA; }
.g69 { background-color: #AA55AA; }
.
.g70 { background-color: #AA0055; }
.g71 { background-color: #00AA55; }
.g72 { background-color: #0055AA; }
.g73 { background-color: #AAAA00; }
.g74 { background-color: #AAAA00; }
.g75 { background-color: #AA00AA; }
.g76 { background-color: #AAAAAA; }
.g77 { background-color: #AAAAAA; }
.g78 { background-color: #AAAAAA; }
.
.g79 { background-color: #AA00AA; }
.g80 { background-color: #00AAAA; }
.g81 { background-color: #00AAAA; }
.g82 { background-color: #AA5555; }
.g83 { background-color: #55AA55; }
.g84 { background-color: #5555AA; }
.g85 { background-color: #AAAAAA; }
.g86 { background-color: #AAAAAA; }
.g87 { background-color: #AAAAAA; }
web/quack.js
+ 25
− 2
View file @ 212f4edb
......@@ -77,7 +77,9 @@ var prevs = {};
function addForward(overlay, className) {
if (!document.getElementById(overlay)) return;
document.getElementById(overlay).className = document.getElementById(overlay).className + ' ' + className;
// console.log("Overlay " + overlay + " now has className " + document.getElementById(overlay).className);
if (overlay in nexts) {
// console.log("Adding to next " + nexts[overlay] + " for " + overlay);
addForward(nexts[overlay], className);
}
}
......@@ -193,15 +195,36 @@ function addResultBoxes() {
}
}
// Mark all groups (articles linked with IDNEXT) with class g$COUNT, starting from 1
function colorGroups() {
console.log('Coloring groups started');
var count=1
for (var i = 0; i < myDragon.overlays.length; i++) {
var id = myDragon.overlays[i].id;
var element = document.getElementById(id);
// element.className = element.className + ' g' + count;
// count++;
// continue;
if (('highlight' == element.className) && (id in nexts)) {
// console.log('id ' + id + ' was in nextx: ' + id + " " + nexts[id] + " with old className=" + element.className);
addForward(id, "g" + count);
count++;
}
}
console.log('Coloring groups finished');
}
function setupJS() {
// TODO: Check if this is an image page and if not, exit immediately
colorGroups();
toggleGrid();
toggleTextBlock();
toggleBlown();
addResultBoxes();
//! Create a callback for eack overlay with the overlay-ID as argument
// Create a callback for eack overlay with the overlay-ID as argument
for (var i = 0; i < myDragon.overlays.length; i++) {
id = myDragon.overlays[i].id;
shortid = id.split("/").pop();
......
web/quack_folder.js
+ 18
− 0
View file @ 212f4edb
......@@ -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');
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment