teaching machines

Persist – Jake Berner (TackyNotes)

December 7, 2012 by . Filed under cs491 mobile, fall 2012, postmortems.

This was by far the most difficult assignment for me. Not the persist stuff, just trying to handle the GUI stuff to make the story around it work for me.

My program is a “sticky notes” application, but so-as to not get sued by 3M, I’m calling it TackyNotes. It’s essentially a wall on which you can place 3-d looking notes. Currently they are all yellow, but it could interface with a color picker quite readily. The background color is otherwise dynamically set by coloring a mask and applying a shading image over it.

TackyNotes has a menu with two sets of options. You can always create a New Note, which will be created in the center of the screen and immediately zoomed in for editing. Or you can Delete All to clear the wall.

When you are done editing a note, you can dismiss it with a simple pinch gesture on the note. It will zoom back out and take it’s place on the wall with its friends. You can also drag the notes around to organize them how you like, though it wont let you drag them off the screen (currently, they *can* fall off the screen if you change orientation).

With a TackyNote open, the menu still allows you to create new notes, but it now also allows you to delete the current note.

Open notes stack appropriately (you can create/open multiple notes and dismiss them in reverse order).

If you rotate the screen, currently the positions remain relative to the top/left of the current orientation, so it’s possible to place notes in one spot in one orientation that makes them inaccessible in another.

TackyNotes are automatically saved when dismissed, when the orientation or configuration changes, or when the program is closed. Positions of notes on the wall are saved as soon as you life your finger.

The zoom feature originally combined scale and translation animations in an AnimationSet. Chris Johnson worked out how to do it with a ScaleAnimation alone by calculating the appropriate pivot point for the scaling. Thanks!

Reversing the animation used another trick, a reverse interpolator. Basically, the animation progresses from 0 to 1, but the interpolator takes those values and subtracts them from 1, effectively causing the animation to go in reverse.

The changing menus is done by overriding the onPrepareOptionsMenu method, which is called before every showing of the menu. From there, I can hide/show the appropriate menu items (like showing Delete Note vs Delete All Notes depending on whether any notes are open).

There are still many tweaks and new features I would like to add to this project in the future, but I’m happy with it for now. In order to test the pinch-zoom, I had to run it on a loaner HTC phone that only had API 10, so I had to work around a few issues there as well.

Well, that’s about it. Hope you like it!