Openseadragon image cordinates - seadragon

iam doing a project using openseadragon check out the below example.
a samle openseadragon image
In the Onclick method want to find the cordinates(px,py) of the image.Is there any method?? please help this is ma first openseadragon project.
thanks

When you get a click, it'll be in window pixel coordinates. You can then translate it into viewport coordinates (which go from 0.0 on the left to 1.0 on the right). You can then translate those into image coordinates. Here's how it would look all together:
viewer.addHandler('canvas-click', function(event) {
var viewportPoint = viewer.viewport.pointFromPixel(event.position);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
  console.log(imagePoint.x, imagePoint.y);
});
For more info on the coordinate systems, see: http://openseadragon.github.io/examples/viewport-coordinates/

The following code, adapted from #iangilman's answer, worked for me with OpenSeadragon 2.0.0. It seems that the second argument of the handler function got removed in more recent versions. I added the quick === true condition to keep it from firing on a drag start. It might also be a good idea to switch of the default single-click-to-zoom behaviour in the gestureSettingsMouse object.
viewer = OpenSeadragon({
id: "osd1",
prefixUrl: "/path/to/seadragon/images/",
tileSources: "/path/to/tif/images/image.tif.dzi",
showNavigator: true,
gestureSettingsMouse: {
clickToZoom: false,
dblClickToZoom: true
}
});
viewer.addHandler('canvas-click', function(target) {
if(target.quick === true){
var viewportPoint = viewer.viewport.pointFromPixel(target.position);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
console.log(parseInt(imagePoint.x), parseInt(imagePoint.y));
}
});

Related

How to get the position of a collision in Babylon.js?

Trying to make a click to move game in Babylon.js, so I'm trying to get the position on the plane that is being clicked on.
myGround.actionManager = new BABYLON.ActionManager(scene)
myGround.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
console.log(evt)
}));
This code does not seem to tell me the point on the parent mesh that was clicked. Is it possible to get this data?
Of course, you can use the picking collision to find the screen and world coordinates of the point you clicked on.
The simplest code can be found here:
https://www.babylonjs-playground.com/#NU4F6Y
You can also use the event from scene.onPointerObservable :
cene.onPointerObservable.add((evt) => {
if(evt.type === BABYLON.PointerEventTypes.POINTERPICK) {
console.log(evt.pickInfo.pickedPoint)
}
})
More info about picking info can be found here:
https://doc.babylonjs.com/babylon101/picking_collisions

change camera rotation without dragging canvas in Aframe

I am playing with Aframe (version 0.8.0) sometime now. I am stuck at one problem, I have been searching for its solution for couple of days but failed thus this question.
My problem is how can I change camera rotation without having to drag on canvas?
I tried these things but they didn't work:
camera.setAttribute('rotation', {....})
camera.object3D.children[0].rotation.x = 0 // some value
putting camera entity as the child of another entity and changing the rotation of parent entity is not what I am looking for
Any hint would be appreciated, thanks...
Update: this problem occurs only with version 0.8. There is no such error in previous version 0.7.1.
You're milage will vary but you could try:
https://glitch.com/edit/#!/a-frame-rotate-camera-test
AFRAME.registerComponent("rotate", {
init: function () {
document.body.onkeyup = (e) => {
if(e.keyCode == 32){
this.el.components['look-controls'].yawObject.rotation.y += 1
}
}
}
});

Using Jcrop ,could not refresh preview pane correctly when changing image

I am trying to use Jcrop with preview pane in the page of changing avatar. However, after uploading new image file, when I call setImage to set the new image(with different width/height) and also set the attr of the preview image, the preview pane show up incorrectly. I use firebug the trace, it seems the img is still using the height, width of previous image. I modify the tutorial3 in the download package, simply adding a botton to change the image to see if the preview pane is correct or not. I seem to be the same error. Here below is the code for button click function.
Any solutions?
$('#img1').click(function(e) {
$('#preview').attr('src','demo_files/img50d5753eb067c.jpg');
jcrop_api.setImage('demo_files/img50d5753eb067c.jpg');
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
boxWidth: 450
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
});
I see the same problem with yours in this topic Change an Image while using JCrop and the answer of AdmSteck in which is the best one.
Hope this help!
within the unminified version of the plugin "boundx and boundy" are declared as local variables that do not get updated outside of the setImage function. All you need to do is remove the 'var' for these two variables and make them global.
from line 328,
var boundx = $img.width(),
boundy = $img.height(),
$div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
change to
boundx = $img.width();
boundy = $img.height();
var $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);

Image smoothBitmapContent doesn't work?

recently I got a jagged image problem when scaling. I set my image components smoothBitmapContent true, and it works properly the first time, but if I reset the source, the images return jagged. It seems like the smoothBitmapContent property has been changed to false, but it doesn't work even if I set it to true in run time. Anyone knows how to fix this? Thanks.
Here's is my code:
<custom1:SmoothImage id="MJCard_3_36" x="286.5" y="56.65" scaleX="0.66" scaleY="0.83" smoothBitmapContent="true"/>
MJCard_3_36.source = seabedPicArr[index1-1][index2-1][index3-1];
I simply use a custom Image-extended class and switch smoothBitmapContent on, and I set the image's source in run time.
To enable smoothing with dynamically loaded images, you need to listen to Event.COMPLETE on Image. Then get content (it should be Bitmap) and set smoothing to true:
var image:Image = new Image();
image.addEventListener(Event.COMPLETE, onLoaded);
image.source = ...
function onLoaded(event:Event):void
{
event.target.content.smoothing = true;
}

Prevent world-wrapping in GMap v3

I'm currently migrating from v2 to v3. The world should not be repeated longitudinally.
In v2 this could be archived with something like this:
var proj = new GMercatorProjection(30);
proj.tileCheckRange = function(a,b,c) {
var tileBounds = Math.pow(2,b);
if (a.y<0 || a.y >= tileBounds) {return false;}
if (a.x<0 || a.x >= tileBounds) {return false;}
return true;
};
proj.getWrapWidth = function(zoom) {
return 99999999999999;
};
G_NORMAL_MAP.getProjection = function() {return proj;};
But I have yet to find a solution for v3.
EDIT To clarify a bit: I'm not looking for a way to prevent panning (navigating sideways) but a way to prevent the map from repeating it self, esp. at low zoom-levels
Check out the two answers at How do I limit panning in Google maps API V3?. The technique outlined there should get you (depending on your use case) most of the way there or maybe all the way there.
Those answers do not show how to limit wrapping, but they do show how to limit panning. If you can take other measures to restrict what's in the initial viewport (say, if you have control over the size and can restrict the zoom levels and initial coordinates appropriately), then limiting panning can get you there.
The restriction MapOption property can help here.
new google.maps.Map(
container,
{
restriction:
{
latLngBounds: {north: 85, south: -85, west: -179.5, east: 179.5},
strictBounds: true
}
});
This will also take care of the "padding" that is usually displayed beyond the north/east bounds and make the map "end" where the map tiles end.
You can fiddle with the numbers a bit to account for a bit more (or a bit more accurate) area, but I think it should be enough for most cases.
World wrapping can be easily prevented this way (adapted from the answers linked by Trott)
// prevent wrap
var lastValid = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
if(map.getBounds().getNorthEast().lng() > map.getBounds().getSouthWest().lng()) {
lastValid = map.getCenter();
}
else
map.panTo(lastValid);
});

Resources