cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X

add node modules

GianVal
15-Moonstone

add node modules

Is there a way to add other node modules to Vuforia Studio?

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @GianVal ,

Regarding to your question if there a way to add other node modules to Vuforia Studio – currently is the answer , so far I know there is no supported and documented way , or at least there is no supported way to do this. Ok , I think to add node.js functionality in to the browser – and to be able to call it in preview this should be in generally possible. For this I do not think that this will be a problem so we can follow some techniques as mentioned in the post:

https://stackoverflow.com/questions/49562978/how-to-use-npm-modules-in-browser-is-possible-to-use-them-even-in-local-pc

https://github.com/browserify/browserify

https://www.techiediaries.com/how-to-bring-node-js-modules-to-the-browser/

The question if your Project work   in the  chrome browser in preview mode, but I doubt that will make sense on mobile device when the project is called on a mobile device if this environment does not installed node.js or respectively the desired node.js module what is required. Because it means that the device should also need a mobile node.js. So seem that in principle is possible https://stackoverflow.com/questions/23809267/node-js-npm-on-android

 

According PTC development team in generally to have the availably to add node.js module to Studio is possible but required additional  implementation to  the Studio environment and respectively should be documented . So the Vuforia  Studio currently used node.js -there we could installed any modules, but they will be not available on the mobile platform so far . Currently this is a request reported to PTC and reported as Internal Ticket VTS-425 -> Statement of the dev team is

===================================================

will be added to the backlog but we don’t have any plans to support this in the next time

===================================================

Possibly, someone who did this task. could share here his/her experience

In generally we can add any js libs to Studio /for Prevew and Mobile devices /so far the code is not platform specific – then it will work on all paltforms /or there are some platform specific logic where only a specific code will be executed when a platform is detected.

When you add you javascript lib to Studio folder (e.g. the Upload/js folder) so you can call it

 

 

 //---------------Loading the API----------------------- 
$scope.loadScriptEventCallback = function (fname) {
  var ext =/^.+\.([^.]+)$/.exec(fname); 
                 if(ext == null) {console.error("error checking extension!");return;}
  return new Promise((resolve, reject) => {
  if(ext[1]=='js')
     { console.info("lib:"+ext[0]+" is javascript");
       var head = document.head || document.getElementsByTagName('head')[0],
       script = document.createElement('script');
       script.async = true; script.onload = resolve;
       script.onerror = reject; script.type = 'text/javascript';
       script.src=fname;  head.appendChild(script); } 
    else if(ext[1]=='css'){ console.info("lib:"+ext[0]+" is style CSS");
        var head = document.head || document.getElementsByTagName('head')[0],
       link = document.createElement('link');
       link.async = true; link.onload = resolve;
       link.onerror = reject; link.type = 'text/css';link.rel = 'stylesheet';
       link.href = fname;                   
       link.media = 'all';
       head.appendChild(link);
        }//else
  });//promise
}
//////////////////////////////////////////
//...
//and load the js in the code 
//....
// try to load js
 $scope.loadScriptEventCallback("app/resources/Uploaded/js/externalJS.js").then(
      function() { console.log("eloadScriptEventCallback loaded js lib successfully") ; 
             setMyScope($scope); }, //resolved
     function() { console.log("error for when loading the js lib module");} ); //reject
  //try to load css
  $scope.loadScriptEventCallback("app/resources/Uploaded/js/test.css").then(
      function() { console.log("eloadScriptEventCallback loaded css lib successfully");}, //resolved
     function() { console.log("error for when loading the css lib module");} ); //reject
  

 

 

View solution in original post

3 REPLIES 3

Hi @GianVal ,

Regarding to your question if there a way to add other node modules to Vuforia Studio – currently is the answer , so far I know there is no supported and documented way , or at least there is no supported way to do this. Ok , I think to add node.js functionality in to the browser – and to be able to call it in preview this should be in generally possible. For this I do not think that this will be a problem so we can follow some techniques as mentioned in the post:

https://stackoverflow.com/questions/49562978/how-to-use-npm-modules-in-browser-is-possible-to-use-them-even-in-local-pc

https://github.com/browserify/browserify

https://www.techiediaries.com/how-to-bring-node-js-modules-to-the-browser/

The question if your Project work   in the  chrome browser in preview mode, but I doubt that will make sense on mobile device when the project is called on a mobile device if this environment does not installed node.js or respectively the desired node.js module what is required. Because it means that the device should also need a mobile node.js. So seem that in principle is possible https://stackoverflow.com/questions/23809267/node-js-npm-on-android

 

According PTC development team in generally to have the availably to add node.js module to Studio is possible but required additional  implementation to  the Studio environment and respectively should be documented . So the Vuforia  Studio currently used node.js -there we could installed any modules, but they will be not available on the mobile platform so far . Currently this is a request reported to PTC and reported as Internal Ticket VTS-425 -> Statement of the dev team is

===================================================

will be added to the backlog but we don’t have any plans to support this in the next time

===================================================

Possibly, someone who did this task. could share here his/her experience

In generally we can add any js libs to Studio /for Prevew and Mobile devices /so far the code is not platform specific – then it will work on all paltforms /or there are some platform specific logic where only a specific code will be executed when a platform is detected.

When you add you javascript lib to Studio folder (e.g. the Upload/js folder) so you can call it

 

 

 //---------------Loading the API----------------------- 
$scope.loadScriptEventCallback = function (fname) {
  var ext =/^.+\.([^.]+)$/.exec(fname); 
                 if(ext == null) {console.error("error checking extension!");return;}
  return new Promise((resolve, reject) => {
  if(ext[1]=='js')
     { console.info("lib:"+ext[0]+" is javascript");
       var head = document.head || document.getElementsByTagName('head')[0],
       script = document.createElement('script');
       script.async = true; script.onload = resolve;
       script.onerror = reject; script.type = 'text/javascript';
       script.src=fname;  head.appendChild(script); } 
    else if(ext[1]=='css'){ console.info("lib:"+ext[0]+" is style CSS");
        var head = document.head || document.getElementsByTagName('head')[0],
       link = document.createElement('link');
       link.async = true; link.onload = resolve;
       link.onerror = reject; link.type = 'text/css';link.rel = 'stylesheet';
       link.href = fname;                   
       link.media = 'all';
       head.appendChild(link);
        }//else
  });//promise
}
//////////////////////////////////////////
//...
//and load the js in the code 
//....
// try to load js
 $scope.loadScriptEventCallback("app/resources/Uploaded/js/externalJS.js").then(
      function() { console.log("eloadScriptEventCallback loaded js lib successfully") ; 
             setMyScope($scope); }, //resolved
     function() { console.log("error for when loading the js lib module");} ); //reject
  //try to load css
  $scope.loadScriptEventCallback("app/resources/Uploaded/js/test.css").then(
      function() { console.log("eloadScriptEventCallback loaded css lib successfully");}, //resolved
     function() { console.log("error for when loading the css lib module");} ); //reject
  

 

 

Hi, is there any news regarding the integration of external node js modules in the Vuforia Studio backend?

bsmay
4-Participant
(To:GianVal)

Hi, we managed to add "node modules" to our vuforia studio project. It is not a supported way, but it works ;). By node modules, I talk about npm packages, which are designed to run in browser (for example https://www.npmjs.com/package/html2canvas) and not npm packages which are designed to run in node environment (like file reading). In order to get this running, you have to "convert" the vuforia studio project into a npm package, by adding package.json. Then you can use webpack, to bundle your source files into a js library and then call it from your Home.js

Top Tags