html5 canvas doesn't show processing.js sketch

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

html5 canvas doesn't show processing.js sketch

nvr slx

hi i'm new to Seaside, and have a little problem:


the html5 canvas I added doesn't show my processing.js sketch




A) i've added "data:" to the WACanvasTag category: 'Seasdie-HTML5-Tags'

      data: aString
     self attributes at: 'data-processing-sources' put: aString


B) .. so the canvas tag is "brushed" like i want

      renderContentOn: html
      html canvas data:'http://processingjs.org/sketches/basic-example.pde'.



html result:
<canvas data-processing-sources="http://processingjs.org/sketches/basic-example.pde"></canvas>



C) also added the processing.js code:


       updateRoot: aRoot
       super updateRoot: aRoot.

                aRoot javascript url: 'http://processingjs.org/js/processing.min.js'.


html result:
<script type="text/javascript" src="http://processingjs.org/js/processing.min.js"></script>







D) my expectation was that the processing.js code should show up. when i look at the html source of the seaside page.
    the code looks ok, it evens works when i save the code as a index.html file. see html file below

    but the html5 canvas I added doesn't show my processing.js sketch when it's loaded by Seaside



I'm not sure what i'm doing wrong? Please help.

Btw: seaside is great!

Thanks,

Jim





index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Seaside</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><meta http-equiv="Content-Script-Type" content="text/javascript"/><link rel="stylesheet" type="text/css" href="/files/WADevelopmentFiles/development.css"/>

<script type="text/javascript" src="http://processingjs.org/js/processing.min.js"></script>

<link rel="stylesheet" type="text/css" href="/todo?_s=pQPDuwQ--u8uqFXe"/></head><body onload="onLoad()">

<canvas data-processing-sources="http://processingjs.org/sketches/basic-example.pde"></canvas>


<h1>Seaside ToDo</h1><form accept-charset="utf-8" method="post" action="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy"><ul><li class="done"><input checked="checked" name="1" type="checkbox" class="checkbox"/><input name="2" type="hidden" class="hidden"/>ToDo Item&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;3">edit</a>&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;4">remove</a></li><li class="done"><input checked="checked" name="5" type="checkbox" class="checkbox"/><input name="6" type="hidden" class="hidden"/>ToDo Item&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;7">edit</a>&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;8">remove</a></li><li class="done"><input checked="checked" name="9" type="checkbox" class="checkbox"/><input name="10" type="hidden" class="hidden"/>ToDo Item&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;11">edit</a>&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;12">remove</a></li><li><input name="13" type="checkbox" class="checkbox"/><input name="14" type="hidden" class="hidden"/>ToDo Item&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;15">edit</a>&nbsp;<a href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;16">remove</a></li></ul><input value="Save" type="submit" class="submit"/><input name="17" value="Add" type="submit" class="submit"/></form><div class="wa-toolbar"><a class="wa-newsessiontoolplugin" href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;18">New Session</a> <a class="wa-configuretoolplugin" href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;19">Configure</a> <a class="wa-togglehalostoolplugin" href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;20">Halos</a> <a class="wa-profilertoolplugin" href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;21">Profile</a> <a class="wa-memorytoolplugin" href="/todo?_s=ZO3cEjCACrsGCweH&amp;_k=SYu7CbDYLBGbh_Yy&amp;22">Memory</a> <a class="wa-validatetoolplugin" title="Validate XHTML" href="http://validator.w3.org/check/referer">XHTML</a> <span class="wa-timingtoolplugin"><span title="Callback Time">0</span>/<span title="Render Time">0</span> ms</span></div><script type="text/javascript">/*<![CDATA[*/function onLoad(){};/*]]>*/</script></body></html>


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: html5 canvas doesn't show processing.js sketch

Nick
Hi Jim,

hi i'm new to Seaside, and have a little problem:

Welcome.

I can't see anything obviously wrong in what you've done. I guess in your position, I'd try to get it working in a static file, then work out the difference between the static version and the Seaside generation.

Sorry I can't be of more help

Nick


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: html5 canvas doesn't show processing.js sketch

Robert Sirois
And also make sure there's no errors in the javascript and you're using a browser that supports canvas.

RS


Date: Tue, 17 Jan 2012 22:45:37 +0000
Subject: Re: [Seaside] html5 canvas doesn't show processing.js sketch
From: [hidden email]
To: [hidden email]

Hi Jim,

hi i'm new to Seaside, and have a little problem:

Welcome.

I can't see anything obviously wrong in what you've done. I guess in your position, I'd try to get it working in a static file, then work out the difference between the static version and the Seaside generation.

Sorry I can't be of more help

Nick


_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: html5 canvas doesn't show processing.js sketch

nvr slx

 
hi Nick and RS,
 
 
That's my problem:
 
the static file works (index.html, see below) and is exact the same html code as the Seaside generation (index.html is the source code of the Seaside generation).
 
I'm using Safari. index.html loads, Seaside generation doesnt.
 
Strange.
 
 

From: [hidden email]
To: [hidden email]
Subject: RE: [Seaside] html5 canvas doesn't show processing.js sketch
Date: Tue, 17 Jan 2012 16:35:31 -0700

And also make sure there's no errors in the javascript and you're using a browser that supports canvas.

RS


Date: Tue, 17 Jan 2012 22:45:37 +0000
Subject: Re: [Seaside] html5 canvas doesn't show processing.js sketch
From: [hidden email]
To: [hidden email]

Hi Jim,

hi i'm new to Seaside, and have a little problem:

Welcome.

I can't see anything obviously wrong in what you've done. I guess in your position, I'd try to get it working in a static file, then work out the difference between the static version and the Seaside generation.

Sorry I can't be of more help

Nick


_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: html5 canvas doesn't show processing.js sketch

Robert Sirois
It looks fine... I assume your <script> that loads processing.js is in the head in your static html file on disc as well? It probably has to do with something processing.js is expecting to see that it isn't.

Maybe take a look at how they suggest to embed their code and try to see what Seaside is doing that doesn't agree with that as Nick described.

RS


From: [hidden email]
To: [hidden email]
Subject: RE: [Seaside] html5 canvas doesn't show processing.js sketch
Date: Wed, 18 Jan 2012 13:26:56 +0100


 
hi Nick and RS,
 
 
That's my problem:
 
the static file works (index.html, see below) and is exact the same html code as the Seaside generation (index.html is the source code of the Seaside generation).
 
I'm using Safari. index.html loads, Seaside generation doesnt.
 
Strange.
 
 

From: [hidden email]
To: [hidden email]
Subject: RE: [Seaside] html5 canvas doesn't show processing.js sketch
Date: Tue, 17 Jan 2012 16:35:31 -0700

And also make sure there's no errors in the javascript and you're using a browser that supports canvas.

RS


Date: Tue, 17 Jan 2012 22:45:37 +0000
Subject: Re: [Seaside] html5 canvas doesn't show processing.js sketch
From: [hidden email]
To: [hidden email]

Hi Jim,

hi i'm new to Seaside, and have a little problem:

Welcome.

I can't see anything obviously wrong in what you've done. I guess in your position, I'd try to get it working in a static file, then work out the difference between the static version and the Seaside generation.

Sorry I can't be of more help

Nick


_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: html5 canvas doesn't show processing.js sketch

nvr slx
Hi Rob,
 
only 2 lines are needed:
 
<script type="text/javascript" src="<A href='http://processingjs.org/js/processing.min.js">http://processingjs.org/js/processing.min.js"></script>
<canvas data-processing-sources="<A href='http://processingjs.org/sketches/basic-example.pde">http://processingjs.org/sketches/basic-example.pde"></canvas>
 

>Using Processing

>There are two ways of implementing processing. The first way is the recommended one. Let me illustrate both of these:
>First Method
>Needed files: processing.js anything.html anything.pde
>The anything.html file will look like:
<script src="processing.js"></script> 
<canvas data-processing-sources="anything.pde"></canvas>

 
 
Thanks for your comments,
 
Jim
 

From: [hidden email]
To: [hidden email]
Subject: RE: [Seaside] html5 canvas doesn't show processing.js sketch
Date: Wed, 18 Jan 2012 07:19:44 -0700

It looks fine... I assume your <script> that loads processing.js is in the head in your static html file on disc as well? It probably has to do with something processing.js is expecting to see that it isn't.

Maybe take a look at how they suggest to embed their code and try to see what Seaside is doing that doesn't agree with that as Nick described.

RS


From: [hidden email]
To: [hidden email]
Subject: RE: [Seaside] html5 canvas doesn't show processing.js sketch
Date: Wed, 18 Jan 2012 13:26:56 +0100


 
hi Nick and RS,
 
 
That's my problem:
 
the static file works (index.html, see below) and is exact the same html code as the Seaside generation (index.html is the source code of the Seaside generation).
 
I'm using Safari. index.html loads, Seaside generation doesnt.
 
Strange.
 
 

From: [hidden email]
To: [hidden email]
Subject: RE: [Seaside] html5 canvas doesn't show processing.js sketch
Date: Tue, 17 Jan 2012 16:35:31 -0700

And also make sure there's no errors in the javascript and you're using a browser that supports canvas.

RS


Date: Tue, 17 Jan 2012 22:45:37 +0000
Subject: Re: [Seaside] html5 canvas doesn't show processing.js sketch
From: [hidden email]
To: [hidden email]

Hi Jim,

hi i'm new to Seaside, and have a little problem:

Welcome.

I can't see anything obviously wrong in what you've done. I guess in your position, I'd try to get it working in a static file, then work out the difference between the static version and the Seaside generation.

Sorry I can't be of more help

Nick


_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: html5 canvas doesn't show processing.js sketch

Paul DeBruicker
On 12-01-18 07:08 AM, nvr slx wrote:
> <script type="text/javascript"
> src="http://processingjs.org/js/processing.min.js"></script
> <http://processingjs.org/js/processing.min.js%22%3E%3C/script>>
> <canvas
> data-processing-sources="http://processingjs.org/sketches/basic-example.pde"></canvas
> <http://processingjs.org/sketches/basic-example.pde%22%3E%3C/canvas>>


When I put those lines in an html file and open it I get an error in
firebug and nothing is displayed.  Have you checked for javacsript
errors in Firebug when running your seaside example?

This is the error as reported in Firebug when opening those two lines:


uncaught exception: Processing.js: Unable to load pjs sketch files:
http://processingjs.org/sketches/basic-example.pde ==> XMLHttpRequest
failure, possibly due to a same-origin policy violation. You can try
loading this page in another browser, or load it from http://localhost 
using a local webserver. See the Processing.js README for a more
detailed explanation of this problem and solutions.

If I put those two lines in the head section of an html file with an
empty body I get the same error.

When I use the index,html file you posted in the first email I get the
same error.


Maybe its a Firefox thing. I don't know.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: html5 canvas doesn't show processing.js sketch

nvr slx
Thanks all! Problem solved!!


I didn't notice the XMLHttpRequest error.

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.


When you add the processing files to a seaside file library.
The processing sketches work!! Just add the .js and .pde files to a file library.


Thanks for all your help.

Much appreciated.

Jim




> Date: Wed, 18 Jan 2012 08:36:33 -0800

> From: [hidden email]
> To: [hidden email]
> Subject: Re: [Seaside] html5 canvas doesn't show processing.js sketch
>
> On 12-01-18 07:08 AM, nvr slx wrote:
> > <script type="text/javascript"
> > src="http://processingjs.org/js/processing.min.js"></script
> > <http://processingjs.org/js/processing.min.js%22%3E%3C/script>>
> > <canvas
> > data-processing-sources="http://processingjs.org/sketches/basic-example.pde"></canvas
> > <http://processingjs.org/sketches/basic-example.pde%22%3E%3C/canvas>>
>
>
> When I put those lines in an html file and open it I get an error in
> firebug and nothing is displayed. Have you checked for javacsript
> errors in Firebug when running your seaside example?
>
> This is the error as reported in Firebug when opening those two lines:
>
>
> uncaught exception: Processing.js: Unable to load pjs sketch files:
> http://processingjs.org/sketches/basic-example.pde ==> XMLHttpRequest
> failure, possibly due to a same-origin policy violation. You can try
> loading this page in another browser, or load it from http://localhost
> using a local webserver. See the Processing.js README for a more
> detailed explanation of this problem and solutions.
>
> If I put those two lines in the head section of an html file with an
> empty body I get the same error.
>
> When I use the index,html file you posted in the first email I get the
> same error.
>
>
> Maybe its a Firefox thing. I don't know.
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside