Settings
Fast Delivery
Free Shipping
Incoterms
Payment Types
Marketplace Product
Mfr Part # PIM579
HYPERPIXEL 2.1 ROUND TOUCH
Pimoroni Ltd
A Simple Raspberry Pi IoT Clock Using Kiosk Mode
3
2022-10-19 | By Nate_Larson
License: See Original Project
I recently came in possession of a Pimoroni HyperPixel high-resolution Raspberry Pi display while working with Odd Jayy on one of his infamous robotic builds; and not just any HyperPixel, but the 2.1 round HyperPixel. In my need to get acquainted with this display, I wanted to find a project that would help motivate me to better understand how to use it.
Round displays are a bit of an oddity, so the first project that came to mind was an analog-style clock. For this quick and easy web-based clock build, I used a Raspberry Pi 3 B, but any modern Raspberry Pi computer with a 40-pin header should work.
Basic Raspberry Pi Setup
Begin by flashing a microSD card with the Raspberry Pi OS Lite (32-bit) operating system (OS) using the Raspberry Pi Imager. This can be found in the “Raspberry Pi OS (other)” category when selecting the operating system within the program. We can also use the settings menu at this time to assign our Pi’s hostname, username, and unique password; then enable SSH, configure wireless LAN details, and set appropriate location details, which will make the rest of the setup easier.
Once the microSD card is flashed with the OS, insert it into the Pi, attach the HyperPixel display to the PI’s 40-pin header, connect power, and allow the Pi to boot. Keep in mind the first boot often takes a bit longer as the initial setup is being completed, so allow the Pi a few minutes to complete the process.
Once you believe the Pi has finished booting, we need to find its IP address. We can do this several ways, but typically it is done by logging into the network router and looking at the list of connected clients. Otherwise, we can use an IP scanner, such as Angry IP Scanner, on any device connected to the same Wi-Fi network as the Pi. Look for a device with the hostname that was specified earlier while flashing the OS. In my case, I found the Pi at 192.168.40.7
With the IP address handy, we can SSH into the Pi using a program such as PuTTY or Tera Term.
Log in with the username and password that was set when flashing the OS to the SD card, and you should find yourself presented with a terminal window.
To avoid potential errors, it is advised to ensure the Pi has an updated list of repo’s by running the following update command at this time.
Copy Code
sudo apt update
HyperPixel Software
Now, to set up the HyperPixel, we need to download and install Pimoroni’s driver code.
Input each of the following commands into the terminal:
Copy Code
git clone https://github.com/pimoroni/hyperpixel2r
cd hyperpixel2r
sudo ./install.sh
Note: If you get an error message after the first command above, you may need to install git using the following command:
Copy Code
sudo apt install git
With the drivers installed we just need to edit the config.txt file to get the display working. This can be done using the following command:
Copy Code
sudo nano /boot/config.txt
Scroll down until you find the following line and comment it out by typing a # at the start of the line.
Copy Code
dtoverlay=vc4-kms-v3d
Save these changes by pressing Ctrl + X, then Y to save changes, and Enter to keep the original filename.
Kiosk Mode Setup
To ensure the Pi automatically logs in and launches the page we want to display, type the following in the terminal to open the Raspberry Pi Configuration Tool:
Copy Code
sudo raspi-config
Select “System Options”:
Select “Boot / Auto Login”:
Select “Console Autologin”:
Then choose “Finish” and select “Yes” when asked to reboot. Once the Pi has rebooted, we will need to reconnect via SSH again.
Since we used the Lite version of the OS, there is no graphical user interface (GUI) to display our clock, so we need to install a minimal GUI for our project to work. We can do so by running the following command in the terminal window:
Copy Code
sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox
Next, we can install the Chromium web browser to display our clock webpage with the following command:
Copy Code
sudo apt-get install --no-install-recommends chromium-browser
Openbox is a window manager that was installed with the first of the above command. We will configure this to launch the chromium browser and load a designated webpage during startup by editing the autostart and environment files.
Open the autostart file:
Copy Code
sudo nano /etc/xdg/openbox/autostart
Add the following commands to the file to prevent the screen from turning off since we want the screen and webpage to continuously display:
Copy Code
xset -dpms # turn off display power management system
xset s noblank # turn off screen blanking
xset s off # turn off screen saver
Also, add the following lines to the autostart file to help prevent Chromium from showing any error or update messages, dialog boxes, or anything else that may obstruct the webpage:
Copy Code
# Remove exit errors from the config files that could trigger a warning
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\+"/"exit_type":"Normal"/' ~/.config/chromium/Default/Preferences
# Run Chromium in kiosk mode
chromium-browser --noerrdialogs --disable-infobars --kiosk $KIOSK_URL
--check-for-update-interval=31536000
Save these updates and close the file by pressing Ctrl + X, then Y to save changes, and Enter to keep the original filename.
Now, open the environment file.
Copy Code
sudo nano /etc/xdg/openbox/environment
This is where we will define what webpage Chromium should display, such as the Digi-Key website in the below example. I searched online for clockface websites. When I found one, I liked that displayed a live clock centered and full page, I copied the URL for the page. There are lots of available options that already exist, or if you have experience with web page creation this would be a good opportunity to create your own. The clockface page I eventually settled on for my design is https://www.clockfaceonline.co.uk/clocks/magical/, though you can choose any page you want.
Add this text and close and save the file:
Copy Code
export KIOSK_URL= https://www.digikey.com
If you ever need to change the webpage displayed, you only need to edit this file.
All that remains now is to configure the Pi to launch X server on boot.
Check if ~/.bash_profile is already present:
Copy Code
ls -la ~/.bash_profile
If so, you can edit the file:
Copy Code
sudo nano ~/.bash_profile
However, if it doesn’t, you will first need to create the file with the following command before opening the file to edit:
Copy Code
touch ~/.bash_profile
Add the following text to the file. This will start X server and since the HyperPixel is a touch screen display, remove the cursor.
Copy Code
[[ -z $DISPLAY && $XDG_VTNR -eq 1 ]] && startx -- -nocursor
Save and close the file, then run the below command:
Copy Code
source ~/.bash_profile
If you do not receive any errors, reboot the Pi and your build is complete.
Copy Code
sudo reboot
Taking it Further
In this example, we created a clock; but this can easily be adapted to other web pages or even specific files. This device is capable of displaying anything that can be natively displayed in Chromium browser, including local files. For example, you could shut down the Pi, remove the microSD card, and return it to your PC. Then, add whatever file you want to display, such as an animated GIF, to the boot directory of the card.
Put the memory card back in your Pi, boot it up, and change the environment file text to the following, where the file name matches the file to be displayed.
Copy Code
Export KIOSK_URL=file:///boot/my_gif_file.gif
Save the file and reboot. Now your Pi will display the file you have selected.
Conclusion
We now have a Raspberry Pi-powered, web-based clock beautifully displayed on a round HyperPixel display. This build can easily be adapted to display any webpage or even a smart home dashboard. The touch screen of the display allows easy interaction with mobile-friendly webpages, and the kiosk setup allows webpages to be launched full screen automatically on boot.
Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.
Denmark