ICOweb Application

A frontend/client developed in conjunction with the corresponding ICOapi backend. It is designed to be run in any form of modern browser.

Design / Wireframes: Miro Board

Languages: Vue, TypeScript

Design Framework: PrimeVue, TailwindCSS

Bundler: Vite

Installation

This repository can be setup manually for Windows and Linux or using the installation script for Linux.

Prerequisites

• Node.js / NPM, from the official NodeJS Website

Manual Installation (Development)

As with any other NPM project, after cloning the repository and ensuring a valid Node installation, run:

npm install

Service Installation (Linux)

For Linux, there is an installation script which sets the directory for the actual installation, the directory for the systemd service and the used systemd service name as well as the Node version. The (sensible) defaults are:

SERVICE_NAME="icoweb"
INSTALL_DIR="/etc/icoweb"
SERVICE_PATH="/etc/systemd/system"
NODE_VERSION="18.19.0"
FORCE_REINSTALL=false

After checking, run the script to install normally:

./install

Or, if you want to delete existing installations and do a clean reinstall, add the --force flag:

./install --force

Configuration / Environment Variables

This application has two main forms of configuration: environment variables and auto-generated metadata types.

Environment Variables

The application expects a .env file in the root directory. It handles the main configuration of the backend application.

All variables containing API_ indicate that there is a counterpart in the API side environment variables. This is to show that changes here most likely need to be propagated to the backend.

Client/API Connection Settings

These settings determine all forms of client/API communication details.

The main REST API is versioned and does NOT use SSL at the moment.

VITE_API_PROTOCOL=http
VITE_API_HOSTNAME="0.0.0.0"
VITE_API_PORT=33215
VITE_API_VERSION=v1

The WebSocket is for streaming data. It only requires a VITE_API_WS_PROTOCOL variable akin to VITE_API_PROTOCOL which decided between SSL or not.

VITE_API_WS_PROTOCOL=ws

Enable/Disable Settings

To make the application configurable, pages and features can be enabled and disabled separately. By default, all pages are shown and no features are enabled - the .env file can override that.

VITE_APPLICATION_DISABLE_PAGES="Config,Analyze"
VITE_APPLICATION_ENABLE_FEATURES="ADC"

VITE_APPLICATION_DISABLE_PAGES takes the names of the pages to be disabled, which hides them from the menu. VITE_APPLICATION_ENABLE_FEATURES takes predefined tags to enable.

• ADC enables changing the ADC settings

VITE_APPLICATION_PORT=8081

VITE_APPLICATION_PORT defines on what port the client is served at.

VITE_APPLICATION_THEME="blue"
VITE_APPLICATION_THEME_EXTRALOGO="false"

VITE_APPLICATION_THEME sets the theme of the application at build-time.

VITE_APPLICATION_THEME_EXTRALOGO controls whether a second log is present

Type Generation

This repository is based on typescript and relies heavily on the openapi-ts package to generate type declarations in src/client from the backend directly. To update the type declarations, ensure the API is running and run:

npm run generate-client

Branding

The possibility to customize the client to your brand is currently implemented via theme folder. It holds:

• logo.png as the main logo in the bottom left corner (default: IFT TU Wien logo)
• extra.png being the secondary logo on top of the main logo (default: transparent)
• theme.css holding the Material Design CSS variables
• theme.ts configuring PrimeVue for specific colors

Theming

To customize the branding, you can replace these files on build-time and set the proper environment variables:

VITE_APPLICATION_THEME="<your-theme-name>" and VITE_APPLICATION_THEME_EXTRALOGO="true"

<your-theme-name> must be the CSS class name you set in theme.css and the object key for the PrimeVue colors in theme.ts.

Run

To run the client locally, use:

npm run start

Note: The browser must have CORS disabled. When using Chrome, run with the flags

--disable-web-security --user-data-dir="<Some Writable Folder>" to achieve this.

Feature Requests

This is the list of requested features, in no particular order.

This should be converted into issues.

Concerning "Analyze" Tab

• Graph: Better crosshair for point inspection
• Dataloss: Display dataloss in analyze tab
  • Make "intelligent fill" (fills lost values with past values) create a new file

Notes on crosshair and window selection: Both are enabled by the plugin chartjs-plugin-crosshair and would be perfectly suitable. However, when using the plugin, upon zooming the datasets disappear. This seems to be connected to the type: linear property in the chart options, as without this, it works - but with an unformated scale.

Concerning "Config" Tab

• Tool Holder: Split into default and custom holder templates
  • Make default holders with picture
  • Sketches: Create and show informational sketches

Concerning Sensor Data

• Raw data option: create the option to look at the raw data without any conversion

Concerning General Features

• Hardware: Firmware update of STH / STU via GUI
• MQTT: Provide interface so a certain MQTT topic can be subscribed to and added to the measurement stream data
• Show battery charge on STH list refresh
• KPIs: Add support for more KPIs in Analyze and Measure

Concerning "Measure" Tab

• Threshold: Add ability to set threshold and get 0/1 if passed