Building a Smart E-Ink To-Do List

Our use of MQTT in Chapter 5, Building Your Own Automatic Pet Food Dispenser, was very simplistic. We were only sending (empty) messages to a channel the Arduino was subscribed to. In this project, we will make use of the payload, which can be used to append text (or binary data) to an MQTT message.

Our mission is to build a smart e-ink display that can be used to remind yourself of tasks such as taking out the trash or buying milk. You can hang it next to your door so you can always see what needs to be done when you leave your flat or house. E-ink displays are great for displaying text or images that do not change often. You have probably heard of eBook readers before. They use e-ink displays as well. E-ink displays are very energy efficient and only consume energy when the content is being updated. Once new content is...

Technical requirements

You will need the following components to build the smart e-ink to-do list:

• Arduino MKR WiFi 1010: https://store.arduino.cc/usa/mkr-wifi-1010
• Waveshare 4.2-inch e-ink display module, three-color (black, white, red), 400x300: https://www.waveshare.com/4.2inch-e-paper-module-b.htm
• Micro USB cable: https://www.sparkfun.com/products/10215

The following tools and libraries, which we installed together in Chapter 4, Setting Up a Lab Environment, are required:

• Arduino IDE
• Arduino MKR WiFi 1010 drivers
• WiFiNINA Arduino library
• MQTT Arduino library

Please download the source code from the book's repository (https://github.com/PacktPublishing/Hands-on-Internet-of-Things-with-MQTT). You will find all relevant sketches for this chapter in the ch6 folder.

Check out the following video to see the Code in Action:
http...

Connecting the e-paper module/running the example

The next step is to connect the e-paper display to the Arduino MKR WiFi 1010. By looking at the connectors of the e-paper panel and comparing it to the available ports of the Arduino MKR WiFi 1010, we will see that the following port names match:

• GND
• VCC (3.3V)

Ground (GND) and power (VCC) are needed for every module, so no surprises here. For the other ports, we have to find out how to make it work.

My first step here would be to run a Google Search to find out if somebody posted a tutorial for the module we want to use with our microcontroller. This would mean searching for the Arduino MKR WiFi 1010 Waveshare 4.2 e-paper module.

I could not find any results (probably because Arduino MKR WiFi 1010 was very new when writing the book). To find out which ports to use, the best bet is to search for...

Simplifying the e-paper example

In order to create a code base we can work with, which only includes the code we really need, we have to get rid of the following:

• Code for different microcontrollers: As we are working with the Arduino MKR WiFi 1010, we don't need code that runs on every possible microcontroller.
• Code to display images on the e-paper display: We only want to display text. If you want to add image functionality on your own later on, you can re-integrate the bits and pieces to make it work.
• Code for fast refreshes: There are different ways to refresh the display. We don't update the display very often and can, therefore, use the slower but simpler method.

Deleting code from an existing example (or reading about it) is probably not the most exciting thing to do, but bear with me. Being able to combine existing examples and modify them to your needs...

Modifying the e-paper example

Now we need to do a couple of changes to the code. Currently the helloWorld function always prints the same text to the display. We want to make it dynamic, first by sending text via the serial port (using the Arduino serial monitor), then via MQTT. We will also make the text bigger by using another font file, rotate the text (so we can display longer words/phrases) and add the possibility to color the text red.

Our e-paper project can be used in various ways, but the main purpose is to attach it to your wall near the flat/house entry door and send text to it via your smartphone or desktop computer. This way, you can remind yourself to bring out the trash or buy groceries and you see it whenever you walk past the door. If the thing you want to remind yourself of is not super important, the text will be black. If it really is important, it will...

Making your e-paper device accessible via serial

The next thing we want to do is make the text on the screen dynamic by adding serial communication. At the beginning, the text was static and defined as the HelloWorld variable. Now we have changed it to be a dynamic parameter of our setText function, but the way we use it is still static, because we just pass the "Hello display" static text to it via setText("Hello display");.

To make use of the serial port, let's find an example first that reads in a string from the serial port. We will then integrate it into our sketch. All the serial port examples can be found under File | Examples | 04.Communication.

Sadly, there is none that receives an input string and then does something with it.

We can have a look at the Arduino serial reference (https://www.arduino.cc/reference/en/language/functions...

Preparing the MQTT integration

Before we integrate the MQTT code into our sketch, we first need to check our MQTT connection by following these steps:

1. Please open the mqtt_shiftr_send_receive_example example, which you will find in the general | arduino folder inside the downloaded source code repository. 

The example, as well as all other MQTT code running on the Arduino MKR WiFi 1010,  depends on two libraries:

• • WiFiNINA: This provides network functionality to the Arduino MKR WiFi 1010.
  • MQTT (by Joel Gaehwiler): This enables your Arduino to communicate with other devices and servers via MQTT.

You should have these installed already. If not, install them via the Arduino Library Manager. I am using WiFiNINA v1.30 and MQTT v2.4.3.

Before you can upload the code, you need to set your Wi-Fi name and password, which can often...

Making your e-paper device accessible with MQTT

Integrating MQTT into our existing code is easy. We already have all the pieces ready:

• Code to display a text on the e-paper module (our main sketch)
• An example to send text via MQTT

We now need to combine these two so the text we receive via MQTT on the Arduino is used to set the text on the display. Because we have a good abstraction of our code with the setText function, we only have to add one more line of code after integrating the code from the example.

The MQTT example consists of the following parts:

• Pre-compiler definitions and variable declarations (at the top of the sketch).
• void setup(): Called once at the beginning, this initializes the serial port and calls the Wi-Fi/MQTT connect function.
• void loop(): The function that is executed repeatedly after the setup function has finished.
• void connect(): Establishes...

Sending messages via MQTT

Our device is now ready to receive messages via MQTT. The MQTT server we are using features an MQTT, as well as an HTTP-interface. There are many different ways that we can now send messages to our device:

• Via Terminal/PowerShell as MQTT messages using an MQTT client such as Mosquitto
• Via Terminal/PowerShell as HTTP messages using curl
• Via a third-party iOS/Android app
• Via a third-party macOS/Windows/Linux app
• Via a third-party web-based client (for example, http://www.hivemq.com/demos/websocket-client/)
• Via a custom-made website using a JavaScript-MQTT client
• Via a custom Android/iOS/macOS/Linux/Windows app using MQTT-client

Basically everything is possible depending on how you send text to your device. MQTT is amazing!

Because programming a custom app would be a bit much on top of what you have already learned, we will focus on the easier...

Enhancements and building a case

Right now, your prototype looks very much like a prototype—an e-panel module connected with a bunch of wires to an Arduino MKR WiFi 1010. In Chapter 8, Presenting Your Own Prototype, you will get an idea of how to present it in a nicer way. The first step, which does not consume too much time, is to create a case using thick paper or cardboard. Typically you would measure the dimensions of your components and build a custom case for it using paper/cardboard, a pencil, tape, and scissors.

Do you have some ideas about what modules/components you could add to it? Maybe a button to reset the text? When your e-paper to-do device reminds you to take out the trash and you prepare to leave the flat, it would be nice to just press a physical button to clear the display instead of getting out your smartphone and sending an MQTT message to clear...

Summary

In this chapter, you learned how to display text on an e-paper display and how to send text to it either via serial port or MQTT.

You learned how to make use of MQTT features such as QoS 1 and retained messages. QoS 1 makes sure messages are delivered at least once. The last message sent with the retained message flag is stored for each channel. When clients subscribe to it, they will instantly receive the last available retained message, even when no message has been published since the Arduino resubscribed. 

You also learned how to send messages using different QoS settings as well as the retained message flag via the free command-line tool Mosquitto.

In the next chapter, you will build another MQTT-connected device: a smart productivity cube. Using a custom made orientation sensor, this device can be used to track the time that you spend watching TV or exercising...

Questions

1. What does QoS stand for?
2. Why are we using QoS 1 instead of QoS 0 or QoS 2?
3. How can messages be sent to the MQTT server besides using the Mosquitto command-line tool?
4. What is a client ID?
5. Can there be multiple loop and setup functions in one sketch?
6. Try using one of the Android or iOS app presented in Chapter 3, Getting Started with MQTT, to publish messages to our channel.
7. Try using your own login data of the shiftr.io server instead of the public try/try login.

Further reading

• Waveshare e-paper module product information website: https://www.waveshare.com/wiki/4.2inch_e-Paper_Module
• shiftr.io MQTT reference: https://docs.shiftr.io/interfaces/mqtt/