mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-29 16:46:08 +03:00
77 lines
2.4 KiB
HTML
77 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="author" content="viaWebGL">
|
||
|
|
<title>GLSL shaders for zoomable DZI images: openSeadragonGL</title>
|
||
|
|
<meta name="description" content="GLSL shaders for zoomable DZI images: openSeadragonGL">
|
||
|
|
<style rel = "stylesheet">
|
||
|
|
#viaWebGL {
|
||
|
|
background-color:black;
|
||
|
|
position:absolute;
|
||
|
|
height:100%;
|
||
|
|
width:100%;
|
||
|
|
left:0px;
|
||
|
|
top:0px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src='../../../../build/openseadragon/openseadragon.js'></script>
|
||
|
|
<script type='text/javascript' src='osd-gl.js'></script>
|
||
|
|
<script type='text/javascript' src='viawebgl.js'></script>
|
||
|
|
<script type='text/javascript'>
|
||
|
|
var DEMO = {};
|
||
|
|
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
|
||
|
|
// DEMO for a viewer with custom shaders
|
||
|
|
*/
|
||
|
|
window.onload = function(e){
|
||
|
|
DEMO.view = new SOBEL.Viewer().init();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script type='text/javascript'>
|
||
|
|
var SOBEL = {};
|
||
|
|
/*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~
|
||
|
|
/* SOBEL Viewer - Set a Sobel Shader for OpenSeaDragon
|
||
|
|
*/
|
||
|
|
SOBEL.Viewer = function() {
|
||
|
|
// Needed constants
|
||
|
|
this.tile_mode = 'tile-drawing';
|
||
|
|
this.iconPrefix = '../../../../build/openseadragon/images/';
|
||
|
|
this.source = "https://openseadragon.github.io/example-images/duomo/duomo.dzi";
|
||
|
|
this.vShader = 'vs.glsl';
|
||
|
|
this.fShader = 'fs.glsl';
|
||
|
|
}
|
||
|
|
|
||
|
|
SOBEL.Viewer.prototype.init = function() {
|
||
|
|
|
||
|
|
// Open a seadragon with two layers
|
||
|
|
this.openSD = OpenSeadragon({
|
||
|
|
tileSources: this.source,
|
||
|
|
prefixUrl: this.iconPrefix,
|
||
|
|
crossOriginPolicy: 'Anonymous',
|
||
|
|
id: 'viaWebGL',
|
||
|
|
drawer: 'canvas',
|
||
|
|
});
|
||
|
|
|
||
|
|
// Make a link to webGL
|
||
|
|
var seaGL = new openSeadragonGL(this.openSD);
|
||
|
|
seaGL.addHandler(this.tile_mode);
|
||
|
|
seaGL.vShader = this.vShader;
|
||
|
|
seaGL.fShader = this.fShader;
|
||
|
|
|
||
|
|
// Add a custom button
|
||
|
|
seaGL.button({
|
||
|
|
tooltip: 'Toggle shaders',
|
||
|
|
prefix: this.iconPrefix,
|
||
|
|
name: 'shade'
|
||
|
|
});
|
||
|
|
|
||
|
|
seaGL.init();
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id='viaWebGL'></div>
|
||
|
|
</body>
|
||
|
|
</html>
|