Vuforia Studio View Navigation Menu

[LX_10186967]

Hi！I'm trying to enable/hidden "View Navigation Menu" in Vuforia Studio.  I know how to set it in info.

And I want to know how to set it by javascript code?

[ClayHelberg · Accepted solution]

You can do this by modifying the CSS on the underlying elements, something like this:

// the "show" param is boolean: true to show the nav bar, false to hide it
$scope.showHeader = function(show) {
  document.querySelector(".nav-bar-container").style.display = show?"block":"none";
  document.querySelector(".has-header").style.top = show?"44px":"0px";
}

[LX_10186967]

Hi ClayHelberg, It works for me. Thank you for your assistance.

 And I can't find it in help center,

May I ask if you have any relevant links/document you can provide?

[RolandRaytchev]

Hi @LX_10186967 ,

so far I know this is not documented in the PTC Help yet - means that it is currently  not official supported way - recommended by PTC product development. BUT... this does not means that it is not a good solution. So there is a lot of functionality which is not directly covered by the Vuforia Studio documentation , but it is based on general JavaScript, style css ,angular etc. API's what some very experienced customers could use to achieve some advanced functionality which is not covered directly by the PTC Help/documentation. Therefore it is great when such advanced technique are shared in the Vuforia  Studio community. There is only one point . When something is not supported , then the R&D team will not consider the compatibility of some technique in further releases. Therefore I will report this to R&D team to inform that the techniques suggested by @ClayHelberg could be used to set the View menu , so hopeful this will be added to documentation as supported techniques or alternative the R&D or Product Managements would  suggest alternative techniques which they consider as better option. Thanks

[LX_10186967]

Thanks~

[ClayHelberg]

@RolandRaytchev is right, this is not an OOTB approach to this, it takes advantage of Vuforia Studio's scripting capabilities. I used the browser debugger tools to identify the HTML elements representing the nav bar at the top, and the container below it, in order to write the Javascript code to update them to show or hide the nav bar.

You can do a lot using the browser debugger tools (with the preview page) to see what's going on "under the hood" in the experience, and then use that information to write Javascript code or modify CSS styles to achieve the desired results.

[LX_10186967]

I am extremely grateful for your time and generosity.

[ClayHelberg]

You're welcome, I'm glad it's working for you!