NEPI Engine – Customizing the NEPI RUI System
Introduction
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:
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).
Example:
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:
https://nepi.com/documentation/nepi-engine-user-interface-system/