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.
ButtonDown() is an event handler that is called when the mouse button is pressed over the button graphics. Currently, this method fires the callback associated with the button if a callback is defined. This functionality may be moved in a future version of the Button class.
event is the event object generated by the mousedown event.
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.
An array of Button objects used to find the currently active button object.
Button.Find_Button(button) - returns the currently active button object
This class method is responsible for finding the currently active button in the buttons global variable.
button is the parent <g> element of the button that generated the mouse event.
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.
x_position is a number which defines the x position of the origin of the button
y_position is a number which defines the y position of the origin of the button
callback is a function reference which will be called each time the button is clicked.
up_id is the id of the node that represents the button in the off or up state.
down_id is the id of the node that represents the button in the on or down state.
parent is the node to which the button graphics will be appended.
make_button() locates the up and down button nodes based on the id's passed into the routine. Each button element is given a unique id to allow Find_Button() to determine the currently active button object.
up_id is the id of the node that represents the button in the off or up state.
down_id is the id of the node that represents the button in the on or down state.
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
x is the x coordinate of the upper-lefthand corner of the slider
y is the y coordinate of the upper-lefthand corner of the slider
callback is a function reference that will be called when a button changes state
parent is the parent node of the slider graphics. This can be used to delete the slider from the SVG document.
selected is a Boolean value that represents the current state of the button.
up is the node that represents the button in the off or up state.
down is the node that represents the button in the on or down state.
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:
<script xlink:href="Button.js" />
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");
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:
slider.set_select(true);
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.