Viewer in eigene Webseiten einbetten

Der Viewer des Designers steht als Web Component <ml-aas-viewer> zur Verfügung. Damit lässt sich eine AAS mit allen thematischen Ansichten, z. B. Typenschild oder Carbon Footprint, in eine eigene Webseite einbinden, etwa in einen Onlineshop oder eine Produktseite.

Einbinden

Die Dateien viewer.js und styles.css entstehen mit pnpm build-wc im Verzeichnis frontend/ und werden neben die Webseite gelegt:

<script src="viewer.js"></script>
<link rel="stylesheet" href="styles.css" />

<ml-aas-viewer
  language="de"
  globalAssetId="https://example.com/ids/asset/demoKreiselpumpeKp200"
  aasRepositoryUrl="https://aas.example.com"
  smRepositoryUrl="https://aas.example.com"
  cdRepositoryUrl="https://aas.example.com"
  discoveryUrl="https://discovery.example.com"
  aasRegistryUrl=""
  smRegistryUrl=""
></ml-aas-viewer>

Attribut	Bedeutung
`globalAssetId`	Asset-ID; die AAS wird über den Discovery-Dienst gesucht. Alternativ `aasIdentifier`.
`aasIdentifier`	Kennung der AAS; sie wird über die Registry gesucht.
`aasRepositoryUrl`, `smRepositoryUrl`, `cdRepositoryUrl`	Repositories für AAS, Teilmodelle und Konzeptbeschreibungen
`aasRegistryUrl`, `smRegistryUrl`, `discoveryUrl`	Registries und Discovery-Dienst
`apiKey`	API-Schlüssel, falls die Dienste einen verlangen
`language`	`de` oder `en`

Findet der Discovery-Dienst mehrere AAS zur Asset-ID, zeigt der Viewer eine Auswahl.

warnung

Alle nicht genutzten Adressen ausdrücklich leer setzen, wie im Beispiel. Fehlende Attribute fallen sonst auf Demo-Server zurück.
Ein apiKey steht im Quelltext der Webseite und ist damit für jeden lesbar. Nur einen Schlüssel verwenden, der ausschließlich lesen darf.
Die AAS-Dienste müssen Anfragen von der Domain der Webseite erlauben (CORS).

Beispielseite

Das Projekt frontend/apps/plain-viewer ist eine fertige Seite mit der Web Component, auch als Container-Image. Sie übernimmt die Attribute aus der Adresse, z. B.:

https://viewer.example.com/?globalAssetId=https%3A%2F%2Fexample.com%2Fids%2Fasset%2F123&aasRepositoryUrl=https%3A%2F%2Faas.example.com&lang=de

Einen apiKey liest sie nicht aus der Adresse.

Einbinden​

Beispielseite​

Einbinden

Beispielseite