Hi forum,
I am a newbee with javascript and therefore pretty much new with the
dynapi. However I have tried to figure it out over the past week and
have succeeded in making some changes to the dynapi Viewport in order to
fulfill my need.
What I am trying to use dynapi for, is something like an image
navigator; i.e , I wanna give an image as a param and the widget that is
created is a viewport with a small thumbnail of the same on the lower
left hand corner that one can use to scroll through an image that doesnt
fit into the viewport.
code for the imagenavigator.js is as follows :
/*
DynAPI Distribution
ViewPort Class
The DynAPI Distribution is distributed under the terms of the GNU
LGPL license.
Requirements:
dynapi.api.*
dynapi.util [thread, pathanim]
dynapi.gui [label]
*/
// note: we need an onremove event
function ImageNavigator(content,offsetX, offsetY, width, height) {
this.DynLayer = DynLayer;
this.DynLayer();
this.moveTo(offsetX, offsetY);
this.setSize(width, height);
this.contentPane = new DynLayer();
this.addChild(this.contentPane);
this.bufferW = 0;
this.bufferH = 0;
this.mainImage = DynImage.getImage(content);
this.max = new DynImage(this.mainImage);
this.max.moveTo(0,0);
this.max.setSize(width*2,height*2);
this.navigator = new DynLayer(null, 0,height*0.75,width*0.25,
height*0.25,"#000000", true);
this.addChild(this.navigator);
this.min = new DynImage(this.mainImage);
this.min.setSize(width*0.25, height*0.25);
this.navigator.addChild(this.min);
this.highlighter = new DynLayer(null,
0,0,this.navigator.getWidth()*0.5, this.navigator.getHeight()*0.5,"red",
true)
this.navigator.addChild(this.highlighter);
DragEvent.enableDragEvents(this.highlighter);
DragEvent.setDragBoundary(this.highlighter);
var highlightEvent = new EventListener(this.highlighter);
highlightEvent.ondragstart = function(e){
target=e.getTarget()
this.jumpTo(-target.getX()*8, -target.getY()*8)
};
this.highlighter.addEventListener(highlightEvent);
var scrollEvent = new EventListener(this);
scrollEvent.onpathrun = function(e) {
e.getTarget().invokeEvent('scroll');
};
this.contentPane.addEventListener(scrollEvent);
var viewportListener = new EventListener(this);
viewportListener.onresize = function(e) {
var o = e.getTarget();
if (!o.created || !o.content) return;
o.findDimensions();
if (!o.enableHScroll)
o.contentPane.setX(0);
else if
(o.contentPane.x<-o.availableScrollX)
{o.contentPane.setX(-o.availableScrollX);}
if (!o.enableVScroll)
o.contentPane.setY(0);
else if
(o.contentPane.y<-o.availableScrollY)
{o.contentPane.setY(-o.availableScrollY);}
o.invokeEvent("scroll");
};
viewportListener.oncreate = function(e) {
var o = e.getTarget();
if(is.def && o.css)
o.css.overflow='hidden'
o.reset(false);
};
this.addEventListener(viewportListener);
this.contentResizeListener = new EventListener(this);
this.contentResizeListener.onresize = function(e) {
var o = e.getTarget();
o.findDimensions();
o.invokeEvent("contentchange");
};
this.contentResizeListener.onload = function(e) { // for loadpanel
var o = e.getTarget();
if (o.created && o.content) {
o.reset();
}
};
this.setContent(this.max);
}
ImageNavigator.prototype = new DynLayer();
ImageNavigator.prototype.reset = function(b) {
this.contentPane.moveTo(0,0);
this.findDimensions();
if (b!=false)
this.invokeEvent("contentchange");
};
ImageNavigator.prototype.setContent = function(content) {
if (this.content &&
this.contentPane.children.length>0) {
if
(this.content==this.max) return;
this.max.removeFromParent();
this.max.removeEventListener(this.contentResizeListener);
}
if (!content) this.content =
new DynLayer();
else this.content = this.max;
this.content.moveTo(0,0);
this.contentPane.moveTo(0,0);
this.contentPane.addChild(this.content);
this.content.addEventListener(this.contentResizeListener);
this.findDimensions();
this.invokeEvent("contentchange");
};
ImageNavigator.prototype.findDimensions = function() {
if (!this.content) return;
this.contentPane.setSize(this.content.getWidth(),this.content.getHeight());
this.availableScrollX =
this.content.getWidth()-this.getWidth()+this.bufferW;
this.availableScrollY =
this.content.getHeight()-this.getHeight()+this.bufferH;
this.enableHScroll = this.availableScrollX>0;
this.enableVScroll = this.availableScrollY>0;
};
ImageNavigator.prototype.jumpTo = function(x,y) {
this.content.moveTo(x,y);
this.invokeEvent("scroll");
};
ImageNavigator.prototype.setRatio = function(rx,ry) {
this.setRatioX(rx);
this.setRatioY(ry);
};
ImageNavigator.prototype.setRatioX = function(rx) {
if (rx!=null)
this.contentPane.setX(-this.availableScrollX*rx);
};
ImageNavigator.prototype.setRatioY = function(ry) {
if (ry!=null)
this.contentPane.setY(-this.availableScrollY*ry);
};
ImageNavigator.prototype.getRatioX = function() {
if (!this.content ||
!this.enableHScroll) return 0;
else if (this.contentPane.x==0)
return 0;
else if
(this.contentPane.x==-this.availableScrollX) return 1;
else return
1-(this.availableScrollX+this.contentPane.x)/this.availableScrollX;
};
ImageNavigator.prototype.getRatioY = function() {
if (!this.content ||
!this.enableVScroll) return 0;
else if (this.contentPane.y==0)
return 0;
else if
(this.contentPane.y==-this.availableScrollY) return 1;
else return
1-(this.availableScrollY+this.contentPane.y)/this.availableScrollY;
};
ImageNavigator.prototype.scrollUp = function() {this.scrollSlide(null,0);};
ImageNavigator.prototype.scrollDown = function()
{this.scrollSlide(null,-this.availableScrollY);};
ImageNavigator.prototype.scrollLeft = function()
{this.scrollSlide(0,null);};
ImageNavigator.prototype.scrollRight = function()
{this.scrollSlide(-this.availableScrollX,null);};
ImageNavigator.prototype.scrollSlide = function(x,y) {
if (x!=null &&
this.enableHScroll) {
this.invokeEvent("scrollstart");
this.contentPane.slideTo(x,this.contentPane.y);
}
else if (y!=null &&
this.enableVScroll) {
this.invokeEvent("scrollstart");
this.contentPane.slideTo(this.contentPane.x,y);
}
};
ImageNavigator.prototype.cancelScroll = function() {
this.contentPane.stopSlide();
this.invokeEvent("scrollend");
};
THE PROBLEM that I am facing is in the highlightEventListener that says
"Error: this.jumpTo is not a function
Source File: htmlcode/dynapi/src/lib/dynapi/gui/imagenavigator.js
Line: 50"
However, when I comment that line out and implement the listener in the
HTML, it is working alright. here is the code for the HTML of the same:
<html>
<head>
<title>DynAPI Image Viewer - ViewPort</title>
<script type= "text/javascript" language="JavaScript"
src="../src/dynapi.js"></script>
<script language="Javascript">
DynAPI.setLibraryPath('../src/lib/')
DynAPI.include('dynapi.api.*')
DynAPI.include('dynapi.event.*')
DynAPI.include('dynapi.util.thread.js')
DynAPI.include('dynapi.util.pathanim.js')
DynAPI.include('dynapi.gui.viewport.js')
DynAPI.include('dynapi.gui.label.js')
DynAPI.include('dynapi.gui.dynimage.js')
DynAPI.include('dynapi.gui.imagenavigator.js')
DynAPI.include('dynapi.ext.*')
</script>
<script language="Javascript">
DynAPI.onLoad = function() {
iviewer = new ImageNavigator("machinery.jpg", 400, 200, 800, 600)
/*var myListener=new EventListener(iviewer.highlighter)
myListener.ondragstart=function(e){
target=e.getTarget()
iviewer.jumpTo(-target.getX()*8, -target.getY()*8)
}
myListener.ondragend=function(e){
target=e.getTarget()
iviewer.jumpTo(-target.getX()*8, -target.getY()*8)
}*/
iviewer.highlighter.addEventListener(myListener)
DynAPI.document.addChild(iviewer)
}
</script>
</head>
<body bgcolor="#ffffff">
</body>
</html>
I know that I do not have enough experience to but I tired. I could
really do with some help. Also, some good website with some tutorials on
JAVASCRIPT / DYNAPI would be of help
thanks in advance
Nikhil
-------------------------------------------------------
This sf.net email is sponsored by: OSDN - Tired of that same old
cell phone? Get a new here for FREE!
https://www.inphonic.com/r.asp?r=sourceforge1&refcode1=vs3390
_______________________________________________
Dynapi-Help mailing list
[EMAIL PROTECTED]
https://lists.sourceforge.net/lists/listinfo/dynapi-help
