Vuforia Studio and Chalk Tech Tips

In this article  I want to consider the question how to   define a  TWX service, which could create   a  Bom and Viewable Lists from  json files. This will be very helpful option when we want to display some CreoView data in  Thingview.   How to extract BOM and viewable data form a Creo View /Illustrate *.pvz file is shown in the post "How to extract the components with properties from a pvz file".   In this example the json files are saved already  in a thingworx repository (means a thing form template FileRepostiroy) e.g.  "CAD-Files-Repository" :   1.)Create a service for the BOM List /InfoTable                 edit the CAD-Files-Repository thing and create a new service named  "GetBomStruct_arg_path" set  the BaseType : INFOTABLE . Set the DataShape property of the service - > here to BomListStuct -> this datashape need to be created  first . It should have the following Fields / property (all String type):                               create a service input parameter "the_json_path". Using this parameter we can past the repository path to the service edit the java script . We can past the following script (see the comments in the script area) var params = { path: the_json_path /* STRING */ // path it set to the input argument // example for such setting value // --> "/json_lists/Machine-complete-CV.PVZ-bomlist.json" var Content = Things["CAD-Files-Repository"].LoadJSON(params); //This will call the method LoadJSON(params) of the thing CAD-File-Reposistory var params1 = { infoTableName: undefined /* STRING */, dataShapeName: "BomListStruct" /* DATASHAPENAME */ }; // result: INFOTABLE var jsonTable = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params1); var result = DataShapes.ThingviewBomData.CreateValues(); // working fine for(i in Content.array){ jsonTable.AddRow({Part:Content.array[i].part, Description:Content.array[i].description, sBOMDepth:Content.array[i].sBOMDepth, sBOMID:Content.array[i].sBOMID, sBOMIDPath:Content.array[i].sBOMIDPath, sBOMName:Content.array[i].sBOMName, sBOMPath:Content.array[i].sBOMPath, path:Content.array[i].sBOMIDPath, parentPath:Content.array[i].sBOMIDPath.substring(0,Content.array[i].sBOMIDPath.lastIndexOf('/')) }); } result = jsonTable;   The parentPath  infoTable field is required for Tree Widget  to display the BOM list as tree The following code:   for(i in Content.array) { jsonTable.AddRow(Content.array[i]);}   the  code above will transfer  1 to 1  all  fields defined  in the json file with data into  infoTable fields. In this case  is not used because we have different mapping for "parentPath" -> it is new in the output InfoTable and is not contained by the json file. Test the  service:     2.)Create a service for the BOM List /InfoTable (steps are similar to 1.) edit the CAD-Files-Repository thing and create a new service named  "getViewableList_arg_path" set  the BaseType : INFOTABLE . Set the DataShape property of the service - > here to viewablelist_new -> this datashape need to be created  first . It should have the following Fields / property (all String type)     Create a service input parameter "the_json_path". Using this parameter we can past the repository path to the service Edit the java script . We can past the following script (see the comments in the script area):   var params = { //path: "/json_lists/Machine-complete-CV.PVZ-viewablelist.json" /* STRING */ path: the_json_path /* STRING */ }; var Content = Things["CAD-Files-Repository"].LoadJSON(params); var params1 = { infoTableName: undefined /* STRING */, dataShapeName: "viewablelist_new" /* DATASHAPENAME */ }; // result: INFOTABLE var jsonTable = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params1); var result = DataShapes.ThingviewBomData.CreateValues(); for(i in Content.array){ jsonTable.AddRow({name:Content.array[i].name, //type:Content.array[i].description, type:"viewable", value:Content.array[i].value, hasAnimation:Content.array[i].hasAnimation, hasSequence:Content.array[i].hasSequence }); } result = jsonTable;   Test the  service:      

Using Connection Filters for state-based rendering and value formatting   State-based rendering of properties that come from user inputs or from connected ThingWorx data is a common requirement. Think about the following scenario: from ThingWorx you get the state of a as one of these values: [ OK | At-Risk | Issue ]. You would like to visualize it with a 3D image or a changed 3DGauge icon.   You can achieve that easily with a Vuforia Studio functionality that is often overseen: The Connection Filters. With connection filters you can achieve a lot of very nice a common features, mainly: number and date formatting value pre- and postfixing (specifically units for numbers but also anything else) state-based formatting, e.g. changing the image or style based on a number change   Here is what I mean in practice:   Step 1:   Step 2:   Here is the stateBasedStyling Connection Filter content:   return value < 3000 ?    "fill:rgba(255, 255, 255, 1);textbaseline:middle;textalign:center" :    "fill:rgba(255,   0,   0, 1);textbaseline:middle;textalign:center" ;   value is a key word and represents the value on the connection before applying the filter function. The returned value is the one that is used in the bound-to attribute. I found that the expression has to be a one-liner (technically), i.e. you have to start your expression with 'return' and can't do something like:   if(value < 3000) return "fill:rgba(255, 255, 255, 1);textbaseline:middle;textalign:center"; else return "fill:rgba(255,   0,   0, 1);textbaseline:middle;textalign:center";     Resulting Filter in ThingWorx Studio: You can add multiple filters but I didn't check yet in which sequence they'll be evaluated (top-to-bottom or bottom-to-top).     Examples of Usage   1. Show icons for Enum values: I used it often to display enumerated-type values (i.e. the input values are from a discrete value set e.g.named colors) with images/icons:   return "app/resources/Uploaded/colorImg_"+value+".png";   in combination with the corresponding uploaded images, in this case named colorImg_red.png, colorImg_blue.png, etc.   2. Format Numbers and postfix with unit The following formats the input number 12.769 to 12.8 mph.   return $filter('number')(value, 1) + " mph";     See the AngularJS documentation for the available filter types. Relevant are: currency number date   I haven't tested yet if these filters can also be applied to input arrays of objects that come from a service (e.g. for a repeater widget). If this is supported the array-based filters may be applicable/usable as well.  

Sometimes it is required and will be nice to use a picker functionality. For example, some data picker – so the question: How to achieve this. Yes it is possible in JavaScript that we can incorporate a data/calendar picker into the Vuforia Studio environment? In the Web there are some open source libraries and at least it works 1:1 in preview mode. But mostly they work also fine on mobile devices. In this article a data picker was tested and it was working fine in Preview mode but also was working fine on IOS and on Android devices  The example here is based on the follow link:  https://www.cssscript.com/tag/date-picker/ there are some data picker implemented. Here in this example the library (data-picker) is copied to  the Studio Project download folder and it javascript code will   load the lib and defined a function which is called from button First step is to define a function which enables to load javascript and css from a file / project folder:   // this code load a javascript or css file $scope.loadjscssfile= function(filename, filetype){ console.log("loading "+filename+":: type="+filetype) if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } // this function will load the simplepicker javascript lib and the css lib $scope.testLoad= function() { $scope.loadjscssfile("app/resources/Uploaded/lib/simplepicker.css", "css") $scope.loadjscssfile("app/resources/Uploaded/dist/simplepicker.js", "js") }   In this example the $inoicView.afterEnter (after 2d/view  is loaded) event is used to load the library. The function for the picker call is defined -  $scope.app.TestPicker()- which is called from a button .   //============================= $scope.$on('$ionicView.afterEnter', function() { $scope.testLoad(); $timeout(() => { $scope.setWidgetProp("button-1","class", "simplepicker-btn"); $scope.$applyAsync(); },500) }) //https://www.cssscript.com/material-date-time-picker-simplepicker/ // function called from a button $scope.app.TestPicker = function() { let simplepicker = new SimplePicker({ zIndex: 10 }); simplepicker.open(); simplepicker.on('submit', (date, readableDate) => { console.warn( readableDate ); $scope.setWidgetProp('label-1','text', readableDate); $scope.$applyAsync(); }); simplepicker.on('close', (date) => { console.log('Picker Closed' ); }); }   When the picker is closed after date was selected - the javascript code will set the selected value to the text property of a label widget (label-2). The javascript and the style (css)  implementation was copied to the resource folder:       Now the   simplepicker could be tested and it has the following appearance in preview mode:     The test picker Studio project was attached to this case.  

Vuforia Studio A beta version of the new Wayfinder widget is now available! The Wayfinder widget allows you to place Waypoints that help lead users towards a specific part of a model or place in their environment. Before you can start trying out the Wayfinder widget, you'll need to enable the widget so that it is displayed in your Widget panel. The following Creo Illustrate sequence properties are now exposed in Vuforia View for HoloLens 2 devices when stepStarted and stepCompleted events are triggered: stepDescription and duration. Vuforia View Windows: Update Vuforia View to the latest version to resolve an issue with the app crashing when gallery experiences are opened. Experience Service There are no new features or updates for the 9.5.0 version of the Experience Service.

Vuforia Studio Vuforia Studio Product API The Vuforia Studio Product API is now available to enhance flexibility and efficiency when working with product-based data models and runtime experiences. For more information, see the following topics: Vuforia Studio Product API Vuforia Studio JavaScript Concepts Supported Runtime Functions New Product Widget The new Product widget allows you to retrieve information from the Experience Service and dynamically load or compare product assets at runtime. For more information, see Product. New Dynamic Target Widget The new Dynamic Target widget allows you to load various target datasets from both local and remote resources, and can dynamically load required targets at runtime. For more information, see Dynamic Target. New Use Cases in the Help Center Three new powerful use cases have been added to help you get the most out of the enhanced Product API, Product widget, and Dynamic Target widget. These examples show how to dynamically load, inspect, and interact with your 3D models using real-time data and metadata. Use Case: Load and Compare Assets Dynamically Use Case: Utilize Metadata with a Product Inspector Use Case: View Meaningful Model Data with a Product Explorer On-Prem Advanced Model Targets Vuforia Studio authors can now utilize On-Prem Advanced Model Targets in their experiences. For more information, see the following topics: On-Prem Advanced Model Targets and Vuforia Studio Configure a Model Target New Wave Shader A new wave shader is available. For more information, see Shaders. AngularJS Update for Vuforia Studio Vuforia Studio has been updated from AngularJS 1.5 and Ionic 1.3.3 to AngularJS 1.8.3 to modernize the platform and maintain high security standards. These changes may affect custom JavaScript code in Home.js of your experiences and may require updates to ensure your existing experiences function correctly after republishing with the new version. For more information, see AngularJS Update in Vuforia Studio. Number Input Widget Update All existing Text Input widgets with Number selected as Type will be automatically updated to a Number Input widget upon opening projects in Vuforia Studio 10.0. For more information, see Number Input Improvements to State-based Model Targets Minor improvements to state-based Model Targets. Experience Service Vuforia Studio Product API The Product API allows users to store and retrieve assets on the Experience Service using a structured product ID and version relationship. For more information, see Vuforia Studio Product API. On-Prem Advanced Model Targets The new On-Prem Advanced Model Targets introduce additional requirements for the Experience Service. For more information about the requirements, see On-Prem Advanced Model Targets and Vuforia Studio. Bug Fixes See Bug Fixes for additional information on bugs resolved in this release

This is the second Javascript quark in the series: it can be used to fade a widget out. You can find the first quark here.   Here's the code to copy & paste to your Home.js:   $scope.fadeOut = function(widget, time, interval) { let w = (widget.opacity !== undefined ? widget : $scope.view.wdg[widget]); if (time <= 0 || interval <= 0 || w.opacity === undefined) { throw "Cannot fade this widget"; } let steps = Math.floor(time / interval); let opDelta = w.opacity / steps; return $interval(() => w.opacity = (opDelta < w.opacity) ? (w.opacity - opDelta) : 0, interval, steps); } This quark will make the widget fade out from its current opacity to 0 in time milliseconds, uniformly decrementing opacity at every interval .   Invoke the function like this:   fadeOut(widget, time, interval);   where widget is either the id of the widget (e.g. modelItem-1) or the widget itself (e.g. $scope.view.wdg['modelItem-1']), time represent the total time it takes to fade the widget out from its current opacity, and interval represents the amount of time between each opacity change.   Here's an example:   fadeOut('modelItem-1', 2000, 50); This example fades the model item out by bringing its current opacity to zero after 2 seconds with an opacity change every 50 ms.   Comments and suggestions are welcome.   -Alessio    

Vuforia Studio Bounding box and location information is now available in CAD metadata New RealWear Nav 520 option available in the custom canvas size drop-down list on the 2D canvas JavaScript properties now documented for all widgets Vuforia View Vuforia View is no longer supported on the following devices: Surface Pro 7 Surface Pro 6 Surface Pro 5th Gen (2017) Surface Pro 4 Surface Book Surface Go Surface Go2 Vuzix M400 Smart Glasses You may still be able to use Vuforia View to consume published experiences on these devices, but Technical Support will no longer be available. You should also expect that Vuforia View may stop working correctly on these devices after September 2023. Then, at the end of the year (2023), the following will happen for Windows and Vuzix devices: Vuforia View will be removed from the Windows Store. Vuforia View will be removed from Vuzix App Store. No updated versions of Vuforia View for Windows will be available on the PTC Software Downloads site; only older preexisting versions will remain. Experience Service There were no new features or updates for the 9.14.0 version of the Experience Service. Bug fixes See Bug Fixes for additional information on bugs resolved in this release

Your company might have a css that represents the corporate identity - or you may have other sources of reusable css styles that you want to include with minimal effort. Here is what you have to do to use corporate css files to drive the look and feel of your experiences: Add the corporate css file (e.g. company.css) to your resources In Application styles add the following at the beginning (before any other css style entry: @import url(#{$resources}/Uploaded/company.css);     With the following content in company.css: And this label definition:   Produces this outcome (you see it in the editor as well as in the preview):   Gotcha!    

Just helped someone who was seeing a difference between the Preview mode and what Vuforia View was showing. The experience was being developed for public access, so what was happening is that Preview mode worked because they were using their Studio credentials to run the Thingworx service. When they used Vuforia View, they were using es-public-access to run the Thingworx service. And es-public-access did not have the runtime permissions to execute the service.   The error indication was found in the Application Log complaining about the Entity and Service not being able to be run.   Don't forget to set your permissions for es-public-access so it can run your services!  

You can get the view count for all public experiences by using the below REST API call.   GET <your ES URL>/compliance/views   This will return a JSON object with a views and billables field where: views = the download number of publicly accessible projects & billables = how many downloads are counted towards billable tokens   You can also specify the startDate and endDate in your request. These parameters can be defined by a UTC date string, JSON date string, or time in milliseconds since a specified date.   

Vuforia Studio Improved messaging for Advanced Model Target status when publishing a project Vuforia View A new Show Tracking Status option is available from the menu within an experience. Possible statuses include: TRACKING IS STABLE TRACKING IS UNSTABLE REDUCE MOTION IMPROVE LIGHTING OBJECT OUT OF VIEW Experience Service (on-premises) There were no new features or updates for the 9.15.0 version of the Experience Service. Bug Fixes See Bug Fixes for additional information on bugs resolved in this release

Vuforia Studio New Contour Shader A new contour shader is available for outlining objects. For more information, see Shaders. New virtualMode Parameter for Highlight Shader A new virtualMode parameter is available for the highlight shader that renders highlighted parts as opaque. For more information, see Shaders. New Opacity Parameter for Flow Shader A new opacity parameter is available for the flow shader. For more information, see Shaders. State-based Model Target Updates General UI improvements for state-based Model Targets in the Model Target Editor A new targetState API is available for state-based Model Targets that provides the estimated state of the model. For more information, see JavaScript Event for State Changes in State-based Model Targets. Specify New Source Directory for Projects and Assets Users can now specify a custom source directory for their projects and assets. For more information, see Specify a Custom Source Directory for Vuforia Studio Projects and Assets. Support for macOS Sequoia macOS Sequoia is now supported. Support for ThingWorx 9.7 ThingWorx 9.7 is now supported. ThingWorx 9.3 No Longer Supported ThingWorx 9.3 is no longer supported. Upcoming AngularJS Update for Vuforia Studio In the upcoming 10.0 release (targeted for May 2025), Vuforia Studio will transition from AngularJS 1.5 and Ionic 1.3.3 to AngularJS 1.8.3 to modernize the platform and maintain high security standards. These future changes may affect custom JavaScript code in Home.js of your experiences and may require updates to ensure your existing experiences function correctly after republishing with the new version. For more information, see Upcoming AngularJS Update for Vuforia Studio. Vuforia View Vuforia View for 32–bit Android No Longer Available in Google Play Store Vuforia View for 32-bit Android devices will be removed from the Google Play Store. If you already have Vuforia View installed on 32-bit Android devices, you can continue to use the app, but no updates will be available. Vuforia View for 64-bit Android devices will remain available. Experience Service Support for PostgreSQL 16.8 PostgreSQL 16.8 is now supported RHEL 8.10 Support Ending in Experience Service 10.0 Beginning with the next release of the Experience Service (10.0), Red Hat Enterprise Linux 8.10 will no longer be supported. Ubuntu 20 Support Ending in Experience Service 10.0 Beginning with the next release of the Experience Service (10.0), Ubuntu 20 will no longer be supported. Bug Fixes See Bug Fixes for additional information on bugs resolved in this release