view ZOOM and PAN with automatic zoom and real time pan
by , May 2004
extension by Geoff Whale , Aug 2007

Files:

• autozoom_1.1.svg
• zoom.es
• winter.jpg
• radars-fixes-ile-de-france.png
• winter.svg
• radars.svg
• torino.svg
• IPBP.svg
• README.txt

Download zip folder

Please see README.txt for Geoff Whale's extension and fixes.

This script allows downloading artwork, images or maps into the SVG document. A choice is proposed consisting of a .png topographic map, two svg maps and a .jpg image. Images must be embedded in svg documents, like in the examples provided. The selected document is loaded and parsed, enabling interactivity, and then displayed in the main map box and a reduction of it in the navigator. Documents can be of any size or dimensions, transformations being applied following each individual document's viewbox.

While the automatic zoom feature is meant to be simply a gadget, although it actually behaves like a photographic zoom, the real time pan feature can prove very useful when examining maps. Its intent is to allow the user to scroll through the map in a manner similar to what one would do when consulting a paper map.

To allow switching between regular and automatic zoom two arrays are created, one containing the preset values for the regular zoom and another for the automatic zoom. To simulate analog optical appliances, magnifiying is expressed in relation to the lens rectangle area. Maximum magnfying is arbitrarily set to 180x. At this level the rectangle representing the lens appears rather small and a higher level seems inadequate since we need to drag the rectangle across the panoramic box.

A third array is used to store the lens rectangle's width and height sums for each of the area multiplier values contained in the zoom arrays. Precalculating and storing into arrays the sides' dimensions helps achieving zoom speed, although this would only prove really useful with faster display capabilities.

The zoom function is invoked through onmousedown event and made recursive if auto zoom flag ("az") is set to true. Mouseup event interrupts recursiveness.

The real time pan is very simply achieved by setting the map viewbox to the new values each time the doPan function is invoked by onmousemove event if the real time pan flag ("rtp") is set to true.

Latest added feature is the possibility of step scrolling the map in all directions by means of arrows. Re-centering and bull's eye are also present.

Works with Opera, ASV and Safari(SVG carbon). Safari native only displays the interface. Firefox displays uploaded svg maps but does not display images and won't display the thumbnail (bug 269482).

The script is independent of the number of selectable documents. For use with a single svg document follow these instructions (or use the GEMï interface):

In the script file:

1. change the id "doctoload" with "map" in the first line of the set_pan_viewbox() function (line 149).
2. move the set_pan_viewbox() and zoom('org') function calls in the load_svg() function, at the end of the init() function;
3. remove the load_svg() function;

In the svg document

1. replace the inner <svg id="doctoload"> container with any svg map or image;
2. remove the selectors section (lines 64 through 86).

view INNER WINDOW SCROLL BASIC
by , Jun 2004

Files:

• innerwinscroll.svg
• innerscroll.es
• innerscroll_commented.es

download zip folder

This script allows scrolling trough an inner SVG of any dimension, delimited by a clip path. In this example it is a text block of 240px by 1100px. The clipping path is materialized by a small window with a side bar. The look of the interface can be freely manipulated without need for changes in the script, knowing that the scroll bar is really made of three different rectangles, one for page up initially set to 0px height, one for page down initially set to full height, one with a red fill, for the marker, set to full height. The script makes for vertical displacement of the text block and sets the heights of the two rectangles accordingly. The red rectangle shows through a small gap between the two others giving the impression of a line. The slight color difference between the two grey rectangles is there to clarify this. The page displacement command works on the same principle of the line displacement command, the only differences being the requested offset and the redimensioning of the rectangles.

The algorithm uses the two parameters passed to the function, the type of scroll (scrl_type) indicating line or page, and the direction (v_dir). Mousedown event generates self recursiveness of the scroll function, while mouseup event interrupts it. The delay set for the first recurrence avoids accidental line or page repetition, i.e. it gives enough time to mouseup event to cancel the call.

view INNER WINDOW SCROLL EXTENDED
by , Jul 2004

Files:

• innerwinscroll_full.svg
• innerscroll.es
• innerscroll_commented.es

download zip folder

This script allows scrolling trough an inner SVG of any dimension, delimited by a clip path. In this example it is a text block of 240px by 1500px. The clipping path is materialized by a small window with a side bar. The look of the interface can be freely manipulated without need for changes in the script. This version carries all the features you'd expect in a scroll bar, in particular the scroll button which relies on mouse position. evtX and evtY are readjusted to take scaling into account, the result seeming pretty accurate under all situations; a drag area of large dimension, etc. As opposed to the basic version, here the pgUp and pgDn also rely on mouse position readings. The page displacement command works on the same principle of the line displacement command, only the requested offset changes.

Unlike the basic version, the algorithm still uses the two parameters passed to the function, the type of scroll (scrl_type) indicating line or page, and the direction (v_dir), but the page scroll needs some extra settings in a dedicated function. Mousedown event generates self recursiveness of the scroll function, while mouseup event interrupts it. The delay set for the first recurrence avoids accidental line or page repetition, i.e. it gives enough time to mouseup event to cancel the call.

view BAR CHART
by , Sep 2004

Files:

• barchart.svg
• data.jsp
• barchart.es
• barchart_commented.es

download zip folder

This script creates a bar chart out of numeric data from a database. In the full feature version used in the application for which it was created it also works with dates. Other limitations in this version are: selected theme displays data relating to units not shown; classes number is set arbitrarily to 5 and there is no class selector.

Theme base colors are defined into the array named Col. Upon theme selection in the theme selector menu, the shades corresponding to the classes are obtained with an algorithm that treats the three rgb components separately to reach the same intensity for any color, but respecting the hue. You can easily change the base color for a theme without having to build the shades. Then bars number and their height and stroke width are calculated according to the data retrieved and classes thresholds are shown. In original application the data is drawn from a generated jsp file. In this version the jsp file is static.

view TEXT FORMATTER
by , Nov 2005

Files:

• textformat.svg
• textformat.es
• textformat_commented.es

download zip folder
download zip folder of FF version (extremely slow)

This script reformats text contained in an inner window with most features, e.g. resize, move and scroll functions. The work is based on the inner window scroll script which has been modified here to accommodate for the new formatting functions.

The text formatting algorithm uses the getComputedTextLength() and getNumberOfChars() methods on a dummy line of text in the svg text tag taking into account the font family and size attributes specified. The text to be displayed is entered in the ecmascript file, stored as paragraph blocks into strings which are then collected into an array. The textFormat() function then calculates the line length according to the window size and builds the <tspan>s as needed. This avoids the fastidious hand formatting in the svg file (at least for 1.1). The text can be of any length and the function is designed to format paragraphs with paragraphs headers only. The algorithm is very accurate with monospace fonts of course but works well with any font face.

Works with Opera and ASV. There is a Firefox version since getComputedTextLength() is not implemented yet in Firefox.

view GEMï
by , Apr 2008

Files in zip folder:

• gemi.svg
• gemi.es
• config.es
• setcookie.php
• getcookie.php
• HOWTO.rtf
• help.html
• help.css
• feedback.html
• background folder
• palettes folder
• project folder
• CHANGES.txt
• COPYING.LESSER.txt
• COPYING.txt

Download zip folder of bare version (379 Kb)

This is a multiple windows system with scroll bars, resize, collapse and restore, move, zoom, menus (file open and close), dialogs, windows tabs, thumbnails, colorpicker, preferences, print, info, online help. Its main vocation is to be used on the web or private network. In remote use it can open files and save the user preferences. These functions are disabled in local use to preserve consistency across the different implementations.

The system is designed to be integrated, in other words it can do something other than just function for it's own sake and can be easily configured by developers or designers in a couple of steps. The interface encapsulates and presents within windows (of unlimited number) any inner SVGs, that will be directly embedded in the SVG file, or linked SVG documents. This flexibility should make it possible for anyone to integrate their work with the interface. For installation and configuration, please follow carefully the recommendations in the online help and the howto.rtf, both included in the package.

GEMï was tested and found compatible with these SVG implementations: Opera native v9.23; Firefox native v2.0.0.6; Safari native v3.0.3; ASV. A feedback form is accessible through the Help menu for bug reporting and comments.

The GEMï demo is presented with a basic example of real application usage. GEMï is under the LGPL license, but the work shown in the demo is not. The bare and demo versions are strictly identical. The bare version doesn't have any inline SVGs and the project folder that is destined to contain your project's linked files is empty. When launching the bare version, local or remote, the interface will not do much more than just being there.

Note: on first launch IE may show an "Access denied" warning. Just refresh the browser.

The table below shows the behavior of the interface and its contents in the major implementations on high end configurations, and refer to what is concretely visible and working. They don't take into account what is not implemented, typical and atypical flaws, SMIL, etc.

	Graphics rendering	Text rendering	Speed	Usability
Safari	Excellent	Very Good	Fast	Excellent
Opera	Very Good	Poor	Average	Good
Firefox	Very Good	Very Good	Fast	Very Good
ASV	Poor	Average	Very Fast	Very Good