Lopaka

Appearance

Getting Started with Lopaka: Build Your First Arduino GUI in 10 Minutes ​

Published on Lopaka.app — The free web-based LVGL GUI builder for embedded developers

Introduction ​

If you've ever tried to build a graphical user interface for an Arduino TFT display, you know the pain: positioning every pixel by hand, guessing coordinates, flashing to hardware, seeing it's wrong, adjusting, re-flashing, and repeating the cycle until you want to throw your breadboard across the room.

There's a better way.

In this tutorial, you'll build your first Arduino GUI in under 10 minutes using Lopaka — a free, web-based tool that lets you design LVGL interfaces with drag-and-drop, then exports clean C code ready for your Arduino project.

No downloads. No installs. No environment setup. Just open your browser and start building.

What You'll Build ​

A simple but functional sensor display that shows:

  • Temperature reading with a large numeric display
  • Status indicator (OK / Warning / Error)
  • A button to toggle between Celsius and Fahrenheit
  • A progress bar showing battery level

This is the kind of interface you'd find on a handheld sensor device, weather station, or battery monitor.

Prerequisites ​

  • A web browser (Chrome, Firefox, Safari, or Edge)
  • An Arduino board with a TFT display (we'll use Arduino Uno + ILI9341 2.8" as an example)
  • Basic familiarity with Arduino IDE
  • That's it.

Step 1: Create Your Project ​

  1. Open lopaka.app in your browser
  2. Click "New Project"
  3. Select your platform: Arduino
  4. Choose your display: ILI9341 (320x240)
  5. Give your project a name: "Sensor Display"
  6. Click "Create"

You'll see a blank canvas with a widget panel on the left and a properties panel on the right. If it's your first time, the onboarding tour will guide you through the interface — take 60 seconds to follow along, or skip if you prefer to explore on your own.

Step 2: Add a Title Label ​

  1. From the widget panel, drag a Label onto the canvas
  2. Position it near the top center
  3. In the properties panel:
    • Text: Sensor Monitor
    • Font: LV_FONT_DEFAULT_24 (or the largest available)
    • Alignment: Center
    • Color: White (or your preferred text color)

You should see a large title at the top of your display preview.

Step 3: Add the Temperature Display ​

  1. Drag another Label onto the canvas
  2. Position it in the upper-middle area
  3. Properties:
    • Text: 25.6°C
    • Font: LV_FONT_DEFAULT_36 (extra large)
    • Alignment: Center
    • Color: Bright green or cyan (something that stands out)

This will be your main sensor reading. In production code, you'll update this value from your actual sensor.

Step 4: Add a Status Indicator ​

  1. Drag a Label below the temperature
  2. Properties:
    • Text: STATUS: OK
    • Font: LV_FONT_DEFAULT_16
    • Color: Green

For a more visual indicator, you can also add a LED widget (if available in your LVGL version) next to the status text.

Step 5: Add the Unit Toggle Button ​

  1. Drag a Button onto the canvas
  2. Position it below the status indicator
  3. Properties:
    • Button text: Switch to °F
    • Width: 160px
    • Height: 40px
    • Style: Rounded corners, contrasting color

This button will let users toggle between temperature units. In your Arduino code, you'll wire up the button's event handler to convert and display the value.

Step 6: Add a Battery Progress Bar ​

  1. Drag a Bar (progress bar) widget onto the canvas
  2. Position it near the bottom
  3. Properties:
    • Width: 280px
    • Height: 20px
    • Value: 75 (out of 100)
    • Color: Green (or yellow/orange for lower values)
  4. Add a small Label above it: Battery: 75%

Step 7: Style and Polish ​

Now make it look professional:

  1. Background: Set the screen background to a dark color (dark gray or navy) for better contrast
  2. Spacing: Ensure consistent margins between elements (10-15px gaps)
  3. Alignment: Center-align all text elements
  4. Colors: Use a consistent color scheme — green for OK status, red for warnings, white for labels

Your interface should look something like this:

┌─────────────────────────────┐
│                             │
│       Sensor Monitor        │
│                             │
│         25.6°C              │
│                             │
│       STATUS: OK            │
│                             │
│    [  Switch to °F  ]       │
│                             │
│   Battery: 75%              │
│   ██████████████░░░░        │
│                             │
└─────────────────────────────┘

Step 8: Export the Code ​

  1. Click the "Export" button in the top toolbar
  2. Select Arduino as your target platform
  3. Choose your output format (single .c file or full project)
  4. Click "Download"

You'll get clean, readable LVGL C code that you can drop directly into your Arduino sketch.

Step 9: Integrate with Your Arduino Code ​

Here's how to use the exported code:

cpp
#include <TFT_eSPI.h>
#include <lvgl.h>
#include "ui_SensorDisplay.h"  // Your exported file

TFT_eSPI tft = TFT_eSPI();

void setup() {
  // Initialize display
  tft.begin();
  tft.setRotation(1);

  // Initialize LVGL
  lv_init();
  lv_tft_init();

  // Create the UI from Lopaka
  ui_SensorDisplay_init();

  // Initialize your sensor
  dht.begin();
}

void loop() {
  // Read sensor
  float temp = dht.readTemperature();

  // Update the label (use the variable name from exported code)
  lv_label_set_text_fmt(ui_TempLabel, "%.1f°C", temp);

  // Update battery bar (example value)
  lv_bar_set_value(ui_BatteryBar, 75, LV_ANIM_ON);

  // Handle button events (auto-wired from Lopaka)
  lv_timer_handler();
  delay(5);
}

Step 10: Test on Hardware ​

  1. Upload the sketch to your Arduino
  2. Verify the display shows your interface correctly
  3. Test the button interaction
  4. Confirm sensor readings update in real-time

What's Next? ​

You've built your first GUI in under 10 minutes. Now try:

  • Adding more screens: Create a settings page or historical data view
  • Custom widgets: Add gauges, charts, or custom-drawn elements
  • Share your design: Use Lopaka's shareable links to show your work to others
  • Explore advanced features: Animations, styles, and event callbacks

Why Lopaka? ​

  • No setup: Runs entirely in your browser — no downloads, no installs
  • Visual design: See your UI as you build it, no guessing coordinates
  • Clean code export: Production-ready LVGL C code, not a black-box runtime
  • Shareable: Send your designs to teammates or the community with a link
  • Free to start: No credit card required

Resources ​

Have questions? Drop them in the comments below or join us on Discord. Happy building!