forgive the newbie question: i'm trying to do a proof of concept and would sure appreciate some direction. i need jscript snippets that will allow me just to dynamically zoom and pan an svg image. all the svg editors i've looked at are for doing animation (which this is, of sorts, just dynaically controlled). don't mind if its by mouse event or mouse/key event, but haven't been able to find examples of what has to be a fairly simple deal.

p.s. have downloaded web engine demo and will be looking at using.

thanks for helping a dilletante who's in over his head!

jeff c

Hello Jeff,

One way to do it would be to use Web Engine events to to trigger a scale and/or move action on a group of objects. The other way is with a little bit of code.

If you are zooming and panning a whole page the code may be the simplest.

Here is an example that embeds an SVG page inside and HTML page and then zoom/pans the SVG. Click on the words In,out,left etc. to move the SVG

SVGZoomTest

There is more on that example, including the source files, here.

Oh yes, there is another example here.

harpo - thanks for the links to the examples. i've been crash coursing on jscript and svg.
http://www.w3schools.com/default.asp
have come to the conclusion, as you did, that will probably want to embed svg, then perform operations on it!

will let you know when i've got a rough sample of my own.

btw: web engine beta is GREAT!

harpo, the last example you sent me, with the two embedded svg documents, makes sense, except being new to vm....the only thing i can't figure out is the "control" which you created as an svg file...what i can't figure out is did you create this on web engine, or just on notepad, and then place it as a foreign object.

like i say, i'm a newbie to your product and like most everyone, i learn just enough to be dangerous!

thanks, jeff

If you open the project file (the .ims file in the link on the example page) you will see there are 3 pages in the project. 'main' is an HTML page. 'svg' and 'control' are both SVG pages that are embedded into main as SVG Foreign Objects.

The 'svg' page is drawn with Web Engine (SiteSpinner could do this also). The 'control' page is hand coded and has two sections added into the page as code objects. One section is the script for the pan and zoom functions; the other is SVG code that draws the text that when clicked calls the zoom and pan functions.

This script has to be hand coded in the case but the the other code section could have been drawn instead of coded. In that case, you would add a link to the drawn objects to call the functions. For example " onclick="pan(-1,0) (note the quotation mark placement)

The main page also contains two code objects that duplicate the control page functionality but use HTML instead of SVG.

One of the nice things about this system is you can create HTML and SVG pages within the same project. So when you Preview all pages, all three pages are created and the two SVG pages are displayed within the main HTML page.

so that's why when i double click on the control it comes up as a foriegn object - because it has to be an svg control. the other two your refer to can be done in plain old html.

now, when i get this all figured out.....

i can't tell you how much i appreciate all the help. what i'm doing now is breaking it down to simple steps (or as simple as i can handle