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

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 )

• 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

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

1. Clone the repository:

   git clone https://github.com/erni-dan/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
   

5. Start the app

   node run.js

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

   .
   ├── __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

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>

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