Include an additional UI

This tutorial describes how to include an additional UI to be running on the LeoRover. We will show you all the needed steps to include a new interface and reconfigure the HTTP server.

The tutorial will be based on the sample UI dedicated to controlling the additional relay module. You can design your own UI on the basis of Create a custom UI tutorial.

Prepare the rover before the start

The following tutorial will be presenting the configuration of a new user interface in the Leo Rover system running on RPi (LeoOS). Before starting the following steps, you need to provide two things- Internet connection and ssh connection.

pageConnect via SSHpageConnect to a local network and the Internet

The Internet connection is necessary to download the repository from GH, as well as the ssh connection is needed to have access to LeoOS terminal remotely. All the operations presented below need to be applied in LeoOS remote terminal via ssh.

Clone the UI files

The first step is to download the directory containing user interface files. Clone the additional UI from our GitHub repository. We highly recommended placing the additional UI folder in the home directory.

cd ~
git clone https://github.com/LeoRover/leo_ui_sample_relay.git

Configure the nginx service

The next step is to create the configuration file for the HTTP service. The file contains the path to the UI folder and the port number on which the UI will be available.

‌Create a new configuration file based on the default Leo UI configuration file. You can use the cp command to clone the file inside the /etc/nginx/sites-available folder. The operation need to be done as a 'root' user.

cd /etc/nginx/sites-available
sudo cp leo_ui leo_ui_sample

The nginx service is searching for the configuration file in /etc/nginx/sites-enable. To make nginx load your configuration at start, you need to add a symbolic link in the sites-enabled folder, pointing to the configuration file in sites-available folder.

sudo ln -s /etc/nginx/sites-available/leo_ui_sample /etc/nginx/sites-enabled/

In case of creating the custom configuration, you must change settings in the cloned file in the /etc/nginx/sites-available. Use the nano text editor to make some changes. Don't forget to open the file as the root user.

sudo nano leo_ui_sample

There are two params to change, the port number and the path to the root website's directory. Make changes according to the code block below.

Chose a port not assigned to any other running service

listen 80 default_server;        ==>    listen 90 default_server;
listen [::]:80 default_server;   ==>    listen [::]:90 default_server;

root /opt/leo_ui;                ==>    root /home/pi/leo_ui_sample_relay;

Save the file - CTRL+o

Close the text editor-CTRL+x

At the end of the whole process, an nginx service restart is needed. It will make the new interface available.

sudo systemctl restart nginx