2023-02-22 02:59:40 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2023-06-29 23:41:45 +03:00
|
|
|
<title>Drawer Comparison Demo</title>
|
2023-02-22 02:59:40 +03:00
|
|
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
|
|
|
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
|
|
|
|
<script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
|
|
|
|
|
<link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
|
2023-07-20 01:18:56 +03:00
|
|
|
<script type="text/javascript" src="./webgldemodrawer.js"></script>
|
2023-06-27 04:44:03 +03:00
|
|
|
|
2023-06-29 23:41:45 +03:00
|
|
|
<script type="module" src="./drawercomparison.js"></script>
|
2023-02-22 02:59:40 +03:00
|
|
|
<style type="text/css">
|
2023-03-06 00:08:32 +03:00
|
|
|
.content{
|
|
|
|
|
max-width:960px;
|
|
|
|
|
margin: 0 auto;
|
2023-02-22 02:59:40 +03:00
|
|
|
}
|
2023-03-06 00:08:32 +03:00
|
|
|
.mirrored{
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns:50% 50%;
|
|
|
|
|
gap: 2em;
|
|
|
|
|
}
|
|
|
|
|
.viewer-container {
|
|
|
|
|
/* width: 600px;
|
|
|
|
|
height: 400px; */
|
|
|
|
|
aspect-ratio: 4 / 3;
|
2023-02-22 02:59:40 +03:00
|
|
|
border: thin gray solid;
|
2023-03-06 00:08:32 +03:00
|
|
|
position:relative;
|
2023-02-22 02:59:40 +03:00
|
|
|
}
|
2023-03-06 00:08:32 +03:00
|
|
|
.example-code{
|
|
|
|
|
background-color:tan;
|
|
|
|
|
border: thin black solid;
|
|
|
|
|
padding:10px;
|
|
|
|
|
display:inline-block;
|
2023-06-07 22:42:16 +03:00
|
|
|
width:95%;
|
2023-03-06 00:08:32 +03:00
|
|
|
}
|
|
|
|
|
.description pre{
|
|
|
|
|
display:inline-block;
|
|
|
|
|
background-color:gainsboro;
|
|
|
|
|
padding:0;
|
|
|
|
|
margin:0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-22 02:59:40 +03:00
|
|
|
.image-options{
|
|
|
|
|
display: grid;
|
2023-03-06 00:08:32 +03:00
|
|
|
grid-template-columns: 2em 9em 1fr;
|
|
|
|
|
padding:3px;
|
|
|
|
|
border: thin gray solid;
|
|
|
|
|
}
|
|
|
|
|
.option-grid{
|
|
|
|
|
display: grid;
|
2023-07-09 19:05:17 +03:00
|
|
|
grid-template-columns: 7em 7em 9em 9em 10em 9em;
|
2023-03-06 00:08:32 +03:00
|
|
|
/* grid-template-columns: repeat(5, auto); */
|
2023-02-22 02:59:40 +03:00
|
|
|
}
|
|
|
|
|
.image-options input[type=number]{
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
2023-03-06 00:08:32 +03:00
|
|
|
.image-options select{
|
|
|
|
|
width: 5em;
|
|
|
|
|
}
|
2023-02-22 02:59:40 +03:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-03-06 00:08:32 +03:00
|
|
|
<div class="content">
|
2023-06-27 04:29:08 +03:00
|
|
|
|
2023-06-29 23:41:45 +03:00
|
|
|
<h2>Compare behavior of <strong>Context2d</strong> and <strong>WebGL</strong> drawers</h2>
|
2023-06-27 04:29:08 +03:00
|
|
|
<div class="mirrored">
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Context2d drawer (default in OSD <= 4.1.0)</h3>
|
2023-06-30 04:55:59 +03:00
|
|
|
<div id="canvasdrawer" class="viewer-container"></div>
|
2023-06-27 04:29:08 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<h3>New WebGL drawer</h3>
|
|
|
|
|
<div id="webgl" class="viewer-container"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="image-picker">
|
|
|
|
|
<h3>Image options (drag and drop to re-order images)</h3>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-06-07 22:42:16 +03:00
|
|
|
<h2>HTMLDrawer: legacy pre-HTML5 drawer that uses <img> elements for tiles</h2>
|
|
|
|
|
<div class="mirrored">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="description">
|
|
|
|
|
HTML-based rendering can be selected in two different ways:
|
|
|
|
|
</div>
|
|
|
|
|
<pre class="example-code">
|
2023-06-19 02:08:33 +03:00
|
|
|
// via the 'html' drawer option:
|
2023-06-07 22:42:16 +03:00
|
|
|
let viewer = OpenSeadragon({
|
|
|
|
|
...
|
2023-06-19 02:08:33 +03:00
|
|
|
drawer: 'html',
|
2023-06-07 22:42:16 +03:00
|
|
|
...
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// or by passing the HTMLDrawer constructor
|
|
|
|
|
let viewer = OpenSeadragon({
|
|
|
|
|
...
|
2023-06-19 02:08:33 +03:00
|
|
|
drawer:OpenSeadragon.HTMLDrawer,
|
2023-06-07 22:42:16 +03:00
|
|
|
...
|
|
|
|
|
});
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="htmldrawer" class="viewer-container"></div>
|
|
|
|
|
</div>
|
2023-02-22 02:59:40 +03:00
|
|
|
</div>
|
|
|
|
|
|
2023-03-06 00:08:32 +03:00
|
|
|
|
2023-06-07 22:42:16 +03:00
|
|
|
|
2023-02-22 02:59:40 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
