Skip to content

Maivin Web UI Walkthrough

This article will walk you through the Maivin's Web User Interface (Web UI). The Web UI is served by the websrv service on the device over HTTP and HTTPS and is reached at https://verdin-imx8mp-XXXXXXXX.local where the eight digits are the device serial number.

The Main Page

The Main Page of the Maivin web interface should look as follows:

Maivin Main Page
Maivin Main Page

The Main Page shows one card for each running visualization. Cards only appear while their service is running, so a stock Maivin shows the following three cards:

  • Camera: This page shows the live camera video with optional detection and segmentation overlays from the model service.
  • IMU: This page displays the 3D orientation of the device with current roll, pitch, and yaw values.
  • GPS: This page displays a map with the current location of the device, along with GPS coordinates.

The LiDAR and Radar cards described in the Raivin Web UI Walkthrough appear when the LiDAR or radar publisher services are running.

The Top Ribbon

The ribbon at the top of the web interface is available on every page of the web interface. The following elements are available on every page of the device's web interface.

  1. On the left, the "Home" button with the Au-Zone icon, which will return the user to the Main Page
  2. In the middle, the title of the current page
  3. On the right side, we first have the Recording Indicator, shown as a gray oval with "REC" when not recording from the sensors and a red oval when recording
  4. The MCAP Details Modal button, which opens the MCAP Modal
  5. The EdgeFirst Studio button, which shows whether the device is logged in to EdgeFirst Studio and opens the login dialog used for uploading recordings
  6. The System Status Indicator and Dropdown button
  7. The theme toggle switching the interface between light, dark, and automatic modes
  8. The farthest rightmost button, with the gear icon, is the Settings Button which will take you to the Settings Page

Notifications such as the outcome of saving a configuration page or starting a recording appear as cards below the ribbon. Errors stay until dismissed while informational notifications clear on their own.

The MCAP Modal

The MCAP Modal is the interface to manage MCAP recordings, including getting information about recorded MCAP files, disk usage, deletion, downloading files, uploading files to EdgeFirst Studio, and replaying files on the device. More information about the MCAP Modal and recording MCAPs is in the Recording section

A recorded MCAP file
A recorded MCAP file

System Status Indicator

Mousing over the System Status Indicator field will give a brief summary of any problems.

Dropdown reporting good
Dropdown reporting good
Dropdown reporting bad
Dropdown reporting bad

More on these status can be found in the Status Monitoring section.

Clicking on the indicator will bring up the Service Status Modal, which contains a list of services and, if available, clickable gear icons that link to the service's configuration page.

Service Status Modal
Service Status Modal

The Visualization Pages

These pages contain the user-facing functionality of the vision module.

The Camera Page

The Camera page shows the live camera video decoded from the camera/h264 topic. The controls at the top of the page toggle the segmentation overlay, which draws the detection boxes and segmentation masks published by the model service on model/output over the video, and the LiDAR overlay for devices with a LiDAR sensor. A statistics panel reports the model latency and throughput.

Maivin Camera Page
Maivin Camera Page

Note

The overlay state is not persisted across page refreshes and enabling the overlays can stutter the live video with segmentation models, refer to the Known Issues.

The GPS Page

The GPS page shows an interactive map centered on the device's location as published by the NavSat service on the gps topic.

GPS Page
GPS Page

This should be familiar to anyone who has used standard map web interfaces. The map can be moved by dragging with left-mouse button (or touch with a touchscreen-enabled device). The "+" and "-" buttons on the left will zoom-in and zoom-out on the map. The "Refresh" button will re-center the map on the device's location. The latitude and longitude are also reported on the web interface. The map tiles are loaded from the Internet, the position readout works without connectivity.

The IMU Page

The IMU page shows the device's orientation in 3D as published by the IMU service on the imu topic.

IMU Page
IMU Page

By physically moving the device, it's virtual counterpart should move the same way. Roll, pitch, and yaw values are reported. If the device's virtual orientation does not match the physical orientation, keep the device's bottom flat and hit the "Reset Orientation" button.

Next Steps

Now that you have set up your Maivin and are familiar with the Maivin's Web UI, you can proceed to copying a public dataset in EdgeFirst Studio to train your own vision model that will be deployed in this device.