Gemini AI + Cardputer + LVGL

When I got the Cardputer, like everyone, I tried apps from M5Burner. I tried an app called Gemini Remix. After a few tries, I decided to redesign the app. Most developers use M5gfx with its default fonts and colors. I planned to try the LVGL library instead. I have created UIs with LVGL for various display devices, but I didn’t find any working example for Cardputer with LVGL. Luckily, I found lv_m5_emulator, then I ported the code for Cardputer with the help of ChatGPT.

Step 1: Planning the UI/UX using Figma

I use Figma for planning and designing the UI and elements. I choose Google Fonts directly within Figma to see how the UI looks. I also plan the screen transitions. For this project, I need a loading screen that displays the logo and name for 5 seconds, then transitions to a status screen. This screen shows the Wi-Fi connection status, API status, and other information and instructions. For example, if Wi-Fi is not configured, it displays instructions for setting it up; the same goes for the API. This screen also shows how to use keys like Menu, Focus, Up, and Down. This helps users set up the device and use it easily without confusion.

Step 2: Design the UI in Squareline Studio

First, you need to create a project, which can be done in two ways. One way is to choose an Arduino board and set all the settings manually. The second way is to use a Squareline Studio OBP (Project template for a specific board). I have created an OBP for Cardputer, which you can download from my GitHub. Instructions can be found on GitHub as well.

After completing the design in Figma, export the necessary elements as.png files and move them to the assets folder within the Squareline Studio project folder. Also, download the font from Google Fonts and place it in the assets folder.

Using the basic widgets, I created the UI. The Button widget is used for "Reset" and "Back to Chat" actions. The Textarea widget is used on the status screen and AI chat screen for both input text and displaying AI responses. I styled all the widgets to match the design style.

After completing the design, export the project:

• Go to Export > Create Template Project.
• Copy the exported project folder to a new location (keep the original template unchanged for future UI exports) and rename it as shown in the image. This step is necessary for it to work in PlatformIO.
• In Squareline Studio, go to File > Project Settings and set the UI Files Export Path to the PlatformIO project folder under lib > ui > src. This setup will make future fine-tuning in Squareline Studio easier.
• Then, select Export > Exported UI Files. This exports the modified UI to the PlatformIO UI folder. The lib > ui > src folder will contain all UI elements, including fonts, images, screens, etc.

Open the renamed project folder in VS Code and ensure the PlatformIO plugin is installed. This will load the project. The platformio.ini file contains all the necessary libraries for the device to function properly.

Step 3: Add Functional Logic to Make it Work

I use Wi-Fi Manager to set up Wi-Fi credentials and a web server to configure the Gemini API, with the API stored in NVS. It's a bit challenging to explain all the code details here, but you can find the complete code on my GitHub. The firmware is also available on M5Burner and is compatible with M5Launcher.

If you're interested, you can check out the "How-To" video on my YouTube channel.

Thank you

If you have any questions or suggestions don't hesitate to leave a comment below.