PLUG'N SCRIPT
rapid plugin development
Tutorial
DSP
KUIML
How-to
Scripts
  • Tutorial
  • Element Reference
Language basics
  • SKIN
  • DUMMY
  • INCLUDE
  • INCLUDE_ONCE
  • DEFINE
  • UNDEFINE
  • VARIABLE
  • LOCAL_VARIABLE
  • TEMPLATE
  • TEMPLATE_INNER_CONTENT
  • REPEAT
Data model
  • PARAM
  • ACTION
    • Action types
  • ACTION_TRIGGER
UI Layout and positioning
  • CELL
  • TABLE
UI Widgets
  • TEXT
  • TEXT_FIELD
  • TEXT_EDIT_BOX
  • CANVAS
    • Graphics API
  • svg
Common attrubutes
  • For all elements
  • Widgets
  • Param Widgets
  • Param Controls
  • Param Info Viewers
  • Text Widgets
  • Surface Viewers
  • Curve Viewers
  • 3D Objects
  • Parameters mapping
KUIMLElement ReferenceCELL
December 13, 2022

CELL

Base element for layout design. It provides complex layout capabilities with embedded rows and columns, and relative pixel-positioning. 

CELL is an invisible element, which is used for the calculation of the position of other elements inside it (other CELLs or widgets). CELL can have one of three layout_types that defines how inner elements are placed: in a row, column, or layer_stack (one over another).

You can write <CELL layout_type="row"> or <ROW>. So, there are three shortcut elements for CELL named ROW, COLUMN, and LAYER_STACK. By the way, default CELL's layout_type is "column", so COLUMN or CELL are usually the same. The only difference is that you can't change layout_type for COLUMN, as it is fixed.

Many of KUIML elements inherit CELL properties, so you can use them inside WIDGETs or SKIN (which is a root CELL and can also have layout_type, font_face, etc).

See some examples below, they show most of the KUIML layout possibilities.

Attributes brief detailed show all inherited

Name DescriptionDefault
Properties Relative to Parent Cell
Exposed: v. 1.5v_alignVertical alignment of the cell in its parent cellcenter
Exposed: v. 1.5h_alignHorizontal alignment of the cell in its parent cellcenter
Exposed: v. 1.9.1 (read only)h_positionHorizontal position of the cell in its parent cellIf defined, it deactivates the h_align property. Use this attribute for horizontal pixel-positioning. The position is relative to the parent cell
Exposed: v. 1.9.1 (read only)v_positionVertical position of the cell in its parent cellIf defined, it deactivates the v_align property. Use this attribute for vertical pixel-positioning. The position is relative to the parent cell
Exposed: v. 1.9.1h_offsethorizontal offset of the cell from the position computed by the layout engineUsing this property lets you move a cell without changing the layout around it. The position is relative to the parent cell0
Exposed: v. 1.9.1v_offsetvertical offset of the cell from the position computed by the layout engineUsing this property lets you move a cell without changing the layout around it. The position is relative to the parent cell0
Exposed: v. 1.5flexflexibility of the cellThis attribute is used when the parent cell is a row or a column and has free space to distribute to children cells (for example for a fixed size parent cell that is larger than the sum of its children cell sizes). The remaining space will be distributed among children cells according to the flex attribute value0
Exposed: v. 1.5displayinclude/exclude the cell from the layoutWhen set to false, the content of the cell is not displayed (not visible) AND is not taken into account to compute the layout (the cell is ignored)true
Cell Properties
Exposed: v. 1.5layout_typeSelects a layout type: row, column or layer_stackDetermines how the children cells will be disposed inside the cell: as a row, a column or a stack of layers (each cell on top of each other, the first cell in the background, and the last one on the foreground)column
Exposed: v. 1.9.1 (pixels)widthForced width of the cellIf not present, the width will be automatically computed from the children cells widths and layout rules
Exposed: v. 2.0min_widthminimum width allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not smaller than min_width pixels
Exposed: v. 2.0max_widthmaximum width allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not larger than max_width pixels
Exposed: v. 1.9.1 (pixels)heightForced height of the cellIf not present, the height will be automatically computed from the children cells heights and layout rules
Exposed: v. 2.0min_heightminimum height allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not smaller than min_height pixels
Exposed: v. 2.0max_heightmaximum height allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not larger than max_height pixels
marginmargin of the cellMay be overridden by the h_margin or v_margin attributes0
Exposed: v. 1.5h_marginHorizontal margin of the cell0
Exposed: v. 1.5v_marginVertical margin of the cell0
Exposed: v. 1.5spacingSpace between children cells0
spacing_flexFlex value to allocate extra space between children cellsSee the flex attribute for more details0
Exposed: v. 1.5internal_v_alignVertical alignment of children cells group inside the cellThis attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'column' type cell, the horizontal alignment being set individually for each child cellcenter
Exposed: v. 1.5internal_h_alignHorizontal alignment of children cells group inside the cellThis attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'row' type cell, the vertical alignment being set individually for each child cellcenter
Exposed: v. 2.0reflowwhen set to true, the layout engine will treat chidren cell as reflowable elements. For a fixed height column, the width is computed accordingly, and for a fixed width row, the height is computed accordinglyvalid only for columns with fixed height or rows with fixed widthfalse
Exposed: v. 2.4flipdisplay children cells in reverse order (right to left or bottom to top)currently valid only for COLUMN and ROW elementsfalse
Inheritable properties: these text properties are inherited by children cells (and can be overridden)
font_faceName of the font for text contained in the cell and sub cellsFonts are not the same on all systems, so you should carefuly select the fonts or ensure that users have specific fonts installedempty
font_sizeSize of the font for any text contained in the cellIf the value starts with + or -, the resulting font size is incremented by this value from the current font size. If the value ends with a %, the resulting font size is the corresponding proportion of the current font size. This value is inherited by children cells but can be overriddenSystem...
font_size_modeDefines how font size is computed to select the right font.Default value is cell mode for backward compatibility reasons but it has been deprecated. It is however recommended to use "character" mode for more precise font size selection. Using the cell size to select the font is less precise and not compatible with standard font sizes expressed in character height.cell
font_weightWeight of the font for any text contained in the cellThe value is inherited by children cells but can be overriddenSystem...
font_styleStyle of the font for any text contained in the cellThe value is inherited by children cells but can be overriddenSystem...
font_qualityQuality of the fontThe value is inherited by children cells but can be overriddenSystem...
font_escapementEscapement (angle in degrees) of the fontThe value is inherited by children cells but can be overridden. If the escapement of the font is non null, the formating options of the text widgets won't apply0
text_decorationDecoration of the text for any text contained in the cellThe value is inherited by children cells but can be overriddenSystem...
text_colorColor of any text contained in the cellThe value is inherited by children cells but can be overriddenSystem...
Common attributesRead about `common`
idIdentifier of the elementThe id of an element has to be globally unique. Two elements cannot have the same identifierempty
Name Value type Default Description Comment
Properties Relative to Parent Cell
Exposed: v. 1.5v_alignvertical alignmentcenterVertical alignment of the cell in its parent cell
Exposed: v. 1.5h_alignhorizontal alignmentcenterHorizontal alignment of the cell in its parent cell
Exposed: v. 1.9.1 (read only)h_positionposition in pixelsHorizontal position of the cell in its parent cellIf defined, it deactivates the h_align property. Use this attribute for horizontal pixel-positioning. The position is relative to the parent cell
Exposed: v. 1.9.1 (read only)v_positionposition in pixelsVertical position of the cell in its parent cellIf defined, it deactivates the v_align property. Use this attribute for vertical pixel-positioning. The position is relative to the parent cell
Exposed: v. 1.9.1h_offsetposition in pixels0horizontal offset of the cell from the position computed by the layout engineUsing this property lets you move a cell without changing the layout around it. The position is relative to the parent cell
Exposed: v. 1.9.1v_offsetposition in pixels0vertical offset of the cell from the position computed by the layout engineUsing this property lets you move a cell without changing the layout around it. The position is relative to the parent cell
Exposed: v. 1.5flexreal number0flexibility of the cellThis attribute is used when the parent cell is a row or a column and has free space to distribute to children cells (for example for a fixed size parent cell that is larger than the sum of its children cell sizes). The remaining space will be distributed among children cells according to the flex attribute value
Exposed: v. 1.5displaybooleantrueinclude/exclude the cell from the layoutWhen set to false, the content of the cell is not displayed (not visible) AND is not taken into account to compute the layout (the cell is ignored)
Cell Properties
Exposed: v. 1.5layout_type'row' or 'column' or 'layer_stack'columnSelects a layout type: row, column or layer_stackDetermines how the children cells will be disposed inside the cell: as a row, a column or a stack of layers (each cell on top of each other, the first cell in the background, and the last one on the foreground)
Exposed: v. 1.9.1 (pixels)widthnumber of pixels or percentage (1.1)Forced width of the cellIf not present, the width will be automatically computed from the children cells widths and layout rules
Exposed: v. 2.0min_widthnumber of pixelsminimum width allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not smaller than min_width pixels
Exposed: v. 2.0max_widthnumber of pixelsmaximum width allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not larger than max_width pixels
Exposed: v. 1.9.1 (pixels)heightnumber of pixels or percentage (1.1)Forced height of the cellIf not present, the height will be automatically computed from the children cells heights and layout rules
Exposed: v. 2.0min_heightnumber of pixelsminimum height allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not smaller than min_height pixels
Exposed: v. 2.0max_heightnumber of pixelsmaximum height allowed for the cellWhen set, the layout engine will ensure that the width of the cell is not larger than max_height pixels
marginnumber of pixels0margin of the cellMay be overridden by the h_margin or v_margin attributes
Exposed: v. 1.5h_marginnumber of pixels0Horizontal margin of the cell
Exposed: v. 1.5v_marginnumber of pixels0Vertical margin of the cell
Exposed: v. 1.5spacingnumber of pixels0Space between children cells
spacing_flexreal number0Flex value to allocate extra space between children cellsSee the flex attribute for more details
Exposed: v. 1.5internal_v_alignvertical alignmentcenterVertical alignment of children cells group inside the cellThis attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'column' type cell, the horizontal alignment being set individually for each child cell
Exposed: v. 1.5internal_h_alignhorizontal alignmentcenterHorizontal alignment of children cells group inside the cellThis attribute is useful only if the cell has a fixed size, and the sum of the sizes of the layouted children cells is different from the cell size. In this case you may want to choose how you align the children cells group inside the parent cell. Used only for 'row' type cell, the vertical alignment being set individually for each child cell
Exposed: v. 2.0reflowbooleanfalsewhen set to true, the layout engine will treat chidren cell as reflowable elements. For a fixed height column, the width is computed accordingly, and for a fixed width row, the height is computed accordinglyvalid only for columns with fixed height or rows with fixed width
Exposed: v. 2.4flipbooleanfalsedisplay children cells in reverse order (right to left or bottom to top)currently valid only for COLUMN and ROW elements
Inheritable properties: these text properties are inherited by children cells (and can be overridden)
font_facestringemptyName of the font for text contained in the cell and sub cellsFonts are not the same on all systems, so you should carefuly select the fonts or ensure that users have specific fonts installed
font_sizenumber of pixels or percentage (1.2.2), with or without +/- sign (1.2.2)System default valueSize of the font for any text contained in the cellIf the value starts with + or -, the resulting font size is incremented by this value from the current font size. If the value ends with a %, the resulting font size is the corresponding proportion of the current font size. This value is inherited by children cells but can be overridden
font_size_mode"cell" or "character"cellDefines how font size is computed to select the right font.Default value is cell mode for backward compatibility reasons but it has been deprecated. It is however recommended to use "character" mode for more precise font size selection. Using the cell size to select the font is less precise and not compatible with standard font sizes expressed in character height.
font_weight'bold' or 'normal'System default valueWeight of the font for any text contained in the cellThe value is inherited by children cells but can be overridden
font_style'italic' or 'normal'System default valueStyle of the font for any text contained in the cellThe value is inherited by children cells but can be overridden
font_quality'default' or 'no_anti_alias' or 'anti_alias' or 'cleartype'System default valueQuality of the fontThe value is inherited by children cells but can be overridden
font_escapementreal number0Escapement (angle in degrees) of the fontThe value is inherited by children cells but can be overridden. If the escapement of the font is non null, the formating options of the text widgets won't apply
text_decoration'underline' or 'none'System default valueDecoration of the text for any text contained in the cellThe value is inherited by children cells but can be overridden
text_colorcolorSystem default valueColor of any text contained in the cellThe value is inherited by children cells but can be overridden
Common attributesRead about `common`
ididentifieremptyIdentifier of the elementThe id of an element has to be globally unique. Two elements cannot have the same identifier

Examples

As CELLs are invisible, let's use a few WIDGET elements with background_color attribute for the following examples. Instead of these colored squares you can use knobs, text and other elements of your layout.

The SKIN is the root cell and its layout_type is "column" by default.

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <SKIN>
  3. <!-- define some new elements -->
  4. <DEFINE>
  5. <_SQUARE base_type="WIDGET" width="25" height="25" />
  6. <BLUE base_type="_SQUARE" background_color="#5799F0" />
  7. <MAGENTA base_type="_SQUARE" background_color="#BC69FB" />
  8. <PURPLE base_type="_SQUARE" background_color="#FB78D5" />
  9. <RED base_type="_SQUARE" background_color="#FB6E6E" />
  10. <ORANGE base_type="_SQUARE" background_color="#FBB469" />
  11. <YELLOW base_type="_SQUARE" background_color="#F9DC00" />
  12. <LIME base_type="_SQUARE" background_color="#B0D604" />
  13. <GREEN base_type="_SQUARE" background_color="#2ED604" />
  14. </DEFINE>

  15. <!-- using the elements we've just defined -->
  16. <BLUE />
  17. <MAGENTA />
  18. <PURPLE />
  19. <RED />
  20. <ORANGE />
  21. <YELLOW />
  22. <LIME />
  23. <GREEN />

  24. </SKIN>

 

In a row

If we want to place them horizontally we can either set SKIN layout_type="row", or add another ROW element (or any CELL-ish element with layout_type="row").

  1. <ROW>
  2. <BLUE />
  3. <MAGENTA />
  4. <PURPLE />
  5. <RED />
  6. <ORANGE />
  7. <YELLOW />
  8. <LIME />
  9. <GREEN />
  10. </ROW>

Just for fun let's reverse them using <ROW flip="true"> (or flip="1").

Let's make two rows and add some spacing between elements. 

  1. <COLUMN spacing="5">
  2. <ROW spacing="5">
  3. <BLUE /><MAGENTA /><PURPLE /><RED />
  4. </ROW>
  5. <ROW spacing="5">
  6. <ORANGE />
  7. <YELLOW />
  8. <LIME width="50" />
  9. <GREEN />
  10. </ROW>
  11. </COLUMN>

As a stack

Let's put elements one over another.

  1. <LAYER_STACK>
  2. <BLUE width="100" height="100" />
  3. <LIME width="80" height="80" />
  4. <MAGENTA width="60" height="60" />
  5. <YELLOW width="40" height="40" />
  6. <RED width="20" height="20" />
  7. </LAYER_STACK>

As you see they are perfectly centered. We may align them inside the parent cell using h/v_align. Also we can change their position using h/v_offset (relative to calculated position) or h/v_position (relative to parent element).

  1. <LAYER_STACK>
  2. <BLUE width="100" height="100" />
  3. <LIME width="80" height="80" h_align="left" v_align="top" />
  4. <MAGENTA width="60" height="60" h_offset="15" v_offset="10" layout_type="layer_stack">
  5. <YELLOW width="40" height="40" />
  6. <RED width="20" height="20" h_position="35" />
  7. </MAGENTA>
  8. </LAYER_STACK>

The cool thing about h/v_offset is that you can change that dynamically, and thus move/animate an object.

  1. <LAYER_STACK>
  2. <BLUE width="100" height="100" />
  3. <YELLOW id="movable" width="60" height="60" />
  4. </LAYER_STACK>
  5. <!-- create params with a range and link them to h/v_offset -->
  6. <PARAM id="xpos" min="-40" max="40" default="0" />
  7. <PARAM id="ypos" min="-40" max="40" default="0" />
  8. <PARAM_LINK from="xpos" to="movable.h_offset" />
  9. <PARAM_LINK from="ypos" to="movable.v_offset" />
  10. <!-- add controls -->
  11. <ROW>
  12. <PARAM_TEXT_CONTROL param_id="xpos" />
  13. <PARAM_TEXT_CONTROL param_id="ypos" />
  14. </ROW>

Exploring flex and display

If we set a parent element to a width (or height) greater than sum of its childrens, we can use the flex attribute to distribute that extra space between children (so that they stretch to take that space). We can also use display attribute to dynamically change the layout.

  1. <ROW width="200">
  2. <RED />
  3. <ORANGE flex="1" />
  4. <YELLOW flex="0.5" />
  5. <PURPLE id="showable" display="false" />
  6. <LIME />
  7. </ROW>

  8. <!-- the control -->
  9. <PARAM_TEXT param_id="showable.display" content="display: {text_value}">
  10. <INVISIBLE_PARAM_BUTTON param_id="showable.display" positions_count="2" width="100%" height="100%" cursor="system::hand" />
  11. </PARAM_TEXT>

Note that WIDGET-type elements also have "visible" attribute, which can show or hide the element without changing the layout.

To illustrate spacing_flex attribute we also need a parent with a size greater than sum of its children.

  1. <WIDGET background_color="#5799F0" margin="7">
  2. <WIDGET background_color="#FFFFFF">
  3. <COLUMN spacing="10" width="180">
  4. <ROW width="100%" spacing="5" >
  5. <RED /><ORANGE /><YELLOW /><GREEN />
  6. </ROW>
  7. <ROW width="100%" spacing_flex="1" >
  8. <RED /><ORANGE /><YELLOW /><GREEN />
  9. </ROW>
  10. </COLUMN>
  11. </WIDGET>
  12. </WIDGET>

Here we used a margin to create a blue "border" (we just added more space around the the top blue WIDGET to make it bigger than inner white WIDGET, and so the blue is partly visible). There are h_margin and v_margin attributes if you want to set them separately.

Size of the element

We can set the width or the height of the element in pixels or percents (relative to parent). If we omit width or height attributes, they will be calculated using the size of the inner contents.

We can also use min_width, max_width and min_height, max_height attributes designing the layout. They can be set in pixels only.

  1. <WIDGET background_color="#5799F0" margin="7" spacing="7">
  2. <!-- auto stretches to content's width -->
  3. <WIDGET background_color="#FFFFFF" layout_type="row" spacing="10">
  4. <TEXT value="This width is auto calculated" />
  5. </WIDGET>
  6. <!-- min_width is set, though content takes less space -->
  7. <WIDGET background_color="#FFFFFF" layout_type="row" spacing="10" min_width="150">
  8. <TEXT value="Min width is set" />
  9. </WIDGET>
  10. <!-- max_width is set and it is not reached -->
  11. <WIDGET background_color="#FFFFFF" layout_type="row" spacing="10" max_width="150">
  12. <TEXT value="Max width is set" />
  13. </WIDGET>
  14. <!-- fixed width - content is truncated -->
  15. <WIDGET background_color="#FFFFFF" layout_type="row" spacing="10" width="150">
  16. <TEXT value="This is fixed, so the text is truncated" />
  17. </WIDGET>
  18. </WIDGET>

Content alignment

Instead of using h_align and v_align on each element individually, you can set the alignment in the parent cell, usign internal_h_align (works for rows only) and internal_v_align (for columns only).

  1. <WIDGET background_color="#5799F0" margin="7" spacing="7">
  2. <WIDGET background_color="#FFFFFF" layout_type="row" spacing="2" width="200" internal_h_align="left">
  3. <TEXT value="Text" />
  4. <TEXT value="left" />
  5. <TEXT value="aligned" />
  6. </WIDGET>

  7. <WIDGET background_color="#FFFFFF" layout_type="column" height="120" internal_v_align="top">
  8. <TEXT value="Text" />
  9. <TEXT value="top" />
  10. <TEXT value="aligned" />
  11. </WIDGET>
  12. </WIDGET>

Note that the TEXT element inherits CELL attributes, so you can set fixed width or height for the TEXT and use its text_h_align or text_v_align (common for all text widgets) attrubutes for further text alignment.

Magical reflow

This is a trick that can be used for fixed width rows or fixed height columns: if the content doesn't fit, it goes to the "next line" using reflow.

  1. <WIDGET background_color="#333333" margin="7" spacing="7">
  2. <!-- example of using text "reflow" on a row with fixed size -->
  3. <WIDGET background_color="#FFFFFF" layout_type="row" width="120" reflow="true">
  4. <TEXT value="There" />
  5. <TEXT value="is" />
  6. <TEXT value="too" />
  7. <TEXT value="much" />
  8. <TEXT value="text" />
  9. <TEXT value="that" />
  10. <TEXT value="doesn't" />
  11. <TEXT value="fit" />
  12. <TEXT value="but" />
  13. <TEXT value="reflow" font_weight="bold" />
  14. <TEXT value="helps!" />
  15. </WIDGET>
  16. <!-- content that doesn't fit is taken to the "next line" -->
  17. <WIDGET background_color="#FFFFFF" layout_type="row" width="110" reflow="true" internal_h_align="left">
  18. <BLUE /><MAGENTA /><PURPLE /><RED /><ORANGE /><YELLOW /><LIME />
  19. </WIDGET>
  20. </WIDGET>


Comments

2020 © Plug'n Script and KUIML by Blue Cat Audio  |  Site by LetiMix