Ted's Slideshow App

After getting my Raspberry Pi Zero W I needed a project that would use it. Luckily, my Elks Lodge was looking for an image kiosk to advertise our upcoming community service events. Voila!

I found this Instructable by assasinsareus that laid out how to install feh and create an image kiosk.

Done and done, right? Well, I followed the instructions (thanks assasinsareus!!) and got everything working, but in my view it felt like I wasn't done. I wanted a way to control the images a bit better than ssh and ftp so I wrote a Slideshow Image app you can download.

Installing everything

There were a few more steps I needed to take in order to pull this off. First off, my ssh client didn't display the raspi-config correctly and I had to install VNCServer in order to get the user "pi" to log in automatically, using this command:

sudo apt-get install realvnc-vnc-server

Next, I installed Apache2 and enabled cgi-bin:

sudo apt-get install apache2
sudo a2enmod cgi

Then, I installed PHP 7.0:

sudo apt-get install php7.0 php7.0-curl php7.0-gd php7.0-imap php7.0-json php7.0-mcrypt php7.0-mysql php7.0-opcache php7.0-xmlrpc libapache2-mod-php7.0

After PHP installs, reboot the Pi.

As I mentioned, my terminal wasn't displaying correctly plus I am unfamiliar with nano, so I needed to change my default editor to vim:

sudo update-alternatives --set editor /usr/bin/vim.tiny

With the new editor I was able to use the command visudo to edit the /etc/sudoers file. I added this line:

www-data ALL = NOPASSWD: /sbin/shutdown

to let me run the shutdown command using a web browser. Note that this is dangerous if you do not tightly control who has access to the system. Basically you are letting someone shutdown or reboot your Pi using only a web browser. I mitigated my exposure by using a .htaccess file.

Using the vncserver I connected to the desktop and chose the Preferences -> Raspberry Configuration menu option. There I was able to have user "pi" log in automatically. BTW, if you haven't done so yet, now is a great time to change the pi user's password.

Check both "Boot to desktop" and "Log in as user 'pi'".

With this link I learned how to automatically start feh when the user pi logs in. Since user pi now logs in automatically, this means I can have the slideshow start as soon as the system is booted.

Create a test php file by typing: echo "<?php phpinfo(); ?>" >> /var/www/html/test.php.

Launch it in a web browser by going to http://hostname/test.php (Replace "hostname" with the actual hostname of the system.)

If your PHP test script ran without issue and the slideshow starts when you boot your system, you are ready to untar the app. Create a directory /var/www/html/kiosk and copy the downloaded kiosk file into it. Then, use this command: tar -xvzf kiosk.tar.gz.

Change the permissions so www-data has write access to the images subdirectory, the feh* files in /bin/mods, and the autostart file in /home/pi/.config/autostart directory.

feh.desktop autostart file

Open a web browser and go to http://hostname/kiosk

The first page you see has a Choose Files button and a Submit. Click Choose Files and select a .jpg or a .png file that is less than 2MB in size. After selecting files and clicking the Open button you'll see the status message next to the button has changed. Click the Submit button.

If the file has a mime type of "image" and is less than 2MB in size, you'll see a "File uploaded" message at the top of the page. Click the Reload This Page link to clear that message.

How it works

When you upload files they are placed in the /images/current directory. This is the directory used by feh to display the images. When the Submit button is clicked any files in the current directory are moved to /images/past directory. This means you can change your slideshow just by uploading the new files to display.

If you would like to display some of those older files, click the Maintain Past Files link. This page lets you Delete, Display, or Save any of the files listed.

When you want to display any of the files you have saved, click the Maintain Saved Files link. This page will let you Delete or Display any of the saved files.

Note that when you delete a file, it is not deleted off of the system. Instead it is moved to the /images/2delete folder. This means you will manually have to log in and delete those files yourself.

Back on the Upload Files page there are two other links.

Clicking the text Default Settings takes you to the page where you can reboot or shutdown the system using the cgi-bin scripts.

Under Default Settings, you'll see the text: Each image will display for about 15 seconds... That 15 will change depending on how long each image is set to display. Clicking the "15 seconds" will take you to a page where you can change that value. When you type in a value between 15 and 120 and click Submit, the system will automatically reboot to restart the slideshow with your new value.

Play around with it a little and let me know what you think.

Tar file Contents:

delay.html: html page used to specify how long an image displays before the next
index.html: html page that bounces to bin/upl.php
serious.html: html page that allows you to reboot or shutdown the Raspberry Pi

bin

  delay.php: Program calls function to get number of seconds from delay.html and place it in the feh autostart file. It then calls reboot.pl to reboot system.
  maint_curr.php: Program calls function to scan files in the /images/current directory and allow user to copy them to the save directory or delete them (which copies the files to the /images/2delete folder)
  maint.php: Program calls function to scan files in the /images/past directory and allow user to copy them to the save or current directory or delete them (which copies the files to the /images/2delete folder)
  maint_save.php: Program calls function to scan files in the /images/future directory and allow user to copy them to the current directory or delete them (which copies the files to the /images/2delete folder)
  upl.php: Program calls function to move files from /images/current to /images/past and upload new images to the /images/current directory. It checks for mime type == image and will only upload files 2MB or less in size (limit specified in php.ini file)

bin/mods

     delFiles.php: Function moves files from /images/current to /images/past
    feh.desk, feh.desk.txt, feh.desktop.txt: Files used to update feh.autostart with new delay value
    fileTable.php: Function used to create a table with three columns used to show thumbnail images
    footer.txt: Holds ending tags for the html files
    funcDel.php: Function moves selected files to the /images/2delete folder
    funcDisp.php: Function copies selected files to the /images/current folder
    funcSave.php: Function copies selected files to the /images/future folder
    header.txt: Holds beginning tags for the html files
    mainttext.txt: Holds text displayed on the maintenance html pages
    noSec.php: Function to extract and display the number of seconds currently in the autostart file
    upform.txt: Creates the Upload and Submit buttons for upl.php
    uptext.txt: Holds the text displayed on the upload page

cgi

reboot.pl: Perl script used to reboot the Pi. Move this file into your cgi-bin directory (/usr/lib/cgi-bin, by default)
shutdown.pl: Perl script used to shutdown the Pi. Move this file into your cgi-bin directory (/usr/lib/cgi-bin, by default)

css

orange.css: CSS file to stylize the html pages

images

  default.jpg: Default image that will be displayed. Change this to the image you want most displayed and name it default.jpg
  2delete: Holds selected files that user deleted
  current: Holds files that are currently being displayed
  future: Holds selected files that the user saved
  past: Holds files that were displayed until the user uploads more

images/buttons

Button-Reboot.png
Button-Shutdown.png