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:button object

SVG Button Object, Version 1.1.3 (2006-10-30), see version history at the end of the page

This SVG button object should assist authors of SVG webapplications 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 button object. The scripts had been tested in Adobe SVG viewer version 3, version 6, MozillaSVG, Batik and Opera9.

The SVG button object 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 button object is http://www.carto.net/papers/svg/gui/button/.

Documentation

Requirements

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

Features

Dependencies on external functions

  1. button.js:
    • all of the objects and functions in this file are necessary
  2. timer.js:
    • all of the objects and functions in this file are necessary
  3. helper_functions.js:
    • all the global variables at the top of the file

Constructor

The following constructor function creates the button or switchbutton:

var myButton = new button(id,parentNode,functionToCall,buttonType,buttonText,buttonSymbolId,x,y,width,height,textStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,shadowOffset); or
var myButton = new switchbutton(id,parentNode,functionToCall,buttonType,buttonText,buttonSymbolId,x,y,width,height,textStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,shadowOffset);

Example:
//first a few styles
var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"navy","font-size":12};
var buttonStyles = {"fill":"lightsteelblue"};
var shadeLightStyles = {"fill":"white"};
var shadeDarkStyles = {"fill":"navy"};
//now create a new button instance
var textbutton1 = new button("textbutton1","textbutton1",buttonPressed,"rect","Click me",undefined,100,100,100,30,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);

or
var buttonMoveVertex = new switchbutton("buttonMoveVertex","buttonMoveVertex",imageButtonPressed,"rect",undefined,"moveVertex",300,150,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);

The arguments are the following:

  1. id (String):
    id of the button
  2. parentNode (String or node reference):
    group id or node reference to the parent group that will contain the button geometry
  3. functionToCall (function, object or undefined):
    callBack function that will be fired after button was pressed or toggled. The return parameters vary according to the button type:
    • for a text button: groupId (string), evt (object), buttonText (string)
    • for an image button: groupId (string), evt (object)
    • for a text switchbutton: groupId (string), evt (object), buttonState (boolean), buttonText (string)
    • for an image switch button: groupId (string), evt (object), buttonState (boolean)
    In case of an object, the method .buttonPressed() of the given object is fired with the same parameters as listed above. The callBack function is executed with a slight delay (200ms) to allow the button to change its display state before executing the callback function. This value can be changed in the init() method of the button object.
  4. buttonType (string):
    valid values are "rect" or "ellipse"
  5. buttonText (string or undefined):
    the string of the buttonText to be displayed or the value undefined in case of an image button, if you want multiline buttons, use \n as a newline separator.
  6. buttonSymbolId (string):
    the id (string) of the button symbol or undefined for text buttons
  7. x (number):
    the left side of the button
  8. y (number):
    the top side of the button
  9. width (number):
    the button width/li>
  10. height (number):
    the button height
  11. textStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the button text; could include CSS classes; should at least include a "font-size" attribute; example: var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"navy","font-size":12};
  12. buttonStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the button rectangle or ellipse; could include CSS classes; should at least include a "fill" attribute; example: var buttonStyles = {"fill":"lightsteelblue"};, Note if you want rounded rectangles you can add the attributes "rx" and "rx" here.
  13. shadeLightStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the button lighter shadow, simulating the button 3d effect behind the button rectangle or ellipse; could include CSS classes; should at least include a "fill" attribute; example: var shadeLightStyles = {"fill":"white"};, Note if you want rounded rectangles you can add the attributes "rx" and "rx" here.
  14. shadeDarkStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the button darker shadow, simulating the button 3d effect behind the button rectangle or ellipse; could include CSS classes; should at least include a "fill" attribute; example: var shadeDarkStyles = {"fill":"navy"};, Note if you want rounded rectangles you can add the attributes "rx" and "rx" here.
  15. shadowOffset (number):
    a number describing the shadow offset behind the button, simulating the button 3d effect

Note, if you want to change the y-offset value of the text in a textbutton you can do so in the method .createButton() - watch out for comment //create text element. Likewise you can change the dy offset for multiline textbuttons in the for loop creating the tspan elements.

Methods

Useful Properties

Version history

Credits




Last modified: Monday, 30-Oct-2006 10:31:26 CET
© carto:net (andré m. winter & andreas neumann)
original URL for reference: http://www.carto.net/svg/gui/button/index.shtml
del.icio.us Add this page to del.icio.us