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!