How to extract the components with properties from a pvz file

Yes

In the post “How to select model components in a 3d model without explicit definition of model Items” there is one point where we require a list of component items. Often we have the case where we get a Creo View .pvz file which was published by Creo Illustrate. In this case Creo Illustrate will do additional changes for the occurrence Id path so that if we have a bom list coming from Creo Parametric then this data will be not usable. So the question here is :

Is it possible to extract a bom list for any *.pvz files?

The answer is Yes. We can do this using the Creo View Toolkit API ( this is one possible option). Creo View API Toolkit consist of many different moduls : Java Toolkit , Web Toolkit (only Internet Explorer related) Office Toolkit and the new one introduced since 5.1 release module WebGL Toolkit. We can extract BOM list with Java Toolkit but it requires more complex programming environment. Therefore I think it is the most easily way to use Creo View WebGL toolkit

The Toolkit WebGl is based on the Thingview.js library. When we install Creo View Toolkit we will find the following directory structure:

In the web-application-examples directory we can find some sample files which could be a good introduction how to use this API. The documentation is the WebGLToolkitDevGuide_en.pdf and also in html(doxygen) in the documentation sub directory:

The CreoWebGL Toolkit requires a node.js environment. So when we want to start it we have first to start the Toolkit server:

>>>node http_server.js [port]

The port parameter is optional and if we do not use it then it takes by default 8080 :

The next step is to open the localhost:port/ ExtractBomPVZ.html which implements here our program

For example a simple version which will print the components with some properties to the chrome console could looks like:

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8" />
    <meta name="author" content="PTC">
    <title>Creo View WebGL Viewer</title>
</head>
<script src="js/ptc/thingview/thingview.js"></script>
<body style="height: 100%; margin: 0px">
  <div id="TITLE" style="width: 100%;height: 20%;border:2; float: left"></div>
  <div id="CreoViewWebGLDiv" style="width: 100%;height: 80%;border:0; float: left"></div>   
</body>
<script type="text/javascript">
    var thingview;
    var session;
    var model;
    var model1;
    var model2;
    var MODELPATH = "sample-data/thingview_test/Machine-complete-CV.PVZ";

    var MODELNAME = "";
    var global_number_generated = false;
    var BOM_LIST = [];
    var USE_LOG = false;

    var CUR_MODELPATH = getAllUrlParams().modpath ? decodeURIComponent(getAllUrlParams().modpath) : MODELPATH;
   
	document.getElementById('TITLE').innerHTML = "<h3>Extract Bom List </h3><hr><h4>"+CUR_MODELPATH+"</h4><hr>";
    window.onload = function() {
        //return;
        ThingView.init("js/ptc/thingview", function() { // ThingView should only be initialised once per frame
            
            BOM_LIST = new Array();
            console.log("Creo View WebGL Viewer is now initialised");
            global_number_generated = false;
            GLOBAL_COUNT = 0;
            session = ThingView.CreateSession("CreoViewWebGLDiv");
 
             //----------------------------------
            model = session.MakeModel();

            ////================= Selecton Call back function definition

            model.SetSelectionCallback(function(type, si, idPath, selected, selType) {
         
                var JSON_OBJ = new Object;
                var shapeInst = session.GetShapeInstanceFromIdPath(idPath)
                var color = shapeInst.GetColor()
                var instId = shapeInst.GetIdPath();
                //the shape instance  instId now contains a prefix "SI_" which is bug
                //or at least not wanted - here remove it
                var instId_corrected = instId.replace(/SI_/g, '');
                var instIdPath = shapeInst.GetInstanceIdPath();
                console.log("idPath=" + idPath) //contains the id path e.g /1/23/3  
                var description = model.GetPropertyValue(idPath, "PROE Parameters", "DESCRIPTION")
                if (!(description == null)) console.log("description=" + description);
                else desciption = "---";

                var sBOMPath = instId;
                var sBOMPath = instId_corrected; //replaced with the corrected string
                var sBOMIDPath = instIdPath;
                var sBOMID = sBOMIDPath.substring(sBOMIDPath.lastIndexOf("/") + 1)
                var sBOMName = sBOMPath.substring(sBOMPath.lastIndexOf("/") + 1)
                var sBOMDepth = instIdPath.split("/").length - 1;
     
               {
                  
                    console.log("NAME=part&VALUE=" + sBOMName);
                    console.log("NAME=sBOMDepth&VALUE=" + sBOMDepth);
                    console.log("NAME=sBOMID &VALUE=" + sBOMID);
                    console.log("NAME=sBOMIDPath&VALUE=" + sBOMIDPath);
                    console.log("NAME=PARTPATH&VALUE=" + sBOMName);
                    console.log("NAME=DESCRIPTION&VALUE=" + description);
					console.warn("color (a=" + color.a + " b=" + color.b + " g=" + color.g + " r=" + color.r + ")");
                }        
            });

            ////==================LoadFromURL with Callback
           model.LoadFromURLWithCallback(CUR_MODELPATH, true, true, false, function(success, isStructure, errorStack) {
           console.log("Model(2) LoadFromURLWithCallback - success: " + success + ", isStructure: " + isStructure);
                if (success) {
				  
                    ////=============
                    session.SelectAllInstances()
                    var num = session.GetSelectionCount()
                    console.log("Number of selections =" + num)
                                         
                }
            });
            ///model load from URL funciton end
            /////////////
        }); // ThingView.init( ) end
    }; //window onload function end

    
    //// URL parameter handling found in the WWW Overflow and works quite good
    function getAllUrlParams(url) {
        // get query string from url (optional) or window
        var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

        // we'll store the parameters here
        var obj = {};

        // if query string exists
        if (queryString) {

            // stuff after # is not part of query string, so get rid of it
            queryString = queryString.split('#')[0];

            // split our query string into its component parts
            var arr = queryString.split('&');

            for (var i = 0; i < arr.length; i++) {
                // separate the keys and the values
                var a = arr[i].split('=');

                // set parameter name and value (use 'true' if empty)
                var paramName = a[0];
                var paramValue = typeof(a[1]) === 'undefined' ? true : a[1];

                // (optional) keep case consistent
                paramName = paramName.toLowerCase();
                if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

                // if the paramName ends with square brackets, e.g. colors[] or colors[2]
                if (paramName.match(/\[(\d+)?\]$/)) {

                    // create key if it doesn't exist
                    var key = paramName.replace(/\[(\d+)?\]/, '');
                    if (!obj[key]) obj[key] = [];

                    // if it's an indexed array e.g. colors[2]
                    if (paramName.match(/\[\d+\]$/)) {
                        // get the index value and add the entry at the appropriate position
                        var index = /\[(\d+)\]/.exec(paramName)[1];
                        obj[key][index] = paramValue;
                    } else {
                        // otherwise add the value to the end of the array
                        obj[key].push(paramValue);
                    }
                } else {
                    // we're dealing with a string
                    if (!obj[paramName]) {
                        // if it doesn't exist, create property
                        obj[paramName] = paramValue;
                    } else if (obj[paramName] && typeof obj[paramName] === 'string') {
                        // if property does exist and it's a string, convert it to an array
                        obj[paramName] = [obj[paramName]];
                        obj[paramName].push(paramValue);
                    } else {
                        // otherwise add the property
                        obj[paramName].push(paramValue);
                    }
                }
            }
        }

        return obj;
    }
</script>
</html>

When we start the ExtractBomPVZ.html and open the chrome debugging console (Ctrl-Shift-I)

We can call the Creo View WebGl Toolkit program above in chrome with a parameter which will specify a path of the .pvz model –> example:

http://localhost:8080/ExtractBomPVZ.html?modpath=sample-data/Brake/worldcar-brake-multi-figure.pvz

The program will selects all visible components and will print to the console the idPah, partname , color etc…

One problem we have here is that we could not print it to a local file because of the security restriction of the browser. A possible solution is to send the data back to the server e.g. as Json object and save the data to the server root directory. Later we can download these file if required e.g. calling the json:

http://localhost:8080/worldcar-brake-multi-figure.pvz-bomlist.json

To implement the creation of the json file we need to change the CreoWeb.Toolkit html file. So our program should send data to the server. Additionaly we also need to modify/extend the server - http.createServer() callback function to handle also the received data.

Also as next step we will extend the Creo View Toolkit program file by adding a XMLHttpRequest() . This request will send the modelname and the generated json object to the http server

The call of the Toolkit html file with a start parameter was here directly in chrome via the URL but we can also call it from a javascript or other html file:

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8" />
    <meta name="author" content="PTC">
    <title>Creo View WebGL Viewer</title>
</head>
<script>

function callBomPVZ(path)
{
//window.location.href = "http://localhost:8080/ExtractBomPVZ.html?modpath="+path;
var myWindow = window.open("http://localhost:8080/ExtractBomPVZ.html?modpath="+path,  "_blank", "height=600,width=500",false);

//setTimeout(function(){  browser.refresh(); }, 1500);
}
</script>

<body>
<hr><p>
<button type="button" onclick="callBomPVZ('sample-data/thingview_test/Machine-complete-CV.PVZ')">callBomPVZ:: Machine-complete-CV.PVZ</button>
<hr><p><hr>
<button type="button" onclick="callBomPVZ('sample-data/Brake/worldcar-brake-multi-figure.pvz')">callBomPVZ:: worldcar-brake-multi-figure.pvz</button>
</body>

How to extract the components with properties from a pvz file

Best Practices