Problem Overview

Digital directories provide valuable ways to help customers find shops, businesses, office locations, and even specific individuals. In fact, digital directories have become so common in retail, communication, and facility businesses that consumers often expect them to be provided on demand, whether they are going to the airport, a shopping mall, or a hospital campus. See Figure 4-1.

In addition to location data and map listings, digital catalogs can also provide local information, including weather, transportation options, and digital advertisements. The most advanced directories can even send map data to mobile phones.

Interactive digital media help retail businesses interact better with and help their customers. Most retailers have begun to use touchscreen, retail, digital signage solutions and creative interactive content to attract customers and improve their in-store experiences. This includes using interactive mirrors, videos, touchscreens, and more. It can be cost effective and easy to set up a robust interactive digital solution with a credit card-sized SBC, such as Raspberry Pi.

You can use touchscreen navigation solutions to help your visitors and customers easily navigate your store. You can design the most advanced digital signage path-finding solution on a very small budget using Raspberry Pi. Furthermore, you can remotely update directory information. Interactive way-finding maps provide three-dimensional navigation to help customers locate events, promotions, businesses, or other destinations at your facility.

Business Impact

Interactive directories and mobile robots with touchscreens are changing the way retail stores advertise and help customers. Way-finding touchscreen signage enables the retail industry to create a more efficient shopping experience by meticulously drawing a map of a mall. Through interactive experiences, retail screens can modernize the store’s image and create a lasting, positive experience. The most important thing is to provide customers with the most convenient and immediate way to obtain the information they are looking for in a mall or store.

Traditionally, visitors may have used a printed brochure of a shopping mall map to guide them. However, a one-page flyer cannot include everything you want to reach out to every customer. An interactive touchscreen-enabled directory—or perhaps even a mobile directory robot—can provide guidance to customers and promotion opportunities to retailers.

By simply using a single-board Human Machine Interface (HMI), you can easily promote in-store offers, display current information about events, and deliver other important messages to customers. With Raspberry Pi-based interactive devices integrated with a touchscreen and customized using dashboard software, retailers can display all kinds of mall activities. You can design a multitude of scenarios to meet customers’ shopping demands in different areas of your store, help them find the right routes, and reach them with advertisements.

For example, you can build a directory screen to show the different stores available in the mall or you can build a directory to show which items are in stock at each register. This type of directory is very helpful to shoppers, especially when they are looking for something specific. See Figure 4-2.

A touchscreen directory allows shoppers to find information about outlets and amenities and allows business owners to advertise special promotions in order to attract more customers.

A touchscreen directory embedded with a Raspberry Pi can be installed anywhere. You can set it up in the lobby of the mall or you can install it at the entrance of your shop. It can also be used for internal purposes if you are looking for a simple directory to guide employees through your offices. You can display anything you like on this directory, such as information about holidays, employee contact details, or anything else that is important to you and your company. Raspberry Pi has many applications in retail environments because it is small and inexpensive, yet versatile enough to handle all kinds of tasks that come your way. This chapter provides a step-by-step guide to building a touchscreen directory using a Raspberry Pi-powered HMI device with a high-resolution touchscreen display.

Related Knowledge

In this scenario, Raspberry Pi is playing the role of the Human Machine Interface (HMI). HMIs are devices that allow humans to interact with machine systems. These devices work by sending and receiving signals that can be read by humans and machines. HMI devices can be as simple as a light that flashes when some event occurs or more complex, like a device that is used to control industrial processes. See Figure 4-3.

HMIs, also known as user interfaces (UIs) or operator interface terminals (OITs), include hardware and software solutions. They are used between systems/machines and human operators to exchange information and communication. HMIs can handle the control, management, and/or visualization of equipment processes, ranging from simple touchscreen inputs to control panels of highly complex industrial automation systems.

HMIs come in various form factors, from built-in screens on machines, to panel PCs, to tablets, but no matter what their format or the terminology you use, their purpose is to provide information on mechanical performance and progress.

Let’s look at Seeed Studio’s reTerminal as an example, powered by the Raspberry Pi 4 Computer Module with 4GB RAM and 32GB eMMC. It is a sturdy, reliable HMI device that can easily and efficiently work with IoT and cloud systems to unlock endless scenarios at the edge. See Figure 4-4.

In an industrial environment, HMIs play a key role. In the context of increasing digitization, HMIs have become irreplaceable as a control plane for industrial operations and equipment of various scales.

For example, factory operators can use HMIs to monitor, manage, and control autonomous machines and production lines. On the other hand, HMIs have become an important part of the operability of the system. They can control field-deployed equipment that may not be physically reachable, such as in large-scale, remote IoT.

In order to create a shopping directory UI that can be run on a Raspberry Pi, you need to choose a suitable Python GUI (graphical user interface) framework tool. As an interactive programming language, Python is currently leading the trend (Top Computer Languages 2021: StatisticsTimes.com) and is relatively easy to use. Starting to write a GUI framework is not a difficult task.

Python has been the leading programming language among five countries: the United States, India, Germany, the United Kingdom, and France, which surpasses the second highest usage of Java. Python’s usage is more than double that of Java in Germany, the United Kingdom, and France.

Python provides multiple choices, such as PyQt, Tkinter (see Figure 4-5), wxPython, PySimpleGUI, and PyGTK, for GUI frameworks on different platforms (Windows, Linux, and Mac).

For this chapter’s project, a digital shopping directory deployed into reTerminal, we use Tkinter as the GUI framework.

Tkinter is a Python-binding package for the Tk GUI toolkit, built with the standards of the Python interface of the Tk GUI toolkit and the GUI toolkit of Python. Tkinter includes Python’s standard libraries for Linux, Microsoft Windows, and macOS X.

The tkinter package (the Tk interface) is the standard Python interface to the Tk GUI toolkit. Since Tkinter is built into the Python installation package, you can import the Tkinter library after installing Python. For the purposes of simplifying the interface development, we utilize PAGE, a GUI generator, to create the layout and populate it with different widgets. PAGE is a cross-platform drag-and-drop GUI generator. It allows users to easily build a Python GUI window containing a series of Tk and ttk widgets. PAGE is derived from Virtual Tcl, forked to generate Python modules to implement the desired GUI.

Implementation

This section walks you through the development of a touchscreen-based application for the Raspberry Pi and the use of the Tkinter module in Python. The main purpose of this project is to demonstrate how to build user interfaces using Python and Tkinter. The main advantage of using Tkinter is its simplicity and ease of use. At the end of this project, you will have built a simple directory system that can be used on a touchscreen for the Raspberry Pi.

Basic Tkinter Usage

You can find the following code in the Chapter_4/exercise_1 folder.

The first step in this project is to start Python and load the Tkinter module :

import tkinter as tk

This imports the module and makes it available for use. Next, create a Tkinter window:

win = tk.Tk()

This creates a blank window that can be used to draw objects. The next step is to add a few options to the window:

win.resizable(width=False, height=False) # Disallow resizing of window

win.title('Tkinter Hello World Demo') # Set title bar text

With these options set, you can start drawing on the window:

win.title('Tkinter Hello World Demo') # Set title bar text

win.geometry('320x240') # Set window size

The next step is to add some objects to the windows:

Label = tk.Label(win, text='Hello Tkinter',

bg='blue', fg='white',

relief='raised', anchor='nw').place(x = 100, y = 60)

Button = tk.Button(win, command=win.quit, text='Quit', bg='orange', width=10).place(x = 100, y = 100)

The Label object allows you to draw text on the screen. The parameters are self-explanatory, with the exception of the anchor parameter, which determines where the text will appear. The Button object allows you to draw a button on the screen that can be clicked. The quit command is called when the button is clicked. Finally, you need to add an event handler for when the Quit button is clicked:

win.bind('<Button-1>', win.quit)  # This registers the Quit handler to the button <Button-1>

This registers an event handler when the user clicks the button. We use the win.quit function to close the window, which ensures that the program stops. The final step is to start the window.

win.mainloop()

When the window starts, it will show the Label and Button objects, as shown in Figure 4-6.

You can now use the mouse or a touchscreen to click the button and close the window.

Build an Interface with the PAGE GUI Generator

Use the steps in the following sections to build the interface using the PAGE GUI generator .

Install PAGE GUI Generator

It’s better to install the PAGE GUI generator and set up the preliminary design on your PC. Next are the instructions for installing and using PAGE on Ubuntu 20.04 Desktop.

Download page-6.2.tgz from https://sourceforge.net/projects/page/files/page/.

Place the page-6.2.tgz archive in the Chapter_4 directory and extract it with the following command (see Figure 4-7):

tar zxvf page-6.2.tgz

This will put the whole distribution in the subdirectory called page.

Run the configure script from the page folder.

./configure

If you want to use JPG images in PAGE, you need to install three additional packages using the following commands to insert JPG images:

sudo apt-get libtk-img python3-pil python3-pil.imagetk

Run this command in the folder you extracted the PAGE editor to:

./page

From the File menu, choose New to start new project-building interfaces. Save this to the exercise_2 folder in Chapter_4 under the name directory.tcl.

Create the UI with Tkinter Widgets in PAGE

Next, you are going to create an instance of tk.Label, insert the shopping mall map image into that label, create several buttons to pin at different locations, and finally add the corresponding message box to shops using another instance of tk.Label.

The first thing you should do is change the name of the main window. You can do that by editing the Alias and Title entries in the Attribute Editor. Set Alias to Directory and Title to Directory. Additionally, set the width to 1280 and the height to 720, and make them non-resizable.

Then, click Label in the Widget Toolbar and click an empty space in the Design window. After that, in the Attribute Editor on the right side of the screen, write “map” in the Alias field. Then choose the suitable image (an example map is provided in the Chapter_4/working_project/images folder) by clicking the three dots icon next to the image field. Set the label width to 1280 and the height to 720. See Figure 4-8.

After you import the image, place three Button widgets at different locations. You can do that the same way that you placed the map label—by clicking the Button widget in the Widget Toolbar and then clicking the empty space in the window. See Figure 4-9.

Note

If you get the You cannot insert a widget inside a label! error message, it means you’re trying to insert the Button widget into the map label. Click the empty space in the window instead. After the button is placed in the window, move it to the desired position. Choose an icon for every button in the Attribute Editor by clicking the three dots icon next to the image field. Be sure to provide a meaningful alias for every button, such as sears_button.

Finally, place a shop description. To do that, create a new label and place it inside the Main window. Edit the alias to description_label. Don’t set the text yet, as you’ll do that later, when you write the program logic.

Note

You need to create only one label for the shop description.

Write Program Logic in Python

While you have several buttons, you only need one label, since you can move the label and change its text programmatically, depending on which button was pressed.

Generate the Python GUI from Tkinter. To do that, first choose Gen_Python ➤ Generate Support Module and then click Save in the newly opened window. Second, choose Gen_Python ➤ Generate Python GUI and then click Save in newly opened window. After that, you’ll have two new files in the exercise_2 folder: directory.py and directory_support.py. See Figure 4-10.

You can open the exported Python file in your favorite IDE (we recommend using Visual Studio Code) to write code logic about what will happen after the button is pressed. See Figure 4-11.

Add the show_label() method to the Directory class. That method is responsible for placing the label in a certain position and configuring the label text.

def show_label(self, text, x, y):

       self.Label2.place(relx=x, rely=y, height=100, width=200)

       self.Label2.configure(text=text)

Then add the btn_name_x, btn_name_y, and btn_name_txt variables to each of the buttons. Here is an example for zara_button (see Figure 4-12):

self.zara_button = tk.Button(top)

zara_txt = """Zara

Opening 9AM 10PM

Yonge St #17600

975-914-1580

Promotion items:"""

zara_btn_x = 0.914

zara_btn_y = 0.389

self.zara_button.place(relx=zara_btn_x, rely=zara_btn_y, height=19, width=20)

self.zara_button.configure(activebackground="#f9f9f9")

self.zara_button.configure(borderwidth="2")

photo_location = os.path.join(prog_location,"../working_project/images/icon_arrowbutton.gif")

global _img3

_img3 = tk.PhotoImage(file=photo_location)

self.zara_button.configure(image=_img3)

self.zara_button.configure(text='''Button''')

self.zara_button.configure(text='''Button''',

command = lambda: self.show_label(zara_txt, x = zara_btn_x - 0.05, y = zara_btn_y + 0.05))

The only change to make to other buttons are the x, y positions and the text that gets passed to the show_label() method of the Directory class, which was automatically generated by the PAGE GUI editor. You can see the full example in the Chapter_4/working_project folder. See Figure 4-13.

You can run this by executing the following command from the project folder:

DISPLAY=:0 python3 directory.py

Pro Tips

What are some alternatives to the relatively simple interface offered by Tkinter? Other popular and much more flexible options for creating user interfaces with Python include PyQt and PySimpleGUI. They can be a bit more challenging to learn, but offer a lot of power and extensibility.

Qt for Python: Qt5.x Qt is a set of C++ libraries and tools for creating GUIs. PySide2 is an official binding of Qt5.x for Python. PySide2 also supports remote debugging with the Qt Creator IDE, as well as cross-platform deployment. See Figure 4-14.

PySide2 and Qt5 are based on the Qt for Python project. There is strong compatibility between the two frameworks, making it nearly 99.9 percent of the same API. PySide2 and Qt5 provide powerful and simple features for Python developers. There are also abundant documentation and examples you can find in the developer community for both beginners and experts to use as examples when developing applications. Qt for Python is popular, with extensive community support and more than 1 million software developers.

PySimpleGUI (see Figure 4-15) was developed by Mike B in 2018, and it aims to make GUI programming easier for Python beginners. PySimpleGUI combines the features of several popular Python GUI frameworks (such as Qt and Tkinter) and provides standardized code examples to help beginners build Lego-style GUIs. Naturally, this means that even beginners can easily create beautiful and intuitive interfaces without having to delve into the complexity of framework functions!

Summary

In the chapter, you learned how to transform Raspberry Pi 4 into an interactive directory to help mall customers or other retail environments. The chapter discussed the development of a touchscreen-based application for the Raspberry Pi, together with the usage of the Tkinter module in Python.

The main purpose of this project is to demonstrate how to build user interfaces using Python and Tkinter. The main advantage of using Tkinter is its simplicity and ease of use. At the end of this project, you will have built a simple directory system that can be used on a touchscreen for the Raspberry Pi. It can be run, for example, on the Seeed Studio reTerminal, a carrier board for Raspberry Pi 4 CM. We used the PAGE GUI generator to generate a UI for the directory and then translated it into a Python 3 project.