lesolorzanov/OSD-D3.js

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Bäst universitetet i hela världen</title>
    <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--OpenSeadragon-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/openseadragon.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://rawgit.com/openseadragon/svg-overlay/master/openseadragon-svg-overlay.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="OSD-D3.js"></script>
    <style>
        body, html {
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
        }

        #osdviewer {
          width: 100%;
          height: 92%;
          background: #000;
        }

        #message {
            height:8%;
            width:100%
        }
    </style>
</head>
<body>
    <div id="osdviewer"></div>
    <div id="message">
        <p> See a bit about our research: <a href="http://www.cb.uu.se/~carolina/carolina_publications.html"> CBA - Center for Image analysis </a></p>
    </div>
</body>
<script>

    // ----------
    $(document).ready(function() {
        exampleapp.init();
    });

</script>
</html>

## OSD-D3.js
var exampleapp={
    starCount:0,
    OSDviewer: null,
    init: function(){
        var OSDviewer = OpenSeadragon(this.OSDOptions);
        this.OSDviewer=OSDviewer;
        this.OSDsvgov=this.OSDviewer.svgOverlay();

        var click_handler= function(event) {
            if(event.quick){
                var normalizedPoint=exampleapp.OSDviewer.viewport.pointFromPixel( event.position );
                exampleapp.drawD3star({"x":normalizedPoint.x,"y":normalizedPoint.y});
            }
        };

        var viewer_mouse_tracker = new OpenSeadragon.MouseTracker({
            element: this.OSDviewer.canvas,
            clickHandler: click_handler
        }).setTracking(true);

    },
    drawD3star: function(options){
        var imageWidth=this.OSDviewer.world.getItemAt(0).getContentSize().x;
        var radius=options.radius || 1/imageWidth;

        var color=options.color || this.randomColor();
        var x = options.x || null;
        var y = options.y || null;
        var elem=d3.select( this.OSDviewer.svgOverlay().node());
        var elemEnter = elem
            .append("g")
            .attr("id","star-"+this.starCount.toString()).attr("class","star")
            .attr( 'transform','translate('+ x +','+ y +')')
        var star=elemEnter
            .append("path").attr( "d", d3.symbol().size(radius).type(d3.symbolStar))
            .attr('fill', this.randomColor())

        d3.select("#star-"+exampleapp.starCount.toString()).each(function() {
            exampleapp.addTracking(this);
        });

        this.starCount=this.starCount+1;
    },
    randomColor:function(){
        var H=Math.floor(Math.random() * (65 - 30 + 1)) +30;
        var L=Math.floor(Math.random() * (75-20+1)) + 20 + '%';
        var S=Math.floor(Math.random() * (100-30+1)) + 30 + '%';
        return 'hsl('+H.toString()+','+S.toString()+','+L.toString()+')';
    },
    addTracking: function(node){
         new OpenSeadragon.MouseTracker({
            element: node,
            dragHandler: function(event) {
                var viewportDelta=exampleapp.OSDviewer.viewport.deltaPointsFromPixels(event.delta);
                var d3node=d3.select(node);
                var transformobj=exampleapp.transformToObject(d3node.attr("transform"));

                transformobj.translate[0]=Number(transformobj.translate[0])+Number(viewportDelta.x);
                transformobj.translate[1]=Number(transformobj.translate[1])+Number(viewportDelta.y);
                d3node.attr("transform",exampleapp.objectToTransform(transformobj));
            }
        }).setTracking(true);
    },
    transformToObject: function(transformStr){
        var b={};
        for (var i in a = transformStr.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g))
        {
            var c = a[i].match(/[\w\.\-]+/g);
            b[c.shift()] = c;
        }
        return b;
    },
    objectToTransform: function(tobj){
        var jsonstr=JSON.stringify(tobj);
        jsonstr=jsonstr.replace("{","");
        jsonstr=jsonstr.replace("}","");
        jsonstr=jsonstr.replace(/("|:)/g, "");
        jsonstr=jsonstr.replace("[","(");
        jsonstr=jsonstr.replace("]",")");
        return jsonstr;
    },
    OSDOptions: {
        id: "osdviewer",
        prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/images/",
        tileSources: "https://rawgit.com/zloysmiertniy/serve/master/itc/vips.dzi",
        navigatorSizeRatio: 1,
        wrapHorizontal: false,
        showNavigator: true,
        navigatorPosition: "BOTTOM_LEFT",
        navigatorSizeRatio: 0.25,
        animationTime: 0.0,
        blendTime: 0,
        minZoomImageRatio: 1,
        maxZoomPixelRatio: 20,
        zoomPerClick: 1.0,
        visibilityRatio: 1.0,
    }
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bäst universitetet i hela världen</title>
	<!-- Required meta tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!--OpenSeadragon-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/openseadragon.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://rawgit.com/openseadragon/svg-overlay/master/openseadragon-svg-overlay.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
	<script src="OSD-D3.js"></script>
	<style>
	body, html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#osdviewer {
	width: 100%;
	height: 92%;
	background: #000;
	}

	#message {
	height:8%;
	width:100%
	}
	</style>
	</head>
	<body>
	<div id="osdviewer"></div>
	<div id="message">
	<p> See a bit about our research: <a href="http://www.cb.uu.se/~carolina/carolina_publications.html"> CBA - Center for Image analysis </a></p>
	</div>
	</body>
	<script>

	// ----------
	$(document).ready(function() {
	exampleapp.init();
	});

	</script>
	</html>
	var exampleapp={
	starCount:0,
	OSDviewer: null,
	init: function(){
	var OSDviewer = OpenSeadragon(this.OSDOptions);
	this.OSDviewer=OSDviewer;
	this.OSDsvgov=this.OSDviewer.svgOverlay();

	var click_handler= function(event) {
	if(event.quick){
	var normalizedPoint=exampleapp.OSDviewer.viewport.pointFromPixel( event.position );
	exampleapp.drawD3star({"x":normalizedPoint.x,"y":normalizedPoint.y});
	}
	};

	var viewer_mouse_tracker = new OpenSeadragon.MouseTracker({
	element: this.OSDviewer.canvas,
	clickHandler: click_handler
	}).setTracking(true);

	},
	drawD3star: function(options){
	var imageWidth=this.OSDviewer.world.getItemAt(0).getContentSize().x;
	var radius=options.radius \|\| 1/imageWidth;

	var color=options.color \|\| this.randomColor();
	var x = options.x \|\| null;
	var y = options.y \|\| null;
	var elem=d3.select( this.OSDviewer.svgOverlay().node());
	var elemEnter = elem
	.append("g")
	.attr("id","star-"+this.starCount.toString()).attr("class","star")
	.attr( 'transform','translate('+ x +','+ y +')')
	var star=elemEnter
	.append("path").attr( "d", d3.symbol().size(radius).type(d3.symbolStar))
	.attr('fill', this.randomColor())

	d3.select("#star-"+exampleapp.starCount.toString()).each(function() {
	exampleapp.addTracking(this);
	});

	this.starCount=this.starCount+1;
	},
	randomColor:function(){
	var H=Math.floor(Math.random() * (65 - 30 + 1)) +30;
	var L=Math.floor(Math.random() * (75-20+1)) + 20 + '%';
	var S=Math.floor(Math.random() * (100-30+1)) + 30 + '%';
	return 'hsl('+H.toString()+','+S.toString()+','+L.toString()+')';
	},
	addTracking: function(node){
	new OpenSeadragon.MouseTracker({
	element: node,
	dragHandler: function(event) {
	var viewportDelta=exampleapp.OSDviewer.viewport.deltaPointsFromPixels(event.delta);
	var d3node=d3.select(node);
	var transformobj=exampleapp.transformToObject(d3node.attr("transform"));

	transformobj.translate[0]=Number(transformobj.translate[0])+Number(viewportDelta.x);
	transformobj.translate[1]=Number(transformobj.translate[1])+Number(viewportDelta.y);
	d3node.attr("transform",exampleapp.objectToTransform(transformobj));
	}
	}).setTracking(true);
	},
	transformToObject: function(transformStr){
	var b={};
	for (var i in a = transformStr.match(/(\w+\((\-?\d+\.?\de?\-?\d,?)+\))+/g))
	{
	var c = a[i].match(/[\w\.\-]+/g);
	b[c.shift()] = c;
	}
	return b;
	},
	objectToTransform: function(tobj){
	var jsonstr=JSON.stringify(tobj);
	jsonstr=jsonstr.replace("{","");
	jsonstr=jsonstr.replace("}","");
	jsonstr=jsonstr.replace(/("\|:)/g, "");
	jsonstr=jsonstr.replace("[","(");
	jsonstr=jsonstr.replace("]",")");
	return jsonstr;
	},
	OSDOptions: {
	id: "osdviewer",
	prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/images/",
	tileSources: "https://rawgit.com/zloysmiertniy/serve/master/itc/vips.dzi",
	navigatorSizeRatio: 1,
	wrapHorizontal: false,
	showNavigator: true,
	navigatorPosition: "BOTTOM_LEFT",
	navigatorSizeRatio: 0.25,
	animationTime: 0.0,
	blendTime: 0,
	minZoomImageRatio: 1,
	maxZoomPixelRatio: 20,
	zoomPerClick: 1.0,
	visibilityRatio: 1.0,
	}
	}