< All Topics

NEPI Engine – Customizing the NEPI RUI System


This tutorial will walk you through customization of the NEPI Engine Resident User Interface System that would be useful for NEPI developers.

What you will need:

1) 1x NEPI-enabled device with internet access. This tutorial uses an edge-compute processor box that includes an NVIDIA Jetson Xavier NX embedded GPU with NEPI Engine software installed.

NOTE: See available off-the-shelf NEPI enabled edge-compute options at: https://numurus.com/products-nepi-enabled-hardware/

2) 1x PC with internet access and configured to access the NEPI device’s File System.

NOTE: Instructions for configuration a PC and connecting to a NEPI device’s File System are provided in the NEPI Engine – Getting Started – Accessing the NEPI File System tutorial at: https://nepi.com/nepi-tutorials/

Customizing and Compiling NEPI RUI

NEPI’s web-browser supported Resident User Interface system is built on JavaScript and React, a JavaScript-based UI development library. The RUI interacts with the NEPI ROS-based application system through a custom ROS-HTML Bridge Node that converts data back and forth between the two environments. All data and controls available on the RUI have a ROS based interface, and vice versa.

Cloning the NEPI file System

Instructions for cloning NEPI Engine GitHub source-code repos, see the NEPI Engine – User Interface System manual at: https://nepi.com/documentation/nepi-engine-user-interface-system/

Editing the RUI Menu

You can modify the RUI’s top menu by following these instructions:

1) Open the App.js menu file from the cloned nepi_rui repo on you

cd <Your Git Code Folder>/nepi_base_ws/src/nepi_rui/src/rui_webserver/rui-app/src

vi App.js

2) Edit the menu, save, and exit

Changing the RUI Logo Image

You can update the logo shown at the top-left of the RUI screen using the following instructions:

A blue rectangle with red and white text Description automatically generated

1) Create a logo with the correct aspect ratio

Logo (1004×254): ~4:1

2) Convert your PNG/JPG image to webp format. Many browser-based web tools can do this. E.g., https://cloudconvert.com/webp-converter

3) Change the logo file on the device to your new webp-formatted file(s) in the cloned source-code repo on your PC.

<Your Git Code Folder>/nepi_base_ws/src/nepi_rui/src/rui_webserver/rui-app/src/logos/logo.webp

Editing or Creating RUI Tabs

Each tab in the RUI web application is management by its own “.js” file (i.e. Dashbard.js). Within these js page files, the page is defined by a combination of JavaScript/react layout directives and mappings to NEPI ROS topics and services defined by the NEPI back-end codebase (see next section).


renderSaveData() {

const { onToggleSaveData, systemStatusDiskRate, deleteAllData } = this.props.ros

return (

<Section title={"Save Data"}>

<Label title={"Save Data"}>

<Toggle id={"toggle_save_data"} onClick={onToggleSaveData} />

Where the RUI DASHBOARD tab’s “Save Data” section is defined by the “renderSaveData()” function, which maps the “onClick” js variable to the ROS-bridge mapped “onToggleSaveData” service, which connects to the NEPI ROS “/nepi/s2x/save_data” system control topic.

Editing or Creating RUI-ROS Interfaces

The RUI interfaces with the NEPI Engine ROS processes through a ROS to JSON and ROS to HTML bridge. These bridge data and control mappings are located in the file:

<Your Git Code Folder>/nepi_base_ws/src/nepi_rui/src/rui_webserver/rui-app/src/Store.js

You can edit or add new RUI-ROS bridge interfaces within this file

Rebuilding Front-End Changes

For detailed instructions on rebuilding and deploying any changes to the NEPI RUI system, see the NEPI Engine – User Interface System manual at:


Table of Contents