@codelution/visualizer

3D for your Business App. Web Component to visualize IoT, Smart Factory, Devices.

Usage no npm install needed!

<script type="module">
  import codelutionVisualizer from 'https://cdn.skypack.dev/@codelution/visualizer';
</script>

README

Codelution Visualizer

3D for your Business App - Visualizing IoT, Smart Factory or Devices

Description

The Codelution Visualizer is a (web) component for 3D rendering IoT, Smart Factories or just devices / products. By using browser components it can also be integrated in desktop applications.

The Codelution Visualizer enables appealing visualizations of complex scenarios and workflows. A building block concept allows you to configure individual scenarios easily. Our powerful API enables you to show product state, product variations or animations in real time.

Usage Overview

Install dependencies

npm install @codelution/visualizer

Add component to HTML

<codelution-visualizer></codelution-visualizer>

Import the visualizer

To register the webcomponent just do:

import "@codelution/visualizer";

Provide assets

The npm package contains a set of assets in the directory: node_modules/@codelution/visualizer/assets

In order to function properly, you must provide these assets to the webcomponent. By default, we try to access the assets under the url:

/assets/visualizer-assets

When using Angular-CLI for example, the required configuration in your angular.json is:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/@codelution/visualizer/assets",
    "output": "assets/visualizer-assets/"
  }
]

Use the components typescript contracts

import { Options } from "@codelution/visualizer";

var yourOptions = new Options(/* initialize by construtor */);
yourOptions.ambientLightColor = "#FF0000"; // or set properties

Then set the options. Example for Angular:

<codelution-visualizer [options]="yourOptions"></codelution-visualizer>

Issue Reporting

TODO

Asking Questions

TODO

License

TODO