How to build an IoT-based digital menu using the MIT Inventor App

Digitalization has significantly shifted us toward a paperless society, impacting both personal and professional lives. Take restaurants, for example, where many establishments now offer digital menus. Providing a digital option offers several advantages to restaurant owners, their customers, and the environment. It reduces paper waste, allowing for an interactive experience and real-time updates for the menu options and prices.

In this project, we’ll create a digital menu hosted on an Arduino touchscreen shield. Customers can use it to order food, flag over their waiter, and request their bill.

This Arduino-based digital device connects with any Android smartphone through Bluetooth so that the restaurant staff can receive their customers’ orders on a mobile app. The mobile app is built on MIT App Inventor.

Required components

Arduino Mega x1
3.5-inch TFT Touchscreen shield for Arduino (ILI9486) x1
HC-05 Bluetooth module x1
Connecting wires/Jumper wires
Smartphone to run the restaurant app x1

Circuit connections
To build a digital menu, we must first interface the 3.5-inch touchscreen shield and HC-05 Bluetooth module with Arduino Mega. The touchscreen shield fits over the Arduino board. To interface the Bluetooth module, connect its TX and RX with Arduino’s RX1 and TX1 pins, respectively. Connect the HC-05 Bluetooth’s VCC and GND pins with Arduino’s 5V out and ground pins.

The Arduino sketch
After completing the circuit connections, upload the following sketch to Arduino Mega.

The mobile app
To build the mobile application for this project, login to your MIT App Inventor account. Create a new project by navigating to Projects-> Start New Project.

Let’s save this mobile application as ‘Restaurant_Menu_Ordering_App’. In the designer window, drag and drop a listpicker, button, listview, Bluetooth client, and a clock element on the screen. Next, change the title of the screen to ‘Restaurant App.’

Set the properties of the listpicker as shown below.

Set the properties of the button as shown below.

Open the ‘Blocks’ editor and program the app as per the following logic.

How it works
The restaurant app, which is developed for use on a smartphone, is connected to Arduino via a Bluetooth module. Arduino displays the menu items on a fitted touchscreen. When a user touches an item, Arduino “senses” the pixels corresponding to that item. It then transmits a related text message over the Bluetooth module.

This text is stored in a list/array and added to the listview element. Any items added to this list correspond to the food orders or requests made by the customer. After fulfilling a customer request, the respective item from the list can be removed from the app by selecting an item and clicking the “Remove” button. This application can handle endless requests/list items at any time.

The code
The sketch begins by importing the Adafruit_GFX.h, MCUFRIEND_kbv.h, and TouchScreen.h libraries. The Adafruit_GFX.h and MCUFRIEND_kbv.h libraries are required to work with the TFT display module. The Touchscreen.h is used for the “touch” function on the screen. This is followed by a declaration of the color constants and the instantiation of a TFT display object.

Next, the variables are declared for the touch function configuration, and an object of the touchscreen class is instantiated.

In the setup() function, the touchscreen is initialized, reset, and filled with a black background. The baud rate for Serial port and the Serial1 (where the Bluetooth module is connected) is set to 9600 bps.

The menu items are displayed on the touchscreen by calling the user-defined function Menu(). The Menu() function has the following code, defining a user interface with the restaurant’s menu. It fits the 320×480 pixels resolution of the touchscreen.

In the loop() function, Arduino “senses” the taps made by the user on the screen, mapping the corresponding pixels. Based on these pixels, a related text is transmitted over the Serial1 port, where the Bluetooth module is connected.

The mobile application receives the text, adds it to the array, and displays it on a listview. (These texts relate to a food order, a request for water or the bill, or for the waiter to stop by a specific table.) Any requested items can be deleted by selecting them and clicking the “Remove” button.

Results