Getting Started¶

These docs relate to twodc-visualizer and twodc-redlining v1.12.1.

Questions or feedback? Drop us an email at platform-4.industry@siemens.com. And if you are just looking to play around and explore, try our playground.

Installation¶

First, install the @siemens-ag/twodc-visualizer or @siemens-ag/twodc-redlining package. The packages are published on the private npm registry. Please contact team if you want to get access to it.

For Visualizer

yarn add @siemens-ag/twodc-visualizer
# or
npm install @siemens-ag/twodc-visualizer

For Redlining

yarn add @siemens-ag/twodc-redlining
# or
npm install @siemens-ag/twodc-redlining

Usage¶

Twodc is essentially a set of Web Components that you can use to create a canvas and render any document inside it. Therefore, it can be used with any javascript framework of your choice as long as it supports Web Components.

The library comes with a set web components that needs to be used to render the control.
The smallest Twodc example looks like this

#index.html
<div>
  <twodc-ui-frame>
    <twodc-ui-container>
      <twodc-ui-panel>
        <twodc-view>
          <two-dc-layout id="layoutName" source="default"></two-dc-layout>
        </twodc-view>
      </twodc-ui-panel>
    </twodc-ui-container>
  </twodc-ui-frame>
</div>

<script src="./node_modules/@siemens-ag/twodc-visualizer/twodcVisualizer.js"></script>
<script>
    twodcVisualizer.init();
    twodcVisualizer.load();

    // twodc compatible json data 
    const data = {
        reportDrawing: {...},
        layers: {...},
        symbolLibrary: {...},
        entities: {...},
        ...
    };

    twodcVisualizer.setDataString('layoutName', data);
</script>

twodc-visualizer package exports a UMD module therefor, once imported it can be used directly by a global variable twodcVisualizer.

We can also import twodc-visualizer package as a ES6 module.

#index.js
import {init, load, setDataString} for '@siemens-ag/twodc-visualizer';

export default function() {
    init();
    load();

    // twodc compatible json data
    const data = {
        reportDrawing: {...},
        layers: {...},
        symbolLibrary: {...},
        entities: {...},
        ...
    }; 

    setDataString('layoutName', data);
}

Community

Connect and Collaborate with Industrial Professionals and Join the Community!