2014-01-06 04:20:45 +04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>OpenSeadragon Layers Demo</title>
|
|
|
|
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
|
|
|
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
.openseadragon1 {
|
|
|
|
|
width: 800px;
|
|
|
|
|
height: 600px;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-11 21:52:44 +04:00
|
|
|
#availables, #arrows, #left, #updown, #right {
|
2014-01-06 04:20:45 +04:00
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-11 21:52:44 +04:00
|
|
|
|
|
|
|
|
|
2014-01-06 04:20:45 +04:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
|
|
|
|
Simple demo page to show an OpenSeadragon viewer with layers.
|
|
|
|
|
</div>
|
|
|
|
|
<div id="contentDiv" class="openseadragon1"></div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<div id="availables">
|
2014-01-22 04:24:47 +04:00
|
|
|
Available layers<br>
|
2014-01-06 04:20:45 +04:00
|
|
|
<select name="layers-availables" size="4" multiple="multiple">
|
|
|
|
|
<option>CCyan</option>
|
|
|
|
|
<option>DDandelion</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="arrows">
|
|
|
|
|
<div id="left">
|
2014-01-11 21:52:44 +04:00
|
|
|
<button onclick="left();">⇚ Remove</button>
|
2014-01-06 04:20:45 +04:00
|
|
|
</div>
|
|
|
|
|
<div id="updown">
|
|
|
|
|
<div id="up">
|
2014-01-11 21:52:44 +04:00
|
|
|
<button onclick="up();">⇑ Up</button>
|
2014-01-06 04:20:45 +04:00
|
|
|
</div>
|
|
|
|
|
<div id="down">
|
2014-01-11 21:52:44 +04:00
|
|
|
<button onclick="down();">⇓ Down</button>
|
2014-01-06 04:20:45 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="right">
|
2014-01-11 21:52:44 +04:00
|
|
|
<button onclick="right();">⇛ Add</button>
|
2014-01-06 04:20:45 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="used">
|
|
|
|
|
Used layers<br>
|
|
|
|
|
<select name="layers-used" size="4" multiple="multiple">
|
2014-01-11 21:52:44 +04:00
|
|
|
<option>A</option>
|
|
|
|
|
<option>BBlue</option>
|
2014-01-06 04:20:45 +04:00
|
|
|
</select>
|
|
|
|
|
</div>
|
2014-01-11 21:52:44 +04:00
|
|
|
|
|
|
|
|
<br><br><br><br>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
Opacity: <br>
|
|
|
|
|
<label for="AOpacity" >A</label>
|
|
|
|
|
<input id="AOpacity" type="text" value="0.5"><br>
|
|
|
|
|
<label for="BBlueOpacity" >BBlue</label>
|
|
|
|
|
<input id="BBlueOpacity" type="text" value="1"><br>
|
|
|
|
|
<label for="CCyanOpacity" >CCyan</label>
|
|
|
|
|
<input id="CCyanOpacity" type="text" value="1"><br>
|
|
|
|
|
<label for="DDandelion" >DDandelion</label>
|
|
|
|
|
<input id="DDandelion" type="text" value="1"><br>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<br><br><br><br>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<button onclick="rotate();">Rotate</button>
|
|
|
|
|
</div>
|
2014-01-06 04:20:45 +04:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
2014-01-11 21:52:44 +04:00
|
|
|
function getOpacity( layerName ) {
|
|
|
|
|
var id = $( "label" ).filter( function( index ) {
|
|
|
|
|
return layerName === this.innerHTML;
|
|
|
|
|
} ).attr( "for" );
|
|
|
|
|
return $( "#" + id ).val();
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-06 04:20:45 +04:00
|
|
|
function right() {
|
|
|
|
|
var added = $( "#availables select option:selected" ).detach();
|
|
|
|
|
$( "#used select" ).append( added );
|
|
|
|
|
$.each( added, function( index, value ) {
|
2014-01-11 21:52:44 +04:00
|
|
|
addLayer( value.innerHTML );
|
2014-01-06 04:20:45 +04:00
|
|
|
} );
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-11 21:52:44 +04:00
|
|
|
function addLayer( layerName ) {
|
|
|
|
|
var options = {
|
|
|
|
|
tileSource: {
|
|
|
|
|
type: 'legacy-image-pyramid',
|
|
|
|
|
levels: [ {
|
|
|
|
|
url: "../data/" + layerName + ".png",
|
|
|
|
|
width: 1000,
|
|
|
|
|
height: 1000
|
|
|
|
|
} ]
|
|
|
|
|
},
|
|
|
|
|
opacity: getOpacity( layerName )
|
|
|
|
|
};
|
|
|
|
|
var addLayerHandler = function( event ) {
|
2024-10-16 12:12:20 +03:00
|
|
|
if ( event.item.source.levels[0].url.includes(layerName) ) {
|
|
|
|
|
viewer.world.removeHandler( "add-item", addLayerHandler );
|
|
|
|
|
layers[layerName] = event.item;
|
2014-01-11 21:52:44 +04:00
|
|
|
updateOrder();
|
|
|
|
|
}
|
|
|
|
|
};
|
2024-10-16 12:12:20 +03:00
|
|
|
viewer.world.addHandler( "add-item", addLayerHandler );
|
|
|
|
|
viewer.addTiledImage( options );
|
2014-01-11 21:52:44 +04:00
|
|
|
}
|
|
|
|
|
|
2014-01-06 04:20:45 +04:00
|
|
|
function left() {
|
|
|
|
|
var removed = $( "#used select option:selected" ).detach();
|
|
|
|
|
$( "#availables select" ).append( removed );
|
|
|
|
|
$.each( removed, function( index, value ) {
|
|
|
|
|
var layer = value.innerHTML;
|
|
|
|
|
viewer.removeLayer( layers[layer] );
|
|
|
|
|
delete layers[layer];
|
2014-01-11 21:52:44 +04:00
|
|
|
updateOrder();
|
2014-01-06 04:20:45 +04:00
|
|
|
} );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function up() {
|
|
|
|
|
$.each( $( "#used select option:selected" ), function( index, value ) {
|
|
|
|
|
$( value ).prev( "option" ).insertAfter( value );
|
|
|
|
|
} );
|
|
|
|
|
updateOrder();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function down() {
|
|
|
|
|
$.each( $( "#used select option:selected" ).get().reverse(),
|
|
|
|
|
function( index, value ) {
|
|
|
|
|
$( value ).next( "option" ).insertBefore( value );
|
|
|
|
|
} );
|
|
|
|
|
updateOrder();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateOrder() {
|
2024-10-16 12:12:20 +03:00
|
|
|
var nbLayers = viewer.world.getItemCount();
|
2014-01-11 21:52:44 +04:00
|
|
|
if ( nbLayers < 2 ) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2014-01-06 04:20:45 +04:00
|
|
|
$.each( $( "#used select option" ), function( index, value ) {
|
|
|
|
|
var layer = value.innerHTML;
|
2024-10-16 12:12:20 +03:00
|
|
|
if (layers[layer]) {
|
|
|
|
|
viewer.world.setItemIndex( layers[layer], nbLayers -1 - index );
|
|
|
|
|
}
|
2014-01-06 04:20:45 +04:00
|
|
|
} );
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-11 21:52:44 +04:00
|
|
|
function rotate() {
|
|
|
|
|
var viewport = viewer.viewport;
|
|
|
|
|
viewport.setRotation( viewport.getRotation() + 90 );
|
|
|
|
|
}
|
|
|
|
|
|
2014-01-06 04:20:45 +04:00
|
|
|
var viewer = OpenSeadragon( {
|
|
|
|
|
id: "contentDiv",
|
|
|
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
|
|
|
tileSources: "../data/testpattern.dzi",
|
|
|
|
|
showNavigator: true
|
|
|
|
|
} );
|
2014-01-11 21:52:44 +04:00
|
|
|
viewer.addHandler( "open", function() {
|
|
|
|
|
$.each( $( "#used select option" ), function( index, value ) {
|
|
|
|
|
var layer = value.innerHTML;
|
|
|
|
|
addLayer( layer );
|
|
|
|
|
} );
|
|
|
|
|
} );
|
2014-01-06 04:20:45 +04:00
|
|
|
|
|
|
|
|
var layers = { };
|
|
|
|
|
|
2014-01-11 21:52:44 +04:00
|
|
|
$( "input" ).keyup( function( event ) {
|
|
|
|
|
var elt = event.target;
|
|
|
|
|
var layerName = $( "label" ).filter( function( index ) {
|
|
|
|
|
return $( this ).attr( "for" ) === elt.id;
|
|
|
|
|
} ).html();
|
|
|
|
|
|
|
|
|
|
var layer = layers[layerName];
|
|
|
|
|
if ( layer ) {
|
|
|
|
|
var opacity = $(elt).val();
|
|
|
|
|
layer.setOpacity( opacity );
|
|
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
|
2014-01-06 04:20:45 +04:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
