Selected Web Development Portfolio Examples

A few examples from several recent flash to HTML5 conversions, done for Sinauer Associates publishing:

  • Kidney Regulation: For the best part, click on the “Efferent Arteriole” link along the bottom, the press the “Play All” button below the illustration.  This was a tricky flash-html conversion because the animation had to be done on both several HTML5 canvas (to handle the various flow animations) and using traditional sprites for other moving elements.  (the original flash is here)
  • Mechanoreceptors: This time just follow the next button (right-arrow) to see the user-interactive sequences.  While the animation here was pretty straightforward, it took some significant effort to get the audio to work correctly on all browsers, including mobile phones. (the original flash is here)

Browser-based scientific user interfaces I’ve developed for the Monterey Bay Aquarium Research Institute:

  • TethysDash is the UI for operating a long range autonomous underwater vehicle, which is basically a free-swimming robot that can perform missions for up to a month.  Communication with the vehicle is primarily via Iridium SBD packets, when it is on the surface and in a good sea state.  Otherwise, it’s on its own.  Unfortunately to see most TethysDash features, you need to be logged in, but the most-used feature really is the History view, which you’ll get to see.  By default you will see all types of messages for the vehicle.  Typically operators will disable most of the message types except for the log messages, until something goes wrong.  Hidden features (which could be seen via a screen-sharing session) include mission script customization, command generation, vehicle state display, document editing, e-mail notifications, etc.
  • TethysScript is a TethysDash feature in development.  The script used on the underwater vehicle mentioned above is described in this paper. The great thing about the scripting language is that is very machine understandable because it has a concise XML schema associated with it.  But it’s a pain in the neck to type.  So TethysScript is attempt to present the XML mission documents in a completely visual way, with schema-controlled editing options for every element.  If you follow the TethysScript link above, then click on Edit Script, navigate to any script and click on “Open”.  Feel free to edit, since nothing is saved in this demo version.
  • RoleCall is a web application that allows one to attach roles to OpenID usernames, so that federated log-ins to serveral systems (using OpenID) can be managed from one point. RoleCall is used to manage TethysDash users.

And for the Navy’s Office of Naval Reseach:

  • The data exploration interface to information collected during a typhoon-chasing experiment in the Western Pacific ocean. The back-end of is a web-crawler that continually scoured several hundred data sources for information and collected that information in an organized manner.