Roll Your Own Digital Signage
/Last fall, I was lucky to have an interesting problem: our newly renovated learning space included eight 42" monitors, each located above a "laptop touchdown station" where students could plug in to collaborate, practice presentations, etc. The challenge was deciding what to show on these screens when students were not plugged in.
After researching commercial digital signage solutions, we decided that there has to be a better (less expensive) way to do this on our own. This post will outline what we did to create a social and dynamic digital signage solution using HTML, CSS, and a bit of javascript. While I image that "what we did" will be pretty specific to our needs at the time, my hope is that some of the ideas shared in this post will be helpful to others down the road.
To start, let's talk about the hardware:
- The monitor we went with was the NEC V422 because it had sound, accepted a variety of input types, and had scheduling capabilities to turn on and off automatically at specified times of day.
- Behind each monitor was an electrical outlet, an ethernet port, and an HDMI port. The HDMI port worked simply as a local connection for students to plug into that station. It only ran one foot down the wall to a second input plate above the counter.
- Connected to the back of each monitor via VGA was a simple NComputing L-Series virtual PC. These boxes were connected to our network via the ethernet jack and were the necessary link to make our digital signage work.
- On the other end of the network connection was obviously a server running the virtual PC installations.
That was about all the hardware we needed to make this thing work. The rest of the work was in the software. Here's what happened on each:
- My network admin setup the NComputing devices to automatically restart, login to the network, and open Chrome in full-screen mode every night. Since I didn't do any of this work I can't provide much detail beyond telling you that it worked. Of course, there were times when a particular device lagged or didn't work properly but the fix was usually as easy as restarting the individual box manually.
- We set http://sign.nilesnewtech.org as the homepage in Chrome for each of these setups so that it would always open to our signage webpage.
- We then set the timer on each monitor to turn on at 7am and turn off at 4pm. Every morning, when the students came in, the signage would be on every screen. If students wanted to "take over" a monitor locally to use it as an external monitor, they simply changed inputs and plugged in their laptop via HDMI.
Once we had monitors connected to virtual PCs that automatically opened a webpage every night, our next step was to design and code a webpage with some interesting content.
When designing the site, I knew that I didn't want to create anything that would require much future updating through the backend. In other words, if I had to go back through the HTML every time I wanted to make a change, I knew this solution would fail. I don't have time to spend my day in code.
With this in mind, I started looking for javascript solutions that would take advantage of APIs to pull content from other sources like GoogleDocs, Twitter, or Flickr. By taking advantage of these services, I was able to create a single webpage that dynamically pulls content from these services throughout the day. My teachers, students, their parents, and visitors can all easily post content right alongside our school calendar and announcements.
Here are the resources I used:
- The calendar is a simple Google Calendar embedded into the page. You can setup your parameters for this right within the Google Calendar embed interface.
- Everything that follows requires the jQuery library.
- The HTC Hero inspired digital clock / weather widget is called jDigiClock.
- Both the News & Announcements and Shout-outs sections of the site pull content from Twitter and are powered by electronaut's LiveTwitter plugin.
- The image slideshow that pulls recent images from the school's Flickr is powered by Flickrfeed.
Once I found all of the resources needed to make the signage work, I started coding. Attached is a zipped up copy of everything I have at http://sign.nilesnewtech.org. Your free to steal the design and everything I've done. I've simply pulled together resources from other places.
Other things you'll need to do and know:
- The News & Announcements section pulls content from a specific Twitter account. I gave access to this Twitter account to my teachers and secretary so that they could post whenever they had something to share. A notable benefit of doing this is that you can share the Twitter account with parents and students through other places (like your website, on Twitter, etc.). It's not only useful for the sign. (Edited on line 50 of index.php)
- The "Shout-outs section pulls content from tweets that include a specified phrase (like a hashtag). This allows anyone to get their words on the screen just by using that tag in their tweet. This is an important and powerful part of the sign - it keeps people looking. (Edited on line 51 of index.php)
- You'll need a Flickr account to link up to the pictures. (Edited on line 7 of setup.js) We all installed Flickr uploader apps on our phones so that we could easily take a picture of student learning in the classroom and upload it right to our shared account. Then, the next time the sign refreshed, it would show the new pictures you just took.
- There are refresh rate caps with Twitter. You may need to change the refresh rates on lines 50 and 51 of index.php if you have a lot of signs pulling from Twitter simultaneously.
That's about all I have to share. I realize that this is not a very good technical post for those of you without a coding background. I simply can't think of any way to explain much more without turning this into a coding tutorial. If you have questions or hang-ups, feel free to post questions as comments or you can find me on Twitter @ptrkmkl.