📄️ Animated Image
The Animated Image widget (animimg) is designed for high-performance frame-by-frame animations on embedded hardware. Unlike video files, it cycles through a sequence of static images at a defined interval, making it ideal for loading spinners, status indicators, or UI transitions.
📄️ Arc
The Arc widget is used to visualize values or progress along a curved path. It is a highly customizable component frequently used to create speedometers, circular loading bars, or volume regulators.
📄️ Bar
The Bar widget is a linear visual indicator used to represent progress, volume, or any numeric scale. Unlike the Slider, the Bar is primarily used for output display rather than user input.
📄️ Button
The Button widget is the most fundamental interactive element in any HMI. It is designed to trigger actions, navigate between screens, or toggle system states when clicked or pressed.
📄️ Button Matrix
The Button Matrix widget (btnmatrix) is a highly memory-efficient way to create a grid of buttons. Instead of creating dozens of individual button widgets, the Matrix manages a single object that handles multiple interactive areas—perfect for numpads, calculators, or keyboard layouts.
📄️ Calendar
The Calendar widget provides a full-sized interactive grid for date selection. It is ideal for scheduling tasks, setting system clocks, or logging historical data events within your HMI.
📄️ Canvas
The Canvas widget provides a transparent drawing surface where you can render custom shapes, lines, and pixel data at runtime. While most Artok widgets are pre-defined, the Canvas allows for low-level graphical manipulation, making it ideal for custom gauges, drawing apps, or dynamic masking.
📄️ Chart
The Chart widget is a powerful tool for visualizing complex data sets, trends, and real-time sensor telemetry. It supports multiple series and various rendering shapes to suit different types of analytical data.
📄️ Checkbox
The Checkbox widget is a dual-state input used to toggle settings on or off. It consists of a clickable box (the indicator) and a text label, making it the standard choice for configuration menus and preference lists.
📄️ Color Wheel
The Colorwheel widget provides an intuitive circular interface for selecting colors. It is perfect for applications involving smart lighting control, UI customization, or any system requiring RGB value input.
📄️ Container
The Container widget is a fundamental structural element used to group, align, and clip other widgets. It acts as a parent object, allowing you to manage the layout and visibility of multiple components as a single unit.
📄️ Dropdown
The Dropdown widget (also known as a Select box) is a space-saving component that allows users to choose a single option from a list. When clicked, it expands to reveal the full list of choices, making it ideal for settings, language selection, or mode switching.
📄️ Image
The Image widget is the primary component for displaying non-interactive visual assets. In Artok Studio, it serves as a viewport for optimized graphical data processed by the internal engine.
📄️ Image Button
The Image Button (imgbtn) is a specialized version of the button widget that uses bitmap assets instead of procedurally drawn shapes. It is the preferred tool for creating high-fidelity, skeuomorphic, or brand-specific UI elements like textured switches or custom-designed icons.
📄️ Keyboard
The Keyboard widget is a specialized input interface that allows users to enter text and numeric data. It is essentially an optimized Button Matrix with built-in logic for handling character mapping, shift states, and cursor control.
📄️ Label
The Label widget is the primary component for displaying text. From simple titles to dynamic data readouts, the Label supports custom fonts, colors, and various overflow behaviors to ensure your text fits perfectly on any screen size.
📄️ LED
The LED widget is a simple, high-visibility status indicator designed to mimic physical hardware LEDs. It is the most efficient way to show binary states (On/Off) or varying intensity levels (Brightness) without using complex image assets.
📄️ Line
The Line widget is a lightweight vector component used to draw paths, separators, or connections between other UI elements. Unlike a Container with a border, the Line is defined by a set of coordinates, allowing for diagonal and multi-segment paths.
📄️ Message Box
The Message Box (msgbox) is a modal overlay used to display important information, warnings, or confirmation prompts. It automatically darkens the background and captures user focus, ensuring critical messages are not missed.
📄️ Meter
The Meter widget is a highly flexible visualization tool used to display numerical data along a scale. While similar to the Gauge, the Meter is optimized for linear scales (like a thermometer) or simplified radial scales where multiple indicators are needed.
📄️ QR Code
The QR Code widget dynamically generates a scannable 2D barcode directly on your HMI. This is essential for mobile pairing, sharing device serial numbers, or directing users to online manuals and support pages.
📄️ Roller
The Roller widget is a scrolling selection tool inspired by classic slot machines and modern mobile date pickers. It allows users to browse a list of options by swiping vertically, making it highly tactile and efficient for touchscreens where a standard Dropdown might be too small to interact with.
📄️ Screen
The Screen is the top-level container for every page in your application. Every widget you create must reside within a Screen. It defines the global canvas size, background behavior, and the transition logic used when navigating between different parts of your HMI.
📄️ Slider
The Slider widget allows users to select a value from a continuous range by moving a knob along a track. It is the standard input for adjusting volume, brightness, or any numerical parameter that requires a fluid, tactile feel.
📄️ Spinbox
The Spinbox widget is a numerical input field equipped with increment and decrement buttons. It is the ideal choice for settings that require precise step-by-step adjustments, such as setting a target temperature, adjusting a timer, or selecting a quantity.
📄️ Spinner
The Spinner widget is an animated circular indicator used to show that a background process is active. It provides essential visual feedback during data fetching, system boot-up, or hardware communication, letting the user know the application has not frozen.
📄️ Switch
The Switch widget is a binary control used to toggle between two distinct states: On and Off. It provides a clear, high-contrast visual representation of a system's status and is the modern standard for settings like "Enable Notifications," "Dark Mode," or "Power."
📄️ Table
The Table widget is a structured grid used to display organized data in rows and columns. It is the most efficient way to present logs, schedules, or multi-parameter sensor data where a simple Label would be too cluttered.
📄️ Tabview
The Tabview widget is a powerful organizational tool that divides a single screen into multiple "pages" or tabs. It is the gold standard for complex HMIs, allowing users to switch between different functional areas—like Dashboard, Settings, and Logs—without the overhead of loading entirely new Screens.
📄️ Text Area
The Text Area widget is the primary input field for user-provided text. Unlike a Label, which is read-only, a Text Area allows for multi-line editing, character insertion, and deletion. It is most commonly used in conjunction with a Keyboard for data entry.
📄️ Tileview
The Tileview widget is a multi-dimensional navigation container that arranges content into a grid of "tiles." Unlike the linear Tabview, a Tileview allows users to swipe both horizontally and vertically to navigate, creating a spatial UI map (e.g., swipe right for Settings, swipe down for Notifications).
📄️ Window
The Window (win) widget is a high-level container that simulates a desktop-style window. It consists of two distinct areas: a Header (for titles and control buttons) and a Content Area (for the main UI elements). It is ideal for settings menus, detailed diagnostics, or modular pop-ups.