Maker.io main logo

A Simple Raspberry Pi IoT Clock Using Kiosk Mode

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.‎

display_1

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.‎

imager_2

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‎

scanner_3

With the IP address handy, we can SSH into the Pi using a program such as PuTTY or Tera Term.‎

address_4

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.‎

window_5

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_6

Select “Boot / Auto Login”:‎

boot_7

Select “Console Autologin”:‎

console_8

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.‎

制造商零件编号 PIM579
HYPERPIXEL 2.1 ROUND TOUCH
Pimoroni Ltd
¥527.45
Details
制造商零件编号 USDCOEM-16GB
16GB 3D MICROSD CARD (-25C - +85
Delkin Devices, Inc.
¥86.85
Details
制造商零件编号 SC0623
AC/DC WALL MNT ADAPTER 5.1V 13W
Raspberry Pi
¥65.12
Details
制造商零件编号 SC0022
SBC 1.2GHZ 4 CORE 1GB RAM
Raspberry Pi
¥284.90
Details
Add all DigiKey Parts to Cart
TechForum

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Visit TechForum