CGUI.js

1 ) function: setAnchor
2 ) function: addToParent
3 ) function: removeFromParent
4 ) function: toString
5 ) function: setX
6 ) function: setY
7 ) function: setBkColor
8 ) function: setBkOpacity
9 ) function: setWidth
10 ) function: setHeight
11 ) function: getX
12 ) function: getY
13 ) function: getWidth
14 ) function: getHeight
15 ) function: getUserCoordinate
16 ) function: getScreenCoordinate
17 ) function: getTransformToElement
18 ) function: getOffsetToElement
19 ) function: getClientToScreen
20 ) function: getScreenToClient
21 ) function: getLeftEdge
22 ) function: getTopEdge
23 ) function: relativeMouseX
24 ) function: relativeMouseY


Object: CGUI

Object Description:
The 'root' level GUI element in the GUI project.
Anything which displays in SVG inherits from here.
Example:
Inherits from: EventHandler

Notes:


Constructor: CGUI
  • Parameter
    : x - x coordinate of this GUI component relative to parent
y - y coordinate of this GUI component relative to parent
width - width of this GUI component
heigh - height of this GUI component


Method: debug
Description: add text to debug buffer
  • Parameter
    : text - the text to add

Example:


Method: debug_enable
Description: enable CGUI debug logging

Example:


Method: print_log
Description: pring the debug log

Example:

Notes: Requires a perl CGI called logdebug.pl; do whatever
you want in this script - I simply add the message
to a log file.


Method: setAnchor
Description: Set this anchor.
  • Parameter
    : target - the object to anchor to.
  • Parameter
    : ax - "left" "center" "right", the horizontal anchor position
  • Parameter
    : offsetx - the offset ('+':right '-':left) from the ax position
  • Parameter
    : ay - "top" "center" "bottom", the vertical anchor position
  • Parameter
    : offsety - the offset ('+':down '-':up) from the ay position

Example:
Continuing the setAnchor (frame, "left", "15", "bottom", "-15")
would anchor the object(the button)


Method: addToParent
Description: append this CGUI element to it's parent
  • Parameter
    : parent - element to append to
may or may not be a CGUI element

Example:


Method: removeFromParent
Description: remove this CGUI element from it's parent

Example:


Method: toString
Description: the default CGUI toString method
you'll probably want to override this for any new
CGUI elements

Example:


Method: setX
Description: Set this CGUI Element's X attribute
  • Parameter
    : x - the x coordinate

Example:


Method: setY
Description: Set this CGUI Elements y coordinate
  • Parameter
    : y - the y coordinate for this CGUI element

Example:


Method: setBkColor
Description: sets background color of content, if there is one
  • Parameter
    : iColor - any valid svg color format
Added: Chris Peto, Moved: Nishan Sothilingam


Method: setBkOpacity
Description: sets background opacity of content, if there is one
  • Parameter
    : opac - a number range from 0.0 (tranparent) to 1(opaque)
Added: Nishan Sothilingam


Method: setWidth
Description: Set this CGUI elements width
  • Parameter
    : width - the width for this element

Example:


Method: setHeight
Description: Set this CGUIElement's height
  • Parameter
    : height - the height for this element

Example:


Method: getX
Description: get the x coordinate for this element

Example:


Method: getY
Description: Get the Y coordinate for this element

Example:


Method: getWidth
Description: get the width of this element

Example:


Method: getHeight
Description: get the height of this element

Example:


Method: getUserCoordinate
Description: gets x and y in user coordinates, i.e. when Zoomin in.
  • Parameter
    s: node - node for transformation
x - x position from mouse
y - y position from mouse
Returns: CTM


Method: getScreenCoordinate
Description: gets x and y in root coordinates, i.e. Tooltips.
  • Parameter
    s: node - node for transformation
x - x position for svg node x
y - y position for svg node y
Returns: CTM


Method: getTransformToElement
Description: gets CTM for node
  • Parameter
    s: node - node for transformation
Returns: CTM


Method: getOffsetToElement
Description: gets x and y offsets to node, i.e Frame x any y
  • Parameter
    s: node - node to get offsets
Returns: root based point up to node but not including


Method: getClientToScreen
Description: Builds a root relative x and y coordinate for a svg node
and handles transform and scaling
  • Parameter
    s: node - svg node to get root offset
x - x coordinate of svg node
y - y coordinate of svg node
Returns: point


Method: getPointToScreen
Description: Builds a parent svg relative x and y coordinate for a svg node
and handles transform and scaling
  • Parameter
    s: node - svg node to get parent svg offset
x - x coordinate of screen
y - y coordinate of screen
Returns: point

There is documentation/code mismatch



Method: loadUI
Description: Async svg loader callback, then after parseXML
appends it to a hidden .
This way the Designer
can visually design the skin. To do: check for success
  • Parameter
    s: asyncStatus - loading status




Method: loadSkin
Description: Loads an svg with getURL.
  • Parameter
    s: filename - svg file to load




Method: copyElement
Description: Clones a node
  • Parameter
    s: id - id of node to clone
returns: cloned node when found or null when not found



Method: getJSRef
Description: Climb the DOM and find the nearest ancestor
with a "jsref" property, then return the JS ref.
  • Parameter
    : target - the initial SVG node
Example: Assume you have a mouseover event handler set on
the svg representation of a button. The handler
might call the getJSRef method to proceed up the
DOM until it finds the "g" element of the button
which has a reference to the javascript
representation of the button.


Method: getLeftEdge
Description: Get the coordinate of the left edge of this
GUI element.
If the CGUI element is contained in a non-CGUI
element, i.e. an SVGGElement, the non-CGUI
element is skipped. Maybe I should be taking
the x coordinate of the non-CGUI element if
it has one?
  • Parameter
    :
Example: A ContentPane is placed at position 1 relative to
a frame, which has an x coordinate of 10, so the
left edge of the content pane is at x coordinate 11.
When this frame is moved, the ContentPane is still
at x coordinate 1 relative to the frame, but now
at 11+dx with respect to the main svg.


Method: getTopEdge
Description: Get the coordinate of the top edge of this
GUI element.
If the CGUI element is contained in a non-CGUI
element, i.e. an SVGGElement, the non-CGUI
element is skipped. Maybe I should be taking
the y coordinate of the non-CGUI element if
it has one?
  • Parameter
    :
Example: A ContentPane is placed at position 1 relative to
a frame, which has an y coordinate of 10, so the
top edge of the content pane is at y coordinate 11.
When this frame is moved, the ContentPane is still
at y coordinate 1 relative to the frame, but now
at 11+dy with respect to the main svg.


Method: relativeMouseX
Description: Give the mouse coordinate relative to the
CGUI object.
  • Parameter
    :
Example: If the mouse is over a frame, the top left corner
of the frame will give a coordinate of 0,0 relative
to itself.


Method: relativeMouseY
Description: Give the mouse coordinate relative to the
CGUI object.
  • Parameter
    :
Example: If the mouse is over a frame, the top left corner
of the frame will give a coordinate of 0,0 relative
to itself.