Pi Digital Signage Project

I started this project for a couple of reasons. We were using Screenly OSE at work for noticeboards. There were 7 in total, and they got updated a couple of times a week at most, and the content was only of any interest to employees. There was also a pretty tight budget for the whole thing. There wasn't the cash or impetus to buy into paid hosting, but there were enough individual notice boards to make it a bit of a pain to update each of them. I was also interested in learning about Linux, html, php and JavaScript.

I started by installing MariaDB as the SQL server for the project and nginx as the web server. I had to do a bit of tweaking to the nginx config to allow uploading of decent size mp4 files to the pi. The DB can be explored using MyPHPAdmin which has a link on the banner. All the passwords are default (pi, raspberry) so anyone picking this up should change them.

I created a page to upload content to it, then created a kiosk page as a viewer. The upload page is based roughly on the layout of Screenly. Individual kiosks can have their content changed by selecting them from the drop down. The link to the right of the dropdown opens the kjosk page so you can preview the output. The kiosks by default point to the localhost 127.0.0.1 index page, so the pi serves itself, in pretty much the same way as Screenly OSE. 

When the kiosk loads, a list of IP addresses displays, showing the host and the kiosk address. Once this first Pi is set up, you can set up other kiosks on the same network to point to it as the host.. Edit the kiosk.sh file and change the address of the host to the other pi on the network. Kiosk.sh just opens Chrome in kiosk mode and points to the address of the kiosk. You can close Chrome using Alt+F4 and get full access to the desktop. SSH is enabled on the image so carefully consider changing passwords.

The Kiosk works by looking at the MIME of the content to decide whether its an image or video. Individual DIVs are created, all hidden. The javascript uses AJAX to get the timings of the images from the host DB. It then unhides each DIV in sequence, hiding it then unhiding the next when either the video finishes playing or the timer for the image ends. All the divs are placeholders for videos, but image files use the POSTER element of the video, and the video source is left blank. Doing this instead of using a dedicated image placeholder means the the image is stretched to fill the entire screen regardless of size. You could use a favicon if you wanted. 

Getting the length of the video proved problematic for me, so the video length displays as the default time for an image instead. I looked at getting the correct length of the videos uploaded, but found that it slowed down the upload page too much, so decided to go with just entering the time manually. It's only for reference as the full video plays regardless.

The kiosk loads every video file into Blobs before starting the screen show, so I avoid using videos over 50 meg. Putting too many on can also cause problems.