Skip to main content
Q
qools1-Visitor
1-Visitor
April 7, 2020
Question

Creation of popup windows in 3d eye wear mode

  • April 7, 2020
  • 1 reply
  • 4462 views

Hi being a new user to Vuforia studio was wondering if anyone could guide or direct me to tutorial on how to create the following in 3d eye wear mode

 

1) Popup window after clicking on a 3d image, as I notice pop-up window widget is not available in 3d mode

2) Placing links to documents/PDF files

 

Thanks in advance

 

1 reply

R
RolandRaytchev21-Topaz I
21-Topaz I
April 7, 2020

Hello @qools ,

- to question point 1.) - 3D eye wear project - for HoloLens device in Vuforia Studio does not supports any popups (2d object for inputs) yet. So we need to use some workaround where we use some 3d Elements as inputs (3d Label widget, modelitems , 3d Images)

In the post :

"How to create a custom button pressable on HoloLens device?"

and 

"How can we make a 3D Widget on HoloLens visible in front of me every time ? "

there are some ideas how such input implementation could looks like.

2.) In case that we have installed on the device an applicaiton which could open  pdf file for viewing, we can use some construct like :

 

 window.location='app/resources/Uploaded/%5BBD-Logbuch%5D20190208-20190310.pdf'
or 
$scope.openUrl=function()
{
let url= "https://view.vuforia.com/command/view-experience?url=http%3A%2F%2F10.164.132.76%3A2019%2FExperienceService%2Fcontent%2Fprojects%2F3dgaugeexample%2Findex.html%3FexpId%3D1"
window.open(url)
}

 

I know that this work on mobile device also for pdf links but I never tested it on the HoloLens. So that this is something what should be tested if it works

 

Q
qools1-VisitorAuthor
1-Visitor
April 15, 2020

Thanks Roland.

 

I have a couple more questions still regarding hololens usage

 

1) for setWidgetProp could we use any code to break a long text into new line

2) What are the steps needed to hide images until they are activated by certain buttons, similar to the UI example just not that complex

 

R
RolandRaytchev21-Topaz I
21-Topaz I
April 15, 2020

Hello @qools ,

 

1.) to first point the question is why do you need this. 

You can use as parameter a variable which contains very long text e.g. a whole picture - 64k or more:

 

let wdgName = "textArea-1"
$scope.setWidgetProp( wdgName, 'text', myVariable)
//or
$scope.setWidgetProp( wdgName, 'text', $scope.getWidgetProp( wdgName, 'text') + addTextVariable);
//this above could add text on mobile but does not work on HoloLens
//for HL better to use this one to add a addtional text to the value of property
scope.setWidgetProp( wdgName, 'text', $scope.app.view.Home.wdg[wdgName].text + addTextVariable);

 There is no really reason to break the variable / text .

Another question is the display of it. Is your question more then  meaning how to have  new lines etc. in a text area?

This depends on the character what you use and the syntax what a widget support. E.g. html text will need some html tags

2.) second point - not clear what do you mean.

Is that some action that will make the button /here the picture inactive until some action was called. I will answer this one but, if you question is different then, please, let me know.

So you can use  the click event to call a function when a 3D image is clicked e.g. widget name ' 3DImage-1'

So we can define $scope.app.myButtonClick() where we write in the JS of the click event app.myButtonClick();

Then the code should looks like this:

$scope.thisButtonIsActive=true;
$scope.app.myButtonClick = function(){
if(!$scope.thisButtonIsActive) return; //the button is deactivated
$scope.setWidgetProp( '3DImage-1', 'src', "app/resources/Uploaded/button-click.jpg")
$scope.thisButtonIsActive=false;//now the button is not active
 $scope.$applyAsync();
// call this code with delay of 2 secs
$timeout(()=>{
 $scope.setWidgetProp( '3DImage-1', 'src', "app/resources/Uploaded/button-ready.jpg");
//this will set back the ready button
 $scope.setWidgetProp( "3DLabel-1", 'text', $scope.view.wdg["3DLabel-1"].text+btnNr);
//this will add some text to 3dlabel 
$scope.thisButtonIsActive=true;
//will make now the button again active
 $scope.$applyAsync();
 
 },buttonReactionTime*2000)
};
Terms & ConditionsCookie settingsAccessibility statement