Re: Beginner wants to put PDE file into Google Site

446 views
Skip to first unread message

Lee Brunjes

unread,
Jun 7, 2013, 10:55:46 PM6/7/13
to proces...@googlegroups.com
Hi Stephanie,

It may be harder than you think to host a pde file on google sites. 

It looks like what you need to do is create a gadget that loads processing.js and your pde and the insert that gadget into your page.

I have no idea if this tutorial is any good but here is my source:

You may also want to review this guide about how processing.js works:


Does that help?

-Lee





On Thu, Jun 6, 2013 at 7:47 AM, Stephanie Sutton <computerte...@yahoo.com> wrote:
Hello, I am working on a children's program in Processing. I saved it as a .pde file.  I'd like to embed it into a Google Site in an HTML box.  I have searched this site for an answer and I have some sample code but nothing too specific.  Is there a simple explanation for embedding a .pde file into a Google Site?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to processingjs...@googlegroups.com.
To post to this group, send email to proces...@googlegroups.com.
Visit this group at http://groups.google.com/group/processingjs?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Message has been deleted

peter renshaw

unread,
Jul 4, 2013, 2:20:14 AM7/4/13
to proces...@googlegroups.com

On Thursday, June 6, 2013 9:47:17 PM UTC+10, Stephanie Sutton wrote:
I'd like to embed it (Processing) into a Google Site in an HTML box

Can do and it's pretty easy. 

The only requirement is having access to the HTML box. This is known as *inline* Javascript (ProcessingJS is javascript). Check this example here <http://processingjs.org/learning/> and search for the "Second Method".  The guts of it I've shown below. The key points are

a) script tag link to processing code (I've hijacked processing code from ProcessingJs. You could do put this file up at your site.
b) the data-processing-target must match the name of the canvas tag in the body tag. Otherwise it won't wire up.
c) add your code inside the script tag
d) the canvas tag in the body tag  is where you will see your code work.
e) Check the ProcessingJs site for specific examples of syntax and techniques <http://processingjs.org/learning/>. Most of Processing code works with ProcessingJS.


Note the different comment styles of HTML comment and Processing comment.

Regs PR


       <!-- --- start html --->
          <html>
          <HEAD>
              <! --- point a) --->
              <script src="http://processingjs.org/js/processing.min.js"></script>
              <! --- point b) ---> 
              <script type="text/processing" data-processing-target="MY-CANVAS">
               
               // point c) 
               void setup()
               {
                   size(200,200);
                   background(125);
                   fill(255);
                   noLoop();
                   PFont fontA = loadFont("courier");
                   textFont(fontA, 14);  
               }

               void draw(){  
               text("Hello Web!",20,20);
               //println("Hello ErrorLog!");
               }
          </script>
          </HEAD>
          <body>
                <!-- point d) -->  
                <canvas id="MY-CANVAS"></canvas>
                    </body>
                    </html>
                    <!-- --- end html --->
Reply all
Reply to author
Forward
0 new messages