Create Your Widget

First off I like to give credit where it is due. I learned how to do this over at the Tulmult Inc blog. My example file is a modified version of their example file.

  1. Download my example file and unzip - Attached to page below.
  2. Copy your Processing sketch into the folder (i.e. your sketch.pde file). You can either rename your program to sketch.pde or you can edit the html file and put in the name of your sketch instead.
  3. If you have stuff in a "data" folder take it out and include the files in the root directory and then head over to the Quick Start for Projcessing.js to learn how to pre-load images.
  4. Create an image that matches your sketch size. Not bigger than 1024x640. According to Tulmult this is the limit. However, when I use this size my sketch goes off the bottom of the screen. Note: If your sketch is bigger than your default image it will be cropped. I set my image to be 900x640 and then use size(900,630); in my sketch and I have no problems.
  5. Edit info.plist just open in a text editor or Xcode. You can replace the FLOSScience with your name and set the size to be your Default.png size
  6. At some point you might want to update the procession.js to the latest version. If you do you'll also have to update the pointer in the html file.
  7. Double click on the index.html file and make sure it runs in a web browser
  8. Once you've done that rename the folder to be "Name.wdgt"
  9. Insert into iBook with the <html> widget.
  10. If you want to update your widget at a later date you can right click on the wdgt file and select "Show Package Contents"
processing widget
Steve Dickie,
Aug 21, 2012, 1:51 PM