View source for BaSyx / Documentation / Components / AAS Web UI


{| class="wikitable"
|  [[BaSyx_/_Documentation_/_Components_/_AAS_Web_UI | Component]] <nowiki>|</nowiki> [[BaSyx_/_Documentation_/_Components_/_AAS_Web_UI_/_Features | Features]]
|}

= AAS Web UI =

<!-- Demo Image of the UI -->
[[file:AAS_Web_UI.png|center|1200px|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_/_Documentation_/_Components_/_Registry | BaSyx Registry]] and the [[BaSyx_/_Documentation_/_Components_/_AAS_Server | BaSyx AAS Server]].

== Download ==

The AAS Web UI image is made available via [https://hub.docker.com/r/eclipsebasyx/aas-gui 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''': <code>Make sure that the AAS Server and Registry are running. Additionally, ensure that [[BaSyx_/_Documentation_/_Components#CORS_Configuration | CORS]] is configured correctly for the Docker components.</code>

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

<!-- Image for Registry Connection -->
[[file:Connect_Registry.png|center|800px|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'''.

<!-- Image for AAS List -->
[[file:AAS_List.png|center|300px|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.

<!-- Image for AAS Treeview -->
[[file:AAS_Treeview.png|center|340px|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''': <code>The available SubmodelElements are on par with the AAS Metamodel Version 1</code>

<!-- Image for Element Details -->
[[file:Element_Details.png|center|380px|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.

# 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 [[BaSyx_/_Documentation_/_Components_/_AAS_Web_UI_/_Features/_Submodel_Plugins | List of Submodel/SubmodelElement Plugins]].
# 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.

<!-- Image for Visualization -->
[[file:Visualization.png|center|560px|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: [[BaSyx_/_Introductory_Examples | 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: [https://github.com/eclipse-basyx/basyx-applications/tree/main/aas-gui AAS Web UI on GitHub]

=== Development on Windows ===

<code>A prerequisite for working on Windows is WSL 2</code> An installation guide can be found here: [https://learn.microsoft.com/en-us/windows/wsl/install WSL 2 Installation Guide]

# Open a WSL Window in your IDE (e.g. Visual Studio Code)
# Navigate to the directory where you want to clone the repository
# Open a terminal in the directory
# Clone the repository by running the following command:
#: <code>git clone https://github.com/eclipse-basyx/basyx-applications.git</code>
# Make sure Node, NPM and Yarn are installed
# Navigate to the aas-gui directory
#: <code>cd basyx-applications/aas-gui</code>
# Start the development server
#: <code>. bootstrap.sh</code>
#* 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 ===

# Open a terminal in the directory where you want to clone the repository
# Clone the repository by running the following command:
#: <code>git clone https://github.com/eclipse-basyx/basyx-applications.git</code>
# Make sure Node, NPM and Yarn are installed
# Navigate to the aas-gui directory
#: <code>cd basyx-applications/aas-gui</code>
# Start the development server
#: <code>. bootstrap.sh</code>
#* 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 ===

# Open a terminal in the directory where you want to clone the repository
# Clone the repository by running the following command:
#: <code>git clone https://github.com/eclipse-basyx/basyx-applications.git</code>
# Make sure Node, NPM and Yarn are installed
# Navigate to the aas-gui directory
#: <code>cd basyx-applications/aas-gui</code>
# Start the development server
#: <code>. bootstrap.sh</code>
#* 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 ===

<code>Make sure Docker is installed and running before you start with the next steps!</code>

# Open a terminal in the directory where you want to clone the repository
# Clone the repository by running the following command:
#: <code>git clone https://github.com/eclipse-basyx/basyx-applications.git</code>
# Build the Docker image by running the following command:
#: <code>docker build basyx-applications/aas-gui/Frontend/aas-web-gui -t eclipsebasyx/aas-gui</code>
# Start the Docker container by running the following command:
#: <code>docker run -p 3000:3000 eclipsebasyx/aas-gui</code>
## Optionally, it is possible to preconfigure the path to the Registry and AAS Server aswell as the applications primary color by adding environment variables
##: <code>-e VITE_REGISTRY_PATH=<registry_path> -e VITE_AAS_SERVER_PATH=<aas_server_path> -e VITE_PRIMARY_COLOR=<primary_color></code>
## Another option is to mount a local folder for the Application Logo and a folder for the Submodel/SubmodelElement-Plugins
##: <code>-v <local_path_to_logo>:/app/src/assets/Logo -v <local_path_to_plugins>:/app/src/UserPlugins</code>
##: '''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 <code>-e CHOCKIDAR_USEPOLLING=true</code> as environment variable aswell

A complete ''docker run'' command could look like this:

<code>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</code>

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 <code>contextConfig.setAccessControlAllowOrigin("*")</code> on the ContextConfiguration of the Registry- and AAS-Server, or in the <code>context.properties</code> files by adding the line <code>accessControlAllowOrigin=*</code>.

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