Temporarily change button appearance for 2 seconds using Javascript

Hi @NJ_10402268 ,

I think there could be different approaches to   implement the requested functionality . Here I want to provide one possible option:

• supposing you want to use 3DImage widget on mobile Vuforia Studio Project. So we use there the click event  
•  where the function will have as arguments the 3DImage widget name, the delay -2000ms - 2 seconds and the name of the picture what is inactive. the pictures file should be uploaded to the Project Upload folder

  app.testPressedDelay('3DImage-1',2000,'icon_freeze_inactive.png')​​

  The code for the call will be added to the UI click box of the 3DImage widget - here it is the 3DImage-1

• It is important to block the action of the function during of the execution - 2 second . this could be done by global variable:

$scope.app.blocked=false​

​

 where then in the function we will check something like 

... 
... 
if($scope.app.blocked) return; 
$scope.app.blocked=true 
... 
...

• at the end the complete code of that option  could be something like this:

  //call from click event of the 3DImage
  //app.testPressedDelay('3DImage-1',2000,'icon_freeze_inactive.png')
  //=========================================
  //blocks the event when it is called for the delay
  $scope.app.blocked=false
  //=========================================
  $scope.app.testPressedDelay= (wdgName,delay,pressedPic) => {
   
   if($scope.app.blocked) return;
   $scope.app.blocked=true
   
   let currentPicture = $scope.getWidgetProp(wdgName,'src')
   $scope.setWidgetProp(wdgName,'src',"app/resources/Uploaded/"+pressedPic)
   $scope.$applyAsync(); 
   
   setTimeout( (wdgName,pic)=> { try{
   
   $scope.setWidgetProp(wdgName,'src',pic)
   $scope.$applyAsync()
   $scope.app.blocked=false
   
   
   console.info("delay ="+delay+" > wdgName: "+wdgName+" to "+pic)
   } catch(e){ console.error("outer",e);} },delay, wdgName,currentPicture) 
   
   
  }​

I attached also a simple demo project to this post