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 ...
