Toradex Custom Web UI

This repository contains code for an example of a custom web user interface (UI) for the Torizon Web API of Toradex. The torizon-openapi.yaml specification can be downloaded from here. This example application aims to show the key features of the torizon api.

Like:

• Show all registered devices of your torizon repository
• Show device data
• Show device metrics
• Show all available packages for a device (OS, Bootloader, Application)
• Show how to perform an application update

Important

If you want to test the application update, make sure that your torizon repository provides the needed docker-compose files for the update.
How to upload docker compose to torizon repository
Toradex provides a docker-compose.yml file, which can be used for testing purpose.
And to switch the applications you can use this

Prerequisites

This project depends on :

• nodejs

Although any enviroment can be used, it is recommended to use the develpment setup

• vscode
• Ubuntu 20.x, or
• Windows (using WSL2 (Ubuntu 20.x))
  (For a detailed description see: WSL )

Tip

If you are facing internet connection issues under WSL add "nameserver 8.8.8.8" to your /etc/resolv.conf or set "networkingMode=mirrored" to your wslconfig

Torizon prerequisites

• minimum one device provisioned for torizon.io
  • How-To provision a device
• valid Torizon API token, which can be generated from a valid Torizon API Client
  • How-To create an API client
  • How-To get an API token

Getting Started

To get started with the Toradex Custom Web UI, follow these steps:

1. Clone the repository:

   git clone git@github.com:ERNI-Academy/custom-torizon-ui.git

2. Install node and npm

    sudo apt install nodejs
    node -v  // has to be minimum > 14.x.   
    sudo apt install npm 
    npm -v  // has to be minimum 8.5.1

3. Install the dependencies via npm

   npm install & npm update

   This should install the following packages expressjs, nunjucks, axios, dotenv.

4. Create a .env file in the root directory of your project and add your torizon api token to it, using the following syntax:

   TORIZON_API_TOKEN=your_token
   

Important

If your facing a 401 HTTP error. Ensure to have a valid API Bearer token. See How-To get an API token

5. Start the app

   node run.js

6. Open your browser with http://localhost:3000/

Directory layout

   .
   ├── __test__           # the tests
   ├── public             # all static resources for the web pages (e.g images, libs, ...) 
   ├── routes             # backend implementation, handle the requests and respond with html pages
   ├── utility            # helper modules
   ├── views              # html templates (the UI without data)
   ├── app.js             # defines the expressjs application, but does not start it
   ├── package.json       # root of every Nodejs project, info about app, modules and packages, defines all npm scripts
   |── README.md          
   ├── run.js             # starts the application 
   ├── torizon_api.js     # encapsuling a request client for the Torizon API

Customization

You can add your own device images to the "public/img" folder and set the reference to your images via the "addDeviceImage()" function, which can be found in every HTML file.

<script>
   function addDeviceImage() {
         var deviceImage = document.getElementById("device_preview");
         var deviceImageSrc = "/public/img/robot_icon.png";  // TODO: replace with your device image
         ...
   }
</script>

Development

1. For the tests, you will need a node version > 14.x. Or you will see

   run.js:135 unexpected token if (error?.stack)"
   

   Install nvm, to update the nodejs version :

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
    //restart vscode 
    nvm install --lts //to download the latest long time supported nodejs version 
    nvm install node //to install the latest lts nodejs version 

2. For development run

    npm run development //to start with nodemon, to see real time changes 

3. For tests run

    npm test

4. For code coverage run

    npm run coverage

Contributing

Please see our Contribution Guide to learn how to contribute.

License

Copyright © 2024 ERNI - Swiss Software Engineering

Code of conduct

Please see our Code of Conduct

Stats

Follow us

Contact

📧 esp-services@betterask.erni