Project files from the gallery

[micah]

Is there somewhere to download the project files from the samples in the gallery?

There's some functionality I'd like to see in the Circular Saw Operating Instructions I'd like to see the javascript for. In particular the pulsing colour changes of parts.

https://site-654059.bcvp0rtal.com/detail/videos/vuforia-view/video/5672569398001/st-circular-saw:-operator-instructions

[WilsonT]

Hi @micah,

The color flashing effect for parts of the 3D model are configured using Creo Illustrate. This is the easier way of adding animation effect to your 3D model.

If you want to use javascript as workaround, you can make the part as model item and assign the model item with a color you want in any interval you would like it to flash.

var initState = true;

$interval(function() {
 if (initState==true){
	$scope.view.wdg["handler"]['color'] = "rgba(220,42,107, 1)";
 }
  else {
	$scope.view.wdg["handler"]['color'] = "rgba(0,0,0, 1)";
 }
    initState =!initState;
},1000);

*Replace "handler" with the name of the model item.

Hope this helps.

[micah]

It does help thanks. Is there a workaround for the colour to transition from each colour or is this only possible with Illustrate?

[WilsonT]

Hi @micah,

I believe that you are referring to the color transition effect. 

I will still strongly recommend you to use Creo Illustrate for such effect, since it doesn't require any coding effort and it's more user friendly.

If you like to achieve it through coding, one thing you can try is to increasing and decreasing the value of the color code incrementally through looping. You can refer to this article (CS251748) and loop through the color value to give you that transition effect, instead of using a slider.

[sebben · Accepted solution]

Hi,

you can use this code: (maybe not the most elegant, but it works)

var rStart =0;
var gStart =0;
var bStart =0;
var r=0;
var g=0;
var b=0;
var modelItem;
var i=0;
$scope.colorChange = function() {
  i++;
  if (i<51){
  r+=rStart/100;

  g+=gStart/100;

  b-=bStart/100;

	$scope.app.view.Home.wdg[modelItem].color='rgb('+Math.round(r)+','+Math.round(g)+','+Math.round(b)+')';
  }
  else{
  r-=rStart/100;

  g-=gStart/100;

  b+=bStart/100;

	$scope.app.view.Home.wdg[modelItem].color='rgb('+Math.round(r)+','+Math.round(g)+','+Math.round(b)+')';
  }
  console.log($scope.app.view.Home.wdg[modelItem].color);
}
$scope.color = function(_r, _g, _b, _modelItem){
  i=0; 
  rStart =_r;
  gStart =_g;
  bStart =_b;
  r = _r;
  g = _g;
  b = _b;
  modelItem = _modelItem;
  $scope.intervalPromise = $interval($scope.colorChange, 10, 100);	
}

 This will flash the a modelItem in yellow buy calling the color function with the rgb values and name of the modelItem. For example color(100,100,100, "modelItem-1")