Hopefully you’ve seen the digital signage in the HackSpace window. I hope you agree, it looks quite good. All for under £10 (initially) plus some bits we had lying around.
The sign works by displaying an advert for an upcoming or recurring event for a few seconds, then changing automatically to a different one. This is all done in a seamless way, without showing any evidence of how it is achieved. The advert takes up the entire space available on a TV screen turned on it’s side, there’s no typical window furniture like a title bar or frame or mouse pointer, so nothing gives away the fact it is just a humble web browser pointed at a web page. That web page is hosted on a computer in the HackSpace. It’s a good effect overall.
What’s not immediately obvious is how easy it is to add, remove or edit an advert. Similarly creating adverts themselves, with embedded graphics and styling, is also very simple. Getting the whole system to turn on is easy too, you just turn the TV on and it’s all ready and working – no mucking about with computers or anything. Also TVs don’t come with self-orientating displays so how did we get it on it’s side? If there’s a computer running it how did we get it to hide the evidence of it’s own existence?
Starting from the beginning then, we wrote an ASP.NET application in C# to run on the same computer that was already in the space to manage our conditional access door system, amongst other things. An ASP.NET application is hosted on a web server and outputs HTML, so this is accessed and used by a web browser. If you have visited a web page where the address ends in .aspx, then you have used an ASP.NET application.
This application reads an XML document that lists the file names of all the adverts to be displayed. An XML document is purely a text document that can also be easily read by a computer as it uses tags to mark-up values and provide them with some form of significance, a bit like the way an HTML document is read by a web browser (they both contain ML and this is not a coincidence, XML is eXtensible Markup Language, and HTML is HyperText Markup Language). This index can be maintained and edited using nothing but Notepad. The application then serves up the first item listed in the index.
The types of items can either be an image or a text file containing HTML. If it’s an image then the application calculates the largest possible size the image can be, resizes it and then streams this out with the HTML to the client web browser. If it’s a text file the HTML contained in the file is displayed in the content area of the HTML page served up by the application.
The clever thing is the refresh. Normally to refresh a page you have to either click the refresh icon, hit F5, or do elaborate things with the complicated mechanics of HTTP (HyperText Transfer Protocol) to make a client web browser refresh itself. What do we mean by refresh? Well a little knowledge of how the World Wide Web helps to explain the significance of this bit.
A HTML document is just that, a document. It is static. We can use technologies like ASP, ASP.NET, PHP or Java (amongst many others) to dynamically create HTML documents on the fly, but they are still documents. So your web browser (the client) connects to a type of program that serves up web pages (the server) via a complicated method I won’t go into here (that’s a whole ‘nother lecture) by the user typing or clicking on a link to an address, the client downloads the document and any associated content (pictures usually) and displays it. The document on the web server can change, but the connection is now gone so the old copy stays on the client web browser until refreshed at the client end.
However you can force a web page to refresh itself automatically by using a meta tag in the web page’s header. Namely like this …
<meta http-equiv=”refresh” content=”10” />
In this example the page would refresh every 10 seconds. In our application we know that a connection has previously been established with the client, so instead of serving up the same page we rebuild the page, using the next image or text file in the index XML file, and serve up the new content. We do the same for the next refresh and so on. When we’ve got to the bottom of the index list, we go back to the start.
The ASP.NET application is hosted on a Windows PC we were already using, and uses the inbuilt web server that comes with all copies of windows but is not usually installed by default (seriously, look in Windows features for something called IIS, Internet Services or similar, you will have this software available). Once installed, web applications and pages published under IIS are available to any other computer on the same network (assuming the required ports are available on the computer – that’s all part of that other lecture I mentioned before).
So we’re hosting the web app on a PC, what are we using to consume the output as a web client? Another PC would be wasteful, so what else could we use as a device to display a web browser. Well if you know us it won’t be a complete surprise if I tell you it’s a Raspberry Pi. Not just any Pi either, the new Raspberry Pi Zero W. This is a cut down Pi with a slower processor but still capable of happily running Raspbian and displaying a web page and only costs £9. It’s the only thing we bought (initially) for this project.
We use a bit of Linux knowledge to configure Raspbian to display in portrait mode rather than default, hence we can have the TV on it’s side. We also use a bit of Linux knowledge to automatically launch the browser pointing at the web application’s URL at start up. We also configure the browser to be maximised and in kiosk mode – i.e. none of the usual Window furniture.
Of course you also need a display. The bigger the better. In our case it started out as a 42 inch plasma display we had lying around. Therefore it was free. An LED TV would have been better as it generates less heat and is therefore more energy efficient and less likely to develop a fault. Which ironically, the plasma screen did a couple of weeks after starting. So we ended up with an LED TV courtesy of cash converters for £150.
The last problem we needed to solve was how to pin the TV to the window. We could have lent it up against the window but that would have left a gap. The solution we used made use of the vertical bars that sit behind out window. We used an old car jack that I obtained from a friend who owns a garage (which now has an improved website in exchange) to brace the display between the bars and the window itself.
So despite that slight set back we ended up with a pretty cool looking, professional digital signage solution for under £160. There’s a couple of changes we will make in the future, such as making the changeover time dynamic to allow longer or more prominent ads, but we’re happy with the overall result.
If you’re looking for something similar for your community group or business, why not get in touch via the website, email, twitter or facebook or drop into the space on a Monday evening?
UPDATE This now features variable advert duration. If an ad contains a lot of text, or you want to give it extra prominence, simply set the number of seconds in the duration attribute of the xml element in the index.