Using View and Data API with Meteor–part 2

By Daniel Du

In previous post, I managed to embed a viewer into Meteor application with View and Data API. But it is just a start, embedding a  viewer with built-in functionalities. As a developer, we always want to add some additional functions to it, we do that by creating viewer extensions. As you know, we have quite a few extensions on http://gallery.autodesk.io. Is it possible to load extension into viewer with Meteor? In this post, I will keep on my investigation.

As said in previous post, meter has its order to load JS files, it is not easy to change it, but our extensions should be loaded after the viewer is initialized. It would be nice if meteor has “lazy load” mechanism, and then I found the package “aramk:requirejs”, which works just like what I am expecting. To install the package, I just edit the “./meteor/packages” file and append it to the end of lines.

Most viewer extensions are expected to load after viewer is initialized or geometries are loaded, so I add an event listener to listen to “GEOMETRY_LOADED_EVENT” , in the event handler I am going to load my custom viewer extensions. We have many extensions samples http://gallery.autodesk.io and github, I am going to use some of them as a demo. Firstly we need ask meteor to load these extensions. As we discussed earlier, we have to choose suitable folders for these viewer extension files, otherwise these JS files may be loaded and executed by Meteor before viewer3D.js library is loaded, which causes “AutodeskNamespace is not defined” error. According to meteor document:

All files inside a top-level directory called public are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as <img src='/bg.png' />. This is the best place for favicon.ico, robots.txt, and similar files.

so “public” folder seems a good place, I just want meteor treats these extensions as static files and then load them when needed with requireJS, so here is my updated project folder structure with some extensions added:

.
├── README.md
├── client
│   ├── compatibility
│   ├── index.html
│   ├── index.js
│   ├── style.css
│   └── viewer
│       ├── viewer.html
│       └── viewer.js
├── lib
├── public
│   └── extensions
│       ├── Autodesk.ADN.Viewing.Extension.Basic
│       │   └── Autodesk.ADN.Viewing.Extension.Basic.js
│       ├── Autodesk.ADN.Viewing.Extension.DockingPanel
│       │   └── Autodesk.ADN.Viewing.Extension.DockingPanel.js
│       └── Autodesk.ADN.Viewing.Extension.Workshop
│           └── Autodesk.ADN.Viewing.Extension.Workshop.js
└── server
    └── index.js

 

Now I am going to load these extension files as GEOMETRY_LOADED_EVENT” event handler, following code demos the idea, firstly load the extension js files with requireJS, and load the extension with viewer API:

        viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function(){

            console.log('GEOMETRY_LOADED_EVENT');

            //load extensions
            require(['/extensions/Autodesk.ADN.Viewing.Extension.Basic/Autodesk.ADN.Viewing.Extension.Basic.js'],
                function(){
                viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Basic');
            });

            //load extensions
            require(['/extensions/Autodesk.ADN.Viewing.Extension.DockingPanel/Autodesk.ADN.Viewing.Extension.DockingPanel.js'],
                function(){
                    viewer.loadExtension('Autodesk.ADN.Viewing.Extension.DockingPanel');
                });

            //load extensions
            require(['/extensions/Autodesk.ADN.Viewing.Extension.Workshop/Autodesk.ADN.Viewing.Extension.Workshop.js'],
                function(){
                    viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Workshop');
                });


        });

With that I can load my custom extensions, here is the output in developer console:

And here is how the custom panel extension is running:

OK, hope this helps if you are developing your app with Meteor and want to add some cool stuff with View and Data API.

 

Finally, I have to confess I made quite mistakes before get the result, I put it here  in case you run into the same issue.

Error : “Uncaught SyntaxError: Unexpected token <” . I got this error message, which makes me very confused. The extension code works fine on http://gallery.autodesk.io, but when I added it to my meteor application, it throw this weird error message:

 

Finally I found out that it is due to the path of require function, the path should be correct, and it is recommended to add “/” before the path to make it an absolute path.

//load extensions
require(['/extensions/Autodesk.ADN.Viewing.Extension.Basic/Autodesk.ADN.Viewing.Extension.Basic.js'],
    function(){
       viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Basic');
});

And if you are using other extensions like “Autodesk.ADN.Extensions.Chart ”, which is also include code snippet with requireJS in extension code, you need also make sure the path is correct, otherwise you will get the “Unexpected token <” error. I was trying to load “Autodesk.ADN.Extensions.Chart ” extension but finally give it up as it always complains “async is undefined” even I required the async.min.js dependency. If you figured it out, I would be happy to hear from you.

As always, the complete source code is on github, you can check it out on https://github.com/Developer-Autodesk/meteor-view.and.data.api