---
title: "User Interface"
description: "The four panels of LumiScan VGR Engineering - configuration panel, graph overview, editor and preview - and how to work with them."
product: "LumiScan VGR Engineering"
component: "lumiscan-vgr-engineering"
version: "1.0.0"
display_version: "1.0.0.3"
latest_version: true
language: "en"
url: "https://docs.hdvisionsystems.com/en/lumiscan-vgr-engineering/1.0.0/user-interface.html"
---

# User Interface – LumiScan VGR Engineering

The window of LumiScan VGR Engineering has four parts:

- The **configuration panel** at the top holds the buttons that act on the configuration as a whole
  - save, reload, download, upload.
- The **graph overview** at the bottom shows the elements of the configuration in their categories and how they are connected.
- The **preview panel** on the left shows the element selected in the graph overview and how the current settings affect it.
- The **editor panel** on the right shows the settings of the selected element and is where they are changed.

![LumiScan VGR Engineering: configuration panel at the top, preview (left) and editor (right) in the middle, graph overview with the Cameras, ObjectDetections and Robots columns at the bottom](https://docs.hdvisionsystems.com/en/lumiscan-vgr-engineering/1.0.0/_images/VGREngineeringOverview.png)

## Configuration panel {#configuration-panel}

The four buttons act on the entire configuration. Files can also be dropped onto the buttons instead of using **Upload**.

**Table 1. Buttons of the configuration panel**

| Button | Function |
| --- | --- |
| **Save** | Saves the current state of the settings. |
| **Reload** | Loads the last saved settings back into the user interface. Use it to revert unsaved changes. |
| **Download** | Downloads a `.zip` file that contains the settings in the format of LumiScan VGR Engineering and in the format used by LumiScan VGR or other compatible software. |
| **Upload** | Uploads a file into the configuration: either a `.zip` file that was downloaded from LumiScan VGR Engineering, which restores that configuration, or a file that the settings refer to, for example a `.hdvcal` camera calibration file. |

## Graph overview {#graph-overview}

The graph overview shows the elements of the configuration as columns, one per category, connected from left to right: a configured camera produces an image, an object detection consumes it, and the detection result is used to control a robot. Each category can hold several elements, and an element can be connected to several elements of the next category.

- **Select:** Click an element. The preview and the editor switch to it.
- **Add:** Type a unique ID into the **id** field at the bottom of the column and click **Add**.
- **Remove:** Select the element and click the **X** that appears in its top-right corner.
- **Connect:** Drag from the source element to the target element.
- **Disconnect:** Double-click the connection. The mouse pointer changes when it is over a connection.

What the elements of each category contain is described under [Configuration Elements](https://docs.hdvisionsystems.com/en/lumiscan-vgr-engineering/1.0.0/elements.html).

## Editor panel {#editor-panel}

The editor shows the settings of the element selected in the graph overview and is where they are edited. It has two views, switched with the buttons in its top-right corner:

- **Form** - the settings as input fields with labels, grouped by topic.
- **Raw JSON** - the same settings as JSON text.

Both views show exactly the same information and allow the same changes; use whichever suits the task.

## Preview panel {#preview-panel}

The preview shows the element selected in the graph overview. What it shows depends on the type of the element, and it is updated whenever a setting that affects the element is changed. Many element types offer two views, switched with the buttons in the top-right corner of the preview:

- **Image** - the camera image.
- **Point cloud** - the 3D data, which can be navigated with the mouse:
  - drag with the left mouse button to rotate,
  - drag with the right mouse button to pan,
  - turn the mouse wheel to zoom.

The point cloud view also shows the coordinate system: a red, a green and a blue line mark the x, y and z axis. They start at the coordinate origin and each has a length of 1.