Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

BaSyx / Documentation / Components / AAS Web UI

< BaSyx ‎ | Documentation ‎ | Components
Revision as of 05:00, 4 July 2023 by Frank.schnicke.iese.fraunhofer.de (Talk | contribs) (Updates version number)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Component | Features

AAS Web UI

AAS Web UI

The AAS Web UI is a vue.js 3 based web application and can be used to visualize and interact with Asset Administration Shells. It is intended to work in conjunction with the BaSyx Registry and the BaSyx AAS Server.

Download

The AAS Web UI image is made available via Docker Hub and can be pulled by:

docker pull eclipsebasyx/aas-gui:v230703

Quick Start

The AAS Web UI can be started by running the following command:

docker run -p 3000:3000 --name=aasGui eclipsebasyx/aas-gui:v230703

When the container is started up, you should be able to connect to the GUI via

http://localhost:3000

Now open the main menu and enter the URL of the registry you want to connect to. The URL should be in the form of

http://<registry-host>:<registry-port>(/registry)

Reminder: Make sure that the AAS Server and Registry are running. Additionally, ensure that CORS is configured correctly for the Docker components.

Once you hit connect you should see the Asset Administration Shells that are registered in the registry.

Connect to Registry

Interacting with Asset Administration Shells

AAS List

The AAS List shows all Asset Administration Shells that are registered. The list can be filtered by entering a search term in the search bar. There is also an option to show an information window for each Asset Administration Shell by clicking on the info icon. In addition, the AAS can be removed from the registry by clicking on the delete/close icon.

AAS List

AAS Treeview

The AAS Treeview shows the Asset Administration Shell in a tree structure. The tree can be expanded by clicking on the expand icon on the left side of each Submodel/SubmodelElementCollection. Clicking directly on a Submodel/SubmodelElement will show the Submodel/SubmodelElement in the Element Details Page further to the right.

AAS Treeview

Element Details

The Element Details page shows the details of the selected Submodel/SubmodelElement.

The following list shows all SubmodelElements that are currently supported by the AAS Web UI:

  • SubmodelElementCollection
  • Property
  • MultiLanguageProperty
  • File
  • Operation

Reminder: The available SubmodelElements are on par with the AAS Metamodel Version 1

Element Details

Visualization

The Visualization page shows the Submodel/SubmodelElement in a graphical representation. There are different criteria which enable a specific visualization for a Submodel/SubmodelElement.

  1. The AAS Web UI checks for the presence of a SemanticId in the Submodel/SubmodelElement. If a SemanticId is present, the AAS Web UI will try to find a visualization for the SemanticId in the List of Submodel/SubmodelElement Plugins.
  2. The File-SubmodelElement has a special visualization. If the File-SubmodelElement contains an Image or a PDF, the AAS Web UI will show the Image/PDF in the Visualization page.
Visualization

Introductory Examples

To get a first impression of the look and feel of the BaSyx infrastructure, within the examples a docker compose file is provided. It lets you build a basic BaSys infrastructure, consisting of a registry server, an AAS server and an AAS Web UI. The example can be found here: Introductory Examples

How to Contribute

The AAS Web UI is an open source project and contributions are welcome. The source code can be found here: AAS Web UI on GitHub

Development on Windows

A prerequisite for working on Windows is WSL 2 An installation guide can be found here: WSL 2 Installation Guide

  1. Open a WSL Window in your IDE (e.g. Visual Studio Code)
  2. Navigate to the directory where you want to clone the repository
  3. Open a terminal in the directory
  4. Clone the repository by running the following command:
    git clone https://github.com/eclipse-basyx/basyx-applications.git
  5. Make sure Node, NPM and Yarn are installed
  6. Navigate to the aas-gui directory
    cd basyx-applications/aas-gui
  7. Start the development server
    . bootstrap.sh
    • On initial installation answer first question with y (Yes) otherwise n (No) -> This will install all dependencies
    • Answer second question with n (No) if you just want to start a development server.
    • Answer second question with y (Yes) if you want to build the application for deployment.

Development on Linux

  1. Open a terminal in the directory where you want to clone the repository
  2. Clone the repository by running the following command:
    git clone https://github.com/eclipse-basyx/basyx-applications.git
  3. Make sure Node, NPM and Yarn are installed
  4. Navigate to the aas-gui directory
    cd basyx-applications/aas-gui
  5. Start the development server
    . bootstrap.sh
    • On initial installation answer first question with y (Yes) otherwise n (No) -> This will install all dependencies
    • Answer second question with n (No) if you just want to start a development server.
    • Answer second question with y (Yes) if you want to build the application for deployment.

Development on MacOS

  1. Open a terminal in the directory where you want to clone the repository
  2. Clone the repository by running the following command:
    git clone https://github.com/eclipse-basyx/basyx-applications.git
  3. Make sure Node, NPM and Yarn are installed
  4. Navigate to the aas-gui directory
    cd basyx-applications/aas-gui
  5. Start the development server
    . bootstrap.sh
    • On initial installation answer first question with y (Yes) otherwise n (No) -> This will install all dependencies
    • Answer second question with n (No) if you just want to start a development server.
    • Answer second question with y (Yes) if you want to build the application for deployment.

Development via Docker

Make sure Docker is installed and running before you start with the next steps!

  1. Open a terminal in the directory where you want to clone the repository
  2. Clone the repository by running the following command:
    git clone https://github.com/eclipse-basyx/basyx-applications.git
  3. Build the Docker image by running the following command:
    docker build basyx-applications/aas-gui/Frontend/aas-web-gui -t eclipsebasyx/aas-gui
  4. Start the Docker container by running the following command:
    docker run -p 3000:3000 eclipsebasyx/aas-gui
    1. Optionally, it is possible to preconfigure the path to the Registry and AAS Server aswell as the applications primary color by adding environment variables
      -e VITE_REGISTRY_PATH=<registry_path> -e VITE_AAS_SERVER_PATH=<aas_server_path> -e VITE_PRIMARY_COLOR=<primary_color>
    2. Another option is to mount a local folder for the Application Logo and a folder for the Submodel/SubmodelElement-Plugins
      -v <local_path_to_logo>:/app/src/assets/Logo -v <local_path_to_plugins>:/app/src/UserPlugins
      Hint1: If you decide to mount a logo folder to display your own logo, please note that a high resolution image (.png/.jpg/.svg) and a .ico file should be placed in that folder
      Hint2: If you decide to mount a local plugins folder, please use -e CHOCKIDAR_USEPOLLING=true as environment variable aswell

A complete docker run command could look like this:

docker run -p 3000:3000 -v <local_path_to_logo>:/app/src/assets/Logo -v <local_path_to_plugins>:/app/src/UserPlugins -e VITE_REGISTRY_PATH=<registry_path> -e VITE_AAS_SERVER_PATH=<aas_server_path> -e VITE_PRIMARY_COLOR=<primary_color> -e CHOCKIDAR_USEPOLLING=true eclipsebasyx/aas-gui

if you are using docker-compose, this could be the part for the AAS-Web-UI:

aas-web-gui:
    image: eclipsebasyx/aas-gui
    container_name: aas-web-gui
    ports:
        - "3000:3000"
    environment:
        CHOKIDAR_USEPOLLING: "true"
        VITE_REGISTRY_PATH: "<registry_path>"
        VITE_AAS_SERVER_PATH: "<aas_server_path>"
        VITE_PRIMARY_COLOR: "<primary_color>"
    volumes:
        - <local_path_to_logo>:/app/src/assets/Logo
        - <local_path_to_plugins>:/app/src/UserPlugins

General Information

To be able to access the BaSyx data from the GUI, you need to add a wildcard to Cross-origin resource sharing on the Registry- and AAS-Server. This can be done either in code by contextConfig.setAccessControlAllowOrigin("*") on the ContextConfiguration of the Registry- and AAS-Server, or in the context.properties files by adding the line accessControlAllowOrigin=*.

⚠️ If you plan on developing with npm as your package manager be advised that you either need to force the installation process npm i -f or install the release candidate version of the vue-class-component package (npm install vue-class-component@8.0.0-rc.1). - You will not encounter this issue when using Yarn as your package manager. ⚠️

Back to the top