# Web User Interface

The DeviceOn web interface is based on the VUE framework and leverages the [Vuestic Admin](https://vuestic.epicmax.co/) template. The user interface is divided into three main parts: the navigation bar at the top, the menu bar at the left and the main content in the center with.

![](https://i.imgur.com/Z12wO5u.png)

## General Operation and Icon Concept <a href="#general-operation-and-icon-concept" id="general-operation-and-icon-concept"></a>

### **Icons**

<figure><img src="https://2609455635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeOYEBAkqbuotygPSIr8f%2Fuploads%2FrL3rZWvQ0ChTNzqEYt2N%2Fimage.png?alt=media&#x26;token=81d4412c-7c44-4d89-9d97-cca2bd09bf38" alt=""><figcaption></figcaption></figure>

### **Filter & Select**

In some function lists, it is often to select and filter the required devices through filter first. For example, select account, device group, status, etc.\


<figure><img src="https://i.imgur.com/NTezXTm.png" alt=""><figcaption></figcaption></figure>

## Navigation Bar <a href="#navigation-bar" id="navigation-bar"></a>

### Account Information

Click the account icon to show the currently logged in account and respective role. For more information, click “**My Profile**” to open the account page. ([**Menu -> Account**](web-user-interface/account-management)). Click “**Logout**” to log out from DeviceOn and remove personal information like cookies or tokens.\


<figure><img src="https://i.imgur.com/RztS85C.png" alt=""><figcaption></figcaption></figure>

### **Languages**

DeviceOn supports multiple languages that can be changed by clicking the globe icon in the navigation bar. Currently there are three languages to choose from: **English**, **Traditional Chinese** and **Simplified Chinese**.\


<figure><img src="https://i.imgur.com/BHLcF4m.png" alt=""><figcaption></figcaption></figure>

#### **Document (FAQ & APIs)**&#x20;

There are two documents on DeviceOn user interface, one is Restful APIs, and another is FAQ that including technical and general questions.\


<figure><img src="https://i.imgur.com/avxxIBP.png" alt=""><figcaption></figcaption></figure>

DeviceOn provide hundreds of API for App engineer to build up their AIoT solution, through the APIs to get account, map, device data, and remote diagnostic on devices. The API document is generated by APIDoc, includes API method, request, response, header and testing.\


<figure><img src="https://i.imgur.com/nJVCsGm.png" alt=""><figcaption></figcaption></figure>

### Notification

If there are any active notifications, the number of event log messages is shown on the notification icon. Click the notification icon to see the event message summary. Three levels of events are supported: “**Information**”, “**Warning**” and “**Error**”, and the user can select which type of events should be shown on the user interface. For example, clicking the “**Unsubscribe Notification**” would disable any events in the screenshot shown below. _**Please note that after disabling events, the UI will not refresh automatically but needs to be refreshed manually**_. Click “**More**” to open the event log page ([**Menu -> Event Log**](web-user-interface/event-logs))\


<figure><img src="https://i.imgur.com/oqnGIMy.png" alt=""><figcaption></figcaption></figure>

### **Device Onboarding**

To onboard devices, click the onboarding icon in order to download, setup the DeviceOn Agent on your devices and to look up the required connection credentials.\


<figure><img src="https://i.imgur.com/O3XB9VK.png" alt=""><figcaption></figcaption></figure>

The credential URL and IoT Key is the key information for device connection, please copy “**Credential URL**” and “**IoT Key**” during the DeviceOn Agent installation. Also, you cloud refer the [DeviceOn Agent Installation](get-started/installation-and-deployment/agent/windows) for details and steps.\


<figure><img src="https://i.imgur.com/GU7b91y.png" alt=""><figcaption></figcaption></figure>

### View Upgrade Details

This item will only show up if you have an older version of the Agent (**below v1.4.50**) installed on your system. Because older Agents use **OpenSSL version 1.x**, which is explicitly not supported in **RabbitMQ 3.13**, it is recommended that you upgrade these Agents as soon as possible to avoid potential security issues.

<figure><img src="https://2609455635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeOYEBAkqbuotygPSIr8f%2Fuploads%2Fkppocge2XIyydMZjnBDq%2Fimage.png?alt=media&#x26;token=2bdf146e-1125-4ddb-9563-637034060bb7" alt=""><figcaption></figcaption></figure>

The device list here only displays versions lower than v1.4.50. You can upgrade or delete devices that are currently online. For devices that are not online, you can decide if they are no longer being managed and delete them.&#x20;

{% hint style="danger" %}
Note that deleting a device removes all data from that device, including the connection information.
{% endhint %}

<figure><img src="https://2609455635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeOYEBAkqbuotygPSIr8f%2Fuploads%2FSGlczUTCQUawI7UKzuaN%2Fimage.png?alt=media&#x26;token=cec697fe-ba55-4665-b46f-2fed5dbc0c02" alt=""><figcaption></figcaption></figure>
