Simple, Cheap Digital Signage

Digital Signage Display

With the Holiday’s Just around the corner, large televisions are plentiful, and available on the cheap. I’ve seen 32″ Models going for as little as $149 and 42″ models going for as little as $199. Pair it up with an old computer – in my case, an old mac mini – and you’ve got yourself the basic ingredients for a powerful networked digital display for probably less than you’d spend on a couple color vinyl banners or full-color posters.

TIp: When Buying a large television – try and find one that has a DVI or RGB Display Input – In my case, the mac mini has a DVI output, so I’ll hook it up to a TV with a DVI input. If your computer doesn’t have DVI you may need to pickup a new video card that supports HDMI out.

Hardware

Realistically, any old PC should work, or check around on craigslist or ebay for an old Mac Mini – they’re easy to configure, very compact and draw very little power so they make an excellent platform for driving your digital display. If you don’t want to buy a big television, just repurpose an old computer display you’re not using anymore.

Software

In my example I’m running OS X 10.5 – 10.4 should work as it’s the minimum requirement for the plainview browser. To drive additional networked displays, you’ll want to enable the built-in apache webserver in os x from the systems preferences menu and unzip the files there. If you plan on only driving a single display, you can unzip the files anywhere on the system and open them in the plainview browser. You can use any Browser that supports fullscreen browsing, Plainview happens to be low overhead, and supports os x 10.4 and up.

The Display Files
The Display Files are Extremely Simple. Included is a file named kiosk.html, a javascript file for the clock, and a directory with the sample images. As stated above, if you’re planning on only powering the display attached to the computer, put the display files in a folder on the desktop and open kisok.html in the plainview browser from that directory. I’ll dive into having multiple displays running later in the article.
Kiosk.html
This is the file that runs the show – it’s got an inline stylesheet and some miscellaneous javascripts and the jquery library which provides the slideshow effect. As you can see below, each slide is just a <div> in which you can put basically whatever content you want. In my example, I’ve got a couple slides that have colorful backgrounds and basic type options. I’ve also thrown in an example of a weather widget from accuweather.com. Modify the CSS as you see fit. In the example, each slide is shown for 7 seconds, but you can change the value to whatever you want – the value is in milliseconds so 7 seconds = 7000 milliseconds.
Updating The Display Remotely
In either case below, the code is set to reload every 30 minutes, so all you’ve got to do is upload and overwrite your files, and within 30 minutes your display will update – be careful when overwriting images, as your images might get updated on your current slides.
  • Locally over AFP/SMB – Pop open your System Preferences, under sharing choose File Sharing, Setup sharing for the folder where you’ve placed the files – make sure it’s password protected. You can also setup an FTP Server.
  • Remotely on a Webserver – If you’ve got a hosting account somewhere, make a folder called kiosk and drop the files there, and update as you would a normal website. In your plainview browser you’ll just connect to www.yourdomain.com/kiosk. Obviously in this scenario your display will need to be connected to the internet in order to function.
Multiple Displays
  • If your computer has a video card that supports it, you may be able to hook more than one display up and mirror the image. You’ll probably need a long display cable, but you’ll probably have to keep both displays within about 100 feet of each other.
  • If you want to have multiple displays in a large building or plant – say one by your entrance, and another one in a breakroom on the other side of the building, you’ll need an additional computer, setup fairly similar to the first one.
  • If you want to serve the content to more than one display on another computer, you’ll need to turn on the apache web server built-in to OS X and put the files in the appropriate folder. Then on subsequent computers, you would just put the IP address of the server in the browser bar, and whenever you updated the server, the other clients would get the update as well.
So there you have it, a simple, cheap digital signage solution. If you run a restaurant, you could display your daily specials, messages about upcoming events, and other pertinent information. If you run a larger plant, you could setup multiple displays around the facility to easily keep employees informed about company events and information.
My example uses a Mac Mini but the heart of the project is just basic HTML which is platform independent. If you were a big spender, you could mount iPads on the wall and they would work just as well.
Side Note: Many Televisions nowadays come with fairly simple web browsers built-in. If you dont want to fool with setting up a dedicated computer, buy some cheap web hosting, upload the files there, and point the televisions built-in browser to the files.
Picture of Jason Pleakis

Jason Pleakis

Jason has over 10 years of experience developing in Wordpress and is the owner of Greenville Webworks. His Greenville, South Carolina company designs and develops modern websites for clients in a variety of industries using the latest web standards and practices.