Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: for the plan.

Jump to: navigation, search

BaSyx / Documentation / Components / AAS Web UI / Features / Plugin Mechanism

Plugin Mechanism

As AAS Web UI user

I want to visualize and interact with Submodels and SubmodelElements in custom ways

The AAS Web UI provides a feature to integrate your own plugins to visualize and interact with Submodels and SubmodelElements.

Feature Overview

Plugins can be integrated in the "Visualization" view of the UI. The Plugin-Feature checks if the selected Submodel/SubmodelElement includes a SemanticId and displays a plugin automatically if one is available for the given SemanticId.

Currently, there are four plugins available:

List of available plugins
Name SemanticId Description
HTWFuehrungskomponente This plugin visualizes Submodels and SubmodelElementCollections which include properties to interact with PackML state machines. It allows to trigger state transitions as well as changing the operating mode.
DigitalNameplate This Plugin is intented to visualize Digital Nameplate Submodels. It displays the SubmodelElements in an expandable panel view. Structure of the Digital Nameplate: Digital Nameplate PDF
HelloWorldPlugin This plugin is a simple example plugin which displays a Submodel in a generic way and allows to edit the SubmodelElements. It is intended to be used as a template for developing your own plugins.
JSONArrayProperty This plugin can be used to visualize data series from Property values in a chart. It is possible to visualize single or multiple series. Example Values: [11, 32, 45, 32, 34, 52, 41] or { "series1": [31, 40, 28, 51, 42, 109, 100], "Series2": [11, 32, 45, 32, 34, 52, 41] }

Developing your own Plugins

New Plugins have to be written in vue.js 3 (in TypeScript) and are implemented as own .vue File/Component.

Plugins are automatically integrated into the application when they are saved in the "UserPlugins"-Folder at Frontend/aas-web-gui/src/UserPlugins/

A good starting point is the HelloWorld-Plugin which is already present in the mentioned folder.

Using external Plugins

It is also possible to use plugins which are not part of the application itself.

To use external plugins, you have to mount a local plugins folder containing .vue plugin-files.

This can either be done in the docker run command or in the docker-compose file:

docker run:

docker run -p 3000:3000 -v <local_path_to_plugins>:/app/src/UserPlugins eclipsebasyx/aas-gui


     image: eclipsebasyx/aas-gui
     container_name: aas-web-gui
         - "3000:3000"
         - <local_path_to_plugins>:/app/src/UserPlugins

Back to the top