Skip to content

Latest commit

 

History

History
156 lines (113 loc) · 5.8 KB

README.md

File metadata and controls

156 lines (113 loc) · 5.8 KB
Raw

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