> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/standard-components/dashboard.md).

# dashboard

This is the category of components for a user interface. Main common appearance properties are described for the button component (and UI element), so explore it first.

## button

The component creates a user interface button so that a human will be able to send a command to the system. For example: open the door, stop working immediately, turn on the light, reset all the tasks, etc. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MML6hCyk_Wp1day71xh%2F-MML81mKh_JTBPKMCnAc%2Fbutton.gif?alt=media\&token=d669da24-e9d1-4e8b-a9af-8b1b35aecf3d)

#### Properties 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MML6hCyk_Wp1day71xh%2F-MMLC5crauH2-MoWyn5D%2Fbutton%20prop%201.png?alt=media\&token=e4f17872-2598-4027-9234-363bcadb09b9)

* On a UI you can group the elements - by using Groups **(1)** and Tabs.
* Choose the size of the button on UI **(2)**.
* To add an Icon **(3)** to the button appearance you may use, for example, the [Font Awesome](https://fontawesome.com/) library. Type **fa-** and an icon name from the site (try **fa-fire**). Or [Angular Material Icons](https://klarsys.github.io/angular-material-icons/) library - type **mi-** and an icon name (e.g. **mi-work**).
* Label the button **(4)** to show its function to a user. For example, '**Empty Bin'**.
* Specify the tip **(5)** that will appear when a user hovers the button with a mouse cursor.
* Change the default color **(6)** of button text and icon. You may simply type a color name ('blue', 'yellow', etc.) or use hex-color codes (from [Color Hex Color Codes](https://www.color-hex.com/), for example). 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMLRPiEQT6rGnZ7-Yku%2F-MMLToLCM1pYspqqwX7p%2Fbutton1.gif?alt=media\&token=f2073cb1-13cd-40b5-a375-b6986ece1efd)

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MML6hCyk_Wp1day71xh%2F-MMLCg43RWblPJ4LOwnE%2Fbutton%20prop%202.png?alt=media\&token=12e48d2c-b374-430f-97bb-e70873abef71)

* Change the background color **(7)** with a hex color code, or you can simply type a color name ('blue', 'yellow', etc.)
* Specify the payload of the message object **(8)** and its topic **(9)**.
* You can make the button get pressed each time when the component receives a message **(10)** - and you won\`t need to use UI to test its work.
* Give a name to the component **(11)**. This name will appear on the workspace, but on the UI the button will show the Label **(4)** name. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMLWwcO-9-uEpWaNVbC%2F-MMLZ2mzVUX7U4xhmLRX%2Fbutton2.gif?alt=media\&token=e39cb2cc-c950-4e66-8c86-c00577779a84)

## dropdown

The component creates a UI element with a dropdown list. Multiple options can be added.

#### Properties 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMLgyMD_GFYTJaPg0ko%2F-MMLi3wC_abIX-XnfL5X%2Fdropdown%20prop1.png?alt=media\&token=b2f6cc5e-1c7c-4aff-b5c7-e06b7e006b19)

* The **Placeholder (1)** is an inscription on the field, that a user clicks to expand the list of options. By default, it\`s **Select option**.
* Options **(2)** - the list of labels from which a user chooses. The chosen label carries a message payload value. For example, the user chooses '**Use 1 robot**' and the component sens the value '**1**'.  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMLgyMD_GFYTJaPg0ko%2F-MMLkQK_JnDg28kM8Nmr%2Fdropdown%20prop2.png?alt=media\&token=fecdb005-b993-4da4-9238-a3e123fc2124)

* You can add as many options as you need (3).
* You can allow choosing multiple options (4).
* There is a possibility **(5)** to pass a message from input to output without changes. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMLkrK2hTxLFU7TQuiH%2F-MMLlthyYNXWosOet76-%2Fdroplist1.gif?alt=media\&token=70e04c86-16be-402a-aca8-613241fdd7e9)

## switch

The component creates a UI element, that allows a user to switch between two modes. For example, 'Turn On' and 'Turn Off'. 

#### Parameters 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMQTPXCf6YWqnGCzcHX%2F-MMQWuDhIUTkmcV0_Zgu%2Fswitch1.png?alt=media\&token=91ddd304-0562-41b1-97be-0de8f6533451)

Although the component makes a UI switcher for manual switches, you can set up switching through the appropriate incoming payload **(1)**. For example, if the component receives the payload value numeric '1' and it equals the On Payload setting **(2)**, so the component will pass the message '1' and you\`ll see 'On' mode on the UI.

You may set payload values for 'On' and "Off' modes **(2)**. By default, it\`s boolean **true** and **false** correspondently. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMQ_Diay6I47wsAqJZw%2F-MMQbAZGdiOvAmb6kca1%2Fswith%20pp.gif?alt=media\&token=5ea6c9d5-65d4-4c6c-a6e2-d8391662536b)

## text input

Creates a UI field for a user's text input.

#### Properties 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MPccL5ACRgaBuetpFTM%2F-MPcdN7eU8oEweOFpzxJ%2Fimage.png?alt=media\&token=c126cda0-8be2-4d4b-ae4c-438ccaff78eb)

Add a **Tooltip (1)** that pops up when you hover above.

Choose the input **Mode (2)** - and it will color in red if it is not a valid address and will return undefined.

Choose the **Dalay** in milliseconds - the time delay before sending the output. If you set 0, it will be sent after the user hits **Enter** or **Tab**.

You may preset the component to pass the message through to the output with no typing by the user.

We will do this in the example:  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MPccL5ACRgaBuetpFTM%2F-MPcdW3JUuU99i0vIN_x%2F5.gif?alt=media\&token=46b887e6-9e59-47ee-a542-d001fc7c7488)

## color picker

#### Properties 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MTKYtlqdX8Q1TCU38Mw%2F-MTKsTK7QoTNHMzjMFll%2Fpicker%20prop1.png?alt=media\&token=bea41cd2-9ed0-4212-af90-97a5e8af20a5)

Choose the output color **Format (1)** - **hex** (in string) by default. 

The color picker widget can be square and round shape **(2)**. 

Choose to display or not the **hue (3)** and **lightness (4)** sliders. 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MTKvEbYu86zxtLZxqlr%2F-MTKwgRVRtltPlbbZeQQ%2Fpicker%20prop2.png?alt=media\&token=e95a86f6-e6cb-4ce9-9785-97e1ee2b5ba7)

The color picker widget has elements that appear only on hover. But if the widget will be large enough you can choose to always show the **swatch (5)**, the **picker (6)**, and the **value field (7)**.

The component can **Send (9)** the output each time when you click the picker, choose the color in the color field, and close the field by clicking the picker. Or it can sand the outputs many times while you are clicking the colors on the color field.

You can choose to send the **Payload** value **(10)** as a string or an object.  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MTL-e1oQBEM1lLdwLCB%2F-MTL1K2ahh3bn7blD8nR%2Fpicker.gif?alt=media\&token=7b957bf3-604b-4327-8477-d6ec5dd9e5fe)

## text

Displays a non-editable text UI field.

#### Properties 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MPccL5ACRgaBuetpFTM%2F-MPccj5Zs2Fle3T-6ddN%2Fimage.png?alt=media\&token=87c74fed-059e-45f9-8940-3f1a99a6b1bd)

Specify the **Value format (1)** - what property of a message object to show in the text field. It must be in double curly braces. For example, **{{msg.topic}}** or **{{msg.payload.facility}}**. By default it\`s {{msg.payload}}.

Choose **Layout** for the field **(2)**.   

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MPccL5ACRgaBuetpFTM%2F-MPccyWnuOKX8WGFUkwd%2F4.gif?alt=media\&token=cdb5170f-0ecd-4ed1-955d-b78462aca68e)

## gauge

Creates a gauge UI element that shows the numeric payload values. 

#### Properties 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMQy3Hs1dfsez3_oe8J%2F-MMR0oldaG2re-ng5P3n%2Fgauge%20prop.png?alt=media\&token=d44c23c9-ddaf-4d8c-89a8-53ba5c16fc3d)

Choose the UI representation **Type** **(1)** - **Gauge**, **Donut**, **Compass**, or **Level**.

Specify the **Value** representation **format** **(2)** - by default, it\`s just a number. See more in **Help** on the sidebar.

By default, the numbers will be market as units, but you can specify it **(3)** - for example, as **kg** or **mins**.

Establish the **Range** of numbers\` representation **(4)**.

Choose the colors **(5)** of gradient changes when numbers go from a lower to a higher level.

Also, you can set scopes for colors **(6)** - for example, to signalize about some system state.

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMVMp-U5ADYvlt2DtlH%2F-MMVN-Zw-S8Qkf_oTDpj%2Fgauge.gif?alt=media\&token=304dac79-8131-4f1e-92b5-4d23c93f0490)

In this example, we used a UI **button** and a **function** component that generates a random number from 1 to 100 to imitate data inputs. 

## chart

The component plots the input numeric values on a UI chart. If the message payload is not numeric the component tries to convert it (for example, string type '1' to numeric type '1'), and if it fails, the message is ignored.

#### Properties 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMVP8wldIP_qBjjZ1OK%2F-MMW3xGMLxh0ZKMgpM5o%2Fchart%20props.png?alt=media\&token=5c55802a-9b06-4198-8980-c5f65e4ca440)

Choose the **Type** of UI representation **(1)**. To emphasize points on the chart - enlarge points **(2)**.

Specify the length of the **X-axis** **(3)** - in time units or points.

Choose the **X-axis Label** format (4). 

You can set up the scope of the numbers on the **Y-axis** **(5)**. If you didn\`t, the chart will be adjusted automatically.

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MMWD24onPuhR8Qb3Y0h%2F-MMWJRa5W8-R2ZXXuRur%2Fchart%20prop%201.png?alt=media\&token=0c793d51-b5d7-4b3e-b468-dd6607c1aa10)

If you choose to show **Legend (6)** the topics of all messages will appear above the chart. For example, you have two sources of data, and you want to see them both on the chart. To do this you have to specify **msg.topic** for each of them. Then choose **Show Legend (6)** and you will see which color a source got on the chart.

The **Interpolate** option **(7)** specifies which type of connections (lines) will be on the chart.

You can choose the color of lines (or bars) on the chart **(8)**. The chart component will use them in turn: the first color for the first source (topic) and so on.

You may place some text on the chart to be there before the data arrives **(9)**. 

We will use two buttons in the example - to imitate two sources of data - and a function component that generates random numbers from 0 to 100.  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MPccL5ACRgaBuetpFTM%2F-MPcdvRcAepSDK02RHP_%2F6.gif?alt=media\&token=07d67e3d-78de-4e33-9bd7-3446f75437c1)