{"id":15067436,"url":"https://github.com/eclipse-basyx/basyx-aas-web-ui","last_synced_at":"2025-04-10T17:36:28.602Z","repository":{"id":257003086,"uuid":"849721311","full_name":"eclipse-basyx/basyx-aas-web-ui","owner":"eclipse-basyx","description":"Web-based user interface for managing and interacting with Asset Administration Shells (AAS)","archived":false,"fork":false,"pushed_at":"2025-04-07T06:12:08.000Z","size":5345,"stargazers_count":18,"open_issues_count":25,"forks_count":13,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-07T06:31:15.920Z","etag":null,"topics":["aas","assetadministrationshell","basyx","vue","web-ui"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eclipse-basyx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":"Docs/Roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-30T05:51:22.000Z","updated_at":"2025-04-07T06:12:04.000Z","dependencies_parsed_at":"2024-12-17T15:35:44.624Z","dependency_job_id":"4b30021d-3bb3-4b36-9bea-7b7e98b2f009","html_url":"https://github.com/eclipse-basyx/basyx-aas-web-ui","commit_stats":null,"previous_names":["eclipse-basyx/basyx-aas-web-ui"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-basyx%2Fbasyx-aas-web-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-basyx%2Fbasyx-aas-web-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-basyx%2Fbasyx-aas-web-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-basyx%2Fbasyx-aas-web-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eclipse-basyx","download_url":"https://codeload.github.com/eclipse-basyx/basyx-aas-web-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262040,"owners_count":21074233,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aas","assetadministrationshell","basyx","vue","web-ui"],"created_at":"2024-09-25T01:21:14.048Z","updated_at":"2025-04-10T17:36:28.594Z","avatar_url":"https://github.com/eclipse-basyx.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Docker Pulls](https://img.shields.io/docker/pulls/eclipsebasyx/aas-gui)\r\n![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/eclipsebasyx/aas-gui)\r\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/eclipse-basyx/basyx-aas-web-ui)\r\n![GitHub](https://img.shields.io/github/license/eclipse-basyx/basyx-aas-web-ui)\r\n![GitHub top language](https://img.shields.io/github/languages/top/eclipse-basyx/basyx-aas-web-ui)\r\n\r\n# BaSyx AAS Web UI\r\n\r\nThe AAS Web UI is a Vue.js web application to visualize and manage Asset Administration Shells, Submodels and Concept Descriptions.\r\n\r\n![alt text](Docs/Figs/AAS_Web_UI.png \"AAS GUI\")\r\n\r\n## Documentation\r\n\r\nThe documentation of the BaSyx AAS Web UI can be found in the [BaSyx Wiki](https://wiki.basyx.org/en/latest/content/user_documentation/basyx_components/web_ui/index.html).\r\n\r\n## AAS Web UI Compatibility and Features\r\n\r\n\u003e [!WARNING]\r\n\u003e The AAS Web UI is now **only compatible with the components of BaSyx V2 and the Asset Administration Shell V3**. \r\n\u003e\r\n\u003e If you still wish to use BaSyx V1, please use the following release of the UI:\r\n\u003e ```bash\r\n\u003e docker pull eclipsebasyx/aas-gui:v230703\r\n\u003e ```\r\n\r\n### Supported SubmodelElements\r\n\r\nAs of now, not all new SubmodelElements of the AAS V3 are supported. Additional elements will be added in future updates. The currently supported SubmodelElements are:\r\n\r\n- SubmodelElementCollection\r\n- SubmodelElementList\r\n- Property\r\n- MultiLanguageProperty\r\n- File\r\n- Blob\r\n- Operation\r\n- ReferenceElement\r\n- Range\r\n- Entity\r\n- RelationshipElement\r\n- AnnotatedRelationshipElement\r\n\r\n## Getting Started\r\n\r\n### Quick Start:\r\n\r\nSee examples in the [basyx-java-server-sdk](https://github.com/eclipse-basyx/basyx-java-server-sdk/tree/main/examples\r\n) Repository.\r\n\r\n### Plugin Development\r\n\r\nThe BaSyx-UI includes a Feature to develop your own Plugins. They can be used to display and interact with a Submodel (and/or SubmodelElements).\r\n\r\nPlugins will be displayed in the `Visualization`-Part of the UI. In order for Plugins to be loaded, a Submodel(Element) has to have a SemanticID which matches with the configured `semanticId` of the desired Plugin. The configuration of a Plugin `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']`)\r\n\r\nTo include your own Plugins, 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. \r\n\r\n\u003e If you plan on including your own plugins, keep in mind that you have to build the Docker Image yourself!\r\n\r\nA Demo-Plugin can be found here:\r\n\r\n[HelloWorldPlugin.vue](./aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue)\r\n\r\n### Prerequisites for developing on your own machine\r\n\r\nAfter you cloned the project to your local machine, it is recommended to install `ESLint` globally:\r\n\r\n```\r\nnpm install --global eslint\r\n```\r\n\r\nand the `ESLint` and `Prettier ESLint` extensions in VS Code.\r\n\r\nBefore starting a dev server, run the\r\n\r\n```\r\nyarn\r\n```\r\n\r\ncommand inside the `aas-web-ui` directory. For more details about your specific OS, follow the instructions in the next subsections.\r\n\r\n### How to develop on MacOS:\r\n\r\n1. Install Node and NPM ([Node installation Tutorial for Mac](https://treehouse.github.io/installation-guides/mac/node-mac.html))\r\n2. Install yarn\r\n    ```bash\r\n    npm install --global yarn\r\n    ```\r\n3. Clone Repository:\r\n    ```bash\r\n    git clone https://github.com/eclipse-basyx/basyx-aas-web-ui.git\r\n    ```\r\n4. Bootstrap the application:\r\n    ```bash\r\n    . bootstrap.sh\r\n    ```\r\n5. On initial installation answer first question with **y** (Yes) otherwise **n** (No)\r\n6. Answer the second question with **n** (No)\r\n\r\n### How to develop on Linux:\r\n\r\n1. Install Node and NPM ([Node installation Tutorial for Linux](https://nodejs.org/en/download/package-manager/))\r\n2. Install yarn\r\n    ```bash\r\n    npm install --global yarn\r\n    ```\r\n3. Clone Repository:\r\n    ```bash\r\n    git clone https://github.com/eclipse-basyx/basyx-aas-web-ui.git\r\n    ```\r\n4. Bootstrap the application:\r\n    ```bash\r\n    . bootstrap.sh\r\n    ```\r\n5. On initial installation answer first question with **y** (Yes) otherwise **n** (No)\r\n6. Answer the second question with **n** (No)\r\n\r\n### How to develop on Windows:\r\n\r\n1. Install WSL 2 ([WSL installation Tutorial](https://docs.microsoft.com/en-us/windows/wsl/install))\r\n2. Open IDE (e.g. VSCode: [WSL in VSCode](https://code.visualstudio.com/docs/remote/wsl))\r\n3. Install Node and NPM ([Node installation Tutorial for Linux](https://nodejs.org/en/download/package-manager/))\r\n4. Install yarn\r\n    ```bash\r\n    npm install --global yarn\r\n    ```\r\n5. Clone Repository:\r\n    ```bash\r\n    git clone https://github.com/eclipse-basyx/basyx-aas-web-ui.git\r\n    ```\r\n6. Bootstrap the application:\r\n    ```bash\r\n    . bootstrap.sh\r\n    ```\r\n7. On initial installation answer first question with **y** (Yes) otherwise **n** (No)\r\n8. Answer the second question with **n** (No)\r\n\r\n### Building your own Docker Image:\r\n\r\nThe latest Off-the-Shelf version is available on [DockerHub](https://hub.docker.com/r/eclipsebasyx/aas-gui/tags).\r\n\r\n1. Build the image by executing\r\n```bash\r\ndocker build aas-web-ui -t eclipsebasyx/aas-ui\r\n```\r\n\r\n2. Start a container by executing\r\n```bash\r\ndocker run -p 3000:3000 eclipsebasyx/aas-ui\r\n```\r\n\r\n3. You can also predefine the AAS Discovery Service Path, AAS- and Submodel Registry Path, AAS-, Submodel- and Concept Description Repository Path, the Apllications primary color and the Base Path by adding the following arguments to the run command:\r\n\r\n`-e AAS_DISCOVERY_PATH=\u003caas_discovery_path\u003e`\r\n\r\n`-e AAS_REGISTRY_PATH=\u003caas_registry_path\u003e`\r\n\r\n`-e SUBMODEL_REGISTRY_PATH=\u003csubmodel_registry_path\u003e`\r\n\r\n`-e AAS_REPO_PATH: \u003caas_repo_path\u003e`\r\n\r\n`-e SUBMODEL_REPO_PATH: \u003csubmodel_repo_path\u003e`\r\n\r\n`-e CD_REPO_PATH: \u003cconcept_description_repo_path\u003e`\r\n\r\n`-e PRIMARY_LIGHT_COLOR=\u003cprimary_light_color\u003e`\r\n\r\n`-e PRIMARY_DARK_COLOR=\u003cprimary_dark_color\u003e`\r\n\r\n`-e LOGO_LIGHT_PATH=\u003clogo_light_path\u003e`\r\n\r\n`-e LOGO_DARK_PATH=\u003clogo_dark_path\u003e`\r\n\r\n`-e BASE_PATH=\u003cbase_path\u003e`\r\n\r\n`-e ENDPOINT_CONFIG_AVAILABLE=\u003ctrue/false\u003e`\r\n\r\n4. If you want to use a custom logo, you can mount a folder containing the logo and the favicon.ico to the container by adding the following argument to the run command:\r\n\r\n`-v \u003clocal_path_to_logo_folder\u003e:/usr/src/app/dist/Logo`\r\n\r\n5. The GUI is now available at:\r\n\r\n```bash\r\nhttp://localhost:3000/\u003cbase_path\u003e\r\n```\r\n\r\n#### Docker Compose:\r\n\r\nIf you want to use the AAS Web UI as part of a Docker Compose project you can use the following example in your `docker-compose.yml`\r\n\r\n```\r\naas-web-gui:\r\n    image: eclipsebasyx/aas-gui:\u003ctag\u003e\r\n    container_name: aas-web-gui\r\n    ports:\r\n        - \"3000:3000\"\r\n    environment:\r\n        AAS_DISCOVERY_PATH: \"\u003caas_discovery_path\u003e\"\r\n        AAS_REGISTRY_PATH: \"\u003caas_registry_path\u003e\"\r\n        SUBMODEL_REGISTRY_PATH: \"\u003csubmodel_registry_path\u003e\"\r\n        AAS_REPO_PATH: \"aas_repo_path\"\r\n        SUBMODEL_REPO_PATH: \"submodel_repo_path\"\r\n        CD_REPO_PATH: \"concept_description_repo_path\"\r\n        PRIMARY_COLOR: \"\u003cprimary_color\u003e\"\r\n        PRIMARY_LIGHT_COLOR: \"\u003cprimary_light_color\u003e\"\r\n        PRIMARY_DARK_COLOR: \"\u003cprimary_dark_color\u003e\"\r\n        LOGO_PATH: \"\u003clogo_path\u003e\"\r\n        LOGO_LIGHT_PATH: \"\u003clogo_light_path\u003e\"\r\n        LOGO_DARK_PATH: \"\u003clogo_dark_path\u003e\"\r\n        BASE_PATH: \"\u003cbase_path\u003e\"\r\n        ENDPOINT_CONFIG_AVAILABLE: \"\u003ctrue/false\u003e\"\r\n    volumes:\r\n        - \u003clocal_path_to_logo_folder\u003e:/usr/src/app/dist/Logo\r\n```\r\n\r\n#### CORS configuration of the Registry and Repositories\r\n\r\nTo be able to access the BaSyx AAS data from the Web UI, you need to add a wildcard to cross-origin resource sharing on the Registry- and AAS-, Submodel- and Concept Description Repository (AAS Environment). An example on how to do this is shown in the examples folder in the [basyx-java-server-sdk](https://github.com/eclipse-basyx/basyx-java-server-sdk/tree/main/examples\r\n) Repository.\r\n\r\n#### Docker with nginx\r\n\r\nThe [basyx-java-server-sdk](https://github.com/eclipse-basyx/basyx-java-server-sdk/tree/main/examples/BaSyxNGINX) Repository includes an example Docker Compose project which shows how to use the UI with nginx and configure a base path so that the UI can be hosted under\r\n\r\n```bash\r\nhttp(s)://your-url/base-path\r\n```\r\n\r\n## How to contribute\r\n\r\n### Start Dev Environment (e.g. VSCode):\r\n\r\n1. Open the terminal/shell on the root directory of the project\r\n2. Bootstrap the project\r\n    ```bash\r\n    . bootstrap.sh\r\n    ```\r\n3. On initial installation answer first question with **y** (Yes) otherwise **n** (No)\r\n4. Answer the second question with **n** (No)\r\n5. Start coding :wink:\r\n\r\n### Create a deployable (optimized) build:\r\n\u003e [!WARNING]\r\n\u003e A production build does not support the loading of Submodel Plugins during runtime.\r\n\u003e You must first put your plugins in the dedicated directory and then build the Docker Image.\r\n\r\n1. Open the terminal/shell on the root directory of the project\r\n2. Go to the aas-web-ui folder\r\n    ```bash\r\n    cd aas-web-ui\r\n    ```\r\n3. Build the project\r\n    ```bash\r\n    yarn install\r\n    yarn build\r\n    ```\r\n6. Source Files are created here:\r\n\r\n`aas-web-ui/dist`\r\n\r\n### Contribute your code to this repo\r\n\r\nAs a prerequisite you need to sign the [Eclipse Contributor Agreement](https://www.eclipse.org/legal/ECA.php).\r\n\r\nAfter you signed the ECA you can create Pull Requests to this Repository.\r\n\r\n\u003e All PRs will be checked for compliance and functionality!\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-basyx%2Fbasyx-aas-web-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feclipse-basyx%2Fbasyx-aas-web-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-basyx%2Fbasyx-aas-web-ui/lists"}