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

🏠 Smart Home Panel

The Smart Home Panel example demonstrates Artok's suitability for high-end consumer electronics. This template focuses on intuitive touch gestures, smooth transitions between rooms, and real-time status updates for IoT devices.

🛠 Key Features​

  • Room Navigation: Uses a Tileview to allow users to swipe naturally between "Living Room," "Kitchen," and "Security" views.
  • Lighting Control: Employs Slider and Colorwheel widgets for granular control over smart bulb brightness and RGB values.
  • Climate Management: A circular Arc combined with a Label creates a thermostat interface that updates dynamically.
  • Live Camera Feed: Demonstrates the use of the Canvas widget to render MJPEG streams or static snapshots from IP cameras via the network.

🏗 Architecture​

1. Modern UI Styling (Glassmorphism)​

This demo showcases Artok's advanced styling engine. By using semi-transparent backgrounds and high-radius corners, it achieves a "frosted glass" effect.

  • Background Blur: Simulated using pre-processed blurred assets in the Asset Packer.
  • Opacity: Set at the widget style level to allow background colors to bleed through, creating depth.

2. Connectivity Logic​

The panel monitors Wi-Fi and Cloud connectivity. When the connection drops, the UI automatically switches the header icon and disables non-functional controls to prevent user confusion.

🎨 Asset Optimization​

  • PNG Alpha Transparency: High-quality icons for "Bulb," "Lock," and "AC" are stored as 8-bit Alpha maps to maintain smooth edges while saving Flash space.
  • Animation Timelines: Room transitions use "Ease-out" curves to feel premium and responsive on capacitive touch screens.
  • Multi-Touch Support: Optimized for capacitive touch controllers (standard on ESP32-S3 and high-end STM32 boards), supporting tap, swipe, and long-press gestures.

🚀 Try it Yourself​

  1. Open Artok Studio.
  2. Select File > New From Template.
  3. Choose Smart Home Hub (Modern Edition).
  4. Use the Live Simulator to test the swipe gestures and color picker.

🚀 Next Steps​