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

How to use ThingView Widget from Navigate to display CAD Model/Viewables in custom mashup- Concept

Highlighted
Level 12

How to use ThingView Widget from Navigate to display CAD Model/Viewables in custom mashup- Concept

I know that this issue , may be , seems to be more related to thingworx or navigate, but this is often a question which is related to models which are used in Studio and customers want to have some tool to view such models outside Vuforia Stuido and Vuforia View .

Another important point is that Vuforia Studio Preview, Navigate Thingview  and Creo View WebGL Toolkit used /are based on  the same thingview library.

 

The official statement of PTC here is that thingview widget, which is part from the Navigate extension is not supported for customized mashups and correct work is guaranteed  only as part of the navigate functionality. Therefore, there is no documentation provided for the customization of this widget and no technical support cases will be handled on address of related issues. Also the geometry file formats  supported by thingview are mainly the files supported by the Creo View application. All other file formats (which are not availalbe in the open dialog box of Creo View) are not supported -> e.g. glTF format. Of course, this can change in a future versions ->  therefore, please, check for future releases always the What's new docs. Actually the thingview allows  opening of some simple glTF files. But this is not working for every glTF file. Mostly there is a problem when we have geometry with high complexity. 

… Additional I want to pont that not supported does not mean is not allowed. So therefore, I want to provide here some Info in case that customers want to customize the thingview widgets at their own risk. (no bug fixing and no compatibility guaranteed for future Releases)

 

In this post I will introduce here only  the concept of such mashup /view and then in further posts will consider the different details for the sup points in the picture below. 

 

2019-02-01_15-27-35.gif

 

In the picture above, we have an example for such mashup where we have a different areas for the different functionality. The mashup in design /edit mode should looks like:

 

2019-02-01_15-23-05.gif

 

The mashup contains the following main areas(marked in the picture with callouts numbers ):

 

1.) Selector for the models. This is a list element widget which provide the possibility for the  selection of a particular model. This list is here based on Infotable returned by service. Here is an example how to implement such service:


2019-02-01_16-51-04.gif

 

For simplification reason the service contains here only 2 rows.

Here an example how to implement such service (javaScript code) :

 

 

var data = [
  {
    "FileName": "Machine-complete-CV.PVZ",
    "repository_link": "https://mrerot7o.studio-trial.thingworx.io:8443/Thingworx/FileRepositories/CAD-Files-Repository/CADFiles/Machine-complete-CV.PVZ",
    "json_bom": "/CADFiles/json_lists/Machine-complete-CV.PVZ-bomlist.json",
    "json_viewable_list": "/CADFiles/json_lists/Machine-complete-CV.PVZ-viewablelist.json",
    "json_viewable_stepList": "/CADFiles/json_lists/Machine-complete-CV.PVZ-viewableSteplist.json"
  },
  {
    "FileName": "worldcar-brake-multi-figure.pvz",
    "repository_link": "https://mrerot7o.studio-trial.thingworx.io:8443/Thingworx/FileRepositories/CAD-Files-Repository/CADFiles/worldcar-brake-multi-figure.pvz",
    "json_bom": "/CADFiles/json_lists/worldcar-brake-multi-figure.pvz-bomlist.json",
    "json_viewable_list": "/CADFiles/json_lists/worldcar-brake-multi-figure.pvz-viewablelist.json",
    "json_viewable_stepList": "/CADFiles/json_lists/worldcar-brake-multi-figure.pvz-viewableSteplist.json"
  }
];

var result = DataShapes.files_repository_source_shape.CreateValues();

for(var i =0;i<data.length;i++) {
 result.AddRow(data[i]);   
}

The return type of the service is InfoTable . For the defintion of the InfoTable we need a DataShape for the used fields definitions:

2019-02-04_16-26-49.gif

The list Widget ( callout 1.)  in the picture) has a binding to the thingview data.  When we select in the list widget a model this will call the services {(getViewableSteplist_arg_path(), getViewableSteplist_arg_path_viewablename()  and GetBomStruct_arg_path() } of the  CAD-Files-Repository (Repository Thing - means  a thing which uses the template FileRepository)  -> and will pass the arguments for the json files paths for bom , vieables and StepList .

 

2019-02-04_16-36-56.gif

The effect is that when we select a model in the listWidget this will update the mashup and will display only data related to this model. All models and Json Files in this example  are saved in the Repository "CAD-Files-Repository"

 

2019-02-04_17-07-34.gif

 

To upload data to the repository we can use the Fileupload widget. To display the data we can use the GetDirectory() and GetFileListingWithLinks() services of the repositroy thing. Here an example for tool mashup which could be used a tool to upload and display the data in the repository -as shown in the  picture above

 

2019-02-04_17-20-52.gif

 

2.) Model tree area (callout 2.). This will display the model tree of the assembly components. Requires a service returning an InfoTable.  - here an example the service {Things["CAD-Files-Repository"]. GetBomStruct_arg_path(the_json_path) }  is called and returns the folloiwng   output:

 

2019-02-01_17-06-05.gif

 

The the creation of the infoTable I used an json file - here in this example "worldcar-brake-multi-figure.pvz-viewableSteplist.json" (attached to this post). How to generate such file with Creo View WebGL toolkit is described in the community post (How to extract the components with properties from a pvz file)

The point how to create an InfoTable  from an  Json will be handled in an addtional post (Service for creating of Bom - and Viewable Lists from json files)

 

The  displays of the data we have in the tree widget he following settings:

 

2019-02-01_17-11-43.gif

 

3.) List area - it uses the same service but it is displayed in a grid twx widget. This will list the Bom as list of all components (uses also the service {Things["CAD-Files-Repository"]. GetBomStruct_arg_path(the_json_path) } )

 

2019-02-01_17-17-51.gif

In the mashup preview it will look like:

2019-02-04_17-41-16.gif

 

4.) Area for the selection of a viewable / Creo Illustrate Figures (callout 3 on the overview picture)

2019-02-04_19-38-02.gif

 

To  display the viewables correctly in thingview we require to have an service/data which is based on InfoTable with specific field definition.

 

2019-02-04_20-11-19.gif

 

We can bind the All Data of the service  (here : {Things["CAD-Files-Repository"]. getViewableList_arg_path(the_json_path) } ) to the Views property of the thingview widget.

Depending on the values of the filed HasAnimation and HasSequnece the buttons for playing of sequences and animation are shown or blanked (set the Visible property to true or false) 

 

2019-02-04_19-44-13.gif

 

How to define this service is described in the post  (Service for creating of Bom - and Viewable Lists from json files)

 

5.) Area for the display of the  sequence steps > data grid widget-> it displays datae  only if the current viewable is an sequence. Here example for the json step files related to models having 1 and  2 sequences. Here in this example the the file  (worldcar-brake-multi-figure.pvz-viewableSteplist.json)  is used

2019-02-05_09-56-27.gif

 

Here is an example of the mashup dipslay when a viewable contains a Sequnece

 

2019-02-05_10-07-34.gif

 

The same mashup in design/edit mode (below). We can bind the All Data of the service  (here : {Things["CAD-Files-Repository"]. getViewableSteplist__arg_path_viewablename(the_json_path, the_viewablename) } ) to the Data property of the grid  widget.

How to extract  a json file from the pvz model (e.g. worldcar-brake-multi-figure.pvz-viewableSteplist.json) and to define the service for it  e.g. getViewableSteplist_arg_path_viewablename - is shown in the post (Extracting the viewables and the seqnece steps information from a .pvz file for the usage in TWX).

 

2019-02-05_10-21-19.gif

 

 The display of the Step List is here only as info. Because there   is not possible to set the current /selected dataset in the grid here an additional List widget (callOut 6 ) is used.

 

6.) The area of the List widget is an area  which should be made invisible. It is used only to allow to set the selection in the grid element. We can bind the All Data of the service  (here : {Things["CAD-Files-Repository"].getViewableSteplist__arg_path_viewablename(the_json_path, the_viewablename) } ) to the Data property of the List  widget (callOut 6). The list element ( 6.) could be blanked because it is only used to set the selection of the  gird table (default  functionality of the Data selection )

How to extract  a json file from the pvz model (e.g. worldcar-brake-multi-figure.pvz-viewableSteplist.json) and to define the service for it  e.g. getViewableSteplist_arg_path_viewablename - is shown in the post(Extracting the viewables and the seqnece steps information from a .pvz file for the usage in TWX).

 

7.) This is the area with the panel of the thingview twx extension. The thingview widget is part of the windchill navigate module. If the extension is installed we can check in the Extension manager:

2019-02-05_11-01-14.gif

 

 

Announcements

Surveys are coming to the Vuforia Community!  Your feedback is valuable to us!  When prompted, please take our 60 second survey!