Mapping Forge Viewer button to external buttons - autodesk-forge

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);

Related

click event is not working in forge viewer

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
});

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]);

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;
};

ZoomWindow extension breaks without GUI?

Using v2.13 of the viewer, the ZoomWindow extension relies on having the default GUI enabled. Is there a way around this? The load method is:
proto.load = function() {
var viewer = this.viewer;
var toolbar = viewer.getToolbar(true);
//var toolbar = viewer.getToolbar ? viewer.getToolbar(true) : undefined;
// Init & Register tool
this.tool = new namespace.ZoomWindowTool(viewer);
viewer.toolController.registerTool(this.tool);
// Add the ui to the viewer.
this.createUI(toolbar);
return true;
};
which fails because getToolbar is undefined.
It seems from the commented out line that this has been considered, but not implemented.
What is the best way to implement a work around - should I copy the entire extension with a new name, or can I replace the load method at runtime?
Edit: was looking to use the headless viewer, but it seems easiest just to hide the UI with css.
It's not clear to me if you are using the GuiViewer3D or want to use the Viewer3D, the viewer without Autodesk custom UI. If you use GuiViewer3D, you can simply wait for the toolbar to be loaded before loading the ZoomWindow extension, which requires the toolbar controls to be created in order to add a button to it.
viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, function () {
viewer.loadExtension('Autodesk.Viewing.ZoomWindow')
})
Here is a blogpost I wrote a while ago about using events in the viewer. It is not up-to-date with the current version but remains valid:
http://adndevblog.typepad.com/cloud_and_mobile/2015/10/event-watcher-extension-for-view-data.html
Now as Zhong mentioned, if you want to use the headless viewer with no UI and still use the extension, you may have to copy and customize it as you suggested. But an easier workaround could be to use GuiViewer3D and simply hide the existing toolbar with css, so the the js code remains valid. Set display:none on div id="guiviewer3d-toolbar", for example, or on the adsk-control class.
Hope that helps

is it possible to save offline map in pdf file

I used Google map and visited a location and saved it as an html page by this I am able to view that location in future also with zoom functionality. Is it possible to save that location(map) in .pdf format instead of html format with zooming capability.
If yes how and if no then please answer why.
If you go to print that html file, the print dialog will pop up with the default printer. Click 'change' under the printer and choose 'Save as PDF'. You can zoom a pdf in adobe reader.
or (the long way)
Launch InDesign and create a new A4 landscape document. Now press F (Frame tool) on your keyboard and drag a frame with a size you wish to have for the map.
Go to Workspace settings (top right corner of InDesign) and change it to interactive for PDF. Go to Window → Interactive → Buttons. In InDesign you can create buttons very easily. Create any object and then right click and select Interactive - Convert to button.
To import a Google map to flash you need to download Google Map Component - map_1_18.swc.
In Windows 7 navigate to C:Program Files (x86)AdobeAdobe Flash CS6CommonConfigurationComponents. Then create a new folder there and name it Google. Store the .swc file there and then go to this page and follow the instruction to get the API key and save it. Your Flash is now set up to supports Google maps API.
Open the Components panel by pressing CTRL + F7 or click Window → Components in the menu. You should see the Google map library there. Drag and drop it to the Library panel.
Go to Layer panel in timeline and call it e.g. gmap. Open the Action panel (or Press F9) Windows → Actions. Now put there the code below to import the map:
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.Map3D;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.View;
import com.google.maps.geom.Attitude;
// Creating map variable
var map:Map3D;
/ Creating map
create_map();
function create_map()
{
map = new Map3D();
map.key = "your api key";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
}
function onMapReady(event:MapEvent):void
{
map.setCenter(new LatLng(48.207401,16.372805), 13);
map.setAttitude(new Attitude(20,30,0));
map.viewMode = View.VIEWMODE_PERSPECTIVE;
}
In order to create the marker, you need to put some ActionScript again. Go to ActionScript panel and copy the following code. Change the classes to match yours if necessary.
var c:Marker = new Marker(new LatLng(-33.925272,18.423557),
new MarkerOptions({icon:new capeTown()}));
map.addOverlay(c);
var p:Marker = new Marker(new LatLng(50.075651,14.431229),
new MarkerOptions({icon:new prague()}));
map.addOverlay(p);
var v:Marker = new Marker(new LatLng(48.206371,16.375122),
new MarkerOptions({icon:new vienna()}));
map.addOverlay(v);}
If you want to have control fly.to animations with acrobat buttons. Since we call ActionScript from Javascript, we use the function ExternalInterface.addCallback that will build bridge between SWF and Acrobat Javascript. Create a new action layer and put there something similar to this. It should have the same marker coordinates:
function pr(e:MouseEvent = null):void
{
map.flyTo(new LatLng(50.075651,14.431229),12,new Attitude(0,0,4),5);
}
ExternalInterface.addCallback("pr",pr);
function vn(e:MouseEvent = null):void
{
map.flyTo(new LatLng(48.206371,16.375122),9,new Attitude(0,30,3),5);
}
ExternalInterface.addCallback("vn",vn)
function cp(e:MouseEvent = null):void
{
map.flyTo(new LatLng(-33.925272,18.423557),3,new Attitude(0,30,-10),3);
}
ExternalInterface.addCallback("cp",cp)
With map.flyTo function you can control the following parameters: LatLng, Zoom, Attitude, Time.
Now open your InDesign file again, that we have already prepared. Select the frame that will serve as placeholder for the map. With placeholder selected press CTRL + D (File – Import) to place your SWF map. Open the media panel and check Play on Page Load on. Choose None for Poster option. Now you are ready to export it to interactive PDF. Go to File – Export or CTRL + E and select Adobe PDF Interactive.
Open the file in Acrobat. You have your interactive Acrobat buttons and your embedded Google map there. The buttons do nothing now, except for the rollover effect if you have created any. In the Interactive tab tools choose select object tool and double click on one of the buttons. In the windows that arrive go to Actions and from Select action dropdown menu select Run a Javascript, Then Press Add. In a a new windows that open again put the following code:
getAnnotsRichMedia(this.pageNum)[0].callAS(“pr”);
Press OK and close
Reference
You may want to have a look at the Static Maps API https://developers.google.com/maps/documentation/staticmaps/. It allows you to request 640x640 Static Maps and you can adjust the zoom accordingly by altering the parameter. You can either use coordinates or names of places, which will get geocoded for your request.
Here are a few examples with different zoom levels and map types:
640x640, Zoom 14, Terrain Map:
http://maps.googleapis.com/maps/api/staticmap?center=Eiffel+Tower&zoom=14&size=640x640
640x640, Zoom 18, Satellite: http://maps.googleapis.com/maps/api/staticmap?center=Eiffel+Tower&zoom=18&size=640x640&maptype=satellite
Be aware though that according to 10.1.2.(b) of the Terms of Use, you:
(b) No Direct Marketing. You must not print more than 5,000 copies of sales collateral
materials containing a screenshot of the Content for purposes of
commercial sales lead generation ("Direct Marketing") or incorporate
the Content as a core part of printed matter (such as printed maps or
guide books) that you redistribute for a fee. You must contact the
Google Maps API for Business sales team to obtain a direct license if
you desire to do either of the above.