Behind the Scenes on By The Rapids: Drupal Interactivity and iPad Gestures

By The Rapids is a cartoon on APTN. The fourth season is coming out soon. The story revolves around Corey Littlehorn and his family who move from big city Toronto to small town By The Rapids. Hilarity ensues. It’s around this backdrop that we created bytherapids.caPhillip gave thought to the value the site could add to the fourth season television experience. He came up with the idea of creating a big, interactive map showing how the buildings and characters are laid out in the By The Rapids world. APTN did a wonderful job on rendering graphics for the characters and buildings on the map.http://bytherapids.caThe user can move the maps around via mouse and iPad gestures. They can hover with the mouse or touch on the iPad to get the character and building names. They can also click/touch each one to get more information, and the featured characters have links to nodes to learn more.(The idea was that with the small budget from Season 4, we would create this Phase 1 scaled-down version. For Season 5, it would be expanded–the user would be able to explore the world, especially the insides of the buildings.)I’ll touch on how we made the iPad gesturing happen for this version; but first, the desktop solutions.Moving The Maps aroundOnly a portion of the big map can be seen at a time through the “control panel” interface. The small map shows the “you are here” view.[[{“type”:”media”,”view_mode”:”media_large”,”fid”:”96″,”attributes”:{“alt”:””,”class”:”media-image”,”height”:”450″,”typeof”:”foaf:Image”,”width”:”820″}}]]When you drag the little map viewer, the window of the big map changes accordingly. Similarly, vice versa.To do this, we used the jQuery library, draggable().http://jqueryui.com/demos/draggable/#constrain-movementÊOne of the keys was containing the movement of each map to its container, stopping at the edges.For the little map, it was easy. draggable() has the ability to specify the div in which it is contained.$(“#map_drag”).draggable({ÊÊÊÊÊÊÊ containment: “#small_map_container”,ÊÊÊÊÊÊÊ ….});ÊBig Map CodeThe big map was a bit trickier. The surrounding container doesn’t work in the same way. The portion that is visible doesn’t move, so it needs to be contained in an imaginary, larger container, four times the size. We simulated this using offset.left/top for the starting points, and subtracting the width/height for the end points.var startLeft = $(“#big_map_movement_container”).offset().left;var startTop = $(“#big_map_movement_container”).offset().top;var endLeft = startLeft – ($(“#big_map_container”).width());var endTop = startTop – ($(“#big_map_container”).height());Ê $(“#big_map_movement_container”).draggable({ÊÊÊÊÊÊ containment: [endLeft, endTop, startLeft, startTop],ÊÊÊÊÊÊ stop: function() {ÊÊÊÊÊÊÊÊÊÊÊ var drag_left = $(“#big_map_movement_container”).position().left;ÊÊÊÊÊÊÊÊÊÊÊ var drag_top = $(“#big_map_movement_container”).position().top;ÊÊÊÊÊÊÊÊÊÊÊ var new_left = drag_left / ratio;ÊÊÊÊÊÊÊÊÊÊÊ var new_top = drag_top / ratio;ÊÊÊÊÊÊÊÊÊÊÊ $(“#map_drag”).css({left: new_left, top: new_top});ÊÊÊÊÊ }Ê });We created the sliding movement with jQuery animate().Hello, iPadAfter getting it to work beautifully on desktop, iPad proved to be a bit of a challenge. We tried a few different solutions, but none of them gave us the ability to keep the movement constrained.Then came TouchPunch.http://touchpunch.furf.comIt is a self-proclaimed “small hack that takes the already existing, working desktop code, and makes it iPad/iPhone/Android/mobile devices touch-enabled using the jQuery UI user interface library.”Best of all, no code changes! It just worked. All we needed to do was add the two libraries after draggable() and before the file that does all of the fancy map action, jmap.js:if (drupal_is_front_page()) {ÊÊÊÊ drupal_add_js(drupal_get_path(‘module’, ‘btrsite’) . ‘/js/jquery.min.js’);ÊÊÊÊ drupal_add_js(drupal_get_path(‘module’, ‘btrsite’) . ‘/js/jquery-ui-1.js’);ÊÊÊÊ drupal_add_js(drupal_get_path(‘module’, ‘btrsite’) . ‘/js/jquery-ui.min.js’);ÊÊÊÊ drupal_add_js(drupal_get_path(‘module’, ‘btrsite’) . ‘/js/jquery.ui.touch-punch.min.js’);ÊÊÊÊ drupal_add_js(drupal_get_path(‘module’, ‘btrsite’) . ‘/js/jmap.js’);}That was it! So easy. It works great in our tests on iPad, iPhone, and Android.An Unexpected IssueThe site looked perfect when my iPad/iPhone was landscape, but when I turned it around to portraitÉ[[{“type”:”media”,”view_mode”:”media_large”,”fid”:”97″,”attributes”:{“alt”:””,”class”:”media-image”,”height”:”450″,”typeof”:”foaf:Image”,”width”:”820″}}]]iPad Cut-Off SolutionIf the initial width is wider than the device, this happens. Both the left and right sides were cut off; on the right, some of the elements remained, appearing to hang off the edge.The “initial-scale” of $viewport needs to be set small enough to see everything on first load. After that, the user can zoom in and out and everything is still visible.ÊThese were just a few of our learnings in developing this project. Have you had interesting experiences with interactivity and iPad gesturing? We’d love to hear them in the comments.

• Author: Jill Binder