Skip to main content
P
PhilipB1-Visitor
1-Visitor
September 3, 2019
Solved

Flashing effect of model item

  • September 3, 2019
  • 1 reply
  • 4700 views

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? 

Best answer by RolandRaytchev

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:

2019-09-04_18-22-58.jpg

1 reply

R
RolandRaytchev21-Topaz I
21-Topaz I
September 3, 2019

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)
}

2019-09-03_19-07-54.jpg

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

    P
    PhilipB1-VisitorAuthor
    1-Visitor
    September 4, 2019

    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:

    problem.JPG

    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

    R
    RolandRaytchev21-Topaz IAnswer
    21-Topaz I
    September 4, 2019

    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:

    2019-09-04_18-22-58.jpg

      Terms & ConditionsCookie settingsAccessibility statement