Loading Profile...
Adding Panning Controls to Seadragon Ajax
Hi,
I'd like to be able to add panning controls for left, right, up and down to seadragon ajax.
Any pointers are greatly appreciated.
Anthony
I'd like to be able to add panning controls for left, right, up and down to seadragon ajax.
Any pointers are greatly appreciated.
Anthony
I’m confused
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The company marked this question as answered.
-
Inappropriate?Anthony,
Let me break down your question into two parts:
1. How to create custom viewer controls
2. How to pan within the viewer viewport
Custom Controls
The official Seadragon Ajax library documentation has a great article on how to create your own controls for the Seadragon Ajax viewer:
http://livelabs.com/seadragon-ajax/li...
Panning
You can pan the viewport by using either the Seadragon.Viewport.panBy() or Seadragon.Viewport.panTo() method. Remember they both work using a normalized coordinate system which is explained in this article:
http://livelabs.com/seadragon-ajax/li...
For example, to pan right you would pass something like new Seadragon.Point(0.1, 0) to viewer.viewport.panBy(...).
Please let me know if you have further questions, I'd be happy to help.
Cheers,
Daniel
The company and 1 other person say
this answers the question
-
Inappropriate?Hi Daniel,
Thanks for getting back to me.
I have followed the information above, and have been able to do the following.
Create a custom control - which appears and can be styled independently.
The second part is what is getting me somewhat baffled.
While I have followed your example i cannot get my new button to process my action as defined in the javascript see below:
function Right() {
var control = document.createElement("a");
var controlText = document.createTextNode("Right");
control.href = "#"; // so browser shows it as link
control.className = "right";
control.appendChild(controlText);
Seadragon.Utils.addEvent(control, "click", onRight);
return control;
}
function onRight(event) {
viewer.viewport.panBy(new Seadragon.Point(0.1, 0));
}
I have checked (using an alert) that when my button is pressed that it actually makes a call to the onRight fuction.
But it wont pan across to the right.
Any ideas?
Thanks
Anthony -
Inappropriate?Anthony,
I'm not sure what's going wrong in your example but I quickly put together one that I actually tested and which seems to work. I posted the code to jsbin as it was all scrambled here:
Example
http://jsbin.com/akeni
View Source
http://jsbin.com/akeni/edit#html
Feel free to ask me if you have any questions.
Cheers,
Daniel
I’m happy
The company and 3 other people say
this answers the question
-
Inappropriate?Hi Daniel,
Sorry it has taken me a couple of days to get back to you.
I have managed to get this working as individual buttons.
My code is as follows (might be handy for reference for anyone who stumbles upon this topic)
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("seadragon");
viewer.openDzi("/radio4/anthony_ali/ahow/2500/GeneratedImages/dzc_output.xml");
viewer.addControl(panRightButton(), Seadragon.ControlAnchor.NONE);
viewer.addControl(panLeftButton(), Seadragon.ControlAnchor.NONE);
viewer.addControl(panUpButton(), Seadragon.ControlAnchor.NONE);
viewer.addControl(panDownButton(), Seadragon.ControlAnchor.NONE);
}
function panRightButton() {
var control = document.createElement("a");
var controlText = document.createTextNode("Right");
control.href = "#"; // so browser shows it as link
control.className = "buttonright";
control.appendChild(controlText);
Seadragon.Utils.addEvent(control, "click", onPanRight);
return control;
}
function panLeftButton() {
var control = document.createElement("a");
var controlText = document.createTextNode("Left");
control.href = "#"; // so browser shows it as link
control.className = "buttonleft";
control.appendChild(controlText);
Seadragon.Utils.addEvent(control, "click", onPanLeft);
return control;
}
function panUpButton() {
var control = document.createElement("a");
var controlText = document.createTextNode("Up");
control.href = "#"; // so browser shows it as link
control.className = "buttonup";
control.appendChild(controlText);
Seadragon.Utils.addEvent(control, "click", onPanUp);
return control;
}
function panDownButton() {
var control = document.createElement("a");
var controlText = document.createTextNode("Down");
control.href = "#"; // so browser shows it as link
control.className = "buttondown";
control.appendChild(controlText);
Seadragon.Utils.addEvent(control, "click", onPanDown);
return control;
}
var PAN_DISTANCE = 0.1;
function onPanLeft(event) {
viewer.viewport.panBy(new Seadragon.Point(-PAN_DISTANCE, 0));
}
function onPanRight(event) {
viewer.viewport.panBy(new Seadragon.Point(PAN_DISTANCE, 0));
}
function onPanUp(event) {
viewer.viewport.panBy(new Seadragon.Point(0, -PAN_DISTANCE));
}
function onPanDown(event) {
viewer.viewport.panBy(new Seadragon.Point(0, PAN_DISTANCE));
}
Seadragon.Utils.addEvent(window, "load", init);
The elements themselves are then styled and positioned using CSS, and have been position in alignment with the default navigation struture.
Thanks again for your help.
Anthony
I’m happy and thankful
EMPLOYEE
