Skip to content

Instantly share code, notes, and snippets.

@sickrandir

sickrandir/angular-openseadragon.js Secret

Last active February 23, 2016 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sickrandir/2ff9ab4a88b02ea1113e to your computer and use it in GitHub Desktop.
Save sickrandir/2ff9ab4a88b02ea1113e to your computer and use it in GitHub Desktop.
Download ZIP
DH configurator
Raw
angular-openseadragon.js
"use strict";
(function () {
var module = angular.module("ui.openseadragon", ["configuratron.osdservices"]);
module.directive("seadragon", [ "osdService", function (osdService) {
return {
restrict: "E",
scope: {
options: "=",
name: "=",
tilesource: "@",
prefixUrl: "@"
},
controller: ["$scope", function ($scope) {
// $scope.osd = null;
}],
link: function (scope, element, attrs) {
//Create options object
var opts = angular.extend({}, scope.options, {
id: "openseadragon-" + Math.random(),
element: element[0],
});
if (attrs.tilesource) {
opts.tileSources = [attrs.tilesource];
}
if (attrs.prefixUrl) {
opts.prefixUrl = attrs.prefixUrl;
}
//Create the viewer
osdService.init(opts);
scope.osd = osdService.get();
console.log(scope.osd);
//Create a wrapper
var wrapper = {
setFullScreen: function (fullScreen) {
scope.osd.setFullScreen(fullScreen);
},
forceRedraw: function () {
scope.osd.forceRedraw();
},
mouse: {
position: null,
imageCoord: null,
viewportCoord: null,
},
zoom: 0,
viewport: {
bounds: null,
center: null,
rotation: 0,
zoom: 0,
}
}
//if @name is set, put the wrapper in the scope and handle the events
var zoomHandler = null;
var updateViewportHandler = null;
if (attrs.name) {
//Make the OSD available to parent scope
scope.$parent[attrs.name] = wrapper;
//Define event handlers
zoomHandler = function (e) {
scope.$apply(function () {
wrapper.zoom = e.zoom;
});
}
updateViewportHandler = function (e) {
scope.$apply(function () {
wrapper.viewport = {
bounds: scope.osd.viewport.getBounds(false),
center: scope.osd.viewport.getCenter(false),
rotation: scope.osd.viewport.getRotation(),
zoom: scope.osd.viewport.getZoom(false),
};
});
}
//Assign event handlers
scope.osd.addHandler("zoom", zoomHandler);
scope.osd.addHandler("update-viewport", updateViewportHandler);
//Add a mouse handler
scope.mouse = new OpenSeadragon.MouseTracker({
element: scope.osd.canvas,
enterHandler: function (e) {
if (scope.osd.viewport) {
var coord = OpenSeadragon.getElementPosition(scope.osd.canvas);
var pos = e.position.plus(coord);
var mouse = {
position: pos,
imageCoord: scope.osd.viewport.windowToImageCoordinates(pos),
viewportCoord: scope.osd.viewport.windowToViewportCoordinates(pos),
}
scope.$apply(function () {
wrapper.mouse = mouse;
});
}
},
moveHandler: function (e) {
if (scope.osd.viewport) {
var coord = OpenSeadragon.getElementPosition(scope.osd.canvas);
var pos = e.position.plus(coord);
var mouse = {
position: pos,
imageCoord: scope.osd.viewport.windowToImageCoordinates(pos),
viewportCoord: scope.osd.viewport.windowToViewportCoordinates(pos),
}
scope.$apply(function () {
wrapper.mouse = mouse;
});
}
},
exitHandler: function (e) {
scope.$apply(function () {
wrapper.mouse.position = null;
wrapper.mouse.imageCoord = null;
wrapper.mouse.viewportCoord = null;
});
},
});
scope.mouse.setTracking(true);
}
//When element is destroyed, destroy the viewer
element.on('$destroy', function () {
//if @nam eis set, remove it from parent scope, and remove event handlers
if (attrs.name) {
//Remove from parent scope
scope.$parent[attrs.name] = null;
//Destroy mouse handler
scope.mouse.destroy();
//Remove event handlers
scope.osd.removeHandler("zoom", zoomHandler);
scope.osd.removeHandler("update-viewport", updateViewportHandler);
}
//Destroy the viewer
scope.osd.destroy();
});
},
};
}]);
})();
Raw
app.js
"use strict";
(function () {
angular.module("configuratron", ["ui.openseadragon", "ngAnimate", "ui.bootstrap", "configuratron.osdservices", "configuratron.controllers"])})();
Raw
configurator.html
<!DOCTYPE html>
<html>
<head>
<title>DH Configuratron</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style type="text/css">
.sdstyle{
width: 640px;
height: 480px;
}
.fa-plus{
color : white;
}
.fa-bullseye{
color : red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" ng-app="configuratron" ng-controller="AppController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Choose your personalization:</h3>
</div>
<div class="modal-body">
<!-- <ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul> -->
<div class="row">
<div ng-repeat="item in items" class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">
<button class="btn btn-default"><img ng-src="{{item.thumb}}" class="thumbnail img-responsive"></button>
</a>
</div>
</div>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<div class="panel-heading">DH Configuratron</a></div>
<div class="panel-body">
<div ng-repeat="label in labels" id={{label.id}} >
<i ng-if="configuratron.zoom >= label.activeZoom" ng-click="open(null,label.id)" class="fa fa-bullseye fa-lg"></i>
<i ng-if="configuratron.zoom < label.activeZoom" class="fa fa-plus"></i>
</div>
<div class="sdstyle">
<seadragon options="options" name="configuratron" />
</div>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Zoom level : {{configuratron.zoom}}</li>
<li>Viewport bounds : {{configuratron.viewport.bounds}}</li>
<li>Mouse image coords : {{configuratron.viewport.imageCoord}}</li>
</ul>
</div>
<div class="panel-footer">
<button class="btn btn-default" ng-click="configuratron.setFullScreen(true)">Full screen</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="http://openseadragon.github.io/openseadragon/openseadragon.js"></script>
<script type="text/javascript" src="configurator/services.js"></script>
<script type="text/javascript" src="configurator/angular-openseadragon.js"></script>
<script type="text/javascript" src="configurator/controllers.js"></script>
<script type="text/javascript" src="configurator/app.js"></script>
</body>
</html>
Raw
controllers.js
angular.module("configuratron.controllers", ["ui.openseadragon", "ngAnimate", "ui.bootstrap", "configuratron.osdservices"])
.controller("AppController", ["$scope", "$uibModal", "$log", "osdService", "$filter", function ($scope, $uibModal, $log, osdService, $filter) {
$scope.labelActiveImg = "../../images/fa/map-marker.svg"
$scope.labelInactiveImg = "../../images/fa/plus.svg"
var labels = [
{
id : "label-1",
activeZoom : 1,
x: 0.368,
y: 0.448
},
{
id : "label-2",
activeZoom : 2,
x: 0.440,
y: 0.848
},
{
id : "label-3",
activeZoom : 4,
x: 0.490,
y: 0.848
}
];
$scope.labels = labels;
var overlays = []
for (var i = 0; i < labels.length; i++) {
overlays.push({id: labels[i].id, x: labels[i].x, y: labels[i].y});
}
$scope.options = {
prefixUrl: "http://openseadragon.github.io/openseadragon/images/",
tileSources: 'dzi/coat.dzi',
overlays: overlays,
width: 1
};
$scope.items = [
{
thumb : "dzi/borchia_files/8/0_0.png",
dzi : "dzi/borchia.dzi"
},
{
thumb : "dzi/dorata_files/8/0_0.png",
dzi : "dzi/dorata.dzi"
}
]
$scope.animationsEnabled = true;
$scope.open = function (size, labelId) {
console.log("labelId:" + labelId)
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
},
label: function () {
return labelId;
}
}
});
modalInstance.result.then(function (selected) {
$scope.osd = osdService.get();
$scope.selected = selected.item;
console.log("selected:" + JSON.stringify(selected));
var activeLabel = $filter('filter')(labels, {id: selected.label})[0];
console.log(activeLabel);
var tiledImage = {
tileSource: selected.item.dzi,
x: activeLabel.x-0.035,
y: activeLabel.y-0.035,
width: 0.05,
opacity: 0.99
}
$scope.osd.addTiledImage(tiledImage);
var index = $scope.osd.world.getIndexOfItem(tiledImage);
var total = $scope.osd.world.getItemCount();
console.log("index: " + index);
console.log("total: " + total);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}])
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, label) {
$scope.items = items;
$scope.label = label;
console.log("label:" + label)
$scope.selected = {
item: $scope.items[0],
label: $scope.label
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
Raw
services.js
angular.module('configuratron.osdservices', [])
.factory('osdService', [ function () {
var osd;
return {
init: function (options) {
osd = OpenSeadragon(options);
console.log(osd);
},
get: function () {
return osd;
}
}
}])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment