Click here to see more about my services
In my previous post, I talked about setting up a Raspberry Pi to work as a video layout machine, looping a video with optional control with a USB controller. I noted that I had used the controller to restart the video – this was because I had planned to have a simple counter counting up that could be fed into a multi view for timing segments of a show, and this would also go into an ISO recording if you were so inclined.
Since this is a useful use case, I figured I’d look into making it even more useful by adding the current time and date to the display. Obviously, we can’t use a video for this, so we will re-create the functionality using a web browser on the Pi set to kiosk mode running a couple of javascript pages that will again react to our USB controller.
As before, if this were to be a delivered product to a client, we would want to instead get some buttons that we can wire up to the GPIO.
This is assuming a basic Raspberry Pi build. I started with a fresh install of Raspian OS Full 32bit. I booted up, disabled bluetooth and set up wifi. I also made sure that my display settings were set to 1080p60.
Once the software is all installed, you can set up ssh for changing the video source out but I’d strongly suggest disabling wifi before taking it to an event. If you’re installing at a client location you might want to research code to lock down the ethernet too, and change the login password.
Install all software:
Use Terminal to apt-get with the following commands :
sudo apt-get install update
sudo pip3 install pynput
sudo apt-get install qjoypad
sudo apt install chromium-browser -y
sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit
sudo apt-get install chromium x11-xserver-utils unclutter
Open and set the buttons for qjoypad.
This may take some trial and error. Open the app from the main menu – Games section. Save the profile as ‘kiosk’
I set one button to be the key ‘n’ which I will use to reset my timer. The second button I set as ‘esc’ and will be used to shutdown the Pi safely. I close this key as I don’t need to use it if I need to log on and make changes to the set up in the future, and if I need the esc key I can turn off the script ahead of time.
You may want to set another button to operate as Alt+F4, as this is the key command to exit kiosk mode on chromium. I didn’t bother, as chances are if I want to make any changes to this I’ll be plugging in a keyboard anyway.
Write python script for shutdowns
In Terminal use :
mkdir /home/pi/scripts
sudo nano /home/pi/scripts/shutdown.py
use the following code :
import os
from pynput.keyboard import Key, Listener
def on_press(key):
print('{0} pressed'.format(
key))
def on_release(key):
if key == Key.esc:
os.system("sudo shutdown -h now")
return False
# Collect events until released
with Listener(
on_press=on_press,
on_release=on_release) as listener:
listener.join()
Save by pressing ctrl+x, y, return
Set up our webpage HTML and CSS files
CLICK HERE for the code (version 1.2) for these files. Save them to the desktop. The code here does two things.
1. We have a javascript running that will take the time and date from the host system and display it in a mid-grey color. If this doesn’t show the right time, adjust the clock settings on the Pi.
2. A second javascript is running that will listen for keyboard imputes. The ‘n’ key can be pressed (our controller in this case) and start counting up a light-grey HH:MM:SS counter. Pressing the button again will reset the counter, turning it red for 5 seconds so that it’s clear the change has taken place.
These timed segments are matches against an overall event timer and recorded at the bottom of the screen.
This script also listens for the K key to end the event. Pressing N on a stopped event will wipe the recorded segments and start over.
The layout of the page is designed to mimic the look of the other BlackMagic ATEM multi view displays, and the colour scheme means that the video bit-rate on an ISO recording won’t be astronomical.
Optional: install fonts
The font’s I used are to closely match the rest of the UI on the ATEM Mini lineup. The font is free for commercial use and included in the file with the HTML and CSS files.
If you want to use them too, you need to open the file manager and navigate to the /home/pi/ folder. Press ctrl+h to show hidden files, then make a new folder called .fonts. The . at the start makes it a hidden folder and it’s what Raspian is looking for when it looks for fonts.
Copy the fonts from the file you downloaded into this folder.
Set the script, video and qjoypad to run at boot
In Terminal again, use :
sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
At the bottom add :
/usr/bin/chromium --kiosk --disable-restore-session-state /home/pi/Desktop/index.html
@unclutter -idle 0.1 -root
@qjoypad kiosk
@sudo python3 /home/pi/scripts/shutdown.py
Save by pressing ctrl+x, y, return
Our end result: A small and cheap box that when it receives power will boot up, and display a webpage that we have on our desktop. Pressing one button on our controller will start or restart our segment counter, and pressing another button will initiate a safe shutdown of the Pi.
Our magic is all in the code at the end here: we run our python script which is constantly checking for the ‘esc’ key which will initiate a safe shutdown. qjoypad is listening for button presses on the controller and translating them to keyboard presses. And Chromium is loading into kiosk mode which is full screen and eliminates things such as the url bar and window dressing. The final key to this is unclutter, which hides the mouse when it’s not moving.
There are several other uses for something like this of course. If you have wifi access for the Pi on location you could be pulling up a google doc that team members are updating though out an event, for example.
Previous
Next