Blogs Media Lab Research

Digital Wayfinding in the Walker, Pt. 1

An ongoing conversation here at the Walker concerns the issue of systemic wayfinding within our spaces — certainly an important issue for an institution actively seeking attendance and public engagement, not to mention an institution whose building is literally a hybrid of the old and new (with our 2005 expansion). While not normally in New […]

An ongoing conversation here at the Walker concerns the issue of systemic wayfinding within our spaces — certainly an important issue for an institution actively seeking attendance and public engagement, not to mention an institution whose building is literally a hybrid of the old and new (with our 2005 expansion). While not normally in New Media’s purview, and only occasionally so for Design, a recent initiative to improve the flow and general satisfaction of visitors brought with it the idea of using digital displays, with their malleable content and powerful visual appeal, to guide and direct people throughout the Walker.

Our new static directional signage

Currently installed in one location of an eventual three, and with a simple “phase one” version of the content, the Bazinet Lobby monitor banks cycle through the title graphics for all the exhibitions currently on view, providing a mental checklist of sorts that allows the visitor to tally what he or she has or hasn’t yet seen that directly references the vinyl graphics at each gallery entrance. The corner conveniently works as an intersection for two hallways leading to a roughly equivalent number of galleries in either direction, one direction leading to our collection galleries in the Barnes tower, and the other our special exhibition galleries in the Herzog & de Meuron expansion. To this end, we’ve repurposed the “street sign” motif used on our new vinyl wall graphics to point either way (which also functions as a nice spacial divider). Each display tower cycles through it’s given exhibitions with a simple sliding transition, exposing the graphics one by one. An interesting side effect of this motion and the high-contrast LCDs has been the illusion of each tower being a ’70s-style mechanical lightbox; I’ve been tempted to supplement it with a soundtrack of quiet creaking.

The system, powered by Sedna Presenter and running on four headless, remotely-accessible Mac Minis directly behind the wall, affords us a lot of flexibility. While our normal exhibitions cycle is a looped After Effects composition, we’re also working on everything from decorative blasts of light and pattern (the screens are blindingly bright enough to bathe almost the entire lobby in color), to live-updating Twitter streams (during parties and special events), to severe weather and fire alerts (complete with a rather terrifying pulsating field of deep red). In fact, this same system is now even powering our pre-show cinema trailers. I’m particularly interested in connecting these to an Arduino’s environmental sensors that would allow us to dynamically change color, brightness, etc. based on everything from temperature to visitor count to time of day — look for more on that soon.

See it in action:

Behind the scenes / Severe weather alert:

 

Installation:

  

Creating a community calendar using Google Apps and WordPress

For Walker Open Field, we wanted a way to collect community submitted events and display them on our site. We have our own calendar and we discussed whether adding the events to our internal Calendar CMS was the best way, or if using an outside calendar solution was the direction to go. In the end, […]

For Walker Open Field, we wanted a way to collect community submitted events and display them on our site. We have our own calendar and we discussed whether adding the events to our internal Calendar CMS was the best way, or if using an outside calendar solution was the direction to go. In the end, we decided to do both, using Google Calendar for community events and our own calendar CMS for Walker-programmed events.

The Open Field website is based on the lovely design work of Andrea Hyde, and the site is built using WordPress, which we use for this blog and a few other portions of our website. WordPress is relatively easy to template once, so it makes for quick development. WordPress also has a load of useful plug-ins and built-in features that saved us a lot of time. Here’s how we used it an put it together:

Collecting Events
To accept event ideas from community members, we used the WordPress Cforms II plugin, which makes it very easy to build otherwise complex forms and process them. You can create workflows with the submissions, but we simply have Cforms submit the form to us over email. A real person (Shaylie) reviews each of the event submissions and adds the details to…

Google Calendar
We use Google’s Calendar app to contain the calendar for the community events. When Shaylie gets the email about a new event, she reviews it, follows up on any conflicts or issues, and then manually adds it to google calendar. We toyed with the idea of using the Calendar API to create a form that would allow users to create events directly in the calendar, but decided against it for two reasons. First, it seemed overly complicated for what we thought would amount to less than 100 events. Secondly, we would still have to review every submission and it would be just as cumbersome to do it after the fact rather than beforehand.

We also use Google Calendar to process our own calendar internal calendar feed. The Walker Calendar can spit out data as XML and ICAL. We have our own proprietary XML format that can be rather complex, but the ICAL format is widely understood and Google Calendar can import it as a subscription.

Getting data out of Google Calendar
We now have two calendars in google calendar: Walker Events and Community Events. Google provides several ways to get data out of google calendar, and the one we use is the ATOM format with a collection of google name-spaced elements. The calendar API is quite robust, but there are a few things worth noting:

  • You must ask for the full feed to get all the date info
  • Make sure you set the time zone, both on the feed request but add it to the events when you link tot hem (using the ctz paramater)
  • Asking for only futureevents and singleevents (as paramaters) makes life easier, since you don’t have to worry about complexities of figuruing out the repeating logic, which is complicated

This is our feed for Open Field Community Events.

Calendar data into WordPress
Since version 2.8, WordPress has included the most excellent SimplePie RSS/ATOM parsing library. As the name would have you believe, it is pretty simple to use. To pull the data out of the Google Calendar items with simplePie, you extend the SimplePie_Item class with some extra methods to get that gd:when data.

Combining two feeds in SimplePie is not hard. By default, SimplePie will sort them by the modified or published date, which in the Google Calendar API is the date the event was edited, not when it happens. Instead, we want to sort them by the gd:date field. There are probably a few ways to do this, but the way that I set up was to simply loop through all the data, put it into an array with the timestamp as the key, and then sort that array by key. Here’s the code:

[php]
<?php

//include the rss/atom feed classes
include_once(ABSPATH . WPINC . ‘/feed.php’);
require_once (ABSPATH . WPINC . ‘/class-feed.php’);

// Get a SimplePie feed object from the specified feed source.
$calFeedsRss = array(
#walker events
‘http://www.google.com/calendar/feeds/95g83qt1nat5k31oqd898bj2ako1phq1%40import.calendar.google.com/public/full?orderby=starttime&ctz=America/Chicago&sortorder=a&max-results=1000&futureevents=true’,

#public events
‘http://www.google.com/calendar/feeds/walkerart.org_cptqutet6ou4odcg6n2mvk4f44%40group.calendar.google.com/public/full?orderby=starttime&ctz=America/Chicago&sortorder=a&max-results=1000&futureevents=true&singleevents=true’
);

$feed = new SimplePie();
$feed->set_item_class(‘SimplePie_Item_Extras’);
$feed->set_feed_url($calFeedsRss);
$feed->set_cache_class(‘WP_Feed_Cache’);
$feed->set_file_class(‘WP_SimplePie_File’);
$feed->set_cache_duration(apply_filters(‘wp_feed_cache_transient_lifetime’, 3600)); //cache things for an hour
$feed->init();
$feed->handle_content_type();

if ( $feed->error() )
printf (‘There was an error while connecting to Feed server, please, try again!’);

$count = 0; // hack, but we’re going to count each loop and use it as a little offset on the sort val
foreach ($feed->get_items() as $item){

if (strtolower($item->get_title()) != ‘walker open field’){
$eventType = ‘walker’;
$related = $item->get_links ( ‘related’ );
$related = $related[0];
if ( strpos($related,’walkerart.org’) === False ){
$related = $item->get_link();
// if it’s a google calendar event, make sure we set the tiem zone
$related .= "&ctz=America%2FChicago";
$eventType = ‘community’;
}

#we offset the actual starttime a little bit in case two events have the same start time, they would overwrite in t he array
$sortVal = $item->get_gcal_starttime(‘U’) + $count;
$myData = array(
‘title’ => $item->get_title(),
‘starttime’ => $item->get_gcal_starttime(‘U’),
‘endtime’ => $item->get_gcal_endtime(‘U’),

‘link’ => $related,
‘eventType’ => $eventType,
‘text’ => $item->get_content(),
‘date’ => $item->get_gcal_starttime(‘U’)
);
$cals[ $sortVal ] = $myData;
}
$count++;
}
//sort the array by keys
ksort($cals);
// $cals now contains all the event info we’ll need

?>
[/php]

Once this is done, you can simply take the $cals array and loop through it in your theme as needed. Parsing the google calendar feeds is not an inexpensive operation, so you may wish to use the Transients API in WordPress to cache this information.

Caveats and Issues
Overall, this approach has worked well for us. We have run into some issues where the Google Calendar ATOM feed would show events that had been deleted. Making sure to set the futureevents and singleevents paramaters fixed this. We also ran into some issues using the signleevents, so we ended up manually creating occurrences for events that would have otherwise had a repeating structure.

What apps and books do you want to see on the #openfield iPads?

As part of the Open Field Toolshed this summer, we are going to have four iPads available for public checkout. With our expanding WiFi coverage and outdoor beer garden, Open Field might just be the perfect place to surf the web. Are there any apps or e-books you’d like to see on our iPads? We’re […]

iPad photo taken with iPhone

As part of the Open Field Toolshed this summer, we are going to have four iPads available for public checkout. With our expanding WiFi coverage and outdoor beer garden, Open Field might just be the perfect place to surf the web.

Are there any apps or e-books you’d like to see on our iPads? We’re got a few in mind already:

If you’ve got specific requests, let us know in the comments or on twitter. No promises, but we’ll see what we can do.

Building the Benches and Binoculars Touchscreen Kiosk

[flickrvideo]http://www.flickr.com/photos/vitaflo/4119139342/[/flickrvideo] For our exhibition Benches and Binoculars, I was asked to create a touchscreen kiosk. The artwork in Benches and Binoculars is hung salon-style, making it impractical to use wall labels on works that are hanging 20 feet up in the air. Many get around this by having a gallery “map” (and our Design dept […]

[flickrvideo]http://www.flickr.com/photos/vitaflo/4119139342/[/flickrvideo]

For our exhibition Benches and Binoculars, I was asked to create a touchscreen kiosk. The artwork in Benches and Binoculars is hung salon-style, making it impractical to use wall labels on works that are hanging 20 feet up in the air. Many get around this by having a gallery “map” (and our Design dept did create these as well for the exhibit), but much like the exhibition itself, we thought it was a good time to “re-imagine” the gallery map.

I had never worked on a touchscreen app before. Sure, I’ve created kiosks here at the Walker but a touchscreen brings some new challenges, as well as some new opportunities. Input is both easier, and more difficult. You just use your hands, but people aren’t always sure how they are supposed to use their hands to perform actions, or even that they can.

Walker Director Olga Viso using the Benches and Binoculars kiosk

Walker Director Olga Viso using the Benches and Binoculars kiosk

As such my main goal when making the kiosk was to keep it simple. Don’t let the interface get in the way of the information. The interface should help facilitate finding the content you want easily. Too many times I’ve seen these types of devices be more about the technology than about the content on them. This meant making the kiosk less “flashy”, but in turn also made it more useful.

In the end the layout was rather simple. The screen has an exact (to the pixel) representation of the artwork hanging on the walls. Moving your hand right and left on the kiosk moved the walls on it left and right. Tapping on an artwork brought up a modal window with a high res image of the object as well as the label text. There is nothing particularly fancy or new about this idea, and there really shouldn’t have been. Much more would have taken away the experience you were there for, namely viewing the artworks on the walls.

As for the technology involved, we decided to use the HP Touchsmart PC for this particular kiosk. It uses an infrared field above the screen to track “touch”. As such you don’t actually have to make physical contact with the screen to activate a touch event, you just have to break the infrared plane.

We decided on the 22″ version because we wanted the machine to be single use. With the way the computer is set up, it’s not all that great at multi-touch as it is. And wanting to keep the device as simple as possible led to wanting to keep usable by one person at a time. There is a larger version of the Touchsmart but any larger than the 22″ and it felt like you were supposed to have more than one person use it at a time, which we wanted to stay away from.

Since we didn’t have to worry about multi use, we had a few more options on what to build the interface with. Most people would probably go the Flash route but for us Flash is usually the choice of last resort. This is for various reasons, not the least of which for me is lack of experience with Flash. But most of what you can do in Flash these days can also be done in the browser, and given that front end interfaces are my forte, that’s where I went.

The interface is just a simple HTML page that dynamically calls ArtsConnectEd for its data. Thankfully, Nate was able to leverage a lot of the work he did on ACE for this which sped up development drastically. Interaction is just built with some jQuery scripts I wrote. All in all it wasn’t all that difficult to get together except for a few snags (isn’t there always some?).

Using the Kiosk.

Using the Kiosk.

One was that I found very early on that interacting with a touchscreen is a lot different from using a mouse. Hit areas are much different since when you press on a screen your finger tends to “roll”. On the first mousedown event, the tip of your finger is in one spot, but as you press, the mouse position shifts lower on the screen as your finger flattens out from pressing into the screen. This means the mouseup event is in a totally different spot, which can cause issues with trying to register a proper click. A problem exists when trying to register a drag event for the same reason. As such I had to program in some “slush” room to compensate for this.

The second issue I had was that of the computer and browser itself. The Touchsmarts, while having a decent CPU were really slow and sluggish in general. I had from the beginning targeted Firefox for the development platform. Mainly because it has many fullscreen kiosk implementations as add ons. But once I loaded up 98 images with all of the CSS drop shadows, transparencies, etc, the entire browser was very sluggish and choppy.

I had read recently that Google Chrome was pushing v4 to be a lot faster and their new beta had just been released for it. Testing it I found that it was about 3 times faster than Firefox. The issue was it had no true kiosk mode. I was in a bind. I had a nice fullscreen kiosk in Firefox that was choppy, and a decent speed browser in Chrome that had no kiosk mode.

After much searching I found that a kiosk patch was in development on the browser. The only issue was patching it into a build. Unfortunately Google’s requirements for building Chrome on Windows is not trivial and I couldn’t find anyone to do it for me. In desperation, I emailed the creator of the patch, Mohamed Mansour, to see if he could build me a binary with his patch in it. Thankfully he came through and was able to offer up a custom build of Chrome with the kiosk mode built in that I could use for the exhibition. It’s worked wonderfully (note, this patch has since been checked into the Google Chrome nightlies).

In the end it turned out better than I thought it would. Chrome was fast enough for me to go back and add in new features like proper acceleration when “throwing” the walls. And the guys in the Walker carpentry shop, especially David Dick, made a beautiful pedestal to install the kiosk in, complete with a very nice black aluminum bezel. I couldn’t be more happy and from the looks of it our visitors are as well. It goes a long way to my (and New Media’s) goal of taking complex technology and making it simple for users, as well as the Walker’s mission of the active engagement of audiences.

You can see more photos in my Flickr set:
http://www.flickr.com/photos/vitaflo/sets/72157622839288542/

Testing time-lapse software

WACTAC has an event next week called Don’t Sleep on It, taking place during Art-a-Whirl. The gist of the event: over the course of 24 hours different groups of artists will transform a gallery space, destroying and re-building the art many times over the period. At the end of the event, they want to show […]

WACTAC has an event next week called Don’t Sleep on It, taking place during Art-a-Whirl. The gist of the event: over the course of 24 hours different groups of artists will transform a gallery space, destroying and re-building the art many times over the period. At the end of the event, they want to show a time-lapse video of the transformation.

Making a time-lapse movie is not hard. While it can be done using a video camera, it’s easier to use a digital still camera. You take a series of images at predefined intervals and stitch them together using software like After Effects, or, even simpler, Quicktime Pro. We’re using a Canon G10 and the Canon Remote Capture software to take photos every 10 seconds. I set up a test in our office just to make sure it would run correctly and without incident. Here’s the result:

[flickrvideo width="500" height="333"]http://www.flickr.com/photos/walkerart/3510291897/[/flickrvideo]

Taking one photo every 10 seconds over 24 hours generates 8640 frames, creating a video just under 10 minutes long. We may end up dropping every other frame to create a shorter movie. The nice thing about using a digital still camera for this is that it produces a video well beyond even 1080P HD resolution.

In the above video, you can enjoy watching me look up documentation on Django, read a book about symfony, and my be mesmerized by a screensaver.

Hacking the iPod Touch

Shelley Bernstein over at the Brooklyn Museum has posted some details on their recent hack of the iPod Touch to use in the gallery. Shelly hasn’t posted all the details on the blog, but if you contact her, she will be happy to link you up to the juice. If you’re looking to do something […]

Shelley Bernstein over at the Brooklyn Museum has posted some details on their recent hack of the iPod Touch to use in the gallery. Shelly hasn’t posted all the details on the blog, but if you contact her, she will be happy to link you up to the juice. If you’re looking to do something like this in a gallery, it’s a great head-start.

Photo by Shelly Bernstein

Photo by Shelly Bernstein

Using an iPod touch as a video display in a gallery is a really great idea for a number of reasons:

  • iPods are cheap (relatively).
  • The screens are offer a high resolution and an acceptable size.
  • They’re small and unobtrusive, so they have the potential to not irritate curators who dislike too much stuff near the art. 
  • The playback hardware is contained right in the unit, so no need for extra wires to a DVD player or other playback device.
  • They have WiFi, so there is potential for remote administration, updating, and connecting to content on the Net. 
  • If you get a first generation, they’re hackable. The second generation will probably be hackable soon. Thanks to things like Cydia, you can install SSH and all kinds of useful goodies.
  • The interface is simple. Though I’m not sure if my grandma would know how to interact with it. 

The only real downside to the IPod touch is the cord comes out a weird angle, making the mounting and display a little tricky.

A preview conversation with The Builders Association

The Performing Arts department has asked me to do an overnight review of The Builders Association production, Continuous City, this Friday. In preparation, I had the opportunity to sneak into the green room and speak with Claire Hallerau, Managing Producer for the Builders Association. I’ve re-assembled our conversation here.   Super Vision was a look into […]

Photo by Eamon Lochte-Phelps

Photo by Eamon Lochte-Phelps

The Performing Arts department has asked me to do an overnight review of The Builders Association production, Continuous City, this Friday. In preparation, I had the opportunity to sneak into the green room and speak with Claire Hallerau, Managing Producer for the Builders Association. I’ve re-assembled our conversation here.

 
Super Vision was a look into the side effects of our surveillance society, a digression into an Orwellian future. Contiuous City  seems to embrace a more hopeful future, with people using the technical tools on their own.

Super Vision wasn’t trying to be Orwellian, it was more about observation, but it was a grim picture. This show has an effort to be hopeful, and the decision to hire writer Harry Sinclair  was a way to make it ligher, more imaginative. Harry is a writer, director, and performer from New Zealand, writing on Lord of the Rings, amongst other films, and we knew he could help to bring a more hopeful narrative.

Continuous City is very much about relationships: How the father connects with daughter, Sam. The only way they know to connect is by video conferencing. In fact, they have talk more than they would if they were at home. It’s good and bad.

[This a really interesting paradox, backed up by the latest study by the Pew Internet & American Life Project: "The survey shows that these high rates of technology ownership affect family life. In particular, cell phones allow family members to stay more regularly in touch even when they are not physically together. Moreover, many members of married-with-children households view material online together."

 
In terms of the set design, The Builders Association always seems to put people normally relegated to the sound booth or the back of the theater right on stage. Can you talk about that choice a bit?

Photos by Eamon Lochte-Phelps

Photo by Eamon Lochte-Phelps

The video performers have been on stage, because they are part of the show. If we could put the sound designer on the stage, we would. We really like to have everyone that’s part of it out there on the stage. In this show, we take it one more step, our video designer is not just on stage, but really interacting with the characters. He is a character himself.
 

What kind of software do you use to choreograph the performance, projection, music, etc? 

We use Watchout to do everything. We spent a lot of time customizing things to make it work for the show. I don’t know all the sub-software that might be used, but it’s mostly Watchout.

 

You have a large tour scheduled for Continuous City, as you did with Super Vision. How does a performance like that evolve over time, as you move around the globe doing performances?

As the show travels, the setting changes to match the city. Sam, and her nanny, Deb, always live in the city where the show is taking place. They’re curious about their surroundings. In every city, the things that Sam learns about the surrounding community will change and expand. 

Another way is that the xubu website will continue to invite people to add their video stories, and the pool of the video we use in the performance will continue to expand.

Science Museum of Minnesota’s Rain Table

Our friend Byran Kennedy posted some documentation of a project he’s been working on called Rain Table: [flickrvideo]http://www.flickr.com/photos/bryankennedy/2782661202/in/set-72157606861451653/[/flickrvideo] Eventually the table will be part of an exhibit called Water: H20 = Life, which the Science Museum is working on with the American Museum of Natural History. Unlike some other tables we’ve profiled that seem to […]

Our friend Byran Kennedy posted some documentation of a project he’s been working on called Rain Table:

[flickrvideo]http://www.flickr.com/photos/bryankennedy/2782661202/in/set-72157606861451653/[/flickrvideo]

Eventually the table will be part of an exhibit called Water: H20 = Life, which the Science Museum is working on with the American Museum of Natural History. Unlike some other tables we’ve profiled that seem to exist just for the sake of the cool-factor, this one really does look like a table is a great solution to interaction. This is especially true as the distribution of water becomes a more volatile issue due to global warming and changing weather patterns.

Great War digital tables

While preparing a presentation on multi-user digital tables, I was directed to the Great War tables at the National World War One Museum, Kansas City, MO. Produced by Second Story, these tables are just one part of the museum’s use of interactive technology to tell the story of WWI. The two tables, each 26-feet long, […]

WWI digital tablesWWI digital tablesWWI digital tables

While preparing a presentation on multi-user digital tables, I was directed to the Great War tables at the National World War One Museum, Kansas City, MO. Produced by Second Story, these tables are just one part of the museum’s use of interactive technology to tell the story of WWI. The two tables, each 26-feet long, feature “individual interactives where visitors can: learn about military technologies through 3D reconstructions; compare the arsenals, artillery and airplanes used by the combatant armies; watch archival video footage and browse photographic collections; and create their own propaganda posters and war memorials that they can email to themselves and others. At any time, museum staff can launch the tables into a group based interactive experience where up to 24 visitors engage in a series of interactive challenges that parallel the military, political and civilian aspects of the war.” For more on the tables, see the Second Story page. And don’t miss the Quicktime demo.

New Media Ethics, Spark Festival, Graffiti Research Lab

There are several events in the Twin Cities this week that might be of interest to readers of this blog: Minnesota Public Radio is hosting a discussion tonight on New Media journalism ethics, moderated by Dan Gillmor. It looks like all the tickets are gone, but Metroblogging Minneapolis is promising to live blog it. I’ll […]

Spark Logo BannerThere are several events in the Twin Cities this week that might be of interest to readers of this blog:

Next