worksheet strangeness with Javascript, Processing.js

[Dan Drake]

I'm trying to embed some Processing.js [1] stuff into a worksheet.
Here's the simple HTML version: http://klee.kaist.ac.kr/processing.html.
You can see that I just need a couple script tags and a canvas.

I tried to put that into a worksheet, but I don't see anything:
http://sage.maa.org/home/pub/154/

What is weirder is that when I view the worksheet, I see "goodbye"
twice, along with some strange newline stuff. (See attached screenshot.)

Any ideas on what's going on?

Dan


References:
[1] http://processingjs.org/

--
--- Dan Drake
----- http://mathsci.kaist.ac.kr/~drake
-------

[Jason Grout]

On 7/23/12 11:56 AM, Dan Drake wrote:
> I'm trying to embed some Processing.js [1] stuff into a worksheet.
> Here's the simple HTML version: http://klee.kaist.ac.kr/processing.html.
> You can see that I just need a couple script tags and a canvas.
>
> I tried to put that into a worksheet, but I don't see anything:
> http://sage.maa.org/home/pub/154/
>
> What is weirder is that when I view the worksheet, I see "goodbye"
> twice, along with some strange newline stuff. (See attached screenshot.)
>
> Any ideas on what's going on?
>

You're doing this in a text cell? Is tinymce escaping things? Did you
try editing the worksheet to put the script tags in directly? Or did
you try to embed it using html() in a sage cell?

Jason

[Dan Drake]

On Mon, 23 Jul 2012 at 02:35PM -0500, Jason Grout wrote:

> You're doing this in a text cell?

Yes. I can make it work with an iframe, but I'd like to get it all
working directly in the worksheet.

> Is tinymce escaping things?

Maybe. I'm not sure how to check. I pasted in my code using the raw HTML
window in the tinymce editor. Later I tried manually editing the text
version.

What is strange is that when I try to double-click the text cell where I
see the strange output, it doesn't respond.

> Or did you try to embed it using html() in a sage cell?

When I try with html(), I get the error "called Processing constructor without
passing canvas element reference or id." Which is strange, because I
have a canvas element reference. Maybe the canvas element hasn't been
put into the DOM when that bit of Javascript is running?

Dan

[Dan Drake]

Okay, I have it working, sorta. Here's what I did:

Manually edit the worksheet and put the canvas element in one text cell.
In another cell, I did html(r''' ...all the Javascript code...''') and
evaluated that. Then I got the little clock. (See the current version of
http://sage.maa.org/home/pub/154/).

The notebook seems to dislike canvas tags, though. When I double-click
on the clock, there's nothing there -- not even when I use the "edit
HTML" button. But editing the text version of the worksheet shows the
canvas element as expected.

Is this a tinymce thing?

Dan