Skip to main content
Version: v2.4.0 (Current)

🏎 Automotive Cluster

The Automotive HMI (Human-Machine Interface) example is designed to showcase Artok's ability to handle high-frame-rate animations, complex alpha masking, and GPU-accelerated rendering for digital instrument clusters.

This template specifically targets electric vehicle (EV) layouts, maintaining a fluid 60 FPS on mid-range MCUs while processing real-time vehicle telemetry.

🛠 Key Features​

  • Dynamic Speedometer: Utilizes a high-resolution Meter widget with custom-rendered needles and a secondary Arc for regenerative braking feedback.
  • Animated Energy Flow: Leverages the Canvas and Animated Image widgets to visualize power shifting between the battery pack and motors in real-time.
  • Night/Day Mode: Demonstrates instant style switching (swapping background palettes and font weights) via a single Lua Script trigger based on ambient light sensor data.
  • Telltale Management: A dedicated high-priority layer for critical icons (Battery, ABS, High Beam, Airbag) managed by the Logic and Events system.

🏗 Architecture​

1. Layers & Z-Order​

Automotive UIs require strict depth management to ensure critical information is never obscured. In the Widget Tree, this project is split into three main layers:

  • Background: Static elements like the Speedo ring, frame borders, and branding.
  • Dynamic: Moving needles, live power charts, and digital trip meters.
  • Overlay: High-priority popups for "Door Ajar" or "Low Tire Pressure" using the Message Box.

2. Smooth Gauge Logic​

To prevent "jittery" needles caused by raw CAN bus data fluctuations, this demo implements a Low-Pass Filter (LPF) directly in Lua. (See the Lua API documentation for implementation details on implementing a simple alpha-filter for value smoothing).

🎨 Asset Optimization​

Achieving automotive-grade aesthetics on an MCU requires balancing memory with visual fidelity:

  • 32-bit Color Depth: Used for the main gauge cluster to allow for perfect alpha-blended shadows, glows, and anti-aliasing.
  • Custom Fonts: The Asset Packer generates specialized typography for the Odometer and Speedo to ensure numbers align perfectly as they rotate or transition.
  • Hardware Dithering: Enabled in the Studio to prevent "banding" in the dark gradients and carbon-fiber textures common in automotive designs.

🚀 Try it Yourself​

  1. Open Artok Studio.
  2. Select File > New From Template.
  3. Choose Automotive Cluster (EV Edition).
  4. Launch the Live Simulator and use the "Test Slider" to simulate vehicle speed and power draw.
HARDWARE REQUIREMENTS

For consistent 60 FPS performance, this demo is optimized for MCUs with a 2D Graphic Accelerator (such as STM32 Chrom-ART or ESP32-S3 LCD_CAM) and 16MB+ PSRAM/SDRAM.

🚀 Next Steps​

  • Medical Monitor — Switch from high-speed gauges to high-precision medical waveforms.
  • Smart Home Hub — See how to handle multi-touch gestures and Wi-Fi connectivity.
  • Core Concepts — Learn how to transcode your own high-resolution automotive textures.