cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Overlapping 2D widgets

SOLVED
Amethyst

Overlapping 2D widgets

First of all I would like to thank the community for continuous support.

Returning to the question:-

When I place a 2D widget in the left panel at a particular place then I am not able to place any other 2D widget at the same location.

I searched the community an found little piece of info about it from this thread :

https://community.ptc.com/t5/Vuforia-Studio/Hide-2D-overlapping-elements-during-desing-time/m-p/6421...

 

But even after using that i was just able to hide the widgets from that place only during design time.

 

Is there any proper solution to this?

It would be of great help if someone could attach a sample project which could help to rectify the problem.

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Overlapping 2D widgets

Hello vivekse,


In order to achieve the overlapping 2D widgets effect shown in the video that you shared, you will first need to add 3 widgets as children of the 2D Overlay:

  • a panel with the class and name set to "ControlPanel";
  • an image with the class and name set to "CloseImage";
  • an image with the class and name set to "OpenImage".

PTC_Community_Overlapping.PNG

 

Then, you will need to customize the style of your widgets by adding some css code in the Application file that can be found under the Styles tab. It can be something like this:

.ControlPanel {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 50px;
	width: 300px;
	background: rgba(0, 0, 0, 0.5) !important;  
}
.OpenImage {
	position: fixed;
	top: 0;
	right: 0;
}
.CloseImage {
	position: fixed;
	top: 0;
	right: 0;
}

 

And also, you will need to add some functionalities to the OpenImage and CloseImage widgets (theyvwill act as buttons that open and close the ControlPanel). In order to do that, you can add something similar to this Javascript code in the Home.js file.

$scope.$on("$ionicView.afterEnter", function (event) {

 	document.querySelector('.ControlPanel').style.display = 'inline';
  	$scope.view.wdg['OpenImage']['visible'] = true;
  	$scope.view.wdg['CloseImage']['visible'] = false;	
 
});


$scope.ShowHidePanel = function() {  
  if ($scope.view.wdg['CloseImage']['visible'] == false) {    
			$scope.view.wdg['CloseImage']['visible'] = true;	
			$scope.view.wdg['OpenImage']['visible'] = false;	
			document.querySelector('.ControlPanel').style.display = 'none'; 
  } else {
    
			$scope.view.wdg['CloseImage']['visible'] = false;	
			$scope.view.wdg['OpenImage']['visible'] = true;	
  			document.querySelector('.ControlPanel').style.display = 'inline';
  }
};

The last thing you need to do is to add the text ShowHidePanel(); in the Javascript box of the OpenImage and CloseImage.PTC_Community_Overlapping_2.PNG

I hope this was useful.

 

Kind regards,

Lorena

 

 

 

 

 

View solution in original post

2 REPLIES 2

Re: Overlapping 2D widgets

Also in this video :

https://www.linkedin.com/posts/pascalbornet_augmentedreality-technicians-digitaltransformation-ugcPo...

 

we can see that in the right panel a blue button is placed which when clicked open up a menu of options which is also on the right panel. Now my doubt is how he made that possible because when the person would have placed that blue button in the right panel then he would no longer be able to place the those menu buttons in the same panel.

Re: Overlapping 2D widgets

Hello vivekse,


In order to achieve the overlapping 2D widgets effect shown in the video that you shared, you will first need to add 3 widgets as children of the 2D Overlay:

  • a panel with the class and name set to "ControlPanel";
  • an image with the class and name set to "CloseImage";
  • an image with the class and name set to "OpenImage".

PTC_Community_Overlapping.PNG

 

Then, you will need to customize the style of your widgets by adding some css code in the Application file that can be found under the Styles tab. It can be something like this:

.ControlPanel {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 50px;
	width: 300px;
	background: rgba(0, 0, 0, 0.5) !important;  
}
.OpenImage {
	position: fixed;
	top: 0;
	right: 0;
}
.CloseImage {
	position: fixed;
	top: 0;
	right: 0;
}

 

And also, you will need to add some functionalities to the OpenImage and CloseImage widgets (theyvwill act as buttons that open and close the ControlPanel). In order to do that, you can add something similar to this Javascript code in the Home.js file.

$scope.$on("$ionicView.afterEnter", function (event) {

 	document.querySelector('.ControlPanel').style.display = 'inline';
  	$scope.view.wdg['OpenImage']['visible'] = true;
  	$scope.view.wdg['CloseImage']['visible'] = false;	
 
});


$scope.ShowHidePanel = function() {  
  if ($scope.view.wdg['CloseImage']['visible'] == false) {    
			$scope.view.wdg['CloseImage']['visible'] = true;	
			$scope.view.wdg['OpenImage']['visible'] = false;	
			document.querySelector('.ControlPanel').style.display = 'none'; 
  } else {
    
			$scope.view.wdg['CloseImage']['visible'] = false;	
			$scope.view.wdg['OpenImage']['visible'] = true;	
  			document.querySelector('.ControlPanel').style.display = 'inline';
  }
};

The last thing you need to do is to add the text ShowHidePanel(); in the Javascript box of the OpenImage and CloseImage.PTC_Community_Overlapping_2.PNG

I hope this was useful.

 

Kind regards,

Lorena

 

 

 

 

 

View solution in original post

Announcements
Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection