Is there a way to add other node modules to Vuforia Studio?
Solved! Go to Solution.
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://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 @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://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?
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