.. _stdlib_fast_ui: == UI == This module provides a set of functions for creating and managing UI components such as canvases, layouts, text, panels, and more. It includes functions for setting properties such as spacing, padding, alignment, and color for various UI elements. +++++++++ Functions +++++++++ * :ref:`canvas (size: float2; screenMode: ScreenMode = public_components::ScreenMode.FitExtend) : NodeId ` * :ref:`children (node: NodeId; children: array\) : NodeId ` * :ref:`hbox (children: array\ = array\()) : NodeId ` * :ref:`vbox (children: array\ = array\()) : NodeId ` * :ref:`flow (children: array\ = array\()) : NodeId ` * :ref:`set_alignment (node: NodeId; value: LayoutAlignment) : NodeId ` * :ref:`set_direction (node: NodeId; value: LayoutDirection) : NodeId ` * :ref:`text (content: string) : NodeId ` * :ref:`set_text_color (node: NodeId; color: float4) : NodeId ` * :ref:`set_image_color (node: NodeId; color: float4) : NodeId ` * :ref:`button (text: string; var onClick: lambda\<():void\> = lambda\<():void\>()) : NodeId ` * :ref:`tinted_button (text: string; var onClick: lambda\<():void\> = lambda\<():void\>()) : NodeId ` * :ref:`textured_button (text: string; var onClick: lambda\<():void\> = lambda\<():void\>()) : NodeId ` * :ref:`checkbox (text: string; var onChange: lambda\<(value:bool):void\> = lambda\<(value:bool):void\>()) : NodeId ` * :ref:`dropdown (var onChange: lambda\<(index:int):void\> = lambda\<(index:int):void\>()) : NodeId ` * :ref:`vertical_slider (var onChange: lambda\<(value:float):void\> = lambda\<(value:float):void\>()) : NodeId ` * :ref:`horizontal_slider (var onChange: lambda\<(value:float):void\> = lambda\<(value:float):void\>()) : NodeId ` * :ref:`update_debug_text (debugTextNode: NodeId; text: string; maxSize: float2 = float2(-1f,-1f)) ` * :ref:`update_debug_text (debugTextNode: NodeId; text: string; topLeftMargin: float2; anchor: float2) ` * :ref:`create_debug_text (topLeftMargin: float2 = float2(0f,0f); anchor: float2 = TOP_LEFT_ANCHOR) : NodeId ` * :ref:`create_debug_text (text: string; topLeftMargin: float2 = float2(0f,0f); anchor: float2 = TOP_LEFT_ANCHOR) : NodeId ` * :ref:`create_debug_text (canvas: NodeId; text: string; topLeftMargin: float2 = float2(0f,0f); anchor: float2 = TOP_LEFT_ANCHOR) : NodeId ` * :ref:`set_spacing (node: NodeId; value: int|float) : NodeId ` * :ref:`set_spacing (node: NodeId; value: int2|float2) : NodeId ` * :ref:`set_padding (node: NodeId; value: int4|float4) : NodeId ` * :ref:`set_text_font_size (node: NodeId; size: int|float) : NodeId ` * :ref:`panel (size: int2|float2; children: array\ = array\()) : NodeId ` * :ref:`set_frame_size (node: NodeId; size: int2|float2) : NodeId ` * :ref:`set_frame_pivot (node: NodeId; pivot: int2|float2) : NodeId ` * :ref:`set_frame_pos (node: NodeId; pos: int2|float2) : NodeId ` * :ref:`add_anchor (node: NodeId; anchor: int2|float2) : NodeId ` * :ref:`add_anchor (node: NodeId; anchorMin: int2|float2; anchorMax: int2|float2) : NodeId ` .. _function-fast_ui_canvas_float2_ScreenMode: .. das:function:: canvas(size: float2; screenMode: ScreenMode = public_components::ScreenMode.FitExtend) : NodeId Creates a canvas node with a specified size. Start from here to create your UI layout. See the :ref:`UICanvas ` documentation for more information. Usage example:: let canvasNode = canvas(float2(800, 600)) :Arguments: * **size** : float2 - The size of the canvas. * **screenMode** : :ref:`ScreenMode ` - The screen mode of the canvas. :Returns: * :ref:`NodeId ` - The created canvas node. .. _function-fast_ui_children_NodeId_array_ls_NodeId_gr_: .. das:function:: children(node: NodeId; children: array) : NodeId Adds children nodes to a specified parent node. Usage example:: let parentNode = create_node() children(parentNode, [text("hello"), text("world")]) :Arguments: * **node** : :ref:`NodeId ` - The parent node. * **children** : array< :ref:`NodeId ` > - The array of children nodes to add. :Returns: * :ref:`NodeId ` - The parent node with added children. .. _function-fast_ui_hbox_array_ls_NodeId_gr_: .. das:function:: hbox(children: array = array()) : NodeId Creates a horizontal box layout node with optional children. Usage example:: let hboxNode = hbox([childNode1, childNode2]) :Arguments: * **children** : array< :ref:`NodeId ` > - The array of children nodes to add to the horizontal box layout. :Returns: * :ref:`NodeId ` - The created horizontal box layout node. .. _function-fast_ui_vbox_array_ls_NodeId_gr_: .. das:function:: vbox(children: array = array()) : NodeId Creates a vertical box layout node with optional children. Usage example:: let vboxNode = vbox([childNode1, childNode2]) :Arguments: * **children** : array< :ref:`NodeId ` > - The array of children nodes to add to the vertical box layout. :Returns: * :ref:`NodeId ` - The created vertical box layout node. .. _function-fast_ui_flow_array_ls_NodeId_gr_: .. das:function:: flow(children: array = array()) : NodeId Creates a flow layout node with optional children. Usage example:: let layoutNode = flow([childNode1, childNode2]) :Arguments: * **children** : array< :ref:`NodeId ` > - The array of children nodes to add to the flow layout. :Returns: * :ref:`NodeId ` - The created flow layout node. .. _function-fast_ui_set_alignment_NodeId_LayoutAlignment: .. das:function:: set_alignment(node: NodeId; value: LayoutAlignment) : NodeId Sets the alignment of a layout. Usage example:: set_alignment(layoutNode, LayoutAlignment.BottomCenter) :Arguments: * **node** : :ref:`NodeId ` - The layout node. * **value** : :ref:`LayoutAlignment ` - The alignment value. .. _function-fast_ui_set_direction_NodeId_LayoutDirection: .. das:function:: set_direction(node: NodeId; value: LayoutDirection) : NodeId Sets the direction of a flow layout. Usage example:: set_direction(layoutNode, LayoutDirection.Horizontal) :Arguments: * **node** : :ref:`NodeId ` - The layout node. * **value** : :ref:`LayoutDirection ` - The direction value. :Returns: * :ref:`NodeId ` - The layout node with updated direction. .. _function-fast_ui_text_string: .. das:function:: text(content: string) : NodeId Creates a text node with specified content. Usage example:: let textNode = text("Hello, World!") :Arguments: * **content** : string - The text content. :Returns: * :ref:`NodeId ` - The created text node. .. _function-fast_ui_set_text_color_NodeId_float4: .. das:function:: set_text_color(node: NodeId; color: float4) : NodeId Sets the color of a text node. Usage example:: set_text_color(textNode, float4(1.0, 0.0, 0.0, 1.0)) :Arguments: * **node** : :ref:`NodeId ` - The text node. * **color** : float4 - The color value. :Returns: * :ref:`NodeId ` - The text node with updated color. .. _function-fast_ui_set_image_color_NodeId_float4: .. das:function:: set_image_color(node: NodeId; color: float4) : NodeId Sets the color of an image node. Usage example:: set_image_color(imageNode, float4(1.0, 0.0, 0.0, 1.0)) :Arguments: * **node** : :ref:`NodeId ` - The image node. * **color** : float4 - The color value. :Returns: * :ref:`NodeId ` - The image node with updated color. .. _function-fast_ui_button_string_lambda_ls__c_void_gr_: .. das:function:: button(text: string; onClick: lambda<():void> = lambda<():void>()) : NodeId Creates a button node with a specified label and click handler. Usage example:: def onButtonClick() { print("Button clicked!") } let buttonNode = button("Click Me", @@onButtonClick) :Arguments: * **text** : string - The label of the button. * **onClick** : lambda - The function to call when the button is clicked. :Returns: * :ref:`NodeId ` - The created button node. .. _function-fast_ui_tinted_button_string_lambda_ls__c_void_gr_: .. das:function:: tinted_button(text: string; onClick: lambda<():void> = lambda<():void>()) : NodeId Creates a tinted button node with a specified label and click handler. Usage example:: def onButtonClick() { print("Button clicked!") } let buttonNode = tinted_button("Click Me", @@onButtonClick) :Arguments: * **text** : string - The label of the button. * **onClick** : lambda - The function to call when the button is clicked. :Returns: * :ref:`NodeId ` - The created tinted button node. .. _function-fast_ui_textured_button_string_lambda_ls__c_void_gr_: .. das:function:: textured_button(text: string; onClick: lambda<():void> = lambda<():void>()) : NodeId Creates a textured button node with a specified label and click handler. Usage example:: def onButtonClick() { print("Button clicked!") } let buttonNode = textured_button("Click Me", @@onButtonClick) :Arguments: * **text** : string - The label of the button. * **onClick** : lambda - The function to call when the button is clicked. :Returns: * :ref:`NodeId ` - The created textured button node. .. _function-fast_ui_checkbox_string_lambda_ls_value_c_bool_c_void_gr_: .. das:function:: checkbox(text: string; onChange: lambda<(value:bool):void> = lambda<(value:bool):void>()) : NodeId Creates a checkbox node with a specified label and change handler. Usage example:: def onCheckboxChange(value : bool) { print("Checkbox value: {value}") } let checkboxNode = checkbox("Accept Terms", @@onCheckboxChange) :Arguments: * **text** : string - The label of the checkbox. * **onChange** : lambda<(value:bool):void> - The function to call when the checkbox value changes. :Returns: * :ref:`NodeId ` - The created checkbox node. .. _function-fast_ui_dropdown_lambda_ls_index_c_int_c_void_gr_: .. das:function:: dropdown(onChange: lambda<(index:int):void> = lambda<(index:int):void>()) : NodeId Creates a dropdown node with a specified change handler. Usage example:: def onDropdownChange(index : int) { print("Selected dropdown index: {index}") } let dropdownNode = dropdown(@@onDropdownChange) :Arguments: * **onChange** : lambda<(index:int):void> - The function to call when the selected dropdown item changes. :Returns: * :ref:`NodeId ` - The created dropdown node. .. _function-fast_ui_vertical_slider_lambda_ls_value_c_float_c_void_gr_: .. das:function:: vertical_slider(onChange: lambda<(value:float):void> = lambda<(value:float):void>()) : NodeId Creates a vertical slider node with a specified change handler. Usage example:: def onSliderChange(value : float) { print("Slider value: {value}") } let sliderNode = vertical_slider(@@onSliderChange) :Arguments: * **onChange** : lambda<(value:float):void> - The function to call when the slider value changes. :Returns: * :ref:`NodeId ` - The created vertical slider node. .. _function-fast_ui_horizontal_slider_lambda_ls_value_c_float_c_void_gr_: .. das:function:: horizontal_slider(onChange: lambda<(value:float):void> = lambda<(value:float):void>()) : NodeId Creates a horizontal slider node with a specified change handler. Usage example:: def onSliderChange(value : float) { print("Slider value: {value}") } let sliderNode = horizontal_slider(@@onSliderChange) :Arguments: * **onChange** : lambda<(value:float):void> - The function to call when the slider value changes. :Returns: * :ref:`NodeId ` - The created horizontal slider node. .. _function-fast_ui_update_debug_text_NodeId_string_float2: .. das:function:: update_debug_text(debugTextNode: NodeId; text: string; maxSize: float2 = float2(-1f,-1f)) Updates the text of the specified debug text node. Use `create_debug_text` to create a debug text node. :Arguments: * **debugTextNode** : :ref:`NodeId ` - debug text node to update. * **text** : string - new text for the debug text node. * **maxSize** : float2 - default is `float2(-1)`. Maximum size of the debug text node. If set to (-1, -1), the text will not wrap. .. _function-fast_ui_update_debug_text_NodeId_string_float2_float2: .. das:function:: update_debug_text(debugTextNode: NodeId; text: string; topLeftMargin: float2; anchor: float2) Updates the text, top-left margin, and anchor of the specified debug text node. Use `create_debug_text` to create a debug text node. :Arguments: * **debugTextNode** : :ref:`NodeId ` - debug text node to update. * **text** : string - new text for the debug text node. * **topLeftMargin** : float2 - new top-left margin of the debug text node. * **anchor** : float2 - new anchor point of the debug text node. .. _function-fast_ui_create_debug_text_float2_float2: .. das:function:: create_debug_text(topLeftMargin: float2 = float2(0f,0f); anchor: float2 = TOP_LEFT_ANCHOR) : NodeId Initializes a debug text node with the specified top-left margin and anchor. Creates canvas if it doesn't exist. :Arguments: * **topLeftMargin** : float2 - default is `float2()`. Top-left margin of the debug text node. * **anchor** : float2 - default is `TOP_LEFT_ANCHOR`. Anchor point of the debug text node. :Returns: * :ref:`NodeId ` - initialized debug text node. .. _function-fast_ui_create_debug_text_string_float2_float2: .. das:function:: create_debug_text(text: string; topLeftMargin: float2 = float2(0f,0f); anchor: float2 = TOP_LEFT_ANCHOR) : NodeId Initializes a debug text node with the specified text, top-left margin, and anchor. Creates canvas if it doesn't exist. :Arguments: * **text** : string - text of the debug text node. * **topLeftMargin** : float2 - default is `float2()`. Top-left margin of the debug text node. * **anchor** : float2 - default is `TOP_LEFT_ANCHOR`. Anchor point of the debug text node. :Returns: * :ref:`NodeId ` - initialized debug text node. .. _function-fast_ui_create_debug_text_NodeId_string_float2_float2: .. das:function:: create_debug_text(canvas: NodeId; text: string; topLeftMargin: float2 = float2(0f,0f); anchor: float2 = TOP_LEFT_ANCHOR) : NodeId Initializes a debug text node with the specified text, top-left margin, and anchor on the specified canvas. :Arguments: * **canvas** : :ref:`NodeId ` - canvas node to create the debug text node on. * **text** : string - text of the debug text node. * **topLeftMargin** : float2 - default is `float2()`. Top-left margin of the debug text node. * **anchor** : float2 - default is `TOP_LEFT_ANCHOR`. Anchor point of the debug text node. :Returns: * :ref:`NodeId ` - initialized debug text node. .. _function-fast_ui_set_spacing_NodeId_intfloat: .. das:function:: set_spacing(node: NodeId; value: int|float) : NodeId Sets the spacing between children nodes in a layout. Usage example:: set_spacing(layoutNode, 10) :Arguments: * **node** : :ref:`NodeId ` - The layout node. * **value** : option - The spacing value. :Returns: * :ref:`NodeId ` - The layout node with updated spacing. .. _function-fast_ui_set_spacing_NodeId_int2float2: .. das:function:: set_spacing(node: NodeId; value: int2|float2) : NodeId Sets the spacing between children nodes in a layout. Usage example:: set_spacing(layoutNode, float2(10, 20)) :Arguments: * **node** : :ref:`NodeId ` - The layout node. * **value** : option - The spacing value. :Returns: * :ref:`NodeId ` - The layout node with updated spacing. .. _function-fast_ui_set_padding_NodeId_int4float4: .. das:function:: set_padding(node: NodeId; value: int4|float4) : NodeId Sets the padding of a layout. Usage example:: set_padding(layoutNode, float4(10, 20, 10, 20)) :Arguments: * **node** : :ref:`NodeId ` - The layout node. * **value** : option - The padding value (xyzw are top, right, bottom, left). :Returns: * :ref:`NodeId ` - The layout node with updated padding. .. _function-fast_ui_set_text_font_size_NodeId_intfloat: .. das:function:: set_text_font_size(node: NodeId; size: int|float) : NodeId Sets the font size of a text node. Usage example:: set_text_font_size(textNode, 24) :Arguments: * **node** : :ref:`NodeId ` - The text node. * **size** : option - The font size value. :Returns: * :ref:`NodeId ` - The text node with updated font size. .. _function-fast_ui_panel_int2float2_array_ls_NodeId_gr_: .. das:function:: panel(size: int2|float2; children: array = array()) : NodeId Creates a panel node with a specified size and optional children. Usage example:: let panelNode = panel(float2(800, 600), [childNode1, childNode2]) :Arguments: * **size** : option - The size of the panel. * **children** : array< :ref:`NodeId ` > - The array of children nodes to add to the panel. :Returns: * :ref:`NodeId ` - The created panel node. .. _function-fast_ui_set_frame_size_NodeId_int2float2: .. das:function:: set_frame_size(node: NodeId; size: int2|float2) : NodeId Sets the size of a frame node. Usage example:: set_frame_size(frameNode, float2(800, 600)) :Arguments: * **node** : :ref:`NodeId ` - The frame node. * **size** : option - The size value. :Returns: * :ref:`NodeId ` - The frame node with updated size. .. _function-fast_ui_set_frame_pivot_NodeId_int2float2: .. das:function:: set_frame_pivot(node: NodeId; pivot: int2|float2) : NodeId Sets the pivot of a node. Usage example:: set_frame_pivot(node, float2(0.5, 0.5)) :Arguments: * **node** : :ref:`NodeId ` - The node. * **pivot** : option - The pivot value. :Returns: * :ref:`NodeId ` - The node with updated pivot. .. _function-fast_ui_set_frame_pos_NodeId_int2float2: .. das:function:: set_frame_pos(node: NodeId; pos: int2|float2) : NodeId Sets the position of a frame node in 2D space. Usage example:: set_frame_pos(frameNode, float2(800, 600)) :Arguments: * **node** : :ref:`NodeId ` - The frame node. * **pos** : option - The position value. :Returns: * :ref:`NodeId ` - The frame node with updated position. .. _function-fast_ui_add_anchor_NodeId_int2float2: .. das:function:: add_anchor(node: NodeId; anchor: int2|float2) : NodeId Adds an anchor component to a node. Local position of a node is used as left and top insets. Usage example:: add_anchor(node, MIDDLE_CENTER_ANCHOR) :Arguments: * **node** : :ref:`NodeId ` - The node. * **anchor** : option - The minimum & maximum anchor value. :Returns: * :ref:`NodeId ` - The node with added anchor component. .. _function-fast_ui_add_anchor_NodeId_int2float2_int2float2: .. das:function:: add_anchor(node: NodeId; anchorMin: int2|float2; anchorMax: int2|float2) : NodeId Adds an anchor component to a node. Local position of a node is used as left and top insets. Usage example:: add_anchor(node, TOP_LEFT_ANCHOR, BOTTOM_RIGHT_ANCHOR) :Arguments: * **node** : :ref:`NodeId ` - The node. * **anchorMin** : option - The minimum anchor value. * **anchorMax** : option - The maximum anchor value. :Returns: * :ref:`NodeId ` - The node with added anchor component.