Raspberry Pi Powered Animated Movie Poster Display

by CompactKidney in Circuits > Raspberry Pi

504 Views, 6 Favorites, 0 Comments

Raspberry Pi Powered Animated Movie Poster Display

Dashboard-cover-image.jpeg
Movie_Poster_Dashboard.gif

I'm a big movie buff and recently saw a wall-mounted TV displaying a movie poster. Inspired by this, I thought about how cool it would be to have a similar display in my home, but with the added twist of showcasing different posters. To make it even more unique, I decided to animate the movie posters. Thus, the Wall Mounted Animated Movie Poster Display was born!


This display is powered by a Raspberry Pi, which plays MP4 videos created from animated movie poster GIF files. The posters will cycle through at a predetermined interval.


Additionally, I wanted the display to serve other purposes, so I set up a simple web server. This server allows you to select which items to display at any given time. While this Instructable will primarily focus on the movie poster display, I'll also highlight how you can easily display other information on the dashboard.


Let me know what creative options you decide to display in the comments!

Supplies

Required:

  • TV or Monitor with USB power
  • Raspberry Pi (I used an older Raspberry Pi 2 B+ for this Instructable but also used a Raspberry Pi Zero W for a second display in another room)
  • Don't forget the SD Card & USB cable for power
  • Short HDMI cable
  • Thin TV Mounting Bracket - Link


Optional:

Creating Movie Poster Videos

To display the movie posters, you'll need to find some images. These are readily available online with a quick search for "movie poster GIFs" (obviously pronounced like gif, not jif). Download all the posters that match your viewing preferences. I initially tried displaying the GIF files directly from the Raspberry Pi, but the results weren't great. You can experiment with this yourself, but I found that converting them to MP4 video files resulted in much better performance and smoother playback. The MP4s even worked well on Raspberry Pi Zeros!


We'll use ffmpeg to convert the GIF files to video files. First, place all your GIF files in a folder. Then, use the following command to loop through all your downloaded GIF files, convert them to MP4, and save them with the original filename in a folder called MoviePosterGifs-mp4:


Create MP4 Posters from Gif Files

for file in *.gif; do ffmpeg -stream_loop -1 -i "$file" -movflags faststart -pix_fmt yuv420p -vf "scale=800:-2" -t 300 MoviePosterGifs-mp4/"${file%.gif}.mp4"; done


This process will take some time, but once it finishes, you'll have a folder full of MP4 files with the same names as the original GIF files.

Let's break down the parameters and arguments used in the command:

  • -stream_loop -1 => Sets the number of times the input file will be looped. -1 means an infinite loop.
  • -i "$file" => Specifies the input file. Since we're using a for loop, $file is a variable that contains the name of each file.
  • -movflags faststart => Normally, an MP4 file has all the metadata stored in one location, usually at the end of the file. Adding +faststart to the -movflags moves this data to the start for better playback.
  • -pix_fmt yuv420p => Requests the video device to use a specific pixel format (yuv420p).
  • -vf "scale=800:-2" => A filter option for various video settings. Here, it's used to scale (resize) the input video, ensuring a consistent format across all files.
  • -t 300 => Sets the length of the video in seconds. 300 seconds equals 5 minutes.

Raspberry Pi Initial Configuration

raspberry-pi.jpeg
raspberry-pi-imager.png
raspberry-pi-imager-advanced-options.png

The entire solution is powered by a Raspberry Pi. First, we'll initialize the device and then configure it to display the videos.


Install an OS on the Raspberry Pi

First you must install an OS on the Raspberry Pi. I installed Raspbian using the Raspberry Pi Imager. When configuring your OS install, enable both SSH and WiFi. MAKE SURE YOU CHANGE THE DEFAULT USERNAME AND PASSWORD! Install your OS to an SD card, and then insert the card into your Pi.


Once the OS boots up, ssh into your device and proceed with the following configurations:


Update the Environment

sudo apt-get upgrade
sudo apt-get update -y


Install Supporting Applications

sudo apt-get install vim
sudo apt-get install feh screen


Rotate the Screen

sudo vi /boot/config.txt

Add or edit the following lines

disable_overscan=1
display_splash=1
display_rotate=1

NOTE Make sure that this line is commented out: 

#dtoverlay=vc4-fkms-v3d


Reboot

sudo reboot


Set Up Networking and a Static IP

sudo vi /etc/resolv.conf

nameserver 8.8.8.8


And then:

sudo vi /etc/dhcpcd.conf

interface wlan0
static ip_address=<your static IP>/24
static routers=<your router IP>
static domain_name_servers=8.8.8.8



Disable Wifi Power Saver

iw dev wlan0 get power_save
sudo iw dev wlan0 set power_save off
iw dev wlan0 get power_save


Install Flask for the Web Server

pip install flask


Hide the Mouse Cursor

sudo apt-get install unclutter
sudo vi /etc/xdg/lxsession/LXDE-pi/autostart
@unclutter -idle 0


Upload Movie Poster MP4s

Don't forget to upload all the movie poster MP4s from your computer to the Raspberry Pi into a folder at /home/pi/MoviePosterGifs-mp4/.

Playing the Videos

I wanted a video to be randomly selected, played for a fixed duration, and then followed by the next random video. To achieve this, I used omxplayer within a simple Python script. Although omxplayer is deprecated, it provided the best performance and compatibility with the Raspberry Pi Zero. Due to its deprecation, omxplayer needs to be downloaded and installed manually from the Raspberry Pi archives. Here are the steps required to download and configure it.


Install and Configure omxplayer

Run these commands on your Raspberry Pi to install and configure omxplayer. Note: You can create a bash script to run these commands at once.


#!/bin/bash

[[ $EUID -ne 0 ]] && echo "This script must be run as root." && exit 1

wget -P /tmp https://archive.raspberrypi.org/debian/pool/main/o/omxplayer/omxplayer_20190723+gitf543a0d-1+bullseye_armhf.deb
dpkg -i /tmp/omxplayer_20190723+gitf543a0d-1+bullseye_armhf.deb
apt install -y --fix-broken

cd /usr/lib/arm-linux-gnueabihf
ln -s libmmal_core.so.0 libmmal_core.so
ln -s libmmal_util.so.0 libmmal_util.so
ln -s libmmal_vc_client.so.0 libmmal_vc_client.so
ln -s libbcm_host.so.0 libbcm_host.so
ln -s libvcsm.so.0 libvcsm.so
ln -s libvchiq_arm.so.0 libvchiq_arm.so
ln -s libvcos.so.0 libvcos.so
curl -sSfLO 'https://raw.githubusercontent.com/raspberrypi/firmware/master/opt/vc/lib/libbrcmEGL.so'
curl -sSfLO 'https://raw.githubusercontent.com/raspberrypi/firmware/master/opt/vc/lib/libbrcmGLESv2.so'
curl -sSfLO 'https://raw.githubusercontent.com/raspberrypi/firmware/master/opt/vc/lib/libopenmaxil.so'


Install omxplayer-wrapper

After installing omxplayer, install the Python support package omxplayer-wrapper.

pip3 install omxplayer-wrapper


Create a Script to Play Videos Randomly

Create a new Python script called play_movieposters.py in /home/pi/dashboard/ with the following content:

#!/usr/bin/env python3

from omxplayer.player import OMXPlayer
from pathlib import Path
from time import sleep
from os import listdir
import random
import logging

# configure logging
logging.basicConfig(filename='/home/pi/play-movieposter-py.log', level=logging.INFO, filemode='w')

video_files = listdir("/home/pi/MoviePosterMK4/")
random.shuffle(video_files)

while True:
    for video_file in video_files:
        logging.info(video_file)

        try:
            VIDEO_PATH = Path("/home/pi/MoviePosterMK4/" + video_file)
            player = OMXPlayer(VIDEO_PATH)

            sleep(300)

            player.quit()
        except Exception as err:
            logging.error("Error!: " + format(err))


Test Your Video Files and Script

You can now test your video files and script by running the following command:

/usr/bin/python3 /home/pi/dashboard/play_movieposters.py

Setting Up the Web Server

Dashboard.jpeg
web server.png

Now that we have the Raspberry Pi configured, we need a way to control it remotely. I created a simple web server using Flask to present options for the display. This Instructable focuses on displaying movie posters, but as you'll see in the code, it's straightforward to use the display for other purposes.


Create a New Python File for the Web Server

vi webserver.py


Create the Web Server to Run on Port 5000

from flask import Flask, render_template, redirect, url_for
import os
import logging


app = Flask(__name__)


# Configure logging
logging.basicConfig(filename='web_server.log', level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')


def killapps():
    # Log a message at the start of the function
    logging.info('Executing killapps function')
    
    # Add your OS commands for killing apps here
    os.system('/usr/bin/pkill -f "python3 /home/pi/dashboard/play_movieposters.py"')
    os.system('/usr/bin/pkill omxplayer')
    os.system('/usr/bin/pkill feh')


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/movie_posters')
def movie_posters():
    killapps()
    
    # Log a message at the start of the function
    logging.info('Executing movie_posters function')
    
    # Update the movie posters OS command here
    os.system('/usr/bin/python3 /home/pi/dashboard/play_movieposters.py > /home/pi/playmovieposter.log 2>&1 &')


    return redirect(url_for('index'))

@app.route('/display_photos')
def display_photos():
    killapps()
    
    # Log a message at the start of the function
    logging.info('Executing display_photos function')
    
    # Update the display photos OS command here
    os.system('export DISPLAY=:0; feh -Y -x -q -D 30 -B black -F -Z -z -r /home/pi/Pictures/ &')


    return redirect(url_for('index'))


@app.route('/stop_display')
def stop_display():
    killapps()
    
    # Log a message at the start of the function
    logging.info('Executing stop_display function')
    
    return redirect(url_for('index'))


@app.route('/shutdown')
def shutdown():
    killapps()
    
    # Log a message at the start of the function
    logging.info('Executing shutdown function')
    
    # Add your shutdown OS command here
    os.system("sudo shutdown -h now")


    return redirect(url_for('index'))


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)


Note: The script expects your movie poster script to be located at /home/pi/dashboard/play_movieposters.py.


Create a New Folder Called templates and Add the Styles:

mkdir templates
vi templates/index.html


Add the Following Content to index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }


        button {
            padding: 10px;
            font-size: 16px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Dashboard</h1>
    <button onclick="window.location='/movie_posters'">Movie Posters</button>
    <button onclick="window.location='/display_photos'">Display Photos</button>
    <button onclick="window.location='/stop_display'">Stop Display</button>
    <button onclick="window.location='/shutdown'">Shutdown</button>
</body>
</html>


Set Up the Web Server to Start at Boot

As the user "pi", edit the crontab:

crontab -e

Add the following line:

@reboot python3 /home/pi/dashboard/webserver.py


Access the Web Server

You can then access the web server from any web browser on your network. It looks good on both computers and mobile devices: http://<your static IP>:5000.

Note: I've added some additional buttons for more content to display. If you're feeling ambitious, try adding more of your own!

Final Folder Structure

All of the configurations are now completed. If you followed all the steps above, your Raspberry Pi will have a folder structure that looks like this:

/home/pi/
├── dashboard/
│   ├── play_movieposters.py
│   ├── webserver.py
│   └── templates/
│       └── index.html
├── MoviePosterGifs-mp4/
│   └── <your movie posters>
└── Pictures/
    └── <your picture collection>


With this setup, your Raspberry Pi is now ready to display animated movie posters and can be controlled remotely via the web server.

Putting It All Together

IMG_9845.jpeg
IMG_9846.jpeg
IMG_9849.jpeg
IMG_9848.jpeg

Now it's time to attach the Raspberry Pi to the TV, mount the TV to the wall, and boot everything up. Here's how I did it:


Attach the Raspberry Pi to the TV:

  • I used some Velcro to attach the Raspberry Pi to the back of the TV.
  • A short HDMI cable was used for the video signal.


Power the Raspberry Pi:

  • I used a TV with a built-in USB port to power the Pi, eliminating the need for a separate power supply.


Mount the TV:

  • The Thin TV Mounting Bracket was attached to the wall.
  • The TV was mounted at a 90-degree angle to display in portrait orientation instead of the traditional landscape orientation.


Automatic Power On/Off:

  • Because the Pi is powered by the TV, it automatically turns on and off with the TV.
  • When the TV is turned on, the Pi also turns on and boots up after a few minutes.
  • Once you are finished using the display, use the Shutdown button on the web server (it's not recommended to unplug the Pi directly!).
  • Once the TV loses the signal from the Pi, it should automatically go to sleep or turn off as well.


With everything connected and set up, your Wall Mounted Animated Movie Poster Display is now ready to use. Enjoy the seamless integration and the dynamic display of your favorite animated movie posters!

Final Product

Dashboard-screen.jpeg
F361YK5LSHIMQXM.gif

Grab a bag of popcorn and sit back to enjoy your Animated Movie Poster Display!


This display is a fantastic showpiece for parties or movie nights. Leave a comment with your feedback and share your experience creating your own!


Feel free to explore additional features and customize the display for other creative uses. Happy building!