Global

Members

cuiAnimationsArePlaying :boolean

Flag indicating whether any animation is playing. Set by cuiAnimation#play.
Type:
  • boolean
Source:

cuiAnimationStep :number

Minimum time between frames in milliseconds.
Type:
  • number
Source:

cuiBackgroundFillStyle :string

Background color (behind all pages).
Type:
  • string
Source:

cuiCanvas :Object

The canvas element. Set by cuiInit.
Type:
  • Object
Source:

cuiContext :Object

The 2d context of the canvas element. Set by cuiInit.
Type:
  • Object
Source:

cuiCurrentPage :cuiPage

Currently displayed page. Can be set to change the page.
Type:
Source:
See:

cuiDefaultFillStyle

Default fill style (e.g. for text color) for all pages.
Source:

cuiDefaultFont :string

Default font for all pages.
Type:
  • string
Source:

cuiDefaultTextAlign :string

Default horizontal text alignment for all pages.
Type:
  • string
Source:

cuiDefaultTextBaseline :string

Default vertical text alignment for all pages.
Type:
  • string
Source:

cuiIgnoringEventsEnd :number

Time (in milliseconds after January 1, 1970) when events are no longer ignored. Typically set to "(new Date()).getTime() + x" where "x" is the number of milliseconds that events are being ignored. (This is useful after changing cuiCurrentPage.)
Type:
  • number
Source:

cuiTimeUntilHold

Time in milliseconds that a pointer has to be held down until a hold event is triggered.
Source:
See:

Methods

cuiFillMultiLineText(text, x, y, maxWidth, maxHeight, baselineSkip)

Write multi-line text where a new line is started with a newline character and a carriage return character draws the following line over the previous.
Parameters:
Name Type Description
text string The multi-line text.
x number The x coordinate for all lines.
y number The y coordinate for the first line. Further lines use y + n * baselineSkip.
maxWidth number The maximum width of all lines. (If a line is too wide, it is scaled.)
maxHeight number The maximum height. Lines at y coordinates larger than maxHeight - baselineSkip are clipped.
baselineSkip number The increment between y coordinates of successive lines.
Source:

cuiInit(startPage)

Initialize cui2d.
Parameters:
Name Type Description
startPage cuiPage The page to display first.
Source:

cuiIsInsideRectangle(event, x, y, width, height, text, image) → {boolean}

Either determine whether the event's position is inside a rectangle (if event != null) or draw an image in the rectangle with a text string on top of it (if event == null).
Parameters:
Name Type Description
event Object An object describing a user event by its "type", coordinates in page coordinates ("eventX" and "eventY"), an "identifier" for touch events, and optionally "buttons" to specify which mouse buttons are depressed. If null, the function should redraw the button.
x number The x coordinate of the top, left corner of the rectangle.
y number The y coordinate of the top, left corner of the rectangle.
width number The width of the rectangle.
height number The height of the rectangle.
text string A text that is written at the center of the rectangle. (May be null).
image Object An image to be drawn inside the rectangle. (May be null.)
Source:
Returns:
True if event != null and the coordinates of the event are inside the rectangle, false otherwise.
Type
boolean

cuiPlayTransition(previousPage, nextPage, isPreviousOverNext, isFrontMaskAnimated, animationInitialSpeed, animationFinalSpeed, animationLength, previousFinalPositionX, previousFinalPositionY, previousFinalScaleX, previousFinalScaleY, previousFinalRotation, previousFinalOpacity, nextInitialPositionX, nextInitialPositionY, nextInitialScaleX, nextInitialScaleY, nextInitialRotation, nextInitialOpacity)

Play a transition between two pages.
Parameters:
Name Type Description
previousPage cuiPage The initial page for the transition.
nextPage cuiPage The final page for the transition.
isPreviousOverNext boolean Whether to draw previousPage over nextPage.
isFrontMaskAnimated boolean Whether to animate only an opacity mask of the page in front.
animationInitialSpeed number 0 for zero initial speed, 1 for linear interpolation, other values scale the speed.
animationFinalSpeed number 0 for zero final speed, 1 for linear interpolation, other values scale the speed.
animationLength number Length of the transition in seconds.
previousFinalPositionX number Final x position of the previous page (-1/+1: centered on left/right edge).
previousFinalPositionY number Final y position of the previous page (-1/+1: centered on top/bottom edge).
previousFinalScaleX number Final x scale of the previous page (1: no scaling).
previousFinalScaleY number Final y scale of the previous page (1: no scaling).
previousFinalRotation number Final rotation in degrees of the previous page (0: no rotation).
previousFinalOpacity number Final opacity of the previous page (0: transparent, 1: opaque).
nextInitialPositionX number Initial x position of the next page (-1/+1: centered on left/right edge).
nextInitialPositionY number Initial y position of the next page (-1/+1: centered on top/bottom edge).
nextInitialScaleX number Initial x scale of the next page (1: no scaling).
nextInitialScaleY number Initial y scale of the next page (1: no scaling).
nextInitialRotation number Initial rotation in degrees of the next page (0: no rotation).
nextInitialOpacity number Initial opacity of the next page (0: transparent, 1: opaque).
Source:
Examples
// push to left (reverse of push to right)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 2, 0, 0.25,
              -2.0, 0.0, 1.0, 1.0, 0, 1.0,
              +2.0, 0.0, 1.0, 1.0, 0, 1.0);
// push to right (reverse of push to left)
            cuiPlayTransition(firstPage, secondPage, 
               true, false, 2, 0, 0.25,
              +2.0, 0.0, 1.0, 1.0, 0, 1.0,
              -2.0, 0.0, 1.0, 1.0, 0, 1.0);
// push down (reverse of push to up)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 2, 0, 0.25,
              0.0, -2.0, 1.0, 1.0, 0, 1.0,
              0.0, +2.0, 1.0, 1.0, 0, 1.0);
// push up (reverse of push down)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 2, 0, 0.25,
              0.0, +2.0, 1.0, 1.0, 0, 1.0,
              0.0, -2.0, 1.0, 1.0, 0, 1.0);
// cover from top to bottom (reverse of uncover from bottom to top)
            cuiPlayTransition(firstPage, secondPage, 
              false, false, 2, 0, 0.25,
              0.0, +0.0, 1.0, 1.0, 0, 1.0,
              0.0, -2.0, 1.0, 1.0, 0, 1.0);
// uncover from bottom to top (reverse of cover from top to bottom)
            cuiPlayTransition(firstPage, secondPage, 
               true, false, 2, 0, 0.25,
               0.0, -2.0, 1.0, 1.0, 0, 1.0,
               0.0, +0.0, 1.0, 1.0, 0, 1.0);
// cover from bottom to top (reverse of uncover from top to bottom)
            cuiPlayTransition(firstPage, secondPage, 
              false, false, 2, 0, 0.25,
              0.0, -0.0, 1.0, 1.0, 0, 1.0,
              0.0, +2.0, 1.0, 1.0, 0, 1.0);
// uncover from top to bottom (reverse of cover from bottom to top)
            cuiPlayTransition(firstPage, secondPage, 
               true, false, 2, 0, 0.25,
               0.0, +2.0, 1.0, 1.0, 0, 1.0,
               0.0, -0.0, 1.0, 1.0, 0, 1.0);
// cover from left to right (reverse of uncover from right to left)
            cuiPlayTransition(firstPage, secondPage, 
              false, false, 2, 0, 0.25,
              +0.0, 0.0, 1.0, 1.0, 0, 1.0,
              -2.0, 0.0, 1.0, 1.0, 0, 1.0);
// uncover from right to left (reverse of cover from left to right)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 2, 0, 0.25,
              -2.0, 0.0, 1.0, 1.0, 0, 1.0,
               0.0, 0.0, 1.0, 1.0, 0, 1.0);
// cover from right to left (reverse of uncover from left to right)
            cuiPlayTransition(firstPage, secondPage, 
              false, false, 2, 0, 0.25,
              +0.0, 0.0, 1.0, 1.0, 0, 1.0,
              +2.0, 0.0, 1.0, 1.0, 0, 1.0);
// uncover from left to right (reverse of cover from right to left)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 2, 0, 0.25,
              +2.0, 0.0, 1.0, 1.0, 0, 1.0,
               0.0, 0.0, 1.0, 1.0, 0, 1.0);
// page turn uncovering from right to left (reverse of page turn covering from left to right)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 0, 0, 0.33,
              -1.2, 0.0, 0.2, 1.1, 5, 1.0,
              0, 0, 1, 1, 0, 0.8);
// page turn covering from left to right (reverse of page turn uncovering from left to right)
            cuiPlayTransition(firstPage, secondPage, 
              false, false, 0, 0, 0.33,
              0, 0, 1, 1, 0, 0.8,
              -1.2, 0.0, 0.2, 1.1, -5, 1.0);
// maximize (reverse of minimize)
            var startPoint = {x: 300 + 40, y: 50 + 25}; // start point 
            firstPage.transformPageToTransitionCoordinates(startPoint);
            cuiPlayTransition(firstPage, secondPage, 
              false, false, 1, 0, 0.25,
              0.0, 0.0, 1.0, 1.0, 0, 0.8,
              startPoint.x, startPoint.y, 0.1, 0.1, -5, 1.0);
// minimize (reverse of maximize)
            var targetPoint = {x: 300 + 40, y: 50 + 25}; // target point 
            secondPage.transformPageToTransitionCoordinates(targetPoint);
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 0, 1, 0.3, 
              targetPoint.x, targetPoint.y, 0.1, 0.1, 5, 1.0,
              0.0, 0.0, 1.0, 1.0, 0, 0.8);
// dissolve (reverse of itself)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 0, 0, 0.33,
              0.0, 0.0, 1.0, 1.0, 0, 0.0,
              0.0, 0.0, 1.0, 1.0, 0, 1.0);
// fade through black (reverse of itself)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 1, 1, 0.33,
              0.0, 0.0, 1.0, 1.0, 0, -1.0,
              0.0, 0.0, 1.0, 1.0, 0, -1.0);
// materialize from air (reverse of dissolve into air)
            cuiPlayTransition(firstPage, secondPage, 
              true, false, 0, 0, 0.33,
              0.0, 0.0, 1.0, 1.0, 0, 0.0,
              0.0, 0.0, 2.0, 2.0, 0, 1.0);
// dissolve into air (reverse of materialize from air)
            cuiPlayTransition(firstPage, secondPage, 
               true, false, 0, 0, 0.33,
               0.0, 0.0, 2.0, 2.0, 0, 0.0,
               0.0, 0.0, 1.0, 1.0, 0, 1.0);
// wipe from left to right (reverse of wipe from right to left)
            cuiPlayTransition(firstPage, secondPage, 
              true, true, 1, 1, 0.25,
              2.0, 0.0, 1.0, 1.0, 0, 1.0,
              0.0, 0.0, 1.0, 1.0, 0, 1.0);
// wipe from right to left (reverse of wipe from left to right)
            cuiPlayTransition(firstPage, secondPage, 
              true, true, 1, 1, 0.25,
              -2.0, 0.0, 1.0, 1.0, 0, 1.0,
              0.0, 0.0, 1.0, 1.0, 0, 1.0);
// wipe from top to bottom (reverse of wipe from bottom to top)
            cuiPlayTransition(firstPage, secondPage, 
              true, true, 1, 1, 0.25,
              0.0, 2.0, 1.0, 1.0, 0, 1.0,
              0.0, 0.0, 1.0, 1.0, 0, 1.0);
// wipe from bottom to top (reverse of wipe from top to bottom)
            cuiPlayTransition(firstPage, secondPage, 
              true, true, 1, 1, 0.25,
              0.0, -2.0, 1.0, 1.0, 0, 1.0,
              0.0, 0.0, 1.0, 1.0, 0, 1.0);

cuiRepaint()

Request to repaint the canvas (usually because some state change requires it).
Source: