Class Definitions

The software entities defined by the FancyPants JavaScript API are categorized and presented in the following subsections.

Terminology used in document:

1. Construction method, or constructor, refers to any method from the Fp class that returns an object of any type. For example, fp.animator(), fp.timer(), fp.image(), fp.text(). The Fp methods “animator”, “timer”, “image”, “text” are constructors of the corresponding type of objects.

2. Object's construction parameter refers to the input parameter of a constructor that returns only the type of FpObject (or its subtype). For example, in the call to fp.image({size:{w:300}, file:”img.png”}), the {size:{w:300}, file:”img.png”} is the object's construction parameter.

3. Field refers to a field within a JavaScript table, or structure. In the example from (2) above, “size” and “name” are fields in object's construction parameter, while “w” is a field within the “size” table.

4. Property refers to the predefined property of an object, they are listed in each of the class definition subsections. Property can be retrieved via get() method, or by treating them as class variables and retrieve them as obj.xxx, they can only be modified via the set() method however, and updating a property through obj.xxx syntax is invalid. Not all properties are readable and writable, some are read-only, while some are write-only, please refer to the relevant section for detail.

Unless the document explicitly specifies:

• Most of the fields in object's construction parameters or in the table passed to a function are optional. The class documentation will specify if a field is mandatory.

• The default value of the fields in object's construction parameters is 0 (or false, null, depending on the data type). For example, in the call to fp.image({coord:{y:300}}), notice we have left out the “x” field for the “coord” table, this will result in x = 0, and image will be placed at (0, 300).

• The default value of the fields when modifying a property is the object's current value of that particular property. For example, assuming we have an “img” variable which is a FpImage object, in the call to img.set(“coord”, {x:100}), we will only be changing the value of “x” to 100, while keeping the “y” untouched.

Fp Class

Extends: none

An instance of this class must be obtained to perform any UI operations using the FancyPants library.

Constructor

The constructor of the Fp class takes no argument.

If running in the browser environment the use:

<object name="fancypants" type="application/fancypants-plugin" width="720" height="360">
</object>

<script>
fp = document.fancypants;
</script>

If running in the standalone environment use the global API fp_init() to acquire an instance of FancyPants class as follows:

fp = fp_init();

Class Variables

The following class variables are read-only and can be retrieved by fp.w or fp.h.

Properties

None

Events

None

General Methods

Method Name: begin

1. Description: Begins the FancyPants main loop
2. Environment: For the standalone envitronment only

Method Name: get

1. Description: Gets the property value
2. Return Type: Property specific type
3. Input Parameters:

   propertyName: string

4. Examples: Get the on-screen size of an object

   var size = obj.get("size");

Method Name: set

1. Description: Sets the value of a property
2. Input Parameters:

   propertyName: string, propertyValue: value

   The propertyValue is specific to the property.
3. Examples:

   // Se the object size to be 100x200
   obj.set("size", { w: 100, h: 200 });

   // Get the x and y coordinates of an object and change them
   var coord = obj.get("coord");
   var x = coord.x;
   var y = coord.y;
   // Move the object 10% to the right
   x *= 1.1;
   obj.set( "coord", { x: x } });

Method Name: set

1. Description: Sets multiple properties. “propertyName” is the name of the property listed in the Properties section, “propertyValue” is the value to be set. The type of the “propertyValue” is dependent on the associated properties, please refer to Properties section for details
2. Input Parameters:

   {
    propertyName: string, propertyValue: value,
    propertyName: string, propertyValue: value,
    ...
   }

   The propertyValue is specific to the property.

Method Name: toString

1. Description: Returns the string “Fp” indicating that the object is a type of Fp class
2. Return Type: string

Method Name: quit

1. Description: Exit the FancyPants main loop (returns from begin).
2. Environment: This method is only available in the standalone environment.

Periodic events

Object construction

The <object parameters> notation below represents a list of generic object parameters. These are the parameters that are passed into the object() method, and the very same parameters can be specified during the construction of almost all FancyPants objects as most objects inherit from FpObject.

Method Name: container

1. Description: Creates a container object
2. Return Type: FpContainer
3. Input Parameters:

   {
    <object parameters>
   }

Method Name: image

1. Description: Creates an image object
2. Return Type: FpImage
3. Input Parameters:

   {
    <object parameters>
    file: string,
    url: string,
    theme_image: string,
    border:
    {
        left: integer,
        top: integer,
        right: integer,
        bottom: integer
    },
    tile:
    {
        x: integer,
        y: integer,
        w: integer,
        h: integer
    },
   }

Method Name: layout

1. Description: Creates a layout object. For a list of orientations please refer to the Constants section.
2. Return Type: FpLayout
3. Input Parameters:

   {
    <object parameters>
    orientation: string
   }

Method Name: media

1. Description: Creates a media object. For a list of states please refer to the Constants section.
2. Return Type: FpMedia
3. Input Parameters:

   {
    <object parameters>
    demuxer: string
    decoder: string
    file: string
    url: string
    videoLayer: integer
    keepAspect: bool
    loop: bool
    mute: bool
    speed: double
    state: string
    volume: integer
    tile: 
    {
        x: integer
        y: integer
        w: integer
        h: integer
    }
   }

Method Name: object

1. Description: Creates an object based on a list of properties.
   • For a list of object types please refer to the Constants section.
   • The type is only valid (and mandatory) when caller creates an object via fp.object() method call, the type will be ignored for all other calls such as fp.image(), fp.text().
   • The default visible is true.
   • As the default size is 0 for all objects, it is reminded to have the size specified either during object constrution or later through the set() method.
   • The default color of any object in FancyPants is white (ie. r=g=b=a=255), however the color can be changed using the color property.
   • When specifying the color property during constructor call, if not all of the r,g,b channels are specified, the missing channel will be set to 0, the alpha will default to 255 if not specified. This allows caller to pass in {r:255} for red, for example.
   • The “premul” boolean indicates whether if the r,g,b,a values have been premultiplied. When color values are premultipled, the values of r,g,b must be less than or equals to alpha. “premul” is false by default, allowing developer to pass r,g,b,a within the range of 0~255 without worry about premultiplication.
2. Return Type: FpObject
3. Input Parameters:

   {
   type: string
   layer: short
   coord:
    {
      x: integer
      y: integer
    }
   size:
    {
      w: integer
      h: integer
    }
   visible: bool
   color:
    {
      r: integer
      g: integer
      b: integer
      a: integer
      premul: bool
    }
   clip: FpRectangle
   name: string
   focus: bool
   skipEvent: bool
   repeatEvent: bool
   }

Method Name: rectangle

1. Description: Creates a rectangle object
2. Return Type: FpRectangle
3. Input Parameters:

   {
    <object parameters>
   }

Method Name: text

1. Description: Creates a text object. For a list of text styles and effects please refer to the Constants section.
2. Return Type: FpText
3. Input Parameters:

   {
   <object parameters>
   text: string
   style: string
   textEffect: string
   glowColor:
    {
      r: integer
      g: integer
      b: integer
      a: integer
      premul: bool
    }
   glow2Color:
    {
      r: integer
      g: integer
      b: integer
      a: integer
      premul: bool
    }
   shadowColor:
    {
      r: integer
      g: integer
      b: integer
      a: integer
      premul: bool
    }
   outlineColor:
    {
      r: integer
      g: integer
      b: integer
      a: integer
      premul: bool
    }
   }

Widget Construction

Method Name: button

1. Description: Creates a button object
   • bgThemeImageKey is the theme key of the button background image (refer to image:imageThemeByKey)
   • For a list of text styles please refer to the Constants section.
   • Sensitive activates or deactivates the button
2. Return Type: FpButton
3. Input Parameters:

   {
    <object parameters>
    text: string
    bgThemeImageKey:string
    textStyle: string
    sensitive: bool
   }

Method Name: calendar

1. Description: Creates a calendar object. The “timestamp” parameter is the standard UNIX timestamp and is optional. The year/month/day parameters supersede the seconds if present.
2. Return Type: FpCalendar
3. Input Parameters:

   {
   <object parameters>
   date: 
    { 
      year: integer
      month: integer
      day: integer
       timestamp: integer
    }
   }

Method Name: checkbox

1. Description: Creates a checkbox. Please refer to the Constants section for a list of text styles.
2. Return Type: FpCheckbox
3. Input Parameters:

   {
   <object parameters>
   checked: bool
   style: string
   text: string
   }

Method Name: cube

1. Description: Creates a cube object.
   • angle direction: “snap”, “left”, “right”
   • tilt direction (from positive x-axis): “snap”, “up”, “down”
   • Both “deg” and “direction” parameters are mandatory if the corresponding “angle” or “tilt” is present.
   • “rotationDuration” is the time (in seconds) the animation to the target rotation degree will take. Must be strictly positive.
   • Only the first 6 valid FpObject in “faces” parameter will be accepted, once all 6 faces are added, subsequent FpObject will be ignored.
   • The order to which face the object will be added to is as follows: Front, Right, Back, Left, Top, Bottom.
   • Please refer to the Constants section for a list of orientations.
2. Return Type: FpCube
3. Input Parameters:

   {
   <object parameters>
   angle:
    {
      deg: double
      direction: string
    }
   tilt:
    {
      deg: double
      direction: string
    }
   faces: FpObject[6]
   depth: integer
   rotationDuration: double
   orientation: string
   perspective: 
   {
    coord:
      {
        x: integer
        y: integer
        z: integer
      }
   }
   }

Method Name: filebrowser

1. Description: Creates a file browser widget.
   • IMPORTANT: Function returns “null” if the path cannot be found.
   • “filter” is a comma separated string indicating the type(s) of files that can be displayed in file browser.
   • “traversal” indicates whether if user can traverse to different folders.
   • Please refer to Constants section for a list of filters and traversal modes.
2. Return Type: FpFilebrowser
3. Input Parameters:

   {
   <object parameters>
   filter: string
   path: string
   traversal: string
   }

Method Name: flip

1. Description: Creates a flip widget.
   • Both “front” and “back” are mandatory parameters. In the case when application needs to flip a single object, one may pass in the same object for both “front” and “back”.
   • “showboth” is a parameter indicating whether if both objects should be rendered at the same time. This parameter is set to “false” by default, and setting it to “true” is useful in the case when one of the object is semi-transparent, allowing user to see through to the back object.
2. Return Type: FpFlip
3. Input Parameters:

   {
   <object parameters>
   front: FpObject
   back: FpObject
   angle:
    {
      deg: double
      direction: string
    }
   depth: integer
   showboth: bool
   }

Method Name: keyboard

1. Description: Creates a keyboard widget. Please note that the keyboard widget requires a text entry to be focused in order to have effect.
2. Return Type: FpKeyboard
3. Input Parameters:

   {
   <object parameters>
   }

Method Name: multiselect

1. Description: Create a multiselect widget
2. Return Type: FpMultiselect
3. Input Parameters:

   {
   <object parameters>
   opened: bool
   alignment: string
   items: string[]
   selItem: string
   maxHeight: integer
   }

Method Name: progressbar

1. Description: Create a progressbar widget For a list of orientations please refer to the Constants section.
2. Return Type: FpProgressbar
3. Input Parameters:

   {
   <object parameters>
   orientation: string
   max: double
   value: double
   }

Method Name: scrollbar

1. Description: Creates a scrollbar widget. Please refer to Constants section for a list of appear modes for horizontal and vertical scrollbars.
2. Return Type: FpScrollbar
3. Input Parameters:

   {
   <object parameters>
   target: FpObject
   hAppear: string
   vAppear: string
   scrollPos:
    {
      x: integer
      y: integer
    }
   kinetic: bool
   fading: bool
   }

Method Name: scrolllist

1. Description: Creates a scroll list. Please refer to Constants section for a list of orientation, appear modes for horizontal and vertical scrollbars, and scroll modes.
2. Return Type: FpScrolllist
3. Input Parameters:

   {
   <object parameters>
   objs: FpObject[]
   hAppear: string
   vAppear: string
   kinetic: bool
   orientation: string
   offset: integer
   padding: integer
   scroll: string
   }

Method Name: slider

1. Description: Creates a slider.
2. Return Type: FpSlider
3. Input Parameters:

   {
   <object parameters>
   orientation:string  
   max: double
   value: double
   }

Method Name: textarea

1. Description: Creates a text area.
   • For a list of alignments, see constant section.
   • For a list of textStyles, see constant section.
2. Return Type: FpTextarea
3. Input Parameters:

   {
   <object parameters>
   editable: bool
   alignment: string
   text: string
   textStyle: string
   lineSpacing: integer
   }

Method Name: textentry

1. Description: Creates a text entry.
2. Return Type: FpTextentry
3. Input Parameters:

   {
   <object parameters>
   text: string
   selStart: integer
   selEnd: integer
   maxLength: integer
   cursorPos: integer
   editable: bool
   password: bool
   cursorBlink: bool
   }

Theme

Method Name: changeTheme

1. Description: Change to the theme passed, if available in the theme path
2. Input Parameters:

   name: string

FpAnimator Class

Extends: none

Constructor

FpAnimator is constructed through the animator() method from Fp as shown in sample code below:

var fp = fp_init();
animator = fp.animator(function() {
    return false;
});

Setting animator = null would stop animator after garbage collection, which will stop the callback from being called. One may use animator.stop() or return false in callback to stop an FpAnimator before garbage collection.

Properties

None

Events

None

Methods

FpIdler Class

Extends: none

Constructor

FpIdler is constructed through the idler() method from Fp as shown in sample code below:

var fp = fp_init();
idler = fp.idler(function() {
    return false;
});

Setting idler = null would stop FpIdler after garbage collection, which will stop the callback from being called. One may use idler.stop() or return false in callback to stop an FpIdler before garbage collection.

Properties

None

Events

None

Methods

FpJob Class

Extends: none

Constructor

FpJob is constructed through the job() method from Fp as shown in sample code below:

var fp = fp_init();
job = fp.job(function() {
    return false;
});

Setting job = null would stop FpJob after garbage collection, which will stop the callback from being called. One may use job.stop() or return false in callback to stop an FpJob before garbage collection.

Properties

None

Events

None

Methods

FpTimer Class

Extends: none

Constructor

FpTimer is constructed through the timer() method from Fp as shown in sample code below:

var fp = fp_init();
timer = fp.timer(1.0, function() {
    return false;
});

Setting timer = null would stop FpTimer after garbage collection, which will stop the callback from being called. One may use timer.stop() or return false in callback to stop an FpTimer before garbage collection.

Properties

Events

None

Methods

Method Name: get

1. Description: Get the property value
2. Return Type: Property specific type
3. Input Parameters:

   propName: string

Method Name: restart

1. Description: Restart the timer

Method Name: stop

1. Description: Stop the timer

Method Name: set

1. Description: Set the value of the property
2. Input Parameters:

   propName: string,
   propValue: property type

Method Name: set

1. Description: Set the value of the property. This method allows multiple properties to be set through a single call. “propName” is the name of the property listed in the Properties section above, while the “propValue” is the value to be set. The type of the “propValue” is dependent on the associated properties, please refer to Properties section for details.. stop
2. Return Type:
3. Input Parameters:

   {
   propName: propValue,
   propName: propValue,
   ...
   }

Method Name: toString

1. Description: Returns the string “FpTimer { interval: X sec” where X is replaced by the value of interval property.
2. Return Type: string

FpObject Class

Extends: none

This is the base class of all FancyPants objects except for Fp, FpAnimator, FpIdler, FpJob, and FpTimer. Every properties, events, methods defined in this class are applicable for all objects constructed from Fp class except for the ones mentioned above.

Constructor

FpObject instances are constructed through object/widget construction methods from Fp.

Properties

The properties can be retrieved and modified using the get() and set() methods. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name: clip

1. Type: FpRectangle

Property Name: color

1. Type:

   {
   r: integer
   g: integer
   b: integer
   a: integer
   premul: bool
   }

2. Description:
   • Please note that if not all of the r,g,b channels are specified, instead of replacing the missing channels with 0, the current object's color will be used instead. For example, if the object's current color is {r: 255, g:0, b:0, a:255}, by specifying obj.set(“color”, {g:255}), we're essentially modifying the green channel to a value of 255, resuling with {r:255, g:255, b:0, a:255}.
   • “premul” boolean indicates whether if the r,g,b,a values have been premultiplied. When color values are premultipled, the values of r,g,b must be less than or equals to alpha. “premul” is false by default, allowing developer to pass r,g,b,a within the range of 0~255 without worry about premultiplication.
   • As FancyPants uses premultiplied color internally for its performance benefit, the retrieved color through FpObject.get(“color”) will always have its premul set to true.
   • The impact of this is that the r,g,b information could be lost when alpha is reduced, so when alpha channel is restored, the values of r,g,b will not come back to its original values.

Property Name: coord

1. Type:

   {
   x: integer
   y: integer
   }

Property Name: focus

1. Type: bool

Property Name: layer

1. Type: short

Property Name: name

1. Type: string

Property Name: repeatEvent

1. Type: bool

Property Name: perspective

1. Type:

   {
   coord:
    {
      x: integer
      y: integer
      z: integer
    }
   }

Property Name: rotation

1. Type:

   {
   angle: double
   center:
    {
      x: integer
      y: integer
    }
   relative: bool
   }

2. Description:
   • Write-only property.
   • Unit of angle is in degrees.
   • “relative” can be used to indicate whether the rotation is to be applied relative to the last angle of rotation. For example, if an object has rotated 45 degrees, and rotation property is applied again with an angle of 5 degrees and “relative” set to true, the result will be that the object is further rotated by 5 degrees, resulting in 50 degrees rotation in total.
   • Setting “relative” to false would make the rotation to begin from original position.

Property Name: rotation3d

1. Type:

   {
   angles:
    {
      x: double
      y: double
      z: double
    }
   center:
    {
      x: integer
      y: integer
      z: integer
    }
   relative: bool
   }

2. Description:
   • Write-only property.
   • Unit of angle is in degrees.
   • “relative” can be used to indicate whether the rotation is to be applied relative to the last angle of rotation. For example, if an object has rotated 45 degrees, and rotation3d property is applied again with an angle of 5 degrees and “relative” set to true, the result will be that the object is further rotated by 5 degrees, resulting in 50 degrees rotation in total.
   • Setting “relative” to false would make the rotation to begin from original position.

Property Name: size

1. Type:

   {
   w: integer
   h: integer
   }

2. Description: The width and height of this object

Property Name: skipEvent

1. Type: bool
2. Description: Set to true if events are to be ignored by this object and false otherwise

Property Name: type

1. Type: string
2. Description:
   • Read-only property.
   • Please refer to the Constants section.

Property Name: visible

1. Type: bool
2. Description: Set to true if this object is visible and false otherwise

Events

Events on objects can be registered using the addEventListener() method.

Event Name: mouseIn

Definition of event info parameter in callback:

{
  pos:
    {
      x: int
      y: int
    }
  buttons: int
  timestamp: int
}

“buttons” is a bit mask where:

• 0x01: left button
• 0x02: middle button
• 0x04: right button

Event Name: mouseOut

Definition of event info parameter in callback:

Same as mouseIn.

Event Name: mouseDown

Definition of event info parameter in callback:

{
  pos:
    {
      x: int
      y: int
    }
  button: int
  timestamp: int
}

“button” is a number indicating which button has pressed:

• 0x01: left button
• 0x02: middle button
• 0x03: right button

Event Name: mouseUp

Definition of event info parameter in callback:

same as mouseDown

Event Name: mouseMove

Definition of event info parameter in callback:

{
  pos:
    {
      x: int
      y: int
    }
  prev:
    {
      x: int
      y: int
    }
  buttons: int
  timestamp: int
}

“buttons” is a bit mask where:

• 0x01: left button
• 0x02: middle button
• 0x04: right button

Event Name: mouseWheel

Definition of event info parameter in callback:

{
  pos:
    {
      x: int
      y: int
    }
  z: int
  direction: int
  timestamp: int
}

Value of “z”:

• -1: vertical wheel up
• 1: vertical wheel down

Event Name: free

Definition of event info parameter in callback:

This event indicates that the object has been deleted by the FancyPants, most likely due to the deletion of its parenting container. Application should remove reference on this object as any subsequent access will be invalid.

Event Name: keyDown

Definition of event info parameter in callback:

{
  key: string
  logicalKey: string
  string: string
  compose: string
  timestamp: int
}

Following explanation assumes SHIFT has been held down and 1 is pressed

• “key”: name of the physical key pressed as on keyboard. In this example, key = “1”
• “logicalKey”: the logical key. In this case, logicalKey = “exclam”
• “string”: UTF8 text of the visible string. In this case, string = “!”
• “compose”: UTF8 text of the visible string in case the keystroke has modified a string in middle of being composed. (it would replace the previous one)

Event Name: keyUp

Definition of event info parameter in callback:

same as keyDown.

Event Name: focusIn

Definition of event info parameter in callback:

Event Name: focusOut

Definition of event info parameter in callback:

Event Name: show

Definition of event info parameter in callback:

Event Name: hide

Definition of event info parameter in callback:

Event Name: move

Definition of event info parameter in callback:

{
  pos:
    {
      x: int
      y: int
    }
  prev:
    {
      x: int
      y: int
    }
}

Event Name: resize

Definition of event info parameter in callback:

{
  size:
    {
      w: int
      yh: int
    }
  prev:
    {
      w: int
      h: int
    }
}

Event Name: restack

Definition of event info parameter in callback:

Event Name: imagePreloaded

Definition of event info parameter in callback:

Event Name: clipChange

Definition of event info parameter in callback:

{
  isclipper: bool
  clipee: FpObject
  old: FpObject
  current: FpObject
}

This event indicates that the clip of a clipee object has been changed. If this event is registered on the clip object, it too will receive the same event when a clipee has been added to it.

• “isclipper”: indicates whether the object receiving this event is a clipper or a clipee.
• “clipee”: the clipee object which its clip has changed.
• “old”: the old clipper object (ie. old clip)
• “current”: the current clipper object

Consider the following example:

    clip1 = fp.rectangle(...);
    clip2 = fp.rectangle(...);
    img = fp.image(...);
    //
    img.set(“clip”, clip1);
    //
    img.addEventListener(“clip”, function(ev) {..});
    clip1.addEventListener(“clip”, function(ev) {..});
    clip2.addEventListener(“clip”, function(ev) {..});

Now, when we execute following statement:

    img.set(“clip”, clip2);

img's clipChange event data:

    isclipper = false
    clipee = img
    old = clip1
    current = clip2

clip2's clipChange event data:

    isclipper = true
    clipee = img
    old = clip1
    current = clip2

clip1 will not be receiving the clipChange event.

General Methods

Method name: addEventListener

Input parameters:

• evt: string
• callback: function

Description:

• Please refer to the Events section above for a list of supported events.
• Callback is in the form of:
  • void callback(event_info)
  • The “event_info” is event dependent, please refer to the Events section above for detail

Method name: addKeyGrab

Input parameters:

• key: string,
• exclusive: bool

Return type: bool

Description:

• This function allows the object to receive the key event without being focused.
• Please refer to the Constants section for a list of key names.
• “exclusive” is an optional parameter (default is false) indicating whether if other object can still receive this particular key event. Setting “exclusive” to true means only the current can receive such event and no other objects can, setting it to false allows all objects (who have also grabbed the same key) to receive the key event.
• Function returns true if key was successfully grabbed, false otherwise.

Method name: get

Input parameters:

• propName: string

Return type:

• property specific type

Description:

Gets the property value, or simply treat the properties like class variables and retrieve by obj.xxx syntax.

Method name: reflect

Description:

Adds the reflection effect on the object.

Method name: removeEventListener

Input parameters:

• evt: string,
• callback: function

Description:

In the case of missing “callback” parameter, this function removes all listeners from the specified event.

Method name: removeKeyGrab

Input parameters:

• key: string

Method name: ripple

Description:

Adds the ripple effect on the object.

Method name: set

Input parameters:

• propName: string,
• propValue: property type

Description:

Sets the value of the property.

Method name: set

Input parameters:

{
  propName: propValue,
  propName: propValue,
  ...
}

Description:

This method allows multiple properties to be set through a single call. “propName” is the name of the property listed in the Properties section above, while the “propValue” is the value to be set. The type of the “propValue” is dependent on the associated properties, please refer to Properties section for details..

For example:

obj.set({
  coord:{x:10},
  size: {w: 100, h: 200},
  focus: true
});

Method name: stackAbove

Input parameters:

• obj: FpObject

Method name: stackBelow

Input parameters:

• obj: FpObject

Method name: stackBottom

Method name: stackTop

Method name: toString

Return type:

• string

Description:

Returns the concrete class name of the object, with the value of the “name” property appended if available.

Effects

Method name: boing

Input parameters

{
  osc: double
  b: double
  a: double
  w: double
  callback: function
}

Description

• There can only be 1 boing effect in progress at any one time, calling this method before the end of the first boing effect will ignored.
• Boing effect cannot be stopped manually, the program must wait for the effect to finish.
• Callback function is an optional parameter which will be triggered when the current boing effect has stopped.
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it will be set to “done” indicating the end of effect.

Method name: bounce

Input parameters

{
  stop: bool
  callback: function
}

Description

• The bounce effect can be called for multiple times, causing the object to be re-bounced everytime it is called.
• Unlike other effects, when “stop” is set to true, the bounce will stop at the end of current bounce cycle instead of jumping to the end position. As there could be a short delay between the time when “stop” is called, to the time when effect is fully stopped, the callback is an indication when the effect is fully stopped.
• In the case when “stop” parameter is specified along with other parameters, the bounce effect will be stopped and other parameters will be ignored.
• Callback function is an optional parameter which will be triggered when the current bounce effect has stopped.
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it will be set to “done” indicating the end of effect.
• Please note that if a callback function is specified for both starting and stopping the bounce effect, the first callback will be discarded and only the latter one will be invoked.

Example

// Start bouncing
obj.bounce({callback: func1});
// Stop bouncing
obj.bounce({callback: func2});
// Only “func2” will be invoked when the bounce effect stopped.

Method name: colorEffect

Input parameters

{
  list: 
    [
      {
        effect: string
        param: string
      },
      {
        effect: string
        param: string
      },
      ...
    ],
  callback: function
}

Description

• Please refer to the Constants section for a list of color effects.
• The callback is a mandatory parameter and will be triggered with a new FpImage object that is * the result of the sequence of color effects.
• Callback is in the form of: void callback(reason, img) Where “reason” is a text string and it will be set to “done” to indicate the completion of effect, the “img” parameter holds result of the color effect in a new FpImage object.
• WARNING: In the case when list is not a valid array, or contains an invalid effect name, this effect will be aborted and the callback will not be triggered.

Method name: fade

Input parameters

{
  stop: bool
  fadeIn: bool
  callback: function
}

Description

• “fadeIn” parameter is used to specify whether if a fade-in (true) or fade-out (false) effect is used.
• In the case when “stop” parameter is specified along with other parameters, the fade effect will be stopped and other parameters will be ignored.
• Callback function is an optional parameter which will be triggered when the current fade effect has ended or aborted due to another call to fade().
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it can be either “done” to indicate the completion of effect (either at the end of fade effect or explicitly stopped by caller), or “abort” indicating the effect has been aborted by a second call to fade().

Method name: fly

Input parameters

{
  dest :
    {
      x: integer
      y: integer
    }
  speed: integer
  rotations :
    {
      x: integer
      y: integer
      z: integer
    }
  callback: function
}

Description

• The previous fly effect will be aborted when applying this effect on the same object multiple times, result in the change of fly path to the new parameters specified.
• The rotations parameter indicates the number of rotation to perform on the given axis.
• Callback function is an optional parameter which will be triggered when the current fade effect has ended or aborted due to another call to fade().
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it can be either “done” to indicate the completion of effect, or “abort” indicating the effect has been aborted by a second call to fly().

Method name: follow

Input parameters

{
  src: FpObject
  top: integer
  left: integer
  right: integer
  bottom: integer
}

Method name: moveto

Input parameters

{
  dest :
    {
      x: integer
      y: integer
    }
  accel: bool
  callback: function
}

Description

• The previous moveto effect will be aborted when applying this effect on the same object multiple times, result in the change of path to the new parameters specified.
• Callback function is an optional parameter which will be triggered when the current moveto effect has ended or aborted due to another call to moveto().
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it can be either “done” to indicate the completion of effect, or “abort” indicating the effect has been aborted by a second call to moveto() or if the object's “coord” property has been updated.

Method name: shaderEffect

Input parameters

{
  stop: bool
  effect: string
  args: <shader dependent arguments>
}

If effect = “ripple”:

args =
 {
 center_x: double
 center_y: double
 }
 // center_x/y has range of 0~1 indicating the width/height of object.

If effect = “peel”:

args =
 {
 tess_col: integer
 tess_row: integer
 }

Description

• This method applies the OpenGL shader effect on the object.
• The “effect” parameter describes the shader effect to use, please refer to the Constants section for a list of shader effects.
• There are 3 ways to stop the shader effect:
  1. set “stop” as true, or
  2. omit the “effect” parameter, or
  3. pass in the “effect” as an empty string.
• All other parameters will be ignored when effect is to be stopped.
• “args” is an optional parameter allowing caller to adjust the parameters of the corresponding shader. When “args” is not specified or if any of the parameters within “args” is missing, the default value will be used instead.

Method name: shaderEffect

Input parameters

effect: string

Description

• This method is a shorthand for the shaderEffect({}) above, it allows application to specify which shader effect to apply, as this method does not include “args” parameter, the default shader parameters will be used instead.
• To stop the effect, please pass in an empty string for “effect” or simply call this method without any parameter.
• The list of effects is identical to the shaderEffect({}) above, please refer to the Constants section for a list of shader effects.

Method name: stars

Input parameters

{
  stop: bool
}

Description

There is only 1 instance of the stars effect, calling stars() multiple times will be ignored. “stop” can be use to stop the stars effect if needed.

Method name: transform

Input parameters

{
  newCoord :
    {
      x: integer
      y: integer
    }
  newSize :
    {
      w: integer
      h: integer
    }
  newColor :
    {
      r: integer
      g: integer
      b: integer
      a: integer
      premul: bool
    }
  callback: function
}

Description

• The previous transform effect will be aborted when applying this effect on the same object multiple times, result in the change of transformation to the new parameters specified.
• Callback function is an optional parameter which will be triggered when the current transform effect has ended or aborted due to another call to transform().
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it can be either “done” to indicate the completion of effect, or “abort” indicating the effect has been aborted by a second call to transform().

Method name: typer

Input parameters

{
  stop: bool
  callback: function
}

Description

• This effect applies to FpText object only.
• There can only be 1 typer effect in progress at any one time, calling this method before the end of the first typer effect will be ignored.
• In the case when “stop” parameter is specified along with other parameters, the fade effect will be stopped and other parameters will be ignored.
• Callback function is an optional parameter which will be triggered when the current typer effect has stopped.
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it will be set to “done” indicating the end of effect or if the effect has been explicitly stopped by application.

Method name: vacuum

Input parameters

{
  tl :
    {
      x: integer
      y: integer
    }
  tr :
    {
      x: integer
      y: integer
    }
  bl :
    {
      x: integer
      y: integer
    }
  br :
    {
      x: integer
      y: integer
    }
  tlTime: integer
  trTime: integer
  blTime: integer
  brTime: integer
  callback: function
}

Description

• tl: Top Left
• tr: Top Right
• bl: Bottom Left
• br: Bottom Right
• The previous vacuum effect will be aborted when applying this effect on the same object multiple times, result in the change of geometry to the new parameters specified.
• Callback function is an optional parameter which will be triggered when the current vacuum effect has ended or aborted due to another call to vacuum().
• Callback is in the form of: void callback(reason) Where “reason” is a text string and it can be either “done” to indicate the completion of effect, or “abort” indicating the effect has been aborted by a second call to vacuum().

FpRectangle Class

Extends: FpObject

Constructor

FpRectangle instance is constructed through object/widget construction methods from Fp.

Properties

Properties of this class are inherited from FpObject, please refer to the list of properties supported by FpObject for details.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

This section defines the FpRectangle specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpText Class

Extends: FpObject

Constructor

FpText instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpContainer Class

Extends: FpObject

Constructor

FpContainer instance is constructed through object/widget construction methods from Fp.

Properties

Properties of this class are inherited from FpObject, please refer to the list of properties supported by FpObject for details.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

This section defines the FpContainer specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpImage Class

Extends: FpObject

Constructor

FpImage instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name: border

Type

{
  left: integer,
  top: integer,
  right: intger,
  bottom: integer
}

Property Name: file

Type

string

Property Name: nativeSize

Type

{
  w: integer,
  h: integer
}

Description

Read-only property

Property Name: tile

Type

{
  x: integer,
  y: integer,
  w: integer,
  h: integer
}

Description

• Normally the image is scaled to the size of the image object, in order to make the image tiled in the image object, one simply needs to change the dimension of image by using the “tile” property.
• x,y represent the coordinate in image that the object should start to display (ie. the top-left corner).
• w,h scales the image to the specified size. If the size is smaller than the size of image object, the remaining space in the object will be filled with this image of the same dimension to achieve the tile effect.

Property Name: url

Type

• FpImage.get() returns “string”.
• FpImage.set() accepts one of following:
  1. string
  2. the following table:

     {
     loc: string,
     done_cb: function
     }

Description

• “done_cb” is an optional parameter that will be triggered when the image is loaded.
• In the case when set() is called with a single string instead of a structure, this call is identical with the structure form except done_cb has been ignored.
• The format of the location string must be a standard URL.
• Callback is in the form of: void callback(succeed) Where “succeed” is a boolean indicating whether if the image was successfully loaded.

Property Name: theme_image

Type

string

Description

The string passed into the constructor is a key to the metrics file. The key can be either a variable in the metrics file as follows:

var string = { file: “filename_of_image.png” }

To key can also be a function in the metrics file as follows:

function string(data) {
    print(“Hi”);
    // set image properties
    data.themeImageByFile(“filename_of_image.png”);
}

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

This section defines the FpImage specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpLayout Class

Extends: FpObject

Constructor

FpLayout instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

This section defines the FpLayout specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpMedia Class

Extends: FpObject

Constructor

FpMedia instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name file

Type

string

Property Name duration

Type

double

Description

Read-only property.

Property Name elapsed

Type

double

Description

Read-only property.

Property Name keepAspect

Type

bool

Property Name loop

Type

bool

Property Name mute

Type

bool

Property Name: nativeSize

Type

{
  w: integer
  h: integer
}

Description

Read-only property.

Property Name: speed

Type

double

Description

• Write-only property.
• -2, -4, -8, -16, -32: fast reverse playback at multiple of normal reverse playback speed.
• -1.0~0.0: reverse slow motion playback. The speed is the fraction of the normal reverse playback speed.
• 0.0: still picture.
• 0.0~1.0: slow motion playback. The speed is the fraction of the normal playback speed.
• 1.0: playback at normal speed.
• 2, 4, 8, 16, 32: fast forward at multiple of normal playback speed.

Property Name: state

Type

string

Description

• Please refer to Constants section for a list of media states.
• Please note that the state “buffering” is a state that could be returned by FpMedia.get(“state”), but it is not a state that can eb set by FpMedia.set(“state”).

Property Name: tile

Type

{
  x: integer
  y: integer
  w: integer
  h: integer
}

Description

• Normally the image is scaled to the size of the image object, in order to make the image tiled in the image object, one simply needs to change the dimension of image by using the “tile” property.
• x,y represent the coordinate in image that the object should start to display (ie. the top-left corner).
• w,h scales the image to the specified size. If the size is smaller than the size of image object, the remaining space in the object will be filled with this image of the same dimension to achieve the tile effect.

Property Name: url

Type

string

Property Name: videoLayer

Type

integer

Description

Write-only property.

Property Name: volume

Type

integer

Description

0 ~ 100

Events

There are two types of events supported by FpMedia: the events inherited from FpObject, and FpMedia specific events. For details on FpObject events, please refer to FpObject section. Following table defines a list of events specific to FpMedia, which can only be registered using the FpMedia.addMediaEventListener() method.

Methods

This section defines the FpMedia specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpTextentry Class

Extends: FpObject

Constructor

FpTextentry instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpCheckbox Class

Extends: FpObject

Constructor

FpCheckbox instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

This section defines the FpCheckbox specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpProgressbar Class

Extends: FpObject

Constructor

FpProgressbar instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

Pease refer to FpObject methods page for list of methods supported in parent class.

FpCalendar Class

Extends: FpObject

Constructor

FpCalendar instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name: date

Type

{
  year: integer
  month: integer
  day: integer
  timestamp: integer
}

Description

• For the set() method, the “timestamp” parameter is the standard UNIX timestamp and is optional when set. The year/month/day parameters supersede the timestamp if present.
• For the get() method, the “timestamp” parameter will always be filled along with year/month/day parameters.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpButton Class

Extends: FpObject

Constructor

FpButton instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpCube Class

Extends: FpObject

Constructor

FpCube instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name: angle

Type

{
  deg: double
  direction: string
}

Description

Both the “deg” and “direction” are mandatory parameter, the “direction” can be one of “snap”, “left”, "right”.

Property Name: rotationDuration

Type

double

Description

The number of seconds for the cube to animate to the target rotation degree.

Property Name: depth

Type

integer

Property Name: orientation

Type

string

Description

Please refer to the Constants section for a list of orientations.

Property Name: perspective

Type

{
  coord :
    {
      x: integer
      y: integer
      z: integer
    }
}

Property Name: tilt

Type

{
  deg: double
  direction: string
}

Description

Both the “deg” and “direction” are mandatory parameter, the “direction” can be one of “snap”, “up”, "down”.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

This section defines the FpCube specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpFlip Class

Extends: FpObject

Constructor

FpFlip instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name: angle

Type

{
  deg: double
  direction: string
}

Description

• Write-only property. Both “deg” and “direction” are mandatory.
• Please refer to the Constants section for a list of directions.

Property Name: depth

Type

integer

Property Name: showboth

Type

bool

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpKeyboard Class

Extends: FpObject

FpKeyboard is a widget that displays a virtual keyboard on screen, allowing user to enter text to the FpTextentry widget as the keys are clicked on. As such, Fpkeyboard only responds to mouse input, and require a FpTextentry to be created and focused in order to have any effect.

Constructor

FpKeyboard instance is constructed through object/widget construction methods from Fp.

Properties

Properties of this class are inherited from FpObject, please refer to the list of properties supported by FpObject for details.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpTextarea Class

Extends: FpObject

Constructor

FpTextarea instance is constructed through object/widget construction methods from Fp.

Properties

Properties of this class are inherited from FpObject, please refer to the list of properties supported by FpObject for details. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpSlider Class

Extends: FpObject

Constructor

FpSlider instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpFilebrowser Class

Extends: FpObject

Constructor

FpFilebrowser instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name: content

Type

[
  {
    name: string
    folder: bool
    playlist: bool
    size: double
    date: string
    thumbnail: string
  },
  {
    name: string
    folder: bool
    playlist: bool
    size: double
    date: string
    thumbnail: string
  },
  ...
]

Description

Read-only property.

Property Name: filter

Type

string

Description

• “filter” is a comma separated string indicating the type(s) of files that can be displayed in file browser.
• The value can be set to an empty string to clear all filters, likewise, the get() could also return an empty string.
• Please refer to the Constants section for a list of values for filter.

Property Name: path

Type

string

Description

Setting this property will not trigger the “change” event callback.

Property Name: traversal

Type

string

Description

• “traversal” indicates whether if user can traverse to different folders.
• Please refer to the Constants section for a list of values for traversal.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

FpMultiselect Class

Extends: FpObject

Constructor

FpMultiselect instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

This section defines the FpMultiselect specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpScrolllist Class

Extends: FpObject

Constructor

FpScrolllist instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Events

Events supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use addEventListener() method as defined by FpObject to register the event listener for both of these types of events.

Methods

This section defines the FpScrolllist specific methods, please refer to FpObject methods page for list of methods supported in parent class.

FpScrollbar Class

Extends: FpObject

Constructor

FpScrollbar instance is constructed through object/widget construction methods from Fp.

Properties

Properties supported by this class are ones inherited from FpObject and the ones listed in the table below. Please use get() and set() methods as defined by FpObject to retrieve and modify these properties. Properties can also be retrieved by treating them as class variables and accessible through obj.xxx syntax.

Property Name: fading

Type

bool

Property Name: hAppear

Type

string

Description

Please refer to Constants section for a list of appear modes for horizontal and vertical scrollbar.

Property Name: kinetic

Type

bool

Property Name: scrollPos

Type

{
  x: integer
  y: integer
}

Property Name: target

Type

obj: FpObject

Description

Value can be null to unset the object in scrollbar.

Property Name: vAppear

Type

string

Description

Please refer to Constants section for a list of appear modes for horizontal and vertical scrollbar.

Events

Events supported by this class are inherited from FpObject, please refer to the list of events supported by FpObject for details.

Methods

Please refer to FpObject methods page for list of methods supported in parent class.

Back to main - Copyright © 2015 Fluffy Spider Techologies - http://fluffyspider.com