< All Topics
Print

NEPI Engine – User Interface System

Architecture

NEPI’s web-browser supported Resident User Interface (RUI) 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.

A diagram of a computer Description automatically generated The RUI codebase is made up of a “front-end codebase” that controls the look and feel of the RUI interface using JavaScript and React tools, and a “back-end codebase” that provides the bridge between the NEPI RUI interface and the NEPI ROS interface. The RUI codebase is easily customizable with a few examples below. Be sure to recompile the application after making any changes to your RUI codebase following the instructions in the last part of this section.

Components

The NEPI Engine RUI source-code files are located in the “nepi_rui” source-code repo’s src folder at:

nepi_rui/src/rui_webserver/rui-app/src

NOTE: The NEPI RUI source-code is available in the NEPI Engine GitHub repo. To request access to NEPI Engine source-code repositories, visit:

https://nepi.com/github/

Source Code Files

NEPI Engine RUI components are built from a combination of standard and custom JavaScript and React files described in the table below.

NEPI RUI Source Files
File NameDescription
Store.jsContains the interface definitions between the js system and NEPI’s html ROS bridge.  Any NEPI ROS messages or services must be defined in this file before they are accessible to the remaining js system.
Nav.jsContains custom UI functions used acros the RUI js system.
App.jsContains the top-level menu code.
nepi-rui-typography-theme.jsContains the RUI theme settings.
Remaining FilesCombination of utilities and RUI page HTML source code.

Installation

Installing From Source-Code

NEPI Engine software is available in source-code format, downloadable pre-built system images for select hardware platforms, and pre-installed hardware solutions from both Numurus and its edge-compute hardware partners. This document provides instructions for building NEPI Engine entirely from source. Use cases that would influence a source-code build over one of the alternative options include:

  1. Users may prefer complete control over system bring-up
  2. Users may be developing a NEPI solution on a hardware platform not currently supported by one of the other options.

For instructions on building and deploying NEPI Engine from source-code on new hardware, see the NEPI Engine – Source-Code Access, Build, and Installation Instructions at:

https://nepi.com/documentation/nepi-engine-source-code-build-and-installation/

Customization

The NEPI RUI user interface system source-code is fully contained within the “nep_rui” GitHub repository.  The following instructions walk through the process of cloning, editing, moving, and compiling the “nepi_rui” source-code.

NOTE: For detailed examples of customizing the NEPI Engine RUI, see the tutorials in the NEPI Engine – NEPI Customization section at: 

https://nepi.com/tutorials/

NOTE: For a deeper overview of the NEPI Engine file system and instructions for customizing NEPI Engine software system, see the NEPI Engine – Software File System developer’s guide located at:  

https://nepi.com/documentation/nepi-engine-nepi-file-system/

Software Setup

The following section assumes you have set up a NEPI ssh key on your PC and successfully connected to your NEPI device with an SSH connected terminal as described in NEPI Engine – Accessing the NEPI File System tutorial available at:

https://nepi.com/nepi-tutorials/nepi-engine-accessing-the-nepi-file-system/

Assuming you have set up an SSH alias as described during the SSH setup process, just open a terminal on your Linux PC connected to your NEPI device and type:

sshn

NOTE: Both Linux vi and nano editors are installed in the NEPI file system. While this document uses the vi editor in examples, some might find the nano editor easier to use.

Command Line Shortcut Aliases

If you would like to set up useful short cut commands for your NEPI device SSH terminal, do the following from an SSH connected terminal window:

sudo vi ~/.bash_aliases

then add any aliases to simplify your work.  The following aliases and source commands are pre-installed on most NEPI images:

alias rosstop="sudo systemctl stop roslaunch"

alias rosstart="sudo /opt/nepi/ros/etc/roslaunch.sh"

alias auto="cd /mnt/nepi_storage/automation_scripts/"

alias data="cd /mnt/nepi_storage/data/"

alias ai="cd /mnt/nepi_storage/ai_models/"

Instructions

1) Clone the nepi_rui Repository

NOTE: This section assumes you already have access to the source-code for each of these software components is available in the NEPI Engine GitHub repo. To request access to NEPI Engine source-code repositories, visit:

https://nepi.com/github/

a) On a Linux PC with Git installed, open a terminal window and enter the following commands to clone the latest nepi_rui source-code from the development branch:

git clone git@github.com:numurus-nepi/nepi_rui.git
cd nepi_rui
git checkout develop
git pull

b) Leave this terminal window open for step 3 below.

2) Edit the source-code

a) On the Linux PC, open and modify any of the repo’s source-code or add new custom js files located in the nepi_rui project folder at:

nepi_rui/src/rui_webserver/rui-app/src

b) Save any changes. 

3) Rsync the source-code to the NEPI device

Once you are ready to test your code changes, the next step is to use the repo’s “rsync_workspace_to_target.sh” script that automates the process of copying the source code to the NEPI device’s nepi_src folder on the user storage drive, or just copying changes if the source code already exists on the NEPI device.

NOTE: The following sections assume you have set up a NEPI ssh key on your PC and successfully connected to your NEPI device with an SSH connected terminal as described in NEPI Engine – Accessing the NEPI File System tutorial available at:

https://nepi.com/nepi-tutorials/nepi-engine-accessing-the-nepi-file-system/

a) On the Linux PC with the NEPI ssh key installed, open a terminal window to “nepi_base_ws” top level folder and type the following to open your “.bashrc” file:

sudo nano ~/.bashrc

NOTE: NEPI root default password is “nepi”

then add a variable assignment for “NEPI_SSH_KEY” equal to the location of your NEPI ssh key:

export NEPI_SSH_KEY=”FULL_PATH_TO_YOUR_NEPI_PRIVATE_SSH_KEY

Example:

export NEPI_SSH_KEY=”/home/engineering/SSH_Keys/nepi_engine_default_private_ssh_key”

then save the file and exit.

b) While still in the “nepi_rui” top level folder run the included rsync script by typing:

./rsync_workspace_to_target.sh

NOTE: you may get an error about the key with some instructions on how to fix the issue the first time. Fix the error and try again.

The rsync script will copy all the file changes to your NEPI device’s rui file system folder located at;

/opt/nepi/nepi_rui/

4) Update NEPI’s Clock

Before compiling the code in the next step, you need to make sure that your NEPI device’s clock is up to date using one of the two methods provided below:

a) Open the NEPI RUI on your PC and click the “Sync  Clock” button on the dashboard. 

b) Start an ntp server on your PC which will resync the NEPI clock every time you connect to the system.  NEPI automatically looks for an ntp server running at 192.168.179.5.  Set you network adapter for this IP address and run the following from a command line on your PC:

sudo apt install ntp

sudo systemctl restart ntp

NOTE: You can check that your NEPI device’s clock is up to date by opening an SSH terminal to the NEPI device and typing:

date

5) Compile and Deploy the Changes

a) Open an SSH terminal to your NEPI device and enter the following commands to first create a virtual environment to work from by entering:

cd /opt/nepi/nepi_rui/

source devenv.sh
NOTE: This only needs to be done once for a given SSH connection. You can rebuild the RUI multiple times after setting up this virtual dev environment.

b) Rebuild the RUI front end by entering:

cd src/rui_webserver/rui-app

npm run build

If the compilation process has errors, fix the errors in the code on your PC, the repeat step 2 to sync the code to your NEPI device, and run the catkin build command again.  Continue until your software builds without errors.

5) Refresh the RUI Browser Page

In order to view your changes, open a web-browser on your PC to the NEPI device’s RUI page or refresh an already open page.

 

 

Table of Contents