Skip to main content
V
19-Tanzanite
Velkumar19-Tanzanite
19-Tanzanite
November 29, 2019
Solved

Vuforia View set orientation to Landscape

  • November 29, 2019
  • 2 replies
  • 3358 views

Hello all,

 

Is possible to set orientation to landscape mode when ever experience is opened in mobile/tablet ?

 

/VR

Best answer by AllanThompson

Below is the CSS code from the Quadcopter sample experience.  You're better off looking at it in the Studio project as pasting it here removes all the indents & formatting.

 

If you look through you can see that there's the media query to determine orientation and then they define the style for that orientation.  So by making the definition different for each orientation, you can make the look of the item change.

 

There's also more you can read about how this works at W3 schools: https://www.w3schools.com/css/css3_mediaqueries.asp 

 

// Media query to target landscape
@media all and (orientation: landscape) {
// Selects the view and changes the background color
[twx-view="Choice"] {
background: #3d4647;
}
// Uses CSS border property to create a triangular shape
.choiceHeader {
border-top: 20vh solid #fff;
border-right: 20vh solid transparent;
width: 50%;
}
.choiceFooter {
border-bottom: 20vh solid #5f7070;
border-right: 200vh solid transparent;
height: 20vh;
padding: 0;
}
// Uses vh and vw units to adjust for different resolutions
.choicerow {
height: 40vh;
}
.logo {
width: 30%;
}
.horiz, .vert {
padding-top: 52px;
}
}

// Media query to target portrait
@media all and (orientation: portrait) {
[twx-view="Choice"] {
background: #3d4647;
}
.choiceHeader {
border-top: 10vh solid #fff;
border-right: 10vh solid transparent;
width: 80%;
}
.choicerow {
margin-top: 30%;
height: 30vh;
}
.choiceFooter {
border-bottom: 30vh solid #5f7070;
border-right: 60vh solid transparent;
height: 30vh;
padding: 0;
}
.logo {
width: 50%;
}
.horiz, .vert {
line-height: 24px;
max-width: 140px;
min-width: 135px;
padding-bottom: 10px;
padding-top: 62px;
}
}

2 replies

S
sdidier17-Peridot
17-Peridot
November 29, 2019

Hello Velkumar,

 

I don't think that this solution is possible in Vuforia View.

Why ?

Because in AR world, we have a part of virtual world in 3D where we can decide that we want with the virtual camera in this virtual 3D world.

And so, the rendering on the screen can be in portrait or in landscape.

It doesn't matter, it is virtual.

 

But in AR, we have also, a part of real, capturing in real time by the camera.

How can we decide to render this real world on the screen by rotating it to be in portrait or in landscape ?

It will be not very useful to understand the difference between that we see and what we have on the screen.

 

In AR experience, the right behavior is, I am rotating my screen, the real world captured by the camera displayed on screen, has the same orientation has in real life.

 

We can see the screen, has a window on a virtual 3D world over the real world.

 

So, in a such case, it doesn't matter to force the orientation of the screen.

 

By the way, the only use case where, it might be useful to force the orientation is in a 2D View, without any AR behind.

 

I have try to find a way in Javascript to force that.

I have found these functions :

https://www.jotform.com/blog/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639/

 

I didn't check them to be honest but it might be a solution.

 

Best regards,

Samuel

V
19-Tanzanite
Velkumar19-TanzaniteAuthor
19-Tanzanite
December 2, 2019

Hi @sdidier 

 

Thanks for your response. I tried the javascript, I'm getting error as "Uncaught (in promise) DOMException: screen.orientation.lock() is not available on this device." on Chrome browser and also in Android application.

 

Regards,

VR

A
AllanThompson16-Pearl
16-Pearl
December 2, 2019

I'm not aware of any way to force it to landscape, but you can guide the user into orienting their device in landscape as they go in by using CSS.

 

I built an experience a while ago that utilized the CSS that's in the Studio Sample - Quadcopter experience in Studio to define a 2D start screen that recommends the device be oriented in landscape mode and the user can't continue until they do.  You can view the experience by using the ThingMark that's available here. 

 

If you look at the Quadcopter example, there's the Choice view that comes up first and it's using CSS to format the page elements depending on the screen orientation.  So I just used that to define a style that would hide the Continue button in portrait and show it in landscape.

 

Of course the user could change the orientation back to portrait mode once they get to the AR.  You could probably create something formatted with CSS in the AR view that will appear on screen when in portrait mode asking to re-orient back to landscape.  You would hope they don't since you've already told them it works best in landscape, but sometimes people are just people.....

 

 

V
19-Tanzanite
Velkumar19-TanzaniteAuthor
19-Tanzanite
December 3, 2019

Hi @AllanThompson 

 

Thanks for your response. It will be helpful if you share piece of code to work on it.

 

Regards,

VR

A
AllanThompson16-PearlAnswer
16-Pearl
December 3, 2019

Below is the CSS code from the Quadcopter sample experience.  You're better off looking at it in the Studio project as pasting it here removes all the indents & formatting.

 

If you look through you can see that there's the media query to determine orientation and then they define the style for that orientation.  So by making the definition different for each orientation, you can make the look of the item change.

 

There's also more you can read about how this works at W3 schools: https://www.w3schools.com/css/css3_mediaqueries.asp 

 

// Media query to target landscape
@media all and (orientation: landscape) {
// Selects the view and changes the background color
[twx-view="Choice"] {
background: #3d4647;
}
// Uses CSS border property to create a triangular shape
.choiceHeader {
border-top: 20vh solid #fff;
border-right: 20vh solid transparent;
width: 50%;
}
.choiceFooter {
border-bottom: 20vh solid #5f7070;
border-right: 200vh solid transparent;
height: 20vh;
padding: 0;
}
// Uses vh and vw units to adjust for different resolutions
.choicerow {
height: 40vh;
}
.logo {
width: 30%;
}
.horiz, .vert {
padding-top: 52px;
}
}

// Media query to target portrait
@media all and (orientation: portrait) {
[twx-view="Choice"] {
background: #3d4647;
}
.choiceHeader {
border-top: 10vh solid #fff;
border-right: 10vh solid transparent;
width: 80%;
}
.choicerow {
margin-top: 30%;
height: 30vh;
}
.choiceFooter {
border-bottom: 30vh solid #5f7070;
border-right: 60vh solid transparent;
height: 30vh;
padding: 0;
}
.logo {
width: 50%;
}
.horiz, .vert {
line-height: 24px;
max-width: 140px;
min-width: 135px;
padding-bottom: 10px;
padding-top: 62px;
}
}

    Terms & ConditionsCookie settingsAccessibility statement