luistelmocosta/full_page.html

## full_page.html
<!doctype html>
<meta charset="utf-8">
<head>
    <script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='openseadragon.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='openseadragon-scalebar.js') }}"></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
</head>
<title>{{ slide_filename }}</title>

<style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0;
}

div#view {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
}

.highlight {
    opacity: 0.4;
    filter: alpha(opacity=40);
    outline: 1px auto #0A7EbE;
    background-color: white;
}


</style>

<div id="slider" style="margin: 10px"></div>
<button id="toggle-overlay">Toggle overlay</button>
<div id="view"></div>

<script type="text/javascript">

// https://gist.github.com/mlocati/7210513
function perc2color(perc) {
    // Invert, red is higher for us
    perc=100-perc
	var r, g, b = 0;
	if(perc < 50) {
		r = 255;
		g = Math.round(5.1 * perc);
	}
	else {
		g = 255;
		r = Math.round(510 - 5.10 * perc);
	}
	var h = r * 0x10000 + g * 0x100 + b * 0x1;
    return '#' + ('000000' + h.toString(16)).slice(-6);}


    function loadAnnotations(viewer){
            //Load all available annotations for this image
            var bounds = viewer.viewport.getBounds(true);
            var currentRect = viewer.viewport.viewportToImageRectangle(bounds);

            var overlay = false;
            var annotations = JSON.parse('{{slide_annotation | tojson}}');
            //console.log(annotations)
            for (var key in annotations) {
                if (annotations.hasOwnProperty(key)) {
                    //TODO: make prob dynamic
                    if(annotations[key][2] < window.probability){continue;}

                    var elem = document.createElement("div");
                    elem.id = 'overlay-rotation-bounding-box';
                    elem.style.cssText = "border:2px solid "+perc2color(100*annotations[key][2]);

                    viewportBounds = viewer.viewport.imageToViewportRectangle(annotations[key][0],annotations[key][1], 32, 32);

                    viewer.addOverlay({
                        element: elem,
                        location: new OpenSeadragon.Rect(viewportBounds.x, viewportBounds.y, viewportBounds.width, viewportBounds.height)
                    });
                }
            }
            //console.log("Overlays loaded!")<
            //console.log(viewer.currentOverlays)
        }
    //console.log(viewer.currentOverlays)
    let currentIndex = 0
    function goToOverlay() {
        console.log("Go to overlay!")
        const o = overlays[currentIndex]
        const vpRect = viewer.viewport.imageToViewportRectangle(new OpenSeadragon.Rect(o.px, o.py, o.width, o.height));
        viewer.viewport.fitBoundsWithConstraints(vpRect);
    }


$(document).ready(function() {
    var viewer = new OpenSeadragon({
        id: "view",
        tileSources: "{{ slide_url }}",
        //overlays: overlays_list,
        prefixUrl: "{{ url_for('static', filename='images/') }}",
        showNavigator: true,
        showRotationControl: true,
        animationTime: 0.5,
        blendTime: 0.1,
        constrainDuringPan: true,
        maxZoomPixelRatio: 2,
        minZoomLevel: 1,
        visibilityRatio: 1,
        zoomPerScroll: 2,
        timeout: 120000,
    });

    window.viewer=viewer;
    window.probability = 0.5;

    viewer.addHandler("open", function() {
        // To improve load times, ignore the lowest-resolution Deep Zoom
        // levels.  This is a hack: we can't configure the minLevel via
        // OpenSeadragon configuration options when the viewer is created
        // from DZI XML.
        viewer.source.minLevel = 8;
        loadAnnotations(viewer);
    });


    var mpp = parseFloat("{{ slide_mpp }}");
    viewer.scalebar({
        pixelsPerMeter: mpp ? (1e6 / mpp) : 0,
        xOffset: 10,
        yOffset: 10,
        barThickness: 3,
        color: '#555555',
        fontColor: '#333333',
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
    });

    $("#slider").slider({
                min: -10,
                max:10,
                slide: function(event, ui) {
                    var prob = (ui.value + 10)/20;
                    if (prob<0.1) {prob = 0.1;}
                    window.probability = prob;
                    viewer.clearOverlays();
                    loadAnnotations(viewer);
                }
            });
        });

    var overlay = true;
    document.querySelector('#toggle-overlay').addEventListener('click', function() {
        if (overlay) {
            viewer.clearOverlays();
        } else {
            loadAnnotations(viewer);
        }
        overlay = !overlay;
    });


    const display = document.getElementById("view")
    console.log(display.innerHTML)
    const updateDisplay = () => {
    display.innerHTML = "overlay: " + viewer.currentOverlays[currentIndex].id
}
    updateDisplay()
    viewer.addHandler("canvas-key", ev => {
        const keyCode = ev.originalEvent.keyCode
        if (keyCode === 74) {
            console.log("Left arrow");
            currentIndex = currentIndex === 0 ? overlays.length - 1 : currentIndex - 1;
            updateDisplay();
            goToOverlay();
        }
        if (keyCode === 75) {
            console.log("Right arrow");
            currentIndex = currentIndex === overlays.length - 1 ? 0 : currentIndex + 1;
            updateDisplay();
            goToOverlay();
        }})


</script>
	<!doctype html>
	<meta charset="utf-8">
	<head>
	<script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='openseadragon.js') }}"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='openseadragon-scalebar.js') }}"></script>

	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
	</head>
	<title>{{ slide_filename }}</title>

	<style type="text/css">
	html {
	overflow: hidden;
	}
	body {
	margin: 0;
	padding: 0;
	}

	div#view {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	color: white;
	}

	.highlight {
	opacity: 0.4;
	filter: alpha(opacity=40);
	outline: 1px auto #0A7EbE;
	background-color: white;
	}


	</style>

	<div id="slider" style="margin: 10px"></div>
	<button id="toggle-overlay">Toggle overlay</button>
	<div id="view"></div>

	<script type="text/javascript">

	// https://gist.github.com/mlocati/7210513
	function perc2color(perc) {
	// Invert, red is higher for us
	perc=100-perc
	var r, g, b = 0;
	if(perc < 50) {
	r = 255;
	g = Math.round(5.1 * perc);
	}
	else {
	g = 255;
	r = Math.round(510 - 5.10 * perc);
	}
	var h = r * 0x10000 + g * 0x100 + b * 0x1;
	return '#' + ('000000' + h.toString(16)).slice(-6);}



	function loadAnnotations(viewer){
	//Load all available annotations for this image
	var bounds = viewer.viewport.getBounds(true);
	var currentRect = viewer.viewport.viewportToImageRectangle(bounds);

	var overlay = false;
	var annotations = JSON.parse('{{slide_annotation \| tojson}}');
	//console.log(annotations)
	for (var key in annotations) {
	if (annotations.hasOwnProperty(key)) {
	//TODO: make prob dynamic
	if(annotations[key][2] < window.probability){continue;}

	var elem = document.createElement("div");
	elem.id = 'overlay-rotation-bounding-box';
	elem.style.cssText = "border:2px solid "+perc2color(100*annotations[key][2]);

	viewportBounds = viewer.viewport.imageToViewportRectangle(annotations[key][0],annotations[key][1], 32, 32);

	viewer.addOverlay({
	element: elem,
	location: new OpenSeadragon.Rect(viewportBounds.x, viewportBounds.y, viewportBounds.width, viewportBounds.height)
	});
	}
	}
	//console.log("Overlays loaded!")<
	//console.log(viewer.currentOverlays)
	}
	//console.log(viewer.currentOverlays)
	let currentIndex = 0
	function goToOverlay() {
	console.log("Go to overlay!")
	const o = overlays[currentIndex]
	const vpRect = viewer.viewport.imageToViewportRectangle(new OpenSeadragon.Rect(o.px, o.py, o.width, o.height));
	viewer.viewport.fitBoundsWithConstraints(vpRect);
	}



	$(document).ready(function() {
	var viewer = new OpenSeadragon({
	id: "view",
	tileSources: "{{ slide_url }}",
	//overlays: overlays_list,
	prefixUrl: "{{ url_for('static', filename='images/') }}",
	showNavigator: true,
	showRotationControl: true,
	animationTime: 0.5,
	blendTime: 0.1,
	constrainDuringPan: true,
	maxZoomPixelRatio: 2,
	minZoomLevel: 1,
	visibilityRatio: 1,
	zoomPerScroll: 2,
	timeout: 120000,
	});

	window.viewer=viewer;
	window.probability = 0.5;

	viewer.addHandler("open", function() {
	// To improve load times, ignore the lowest-resolution Deep Zoom
	// levels. This is a hack: we can't configure the minLevel via
	// OpenSeadragon configuration options when the viewer is created
	// from DZI XML.
	viewer.source.minLevel = 8;
	loadAnnotations(viewer);
	});


	var mpp = parseFloat("{{ slide_mpp }}");
	viewer.scalebar({
	pixelsPerMeter: mpp ? (1e6 / mpp) : 0,
	xOffset: 10,
	yOffset: 10,
	barThickness: 3,
	color: '#555555',
	fontColor: '#333333',
	backgroundColor: 'rgba(255, 255, 255, 0.5)',
	});

	$("#slider").slider({
	min: -10,
	max:10,
	slide: function(event, ui) {
	var prob = (ui.value + 10)/20;
	if (prob<0.1) {prob = 0.1;}
	window.probability = prob;
	viewer.clearOverlays();
	loadAnnotations(viewer);
	}
	});
	});

	var overlay = true;
	document.querySelector('#toggle-overlay').addEventListener('click', function() {
	if (overlay) {
	viewer.clearOverlays();
	} else {
	loadAnnotations(viewer);
	}
	overlay = !overlay;
	});





	const display = document.getElementById("view")
	console.log(display.innerHTML)
	const updateDisplay = () => {
	display.innerHTML = "overlay: " + viewer.currentOverlays[currentIndex].id
	}
	updateDisplay()
	viewer.addHandler("canvas-key", ev => {
	const keyCode = ev.originalEvent.keyCode
	if (keyCode === 74) {
	console.log("Left arrow");
	currentIndex = currentIndex === 0 ? overlays.length - 1 : currentIndex - 1;
	updateDisplay();
	goToOverlay();
	}
	if (keyCode === 75) {
	console.log("Right arrow");
	currentIndex = currentIndex === overlays.length - 1 ? 0 : currentIndex + 1;
	updateDisplay();
	goToOverlay();
	}})


	</script>