main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity and svg gui:scrollbar

SVG Scrollbar, Version 0.9.1, 2006-10-30, (see history at the end of the page)

This SVG scrollbar object should assist authors of SVG web applications in creating user interfaces.

Why should you create SVG only web applications? Advantages of SVG only applications are flexiblity (you can control every single aspect of a SVG GUI element) and scalability (in SVG your userinterface elements are scalable as well). If you need a pixel-precise, scalable application, HTML is not very well suited, since HTML form elements don't scale well. SVG also potentially allows more sophisticated GUI elements than HTML provides, such as slider, dial knobs, complex colourpickers, etc. Disadvantages include complexity (more complex than using HTML form elements) and a potentially bad user experience, if your SVG GUI elements behave different than native GUI elements of the operating system the user is used to. Some browsers still don't support SVG to HTML or HTML to SVG communication. In that case you are sort of locked into doing everything with SVG in order to reach the broadest audience. Another advantage of creating SVG only applications is, that your applications also work in SVG viewers outside the webbrowser (e.g. Batik, eSVG or SVG embedded applications).

See an example of the SVG scrollbar object. The scripts had been tested in Adobe SVG viewer version 3, version 6, Opera 9, Firefox/Mozilla SVG and Batik. The scrollbar is free to use. If you do any substantial improvements, please send back your improvements to the author. The GUI elements of carto.net are licensed under the terms of the LGPL license and you need to distribute the license with your code. Additionally, you should create a link to carto.net in your project's "about page" or impressum. If you plan to use the GUI elements in a commercial product, please check back with the author of the GUI elements to investigate arrangements. The original URL for the scrollbar is http://www.carto.net/papers/svg/gui/scrollbar/.

Documentation

Requirements

To use the scrollbar, your project needs to meet the following requirements:

Features

Dependencies on external functions

  1. scrollbar.js:
    • all of the objects and functions in this file are necessary
  2. mapApp.js:
    • all of the objects and functions in this file are necessary
  3. timer.js:
    • all of the objects and functions in this file are necessary
  4. helper_functions.js:
    • all the global variables at the top of the file
    • function getTransformToRootElement()

Constructor

The following constructor function creates the scrollbar:

var scrollbar = new scrollbar(id,parentNode,x,y,width,height,startValue,endValue,initialHeightPerc,initialOffset,scrollStep,scrollButtonLocations,scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,functionToCall) {
Example:
//first the scrollbar styles
var scrollbarStyles = {"fill":"whitesmoke","stroke":"dimgray","stroke-width":1};
var scrollerStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1};
var triangleStyles = {"fill":"dimgray"};
var highlightStyles = {"fill":"dimgray","stroke":"dimgray","stroke-width":1};
myMapApp.scrollbars["sb1horiz"] = new scrollbar("sb1horiz","scrollbars1",50.5,250.5,899,15,scrolledObject1.maxX,scrolledObject1.minX,0.2495,0,0.005,"top_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject1);

The arguments are the following:

  1. id (String):
    unique id for the scrollbar
  2. parentNode (String or node reference):
    group id or node reference to the parent group that will contain the scrollbar geometry
  3. x (number, in viewBox coordinate system):
    x-coordinate of the scrollbar (upper left corner)
  4. y (number, in viewBox coordinate system):
    y-coordinate of the scrollbar (upper left corner)
  5. width (number, in viewBox coordinate system):
    width of the scrollbar (this includes the scroll buttons)
  6. height (number, in viewBox coordinate system):
    height of the scrollbar (this includes the scroll buttons)
  7. startValue (number, float):
    the start value of the scrollbar (at the left or top of the scrollbar)
  8. endValue (number, float):
    the end value of the scrollbar (at the right or bottom of the scrollbar)
  9. initialHeightPerc (number, percentage, float):
    the width of the scroller rectangle in relation to the scrollbar rectangle. This width indicates how much of the scrollable content is currently visible. The value should be between 0 and 1, typically smaller than 1 (otherwise you wouldn't have to scroll)
  10. initialOffset (number, percentage, float):
    the initial (left or top) position of the scroller in relation to the scrollbar rectangle. The value must be between 0 and 1.
  11. scrollStep (number, percentage, float):
    the step (percentage value of the whole scrollbar width or height) that the scroller should move when one of the scroll buttons is clicked. The same value, multiplied by 10 is used to scroll when clicking directly in the scrollbar
  12. scrollButtonLocations (string, with an underbar as separator):
    this parameter indicates where the scroll buttons should be located in relation to the scrollbar. The separator is an underbar (_). Valid values are the following: "top_bottom", "bottom_bottom", "top_top" or "none_none". Other values generate an error. In case of an horizontal scrollbar, "top" translates into "left" and "bottom" into "right"
  13. scrollbarStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the scrollbar rectangle; could include CSS classes; example: var {"fill":"whitesmoke","stroke":"dimgray","stroke-width":1};
  14. scrollerStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the scroller rectangle; could include CSS classes; example: var scrollerStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1}; note that the same presentation attributes are also used for the scroll buttons.
  15. triangleStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the triangles in the scroller buttons; could include CSS classes; example: var triangleStyles = {"fill":"dimgray"};
  16. highlightStyles (array of literals with presentation attributes):
    an array literal containing the presentation attributes of the active scroller rectangle and the active scroll buttons; could include CSS classes; these presentation attributes are applied when the scroller, scrollbar or the scrollbuttons are pressed; example: var highlightStyles = {"fill":"dimgray","stroke":"dimgray","stroke-width":1};
  17. functionToCall (function or object or undefined):
    callBackFunction: you can pass a function, object or undefined. In the case of function and object the parameters returned are: id of the scrollbar (string), the changetype (string ("scrollStart"|"scrollChange"|"scrollEnd"|"scrolledStep")), current absolute value of the scrollbar (number, float) and the current percentage value of the scrollbar (number, float): In case of an object, it calls the method .scrollbarChanged(). In case of an undefined value, no callBack function is executed. The changetype values mean the following: scrollStart (the user just started scrolling, pressed the scroller rectangle), scrollChange (the user is actively scrolling while pressing/dragging the scroller rectangle), scrollEnd (the user released the scroller rectangle and stopped scrolling), scrolledStep (the user just scrolled stepwise pressing either the scroll buttons or the scrollbar).

Methods

Known issues

Planned future methods

Version history

Credits




Last modified: Monday, 30-Oct-2006 11:51:49 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/papers/svg/gui/scrollbar/index.shtml