Getting Started¶

This guide will help you quickly get started with BEKEN LVGL UI Designer and create your first UI project in 5 minutes.

🎯 Create Your First Project¶

Step 1: Launch the Application¶

When you first launch BEKEN LVGL UI Designer, you will see the home page with the following options: - New Project - Create a new UI project - Import Project - Import an existing project - Recent Projects - Quick access to recently used projects

Step 2: Create a New Project¶

1. Click the "New Project" button
2. In the dialog that appears, select a project template:
3. Blank Project - Start from scratch
4. Example Template - Use a preset example project

1. Configure project information:
2. Project Name: Name your project (only numbers, letters, and underscores allowed)
3. Save Location: Choose the folder to save the project
4. Screen Size: Set the screen resolution of the target device (e.g., 480x272)

1. Click the "Create" button

Step 3: Understand the Workspace¶

After creating the project, you will enter the workspace interface, which consists of 5 main areas:

• Toolbar: Project info, save, undo/redo, preview and other functions
• Component Library: All available UI components (buttons, labels, etc.)
• Canvas: Visual design area, drag components here
• Component Tree: Shows the hierarchy of pages and components
• Properties Panel: Edit properties and styles of selected components

🎨 Design Your First Interface¶

Add a Label¶

1. Drag "Label" from the Component Library to the canvas
2. Find the "Text" property in the Properties Panel
3. Enter text: Hello LVGL!
4. Adjust font size and color:
5. Select the "Font" section
6. Set Size to 24
7. Set Color to blue

Add a Button¶

1. Drag "Button" from the Component Library to the canvas
2. Place the button below the label
3. Set the button text to Click Me
4. Adjust button style:
5. In the Style panel, set the background color
6. Set Border Radius to 10px

Adjust Layout¶

1. Select components in the Canvas
2. Drag with mouse to adjust position
3. Drag edge control points to adjust size
4. Or enter precise values in the Properties Panel

💾 Save Project¶

• Projects are automatically saved (check the save status indicator in the toolbar)
• Or press Ctrl + S to manually save

📄 Preview and Generate Code¶

Preview Interface¶

1. Select preview method:
2. C Language - For standard LVGL projects, click Generate + Compile + Run in the menu
3. MicroPython - For MicroPython environments, click Generate + Run in the menu
4. Code is generated in the project directory

---

Related Documents: Back to Home | Workspace Guide | FAQ