JavaScript - export for web

scen · July 2014

My script runs just fine in Processing under the JavaScript mode. But when I Export for Web, the index HTML doesn't work. The web page opens without error and I can see the header and footer stuff that is standard. But the script is just blank. I even tried it with processing.js sample code (below) and the same thing. What am I missing? Is there a setting in processing or something?

Sample code:

/**
  PROCESSINGJS.COM - BASIC EXAMPLE
  Delayed Mouse Tracking  
  MIT License - Hyper-Metrix.com/F1LT3R
  Native Processing compatible 
*/  

// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = width / 2;
  nX = X;
  nY = Y;  
}

// Main draw loop
void draw(){

  radius = radius + sin( frameCount / 4 );

  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;

  // Fill canvas grey
  background( 100 );

  // Set fill-color to blue
  fill( 0, 121, 184 );

  // Set stroke-color white
  stroke(255); 

  // Draw circle
  ellipse( X, Y, radius, radius );                  
}


// Set circle's next destination
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}

PhiLho · July 2014

Have you tried with another browser? (You don't tell which one you used, BTW.)

Some browsers don't want to run a JS script from the file system, so you can allow such run, you can change for another browser, or you upload the sketch on a Web server (can be local to your computer!).

GoToLoop · July 2014

Nowadays, only Firefox and derivative browsers directly allow JS & plugins from ".html" files w/o a server.
Some other browsers may allow it as well if you are able to find & disable the corresponding protection option.

scen · July 2014

I am using IE10. The above code works when I open http://processingjs.org/learning/ But when I try to export the code it doesn't. The HTML produced by processing looks like this. I am assuming it is standard.

<!DOCTYPE html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>sketch_140715a : Built with Processing and Processing.js</title>
        <link rel="icon"  type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQAAVzABAEAjBQAaDwYAWjUGAGE6CQBrQQ0ATS8PAFhAJwBUQC8AbFI6AHVXPACBZk4A4NrWAPb19QAAAAAAAMmZmZmZmgAJIwAAAAAAcMIjPjA+PjAKpxIuMDMzMAm0Ii4zMzMACaIiLt3dMAAJtyIuIzPQAAm0Un5yM+IzKLRkfncy4iIotRF+dyLkIiq0QX53F+EiGrQUTkd34iIatEVu7u5iIVrBVVRBRFRVbAtGZGZla2uwAMu7u7u8vADAAwAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAADAAwAA" />
        <meta name="Generator" content="Processing" />
        <!-- - - - - - - - - - - - - - - - - - - - - 
        +
        +    Wondering how this works? 
        +
        +    Go to: http://processing.org/
        +    and: http://processingjs.org/
        +
        + - - - - - - - - - - - - - - - - - - - - -->
        <style type="text/css">
    body {
      background-color: #333; color: #bbb; line-height: normal;
      font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
      font-size: 11px; font-weight: normal; text-decoration: none;
          line-height: 1.5em;
    }
    a img { 
        border: 0px solid transparent;
    }
    a, a:link, a:visited, a:active, a:hover { 
        color: #cdcdcd; text-decoration: underline;
    }
    h1 {
        font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
        width: 100%; letter-spacing: 0.1em;
        margin-bottom: 1em; font-size: 1.65em;
    }
    canvas { 
        display: block; 
        outline: 0px; 
        margin-bottom: 1.5em; 
    }
    #content { 
        margin: 50px auto 0px auto; padding: 25px 25px 15px 25px;
        width: 200px; min-width: 300px; overflow: auto;
        border-left: 1px solid #444; border-top: 1px solid #444; 
        border-right: 1px solid #333; border-bottom: 1px solid #333;
        background-color: #3d3d3d;
    }
        </style>
        <!--[if lt IE 9]>
            <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
        <![endif]-->
        <script src="processing.js" type="text/javascript"></script>
        <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'sketch140715a'; }
</script>

    </head>
    <body>
        <div id="content">
            <div>
                <canvas id="sketch140715a" data-processing-sources="sketch_140715a.pde" 
                        width="200" height="200">
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
            <h1>sketch_140715a</h1>
            <p id="description"></p>
            <p id="sources">Source code: <a href="sketch_140715a.pde">sketch_140715a</a> </p>
            <p>
            Built with <a href="http://processing.org" title="Processing">Processing</a>
            and <a href="http://processingjs.org" title="Processing.js">Processing.js</a>
            </p>
        </div>
    </body>
</html>

GoToLoop · July 2014

Dunno why you didn't understand my answer! Gonna re-phrase it below:
If you wanna use a non-Firefox browser, you gotta run the ".html" file via a server!

P.S.: When posting a code text, highlight it and hit CTRL+K in order to format it for the forum!

PhiLho · July 2014

In other words: if you double-click on an HTML file (like the one exported) and if it opens in your default browser, it will have an URL like file://
As said, most browsers will deactivate the JavaScript in such file. In IE, you might have to lower the security or something similar to get it to work (unless it asks you if you want to activate it).
The alternative is to upload the file(s) to a real Web server (after all, that's the final purpose of such export, no?). Or to run a server on your computer, something like Wamp for example. Then you can load it with an http://localhost address.

GoToLoop · July 2014

"JS Mode" already creates a local server and opens up the default browser!
Besides WAMP, I've heard it's pretty easy to get a local server via http://NodeJS.org/ too!

But i believe it's more practical to simply post your code at some Processing host site:
http://studio.sketchpad.cc/sp/pad/newsketch
http://openprocessing.org/sketch/create

Or do some tests here:
http://processingjs.org/tools/processing-helper.html

scen · July 2014

Thank you

Howdy, Stranger!

Categories

In this Discussion

JavaScript - export for web

Answers