Overlook Park Bird Sightings Digital Signage System

by Jason Green, Digital Communications Manager

Morgan Falls Overlook Park in Sandy Springs is one of the best places to bird watch in North Georgia. Its mix of habitats and proximity to urban metro-Atlanta make it a favorite spot for local birdwatchers. Many of these birdwatchers report the birds they see using the eBird phone app.

When I first discovered eBird's Overlook Park bird sighting data more than a decade ago, I was immediately reminded of the bird sighting boards that I encountered as a young birdwatcher.

Fig 1.  A traditional bird sightings board, NWT Cley Marshes by Pauline E, CC BY-SA 2.0, via Wikimedia Commons

These boards captured my imagination—it was exciting to discover what species were in the area and to know that there was a possibility for me to spot them too! 

While moving the function of a traditional bird sightings white board to a digital experience enables all kinds of opportunities for analyzing sighting data for academic and scientific purposes, the element of public discoverability is lost. The hundreds of thousands of people that visit Overlook Park each year are unaware of the birdwatching activity that is occurring in the park. By hiding bird sightings on the personal devices in a birdwatchers' pockets, we have taken away the opportunity for children to be inspired in the same way I that I was.

Over the last decade, I've often considered what it would take to recreate the traditional bird sighting board experience for park visitors using the bird sighting data that birdwatchers in our community are already reporting digitally. It turns out, quite a lot!

Creating a Digital Bird Sightings Board

Our digital bird sightings board utilizes commercial digital signage hardware paired with a proprietary data processing application developed by the City's Digital Development Team.

Hardware

The first item we needed was a digital signage kiosk connected to the internet. The City already operates a digital signage network that advertises events happening in Sandy Springs, so adding a kiosk in Overlook Park was relatively simple for us. We use 55" Samsung commercial exterior displays in Armaguard enclosures which operate reliably through Georgia's hot summers. While the functionality of our bird sighting system could happily operate on a commercial grade 4G hotspot designed for high temperature environments like the Cradlepoint units we use in SSPD squad cars, the City's IT department recently installed fiber at Overlook Park for the security cameras, so we were able to utilize that for internet connectivity. The final piece of equipment needed is a digital signage. The City's digital signage network utilizes Navori, so a Navori StiX 3700 is perfect for this application.

Software

With the hardware in place, the real challenge began. We needed to devise a way to retrieve bird sighting data from eBird and provide it to the Navori digital signage player in a format it would understand. Fortunately, the City maintains a proprietary digital information system, the Sandy Springs Unified Platform which was developed to ingest data, normalize it and share it with other systems. The City's Digital Development Team set about creating an application in Unified Platform that could download eBird data, process it and then reference it in a custom XML file structured to be compatible with Navori.

Let's take a look at our process and some of the roadblocks we had to overcome.

Getting the Data

The first step is to gain access to the eBird data. Fortunately, the folks at Cornell Lab that maintain eBird make this a breeze. We simply set up a free eBird account and then headed over to their eBird Data Access page to obtain our API keys. The eBird API 2.0 documentation is extensive so we had a good idea of the data structure going into the project.

Prototyping the Product

Even though end game was to get the bird sightings on a digital sign, we began by developing a webpage-based prototype in React—the programming language that we used to build this website. Prototyping in React allowed us to familiarize ourselves with the eBird API without having to deal with the complexities and challenges of getting the data to display on digital signage.

We were quickly able to develop a webpage that initiated an API call to eBird on load and returned recent sighting data which we styled with CSS.

Fig 2.  The basic prototype layout we created populated with data provided via an eBird API call.

Challenge #1 - Processing Images

If you visit any species page on eBird.org, you'll be presented with a fantastic image that is a perfect representation of the bird in question. However, this obviously carefully curated image does not seem to be available via the eBird API. Instead, the API references a vast database of user generated images, some of which are phenomenal, and other of which are... well, let's just say they lack a certain professional flare!

Fig 3.  The curated image on the Tufted Titmouse eBird species page is far more representative of the species than a random user generated image available via the eBird API.

This creates a challenge that goes beyond simple aesthetics. We experienced an instance where a photo of mallard ducklings was returned as the image rather than a photo of an adult mallard. Cute, but hardly helpful for identifying the species. More commonly, as in the example image above, the photos were simply low quality to the point that distinguishing features of the species become unrecognizable.

There is a crowdsourced image ranking system within eBird. So, we tried limiting our API call to only return results that have been highly ranked. The problem with this however, is that crowdsourcing this function is clearly not working as intended. And you can imagine why. Who is going to rank a photo of cute ducklings as poor?

To help improve the quality of the returned images, we kept the ranking filter in place but added an aspect ratio filter after it to select images as close to a 3:2 landscape orientation aspect ratio as possible. We discovered that professional bird photographers tend to photography birds in a landscape orientation, so eliminating a portrait-oriented photos definitely improved the quality of the algorithmically selected image.

As a final touch, instead of using the center of the image as a focal point and cropping to a standardized aspect ratio based on that, we instead weighted the image slightly higher than the center. This is because in close up shots, the head of a bird typically sits closer to the top edge of a photograph than the bottom edge.

This image selection problem could be solved in short order if eBird would make their curated species image available via the API. We have reached out to them with this request, and if it becomes available, we would switch the image to that data point.

Developing the Application

With the React based code working well, it was time to begin developing a PHP application within the Sandy Springs Unified Platform. We scripted the application to make an API call to the eBird server for recent Overlook Park bird sightings. The application then takes the data, reformats it to be compatible with our digital signage and places it in an XML file on the Unified Platform server. A cron job was created to run the application once per hour—if it finds new data, the application will rewrite the XML file.

We took the same image processing logic from the React prototype and recreated it in PHP. At first, we tried adding image references in the XML file directly to the images hosted on eBirds servers. However, we ran into caching issues with the images.

Challenge #2 - Caching Issues with Images

When new bird sightings were reported, the signage had issues pulling new images due to the image URLs not changing. In order to overcome this issue, we decided to modify the application to download a copy of sighted bird images and store them temporarily on the Unified Platform server. We then referenced them in the XML file using a "cache-buster" which is simply a randomized code appended to the end of the image URL. When the application runs again, it deletes the previously used images from the server.

Going Live on Digital Signage

At this point, we had an XML file sitting on our server containing recent bird sightings. Mission accomplished! From there it was simply a matter of adding a data feed to Navori, designing a visually engaging template and hooking up all the data fields. We pushed the final product live, and everything worked perfectly! That was until we moved our bird sighting application from our development server to our production server...

Challenge #3 - Server Caching

Our production server is running Varnish Cache to speed up content delivery. The problem with this is that the XML file was getting cached and Navori was not able to access the latest version. To solve this issue, we created a script to redirect inbound traffic looking for a particular URL to the XML file path with a cache-buster appended to the end. It took a couple of attempts to pull this off successfully, but we got there in the end. 

Final Thoughts

We could not be more excited about the outcome of this project! We were able to recreate the accessibility of the traditional bird sightings boards but in a modern and visually engaging manner. Will it inspire a child to take up a lifelong ornithological hobby? Only time will tell. But it will certainly make the birds that call Morgan Falls Overlook Park home more discoverable to the citizens who enjoy this beautiful park.

------

Project Team

Project Architect: Jason Green

Lead Developer: Charles Julian

Contributing Developers: Stephen Pennell, Felipe Barone

UX and Front-End Design: Jason Green

Creative Manager: Sarah Wilson