Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I dynamically overlay an HTML table that aligns directly and scales with the image?

See original GitHub issue

This is an amazing library, thanks very much for all the work. I have a large dzi image (height: 13947, width: 64545) that displays perfectly. I’d like to dynamically overlay the image with an HTML table (made up of 300x300px cells with different colors and opacities) that scales with the image, and I just can’t figure out how to do it.

I’ve tried scaling the table with “transform” using the width of my containing div and the image width, but the transform doesn’t seem to make a difference. The image and the table remain at vastly different scales. I’ve tried several of the techniques for creating overlays, but am stuck. Any help would be appreciated!

Here is my image:

Here is my test code:

<body>
	<button id="toggle-overlay">Toggle overlay</button>
	<div id="osd" style="width: 98vw; height: 55vw; "></div>
	<script>
		$(document).ready( function() { // $(document).on( "ready", handler ), deprecated as of jQuery 1.8 and removed in jQuery 3.0, use anonymous function
			var Format="jpeg", TileSize=300, Height=13947, Width=64545;
			var options = { /*debugMode: true,*/
				id: 'osd',
				prefixUrl: 'openseadragon/images/',
				tileSources: 'dz/lgtst.dzi',
				homeFillsViewer: false,
				defaultZoomLevel: 0,
				showNavigator:  true,
				navigatorAutoFade: false,
				crossOriginPolicy: "Anonymous" // see https://github.com/KTGLeiden/Openseadragon-screenshot, fix for CORS issue
			};
			var viewer = OpenSeadragon( options );
			function constructTable( width, height, rows, cols, tilesize ) {
				var table = document.createElement("table"); // html table
				table.style.width = width;
				table.style.height = height;
				for (var r = 0; r < rows; r++ ) {
					var row = document.createElement("tr");
					for (var c = 0; c < cols; c++) {
						var cell = document.createElement("td");
						cell.width = tilesize;
						cell.height = tilesize;
						cell.style.backgroundColor = "rgba(255,0,0,0.4)";
						cell.innerHTML = "<p>C" + c + "</p><br\>" + "<p>R" + r + "</p>";
						row.append(cell);
					}
					table.append(row);
				}
				return table;
			}

			var cols = Math.ceil( Width / TileSize );
			var rows = Math.ceil( Height / TileSize );

			var osdTable = constructTable( Width, Height, rows, cols, TileSize );
			osdTable.id =  "osd-runtime-table";

			var targetScale = $("#osd").width() / Width;
			osdTable.style.transform = "scale(" + targetScale + ")";

			var overlay = false;
			$("#toggle-overlay").click( function() {
				if (overlay) {
					viewer.removeOverlay( osdTable );
				} else {
					viewer.addOverlay({
						element: osdTable,
						location: viewer.viewport.imageToViewportRectangle( new OpenSeadragon.Rect( 0, 0, 1, 1 ) )
						//placement: OpenSeadragon.Placement.TOP_LEFT
					});
				}
				overlay = !overlay;
			});

		});
	</script>
</body></html>

Here is the image with the overlay toggled on:

For a 13947x64545px image, each red box at 300x300px should be tiny at this scale, but visually, things are way off. I’m not sure I’m adding the overlay to the viewer with location properly and I’m just not getting how to make the image and the overlay on the same scale - any help appreciated!

Issue Analytics

State:
Created 5 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

timisonyoursidecommented, Jul 9, 2018

Very good, Ian, thanks for the great suggestion, I will look into using SVG, thanks!

0reactions

vinaymuthanna0727commented, Sep 7, 2018

@timisonyourside Here is the code pin https://jsfiddle.net/ueyqmmhg/107/

Html Canvas line scales along with the image

Steps to analyse the above code-pin Step1: on Mouse press draw the line on openseadragon image. Step2: Zoom-in and Zoom-out .the line remain in the same position.