Class SceneButton

Object
   |
   +--SceneButton

class SceneButton

This class defines various buttons (images with javascript actions) to change/rotate the Scene3D and re-draw it.
The icons used are Sanscons from Some Random Dude. See: http://somerandomdude.net/srd-projects/sanscons
You must have a CSS file (our default is SceneButton.css) and include it in your HTML document with a tag. The default class used for buttons is "button", but you may define your own as you see fit and specify them as a parameter in your function calls.
Because this class is interested in re-drawing the SVG canvas, it requires jQuery SVG and so the necessary files must be included on the top of the page.
For more info, see the static method documentation below. An example call of a specific button:

SceneButton.rotateZp(document.getElementById("button"), 'svg', 'scene', Math.PI/8, "[{stroke: 'black', 'stroke-width': .25}, {stroke: 'red', 'stroke-width': .125}, {stroke: 'green', 'stroke-width': .125}, {stroke: 'blue', 'stroke-width': .125}]", true);

For a working demo (with jQuery and jQuery SVG), see: http://cis.jhu.edu/~shanest/js/mathworx/3D/testbutton.html

Constructor Detail

SceneButton

SceneButton(parent, scene, continuous, img, func, class)

The constructor function for a new SceneButton. Should never be used, but is called by static SceneButton methods.

makeAll

<static> void makeAll(parent, svg, scene, <Number> zStep, <Number> rStep, settings, continuous, class)

Makes all the buttons and appends them to the parent DOM node. For most parameters, see any of the individual button methods.

Parameters:
zStep - the increment to zoom by for the zoomIn/zoomOut buttons
rStep - the increment (radians) to use for the rotation methods

See:
- zoomIn()
- zoomOut()
- rotateZp()
- rotateZn()
- rotateXYp()
- rotateXYn()
- rotateNE()
- rotateNW()
- rotateSE()
- rotateSW()

rotate

<static> SceneButton rotate(parent, svg, scene, step, <String> xySign, <String> zSign, settings, continuous, class)

For specification of most parameters, see rotateNW(), rotateNE(), rotateSW() or rotateSE().

Parameters:
xySign - '+' or '-' for the direction of the rotation about XY plane (rotateXY())
zSign - '+' or '-' for the direction of the rotation about Z axis (rotateZ())

Returns:
the specified button

rotateNE

<static> SceneButton rotateNE(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for "North-east" (positive around Z and XY) rotation.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate

See:
- rotate()

rotateNW

<static> SceneButton rotateNW(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for "North-west" (positive around Z, negative around XY) rotation.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate

See:
- rotate()

rotateSE

<static> SceneButton rotateSE(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for "South-east" (negative around Z, positive around XY) rotation.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate

See:
- rotate()

rotateSW

<static> SceneButton rotateSW(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for "South-west" (negative around Z and XY) rotation.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate

See:
- rotate()

rotateXY

<static> SceneButton rotateXY(parent, svg, scene, step, <String> sign, settings, continuous, class)

For specification of most parameters, see rotateXYp() or rotateXYn().

Parameters:
sign - '-' for negative rotation, '+' for positive rotation

Returns:
the specified button

rotateXYn

<static> SceneButton rotateXYn(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for negative rotation about the XY-plane.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateXY

See:
- rotateXY()

rotateXYp

<static> SceneButton rotateXYp(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for positive rotation about the XY-plane.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateXY

See:
- rotateXY()

rotateZ

<static> SceneButton rotateZ(parent, svg, scene, step, <String> sign, settings, continuous, class)

For specification of most parameters, see rotateZp() or rotateZn().

Parameters:
sign - '+' for negative rotation, '-' for positive rotation

Returns:
the specified button

rotateZn

<static> SceneButton rotateZn(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for negative rotation about the Z-axis.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateZ

See:
- rotateZ()

rotateZp

<static> SceneButton rotateZp(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Creates a button responsible for positive rotation about the Z-axis.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to rotate each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateZ

See:
- rotateZ()

toggle

<static> void toggle(<String> func)

Toggles animation of the scene. Called if continuous parameter is set to true. There is only one animation variable, so each animation happens on its own. Makes it so that when animation button is clicked, it will start/stop animation.

Parameters:
func - the string representation of the function to be executed when animated.

zoom

<static> SceneButton zoom(parent, svg, scene, step, <String> sign, settings, continuous, class)

For specification of most parameters, see zoomIn() or zoomOut().

Parameters:
sign - '+' for zooming out, '-' for zooming in

Returns:
the specified button

zoomIn

<static> SceneButton zoomIn(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Zooms in on the objects in the Scene3D. Note: whatever the original "focus" is in your Scene3D, if you zoom in below 0, there will be momentary "noise" and then zooming in will be like zooming out.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to zoom in by each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.zoom

See:
- zoom()

zoomOut

<static> SceneButton zoomOut(<Object> parent, <String> svg, <String> scene, <Number> step, <String> settings, <Boolean> continuous, <String> class)

Zooms out on the objects in the Scene3D.

Parameters:
parent - the DOM node that will be the parent of the button image
svg - the name of your jQuery SVG root variable
scene - the name of your Scene3D object variable
step - the increment to zoom out by each time
settings - the string version of a settings object; same as draw method settings, but surround with quotation marks
continuous - (optional) true if want animation; false by default
class - (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css. Must specify a boolean for continuous if want to use this parameter

Returns:
a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.zoom

See:
- zoom()