topic Re: Temporarily change button appearance for 2 seconds using Javascript in Vuforia Studio

Temporarily change button appearance for 2 seconds using Javascript

NJ_10402268 — Tue, 30 Jul 2024 21:57:56 GMT

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

Re: Temporarily change button appearance for 2 seconds using Javascript

RolandRaytchev — Wed, 07 Aug 2024 14:56:01 GMT

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 folderapp.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

Re: Temporarily change button appearance for 2 seconds using Javascript

NJ_10402268 — Wed, 07 Aug 2024 20:02:49 GMT

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.

Re: Temporarily change button appearance for 2 seconds using Javascript

NJ_10402268 — Wed, 07 Aug 2024 20:07:26 GMT

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.

Re: Temporarily change button appearance for 2 seconds using Javascript

RolandRaytchev — Thu, 08 Aug 2024 06:31:22 GMT

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

Re: Temporarily change button appearance for 2 seconds using Javascript

RolandRaytchev — Thu, 08 Aug 2024 08:00:22 GMT

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

Re: Temporarily change button appearance for 2 seconds using Javascript

NJ_10402268 — Fri, 09 Aug 2024 14:50:32 GMT

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 :).