Crowd-sourced Time Lapse Photography

This project uses an inexpensive sign and some code to make a crowd-sourced time lapse image station that can go anywhere one can install a sign. We (Nerds for Nature) built this for use on Mount Diablo State Park, east of San Francisco, California. Our goal is to enlist hikers in documenting landscape changes after a wildfire in fall 2013.

Creating the signs and monitoring processes can be a bit tricky. We lucked out with the right combo of carpenters, coders, designers, and land managers. Repeating exactly what we did would require at least some carpentry and coding skills. We're publishing all our methods, designs, and code in case anyone wants to try this themselves, but your approach will almost certainly be different based on local conditions and the kinds of collaborators you can recruit (unless you're some kind of magical coding carpenter-designer who owns private land visited by lots of people with smartphones.) We've tried to describe some alternative solutions to some parts, but they generally involve substituting technical expertise with labor.

With that in mind, onward!

Summer 2016 note: Due to changes in Instagram's API, it is no longer possible to harvest images by hashtag from Instagram. So this project will work only with Flickr and Twitter.

Step 1: Ask Yourself These Questions

This is a pretty simple concept, but making it happen isn't free or free of effort! We recommend asking yourself a few questions before you begin:

• What's your goal?
  
  • Awareness and general view of change? Great!
  • Spectrographic analysis of photosynthesis? That's hard, particularly given the varied results you're going to get from social media. Deriving quantitative results from the photos was not one of our goals, so we won't cover that here. If that's what you want to do, it will restrict the kind of photos you can use, and might require more participation to get enough photos to subsample adequately.
• Do you need permits to install a sign? (We needed one from CEQA.)
• Do you have someone to keep an eye on this project?
  • Watch the feed for photos of Godzilla!
  • Watch the signs themselves for vandalism.
• Do you know what a brad nailer is, or does that just make you laugh inappropriately? We benefited by having a member of our group well-versed in carpentry and what one of our more digitally-inclined members refers to as "atom manipulation." You should either know how to use basic power tools or recruit someone who does.
• Can you set up a cron job to run a Ruby script every day? If that sounds like Aramaic to you, you'll probably need to enlist the help of a programmer or someone else who can do these things, though there might be less-techy solutions if you have someone with the time to do the manual labor of picture gathering and assembly.

If you answered all those questions, and you still want to do this, off you go!

Step 2: Choose Your Sites

Here are some variables we considered:

• Potential for landscape change:
  • We looked for places that burned and had obvious potential for change in vegetation
  • We also looked for foreground, mid-ground, and background (to compose a pleasing picture)
• Consider accessibility:
  • We made sure at least one of our sites was ADA accessible, and all sites were along frequently visited trails.
• Cellular reception
  • Participants are going to try to post their photos immediately, which is a good thing. If you're relying on them to remember to do so when they get back to somewhere with cell, you're going to lose a lot of potential participants. If you have to install signs in places without cell reception, you might want to invest more in on-sign instructions, or in on-site training for potential participants.
• Some sites might be "lure sites" at a trail head, while others are more remote but more interesting
• Are there existing posts you can use? What's the ground like (i.e. how easy will it be to install a post?)

As you can see in the photo, we used a tripod and some simple mockups to test each site based on an acceptable height for the sign. Accessibility requirements meant the bracket couldn't be higher than 48" off the ground, and had to be a minimum distance from the ground as well. Your requirements might be different based on the property owner and your own goals, so make sure you check with the folks who manage the land for any special rules and consider your audience and their physical capabilities.

Step 3: Choose Your Hashtags

The hashtag for each sign is important because this is how people identify their photo for use in the project. This is way easier than asking them to email the photo, or upload it later, etc. The hashtag allows for instant participation.

Be sure to check on Twitter, Instagram, and other social for existing uses of the tags you want. You never know what subculture might already be using your favorite park or site hashtag.

Make sure your tags are unique, memorable, and not too long. They should obviously uniquely identify each location, but it's also good if participants can recall them later, and don't have to spend forever typing them in when they post their photo.

If you know a social media expert, or, uh, someone under the age of 40, have them give your tags a look over. If you are a social media expert and/or under the age of 40, do this anyway! Your idea of a good tag might not be universal.

Step 4: Design Your Sign

We have a template editable in InkScape or Adobe Illustrator. You should download it and customize away!

Note: The template still has the Instagram logo on it and mentions IG in the text, but changes in Instagram's API mean that we can no longer harvest photos from their service.

We had our first signs printed on aluminum at Kinko's. These are the same kinds of signs that realtors use for home sale signs. There are limited sizes available at Kinko's. We made our signs 8 inches wide to get three off of one 24" wide sheet. The cost was about $50. These latest about a year, but had totally fallen apart at that point.

Based on what we learned in working with Stanislaus National Forest on their version of the project, we did another round of signs for Diablo and got them printed at SafTlite in Modesto, CA. For this round, we also replaced the solid redwood backing (which split over time) with 3/4" marine-grade plywood.

In our signs, we needed to comply with ADA standards, so we stuck with minimum type sizes (36 point) and high contrast.

If you design your sign yourself, keep in mind that the aluminum printing process can't handle photos or tiny print.

And keep it short! Don't fill the signs with words no one will read!

Here are the basics of Kinko's sign printing options if you you want to go that route. SafTLite does ship, though, so definitely consider going with them!

Step 5: Make the Signs

Note: One of our organizers used to be a pro cabinetmaker. He has lots of tools and some skills. If you are not someone like that, try to find someone like that and make them do this part! Many parks have crews with lots of sign-making skills. Of course, short of that, plunge ahead and do your best. This is a pretty easy project if you are even slightly handy.

If you can sink your post into the ground, great. That's best and what we did in our main pilot at Mount Diablo State Park.

For a shorter installation (such as for our demonstration booth at Maker Faire 2014), we made concrete bucket-bases to sit on the ground. No installation fuss, but the signs can also get moved and then you lose consistency of photos. We'll describe both processes here.

In either case, since we were attaching angle brackets for camera positioning directly to the edges of the signs, we needed to mount the thin aluminum to a substrate that we could screw into on the edge.

A note on materials: For the Diablo project, we used 1x12 sustainably-harvested redwood for its weather resistance and decent screw-holding ability. But we had trouble with splitting. When we rebuilt the signs, we bought 3/4" marine-grade plywood from a local fine lumber outlet (MacBeath in Berkeley). There might also be plastic composite material with good edge-screw-holding properties, but we haven't found it. (Typical plastic lumber is poor on that count, and cheap exterior-grade plywood often has voids that also make it a poor candidate for this purpose.)

Here's a bill of materials for our three Diablo signs.

Prepare sign boards and posts

First, cut your sign blanks to size with a chopsaw, table saw, or circular saw.

Since we were mounting the signs to fence T posts, which have big teeth on the front, we put a 3/8 by 3/8 groove down the center of the back of the sign with a table saw. This could also be done with a router or, in a pinch, a circular saw. Or you might find a better way. We had problems with our redwood signs splitting, partly due to these grooves. Marine-grade plywood would not have this problem.

We made our blanks large enough to have a 1.75" margin where the bolts went through wood only. So the final wood size was 11.5" wide by 21.5" tall.

Some tips:

• Groove the back of the plywood to account for the T post "teeth", or use all-weather glue to attach two strips to the back of the sign, with a gap between them the width of the teeth.
• Drill mounting holes in T posts ahead of time - this could be very difficult to do on-site. Since your hole placement is likely to vary between signs, number each sign and post and match them up on site. Drilling in steel posts is a pain. Use a corded drill to avoid killing your cordless right away.

Our location didn't allow it, but if yours does, a sturdy and long-lived method of installation is by mounting the sign to a 4x4 wood post in a concrete-filled hole. This is preferred to our T post method, and that's how similar signs went in at Stanislaus National Forest.

Prepare angle brackets (used for consistent camera positioning):

• We used 3" angle brackets.
• Paint an easily visible color with spray paint formulated for metal.
• Don't attach the angle brackets to the sign yet! Do that on-site for proper placement.

Temporary bucket signs

Here's a bill of materials for three temporary bucket signs. The main difference is that you want a shorter sign post (48" vs. 72") and you need some buckets and cement.

There are other ways to do this, like store-bought brackets to hold a 4 x 4 post, but we have a woodworker among us, so he made some simple sleeves sized to hold cheap four-foot light-duty sign posts, then mounted to plywood cut to fit in the bottom of the bucket.

We also attached larger plywood squares to the bottoms of the buckets to allow the signs to be staked down, like in a lawn area. This would make them less prone to being rotated or knocked over. In practice, though, the 50-pound bases were heavy enough to keep the signs from getting jostled at Maker Faire, where we installed them for two days.

Making the wooden sleeves is the hardest part of this project. You'll sink them in concrete, so you want them to be exactly the right size! We cut scrap wood to size and nailed it all together with a pneumatic brad nailer, then attached it to the plywood base, dropped it in the bucket, then mixed and shoveled in the concrete according to the manufacturer's instructions. Just be careful to keep the sleeve plumb.

The concrete took about 24 hours to really cure. Once it did, the sleeves and buckets were really solid. And heavy. Bring a dolly or something to move them into position.

For the signs themselves, since they wouldn't be in the weather, we used whatever scrap 3/4" plywood we had around (in our case, furniture-grade pre-finished maple and cherry), but we included a piece of 3/4 ply in the bill of materials assuming you are starting from scratch.

Step 6: Set Up Your Website

Displaying the results of the project on the web requires communicating with the various social media sites you're using. There are a number of ways to do this requiring various degrees of technical know-how, but they all require a basic knowledge of HTML. A lot of this info is covered in the github repository where we're sharing code and other digital assets for this project, but this is the narrative version.

1. Use a widget

Most social media websites have numerous kinds of HTML widgets you can use to display media using a particular tag, either provided by the website itself (e.g. Twitter's embeddable timelines) or by third parties (Google "service X widget" and you'll find plenty). This is a no fuss strategy, but it wasn't one we used b/c we wanted photos from multiple services displayed in single slideshows, and we didn't find a widget that did that, so we built our own.

2. Use our jQuery plugin (changeomatic.js)

We wrote a little wrapper around the excellent cycle2 slideshow plugin that does what we need... at least for Flickr and Instagram. It will also fetch data from a Google Spreadsheet if you're going to go that route (see the next step). Since it's a wrapper it does have quite a few dependencies you will need to set up, but once you do, getting it to work is really just a matter of copying our example HTML file and filling in your API keys. If you don't know what an API key is, you have a little extra work ahead of you, but basically they're sort of like special names a computer program uses to identify itself when getting data from a third party service. That way, say, Twitter knows who's asking for what, and whether they're abiding by the Terms of Service. Here's where you can get this info from the services we used:

• Twitter: https://apps.twitter.com
• Flickr: https://www.flickr.com/services/apps/create/
• Instagram: http://instagram.com/developer/clients/manage/

Step 7: (Optional) Store Your Data in a Google Spreadsheet

One problem with querying social media APIs directly is that you can't filter the results, so if people hijack your tag and start using it to tag inappropriate photos, those inappropriate photos could show up in your slideshows, on your website, which is probably not what you want. We only ran into this problem after a flurry of social media buzz and frankly only got a handful of inappropriate images, but one is enough.

Another major problem is that as of this writing, it's impossible to query Twitter's search API from a browser without some kind of server-based proxy (i.e. some piece of software running on your web server that your Javascript talks to and that in turn talks to Twitter), because most modern browsers don't like it when Javascript tries to talk to servers that you aren't connected to, unless those servers declare that that's ok, and Twitter's do not. All that gobbledyguck just means we weren't able to include Twitter photos in our slideshows without setting up some kind of web service, which we didn't want to do.

Our solution to both these problems was to compile all the metadata about the use of our tags on social media into a Google Spreadsheet, and then have our slideshow talk to that instead of directly to the social media services. This allowed us to a) filter out the stuff we didn't want, and b) include Twitter, b/c our changeomatic.js plugin can talk to Google Spreadsheets.

If you want to replicate our approach, here's what to do

1. Make a Google Spreadsheet
   
   1. Paste in the column headers from our spreadsheet:
      1. provider: name of the social media provider
      2. tag: tag used by the participant
      3. datetime:ISO 8601 time stamp for when the photo was added. Ideally this would be capture time, but for most social media services only the time of addition to that service is available.
      4. username: name of the participant
      5. usable_tag: the tag according to you. This is where the filtering happens. If the tag is the same as usable_tag, changeomatic will show the image. You need to update this column, so set it to "spam" or something for photos you don't like. We try to just enter the reason we didn't want the image. We also use to to enter the write tag if someone added a relevant photo but used the wrong tag.
      6. image_url: URL of the image in its maximum size
      7. image_url_s: URL of the image in small size
      8. image_url_m: URL of the image in medium size
      9. license: some representation of the license under which the photo was released. Assume no license if blank
      10. title: title of the photo (we use the body of a tweet for Twitter photos)
   2. Publish it to the web (this is required for changeomatic to read your spreadsheet)
   3. Make sure it is editable by everyone who needs to, including the user whose login info is going into the harvesting script
   4. If you have multiple sheets (e.g. extra ones to tabulate stats), make sure the one with all these columns is named "Data"
2. Set up the harvesting script to run regularly
   1. Download fireslurp.rb and make sure you've installed all the dependencies (installation instructions are at https://github.com/nerdsfornature/changebrackets, but they assume you're comfortable at the command line and know how to install Ruby and RubyGems). The github repo contains basic usage examples too.
   2. Use cron, launchd, or the scheduling utility of your choice to run this script regularly from a computer connected to the Internet. At first, we ran it nightly from one of our personal computers, but then we figured out how to deploy the script to a cloud service called Heroku, which has a free tier and a scheduler that work great for this purpose.
3. Check the spreadsheet regularly and approve new photos by filling in the usable_tag column. fireslurp.rb can be configured to do this automatically with the --auto-approve flag, which means you would only have to blacklist inappropriate images in the spreadsheet, but you run the risk of displaying them on your site until you discover them.

If you haven't already run away screaming, there is a less technical alternative: do everything in Step 1, but update the spreadsheet by hand, i.e. have a human regularly search the social media services and compile the info the spreadsheet needs. This would totally work, but would be radically labor intensive. Might be a good punishment for high school misbehavior.

Step 8: Test the System!

Take pictures from all of your planned stand locations and try to post them from the stands (b/c this is what people are going to do). Post some spammy pics and see how your filtering strategy (or lack thereof) actually works. (You can always delete the photos from your account before you do your PR.)

Whatever method you're using to display the images on the web and/or harvest information about them beforehand, it's important that you actually test the system before announcing it to the world.

Step 9: Install the Signs

Install the Post

For T-posts, use a post driver -- those pipes with handles that are way easier than sledge hammers! Try to borrow one unless you're planing to do this a lot. Bring a level or plumb bob to make sure your signs go in straight, and be prepared for the post to twist as you drive it into the ground. Try to minimize twist, of course, but it's probably going to happen.

Attach the Sign

This basically just means screwing the sign onto the post, but make sure you attach it at a height that will allow you to attach your bracket correctly.

Attach the Bracket

Once the signs and posts are in, now's the time to actually attach the angle bracket to the edge of your sign. We waited until we were on site to do that to make sure we got the right shot. Make sure there's someone present who cares about angles and the images you'll get, because very small changes in the position of the bracket will produce very different images. We were able to screw some of the brackets in at slight angles to get the right image, and sometimes we attached the bracket to the side of the sign to get the right angle. Keep in mind that people may have trouble finding your bracket if it doesn't look like the picture on the sign.

Step 10: Promotion

Just posting the signs is great, but don't rely on serendipity to get people to use them.

We recommend contacting hiking groups, trail clubs, and other interested people to seek out the signs and post. Advertise your project on your blog, Twitter, and/or Facebook pages. Email friends! Organize a hike to the signs, and contact local media!

We got lucky and had a tweet go viral, which is probably why you're reading this Instructable!

But even before that, our partners at California State Parks got the word out through the Mount Diablo Interpretive Association and Save Mount Diablo, two nonprofits who work on and for the mountain. We also worked our personal connections to get coverage on a local public radio station and even got lucky with stories on Grist.org and one of the major network TV news stations in San Francisco.

But local hiking meetup groups, nonprofits, park staff and associations, and volunteer organizations are going to be key sources of repeat visitors, who are most likely to get you a steady stream of photos.

Step 11: Off & Running + Watch the Site and the Signs!

Are the signs still there? Go visit! Use your own signs!

Are people posting? If not, see step 10!

Are they posting real data (the right images)? Monitor tag usages. If you are seeing misuse, consider using the harvesting script and spreadsheet so you can nix spam images.

If you have the harvesting script running to a Google Doc, you need to whitelist photos periodically. Daily if you can, depending on how often people are posting.

Step 12: Download Images and Make a Timelapse Movie

Before getting into the technical craziness, we should mention that almost any decent movie editing software (e.g. iMovie) and a lot of photo management software (e.g. Picasa, iMovie) will let you create a slideshow movie from a set of photos, so a very simple, non-technical solution would be download all your photos and use one of these packages to do the heavy lifting.

We, of course, enjoy lifting heavy metaphors, for reasons that remain unclear even to us, so we used command-line tools like ImageMagick and some custom software we wrote using a computer vision toolkit called OpenCV. If you're interested in doing it our way, you'll need to use our moviemaker.rb script available in our github repo. It assumes you're storing your data in a Google Spreadsheet, downloads all the images referenced there, realigns them using TimeLapser (our custom alignment script), and makes a simple animated GIF using ImageMagick's convert command. Basic setup and usage is available on the README.

If you aren't using a Google Spreadsheet, we'd recommend looking into iMovie or something like that, but you could also read through moviemaker.rb and take the system calls that you need and use them individually.

Sam Droege, the originator of the whole angle-bracket idea, also has a nice tutorial on using PtGUI to do all this using a graphical user interface. The downsides are that PtGUI is not free, and the whole process is less automatable.