Pi Pico Macropad With a Touchscreen

Turn your Raspberry Pi Pico into a USB-HID device with a touchscreen interface! In this project, we’ll set up the programming environment in the Arduino IDE, configure libraries for the 3.5" Pico Touch LCD shield, test basic functionality, create simple buttons (for copy & paste), display custom icons, and even use Windows environment variables to launch programs.

Raspberry Pi Pico (RP2040)

3.5" Pico Touch LCD Shield (here is a bundle for both)

USB Cable (micro USB for the Pi Pico)

Computer with the Arduino IDE installed

(Optional) Additional icons or graphics you want to display

Install the Raspberry Pi Pico Board Package

Open the Arduino IDE and go to File > Preferences

In the field Additional Boards Manager URLs, add:

https://github.com/earlephilhower/arduino-pico/releases/download/global/package_rp2040_index.json

and Click OK.

Next go to Tools > Board > Boards Manager.

Type "Pico" in the search field.

Install Raspberry Pi Pico/RP2040 (by Earle F. Philhower, III) (e.g., version 3.9.1).

Select Raspberry Pi Pico under Tools > Board > Raspberry Pi RP2040 Boards.

Install Necessary Libraries

Go to Tools > Manage Libraries.

Search for and install each of the following libraries:

1. TFT_eSPI (latest version by Bodmer)
2. TFT_eWidget (latest version by Bodmer)
3. Adafruit_TinyUSB (latest version by Adafruit)

The TFT_eSPI library requires a User_Setup_Select.h file that includes or points to the correct setup configuration for your display.

Locate the TFT_eSPI installation folder (often in Documents > Arduino > libraries > TFT_eSPI).

Download the correct setup files for the 3.5" ILI9341-based Pico shield. (User_Setup_Select.h, Setup60_RP2040_ILI9341.h)

And place "User_Setup_Select.h" into the main TFT_eSPI folder, place "Setup60_RP2040_ILI9341.h" into TFT_eSPI > User_Setups

This ensures that your display is configured properly.

Before creating interactive buttons or displaying icons, let’s do a quick test with some graphics and touchscreen calibration. Below is an example initialTest.ino sketch.

You will need to hold the bootsel button down while connecting the USB cable, before you upload this sketch let's make sure that the settings under "Tools" is correct:

What this code does:

1. Calibrates the touchscreen (storing calibration data in LittleFS).
2. Performs a quick graphics test: lines, rectangles, circles, and text.
3. Inverts the display color scheme every second to show that everything is running.

Next, let’s make the display interactive. Below is an example example_SimpleButtons.ino that creates two large buttons for "COPY" and "PASTE". When touched, they send a respective Ctrl+C or Ctrl+V keystroke via USB HID.

initButtonUL(...)

Purpose: Initializes the button’s position, size, colors, and optional label.

1. Coordinates & Dimensions:
2. startX, startY specify the top-left corner of the button on the display.
3. BUTTON_W, BUTTON_H define the button's width and height in pixels.
4. Colors:
5. Outline color (e.g., TFT_WHITE)
6. Fill color (e.g., TFT_RED)
7. Text color (e.g., TFT_YELLOW)
8. Label Text and Text Size:
9. The string (e.g., "COPY")
10. The text size multiplier (e.g., 2 for slightly larger text)

UL stands for “Upper Left” – meaning the coordinates passed are for the top-left corner of the button.

drawSmoothButton(...)

Purpose: Renders the button on the display with anti-aliased (smooth) edges and optional outline width.

1. The first parameter indicates if the button should be drawn in its “pressed” style.
2. The second parameter is the outline or “frame” thickness.
3. The third parameter is the background color around the button (so it can smooth the edges).

setPressAction(...) and setReleaseAction(...)

Purpose: Assign functions (callbacks) to be executed on press or release.

You define two separate functions:

1. btn_1_pressAction – runs when the button is touched (pressed)
2. btn_1_releaseAction – runs when the touch is lifted (button is released)

In the example, these functions send keyboard shortcuts (Ctrl+C for copy, Ctrl+V for paste) via USB HID.

press(...) and contains(...)

Purpose:

1. contains(x, y) checks if a given touch coordinate ‘x‘,‘y‘`x`, `y`‘x‘,‘y‘ lies within the button’s boundaries.
2. press(true/false) updates the internal state of the button to pressed or released.

In the loop() function, you’ll typically:

1. Get the touchscreen coordinates (t_x, t_y).
2. If the screen is pressed, call btn[i]->contains(t_x, t_y) to detect if that specific button is touched.
3. If contains(...) is true, call btn[i]->press(true) and then btn[i]->pressAction().
4. If the screen is not pressed, call btn[i]->press(false) and then btn[i]->releaseAction().

This sequence ensures each button’s callback fires at the correct time.

Compiler warning note: You may see a warning about converting string literals (e.g., "COPY") to char*. This is because in C++, string literals are constant and should ideally be const char*. The code still functions but you can eliminate the warning by modifying the ButtonWidget class to accept const char*.

Now, let’s add custom icons instead of just text. We can convert PNG images to C arrays using a tool such as ImageConverter 565 v1.2 (found in some UTFT libraries) or other online converters.

Converting an Image

1. Download the UTFT library if needed, or locate a similar image converter.
2. Run ImageConverter 565.
3. Open your .png file (e.g., arduino.png).
4. Save it to generate a .c file with a 16-bit (565) encoded array.
5. Copy the generated array into a new header file, for example: ardicon.h.
6. Add any missing definitions, such as:

Place ardicon.h in the same folder as your .ino sketch.

Using pushImage() to Display the Icon

1. Include the header in your sketch:

1. Use tft.pushImage(x, y, width, height, arrayName) to draw the icon at the desired coordinates.
2. If colors appear swapped, add tft.setSwapBytes(true); before pushImage().

To make your custom buttons do something beyond copy/paste, you can assign them to launch programs, open folders, etc. One trick is to create a Windows environment variable that points to a specific .exe file and then reference it via WIN+R.

Creating a Windows Environment Variable

1. Open the Control Panel.
2. Go to System and Security > System > Advanced system settings.
3. Click Environment Variables.
4. In User variables or System variables, click New.
5. Enter a Variable name (e.g., ARDU) and a Value (the full path to your Arduino IDE.exe).
6. Close all dialogs with OK.

Now, you can open the Run window (WIN+R) and type %ARDU% to start the Arduino IDE.

Starting the Arduino IDE from a Button

Below is a snippet from an example_startArduino.ino. When the third button is pressed, it:

1. Opens Run with WIN+R.
2. Types %ARDU%.
3. Presses Enter to launch the IDE.

Ready to fill the entire screen? You can create multiple rows of buttons, each with icons and different actions. For instance:

1. Button to Lock the PC (WIN+L)
2. Button to open File Explorer (WIN+E)
3. Button to Shutdown or run any custom command

You can add whatever you want.

Here is also the expanded sketch showing six buttons, each with different icons and assigned actions. Please note that if you copy this directly, you must also have all the corresponding icon header files (e.g., Ardicon.h, Exploricon.h, Lockicon.h, Pwdownicon.h) or your own equivalents. The code snippet is quite long, but it follows exactly the same pattern we’ve already discussed.

You now have a fully-functional Raspberry Pi Pico + Touchscreen Shield that:

1. Displays graphics and icons.
2. Acts as a USB HID keyboard.
3. Can map touchscreen presses to Windows shortcuts, environment variables, and commands.

Feel free to customize each button’s actions. You might:

1. Launch your favorite apps or games
2. Automate text entries
3. Use it as a macro keypad for editing software or programming