Layout Schema

This page documents the layout schema, including details about each tag, its attributes, and allowed child elements.

The layout definition is used to define the visual composition of the Custom Page section of the NucleI software. It is meant to provide a simplified yet flexible toolset to define custom-tailored interfaces.

button

Represents a clickable button that triggers a Python function when pressed.

Attributes:

Attribute	Required	Description	Allowed Values
action	Yes	Calls the same-named function in the Python code when pressed.	Any
label	Yes	Specifies the text label displayed on the button.	Any
solid	No	Determines if the button has a solid background. Optional.	Any
color	No	Sets the button color. Optional. Valid values are ‘primary’, ‘secondary’, ‘success’, ‘error’, ‘info’, ‘warning’.	primary, secondary, success, error, info, warning

Allowed Children: None

Example:

<button action="abc" label="abc" solid="abc" color="primary" />

checkbox

Represents a checkbox input that can be checked or unchecked.

Attributes:

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the checkbox, accessible via UI.get in code.	Any
label	Yes	Label text displayed next to the checkbox.	Any
defaultChecked	No	Specifies if the checkbox is checked by default. Optional.	Any

Allowed Children: None

Example:

<checkbox id="abc" label="abc" defaultChecked="abc" />

input

Defines an input field where users can enter data, with specific data type constraints.

Attributes:

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the input field, accessible via UI.get in code.	Any
label	Yes	Label text displayed alongside the input field.	Any
dtype	Yes	Specifies the data type of the input. Valid values are ‘text’, ‘int’, ‘float’.	text, int, float
min	No	Minimum value for numeric inputs. Optional.	Any
max	No	Maximum value for numeric inputs. Optional.	Any
step	No	Step value for numeric inputs. Optional.	Any

Allowed Children: None

Example:

<input id="abc" label="abc" dtype="text" min="abc" max="abc" step="abc" />

plot

Defines a plot area for displaying graphical data.

Attributes:

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the plot, accessible via UI.plot in code.	Any
title	Yes	Title displayed above the plot.	Any
xLabel	Yes	Label for the x-axis.	Any
yLabel	Yes	Label for the y-axis.	Any

Allowed Children: None

Example:

<plot id="abc" title="abc" xLabel="abc" yLabel="abc" />

select

Represents a dropdown selection box, allowing the user to choose from predefined options.

Attributes:

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the select box, accessible via UI.get in code.	Any
label	Yes	Label text displayed above the selection box.	Any

Allowed Children: option

Example:

<select id="abc" label="abc">
   <option ... />
</select>

option

Defines an individual selectable option within a select box.

Attributes:

Attribute	Required	Description	Allowed Values
value	Yes	The value assigned to this option, used when selected.	Any

Allowed Children: None

Example:

<option value="abc" />

horizontal-layout

Represents a horizontal layout container that can hold multiple child elements.

Attributes:

Attribute	Required	Description	Allowed Values
stretchX	No	Indicates if the layout should stretch horizontally. Optional.	Any
stretchY	No	Indicates if the layout should stretch vertically. Optional.	Any

Allowed Children: button, checkbox, input, plot, select, text, horizontal-layout, vertical-layout

Example:

<horizontal-layout stretchX="abc" stretchY="abc">
   <button ... />
</horizontal-layout>

vertical-layout

Represents a vertical layout container that can hold multiple child elements.

Attributes:

Attribute	Required	Description	Allowed Values
stretchX	No	Indicates if the layout should stretch horizontally. Optional.	Any
stretchY	No	Indicates if the layout should stretch vertically. Optional.	Any

Allowed Children: button, checkbox, input, plot, select, text, horizontal-layout, vertical-layout

Example:

<vertical-layout stretchX="abc" stretchY="abc">
   <button ... />
</vertical-layout>

text

Displays static text, typically used for labels and headers.

Attributes:

Attribute	Required	Description	Allowed Values
label	Yes	Text content to be displayed.	Any
color	No	Color of the text. Optional. Valid values are ‘info’, ‘error’, ‘success’.	info, error, success

Allowed Children: None

Example:

<text label="abc" color="info" />