Home :: GUI :: Widgets

  1. Introduction
  2. Reference
    1. Global Methods
      1. ButtonDown
    2. Class Variables
      1. VERSION
      2. buttons
    3. Class Methods
      1. Find_Button
    4. Methods
      1. constructor
      2. make_button
      3. set_select
    5. Properties
      1. x
      2. y
      3. callback
      4. parent
      5. selected
      6. up
      7. down
  3. Use
    1. Loading Button into your SVG Document
    2. Creating a Button
    3. Setting the Button State
    4. Example
  4. Download


The Button class is a first attempt at the creation of a reusable button widget. With the current implementation, it is possible to simulate push buttons, radio buttons, and check boxes.

The Button class uses the same technique to create the button elements as was introduced in the Slider class. The button states are defined in the <defs> section of the SVG document. As a new button created, these elements are cloned and appended to the user-specified location with in the SVG DOM.

Future versions of the Button class will incorporate the necessary functionality to create the various button types.


Global Methods


Class Variables


This is a number which represents the current version number for this implementation of the Button class. This can be used by scripts to check that the correct version of the class is being used.


Class Methods

Button.Find_Button(button) - returns the currently active button object


constructor - new Button(x_position, y_position, callback, up_id, down_id, parent);

This method is used to create a new Button object. The constructor will call the make_button() method to create the graphics used to represent the button.

make_button(up_id, down_id);


set_select() sets the current state of the button based on the value specified in the parameter list. If the button is not in the state specified, the state is changed and the callback is fired.

state is state to which the button will be set



Loading Button into your SVG document

In order to use the Button class in your SVG file, you will need to insert a <script> element inside of your <svg> element. As an example, if Button.js is in the same directory as your SVG document, then you would include the Button class with the following text:

Creating a Button

In order to create a new Button object, you need to know the following: the coordinate where to place the origin of the button, a callback function, the id of the button's off graphics, the id of the button's on graphics, and the parent node of the button. The following line creates a button at (50,200), appends it to the SVGRoot. The button will use my_callback() as the callback function and the "button_up" and "button_down" elements to draw the states of the button.

button = new Button(
    50, 200,
    my_callback,,button_updy",button_downmb, SVGRoot");

Setting the Button State

Sometimes it is necessary to have another function change the value of your button object. In order to perform this function, you would use something like the following:


In this example, the button will be set to the on position.


The following example shows multiple types of buttons: push buttons, radio buttons, and check boxes. To see the complete details of this example, right-click (or control-click) the SVG file and View Source. Viewing the source will show you how the various button types and button states are defined in the <defs> section of the SVG document.