Pages

Monday, March 12, 2012

NetLogo on Blogger

Summary

  1. Export your project as an applet.
  2. Put the exported file, your project file(s), and NetLogoLite.jar together in a directory on a webserver.

If using GAE and Blogger,

  1. Do 1 and 2 above using GAE as your webserver.
  2. Remove everything outside of <applet></applet> from the html file and put it in a post on Blogger with an iframe in place of the applet text.
  3. Fix the paths for any files you are linking to such as images.
  4. Reformat the post to make it work better on Blogger and adjust Blogger to work better with the post.

***Update 19 March 2012***

You can also let the NetLogo project host your model by uploading it here, and here is the official documentation for running your model as an applet.

******

Details

Yesterday, I posted a project I did last semester for an artificial intelligence course in which we were studying multi-agent systems. Since NetLogo, the software we used for modeling, runs on the JVM, the simulations can be made into applets and be run in a browser. Today, I will explain the steps I followed in order to post my NetLogo model on Blogger.

If I had my own webserver, posting the model would have been a little bit easier, but I didn't want to pay for server hosting or mess with hosting from home just to be able to post a java applet in a blog. The trouble is that most blogs, including tumblr.com and wordpress.com, don't allow the user to insert Java applets into their posts. So, what I ended up doing was signing up for a free Google App Engine account(GAE), and then serving the applet statically from my GAE application.

Whether you have your own server or not, the first step is to open your project in NetLogo and then export it as an html file. Click File -> Save As Applet.... Next, you must put the project's .nlogo file and NetLogoLite.jar in the same directory as the .html file. NetLogoLite.jar can be found in the main directory of your NetLogo download.

At this point, some browsers will display the applet if you open the .html file in the browser; however, for security reasons, most modern browsers will not run the applet, and you must serve the files from a web server instead.

To serve the applet from GAE remove all the text from the .html file except for what is surround by <applet><\applet> and then serve that file statically according the the instructions found here. If you haven't used GAE before, you will also want to read the rest of their getting started.

Once I had the applet running on Google App Engine, then all I had to do was embed the application into a post using an iframe. Again, blogger was ideal here, since wordpress.com does not allow iframes and tumblr.com only allows them in video posts. I replaced the applet code with this iframe code:

<iframe  width="700" height="500" frameBorder="0" src="http://david-campbell.appspot.com/netlogo/campbell-rover.html">
your browser does not support IFRAMEs
</iframe>

The dimensions of the applet is 675 by 480, and I had to make the frame a bit larger in order to avoid scroll bars.

Next I made the blog wider so that the model would fit better, fixed the broken paths for the image files being linked to, and moved the sections explaining what the model is and how to use it to before the model.

One final note, if I post another model, rather than using the html generated from exporting the model, I will copy the markdown text straight from the model to a text file and use my own markdown engine to translate it to html, because the one built into Netlogo does not produce very nice results.

No comments:

Post a Comment