Blog / 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.ca

Phillip 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.ca

The 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 around
Only 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.

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 Code
The 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, iPad
After 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.com

It 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 Issue
The site looked perfect when my iPad/iPhone was landscape, but when I turned it around to portrait…

iPad Cut-Off Solution
If 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.

Leave a comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Sign up for updates