⚙️ Project Setup
Correct initialization ensures that your Artok Studio environment perfectly mirrors your target hardware constraints. This prevents scaling issues and performance bottlenecks during deployment.
1. Initializing a New Project
When you launch Artok Studio, select "New Project" from the Dashboard. You will be prompted to define the hardware foundation of your HMI.
📟 Target Hardware Selection
Artok v2.4.0 provides pre-configured profiles for industry-standard MCUs. Selecting a profile automatically optimizes the Asset Packer and Memory Management for that specific chip.
| Target Category | Examples | Best For |
|---|---|---|
| Dualturb Core | DT-S3, DT-M4 | High-performance industrial HMIs |
| Standard MCU | STM32F4/F7, ESP32-S3 | General-purpose embedded projects |
| MPU / Linux | Raspberry Pi, i.MX6 | Complex, high-resolution dashboards |
2. Display Configuration
The Display Settings determine the pixel-perfect accuracy of your UI.
📏 Resolution (Canvas Size)
Enter the width and height of your physical display in pixels.
- Standard Industrial:
800 x 480(7-inch) or480 x 272(4.3-inch). - Custom: Artok supports any resolution up to 4K for MPU-based targets.
🎨 Color Depth (BPP)
Select the Bits Per Pixel (BPP) that matches your LCD driver and frame buffer memory:
- 16-bit (RGB565): Recommended for most MCUs. Balances color quality and memory usage.
- 24/32-bit (ARGB8888): Used for MPUs or high-end MCUs with external SDRAM. Supports full transparency layers.
3. Workspace Initialization
Once you click "Initialize," Artok sets up your workspace:
- The Canvas: Automatically locked to your chosen resolution to prevent "design overflow."
- AI Constraints: The AI Layout Engine is briefed on your screen size so it generates layouts that fit your display perfectly.
- Asset Optimization: Any images you import will now be automatically converted by the Asset Packer to your project's native BPP.
Changing the Resolution or Color Depth after you have started designing can lead to layout shifts. We recommend verifying your hardware datasheet before initializing.
Next Steps
Now that your foundation is set, let's build your first screen:
- 5-Minute Quickstart — Use AI to generate your first layout.
- Widget Library — Explore the foundations of Artok components.