<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quack - ${SOURCE_SHORT}</title>
<link rel="stylesheet" type="text/css" href="${UP}quack.css" />
<script src="${UP}openseadragon.min.js"></script>
<script src="${UP}quack.js"></script>
<script>
${OCR_CONTENT}
${IDNEXTS}
${IDPREVS}
blackoverlayurl = "${BLACK}";
whiteoverlayurl = "${WHITE}";
</script>
</head>
<body class="previewpage">
<h1>Quack <span style="color: #999">${SOURCE_SHORT}</span></h1>
<div class="imagesnippet">${SNIPPET}</div>
<div id="controlpanel" class="control">
<p class="navigation">${NAVIGATION}</p>
${ALTERNATIVES}
<p class="histogram"><img src= "${HISTOGRAM}" width="256" height="200" alt="histogram"/></p>
<p class="greystats">
Darkest ${GREY_FIRST}: ${GREY_PERCENT_FIRST}%<br/>
Spike ${GREY_SPIKE}: ${GREY_PERCENT_SPIKE}%<br/>
Lightest ${GREY_LAST}: ${GREY_PERCENT_LAST}%<br/>
Unique greyscale values: ${GREY_UNIQUE}<br/>
ALTO-accuracy: ${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>
<p><input type="checkbox" id="toggle_blown" onClick="toggleBlown();">Black/white</input></p>
<div id="idbox">ID: </div>
<div id="idnextbox">IDNEXT: </div>
<div id="ocrbox"> </div>
</div>
<div id="zoom-display" class="openseadragon">
<div id="gridbox">
<div class="gridline gridlinex" style="top: 100px"></div>
<div class="gridline gridlinex" style="top: 200px"></div>
<div class="gridline gridlinex" style="top: 300px"></div>
<div class="gridline gridlinex" style="top: 400px"></div>
<div class="gridline gridlinex" style="top: 500px"></div>
<div class="gridline gridlinex" style="top: 600px"></div>
<div class="gridline gridlinex" style="top: 700px"></div>
<div class="gridline gridlinex" style="top: 800px"></div>
<div class="gridline gridlinex" style="top: 900px"></div>
<div class="gridline gridlinex" style="top: 1000px"></div>
<div class="gridline gridlinex" style="top: 1100px"></div>
<div class="gridline gridlinex" style="top: 1200px"></div>
<div class="gridline gridlinex" style="top: 1300px"></div>
<div class="gridline gridlinex" style="top: 1400px"></div>
<div class="gridline gridlinex" style="top: 1500px"></div>
<div class="gridline gridlinex" style="top: 1600px"></div>
<div class="gridline gridlinex" style="top: 1700px"></div>
<div class="gridline gridlinex" style="top: 1800px"></div>
<div class="gridline gridlinex" style="top: 1900px"></div>
<div class="gridline gridlinex" style="top: 2000px"></div>
<div class="gridline gridliney" style="left: 100px"></div>
<div class="gridline gridliney" style="left: 200px"></div>
<div class="gridline gridliney" style="left: 300px"></div>
<div class="gridline gridliney" style="left: 400px"></div>
<div class="gridline gridliney" style="left: 500px"></div>
<div class="gridline gridliney" style="left: 600px"></div>
<div class="gridline gridliney" style="left: 700px"></div>
<div class="gridline gridliney" style="left: 800px"></div>
<div class="gridline gridliney" style="left: 900px"></div>
<div class="gridline gridliney" style="left: 1000px"></div>
<div class="gridline gridliney" style="left: 1100px"></div>
<div class="gridline gridliney" style="left: 1200px"></div>
<div class="gridline gridliney" style="left: 1300px"></div>
<div class="gridline gridliney" style="left: 1400px"></div>
<div class="gridline gridliney" style="left: 1500px"></div>
<div class="gridline gridliney" style="left: 1600px"></div>
<div class="gridline gridliney" style="left: 1700px"></div>
<div class="gridline gridliney" style="left: 1800px"></div>
<div class="gridline gridliney" style="left: 1900px"></div>
<div class="gridline gridliney" style="left: 2000px"></div>
</div>
</div>
<script type="text/javascript">
myDragon = OpenSeadragon({
id: "zoom-display",
maxZoomLevel: 16,
showNavigator: false,
wrapHorizontal: false,
tileSources: {
${TILE_SOURCES}
},
${OVERLAYS}
});
</script>
<!-- TODO: Create decent bread crumbs -->
<p>Parent folder: <a href="index.html">${PARENT}</a></p>
<p>Source: ${SOURCE}</p>
<p>Direct: <a href="${IMAGE}">${IMAGE}</a></p>
<p>Generated: ${DATE}</p>
<div class="alto">
<h2>ALTO XML</h2>
<p>Source: <a href="${ALTO}">${ALTO}</a></p>
${ALTO_ELEMENTS_HTML}
</div>
<h2>Presentation preview</h2>
<p>Downscaled to 150DPI source equivalent, leveled, unsharpened and stored as JPEG.</p>
<div id="presentation-display" class="openseadragon">
</div>
<script type="text/javascript">
presentationDragon = OpenSeadragon({
id: "presentation-display",
maxZoomLevel: 2,
showNavigator: false,
wrapHorizontal: false,
tileSources: {
type: 'legacy-image-pyramid',
levels:[
{
url: '${PRESENTATION_LINK}',
width: ${PRESENTATION_WIDTH},
height: ${PRESENTATION_HEIGHT}
},
]
}});
</script>
<h2>Full histogram data</h2>
<pre>
${GREY_ALL}
</pre>
</body>
</html>