Post-processing tools 2023 R2

Nexus 3D Viewer Web Component

Last update: 17.04.2023
Note: This component is a work in progress and this documentation is incomplete/preliminary.The Ansys Nexus Viewer is a “web component” capable of rendering 3D geometry in a web page using different rendering configurations. The component can render in the browser using WebGL or remote over VNC (e.g. accessing EnSight or EnVision remote instances). This component is automatically made available using the Nexus Websocket Server (the component is served under /ansys/nexus in that configuration).

Instantiation

To use the component in a web page:
<head>
<script src="/ansys/nexus/viewer-loader.js"></script>
</head>
<body>
<div>
<ansys-nexus-viewer id="Viewer" src="/ansys/nexus/test/viewer_test.avz" proxy_img="/ansys/nexus/images/ANSYS_icon.png" active=true></ansys-nexus-viewer>
</div>
</body>

Properties

The web component element supports several properties:
  • active: If this is true, the 3D view will be active. If false, the proxy image is displayed (if no proxy image is specified, a “blank” launch image will be presented).
  • aspect-ratio: the viewer does not support explicit width/height specification and will be sized to fill the parent element with one exception. If ‘aspect-ratio’ is set, the height will be the (dynamic) width divided by the aspect-ratio value. If ‘aspect-ratio’ is set to the string ‘proxy’, the aspect ratio of the proxy image will be used.
  • guid: a string property that is a unique identifier for the component instance. This defaults to a pseudo-guid that is unique only vs other ansys-nexus-viewer components in the same web page. This property may be set when the element is instantiated but cannot be changed afterward.
  • src: URL to the source 3D geometry. Validity varies by renderer type. The ‘webgl’ renderer supports ‘.avz’ and ‘.scdoc’ files. The ‘envision’ renderer supports ‘.evsn’. A read/write property.
  • proxy-img: URL to a PNG image that should be used as the proxy image when the 3D component is not active.
  • renderer: the back-end renderer to use. ‘webgl’ is the default. ‘envnc’ is also be supported in conjunction with the Nexus Websocket Server local session configurations. This property may only be specified when the element is created.
  • renderer-options: a read-only property specified as a json string containing renderer specific options. Where possible, properties are supported by all back-end renderers. There are some options that are specific to a given renderer. These options are passed via the options property.
  • parts: a read-only property that returns a list of the part names present in the instance. This property will change when the src changes and, depending on the nature of the geometry source may change organically.

Methods

There are several methods calls that can be made on the element via JavaScript. In practice, code similar to the following may be used to access these methods (assuming instantiation as per the example in that section):
<script>
var viewer = document.getElementById("Viewer");
let image = viewer.renderImage();
if (image) document.getElementById("img_target").src = image;
</script>

Methods include:

  • renderImage(): return a dataURL of the RGB contents of the currently rendered image. Note: if the component is not active, this call will activate it.

Events

The component is designed to communicate with external HTML GUI component via events. These events are scoped to the ansys-nexus-viewer element thus handlers must be attached to the viewer element itself. An example of connecting to the partlist changed event:
<script>
function partlistChangedFunc(e) {
var obj = document.getElementById("Viewer");
const new_list = obj.parts;
...
}
var viewer = document.getElementById("Viewer");
viewer.addEventListener("parts-changed", partlistChangedFunc);
</script>
Events include:
  • active-changed: emitted when the ‘active’ property changes.
  • src-changed: emitted when the ‘src’ property changes.
  • parts-changed: emitted when the ‘parts’ property changes.
  • aspect-ratio-changed: emitted when the ‘aspect-ratio’ property changes (note: not the aspect ratio, just the property).
  • proxy-img-changed: emitted when the ‘proxy-img-ratio’ property changes.

Connect with Ansys