0

I'm trying to embed a pde made with processing into a vanilla html page:

Here is my code: 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="application/javascript" src="processing-1.4.1.min.js"></script>
</head>
<body>
    <canvas width="700" height="821" data-processing-sources="jailmap2012capacity.pde"></canvas>
</body>
</html>

When the page is loaded, nothing appears.

I'm not getting any errors showing in the console for Firefox, but I am getting an error in Chrome that says, "Uncaught TypeError: Cannot call method 'addListener' of undefined" for client.js on line 6, but I don't think this is related to the problem.

The processing pde renders correctly within the Processing IDE.

Ideas? Suggestions? Thoughts? Thanks!

EDIT: Changed "source" to "src" in script link.

SOLUTION: It appears that the default .pde produced in the Processing IDE does not include preloading tags necessary for use on the web.

For reference: http://processingjs.org/reference/preload/

Image and fonts will need to be preloaded on the very first line of the .pde, like so: 

/* @pjs preload="path/image_1.gif, path/image_2.gif"; font="path/font_1.eof, path/font_2.eof"; */
morten.c
  • 3,414
  • 5
  • 40
  • 45
Twitch
  • 664
  • 1
  • 7
  • 26

1 Answers1

0

javascript is not "application/javascript", it's "text/javascript", and if you're using , leave off the type. It's not necessary. On which note: add at the top. With that covered, if running that using localhost or online and that doesn't fix things (you cannot reliably run from file:/// unless you tell your browser to allow file XHR from file), check your console log, and report back what the errors are.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • With HTML 5, the default is "text/javascript", though "application/javascript" is legit: http://www.w3schools.com/tags/att_script_type.asp . Also, unfortunately it doesn't seem to make a difference if its on a server or from a local directory, just checked. Still no errors displayed in console.log except what was listed above. :/ – Twitch Apr 03 '13 at 18:00
  • we're going to ignore w3schools completely, because of everything you'll find on http://www.w3fools.com - bottom line, w3schools has nothing to do with w3 and has a justified reputation for often being wrong without taking requests to fix serious. Even in HTML4.01, text/tjavascript is the expected script type (application/javascript as mime type might make sense, but never in a script element). So, that said, is this from file:/// or using a localhost server? (important difference; both are "local", but browsers behave differently) – Mike 'Pomax' Kamermans Apr 03 '13 at 20:26
  • I'm running from web server now. Checked out that w3fools.com link - lots of information there, thanks. I did have a blunder typo: should have had src instead of source. How I overlooked that, I dunno... typing and not thinking I suppose. So okay, I now have this error: Uncaught Processing.js: Unable to execute pjs sketch: Error using image in background(): PImage not loaded. – Twitch Apr 03 '13 at 20:34
  • 1
    did you remember to preload the image using the @pjs preload directive? (edit: just saw your post update. I guess you discovered that) – Mike 'Pomax' Kamermans Apr 04 '13 at 00:50