Skip to content

This repository contains code for an example of a custom web interface for the Torizon Web API of Toradex.

Notifications You must be signed in to change notification settings

erni-dan/custom-torizon-ui

Repository files navigation

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 :

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

Getting Started

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
    

Important

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

  1. Start the app

    node run.js
  2. 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

About

This repository contains code for an example of a custom web interface for the Torizon Web API of Toradex.

Topics

Resources

Stars

Watchers

Forks