Ctrl+K

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

http://htw-berlin.de/smc_statemachine

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

https://admin-shell.io/zvei/nameplate/1/0/Nameplate

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

http://hello.world.de/plugin_submodel

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

http://iese.fraunhofer.de/prop_jsonarray

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

docker-compose:

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