---
title: "User Interface"
description: "The user interface of LumiScan Annotation Web: top bar, image list, image area, toolbar and the panels for notes, labels, the selected box and history."
product: "LumiScan Annotation Web"
component: "lumiscan-annotation-web"
version: "2.2.0"
display_version: "2.2.0.0"
latest_version: false
language: "en"
url: "https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/user-interface.html"
---

# User Interface – LumiScan Annotation Web

After signing in, the browser shows the open project with its image list on the left, the image in the middle and the panels on the right.

![The LumiScan Annotation window with numbered markers: project selection, image list, image area, toolbar, revision notes, labels, selected box, user menu, notes for you and logo](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/_images/screens/workspace-callouts.jpg)

**Table 1. Elements of the user interface**

| No. | Element | Description |
| --- | --- | --- |
| 1 | Project and folder | **Project**: the projects you take part in (hidden with only one). **Folder**: the sub-folders of the project, usually one per day. Next to it: the open image and its position in the folder. |
| 2 | Image list | All images of the folder. A filled dot: the image has boxes; a hollow dot: not yet. A name in red: that person is editing the image right now. ✎ with a number: open revision notes. Above the list: search by file name, **Show**, **Label** and **Sort**, and **Rate with network**, see [Finding and Sorting Images](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/finding-and-sorting-images.html). |
| 3 | Image area | The open image with its boxes. The green edge is the bottom of each box, the label is written next to it. The selected box is yellow with four corner handles. Mouse wheel: zoom; drag an empty area: move the image. |
| 4 | Toolbar | **Previous** / **Next** image, undo ↶ and redo ↷, **New box** with the switch for the drawing mode ([center-line](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/annotating-images.html#center-line-rectangle) or [edge rectangle](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/annotating-images.html#edge-rectangle)), zoom − / + with the current zoom, **1:1** (one screen pixel per image pixel), **Fit**, and the mouse position in image pixels. **Copy ▾** ([copying boxes](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/copying-boxes-and-templates.html)), **Save and copy to next** and **Save** below. |
| 5 | Revision notes | Instructions left on this image, see [Revision Notes](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/revision-notes.html). **Add note** leaves one. |
| 6 | Labels | The labels of the project; the number is the key that applies it. Clicking a label applies it to the selected box and to new boxes. **Add** adds a label to the shared list. ▭: the label has a [box template](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/copying-boxes-and-templates.html#box-templates); **Place … template** (`T`) places it. |
| 7 | Selected box | Centre, width, height (in pixels) and angle (in degrees) of the selected box, editable, and the **Bottom edge** buttons that turn the 0° side; **Save as template** (project admins). **Suggest boxes** below, if a box suggestion service is configured. Further down: **View** (brightness, contrast, show labels, show center lines, magnifier) and **History**. |
| 8 | User menu | Your name and roles; **Change password** (local accounts), **Projects** and **Users and sign-in** (admins), **Log out**. |
| 9 | Notes for you | Number of open revision notes addressed to you in this project. Click to open the next one. |
| 10 | Logo | Stays at the bottom of the image list; only the list scrolls. |

Depending on your role and the project, the top bar also shows:

- **Annotate** / **Review**: switch between your own annotation and the comparison of the annotators (with several annotators per image, if you have both roles).
- **Statistics**: agreement between the annotators (reviewers).
- **Export for Training**: the annotated images as a LumiScan Training project, see [Export for LumiScan Training](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/export-for-lumiscan-training.html) (reviewers, project admins).
- **Version … available**: a newer version is out (single-PC installation, project admins).
- **Settings**: labels, region of interest, several annotators, box suggestions (project admins).
- **Shortcuts**: the list of keyboard shortcuts.
- The status: **Ready**, **Saved …**, messages and errors.

![User menu with name, user name, account type and roles, and the entries Change password, Projects, Users and sign-in, Log out](https://docs.hdvisionsystems.com/en/lumiscan-annotation-web/2.2.0/_images/screens/user-menu.png)

## Small screens

Below a width of about 1000 pixels the panels are stacked: the image first, then the panels, then the image list.