Implementing a Preview in your Applications

There are many applications whose workflow would benefit from being able to see a preview of a Part or Assembly or Drawing prior to selecting it for use. Too often I hear about programmers simply making do with a simple image. This article shows you how PTC have leveraged web-programming to provide the embedded browsers preview functionality. And then illustrates how you can also use the exact same code to have the same functionality in your applications.

Take a look in < CREO INSTALL > / Creo 3.0 / M040 / Common Files/ text / PVX. Here you'll find a number of files to have fun exploring.

Most importantly for our quest of leveraging PVX for preview is pvlaunch.js. This JavaScript file is the one you need to reference to call up a thumbnail viewable of your files of the functions.

If you take a look at pv_viewable.html in the same location you can easily read through it to see how completely but have a look for the following.

 

ProductView (see pv_viewable.html)

This function is how a handle to a Creo View controls is created. If you dive into the code in the pvlaunch.js file where 'ProductView' is defined you'll see if can handle non-IE browsers.

 

Class ID's (see pvlaunch.js)

This code builds a snippet of HTML that will eventually form the object on the webpage that is your preview component. PTC's code simply builds some HTML and displays it to the user, exactly like we do in any Simple Automation Application.

 

Find the Control in your registry (search Registry for the Class ID)

In order to find out what's in that control we'll first have to track down what it's called. Searching the registry can find that for you.

 

Find the API Using Object Browser in VBA tools

Once you've added the control to e.g. Excels References, you can then inspect the API using the Object Browser. Where you get confused then go read the reference document from www.ptc.com, http://support.ptc.com/WCMS/files/156052/en/creoviewM030WebToolkitDevGuide.pdf

 

Try it out for yourself

<HTML>
<HEAD>
<TITLE>Static Use of PVX</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JAVASCRIPT" SRC="pvlaunch.js"></SCRIPT>
<script>
var myPvApi;
var fname = "d:/temp/link_a.prt.1";
SetPvBaseUrl("");

function loadComplete()
{
    myPvApi.SetBackgroundColor("0xeef0f1:0xfbfbfc");
}
try
{
	myPvApi = ProductView("",fname,"","","","","",
		"gnomon=\"false\" navigation=\"proe\" 
		watermarks=\"false\" flyto=\"-1\"");
	myPvApi.OnLoadComplete=loadComplete;
	
	var PVCtrl = document.getElementById(myPvApi.runpview);
	PVCtrl.parentNode.style.width="200px";
	PVCtrl.parentNode.style.height="200px";
}
catch(e)
{
	alert(e);
}
</script>
</BODY>
</HTML>

See right for an example, change the value for the fname variable to make it work for you. The key to making it easy is to copy your Creo installations pvlaunch.js to the correct location in your webserver.

Static HTML page with PVX in it

Now as i've made clear in my book, JavaScript and the web are meant to be dynamic. Dynamic means we can start to change the behaviour of our object. Here's a selection of some interesting methods as found by reading down the ProductView ActiveX control API.

  • LoadModel(*string* osfilepath)
  • GetCurrentSheet()
  • GetNumberOfSheets()
  • SetCurrentSheet(*number* sheet)
  • ZoomToAll(*number* Delay)
  • SetRenderMode(*string* mode);
  •  

    <HTML>
    <HEAD>
    <TITLE>Dynamic Use of PVX</TITLE>
    </HEAD>
    <BODY>
    <SCRIPT language="JAVASCRIPT" SRC="pvlaunch.js"></SCRIPT>
    <script>
    var myPvApi;
    var fname = "d:/temp/link_a.prt.1";
    SetPvBaseUrl("");
    
    function loadComplete()
    {
        myPvApi.SetBackgroundColor("0xeef0f1:0xfbfbfc");
    }
    try
    {
    	myPvApi = ProductView("",fname,"","","","","",
    		"gnomon=\"false\" navigation=\"proe\" 
    		watermarks=\"false\" flyto=\"-1\"");
    	myPvApi.OnLoadComplete=loadComplete;
    	
    	var PVCtrl = document.getElementById(myPvApi.runpview);
    	PVCtrl.parentNode.style.width="200px";
    	PVCtrl.parentNode.style.height="200px";
    }
    catch(e)
    {
    	alert(e);
    }
    
    function SetFileName(fileName)
    {
    	myPvApi.LoadModel(fileName);
    }
    
    function Refit()
    {
    	myPvApi.ZoomToAll(5); //5 Delay
    }
    
    function SetRenderStyle(Mode)
    {
    	//swe, shade, wireframe, mesh, hlr
    	if (Mode=="shade_with_edges")
    		myPvApi.SetRenderMode('swe');
    }
    
    </SCRIPT>
    <BR><INPUT type=button value="SetFileName" 
    	onclick="SetFileName('d:/temp/shaft.prt.1')">
    <BR><INPUT type=button value="Refit" 
    	onclick="Refit()">
    <BR><INPUT type=button value="SetRenderStyle" 
    	onclick="SetRenderStyle('shade_with_edges')">
    </BODY>
    </HTML>
    

    Dynamically Altering PVX

    The code shown right demonstrates how JavaScript code can be used to control the PVX object. Try it out for yourself to see the result, alter the arguments presented to the functions to see what impact they make.

     

    setFileName(fileName)

    Method resets the file displayed in the viewable. The result (in our example) is that shaft.prt.1 is displayed rather than link_a.prt.1.

     

    refit()

    Method resets the view so that the object is displayed at default scale in the default orientation.

     

    setRenderStyle(Mode)

    Method sets the Render Style according to Mode:

    In our example the result looks like this.

     

    getCurrentSheet(), setCurrentSheet(sheet)

    It is left as an exercise for you to modify the code to try out getCurrentSheet and setCurrentSheet respectively.

     

    Conclusion

    Leveraging other components to rapidly assemble a functional application is an essential part of Simple Automation. While PTC doesn't necessarily publish an API to use CreoView components, it is there for all applications to make use of. The article focused on code and procedures to uncover the API on the windows platform.

    Please also note that PTC ships a fully public API for CreoView. Where this hacking is perfectly acceptable for simple preview functionality of Creo data in likely a controlled enviornment like perhaps your Creo Userbase, the fuller Creo View API's are provided with wider support. Contact PTC for more information.