Can i use docking panel in Autodesk forge for both viewers? - autodesk-forge

Question

Example on Photo
I have two viewers to compare models. I created a docking panel for properties, and I want this panel to float in two viewers. Is it possible and who will tell you how to do it?

Answer 1

There are two options:
Option1:
Use the 'Autodesk.SplitScreen' extension, which will render up to 4 regions. You load it like this..
loadExtension('Autodesk.SplitScreen');
This simple extension can set up to four cameras, and render four regions. By default, it's just two (left and right). Here's the source code for how the core of it works, just in case you want to write your own...
https://autodeskviewer.com/viewers/latest/extensions/SplitScreen/SplitScreen.js
this.renderScenePart = function (scene) {
// Left
if (shouldRenderForViewport[0]) {
this.renderer.setViewport(0, vpVertStart, vpWidth, vpHeight);
this.context.renderScenePart.apply(this.context, arguments);
}
// Right
if (shouldRenderForViewport[1]) {
this.renderer.setViewport(vpWidth, vpVertStart, vpWidth, vpHeight);
this.context.renderScenePart.apply(this.context, arguments);
}
// Bottom left
if (shouldRenderForViewport[2]) {
this.renderer.setViewport(0, 0, vpWidth, vpHeight);
this.context.renderScenePart.apply(this.context, arguments);
}
// Bottom right
if (shouldRenderForViewport[3]) {
this.renderer.setViewport(vpWidth, 0, vpWidth, vpHeight);
this.context.renderScenePart.apply(this.context, arguments);
}
this.renderer.setViewport(0, 0, this.width, this.height);
this.renderer.enableViewportOnOffscreenTargets(false);
Option2:
For something more advanced, and specific to just 2D, you could also try the 'Autodesk.Viewing.PixelCompare' extension. Here's a blog post with much more detail and a demo...
BLOG: https://forge.autodesk.com/blog/compare-two-2d-documents-using-forge-viewer

Answer 2

ok, two more options:
option A:
if the second image is 'static'... why not just take a 'screenshot' and place it in the right side panel?
You can use the viewer.getScreenShot() command to retrieve a PNG blog, and paint it into the canvas.
// Get the full image
viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
screenshot.src = blobURL;
});
For more details on drawing images to a canvas, see here: https://forge.autodesk.com/blog/screenshot-markups
option B:
if the two panels can be independently controlled, then perhaps try to sync the camera state, with some kind of button press (or action).
with the help of these blog articles:
https://forge.autodesk.com/blog/map-forge-viewer-camera-back-navisworks
Get the Camera position and restore it in Forge Viewer for a virtual visit
for example:
viewer.getState();
viewer.restoreState();
or restore camera position using navigation object:
const nav = this.navigation;
nav.getTarget();
nav.getPosition();
nav.getCameraUpVector();