Adapt and simplify Visualization component loading

README.md

@@ -50,19 +50,19 @@ As of now, not all new SubmodelElements of the AAS V3 are supported. Additional
 See examples in the [basyx-java-server-sdk](https://github.com/eclipse-basyx/basyx-java-server-sdk/tree/main/examples
 ) Repository.
 
-### Plugin Development
+### Visualizations Development
 
-The BaSyx-UI includes a Feature to develop your own Plugins. They can be used to display and interact with a Submodel (and/or SubmodelElements).
+The BaSyx-UI includes a Feature to develop your own Visualizations. They can be used to display and interact with a Submodel (and/or SubmodelElements).
 
-Plugins will be displayed in the `Visualization`-Part of the UI. In order for Plugins to be shown, a Submodel(Element) has to have a SemanticID which matches with the configured SemanticID of the desired Plugin.
+Visualizations will be displayed in the `Visualization`-Part of the UI. In order for Visualizations to be loaded, a Submodel(Element) has to have a SemanticID which matches with the configured `semanticId` of the desired Visualizations. The configuration of a Visualizations `semanticId`can be done via a string (e.g. `'http://hello.world.de/plugin_submodel'`) or via an array for multiple SemanticIds (e.g. `['http://hello.world.de/plugin_submodel', 'http://hello.world.de/plugin_property']`)
 
-To include your own Plugin, you have to create a Vue.js Component and add it to the `UserPlugins`-Folder in the `aas-web-ui/src`-Directory. The Plugin will then be automatically loaded and displayed in the UI. 
+To include your own Visualizations, you have to create a Vue.js Component and add it to the `UserVisualizations`-Folder in the `aas-web-ui/src`-Directory. The Visualization will then be automatically loaded and displayed in the UI. 
 
 > If you plan on including your own plugins, keep in mind that you have to build the Docker Image yourself!
 
-A Demo-Plugin can be found here:
+A Demo-Visualizations can be found here:
 
-[HelloWorldPlugin.vue](./aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue)
+[HelloWorldVisualizations.vue](./aas-web-ui/src/UserVisualizations/HelloWorldVisualizations.vue)
 
 ### Prerequisites for developing on you own machine
 

aas-web-ui/.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+/src/UserVisualizations/*
 
 # local env files
 .env.local
@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+!/src/UserVisualizations/HelloWorldVisualization.vue

aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue → aas-web-ui/src/UserVisualizations/HelloWorldVisualization.vue

@@ -25,7 +25,7 @@
     import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
-        name: 'HelloWorldPlugin',
+        name: 'HelloWorldVisualization',
         // semanticId: 'http://hello.world.de/plugin_submodel', // semanticId of the HelloWorld-Plugin as string
         semanticId: ['http://hello.world.de/plugin_submodel', 'http://hello.world.de/plugin_property'], // semanticId of the HelloWorld-Plugin as array to use multiple semanticIds
         components: {

aas-web-ui/src/components/ComponentVisualization.vue

@@ -23,12 +23,45 @@
             </v-card-title>
             <v-divider></v-divider>
             <v-card-text
-                v-if="submodelElementData && Object.keys(submodelElementData).length > 0"
+                v-if="
+                    SelectedNode &&
+                    Object.keys(SelectedNode).length > 0 &&
+                    Object.keys(submodelElementData).length > 0 &&
+                    submodelElementData.semanticId &&
+                    submodelElementData.semanticId.keys &&
+                    submodelElementData.semanticId.keys.length > 0
+                "
                 style="overflow-y: auto; height: calc(100svh - 170px)">
-                <!-- Add Plugins matched on SemanticId's inside the SubmodelEntrypoint -->
-                <SubmodelEntrypoint
-                    :submodel-element-data="submodelElementData"
-                    :selected-node="SelectedNodeToTransfer"></SubmodelEntrypoint>
+                <template v-if="submodelElementData.modelType == 'File' || submodelElementData.modelType == 'Blob'">
+                    <ImagePreview
+                        v-if="submodelElementData.contentType && submodelElementData.contentType.includes('image')"
+                        :submodel-element-data="submodelElementData"></ImagePreview>
+                    <PDFPreview
+                        v-if="submodelElementData.contentType && submodelElementData.contentType.includes('pdf')"
+                        :submodel-element-data="submodelElementData"></PDFPreview>
+                    <CADPreview
+                        v-if="
+                            submodelElementData.contentType &&
+                            (submodelElementData.contentType.includes('sla') ||
+                                submodelElementData.contentType.includes('stl') ||
+                                submodelElementData.contentType.includes('model') ||
+                                submodelElementData.contentType.includes('obj') ||
+                                submodelElementData.contentType.includes('gltf'))
+                        "
+                        :submodel-element-data="submodelElementData"></CADPreview>
+                </template>
+                <template v-else>
+                    <component
+                        :is="visualization.name"
+                        v-for="(visualization, index) in filteredVisualizations"
+                        :key="index"
+                        :submodel-element-data="submodelElementData"
+                        >{{ visualization.name }}</component
+                    >
+                    <GenericDataVisu
+                        v-if="viewerMode && filteredVisualizations.length === 0"
+                        :submodel-element-data="submodelElementData.submodelElements"></GenericDataVisu>
+                </template>
             </v-card-text>
         </v-card>
     </v-container>
@@ -37,7 +70,10 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
-    import SubmodelEntrypoint from '@/components/SubmodelPlugins/_SubmodelEntrypoint.vue';
+    import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
+    import CADPreview from '@/components/Visualizations/CADPreview.vue';
+    import ImagePreview from '@/components/Visualizations/ImagePreview.vue';
+    import PDFPreview from '@/components/Visualizations/PDFPreview.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
     import { useAASStore } from '@/store/AASDataStore';
@@ -46,7 +82,10 @@
     export default defineComponent({
         name: 'ComponentVisualization',
         components: {
-            SubmodelEntrypoint, // Submodel Plugin Entrypoint Component
+            GenericDataVisu,
+            ImagePreview,
+            PDFPreview,
+            CADPreview,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
 
@@ -113,6 +152,33 @@
             isMobile() {
                 return this.navigationStore.getIsMobile;
             },
+
+            importedVisualizations() {
+                return this.navigationStore.getVisualizations;
+            },
+
+            // Filtered Plugins
+            filteredVisualizations() {
+                return this.importedVisualizations.filter((plugin: any) => {
+                    if (!plugin.semanticId) return false;
+
+                    if (typeof plugin.semanticId === 'string') {
+                        return this.checkSemanticId(this.submodelElementData, plugin.semanticId);
+                    } else if (plugin.semanticId.constructor === Array) {
+                        for (const pluginSemanticId of plugin.semanticId) {
+                            if (this.checkSemanticId(this.submodelElementData, pluginSemanticId)) return true;
+                        }
+                        return false;
+                    }
+                    return false;
+                });
+            },
+
+            // return if in viewer mode
+            viewerMode() {
+                // check if the route name is aasviewer
+                return this.route.name === 'AASViewer' || this.route.name === 'ComponentVisualization';
+            },
         },
 
         watch: {