phonegap-plugin-wizCanvas

• PhoneGap Version : 3.3

Description

PhoneGap plugin for creating and manipulating native canvas without UIWebView for ultra performance.

Install (with Plugman)

cordova plugin add https://github.com/Wizcorp/phonegap-plugin-wizCanvas
cordova build

< or >

phonegap local plugin add https://github.com/Wizcorp/phonegap-plugin-wizCanvas
phonegap build

Booting

wizCanvas looks automatically for an index.js file in www/assets/canvas/ if you wish to ignore this and load from another relative location, use wizCanvas.load().

Additional Steps in Xcode

In Xcode Build Settings, add the following 2 lines in the Header Path

"$(SRCROOT)/<your project name>/Plugins/jp.wizcorp.phonegap.plugin.wizCanvasPlugin/lib"
"$(SRCROOT)/<your project name>/Plugins/jp.wizcorp.phonegap.plugin.wizCanvasPlugin/lib/JavaScriptCore"

In Xcode Build Settings, add the following 2 lines in the Library Search Path

"$(SRCROOT)/<your project name>/Plugins/jp.wizcorp.phonegap.plugin.wizCanvasPlugin/lib"
"$(SRCROOT)/<your project name>/Plugins/jp.wizcorp.phonegap.plugin.wizCanvasPlugin/lib/JavaScriptCore"

In Xcode Build Settings remove armv7s from valid architectures.

APIs

Create

Currently, only 1 canvas view can be created. View is hidden after creation.

wizCanvas.create(String viewName, JSONObject options, Function success, Function fail);

Options list;

{
    src: "my/local/script.js" [relative to www/]
    height: 300, [accepts "300px", "30%" - default: fills height] 
    width: 300, [accepts "300px", "30%" - default: fills width] 
    x: 0,
    y: 0, 
    top: 0, [string, pixels or percent - default: 0]
    bottom: 0, [string, pixels or percent - default: 0]
    left: 0, [pixels or percent - default: 0]    
    right: 0, [string, pixels or percent - default: 0]
    backgroundColor: [Colour as hex RGB/ARGB/RRGGBB or "transparent"]
    onTop: false [Default: true. Transparency can only be used when onTop is true][Android Only]
}; 

Note - Android does not yet support String " px" values or " %" values

Load

wizCanvas.load(String viewName, String URI or URL, Function success, Function fail);

Set Layout

wizCanvas.setLayout(String viewName, JSONObject options, Function success, Function fail);

See create API for a list of options.

Show

wizCanvas.show(String viewName, JSONObject options, Function success, Function fail);

A list of animations;

• slideInFromLeft
• slideInFromRight
• slideInFromTop
• slideInFromBottom
• fadeIn

Example animation Object;

options : {
    animation: {
        type: "fadeIn", 
        duration: "300"
    }
};

NOTE : Animation options not yet fully supported!

Hide

wizCanvas.hide(String viewName, JSONObject options, Function success, Function fail);

A list of animations;

• slideOutFromLeft
• slideOutFromRight
• slideOutFromTop
• slideOutFromBottom
• fadeOut

Example animation Object;

options : {
    animation: {
        type: "fadeOut",
        duration: "300"
    }
}; 

NOTE : Animation options not yet fully supported!

Messaging

To send a messsage to a view based on W3C post message API... for more information on the MessageEvent API, see: http://www.w3.org/TR/2008/WD-html5-20080610/comms.HTMLElement

wizCanvasMessenger.postMessage(Data message, String targetView);

• message is Data as Array, String, Number, Object
• targetView is the string name of the target view.
• to reach Cordova window, targetView = "mainView"

Add an event listener in the html that wishes to receive the message...

window.addEventListener('message', listeningFunction, false);

In canvas use the following to receive messages from Cordova's page

wizCanvasMessenger.addEventListener('message', listeningFunction);

Example receiver;

function listeningFunction (e) {
    // Event data object comes in here
    // e.data - message data
    // e.origin - the origin of the data
    // e.target - the target for the data
}