Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X
I would like to temporarily change a button's appearance for 2 seconds using Javascript. I'm planning to use the pre-built properties of "Image when Pressed" and Image when not Pressed" in Studio, if it makes sense. I need guidance on the javascript that could perform the temporary change. This provides user feedback when they press the button.
I have attached two different icons that would change color/appearance to indicate to the user they have pressed the button.
I am using Vuforia Studio 9.21.3.0
Hi @NJ_10402268 ,
I think there could be different approaches to implement the requested functionality . Here I want to provide one possible option:
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
$scope.app.blocked=false
where then in the function we will check something like
...
...
if($scope.app.blocked) return;
$scope.app.blocked=true
...
...
//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
Hi Roland,
Thank you for the example and guidance. I appreciate it. However, I have tried to take your js and apply it to a 2d image or a toggle button, but the desired effects do not work. It doesn't appear that your code is specific to this example. It should translate to other click events or pressed events, right? I have attached my edit of your project.
Will this code conflict with a toggle button already having binding to navigate within a model? I currently have rewind, play, and forward buttons in my experience and they all have bindings to the model.
to the 2D Image we need to use in the function instead of src property then the imgsrc property name. That is all so changing the method to that below in UI box - click event- then will work
app.testPressed2dDelay('image-1',2000,'icon_freeze_inactive.png')
where the defintion of the function is that (only src was replaced with imgsrc - that is all
$scope.app.blocked2=false
...
...
$scope.app.testPressed2dDelay= (wdgName,delay,pressedPic) => {
if($scope.app.blocked2) return;
$scope.app.blocked2=true
let currentPicture = $scope.getWidgetProp(wdgName,'imgsrc')
$scope.setWidgetProp(wdgName,'imgsrc',"app/resources/Uploaded/"+pressedPic)
$scope.$applyAsync();
setTimeout( (wdgName,pic)=> { try{
$scope.setWidgetProp(wdgName,'imgsrc',pic)
$scope.$applyAsync()
$scope.app.blocked2=false
console.info("delay ="+delay+" > wdgName: "+wdgName+" to "+pic)
} catch(e){ console.error("outer",e);} },delay, wdgName,currentPicture)
}
I will further with the toggle what should be done there and will provide an update
I think for the 2D toggle widget we do not need to set the image property but simple used the pressed /notpressed property. Here in the example I used parameters which are bind to the properties and set the paramters instead of the property directly ,
here the used approuch is to unpress the button after some timeout,- delay. That is all. If you do not want to colide with other click so you can do that also disable- but this is not really neccessarly so far I know. Here example of the code:
/////////=================
$scope.app.testPressed2dToggleDelay= (wdgName,delay) => {
console.log("app.testPressed2dToggleDelay stared on click event with arg wdgName="+wdgName+", delay = "+delay)
$timeout((wdgName,delay)=>{
if( !$scope.app.params['togg1pressed'] || !$scope.app.params['togg1disabled'] )return
//============
$scope.app.params['togg1pressed']=false
$scope.$applyAsync()
$scope.app.params['togg1disabled']=false
$scope.$applyAsync()
$timeout( (wdgName)=> { try{ $scope.app.params['togg1disabled']=true
$scope.$applyAsync()
$scope.app.params['togg1pressed']=true
$scope.$applyAsync()
console.log ("set parameters togg1disabled="+$scope.app.params['togg1disabled']+" <> togg1pressed="+$scope.app.params['togg1pressed'])
}
catch(e){ console.error("outer",e);} },delay, true,wdgName)
},150,true,wdgName,delay) //this is delay of the function not to colide witht he pressed event
}
I attached also the updated project 2 with the new test code
Hi Roland,
Thank you for working this out! This does successfully work for a singular button;however, my goal is to be able to have 4 toggle buttons all with different functions. Currently, the function activates all toggle buttons at the same time, even though the Studio IDs are different. I thought I could take the functions, rename them, and make new parameters for each button; but, that did not work. How would you edit the function so 4 toggle buttons could perform the same effect independently of each other?
Sorry, but I have no knoweldge of javascript so I am making best guesses :).