In this tutorial we will show how to make a content display running a webpage with dynamic content, getting updated, at a given interval. We assume you already have a website you wish to show and gives all the instructions on how to set up a Raspberry Pi to show the website, and refresh the site, to account for dynamic content.
The idea is of course that you, with a bit of web skills, can design your own content page (webpage), pulling in dynamic content from various sources and showing an always updated view of this on a display. Hopefully you will find interesting use cases for this.
Some background on our use case (optional read)
We used it to solve the boring problem of having a display showing the lab opening hours. Our content is located on a WordPress site, where we can’t access the source code. Therefore, programming the needed features directly into the webpage is not an option. To deal with this we created a workaround where a server script produces a images of our opening hours calendar (an exchange calendar), that WordPress then can point to. The calendar image gets updated every second minute, but in order to also get updated the image on the display, we need WordPress to auto refresh the page. Otherwise it would keep showing the image from when the system was first started.
Hardware needed
Raspberry Pi 4, with:
– The latest Raspberry Pi OS, and a stable internet connection.
– (we used the OS version released 2021-05-07)
– Power supply, keyboard, and mouse.
Display (HDMI enabled), with:
– Power cable
– HDMI to micro HDMI cable
How it works
The setup uses two main software components, which is a combination of two command line tools. Xdotool for refreshing the browser with a terminal command and Watch for timing this to happen at a specified interval. The needed commands for these tools are put into a script, together with the command for starting the browser in full screen, with a given URL (the page you want it to show). This script is then set to launch every time the Pi boots up, to ensure stability of the system.
In our case we use a vertical screen, so the display orientation also needs to be flipped, and the browser zoom settings needs to get adjusted for the best view of the content.
Setup guide
Below are all the steps you need to do to make your own content/info display. Connect the hardware, boot up the Pi, and go through the steps 🙂
1) Installing Xdotool
First we need to ensure we have the two command line tools in place. Watch comes with the OS, but we need to install the Xdotool by running the following command in a terminal window:
sudo apt-get install xdotool
2) Prepare the script
The next thing is to prepare the script with the commands for Watch and Xdotool. Make sure you are in the home folder (/home/pi) of the terminal window, and do the following steps.
Create script file with nano text editor: nano start_URLrefresh.sh
Copy this script code:
bin/sleep 6 /usr/bin/lxterminal --command watch -n 30 xdotool key ctrl+F5 & echo "opening watch window" /usr/bin/lxterminal --command chromium-browser --start-fullscreen https://airlab.itu.dk/opening-hours/ echo "starting browser in full screen"
Paste the script code into the nano text editor (use the mouse, keyboard shortcuts won’t work)
Change the webpage URL (https://airlab.itu.dk/opening-hours/) to the one you wish to use
Close the nano editor: ctrl+x
Save changes: shift+y
Change permissions for the file: sudo chmod 755 start_URLrefresh.sh
Make the file executable: sudo chmod +x start_URLrefresh.sh
Test the script with this command: ./start_URLrefresh.sh
After a few seconds the Chromium browser should start with your webpage in full screen, refreshing the page every 30 seconds.
NB: if you want to stop the setup, close both the browser window and the Watch window, since the watch window is triggering the keyboard shortcut for updating the browser, and this can give problems when operating the Pi.
In order to change the refresh interval, open the script file again with: nano start_URLrefresh.sh
Change the number 30 to your wished interval (in seconds) in this line:
/usr/bin/lxterminal –command watch -n 30 xdotool key ctrl+F5 &
2) Running the script at system boot
Open the autostart settings file by typing the following command in a terminal window:
sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
Add the following line to the bottom of the document:
@/usr/bin/bash /home/pi/start_URLrefresh.sh
Close and save the settings file: (press) ctrl+x to exit, then: shift+y to save
Test that the autostart works by rebooting the Pi. The same thing should now happen at boot, as when you manually runs the start_URLrefresh.sh script.
Now the system is actually set up. The following two small steps was needed for our setup, but might no apply for you.
3) Change display orientation (optional)
Since our screen is mounted vertically, we needed to change the setting for this. With the Pi 4 models this have luckily been made very easy inside the GUI.
PI MENU: Preferences -> Screen Configuration (new window opens)
TOP MENU: Configure -> Screens -> HDMI-1 -> Orientation -> Left
TOP MENU: Configure -> Apply
The orientation change is applied, and a dialogue opens where you need to click OK, to make the change permanent.
4) Adjust zoom level (optional)
In our case the browser window needs to be displayed with zoom level 75% to give the best view of the content page.
You can set this up in the Chromium browsers from the menu (3 vertical dots). This change is permanent.
Removing chromium pop-ups with python
In case the Pi is shut off without closing the browser first, chromium with issues a pop-up asking to restore previous pages. This pop-up demands a user interaction, and therefore we will get rid of it by using a python script that emulates a mouse click on “cancel” on this pop-up.
Install ‘pyautogui’ by typing in a Terminal:
pip install pyautogui
Create a pythonscript in your home directory named ‘close_popups.py’, and make sure to add it to autostart:
sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
Add the following line:
@/usr/bin/python /home/pi/close_popups.py
From here we need to find the specific cursor coordinates to perform a click. We will do this by creating a script that waits for 15 seconds before printing the current coordinates:
import pyautogui, time
time.sleep(20)
print(pyautogui.position())
Save these three lines into the pythonscript and save it. Open a terminal and launch the script by typing:
python close_popups.py
You now have 20 seconds to open chromium and move the cursor to hover the cancel button (you may need to have Chromium “ready” with the pop-up, in full screen – or you can extend the timer to have better time for it. This is all about trial and error…)
Return to the terminal and take note of the coordinates. In our case, for a vertical 1920×1080 display, the Chromium ‘cancel’ button is located at x=920, y=140.
Update the python script so instead of displaying coordinates, it performs a click. You should keep the timer in the beginning to allow the Pi to fully boot and launch chromium fullscreen. You can optionally add a click in the bottom of the screen to ensure the cursor is out of the way. Note that you cannot use ultimate values such as 1920, but should be just inside this:
import pyautogui, time
time.sleep(20)
pyautogui.click(920, 140)
pyautogui.click(2, 1918)
Make sure that the mouseclick is “harmless” in case the pop-up doesn’t appear. Or adjust for it so that both a case of with or without popup will not perform unwanted interaction on your web-page display.
Done 🙂