Flashing effect of model item

[PhilipB]

Hi!
I'm trying to create a flashing effect of a model item without using Illustrate. For example trying to make the component go from originial colour to red to orginial colour to red repeatedly for 5 times as example. 

What I was thinking was creating some kind of loop where it blinks on and off repeatedly: 

I did something like this: 

$scope.blink = function (){
   var i;
   var timingInterval = 30;

   i = 0;

   for (i = 0; i < 5; i++){
      setTimeout($scope.setWidgetProp(modelItem-1, "color", ""), 500);
      setTimeout($scope.setWidgetProp(modelItem-1, "color", "rgba(255,0,0, 1)"), 500)
   }
}

Then I linked a click event to a button with hide(); 

The thought was that the modelItem would blink red on and off for 0.5 seconds for 5 times when clicking that button. Played around with that but it didn't really worked in the preview. So I wonder if someone has done something similiar? 

[RolandRaytchev]

Hi @PhilipB,

I think there are 2 problems which will avoid that the code work.

1.)When a function is executed, mostly it is executed asynchronously and will be executed immediately

So means that this loop:

 for (i = 0; i < 5; i++){
      setTimeout($scope.setWidgetProp(modelItem-1, "color", ""), 500);
      setTimeout($scope.setWidgetProp(modelItem-1, "color", "rgba(255,0,0, 1)"), 500)
   } 

2.) the $timeout service should be called in sub function - at least this was an issue I had when I tested it.

It did not work when I have 2 different $timeout() calls called  successive in the for loop:

for (i = 0; i < 5; i++){
      $timeout(..)
     $timeout(..)
   } 

At the end the following code was working fine  -I hope it does something similar to this what  you  invented?

////////////
$scope.blink = function (){
  console.log('blink')
   var i; 
   var timingInterval = 500;

   i = 0;

   for (i = 0; i < 10; i++){
      $scope.setColormItem(255,0,0, timingInterval*i) 
      $scope.setColormItem(0,255,0,timingInterval*i +timingInterval/2) 
   } 
}
 
/////////////
$scope.setColormItem= function(a,b,c,info)
{ 
$timeout(()=>{
  console.log( "rgba("+a+","+b+","+c+", 1)  info="+info)
  $scope.setWidgetProp('modelItem-1', "color", "rgba("+a+","+b+","+c+", 1)")
             },info)
}

Ok I used 2 different color but I think unset should also work in this construct  : $scope.setWidgetProp(modelItem-1, "color", "")

[PhilipB]

Thanks for the reply @RolandRaytchev !

I implemented your code and it worked really good! I got the effect that I was looking for. However, it was only one downside and that is that the flashing object will end up in one of the 2 colors permanently afterwards. I tried to implement as you mentioned: 

$scope.setWidgetProp(modelItem-1, "color", "") 

To get one of the flashing modes to the original color. However, it didn't really work great. I implemented it in the main function so it looked like this: 

$scope.blink = function (){
  console.log('blink')
   var i; 
   var timingInterval = 500;

   i = 0;

   for (i = 0; i < 10; i++){
      $scope.setColormItem(255,0,0,timingInterval*i) 
      $scope.setColormItem("",timingInterval*i+timingInterval/2) 
        }
}

$scope.setColormItem= function(a,b,c,info)
{ 
$timeout(()=>{
  console.log( "rgba("+a+","+b+","+c+", 1)  info="+info)
  $scope.setWidgetProp('modelItem-1', "color", "rgba("+a+","+b+","+c+", 1)")
             },info)
}

I think this is how you meant, wasn't really sure how else to do it, if you perhaps where meant to put it in the subfunction timeout put that only made it worse when i tried. 

The log when trying out the code above looked like this then:

The experience itself basically did as said in the log, it's the original color first, then it just stays red.

Tried a bit other methods to get around this so it goes back to its original color after flashing, like after it has finished the for loop I put this command:

$scope.app.view.Home.wdg['modelItem-1'].color = ""

But didn't really work either, I think it has to do with that functions are executed asynchronously as you mentioned, that is a bit new to me. 

However my best idea I think was to do something like this: 

$scope.blink = function (){
  console.log('blink')
   var i; 
   var timingInterval = 500;

   i = 0;

   for (i = 0; i < 10; i++){
     
           if (i>8){
             
      		$scope.app.view.Home.wdg['modelItem-1'].color = "";
      		}
           else{
      		$scope.setColormItem(255,0,0,timingInterval*i) 
      		$scope.setColormItem(0,255,0,timingInterval*i +timingInterval/2)
      		}
   	}
}
 
$scope.setColormItem= function(a,b,c,info)
{ 
$timeout(()=>{
  console.log( "rgba("+a+","+b+","+c+", 1)  info="+info)
  $scope.setWidgetProp('modelItem-1', "color", "rgba("+a+","+b+","+c+", 1)")
             },info)
}

That would mean that when the i value is over 8 or whatever it would turn the modelitem to it original color and flash when the i value is below 8. But this method didn't really work either. Just continued to blink non stop, perhaps you see the fault there? Also tried to figure out a way to do this with a while loop but couldn't really figure out how to go the whole way with the code so it fulfilled the right purpose. 

point with all this is that I want to press different buttons connected to the modelitems and it starts highlight which component it is in the assembly. figured that making the components flash was the best approach

[RolandRaytchev · Accepted solution]

Hi @PhilipB ,

sure it was mention only the principle- the real code should look a littel different. Here is an example which will set a color for 1/3 of Interval of red, for the second 1/3 of green and the for the last 1/3 of the Interval will unset - set it to the original color. Here the sample code:

////////////
$scope.blink = function (){
  console.log('blink')
   var i; 
   var timingInterval = 3000;

   i = 0;

   for (i = 0; i < 10; i++){
      $scope.setColormItem(255,0,0, timingInterval*i) 
      $scope.setColormItem(0,255,0,timingInterval*i +timingInterval/3) 
      $scope.unsetColormItem(timingInterval*i +timingInterval*2/3) 
   } 
}
 
/////////////
$scope.setColormItem= function(a,b,c,info)
{ 
$timeout(()=>{
  console.log( "rgba("+a+","+b+","+c+", 1)  info="+info)
  $scope.setWidgetProp('modelItem-1', "color", "rgba("+a+","+b+","+c+", 1)")
             },info)
}
////
$scope.unsetColormItem= function(info)
{ 
$timeout(()=>{
  console.log( "unset color  info="+info)
  $scope.setWidgetProp('modelItem-1', "color", undefined)
             },info)
}

Here the test:

[PhilipB]

Hello @RolandRaytchev ,

Ah! I understand now, you were suppose to do another subfunction of course to do:

  $scope.setWidgetProp('modelItem-1', "color", undefined)

 Thanks a bunch this really solved this for me!

[DenGrz]

Hello,

I also try the flashing effects of model item´s.
But when i use the same code for another model item, the flash effect is only by one model item visible.
I want to create few buttons for each model item´s.
Is it working so like i imagine it? @RolandRaytchev 

[RolandRaytchev]

Hello @DenGrz ,

I think the suggested code was here only here an attempt the solved the current problem. I think the best way to do flashing - and it is more easier is to use the $interval service. 

So I tested the issue with more than one modelItem widget and it work fine. Here I attached a demo project where you can test.

I think a modelItem not to blink - could be caused by start seqence setting. Means an Creo Illustrate figure could set the property in the start state and this could overrid /or lock the properties of the modelItem widgets

Here you can unset the sequence property , some code  like this:

var mySequence =$scope.view.wdg['model-1'].sequence
$scope.setWidgetProp('model-1','sequence', undefined);
$scope.testBlink();
//set back the sequence property after 10 sec.
$timeout(()=>{$scope.setWidgetProp('model-1','sequence', mySequence);},10000}
// but you could also use some promise construct when the blink finished

[DenGrz]

Yes thanks, that´s work perfect!