2

How to Show or Read .dwg files on browser without using any software means using PHP, jQuery, Javascript or any other programming language. For this I have gone through https://developer.autodesk.com and created an app with Client ID and Client Secret, Also created index.html file. But after that i get stuck in finding next movement for getting required "Model Derivative API". So Please guide me for the same. Thanks for giving your precious response.

<!-- The Viewer CSS -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.min.css" type="text/css">

<!-- Developer CSS -->
<style>
    body {
        margin: 0;
    }
    #MyViewerDiv {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #F0F8FF;
    }
</style>

<!-- The Viewer will be instantiated here -->
<div id="MyViewerDiv"></div>

<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/three.min.js"></script>
<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>

<!-- Developer JS -->
<script>
    var viewer;
    var options = {
        env: 'AutodeskProduction',
        accessToken: '<YOUR_APPLICATION_TOKEN>'
    };
    var documentId = 'urn:<YOUR_URN_ID>';
    Autodesk.Viewing.Initializer(options, function onInitialized(){
        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    });

    /**
    * Autodesk.Viewing.Document.load() success callback.
    * Proceeds with model initialization.
    */
    function onDocumentLoadSuccess(doc) {

        // A document contains references to 3D and 2D viewables.
        var viewables = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {'type':'geometry'}, true);
        if (viewables.length === 0) {
            console.error('Document contains no viewables.');
            return;
        }

        // Choose any of the avialble viewables
        var initialViewable = viewables[0];
        var svfUrl = doc.getViewablePath(initialViewable);
        var modelOptions = {
            sharedPropertyDbPath: doc.getPropertyDbPath()
        };

        var viewerDiv = document.getElementById('MyViewerDiv');
        viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
        viewer.start(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
    }

    /**
     * Autodesk.Viewing.Document.load() failuire callback.
     */
    function onDocumentLoadFailure(viewerErrorCode) {
        console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
    }

    /**
     * viewer.loadModel() success callback.
     * Invoked after the model's SVF has been initially loaded.
     * It may trigger before any geometry has been downloaded and displayed on-screen.
     */
    function onLoadModelSuccess(model) {
        console.log('onLoadModelSuccess()!');
        console.log('Validate model loaded: ' + (viewer.model === model));
        console.log(model);
    }

    /**
     * viewer.loadModel() failure callback.
     * Invoked when there's an error fetching the SVF file.
     */
    function onLoadModelError(viewerErrorCode) {
        console.error('onLoadModelError() - errorCode:' + viewerErrorCode);
    }

</script>

Chandana
  • 33
  • 1
  • 1
  • 6

1 Answers1

1

You can easily test it online at A360 Viewer.

The code you pointed out is just the page, note how it's missing the TOKEN and the URN. In fact, following the Viewer tutorial you'll notice a Prepare your file for viewing tutorial.

In any case you'll need a back-end that upload and post translation jobs, we have some samples at our github account.

Update

Show models without programming: you can easily share your A360 models on your website, here are the steps:

  1. Go to A360 and sign in (or sign up)
  2. Use an existing project or create a new one.
  3. Inside the project, click on Upload and select the file on your machine. The translation process will start automatically. Or you can use existing files on your project.
  4. On the top-right icon, click on "Share" option. Share icon
  5. On the popup, go to Embed tab and then select the size. Copy the HTML and paste on your website. Embed HTML code
Augusto Goncalves
  • 8,493
  • 2
  • 17
  • 44
  • Thank you @Augusto for your reply. But i need to show dwg files on my website. For this could you please give exact link having proper guide lines like, how much pages i need to create with which type of extensions and how those pages are linked to each other for showing DWG files. I have gone through viewer-javascript-extract.spreadsheet/samples/rac_advanced_sample_project.rvt on https://github.com/autodesk-forge/ and it is showing nothing, So please give your further response. – Chandana Apr 11 '17 at 06:58
  • Thank you so much @Augusto for your step by step guidance. Here i am able to show my DWG file ( uploaded on https://myhub.autodesk360.com and followed steps for sharing and getting embedded code) on my website. All these are static ones. But I need to show dynamic run time files , means how much file's links are there on my site, those all i could open on the fly. Please Reply for the same. – Chandana Apr 11 '17 at 12:57
  • you may change the SRC attribute of the IFRAME markup on your website, but that would require some basic HTML/JavaScript coding... – Augusto Goncalves Apr 11 '17 at 12:59
  • As after uploading dwg files on autodesk360.com got src="https://myhub.autodesk360.com/ue2b9a926/shares/public/SH7f1edQT22b515c761ed24ca3f27f09816e?mode=embed" an alphanumeric code, and using this src only, i can show file view on my site, but i need that, if i would upload any file on my site and created a link for that uploaded file, then on click of that file's link i can show its view, for this, is it necessary that i have to upload all dwg files on autodesk360.com or any other solution to view dwg files on my website without uploading on autodesk360.com or making src dynamic ? Plz help me – Chandana Apr 12 '17 at 06:48
  • Hi @Augusto , I have implemented https://github.com/Autodesk-Forge/forge-boilers.nodejs offline on my localhost (given on https://github.com/autodesk-forge/ provided by you). So could i show my own dwg files offline using forge-boilers.nodejs-master.zip code files. Thank you for your responses – Chandana Apr 15 '17 at 07:16