Home/ Questions/Q 8468261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:52:57+00:00

I’ve been playing about with the KineticJs JavaScript library and now I’m trying to

  • 0

I’ve been playing about with the KineticJs JavaScript library and now I’m trying to simulate some simple PhoneGap-based apps in the iOS simualtor.

However I’m having problems getting even a simple piece of code working in the iOS simulator. My code simply draws a rectangle on the HTML5 canvas using the KineticJs library. I can run it in a desktop browser using the Ripple Emulator (emulate.phonegap.com) and it works fine (although the window.onload event seems to get triggered twice, not sure if that’s relevant though).

The problem occurs in the iOS simulator. As soon as the javaScript code to instantiate a new KineticJs ‘stage’ is encountered, nothing else happens in the Xcode console panel (no console.log() messages get displayed) and no alert() popups appear in the simulator.

I’ve added debug messages (using console.log() and alert() statements) to every single constructor, method, prototype, etc. in the kinetic-v4.0.0.js source code, but not a single message gets displayed in the Xcode console panel after the initial startup messages, so it’s difficult to figure out where it’s getting lost.

I’ve pasted my index.html file below. It just contains the KineticJs calls to draw a rectangle and also includes the Cordova and KineticJS libraries in the .

I’ve tried many things such as re-locating the inclusion of the KineticJS source code (desperation stuff), waiting for a user button click to create the KineticJS stage instead of doing it on the ‘deviceready’ event (just to be doubly sure everything is ready), but nothing made any difference.

This is an example of my debug statements in kinetic-v4.0.0.js (just in case I’m doing something stupid):

Kinetic.Stage = Kinetic.Container.extend({
    init: function(config) {
        console.log("In Kinetic.Stage.init().");            //<<<<<< Debug
        if (myDbg) alert("In Kinetic.Stage.init().");       //<<<<<< Debug
        .
        .
        .
        .

My index.html code:

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Rect</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name = "format-detection" content = "telephone=no"/>
        <meta name="viewport" content="user-scalable=no, initial-scale=0.75, maximum-scale=1, minimum-scale=1, width=device-width;" />
        <script src="../../js/kinetic-v4.0.0.js"></script>
        <script type="text/javascript" src="cordova-2.0.0.js"></script>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script>
            document.addEventListener("deviceready", onDeviceReady, false);

            function onDeviceReady() {
                console.log("In onDeviceReady().");
                //alert("In onDeviceReady().");

                var stage = new Kinetic.Stage({
                    container: "container",
                    width: 578,
                    height: 200
                });

                console.log("onDeviceReady(): created stage.");
                //alert("onDeviceReady(): created stage.");

                var layer = new Kinetic.Layer();

                var rect = new Kinetic.Rect({
                    x: 239,
                    y: 75,
                    width: 100,
                    height: 50,
                    fill: "#00D2FF",
                    stroke: "black",
                    strokeWidth: 4
                });

                layer.add(rect);
                stage.add(layer);

                console.log("Finishing onDeviceReady().");
                //alert("Finishing onDeviceReady().");

            }; // onDeviceReady() function handler
        </script>
    </head>

    <body>
        <div id="container">
        </div>
    </body>

</html>

As you can see from the code above, “In onDeviceReady().” should be printed to the Xcode console panel just before the KineticJS stage is created, and then “onDeviceReady(): created stage.” should be printed just after the stage creation. However, only “In onDeviceReady().” is printed.

These are the Xcode console panel messages:

2012-08-28 16:58:05.384 misc35_basic_kinetic_rect_phonegap_prj[92196:13403] Multi-tasking -> Device: YES, App: YES
2012-08-28 16:58:05.577 misc35_basic_kinetic_rect_phonegap_prj[92196:13403] PluginResult:toJSONString - {"status":1,"message":"wifi","keepCallback":false}
2012-08-28 16:58:05.578 misc35_basic_kinetic_rect_phonegap_prj[92196:13403] PluginResult toSuccessCallbackString: cordova.callbackSuccess('NetworkStatus0',{"status":1,"message":"wifi","keepCallback":false});
2012-08-28 16:58:05.579 misc35_basic_kinetic_rect_phonegap_prj[92196:13403] PluginResult:toJSONString - {"status":1,"message":{"name":"iPhone Simulator","uuid":"0000-0000-0000-0000-0000","platform":"iPhone Simulator","version":"5.1","cordova":"2.0.0"},"keepCallback":false}
2012-08-28 16:58:05.580 misc35_basic_kinetic_rect_phonegap_prj[92196:13403] PluginResult toSuccessCallbackString: cordova.callbackSuccess('Device1',{"status":1,"message":{"name":"iPhone Simulator","uuid":"5EFBB116-CF1E-4E47-9259-6092C5F7C4F6","platform":"iPhone Simulator","version":"5.1","cordova":"2.0.0"},"keepCallback":false});
2012-08-28 16:58:05.584 misc35_basic_kinetic_rect_phonegap_prj[92196:13403] [INFO] In onDeviceReady().

Any pointers would be greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Indeed I was being stupid.

    The problem was that in the index.html file, I was pulling in the kinetic-v4.0.0.js file from outside the Xcode project area, inside of having it reside in the www directory or a sub-dir.

    Of course, Xcode’s radio silence on the matter didn’t help.

    • 0