Installing and Configuring Software

Now that you have a screen installed that boots to desktop, you’re ready for the next step. The status display screen is essentially a website running with Chromium in kiosk mode.

Apache and PHP

First, we’ll need to set up a local web server with Apache and PHP. Installing Apache and PHP should be easy. Start by running sudo apt-get install apache2 php5 libapache2-mod-php5 . Once the install is complete, run sudo service apache2 restart .

At this point, you should be able to navigate to your Raspberry Pi’s IP address and see a placeholder page. The location of this page, and by extension the directory where all of your files for this project will go is /var/www/html .

Chromium and Kiosk mode configuration

Once the web server is set up and working, you’ll want to configure the pi to start the Chromium browser on launch and enter kiosk mode. This ensures the data on your page is shown at full screen at all times. If your pi automatically starts to the desktop on the screen on launch, then you are ready to move forward. If for some reason, it does not start to the desktop, you should troubleshoot that before moving forward.

First, you need to create a task to run on login. With sudo nano /home/pi/.config/autostart/kiosk.desktop add the following to the file:

[Desktop Entry]

Type=Application

Name=Kiosk

Exec=/home/pi/kiosk.sh

X-GNOME-Autostart-enabled=true

Press ctrl+o and ctrl+x to save and exit. Next you’ll need to actually create the script your entry points towards. sudo nano /home/pi/kiosk.sh and use the script below:

#!/bin/bash # Run this script in display 0 — the monitor

export DISPLAY=:0 # Hide the mouse from the display

unclutter & # If Chrome crashes (usually due to rebooting), clear the crash flag so we don’t have the annoying warning bar

sed -i ‘s/”exited_cleanly”:false/”exited_cleanly”:true/’ /home/pi/.config/chromium/Default/Preferences

sed -i ‘s/”exit_type”:”Crashed”/”exit_type”:”Normal”/’ /home/pi/.config/chromium/Default/Preferences

/usr/bin/chromium-browser — window-size=480,320 — kiosk — window-position=0,0 # Run Chromium and open tabs/usr/bin/chromium-browser — window-size=480,320 — kiosk — window-position=0,0 http://127.0.0.1/index.php http://127.0.0.1/index .php & # Start the kiosk loop. This keystroke changes the Chromium tab

# To have just anti-idle, use this line instead:

# xdotool keydown ctrl; xdotool keyup ctrl;

# Otherwise, the ctrl+Tab is designed to switch tabs in Chrome

# #

while (true)

do

xdotool keydown ctrl+Tab; xdotool keyup ctrl+Tab;

sleep 15

done

This script assumes that the status page will live on the local machine. If you’re pointing this at a page anywhere other than locally, make sure to update the loopback IP addresses with the correct entries.

Once you’ve saved it, make the script executable with chmod +x kiosk.sh and give it a sudo reboot . Once it starts up again, you’re ready to set up the webpage that will act as your status screen.

Configuring the Status Page

Now that the web server is set up and the pi is configured to launch into kiosk mode Chromium, it’s time to download the files from the repository into your /var/www/html folder. Once the files are in place, navigate to http://<ip-of-pi>/adminConfig.php from any browser on the same network. On this page, enter the IP address of your Plex server, your X-Plex-Token, and Client IP. Your TV Section and Movie Section entries are determined based on the order in which you set up your Plex library. To figure out which values to enter, start by navigating to http://<plex-server-ip>:32400/library/sections/1/all and search for the value of librarySectionTitle (it’s near the top, but a quick ctrl+f should find it for you if you’re having trouble). If the value of librarySectionTitle is Movies or TV Shows , enter 1 into the appropriate field, then check http://<plex-server-ip>:32400/library/sections/2/all and do the same check. If movies and TV shows aren’t in the first two, keep going up numerically until you find each of them and enter them into their appropriate fields. Then click save to commit your changes.

From here you should be all set, provided you’re using a 3.5" screen with 480x320 resolution. If not, or if you want to make changes to the display layout, open up the getData.php file and look for the $title , $display and $info variables under each section and edit as desired. If your resolution is different, open the index.php file and edit the max-width value to equal the maximum width resolution of your display:

<div id=”container” style=”max-width:480">