At some point you’ll probably want to load xml from another domain into a sketch but because of javascript cross-domain restrictions, you can’t simply add the url to your processing sketch if you want it to work with processing.js. You need to create a proxy. Simply put, a proxy allows you to request resources from another domain. The php proxy I used to request one of my last.fm feeds is extremely basic, but it does the job.
<?php
header('Content-type: application/xml');
echo file_get_contents('http://www.site.co.za/data.xml');
?>
I was having some trouble getting the data back to my processing sketch because I had been trying to handle the data as xml, but found that it needed to be passed to processing as a string, ie. the return datatype for my jquery request needed to be ‘html’ and not ‘xml’, and the data then needed to be passed back to a function that was expecting a string, rather than an XMLElement.
$.ajax({
type: "GET",
url: "getXML.php",
dataType: "html",
success: sendXMLToProcessing
});
function sendXMLToProcessing(data)
{
var pjs = Processing.getInstanceById('dataViz');
pjs.parseXML(data);
}
To communicate with the sketch, the canvas container needs to be assigned an id. Now to call a function inside the sketch, we simply create a variable to hold a reference to that canvas, and from there, it’s plain sailing.
<canvas id="dataViz" data-processing-sources="sketch.pde"></canvas>
