Building an Embedded Graphical UI for the Arduino Nano RP2040 Connect Using Squareline Studio [shorts #6]

I recently discovered Squareline Studio, a simple-to-use graphical UI designer for all kinds of projects, ranging from desktop applications to embedded devices. The editor is extremely easy to use and comes with all the widgets (such as buttons, textboxes, and checkboxes) UI designers would expect. However, as the program is still quite new, it also still comes with a few bugs and quirks, and some processes are not as straightforward as they might initially seem.

The UI Design Process from Start to Finish

There’s not much to write about designing a UI in Squareline Studio. Everyone who’s already worked with such an editor before will know how it works. For everyone else, the process can be summarized in a few sentences. Squareline Studio supports adding screens, which are like pages on a website. These screens contain widgets, and users can navigate between the screens to perform certain actions. The widgets are UI elements such as buttons, textboxes, and other input and output components.

Designers can change the look and feel of widgets as well as their behavior without having to write any code. I uploaded a video recently that goes over the process of designing a UI in Squareline Studio. That video also discusses some of the bugs one may encounter when using the designer program.

Exporting a Squareline Studio Project to an Arduino Nano RP2040 Connect

Now comes the more interesting part. The export process is not too complicated on paper. However, in reality, many things may go wrong, which leads to the microcontroller not displaying anything or its program memory getting corrupted, requiring a hard reset.

Unfortunately, I struggled quite a bit when exporting the UI design to any Arduino board, not just the Nano RP2040 Connect. I couldn’t get it to work on an ESP8266-based board whatsoever. The program wouldn’t even compile, as it couldn’t fit in the MCU’s RAM. The same goes for the Arduino UNO, the Nano 33 BLE, and Nano 33 IoT. However, the UI should work on any ESP32-based development board, and it does absolutely work on the Arduino Nano RP2040 Connect and all other RP2040-based development boards.

However, first, it’s important to use the Arduino MBed OS core in the Arduino IDE when using the official Arduino RP2040 board. However, using any other RP2040-based Arduino-compatible board requires using the Earle Philhower Core.

Next, when using the official Arduino board, then the configuration file must be configured to use the physical pin numbers of the RP2040 (p20, p7, etc.), not the Arduino pin names (e.g., D12, D13, etc.). However, for any other RP2040-based boards, use the digital pin numbers (D12, D13, …). Failing to do so will result in the display not showing any elements (in the best case) and getting stuck on a white screen. This issue was particularly difficult to debug, as any other display examples (that communicate with the screen directly) would work just fine. This problem is due to how TFT-eSPI handles pin numbers internally, as the library calls the Arduino helper function that translates physical pin numbers to digital pins.

Either way, the following video shows how to export a Squareline UI to an Arduino:

The process is pretty straightforward once one knows about the pin-numbering discrepancies. In Squareline Studio, export the template project. Save this project in the Arduino sketch folder. Then, export the UI files. Next, open the Arduino IDE and, in the preferences menu, set the sketch location to the previously exported template project. That folder contains the necessary libraries and UI design files, and changing the sketch location ensures that the Arduino IDE can find all files necessary for compiling the program. Next, navigate to the freshly created template project and open the library folder. In it, there is another folder for the TFT_eSPI library. Open that folder and open the User_Setup.h file. Use this file to configure the library. Usually, updating the pin number definitions suffices. However, some displays may require additional settings or loading a different driver. Finally, compile the code and upload it to the development board, which then displays the UI on the attached TFT screen.