22 Apr 2021

Switch between sheets

Certain file types can have multiple models in them. These tend to be 2d sheets as in the case of Revit projects (*.rvt), PDF files, Inventor drawings (*.idw), etc

There is no direct built-in way to show the available models and enable the user to switch between the sheets, however, there is an extension for it that you can load into the Viewer. It's called "Autodesk.DocumentBrowser" 
Apart from providing a Panel that lists all the available sheets and their thumbnails, it also exposes two functions to go back and forth between those sheets: loadNextModel() / loadPrevModel()

In this sample, we created an extension that will provide toolbar buttons that can navigate to the previous and next model in the document. This extension and the "Autodesk.DocumentBrowser" extension are both loaded using the { extensions: [] } option of the GuiViewer3D() constructor.

<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no"
    />
    <meta charset="utf-8" />

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

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
    />

    <!-- Developer CSS -->
    <style>
      body {
        margin: 0;
      }

      #MyConytainerDiv {
        width: 100%;
        height: 100%;
        position: relative;
      }

      #MyViewerDiv {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #f0f8ff;
      }
    </style>

    <title>Showing A360 Shared files</title>
  </head>

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

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>

    <!-- jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"
    ></script>

    <!-- Developer JS -->
    <script>
      // this is the iframe URL that shows up when sharing a model embed on a page
      var embedURLfromA360 =
        "https://myhub.autodesk360.com/ue29c89b7/shares/public/SH7f1edQT22b515c761e81af7c91890bcea5?mode=embed"; // Revit file (A360/Forge/Napa.rvt)

      var viewer;

      function getURN(onURNCallback) {
        $.get({
          url: embedURLfromA360
            .replace("public", "metadata")
            .replace("mode=embed", ""),
          dataType: "json",
          success: function (metadata) {
            if (onURNCallback) {
              let urn = btoa(metadata.success.body.urn)
                .replace("/", "_")
                .replace("=", "");
              onURNCallback(urn);
            }
          },
        });
      }

      function getForgeToken(onTokenCallback) {
        $.post({
          url: embedURLfromA360
            .replace("public", "sign")
            .replace("mode=embed", "oauth2=true"),
          data: "{}",
          success: function (oauth) {
            if (onTokenCallback)
              onTokenCallback(oauth.accessToken, oauth.validitySeconds);
          },
        });
      }

      getURN(function (urn) {
        var options = {
          env: "AutodeskProduction",
          getAccessToken: getForgeToken,
        };
        var documentId = "urn:" + urn;
        Autodesk.Viewing.Initializer(options, function onInitialized() {
          Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess);
        });
      });

      /**
       * Autodesk.Viewing.Document.load() success callback.
       * Proceeds with model initialization.
       */
      function onDocumentLoadSuccess(doc) {
        // A document contains references to 3D and 2D viewables.
        var items = doc.getRoot().search(
          {
            type: "geometry",
            role: "2d",
          },
          true
        );
        if (items.length === 0) {
          console.error("Document contains no 2d sheets.");
          return;
        }

        var viewerDiv = document.getElementById("MyViewerDiv");
        viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv, { extensions: [
            "Autodesk.DocumentBrowser", "MyExtension"
        ]});
        viewer.start();

        viewer.loadDocumentNode(doc, items[1], {})
      }

      class MyExtension extends Autodesk.Viewing.Extension {
        onToolbarCreated() {
          let group = viewer.toolbar.getControl("modelToolbar");
          if (!group) {
            group = new Autodesk.Viewing.UI.ControlGroup("modelToolbar");
            viewer.toolbar.addControl(group);
          }

          // Add a new button to the toolbar group
          let button = new Autodesk.Viewing.UI.Button("prevButton");
          button.icon.classList.add("fa", "fa-step-backward");
          button.onClick = () => {
            let ext = viewer.getExtension("Autodesk.DocumentBrowser");
            ext.loadPrevModel();
          };
          button.setToolTip("Previous Model");
          group.addControl(button);

          button = new Autodesk.Viewing.UI.Button("nextButton");
          button.icon.classList.add("fa", "fa-step-forward");
          button.onClick = () => {
            let ext = viewer.getExtension("Autodesk.DocumentBrowser");
            ext.loadNextModel();
          };
          button.setToolTip("Next Model");
          group.addControl(button);
        }
      }

      Autodesk.Viewing.theExtensionManager.registerExtension('MyExtension', MyExtension);
    </script>
  </body>
</html>

 

Related Article