WORKING OFFLINE

70 views
Skip to first unread message

Larry Serflaten

unread,
Jul 5, 2016, 8:55:19 AM7/5/16
to Khan Academy Javascript Technical Q&A

 

The folks at Khan Academy use a javascript package from the processing.js team at http://processingjs.org/ . It is open source and freely available to anyone.  That means you can use the same package Khan Academy started with to build their Computer Science javascript section.  All you need to get started is an HTML5 compatable browser and the freely available processing.js files.

 

OVERVIEW

 

The offline development setup is most easily handled by using separate files to hold the three main elements;
 
 1) the processing.js file  ( available at http://processingjs.org/download/ )
 
 2) your javascript code file ( where you write / edit your code )
 
 3) the HTML file that links 1 and 2 with a web page that has a canvas element.
 
Each program you write needs its own javascript code file and its own HTML file that links your code together with the processing.js file and a canvas element.  For that reason it is advantageous to create a heirarchy of folders where one top level folder contains many sub-folders, one for each program you create.
 
The top level folder can contain the processing.js file which is shared among your different programs.  Each sub-folder contains a program's HTML file and its associated code file.  All the files mentioned so far are nothing more than text files with special extentions.  There is no installation of any kind required, you simply create the folders and drop the files into them.
 

STEP BY STEP

 

  1) Create a new folder for your javascript projects.  This will be your top level folder.
 

  2) Download all the processing.js files (if desired) or just get the minimized version.  As of 1 JUL 2016 the current production version is 1.4.8 (processing.min.js) on their downloads page.  Place these files in your top level folder from step 1.
 

  3) Create a sub folder for your first project.
  

  4) Open the sub folder and right click the files area to create a new text file. Name of that file: First Project.js.  That will be your code file.  After it is created, when you highlight and right click that file you  should see options to Open or Edit it.  When programming, you want to Edit the file. 

 
If you don't see the Edit option be sure the type of the file is a JScript Script file and not a Text Document.  If it is a Text Document you need to set the file extension to .js For help on how to do that click the Start menu icon and select Help and Support.  In the search box type; file extensions  and in the results for that search find the entry for (usually the first one) "Show or hide file name extensions" and follow the instructions there to make sure you can see file extensions.  Once you can see the file extensions, you can then rename the file to supply the correct (.js) file extension. 
 

  5) Highlight and right click your new code file and open it for editing. (comes up in Notepad)
 

  6) Copy and paste the following text into your new code file and save the file.

 

var jsMain = function(processingInstance){ with (processingInstance){
size(400, 400);  // set size of canvas
 

// add your code here ...

background(255, 0, 0);
 
}};

  7) Back in the sub folder, right click and create a second text document called First Project.htm
 

  8) Drag that file directly onto your open copy of Notepad, which will open that HTML file for editing.
 

  9) Copy and paste the following text into that file and save the file. 

 

<!DOCTYPE html><html><head><title>First Project</title></head>

<body><canvas id="pageCanvas"></canvas></body>
<script src="..\processing.min.js"></script>
<script src="First Project.js"></script>
<script type="application/javascript">
   var canvas = document.getElementById("pageCanvas");
   var processingInstance = new Processing(canvas, jsMain);
</script>
</html>

 

 10) With that file saved you should be able to launch it (double click the file) to see a fresh red canvas. (You may have to accept the warning to allow blocked content, that blocked content is your javascript)
 

If it runs right off, Congratulations you have sucessfully followed all the instructions!!!

 

If it does not run, be sure two things match what you have on your system.

 

  1) The first script src="..\processing.min.js" section matches the name of the file you downloaded to your top level folder.
 

  2) The second script src="First Project.js" matches the name of your code file.  (the two dots in front of the processing file tell the browser to look one folder up from the current location)

 

From those 10 steps you will be able to make as many different programs as you want.

 

 

BAD NEWS GOOD NEWS

 

The downside to offline development is that you need to do steps 3, 6, and 9 for every new program, adjusting the second script src to match your new project name.  But, if you are running Windows, there is some good news!  The HTML file at the end of this message will do the three steps for you.  All you need do is launch the HTML file and enter your new project name!

 

 

TIPS FOR EDITING

 

There are a few differences between running offline and running the same program at Khan Academy. Offline is a little more tolerant about forgetting trailing semi-colons.  And offline uses radian triginometry where KA uses degrees.  If you have troubles during the conversion, search this newsgroup for an answer, or post a question if you don't see your issued covered already.

 

One useful tip is to work in milestones.  When you get a major portion of your program done and working, stop and make a copy of your program file.  That way if you code yourself into a corner (and need to go at it a different way) you have saved files to backtrack as far as you need to bring in the new methods.

 

To test your code, launch the HTML file in your browser.  While editing and updating, use CTRL+S to save the file in Notepad and hit the Refresh button in the browser to pick up the new changes.  You can do that combination reasonably rapidly, if you want to make incremental changes to correctly align images and shapes.

 

Because you are offline, there is no Goofy-Guy popping up telling you that you have messed up somewhere.  The page will simply come up blank, or if you're lucky it will tell you that jsMain is not defined.  Thats not bit of help when you have a 500 line program in your code file....

 

If you are using Windows Explorer, make use of its developer tools to help find the issue.  When viewing the browser, press the F12 key (or use;  Tools / Developer Tools  from the menu) to bring up the developer tools.  Get familiar with its debugger, and try out adding a breakpoint (click on the far left margin) and single stepping through your code.  Single stepping through your code and watching the contents of variables is one of the most informative methods you will have to learn how your program is working.

 

  
PULLING A RABBIT OUT OF YOUR HAT

 

And now for the piece de resistance (the reason for this post). The HTML code below will make building new projects a breeze.  To see it in action follow these steps:

 

  1) In your top level folder create a new text document called:  JS Project Starter.hta
 

  2) Open that file in Notepad and paste in the code listed below then save the file
 

  3) Launch that file to make your second JS project. 

 

The JS Project Starter will make a new sub folder (step 3) and create 2 new files in the new folder (steps 6 and 9).  You need only to navigate into the new folder and right click the new code file to open it for editing, and away you go! 

 

Happy coding!

 

<JS Project Starter code follows>

 

<html><head>

<title>P5-JS Project Starter App</title>

<HTA:APPLICATION

     ID="JSProject"
     APPLICATIONNAME="JSProjectStarter"
     SCROLL="no"
     MAXIMIZEBUTTON="no"
     SINGLEINSTANCE="yes"
     WINDOWSTATE="normal">
</head>

<style>

BODY
{
   background-color: buttonface;
   font-family: Helvetica;
   font-size: 10pt;
   margin-top: 10px;
   margin-left: 20px;
   margin-right: 20px;
   margin-bottom: 10px;
}

.button

{
   font-family: Helvetica;
   font-size: 8pt;
   width: 92px;

}

textarea

{
   font-family: arial;
   font-size: 8pt;
}

</style>

<script>

var ps_file = "";
var ps_name = "";
var fso = new ActiveXObject("Scripting.FileSystemObject");

function position(){

   window.resizeTo(400, 355);

   window.moveTo((screen.width - 400) * 0.5, (screen.height - 440) * 0.4);
    
}

function titleCase(text){

var spl=text.split(" ");
var ups="";
   for(var i=0;i<spl.length;i++){
      ups = "" + spl[i].charAt(0).toUpperCase();
      ups += "" + spl[i].substring(1);
      spl[i] = ups
   }
   return spl.join(" ");
}

function runBuild(){

   ps_name = document.getElementById("project").value;

   if (ps_name.length == 0){
 alert("Project name error.  Operation aborted.");
 return;
   }
     

   ps_file = fso.GetFileName(findPS());

   if (ps_file.length == 0){
 alert("File access errors.  Operation aborted.");
 return;
   }
    
   fso.CreateFolder(".\\" + titleCase(ps_name));
   var txt = fso.CreateTextFile(".\\" + ps_name + "\\" + ps_name + ".js", true);
   txt.WriteLine("var jsMain = function(processingInstance){ with (processingInstance){");
   txt.WriteLine("size(400, 400);  // set size of canvas");
   txt.WriteLine("");
   txt.WriteLine("// add your code here ...");
   txt.WriteLine("");
   txt.WriteLine("");
   txt.WriteLine("}};");
   txt.close()

   txt = fso.CreateTextFile(".\\" + ps_name + "\\" + ps_name + ".htm", true);

   txt.Write('<!DOCTYPE html><html><head><title>' );
   txt.WriteLine(titleCase(ps_name) + '</title></head>');
   txt.WriteLine('<body><canvas id="pageCanvas"></canvas></body>');
   txt.WriteLine('<script src="..\\' + ps_file + '"><\/script>');
   txt.WriteLine('<script src="' + ps_name + '.js"><\/script>');
   txt.WriteLine('<script type="application/javascript">');
   txt.WriteLine('   var canvas = document.getElementById("pageCanvas");');
   txt.WriteLine('   var processingInstance = new Processing(canvas, jsMain);');
   txt.WriteLine('</script\>');
   txt.WriteLine('</html>');
   txt.close();

   txt = document.getElementById("project");

   txt.value = "";
  
}

function findPS(){
var fld = fso.GetFolder(".");
var fls = new Enumerator(fld.Files);
var nam = "";
var lst = "1";

   for(fls.moveFirst(); !fls.atEnd(); fls.moveNext() ) {

 nam = "" + fls.item();
 if (nam.indexOf(".min.js") > 0) {
    if (nam > lst){ lst = nam;}
 }
   }
  
  fls = null;
  fld = null;
  return lst;
}
</script>

<body onLoad="position()">

   &nbspEnter the name of your project:<br>
   <input type="text" name="project" size="50"><br><br>
   <input type="button" value="Build" onClick="runBuild()"><br>&nbsp;<br>
   <p><h3>INSTRUCTIONS:</h3>
<p>Enter the name of your new project. (above)</p>
<p>Press the Build button to create the folder and files for your new project.</p>
<p>Enter your program into the newly created  <b>*.js</b> file and <i><b>save your work</b></i>, then double click

the <b>*.htm</b> file to view the results.</p>

</body>
</html>

 

  

<end of message>

 

rachae...@gmail.com

unread,
Mar 9, 2018, 3:34:49 PM3/9/18
to Khan Academy Javascript Technical Q&A
Hi Larry,

Thanks for the work you've put into this. I followed the steps and was able to launch the red canvas, but when I followed the same steps to launch my KA program (star(t)), it comes up with a gray canvas.
I tried moving my code to Fiddle, and it displays using Bob's KA template, so I think I must be missing something. Is there anything else I need to add to my KA code to get it to display in a browser?

Thanks!
Rachael

Larry Serflaten

unread,
Mar 10, 2018, 7:37:04 AM3/10/18
to Khan Academy Javascript Technical Q&A

rachael wrote:
 
Thanks for the work you've put into this. I followed the steps and was able to launch the red canvas, but when I followed the same steps to launch my KA program (star(t)), it comes up with a gray canvas.
I tried moving my code to Fiddle, and it displays using Bob's KA template, so I think I must be missing something. Is there anything else I need to add to my KA code to get it to display in a browser?


Oops!  I hit reply I did not notice it was going to send the reply to your email address.  I would rather reply here in the newsgroup so everyone can learn.

If you got the email, then I hope it fixed your problem.  eg,  Random was not supported so a workaround was necessary.

Where you had:

var generator = new Random(1);

The fix was:

var generator = {nextGaussian:randomGaussian};

Have fun!
LFS


rachae...@gmail.com

unread,
Mar 10, 2018, 10:24:10 AM3/10/18
to Khan Academy Javascript Technical Q&A
Hi Larry -

Wow, thank you again! If it took you an hour to find a solution, I can only imagine how long it would have taken me :).

I implemented that, and I have a black canvas now! Progress :).

I opened developer tools, and see these errors:

processing.min.js:164 Failed to decode downloaded font: data:application/x-font-ttf;base64,(followed by many letters, which I've removed for sake of space)
getElementWidth @ processing.min.js:164
pending @ processing.min.js:165
Ir @ processing.min.js:1415
E.Processing @ processing.min.js:1418
(anonymous) @ star(t).html:8

processing.min.js:164 OTS parsing error: post: Failed to parse table
getElementWidth @ processing.min.js:164
pending @ processing.min.js:165
Ir @ processing.min.js:1415
E.Processing @ processing.min.js:1418
(anonymous) @ star(t).html:8

I have the processing.min files in my main folder, so I'm wondering if perhaps I need to download something more. I've just been coding on KA (and nowhere else) since October, so this is new to me. I realize the first error something to do with the font, but I'm not entirely sure how to read this, or where to start for a solution. Any help would be appreciated.

Thanks so much!

rachae...@gmail.com

unread,
Mar 12, 2018, 7:27:24 PM3/12/18
to Khan Academy Javascript Technical Q&A
Hi Larry,

I'm still trying to figure out this font decoding issue. I've searched through StackOverflow, and have only found reference to people using @fontface and custom fonts. I haven't specified any fonts in my html. In my JS file, I had set verdana as my font, but just commented that out to test it. I'm still getting the same error - failed to decode font. I'm not really sure what else to do.
I also tried adding the verdana .ttf file and putting @fontface for verdana in my html, but that also didn't work.

Do you happen to have any ideas? If you were able to load my program, I really am not sure what could be the problem.

As I said, it works fine on JSFiddle and Khan Academy. I'm able to load a black canvas, and the music I've since added plays as well.

Larry Serflaten

unread,
Mar 12, 2018, 9:29:29 PM3/12/18
to Khan Academy Javascript Technical Q&A

, rachael
I can only guess, as it is tough to debug from a distance, but I'd bet that is not the issue..

Something to try would be to load in the test program again and see if you get it to work, and if that error is there also.  I seem to recall seeing font errors in all my debugging sessions. It is possible to log an error without crashing the system. If the error is there while the program works as expected, you can bet its not a font issue (they just logged an error message and recovered)

If you still think its a font error, make a copy of your program file, and then comment out every occurrence of textFont, textSize,  createFont and why not include textAlign.  Search and replace tools might make that go easier.

If it still doesn't run, I'd say there is another issue, is the font error the ONLY error you see?

LFS

rachae...@gmail.com

unread,
Mar 13, 2018, 4:48:09 AM3/13/18
to Khan Academy Javascript Technical Q&A
Hi Larry,

I loaded the test program, and you're right - the error is there too. I tried commenting out the textFont, textSize, and textAlign in my program, and the error is still there. You said you were able to load the program though, which is why I'm confused.

These are the only two errors that are displaying, and they show up on both pages (the test program and my program).

Failed to decode downloaded font: data:application/x-font-ttf;base64,AAEAAAAKAIAAAwAgT1MvMgAAAAAAAAEoAAAAVmNtYXAAAAAAAAABiAAAACxnbHlmAAAAAAAAAbwAAAAkaGVhZAAAAAAAAACsAAAAOGhoZWEAAAAAAAAA5AAAACRobXR4AAAAAAAAAYAAAAAGbG9jYQAAAAAAAAG0AAAABm1heHAAAAAAAAABCAAAACBuYW1lAAAAAAAAAeAAAAAgcG9zdAAAAAAAAAIAAAAAEAABAAAAAQAAAkgTY18PPPUACwAgAAAAALSRooAAAAAAyld0xgAAAAAAAQABAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEAAAACAAIAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACMAIwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAMAAQAAAAwABAAgAAAABAAEAAEAAABB//8AAABB////wAABAAAAAAAAAAgAEgAAAAEAAAAAAAAAAAAAAAAxAAABAAAAAAABAAEAAQAAMTcBAQAAAAAAAgAeAAMAAQQJAAEAAAAAAAMAAQQJAAIAAgAAAAAAAQAAAAAAAAAAAAAAAAAA
First%20Project.html:1 OTS parsing error: post: Failed to parse table



rachae...@gmail.com

unread,
Mar 13, 2018, 1:40:06 PM3/13/18
to Khan Academy Javascript Technical Q&A
Ahh I figured it out. I didn't have the newest version of processing JS.

I had made my way to github, and downloaded an old version. I didn't realize that I just needed to copy and paste the script on the processing JS download page, and save it as a processing.min.js file. I thought that maybe something was wrong with the download, so I went to Github and downloaded an older version.

Now that I "downloaded" the newest version it's working!! Hooray!

Thanks again for all your help, Larry!

Reply all
Reply to author
Forward
0 new messages