Using VSCode Plugin to Develop Applications

HoneyGUI Visual Designer is a powerful VSCode extension that provides a visual design environment, code generation, and real-time simulation tools for embedded GUI application development.

Key Features

• Fully Offline Development: No network dependency, all features run locally

• Visual Design: Drag and drop design interface, what you see is what you get

• HML File Format: XML-based interface description language, version control friendly

• Code Protection Mechanism: User code is never overwritten, supports multiple redesigns

• One-Stop Workflow: Integrated design, coding, compilation, and simulation workflow

• Cross-Platform Support: Full support for Windows/Linux/macOS

Development Workflow

Typical workflow for developing HoneyGUI applications with VSCode plugin:

1. Create Project - Using templates or from scratch

2. Visual Interface Design - Drag components, configure properties

3. Generate C Code - Automatically scan all HML files

4. Build and Simulate - SCons + GCC + SDL2

5. Deploy to Embedded Devices - Choose appropriate deployment strategy

• Quick Start
  • Installation Requirements
  • Installing the Plugin
  • Environment Check
  • Creating Your First Project
  • Designing Interface
  • Generating Code
  • Build and Simulation
  • Next Steps
• Designer Usage
  • Designer Interface
  • Component Library
  • Canvas Operations
  • Component Tree
  • Properties Panel
  • Keyboard Shortcuts
  • Context Menu
  • Best Practices
  • Next Steps
• HML File Format
  • Overview
  • Basic Structure
  • Component Definition
  • Component Types
  • Event Configuration
  • Complete Examples
  • Manual HML Editing
  • Best Practices
  • Next Steps
• Code Generation
  • Overview
  • Code Generation Flow
  • Architecture Design
  • File Naming and Directory Rules
  • Usage
  • Code Protected Regions
  • Generated Code Structure
  • Important Notes
  • View Switch Implementation
  • Building Generated Code
  • Next Steps
• Event System
  • Core Concepts
  • UI Design Changes
  • Event Types
  • Component Supported Events
  • Action Types
  • Message System
  • Data Structures
  • C Code Generation Implementation
  • UI Design
  • Practical Examples
  • Best Practices
  • Next Steps
• Resource Management
  • Overview
  • Why JS Version?
  • Feature Comparison
  • Tool Directory Structure
  • Image Resource Management
  • 3D Model Resource Management
  • Font Resource Management
  • Resource Packaging
  • Performance Data
  • Usage Recommendations
  • Troubleshooting
  • Next Steps
• Build and Simulation
  • Overview
  • Development Environment Requirements
  • Project Structure
  • Project Configuration File
  • Build Process
  • Build Configuration
  • Build with CMake (Optional)
  • Running the Simulator
  • Common Issues
  • Performance Optimization
  • Continuous Integration
  • Next Steps
• Embedded Deployment
  • Overview
  • Solution 1: Generate C Code
  • Solution 2: Generate HML (XML)
  • Solution 3: Generate HML (BIN)
  • Event Handling Mechanism (Common)
  • Data Binding (Solutions 2 & 3 Support)
  • Solution Selection Guide
  • Performance and Resource Comparison
  • Development Recommendations
  • Common Questions
  • Next Steps