mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-22 01:33:14 +03:00
Code Issues Projects Releases Wiki Activity

Add viewer.getNumberOfLayers method

Browse Source 
layers.html test file:
-display 2 layers after opening
-fix order
-add opacity demo
-add rotation demo
This commit is contained in:
Antoine Vandecreme 2014-01-11 12:52:44 -05:00
parent 63af1e7517
commit 56707bd4f7
2 changed files with 98 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/viewer.js
View File

@ -1081,6 +1081,14 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
return $.indexOf( this.drawers, drawer ); return $.indexOf( this.drawers, drawer );
}, },
/**
* Get the number of layers used.
* @returns {Number} The number of layers used.
*/
getNumberOfLayers: function() {
return this.drawers.length - 1;
},
/** /**
* Change the level of a layer so that it appears over or under others. * Change the level of a layer so that it appears over or under others.
* @param {OpenSeadragon.Drawer} drawer The underlying drawer of the changing * @param {OpenSeadragon.Drawer} drawer The underlying drawer of the changing

117
test/demo/layers.html
View File

@ -12,10 +12,12 @@
float: left; float: left;
} }
#availables, #used, #arrows, #left, #updown, #right { #availables, #arrows, #left, #updown, #right {
float: left; float: left;
} }
</style> </style>
</head> </head>
<body> <body>
@ -28,63 +30,95 @@
<div id="availables"> <div id="availables">
Availables layers<br> Availables layers<br>
<select name="layers-availables" size="4" multiple="multiple"> <select name="layers-availables" size="4" multiple="multiple">
<option>A</option>
<option>BBlue</option>
<option>CCyan</option> <option>CCyan</option>
<option>DDandelion</option> <option>DDandelion</option>
</select> </select>
</div> </div>
<div id="arrows"> <div id="arrows">
<div id="left"> <div id="left">
<button onclick="left();">&lAarr;</button> <button onclick="left();">&lAarr; Remove</button>
</div> </div>
<div id="updown"> <div id="updown">
<div id="up"> <div id="up">
<button onclick="up();">&uArr;</button> <button onclick="up();">&uArr; Up</button>
</div> </div>
<div id="down"> <div id="down">
<button onclick="down();">&dArr;</button> <button onclick="down();">&dArr; Down</button>
</div> </div>
</div> </div>
<div id="right"> <div id="right">
<button onclick="right();">&rAarr;</button> <button onclick="right();">&rAarr; Add</button>
</div> </div>
</div> </div>
<div id="used"> <div id="used">
Used layers<br> Used layers<br>
<select name="layers-used" size="4" multiple="multiple"> <select name="layers-used" size="4" multiple="multiple">
<option>A</option>
<option>BBlue</option>
</select> </select>
</div> </div>
<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>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function getOpacity( layerName ) {
var id = $( "label" ).filter( function( index ) {
return layerName === this.innerHTML;
} ).attr( "for" );
return $( "#" + id ).val();
}
function right() { function right() {
var added = $( "#availables select option:selected" ).detach(); var added = $( "#availables select option:selected" ).detach();
$( "#used select" ).append( added ); $( "#used select" ).append( added );
$.each( added, function( index, value ) { $.each( added, function( index, value ) {
var layer = value.innerHTML; addLayer( value.innerHTML );
var options = {
tileSource: {
type: 'legacy-image-pyramid',
levels: [ {
url: "../data/" + layer + ".png",
width: 1000,
height: 1000
} ]
}
};
var addLayerHandler = function( event ) {
if ( event.options === options ) {
viewer.removeHandler( "add-layer", addLayerHandler );
layers[layer] = event.drawer;
}
};
viewer.addHandler( "add-layer", addLayerHandler );
viewer.addLayer( options );
} ); } );
} }
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 ) {
if ( event.options === options ) {
viewer.removeHandler( "add-layer", addLayerHandler );
layers[layerName] = event.drawer;
updateOrder();
}
};
viewer.addHandler( "add-layer", addLayerHandler );
viewer.addLayer( options );
}
function left() { function left() {
var removed = $( "#used select option:selected" ).detach(); var removed = $( "#used select option:selected" ).detach();
$( "#availables select" ).append( removed ); $( "#availables select" ).append( removed );
@ -92,6 +126,7 @@
var layer = value.innerHTML; var layer = value.innerHTML;
viewer.removeLayer( layers[layer] ); viewer.removeLayer( layers[layer] );
delete layers[layer]; delete layers[layer];
updateOrder();
} ); } );
} }
@ -111,21 +146,49 @@
} }
function updateOrder() { function updateOrder() {
var nbLayers = viewer.getNumberOfLayers();
if ( nbLayers < 2 ) {
return;
}
$.each( $( "#used select option" ), function( index, value ) { $.each( $( "#used select option" ), function( index, value ) {
var layer = value.innerHTML; var layer = value.innerHTML;
viewer.setLayerLevel( layers[layer], index + 1 ); viewer.setLayerLevel( layers[layer], nbLayers - index );
} ); } );
} }
function rotate() {
var viewport = viewer.viewport;
viewport.setRotation( viewport.getRotation() + 90 );
}
var viewer = OpenSeadragon( { var viewer = OpenSeadragon( {
id: "contentDiv", id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/", prefixUrl: "../../build/openseadragon/images/",
tileSources: "../data/testpattern.dzi", tileSources: "../data/testpattern.dzi",
showNavigator: true showNavigator: true
} ); } );
viewer.addHandler( "open", function() {
$.each( $( "#used select option" ), function( index, value ) {
var layer = value.innerHTML;
addLayer( layer );
} );
} );
var layers = { }; var layers = { };
$( "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 );
}
} );
</script> </script>
</body> </body>
</html> </html>