anyuianyui
Home
Getting Started
Documentation
Download
  • English
  • 简体中文
Home
Getting Started
Documentation
Download
  • English
  • 简体中文
  • Getting Started

    • Getting Started

This guide provides concise instructions to help you quickly get started with anyui for LVGL UI development.

Installation

For detailed installation instructions, please refer to the Installation guide.

Project Creation

After launching the application, click the "+" button to start creating a new project using the create wizard to configure your project settings:

New Project

Configure your project with the following parameters:

  • Select your target platform specification, Simulator

Target

  • Choose from predefined templates or initialize a blank project, EmptyUI

Template

  • Assign a unique project name
  • Configure color depth to match your display hardware capabilities
  • Set screen dimensions according to your target display specifications
  • Select the LVGL baseline version

Config

Design Environment Layout

After entering the project editor, the interface consists of the following elements:

  • Menu bar at the top
  • Sidebar on the left
  • Toolbar beneath the menu
  • Properties panel on the right
  • Status bar at the bottom
  • Design canvas in the center
  • Widgetbar docked besdide the canvas

Layout

Design Workflow

Begin your UI design by dragging and dropping components from the widget library, arranging them on the canvas, and editing their properties.

Editor

The development environment provides:

  • Widget Library: Repository of available UI components for drag-and-drop operations
  • Design Canvas: Primary workspace for UI layout and design
  • Properties Inspector: Configuration panel for selected component attributes
  • Component Hierarchy: Tree view of the current UI component structure

Code Generation

After completing your design, generate code for your project by clicking the "Generate Code" button in the toolbar.

Toolbar

Click "Generate Code" to generate code for your project and switch to the "Code" tab to view the generated code.

Generate Code

Code

Simulation

Preview your design by clicking the "Simulate" button to launch a local simulation.

Simulator

Project Persistence

All design work remains in memory during your session. Save your project to persistently store your work for future editing.

Next Steps

  • Documentation - Comprehensive documentation for components and advanced features
  • Higher Order Components - Advanced UI patterns and composite components
  • Asset Management - Resource pipeline and optimization strategies
  • Multi-screen Applications - Complex application architecture patterns

For technical issues and troubleshooting, consult the FAQ section or contact technical support through official channels.