Click/Touch empty Space

[BAR3887]

I am trying to detect the event of clicking off objects within an experience. For example, I have a popup that displays when an occurrence part of a model is selected, highlights it, and will display that Display Name property within the Metadata. I would like to have a function that will detect a touch or click (in preview) off that model to, return the color to default, and hide the popup.

[RolandRaytchev]

Hi @BAR3887 ,

I used in the past a function for user pick event:

//============================================================
$scope.userpickDefGen= function() {
// define the button action
document.addEventListener('userpick', function (ev) {  
  var widget = ev.target.closest('twx-widget');
  if (widget) {
     console.log('XX-->the widget clicked is ', widget.getAttribute('widget-id'));    
  }
  else {
    var widget = twx.app.getScope(ev.target);
   if (widget) {
     console.log('YY-->the widget clicked is ', widget._widgetId, widget);  
  }
  }
});                                                                        
}; 
//============================================================

So you can check more detailed the ev object which was passed to the event e.g. 

console.warn(ev);

in the console (Strg-Shift-I) and check what is the difference when you click on different locations- so the decide what to check. I think also the 2d Canvas will be detected when  simple  you will click on any empty space, but I did not tested yet.

Another approach could be to call the closing of the popup window with some delay via the $timeout( ... , delay)  - means you will open after click the popup and then after some time you will close it.

[BAR3887]

Thanks @RolandRaytchev  for your response!

I have a $scope.$on('userpick', function(evtName, targetName, targetType, evtData) {} tracking when a widget is selected to perform the highlight of the occurrence and show the name of the part and next parent occurence or asssembly in a popup. But it seems as though the userpick is only for when an item is clicked/touched. The only thing that I have seen in my developer tool for console that is enacted when a click/touch is not on any widget within the experience is that it shows the coordinates of the pixels for the device where it was touched under the the clickhandler function within the vuforia-angluar.js

You can see the images I have attached is that the "Starting" shows how the experience loads. "Clicked" shows when one of the legs is selected, it highlights, and shows the popup with data. "Console" file shows when I click within the window of the device but not on the model widget, the circled line is the only indication for clicking there.

[RolandRaytchev]

Hi @BAR3887 ,

now I checked it more detailed and your right - it seem that is not possible only having the userpick or touch event to decide where is the click but I think using combination of the both.

When you have a userpick it is on 3d elements which are selected. In the same time you have e.g. the click or the touchevent. So possibly you can deativate for some time period the touch event after a userpick.  Otherwise you can user the touch end event to handle it as a click outside a 3d element

I tested some code like this below :

//============================================================
 ....
 angular.forEach( //==== for each 3d model block
                     // this will call the function below for each 3d model 
    $element.find('twx-dt-model'), function(value, key) { //for each 3d model block function
    //=====================================================================================
     angular.element(value).scope().$on('userpick',function(event,target,parent,edata) { 
   	   	try{var pathid = JSON.parse(edata).occurrence;}
       catch(e1) {return;}//it will not continue if no occurance prop
	    $scope.currentSelection = target + "-" + pathid;
        $scope.touchDeactivated=true;
         var userPickTimer=setTimeout(function() {$scope.touchDeactivated=false;},1000)
         //for one second it will deactivate the touch events
           try{ 
                  c_vals=  $scope.getColorVals(PICK_COLOR)
                  color_without_opacity= "rgba("+c_vals[1]+","+c_vals[2]+","+c_vals[3]+",1);"
                  var opacity = parseFloat(c_vals[4]);
                  tml3dRenderer.setColor($scope.currentSelection, color_without_opacity);
                  var my_obj={};
                   my_obj['hidden']=false;
                   my_obj['opacity']=opacity;
                   my_obj['phantom']=true;
                   my_obj['decal']=false;
      
            tml3dRenderer.setProperties($scope.currentSelection, my_obj  );
              $scope.$applyAsync();
               console.log("SEL set "+$scope.currentSelection+"==>" +PICK_COLOR);
              }
           catch (ex) {console.warn("Exception 1 in tml3dRenderer.setColor()=>"+ex);}
         
        
 console.warn(modelItemsList);                    

//tml3dRenderer.setProperties($scope.currentSelection, { hidden:true } );
         
 $scope.cust_popover = $ionicPopover.fromTemplate( $scope.cust_template(pathid), {scope: $scope});     
 $scope.cust_popover.show(customEvent);
      	
// auto-close the $scope.cust_popover after 5 seconds
 
$timeout($scope.popoverEndFunc(target + "-" + pathid,$scope.cust_popover), 5000);
$scope.$applyAsync(); 	  	
 //=================================================================================	
	 }); // finish the $on() listener 'userpick' + function definition
  }      //finish for each 3d model block function
    );   //  finish for each 3d model block
//============================================================
.....
$scope.touchDeactivated=false;
var onlongtouch; 
var timer;
var touchduration = 500; //length of time we want the user to touch before we do something

function touchstart(e) {
  console.warn('touchstart(e)'); console.warn(e);

    e.preventDefault();
  //call here with some delay to be after the userpick
  $timeout( function () {
    if (!timer) { //this will set the time only if deactivated
      if($scope.touchDeactivated == false) 
        timer = setTimeout(onlongtouch, touchduration);
        twx.app.fn.addSnackbarMessage("touchstart() timer set","twLogo");
    }},50);
}
//================================================================================================
function touchend() {
    //stops short touches from fire of  the event
   
  
  console.warn('touchend()');
    if (timer) {
        if($scope.touchDeactivated == false) // here will call to stop the popover
        {$timeout($scope.popoverEndFunc($scope.currentSelection,$scope.cust_popover), 50);
        twx.app.fn.addSnackbarMessage("touchend() called popover-> $scope.touchDeactivated="+$scope.touchDeactivated,"twLogo");
        }
        clearTimeout(timer);
        timer = null;
    }
}

 Where a popup was called for 5 seconds  but after 1 second I could click anywhere (touchevent) and it will close it then. When I try to click inside the 1 second period then the touch event is ignorred