These are chat archives for openseadragon/openseadragon

9th
Jun 2017
Joohansson
@Joohansson
Jun 09 2017 05:58

Thanks, that works but a bit strange if I do it at runtime. I need to provide the angle depending on other functions.

Does not work:
elt.id = "runtime-overlay";
elt.className = "highlight";
elt.style.transform = "rotate(20deg)";
var rect = new OpenSeadragon.Rect(0, 0, 100, 100);
viewer.addOverlay({
element: elt,
location: rect
});

Works but I must wait 1 sec after the page is loaded or the object will not rotate until I call the function second time?
elt.id = "runtime-overlay";
elt.className = "highlight";
var rect = new OpenSeadragon.Rect(0, 0, 100, 100);
viewer.addOverlay({
element: elt,
location: rect
});
document.getElementById("runtime-overlay").style.transform = "rotate(20deg)";

Joohansson
@Joohansson
Jun 09 2017 06:25
And if I add the style like that it get lost as soon as I move the map, probably overridden by "highlight" CSS.
Joohansson
@Joohansson
Jun 09 2017 06:45

Even if I style everything with js and not including elt.className it keeps all styles except the rotation when I move the map. I don't understand why the rotation is reset.

elt.style.transform = "rotate("20deg)";
elt.style.opacity = "0.5";
elt.style.filter = "alpha(opacity=50)";
elt.style.outline = "3px solid #be0a0a";
elt.style.backgroundColor = "#0083f9";

Joohansson
@Joohansson
Jun 09 2017 08:30
I ended up using svg plugin instead. Works perfectly:
var svgOverlay = viewer.svgOverlay();
var d3Target = d3.select(svgOverlay.node());
var rect = d3Target.append("rect")
.style('fill', '#0083f9')
.style('stroke', '#ff7b7b')
.style('stroke-width', 200)
.style('stroke-opacity', 1)
.style('fill-opacity', 0.5)
.attr("x", posX)
.attr("y", posY)
.attr("width", width)
.attr("height", length)
.attr("transform", "rotate("+rotation+","+rotX+","+rotY+")")
.on("mouseenter", function() {
d3.select(this)
.transition()
.duration(200)
.style('fill-opacity', 0.15)
})
.on("mouseleave", function() {
d3.select(this)
.transition()
.duration(50)
.style('fill-opacity', 0.5)
});
$(window).resize(function() {
svgOverlay.resize();
});
Illya Moskvin
@IllyaMoskvin
Jun 09 2017 15:03
You're right, I didn't notice it broke w/ navigation. Now that I've tested it, it broke my ability to pan, too. Strange. Glad to hear SVG is working well for you!