✍️ 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.

---

⚙️ Properties (Props)

The Label configuration is defined by the LabelWidget interface. It focuses on text content and how it reacts when the text exceeds the widget's bounding box.

Property	Type	Description
Text	string	The actual characters to be displayed.
Long Mode	Dropdown	Determines behavior for long text: Wrap, Dot, Scroll, or Circular.
X / Y	number	The coordinate position on the canvas.
Width / Height	number	The dimensions of the text area.

---

🛠 Text Handling (Long Mode)

When the text is longer than the width of the label, you can choose how the engine handles it:

• Wrap: Breaks the text into multiple lines (increases height automatically).
• Dot: Truncates the text and adds "..." at the end.
• Scroll: Moves the text back and forth horizontally like a marquee.
• Circular: Scrolls the text continuously in one direction.

---

🎨 Typography and Styling

Labels are highly customizable via the Inspector Panel:

• Font Selection: Choose from pre-loaded system fonts or your own uploaded .ttf assets.
• Alignment: Set text to Left, Center, or Right alignment.
• Color & Opacity: Apply HEX colors and control the transparency of the text.
• Line Space: Adjust the vertical gap between lines in Wrap mode.

---

⚡ Runtime API (Lua)

Labels are frequently updated in real-time to show sensor values, system time, or status messages.

-- Update a label with a dynamic string
lbl_status:set_text("System: OK")

-- Format a number to 2 decimal places and update
local temp = 24.567
lbl_temp:set_text(string.format("%.2f °C", temp))

-- Change the text color dynamically
if temp > 30 then
    lbl_temp:set_style_text_color(0xFF0000) -- Red for high temp
end

---

PERFORMANCE TIP

For static labels that never change, ensure they are not part of a high-frequency refresh loop. For dynamic numbers (like a speedometer), keep the label size fixed to prevent the UI from "jumping" as the number width changes.

---

🚀 Next Steps

• Text Area — Use this if you need multi-line input or editable text.
• Keyboard — Learn how to link a keyboard to update labels.
• Asset Packer — Learn how to import custom fonts into Artok Studio.