Corporate Design

As AAS Web UI user I want to change the look of the AAS Web UI according to my company’s corporate design.

The AAS Web UI provides a feature to use your Logos and set the primary application colour.

Feature Overview

The corporate design can be applied through Docker, while your own logo can either be added as a file or using an URL (e.g. from your CDN).

When using Docker run, you can configure the following:

1. Adding your own logos:

   • by mounting a local folder containing the main logo (Logo.png/jpg/svg) and the favicon (browser tab icon) named favicon.ico. or

   • by using an URL for the LOGO_PATH environment variable.

2. Changing the primary color: This is configured by using the PRIMARY_COLOR environment variable. It expects a color value in hex format.

Note

Please note, that the logo and primary color for the light and dark theme can be configured separately (starting with eclipsebasyx/aas-gui:v2-241114) using PRIMARY_LIGHT_COLOR, PRIMARY_DARK_COLOR respectively LOGO_LIGHT_PATH and LOGO_DARK_PATH.

Usage with Docker

To start the UI with docker run and your own logo, you can use the following commands either providing the logo as a file via a volume or directly as an URL:

docker run -p 3000:3000 -v <local_path_to_logo>:/usr/src/app/dist/Logo -e LOGO_PATH=<your-logo.png> -e VITE_PRIMARY_COLOR=<primary_color> eclipsebasyx/aas-gui

or

docker run -p 3000:3000 -e LOGO_PATH=<your-logo-url-path> -e VITE_PRIMARY_COLOR=<primary_color> eclipsebasyx/aas-gui

The same feature can also be adapted for Docker compose:

aas-web-gui:
   image: eclipsebasyx/aas-gui
   container_name: aas-web-gui
   ports:
       - "3000:3000"
   environment:
       LOGO_PATH: "<your-logo.png>"
       PRIMARY_COLOR: "<primary_color>"
   volumes:
       - <local_path_to_logo>:/usr/src/app/dist/Logo

or

aas-web-gui:
   image: eclipsebasyx/aas-gui
   container_name: aas-web-gui
   ports:
       - "3000:3000"
   environment:
       LOGO_PATH: "<your-logo-url-path>"
       PRIMARY_COLOR: "<primary_color>"