click event is not working in forge viewer - autodesk-forge

We have implemented the Autodesk Forge Viewer in our web application. We have displayed the Navisworks file in Forge Viewer.
On clicking the particular element/object in forge viewer, we need to get the Object ID of selected element.
We will use this Object ID for multiple purpose (like zooming, etc) in our application.
For this we have used the below selection changed event in our page but the below event is not working.
EventsTutorial.prototype.onSelectionEvent = function(event){
var currSelection = this.viewer.getSelection();
var domElem = document.getElementById('MySelectionValue');
domElem.innerText = currSelection.length;
};
Kindly help us to resolve this issue.

It seems you didn't register your function as a listener to the viewer. So I guess your function onSelectionEvent is never called.
You probably want to register a listener to either the SELECTION_CHANGED_EVENT(docs) or the AGGREGATE_SELECTION_CHANGED_EVENT(docs).
this.viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
// do something
});

Related

how to zoom asset in forge viewer

we have implemented the forge viewer in our web application. When clicking the asset in forge viewer, we need to make our entire page should be loaded.
any click event is available when object is selected in viewer?
please provide the function name or code, we need to hit any function when asset selecting.
you can use below even, you can write this event after you create instance of viewer
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectionChanged);
function onSelectionChanged()
{
perform your operation;
}
for zooming the asset you can use
viewer.fitToView([arrayofdbid],viewer.model);
if you want to highlight selection, you can use,
viewer.select([array of dbid]);

Mapping Forge Viewer button to external buttons

I am hosting Forge Viewer as a component in my own GUI. I am wondering if I can map Forge Viewer buttons to external buttons in my own GUI.
An as example, instead of clicking on the model browser button in Forge Viewer, I want to be able to click on a button in my own GUI in order to see the tree view of the loaded model in forge viewer.
Such feature is already implemented in viewer.autodesk.com for model browser button, and I am wondering how I can do so.
Sure thing. These default controls are usually nested inside extensions that house the ui for that functionality. However you can get any extension by name after initaliazing the viewer using getExtension You now have a reference to the extension which you can control
Please try this is browser console:
let ext = null
let gotExtension = function(extension){
ext = extension
}
let openEvent = function(extension){
extension.activate();
}
let closeEvent = function(extension){
extension.deactivate();
}
NOP_VIEWER.getExtension('Autodesk.ModelStructure', gotExtension);
openEvent(ext);

Highlighting Text When a Part is Selected in the Forge Viewer

Currently, I have successfully been able to isolate and highlight parts or assemblies in the autodesk-forge viewer, with external buttons. When a button is pressed externally, it will automatically zoom into the selected part inside the viewer. It is explained more here. My next step now, is to have those external parts on the website, highlight when a part is clicked inside the viewer. How can I have a function be executed (a highlight text function) when the user selects a part on the viewer. I have tried the following code but it doesn't work:
if (viewer.isolate(dbId) == true){
highlightFunction()
}
Any help on how a function can be executed when a user selects a part on the viewer would be greatly appreciated.
Thanks!
If I understand you correctly, then all you need to do is listen to the selection event and call your function from there:
viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
(event) => { // do what you need }
)
Here is a sample: Selection override
If you're working with multiple models in the Viewer then listen to the AGGREGATE_SELECTION_CHANGED_EVENT event instead. See Multi-model refresher

disable double click to zoom in autodesk viewer online

When selecting many elements in the Autodesk's online viewer, I double click accidentally and the model zooms to the element. I have to zoom and pan to the view I'm comfortable with again and it is very annoying. Is there a way to disable this functionality in the online viewer?
I found similar questions for the desktop apps (https://forums.autodesk.com/t5/autocad-forum/turn-off-wheel-double-click-zoom-extents/td-p/53144) but not the online viewer.
There is a fairly straightforward workaround for that: create a custom tool and absorb the double-click event. See that article for a start Creating "Tools" for the View & Data API.
To absorb an event implement the corresponding handler and return true:
this.handleDoubleClick = function(event, button) {
// ... do your stuff if needed ...
// event handled
return true;
};

How to access entities in CzmlDataSource after loading

I want to access to some entities in my czml data source for keep tracking in the viewer but after the loading, as one of the options for camera. I know that I can access entities in my czml file while I am loading them, but I don't know how I can access to them after loading. Here I have an example:
var viewer = new Cesium.Viewer('cesiumContainer');
var czmlDataSource = new Cesium.CzmlDataSource();
viewer.dataSources.add(czmlDataSource);
czmlDataSource.load('../../SampleData/Vehicle.czml').then(function(){
var myEntity= czmlDataSource.entities.getById('Vehicle');
viewer.trackedEntity=myEntity;
});
This code works fine, but I want to give option to the viewer to choose the camera, then I need to have access to Vehicle after I finished loading, I tried several methods, but non of them works. I have some example bellow:
var viewer = new Cesium.Viewer('cesiumContainer');
var czmlDataSource = new Cesium.CzmlDataSource();
viewer.dataSources.add(czmlDataSource);
czmlDataSource.load('../../SampleData/Vehicle.czml');
var myEntity= czmlDataSource.entities.getById('Vehicle');
viewer.trackedEntity=myEntity;
Do you know how I can define an entity from those which are already in my czml file?
The reason your second block of code doesn't work appears to be simply because you haven't waited for the asynchronous load of the czmlDataSource.
Try modifying your second block of code, take off the last 2 lines and wrap them in a button onClick callback. If you click the button before the CZML is loaded, myEntity will be undefined and the camera won't change. If you click the same button again after the CZML loads, it should work fine.