Mobile Web – Jake Berner (PhotoJournal)

This turned into one frustrating project! Mostly because of Cordova…

My girlfriend suggested something along the lines of a photo journal (a way to take pictures and immediately say sometime about them). Seemed simple enough…

The landing page either includes a welcome message, or it displays the most recent journal entry.

There is also a library to list previous entries:

If you tap on an item, it displays the entry. If you tap and hold, it opens a dialog to confirm that you wish to delete the entry. If deletion is successful, you are returned to the library.

The third page allows you to add new entries. For some reason, the built in camera would not cooperate with Cordova’s camera plugin, so it’s currently pulling from the phone’s gallery. This page features a button with a custom icon (which I had to hack with css to get it to display like this).

Once you’ve selected an image (or taken a photo, in an ideal world. I’ll try this on a Droid phone when I get back to one), it replaces the button with the image. You may then add any textual comments about the photo in the textarea below and click Save.

Data is persisted via a custom Cordova plugin that writes serialized JSON data to files stored on External Storage. The plugin has 3 actions: one to fetch all current journal files, one to remove a journal file by name, and one to save a new journal file.

As I said, I had trouble getting Cordova to work. This is because the deviceready event did not seem to fire. Instead, I setup an interval hook to detect for cordova.exec, which seemed to work nicely.

Hope ya like it!


Leave a Reply

Your email address will not be published. Required fields are marked *