Skip to main content

Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "BaSyx / Documentation / Components / AAS Web UI"

(Created page with "= AAS Web UI =")
 
Line 1: Line 1:
 +
 +
{| class="wikitable"
 +
| [[BaSyx_/_Documentation_/_AssetAdministrationShell | Overview]]  <nowiki>|</nowiki>  [[BaSyx_/_Documentation_/_API_/_AssetAdministrationShell| Interface]]  <nowiki>|</nowiki>  [[BaSyx_/_Documentation_/_Implementation_/_AssetAdministrationShell | Implementation]]  <nowiki>|</nowiki>  [[BaSyx_/_Documentation_/_Components_/_AAS_Web_UI | Component]] <nowiki>|</nowiki> [[BaSyx_/_Documentation_/_Components_/_AAS_Web_UI_/_Features | Features]]
 +
|}
 +
 
= AAS Web UI =
 
= 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
 +
 +
== Quick Start ==
 +
 +
The AAS Web UI can be started by running the following command:
 +
 +
docker run -p 3000:3000 --name=aasGui eclipsebasyx/aas-gui
 +
 +
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.</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>
 +
# Open container in your IDE (e.g. Visual Studio Code) -> Docker extension is required
 +
 +
== 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. ⚠️

Revision as of 02:26, 16 March 2023

Overview | Interface | Implementation | 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

Quick Start

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

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

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.

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
  5. Open container in your IDE (e.g. Visual Studio Code) -> Docker extension is required

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. ⚠️

Retrieved from "https://wiki.eclipse.org/index.php?title=BaSyx_/_Documentation_/_Components_/_AAS_Web_UI&oldid=447068"

Back to the top