> For the complete documentation index, see [llms.txt](https://gsfcorp.gitbook.io/macula/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gsfcorp.gitbook.io/macula/administration-guide-v1.33.0/control-panels.md).

# Control Panels

Macula introduces Control Panels – a powerful feature that enables real-time monitoring of system states, device statuses, and various metrics directly within the viewport. These panels are configured in the Macula Console and displayed in the Macula Monitor, offering a concise and interactive overview of system health and performance.

A Control Panel consists of one or more monitoring items, which can be grouped, assigned to users, and displayed dynamically inside the Monitor layout. You can create different panels for different use cases, such as server load monitoring, offline device tracking, or user interaction logs.

#### Configuration in Console

To create a control panel:

1. Open *Configuration* > *Control panels*. 
2. Click + *New* and select *New control panel*.

<figure><img src="https://412599993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeNXnJx0OpvxnmpWqOBNm%2Fuploads%2FGUnBBIHaAtQMN7RUs7yF%2Fimage.png?alt=media&amp;token=5762db38-eca4-4c37-9b06-6731b715560f" alt=""><figcaption></figcaption></figure>

3. On the *Details* tab, enter the control panel title.

<figure><img src="https://412599993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeNXnJx0OpvxnmpWqOBNm%2Fuploads%2FDdIJSs4rBzvjfIk8mO4g%2Fimage.png?alt=media&amp;token=d2895586-a730-487a-a272-a3556977d685" alt=""><figcaption></figcaption></figure>

4. Select *Enable* to allow the control panel to be used.
5. Open the *Items* tab.

<figure><img src="https://412599993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeNXnJx0OpvxnmpWqOBNm%2Fuploads%2F4RK1kVOfLQDdGlQ8x0aU%2Fimage.png?alt=media&amp;token=7a69a4bc-284b-4c24-bab1-e9000285f91e" alt=""><figcaption></figcaption></figure>

6. Configure the panel layout.
7. Click *Add* and select the items that must appear on the control panel.

<figure><img src="https://412599993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeNXnJx0OpvxnmpWqOBNm%2Fuploads%2FAa0amKQxWktjjmdjqqlp%2Fimage.png?alt=media&amp;token=2d06bbc9-486b-4735-ad4b-457c1df32142" alt=""><figcaption></figcaption></figure>

8. Position and size each item on the grid.

<figure><img src="https://412599993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeNXnJx0OpvxnmpWqOBNm%2Fuploads%2FrYDXsNAd7XXZEXgsGwEP%2Fimage.png?alt=media&amp;token=71bfe029-01d1-4ad1-8486-a9f77a07eb0c" alt=""><figcaption></figcaption></figure>

9. Click *OK* or *Apply* to save the control panel.

<figure><img src="https://412599993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeNXnJx0OpvxnmpWqOBNm%2Fuploads%2FwkcY67iLlEmSTC6cO5Qf%2Fimage.png?alt=media&amp;token=8df5b8d0-d534-454f-97d3-24b9527c839f" alt=""><figcaption></figcaption></figure>

You can also create *New control* *panel* *group* from the + *New* menu and use *Assign* *group* to organize control panels.

#### Configure the Control Panel Grid

The *Items* tab provides a visual grid editor for arranging control panel items.

Select *Panel* in the properties pane to configure the whole panel. The following settings are available:

* *Mode*: display mode for the control panel. The current grid-based display mode is *Tiles* *view*.
* *Grid* *size*: number of grid columns and rows used by the panel.
* *Keep* *aspect* *ratio*: preserves the panel proportions when the panel is displayed in Macula Monitor.

Click *Add* to open the item selection dialog. The list may include text items, such as server CPU load, memory load, network load, disconnected servers, and offline channels, and button items, such as user buttons.

After adding an item, select it in the grid to edit its properties:

* *Title*: label displayed for the item.
* *Item*: linked control panel item.
* *Icon*: optional item icon.
* *Tile* *X*: horizontal position in the grid.
* *Tile* *Y*: vertical position in the grid.
* *Tile* *width*: number of grid columns occupied by the item.
* *Tile* *height*: number of grid rows occupied by the item.

Items can occupy one or more grid cells. Use larger tile width and height values for items that need more space, such as live values or buttons.

#### &#x20;Control Panel Items

Control panel items are displayed differently depending on their type:

* Text items show the current value and the last update status.
* Button items appear as clickable buttons in the panel.

The item layout configured in Console defines how the panel will appear in Monitor.