Question

Я работал над веб-сайтом, включающим программу просмотра autodesk-forge (более подробную информацию можно увидеть в моих прошлых вопросах). Я успешно выполнил множество функций программы просмотра autodesk-forge в стандартном файле javascript (. js). Эти функции включают отображение средства просмотра и выделение определенной части при нажатии внешней кнопки. В настоящее время у меня есть главная домашняя страница html / php, на которой я включил свой javascript файл со всеми моими функциями кузницы, используя <script src="MyForgeFunctions.js"></script>. Доступ к этим функциям осуществляется через кнопку, которая успешно отображает средство просмотра на странице html. К моей основной странице php / html была добавлена еще одна страница html / php через ссылку iframe html (<iframe src="URL.php"></iframe>). На моей домашней странице отображаются основные машины, которые мы производим, а на встроенной странице php / html отображаются все станции внутри машины. Я также включил MyForgeFunctions. js на эту вторую страницу php / html. Из-за того, как настроен веб-сайт, мне нужно иметь доступ к программе просмотра на обеих веб-страницах. Однако, когда я пытаюсь получить доступ к программе просмотра со второй страницы html, я получаю сообщение о том, что программа просмотра не определена. Ниже мой код из MyForgeFunctions. js.

var ext = '';
var dim = '';
var assemblyname = '';

function getAssemblyName(){
assemblyname = sessionStorage.getItem("assemblyName");
//var ext = partname.substr(partname.lastIndexOf('.'));
ext = assemblyname.split('.');
dim = ext[0] + ':1';
console.log(assemblyname);
console.log(dim);
if (dim !== ''){
    isolateSelected();
}
}



//function to get part name from __MachineParts.php
var partname = '';
var extension = '';
var namewithoutextension = '';
function getPartName(){
partname = sessionStorage.getItem("partName");
//var ext = partname.substr(partname.lastIndexOf('.'));
extension = partname.split('.');
namewithoutextension = extension[0] + ':1'
console.log(partname);
console.log(namewithoutextension);
if (namewithoutextension !== ''){
    isolateSelectedPart();
}
}



/*******************************************************************************
 * 
 * AUTODESK FORGE VIEWER CODE (HTTP REQUESTS)
 * 
 *******************************************************************************/
//VARIABLE DECLARATION

var code = '';
var access_token = '';
const hub = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx';
const project ='xxxxxxxxxxxxxxxxxxxxxxxxxxx';
const folder='xxxxxxxxxxxxxxxxxxxxxxxxx';
const item = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
var itemid = '';
var urn = '';
var urn2 = '';

//allow the program to view data from autodesk
function authorize(){
    window.location.href = "https://developer.api.autodesk.com/authentication/v1/authorize?response_type=code&client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&scope=data:read data:write bucket:read viewables:read bucket:create data:create";
}

//grab the code from the url
function getCode(){
    const querystring = window.location.search;
   // console.log(querystring);
    const urlParams = new URLSearchParams(querystring);
    code = urlParams.get('code');
   // console.log(code);
}
//call the function to get the code right away, and obtain a token
getCode();
getToken();

//function to obtain access token
function getToken(){
    $.ajax({
    method: 'POST',
    url: 'https://developer.api.autodesk.com/authentication/v1/gettoken',
    headers: {
        'Content-Type':'application/x-www-form-urlencoded'
    },
    data:'client_id=dm2VLfnwJ6rYHKPAg7dG6l9yVbBQPGlH&client_secret=HRMpOPusLhsVoIMk&grant_type=authorization_code&code=' + code + '&redirect_uri=http://team/__MachineViewerMV.php',

    success:function(response){
       // console.log(response);
        access_token = response.access_token;
        console.log(access_token);
    }
})
}

//Grab desired file id from project folder
function getItem(){
    $.ajax({
        method:'GET',
        url: 'https://developer.api.autodesk.com/data/v1/projects/' + project + '/folders/' + item + '/contents',
        headers:{
            Authorization:'Bearer ' + access_token
        },
    /*  beforeSend:function(before){
            if(access_token !== '' && viewer !==''){
            destroyViewer();}
        },*/
        success:function(response){
           //console.log(response);
           // folder = response.data[0].id;
           // console.log(folder);
         //  itemid = response.data[0].id;
           //console.log(itemid);
           console.log(response);

           for (var i = 0; i<response.data.length; i++){
               //console.log(response.data[i].attributes.displayName);
               if(response.data[i].attributes.displayName == fileName){
                   //console.log('hooray');
                  itemid = response.data[i].id;
                   console.log(itemid);
                   getVersion();
                   break;
               }
               else if (response.data[i].attributes.displayName !== fileName){
                   itemid = '';
               }
           }

        },
        error:function(error){
            authorize();
        }
    })
}

function get2dItem(){
    $.ajax({
        method:'GET',
        url: 'https://developer.api.autodesk.com/data/v1/projects/' + project + '/folders/' + item + '/contents',
        headers:{
            Authorization:'Bearer ' + access_token
        },
        /*beforeSend:function(before){
            if(access_token !== '' && viewer !== ''){
            destroyViewer();}
        },*/
        success:function(response){
           //console.log(response);
           // folder = response.data[0].id;
           // console.log(folder);
         //  itemid = response.data[0].id;
           //console.log(itemid);
           console.log(response);

           for (var i = 0; i<response.data.length; i++){
               //console.log(response.data[i].attributes.displayName);
               if(response.data[i].attributes.displayName == fileName2d){
                   //console.log('hooray');
                  itemid = response.data[i].id;
                   console.log(itemid);
                   getVersion();
                   break;
               }
               else if (response.data[i].attributes.displayName !== fileName2d){
                   itemid = '';
               }
           }

        },
        error:function(error){
            authorize();
        }
    })
}


//get version of the file using its id
function getVersion(){
    $.ajax({
        method:'GET',
        url: 'https://developer.api.autodesk.com/data/v1/projects/' + project + '/items/' + itemid + '/versions',
        headers:{
            Authorization:'Bearer ' + access_token
        },
        success:function(response){
           //console.log(response);
           urn = btoa(response.data[0].relationships.storage.data.id);
           console.log(urn);
           translateToSVF();
        }
    })
}

function translateToSVF(){
    $.ajax({
        method: 'POST',
        url:"https://developer.api.autodesk.com/modelderivative/v2/designdata/job",

        headers:{
            "content-type": "application/json",
            Authorization: "Bearer " + access_token
        },
        data:JSON.stringify({
            "input":{ "urn":urn

            },
            "output": {
     "formats": [
       {
         "type": "svf",
         "views": [
           "2d",
           "3d"
         ]
       }
     ]
   }
        }),
        success:function(response){
          //  console.log(response);
            urn2 = response.urn;
            console.log(urn2);
            checkStatus();
        }
    })
}

function checkStatus(){
    $.ajax({
        method: 'GET',
        url: "https://developer.api.autodesk.com/modelderivative/v2/designdata/" + urn2 + "/manifest",
        headers:{
            Authorization: "Bearer " + access_token
        },
        success: function(response){
            console.log(response);
            if (response.progress == 'complete'){
               displayViewer();
            }
            else if (response.progress !== 'complete'){
                alert('File Still Uploading, Press the Display Button Again!');
            }
            }

    })
}

//function to get list of viewables\
var guid = '';
function getViewable(){
    $.ajax({
        method:'GET',
        headers:{
            Authorization: "Bearer " + access_token
        },
        url: 'https://developer.api.autodesk.com/modelderivative/v2/designdata/' + urn2 + '/metadata',
    success:function(response){
        console.log(response);
        guid = response.data.metadata[0].guid;
        console.log(guid);
    }

    })
}

//funciton to get the list of items within a model
function getTree(){
    $.ajax({
        method: 'GET',
        headers:{
            Authorization: "Bearer " + access_token
        },
        url:'https://developer.api.autodesk.com/modelderivative/v2/designdata/' + urn2 + '/metadata/' + guid + '/properties',
        success:function(response){
            console.log(response);
        }
    })
}



/**********************************************************************************
 * 
 * FUNCTION TO DISPLAY THE VIEWER IN THE HTML PAGE
 * 
 **********************************************************************************/

 var viewer;

 function displayViewer(){
    //var viewer;
var options = {
    env: 'AutodeskProduction',
    api: 'derivativeV2',  // for models uploaded to EMEA change this option to 'derivativeV2_EU'
    getAccessToken: function(onTokenReady) {
        var token = access_token;
        console.log(token);
        var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
        onTokenReady(token, timeInSeconds);
    }
};

Autodesk.Viewing.Initializer(options, function() {

    var htmlDiv = document.getElementById('forgeViewer');
    viewer = new Autodesk.Viewing.Private.GuiViewer3D(htmlDiv);
    var startedCode = viewer.start();
   // sessionStorage.setItem("viewer", viewer);
    if (startedCode > 0) {
        console.error('Failed to create a Viewer: WebGL not supported.');
        return;
    }

    console.log('Initialization complete, loading a model next...');

});
var documentId = 'urn:'+urn2;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);

function onDocumentLoadSuccess(viewerDocument) {
    var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(viewerDocument, defaultModel);
    console.log(viewer);


}

function onDocumentLoadFailure() {
    console.error('Failed fetching Forge manifest');
}

}

//function to hide the viewer
function destroyViewer(){
    console.log(viewer);
    viewer.finish();
viewer = null;
Autodesk.Viewing.shutdown();
}

/*****************************************************************************
 * FUNCTIONS TO MODIFY THE VIEWER TO ZOOM INTO THE CORRECT PART/ASSEMBLY
 */



function isolateSelected(){
    console.log(dim);
    console.log(viewer);
    viewer.search(dim, function(dbIds) {
   // viewer.search('"' + 'M-109408 FOLDING PLOUGH:2' + '"', function(dbIds) {
        console.log(dbIds.length);
        getSubset(dbIds, 'label', dim, function(dbIds) {
       // getSubset(dbIds, 'label', 'M-109408 FOLDING PLOUGH:2', function(dbIds) {
       // getSubset(dbIds, property.name, 'M-54439 POST TUBING:1', function(dbIds) {
            //getSubset(dbIds, property.name, property.value, function(dbIds){
            var it = viewer.model.getData().instanceTree;
            //console.log(it);
           for (i = 0; i<dbIds.length; i++){
               var namepart = it.getNodeName(dbIds[i]);
               if (namepart !== undefined){
            console.log(dbIds);
            console.log(namepart);}}
          /*  for (i = 121; i<381;i++){
                var dbId = i;
            var it = NOP_VIEWER.model.getData().instanceTree;
            var name = it.getNodeName(dbId);
            console.log(name);}*/
            viewer.isolate(dbIds)
           viewer.select(dbIds);
            viewer.utilities.fitToView();
        })
    }, function(error) {})
}

function isolateSelectedPart(){
    console.log(namewithoutextension);
    viewer.search(namewithoutextension, function(dbIds) {
   // viewer.search('"' + 'M-109408 FOLDING PLOUGH:2' + '"', function(dbIds) {
        console.log(dbIds.length);
        getSubset(dbIds, 'label', namewithoutextension, function(dbIds) {
       // getSubset(dbIds, 'label', 'M-109408 FOLDING PLOUGH:2', function(dbIds) {
       // getSubset(dbIds, property.name, 'M-54439 POST TUBING:1', function(dbIds) {
            //getSubset(dbIds, property.name, property.value, function(dbIds){
            var it = viewer.model.getData().instanceTree;
            //console.log(it);
           for (i = 0; i<dbIds.length; i++){
               var namepart = it.getNodeName(dbIds[i]);
               if (namepart !== undefined){
            console.log(dbIds);
            console.log(namepart);}}
          /*  for (i = 121; i<381;i++){
                var dbId = i;
            var it = NOP_VIEWER.model.getData().instanceTree;
            var name = it.getNodeName(dbId);
            console.log(name);}*/
            viewer.isolate(dbIds)
           viewer.select(dbIds);
            viewer.utilities.fitToView();
        })
    }, function(error) {})
}

//function to find the dbid of the part/assembly
function getSubset(dbIds, name, value, callback) {
    console.log("getSubset, dbIds.length before = " + dbIds.length)
    viewer.model.getBulkProperties(dbIds, {
        propFilter: [name],
        ignoreHidden: true
    }, function(data) {
        var newDbIds = []
        for (var key in data) {
            var item = data[key]
           // console.log(item.properties);
            if (item.properties[0].displayValue === value) {
                newDbIds.push(item.dbId)
            }
        }

        console.log("getSubset, dbIds.length after = " + newDbIds.length)

        callback(newDbIds)

    }, function(error) {})
}

Из-за того, как настроена веб-страница, когда мне нужно было использовать переменную со второй веб-страницы в первой, я использовал sessionStorage.getItem и sessionStorage.setItem. Я также сделал простую функцию внутри MyForgeFunctions. js:

function checkViewer(){
console.log(viewer);
}

Затем я включил кнопку на обеих html страницах для выполнения функции с событием onclick. Когда функция запускается с первой / домашней страницы html, отображается следующее: T {globalManager: e, clientContainer: div#forgeViewer, container: div.adsk-viewing-viewer.notouch.dark-theme.quality-text, config: {…}, contextMenu: o, …}. Это нормально для средства просмотра, но когда функция выполняется со второй html страницы, средство просмотра не определено. Мы будем очень благодарны за любую помощь относительно того, почему это происходит, или любые решения. Ура!

matthew-vidovic · Answer 1 · 07 июля 2020

Из iframe, чтобы получить доступ к средству просмотра на главной веб-странице, мне пришлось использовать (parent.viewer).

Доступ к Forge Viewer из двух HTML файлов

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Доступ к Forge Viewer из двух HTML файлов

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы