Plex Status Display on PiTFT Screen

6 min readJul 8, 2017

These instructions are a segment of a multi-part series of instructions on the installation and setup of FakeTV, a simulated television broadcast experience.

If you’ve been following the saga of FakeTV, you may already be aware that I purchased an old Sony SLV-575UC VCR from a thrift store for $1 and gutted it to house my entire Plex FakeTV setup. In doing this, I originally included a 2.8" PiTFT screen and set it up to display what is currently playing on FakeTV. Recently, I upgraded this to the 3.5" screen to fill out the space in the LED window.

Screen Installation

First things first is getting the PiTFT screen seated and working. If you’ve already followed my earlier FakeTV setup instructions, then you should already have your PiTFT Raspbian image installed. If not, you’ll need to follow adafruit’s installation instructions to get it set up and working. If you’re installing from a fresh install, you’ll be able to use the Easy Instructions, which should have you up and running in under and hour. Here’s a quick rundown.

Install the custom Raspbian image

source: https://learn.adafruit.com/assets/27678

Depending on your screen size, there are several options for the custom install image. For the 3.5" there’s the option for the Jessie or Jessie-Lite images. For the 2.4", 2.8" or 3.2" screens, there is also a Jessie or Jessie-Lite option. The commands below are specific to the 3.5" screen. See this install page for setup details regarding the other size screens.

Once installed, you’ll need to expand the file system with the following commands:

sudo raspi-config
(expand filesystem)
sudo reboot

The next step is the kernel installation, which will take a while. Issue these commands, then go get a drink or something.

curl -SLs https://apt.adafruit.com/add-pin | sudo bash
sudo apt-get install -y raspberrypi-bootloader adafruit-pitft-helper raspberrypi-kernel

Then just run the helper, sudo adafruit-pitft-helper -t 35r and reboot your pi with sudo reboot. If you have trouble getting the screen to work, refer back to the adafruit setup page. If you are looking to add the screen without reimaging your pi, refer to adafruit’s detailed setup instructions for your scren.

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# 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">

If everything has been configured properly, you should be seeing the index.php page on the display. It will update the data it pulls from getData.php every three seconds, so you can monitor the changes you make almost immediately as you save them. Sometimes though, you may make changes that don’t reflect immediately or for some other reason you may need to restart the browser. To do this without rebooting the entire pi, use sudo killall kiosk.sh && sudo service lightdm restart.

That should do it. You now have a status screen showing what’s currently playing from your Plex library on the specified client. If you’ve set up FakeTV like I did, you can now see what’s playing before turning your TV on. You can also do like I did and mount the whole thing in an old VCR or other case that fits in with the rest of your home entertainment devices.