How to activate Toolbar in Communicator webviewer

HOOPS Communicator
1

My company is trying to make the viewer work with building models and would like to implement the standard toolbar for working with the operators. I have got the viewer working with NavCube etc, but have not yet found how to display toolbar. I am loading the viewer using VUE.js and the Typescript implementation:

I load the viewer like this:

      this.viewer = new Communicator.WebViewer({
        containerId: this.viewerId,
        endpointUri: modelUri,
        memoryLimit: 512,
      });

I have seen examples where you can activate the toolbar here by just adding parameter
toolbar: true
The hoops_web_viewer.d.ts does not seem to have this feature.

Can anyone give me a hint?

Screenshot 2023-02-20 at 15.20.17

2

Hello and thank you for reaching out.

The way you are loading the viewer looks great, and it makes sense that items like the NavCube, AxisTriad, etc are rendering properly. Those items are managed within the WebViewer itself, and thus contained within the canvas element of your app.

The Toolbar and Modeltree on the other hand are example UI elements we have provided on top of the viewer functionality. While they use Communicator APIs to achieve different behaviors in the WebViewer, the buttons, sliders, styling, etc are just HTML elements, CSS stylings, and JS functions.

I would assume you are running into issues due to the fact that we have written this sample UI without any library or framework, and that they are explicitly defined by the HTML (rather than being rendered and mounted when needed like in a library such as Vue). Our standard UI assumes all the HTML elements are already mounted on the DOM before any call to instantiate the Communicator.UI object is made.

In {HC_INSTALL_DIR}/web_viewer/src/hoops_web_viewer_sample.html, you can see all the boilerplate HTML elements that go into defining the model tree and toolbar. The web_viewer_ui.js file assumes this HTML structure is present. In something like Vue, you would be placing these items into a component rather than your index.html file and then Vue would render them as needed.

In order to make the toolbar work with Vue, you will have to be sure all these elements are mounted to the DOM first, and then instantiate the toolbar. This is similar to the idea that the WebViewer div must be mounted before you can instantiate the WebViewer. Even then, the toolbar code as provided relies on jQuery, which I assume you are not using alongside Vue. Of course, you can include it in your project, but it is not ideal and adds to your bundle size.

I would recommend using the HTML boilerplate in hoops_web_viewer_sample.html and the Typescript source for our UI in {HC_INSTALL_DIR}/web_viewer/typescript/ui to rewrite these components in for Vue. You could try to massage the web_viewer_ui.js file as is into your Vue application, but I would guess this would not be as pretty as you may hope.

I hope this helps narrow down the issue and provides some guidance for next steps. We hope to have some out of the box UI elements for popular frameworks like Vue, Angular, or React in the future, and appreciate your patience with the example UI current offerings. Let me know if you have any follow up questions.

Chris

2 Likes
3

Hi Chris

Thanks a lot for your detailed answer. This was clarifying and helped me find a way to implement the menu. By the way. Do you know if it exist javascript versions of the following files?:

hoops_web_viewer.d.ts
tcc.d.ts

Wonder if it is possible to implement VUE support without enable Typescript.

Espen

1 Like
4

Glad to hear, Espen.

Yes, you can find the JS files for the hoops_web_viewer.d.ts in the Communicator package at {HC_INSTALL_DIR}/web_viewer/src/js. The tcc.d.ts file contains the type definitions for Web Viewer dependencies, which JS equivalent files are listed alongside the hoops_web_viewer.js file.

You can either choose to load the WebViewer using the monolithic file, or using WebAssembly. We recommend using the WebAssembly flavor for best performance.

You can read more about the hoops_web_viewer.js files and its dependencies here.

Chris

1 Like