Integration

To integrate webui to your own application, you need to include the following files:

CSS

Include the css files somewhere in your header segment:

<link rel="stylesheet"
href="https://deploy.hq.wsoptics.de/wsweb3d/{web3d-version}/css/renderer.css">
<link rel="stylesheet"
href="https://deploy.hq.wsoptics.de/wsi4webui/{webui-version}/wsi4webui.css">

Javascript

Include the Javascript files somewhere in your body segment:

<script
src="https://deploy.hq.wsoptics.de/wsweb3d/{web3d-version}/wsweb3d.min.js">
</script>
<script
src="https://deploy.hq.wsoptics.de/wsi4webui/{webui-version}/wsi4webui.umd.min.js">
</script>

Icons

For display of icons Font Awesome is required, which can be included like this:

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc="
crossorigin="anonymous" />

WSi4 CLI Version

To start the application, there is a REST backend required that forwards the communication to a running wsi4 process. There is a special WSi4 version provided without the user interface that should be used for automation tasks.

You should use the same version as your desktop WSi4.

The download links are as follows where the dots in the version (1.16.3) are replaced by dashes (1-16-3):

Linux

https://deploy.hq.wsoptics.de/wsi4/gcc_x86_64-pc-linux-gnu/v1-16-3/wsi4cli.AppImage

Windows

https://deploy.hq.wsoptics.de/wsi4/gcc_x86_64-w64-mingw32.static/v1-16-3/wsi4cli.exe

Starting Wsi4webui

First you need to define a div element with an id which is used to hold the content of the webui form:

<div id="my-webui"></div>

To start up the webui you need to run Javascript on your pages DOMContentLoaded event.

The minimal code to start webui would look like this:

// Create instance
var webui = new wsi4webui();

// Use web3d renderer for 3d object display
webui.setRenderer(wsweb3d.default);

// Set communication backend URL
webui.networkBroker.url = 'YOUR_REST_BACKEND_URL';

// Initialize network configuration
webui.networkBroker.setup();

// Insert WSi4webui into div with id #my-webui
webui.$mount('#my-webui');

To configure the application you would specify your configuration in the networkBroker.setup() call, like this:

webui.networkBroker.setup({
  currencyCode: 'EUR',
});

For more information on configuring the application, see Configuration

Events

networkBroker provides a number of events that allow you to react to certain situations, if necessary.

To execute code on the events, set an event handler before calling the networkBroker.setup() function:

app.networkBroker.$on('request-finished', function(e) {
  console.log('calculation finished');
});

Current events:

Event Description

request

User has pressed the apply button and calculation started

request-finished

Emitted when a user changed something and the calculation finished

graph-changed

The project contents have been changed by the user (e.g. material, thickness, etc.)

save

The user has finished configuration and the project should be saved, the order process continued