Adam Gould is a Web Technologist at Jamestown Community College who presented today on social media-driven digital signage/billboards.
Adam created digital signage that was able to be displayed and customized on all of Jamestown Community College’s four campuses as well as the different departments within these campuses. This allows the system to run on one admin-side. The slides run on different transition times, with the main pictures displaying longer than smaller sections like tweets or weather. These display on digital monitors throughout JCC’s campuses (but not on the website right now).
Motivations
JCC’s old signage system was manually managed. One person was going in and updating the posters in there and the content was becoming stagnant or delayed. Social media was already posting events, posters, highlights, sports games, student activities so why not tap into this with their billboards?
Solution
Use low-cost Raspberry Pi hardware to create custom solution that taps into the social media channels for content on these posters. Different displays can be served based on where the poster is being displayed. Content is fetched from a rake tasks, scheduled with a cron job. This pulls from Facebook, Twitter, Instagram, Google calendars and JCC calendars (in iCal format) and Wunderground weather. This system crops and scales images correctly and stores posts in consistent format.
An admin side was created so that Adam can add social media accounts and create a screen based on what channels want to be pushed to a poster specific to where it will be displayed on one of four of JCC’s campuses.
Client Side
Different areas of the poster can be changed based on what kinds of social channels need to be displayed. Different areas on the client side of the site are run by ES6/ECMAScript 2015, React and Flux.
Server Side
Ruby on Rails with the MVC web application framework. Mainly excists to serve REST endpoints and serves admin side as well.
The hardware that Adam is using is Raspberry Pi. It is a series of credit card-sized single-board computers, and runs Raspbian, modified version of Debian Linux. The cost is very budget friendly, around $35.
Challenges Faced
Smooth animation was the first challenge. Animation were in CSS3 instead of jQuery. This was considerably faster than jQuery because they can take advantage of the GPU (use CSS property translateX) and browser choice (they settled on Epiphany but also tried Firefox (Iceweasel if you run it on Debian) and other webkit-based browsers. Another issue around animation was not knowing how many sliders would need to be used ahead of time, so they auto-generated CSS on-the-fly with JS, append to <head>.
Another issue was picture cropping. Because they wanted to fit the pictures into landscape orientation to fit into each block, Adam originally anchored the images to the center and that would sometimes cut heads off in photos. So instead Adam found a program called Thumbor which detects faces and features. Thumbor either identifies faces or find our what is the most interesting part of the image and crops around that.
To-Do/Upcoming Issues
Auto-cropping still needs some work with images that contain text. Right now, Adam tries to ask content staff to crop photos in a way that features text. Adam also wants to smooth out the animation and work with Raspbian to render emojis. Videos also do not play within this poster just yet.
The Admin Side
In the admin side, Adam can follow certain hashtags (and review tweets before they are approved….these are pulled in and displayed in chronological order).