10.06.2012

Processing.js and Sencha Touch


(just for documentation purpose, here an older experiment, result at http://mapresso.com/test/pjs_touch/AH1))

I made the following hacks:

1. In the app.js I added a function, which loads the processing-1.3.6.js only at the end of the launch function:

    loadProcessingJs: function (filename) {
   var fileref=document.createElement('script')
   fileref.setAttribute("type","text/javascript")
   fileref.setAttribute("src", filename)
   document.getElementsByTagName("head")[0].appendChild(fileref)
},

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('AH1.view.Main'));
        this.loadProcessingJs("processing-1.3.6.js");

    },

2. In the app/view/Main.js I added the canvas inside the html item:

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here.<br /><br />",
                    '<h3>HelloWorld of Processing.js:</h3>',
                    '<canvas data-processing-sources="circle.pde"></canvas>'
                ].join("")


3. circle.pde contains the ProcessingJS code;

4. And the worst change: I added one line ("init();") totally at the bottom of (non minified version) processing-1.3.6.js (because otherwise the init()-function never executes in my hack):

...
  Processing.loadSketchFromSources = loadSketchFromSources;
  Processing.disableInit = function() {
    if (isDOMPresent) document.removeEventListener("DOMContentLoaded", init, false)
  };
  if (isDOMPresent) {
    window["Processing"] = Processing;
    document.addEventListener("DOMContentLoaded", init, false)
  } else this.Processing = Processing;
  init();
})(window, window.document, Math);

For the minimized version (e.g. in processing-1.4.1.min.js the very end must be


...else{this.Processing=F;}I()})(window,window.document,Math);
instead of 
...else{this.Processing=F;}})(window,window.document,Math);

___

I don't know what I want to do with this experience. I like Processing and perhaps I'll someday make something with Sencha Touch and Processing.js ...