GUI Development in NECTO Studio via LVGL

The GUI Development workflow in NECTO Studio leverages the LVGL open-source graphics library, which is already built into the mikroSDK framework inside NECTO Studio.
With this integration, engineers can create rich, touch-enabled graphical user interfaces for embedded devices without needing external LVGL setup or manual library integration.
This section explains how to start a project, configure hardware, and design GUIs, while highlighting important compiler and memory considerations.

Quick Start: Creating a GUI Project

Follow these steps to create your first LVGL-based GUI project in NECTO Studio.

Step 1: Launch NECTO Studio

Open NECTO Studio and navigate to the New Project wizard from the landing page.
This wizard guides you through project creation and ensures all LVGL dependencies are automatically included.

Step 2: Define Project Name and Path

Provide a project name that reflects the application (e.g., WeatherStation_GUI).
Choose a destination folder where all project files will be stored.
Click Next to continue.

💡 Tip: Use short, descriptive names without spaces to avoid path issues in CMake.

Step 3: Select Project Type

Choose Complex Designer Project as the project type.
This enables the LVGL design workspace and all related TFT components.
📌 Reference Image:

⚠️ Important: Standard (non-designer) or bare-metal projects do not support GUI development.

Step 4: Select Hardware Setup

Pick the correct hardware configuration for your TFT display.
For example, choose a UNI-DS v8 or a development board with a 4.3" or 7" TFT module.
📌 Reference Image:

Hardware Requirements

A TFT board must be included in the hardware setup.
📌 Example:
The project must use GCC or Clang toolchains (ARM or RISC-V).
LVGL GUI projects cannot run with MikroC AI for ARM, AVR, dsPIC, PIC, or PIC32.

💡 Tip: If you are unsure about the correct TFT display size, start with a generic TFT configuration and adjust later.
NECTO allows easy re-configuration of hardware profiles.

Step 5: Initial Workspace

After selecting hardware, click Choose to finalize the setup.
NECTO opens the initial LVGL workspace, which includes:
Code editor in the central area for direct LVGL development.
Project manager on the right for file organization and build control.
Design action button on the left-most sidebar to access the GUI designer.
📌 Screenshot:

This workspace is code-centric by default, allowing developers to write initialization code or integrate board peripherals before moving to visual design.

Step 6: Open Visual Design Workspace

Click the Design button in the left sidebar to enter the visual editor.
The Design workspace provides:
A central preview of the selected TFT board (3", 4", 5", or 7").
A right-side LVGL components panel featuring common UI widgets:
- Box, Button, Arc, Checkbox, Bar, Slider, Switch, Roller, LED, Label, Color Wheel, Spinner, Text Area, Drop Down, Spinbox, Line, Image, Keyboard, and more.
  📌 Screenshot:

From here, you can drag, drop, and configure components to quickly prototype an interface.
All changes are immediately reflected in the underlying LVGL code.

Configuration Notes: Heavy vs Light LVGL

LVGL projects can use heavy or light configurations, depending on MCU memory.

Heavy configuration enables advanced LVGL features (complex animations, anti-aliased graphics, multiple fonts).
Light configuration reduces memory usage for smaller MCUs.

Configuration	Minimum MCU Specs	Typical Use
Heavy	≥128 KB RAM, ≥512 KB FLASH	High-resolution TFTs, complex GUIs
Light	Below these limits	Low-power or memory-constrained MCUs

💡 Tip: If you experience build failures or runtime crashes on a small MCU, switch to a light configuration to reduce resource usage.

Toolchain-Specific Considerations

MCHP XC16

The LVGL TFT modules are not built when using mchp_xc16.
If your project requires LVGL, select a GCC or Clang toolchain instead.

Bare Metal Projects

LVGL GUI development is not available in bare-metal projects.
Always create a Complex Designer Project (or another NECTO SDK-based type) to enable GUI features.

Recommended Development Workflow

Create a Complex Designer Project.
Select a TFT-enabled hardware configuration.
Verify that GCC or Clang is the active toolchain.
Implement core logic in the code editor first (sensor drivers, communication stacks, etc.).
Switch to the Design workspace to build the GUI layout.
Iterate between code and design to integrate LVGL event callbacks and real hardware input.

💡 Tip: Use the split-screen mode in NECTO to view generated code while editing the design.

Design & Coding Tips

Always check MCU memory requirements before enabling heavy LVGL configuration.
Organize GUI elements in layers and groups for better performance and readability.
Combine Code Assistant with LVGL projects to automatically generate Click board drivers and integrate sensor data into the GUI.

Next Steps

Once the GUI workspace is set up:

Add components: buttons, sliders, labels, gauges, and custom graphics.
Develop application logic:
Bind GUI events to MCU peripherals (e.g., update a label with live temperature data).
Build and deploy the project:
Test on physical hardware using NECTO Studio build & flash.
Optionally use Planet Debug for remote testing and live GUI updates.

📌 Reference images:

📌 Reference Image:
📌 Reference Image:
📌 Example:
📌 Screenshot:
📌 Screenshot:

By following these guidelines, you can design responsive, professional-looking GUIs for embedded systems entirely within NECTO Studio - without worrying about external library integration or complex LVGL setup.
The combination of visual editing and direct LVGL coding provides both rapid prototyping and deep customization, making NECTO Studio an ideal environment for modern embedded GUI development.