LIBRARY

JavaScript for use with SVG
last modified: March 26, 2015
  1. PERGOLA 2.0.91
  2. ZOOM AND PAN 1.4.9updated 03-26-2015
  3. GEMï 2.12
  4. COLORPICKER 1.1
  5. TINY TOOLSupdated 3-16-2012
  6. TEXT FORMATTERupdated 05-02-2007
  7. BAR CHARTupdated 5-24-2005
  8. INNER WINDOW SCROLL -basicupdated 7-8-2007
  9. INNER WINDOW SCROLL -extendedupdated 7-8-2007

Comments are welcome, as well as bug reports. Please send to: nst@dotuscomus.com

view ZOOM and PAN with camera-like automatic zoom and real time panOperaFFIESafariChrome
extension by Geoff Whale. Version 1.4.9, November 2014

Files: Download zip folder

Rewritten as a class for easier integration. New features: scrolling directly on the map; mousewheel zoom on the map; configuration file for setting options.

This script allows downloading maps, artwork or images into the SVG document. A file selector lets you download bitmap (topographic maps, images), svg maps, and SVG artwork. Images are embedded in SVG documents, like in the examples provided. The selected document is loaded, parsed, and displayed in the viewer, and its proxy view in the navigator. Documents can be of any size or dimensions, with or without width, height and viewbox specified. Geoff Whale's extension allows documents having width and height values different from viewbox values to display correctly.

The automatic zoom feature behaves like a photographic zoom: holding the mouse button the magnifying is linear and continuous, as opposed to the discrete presets of the regular zoom, and it's usable on high end configurations and fast implementations. You can disable this feature for documents with heavy DOM load, or using filters.

The selectable real time pan feature can prove very useful when examining maps. You can disable this feature for documents with heavy DOM load, or using filters.

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, magnifying is expressed in relation to the proxy view area. Maximum magnifying is set to 1000x.

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 with zoom speed, although this only proves really useful with faster rendering capabilities.

Peripheral arrows in the navigator provide step scrolling in all directions. Re-centering and bull's eye are also present.

KNOWN ISSUES:

view INNER WINDOW SCROLL BASICOperaFFIESafariChrome
June 2004

Files: 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 EXTENDEDOperaFFIESafariChrome
July 2004

Files: 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 CHARTOperaFFIESafariChrome
Sep 2004

Files: 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 FORMATTEROperaFFIESafariChrome
Nov 2005

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

This script reformats text contained in an inner window with 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 mono space fonts of course but works well with any font face.

view COLORPICKEROperaFFIESafariChrome
Version 1.1, Nov 2008

Files: Download zip folder

This color picker is the same one that comes with GEMï and it's now available as a standalone widget for easy integration with other applications. This version only uses a by brightness algorithm. The by saturation and by hue algorithms will eventually be added later on. The up and down arrows next to the value boxes are there to compensate for the SVG's lack of text input, and incidentally I ended up finding their use more practical and faster for fine adjustments than text input.

view GEMïOperaFFIESafariChrome
Version 2.12, September 2010

Contents of zip folder: Download zip folder (bare version without demo)

GEMï is a cross-browser Web Operating System. It consists of an Application Environment Manager and a Graphical User Interface. It uses SVG as Virtual Device Interface. Since version 2 GEMï is powered by Pergola, the JavaScript-SVG framework. New features are: user session; skins; multi-directional resizing of the windows; enhanced zoom functions; combobox; quick-tips; layouts; progress bar; previews. The interface has also been revamped. Session and Preferences can be saved in remote mode. GEMï's main vocation is to be used on the web or private network.

The system is designed to be integrated and can be easily configured by developers or designers in a couple of steps. The interface wraps within windows (of unlimited number) any inner SVGs, which will be directly embedded in the SVG file, or referenced SVG documents. The embedded SVGs are rendered at runtime. This flexibility makes 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; Firefox; Safari; IE+ASV; Google Chrome. A feedback form is accessible through the Help menu for bug reporting and comments.

The demo is presented with a basic example of real application usage. The bare version in the package and the demo are strictly identical. The bare version doesn't have any inline SVGs and the project folder that is destined to contain your project's referenced files is empty. The downloadable bare version will not open any windows if it's not configured by either adding your SVGs inline or adding your files to the project folder and editing the config.es file as detailed in the online help and the howto.rtf.

GEMï 2 is FREE TO USE software. It is no longer under the LGPL or GPL license. See the TERMS OF LICENSE included in the package for restrictions.

KNOWN ISSUES
These are the same found for Pergola and are listed here.

The table below shows the behavior of the interface and its contents in the major browsers on high end configurations, and refers to what is concretely visible and working. It doesn't take into account what is not yet implemented or experimental in those browsers, typical and atypical flaws, SMIL, etc.

Graphics rendering Text rendering Homogeneity Speed Usability
Safari Excellent Very Good Good Fast Excellent
Opera Very Good Very Good Very Good Fast Good
Firefox Very Good Very Good Good Fast Very Good
IE + ASV Good Average Very Good Very Fast Very Good
Google Chrome Good Very Good Good Very Fast Excellent

Please note that by the terms of the license GEMï 2 cannot be modified. However, for private or private network use developers are allowed to apply customizations, in which case they may not redistribute.

TINY TOOLS