Skip to main content
C
CliffRice1-Visitor
1-Visitor
March 31, 2020
Solved

Getting Orientation of Mobile Device via Javascript

  • March 31, 2020
  • 2 replies
  • 2873 views

I am attempting to get change the text of a widget based on the mobile devices orientation. From what I could find, the best way to do this is via Javascript. The CSS methods I found for finding orientation are quite easy, but changing the text content of a widget via CSS is another story.

 

I found a solution here, and have tested that using the "Studio Sample - Import 3D Data" project that comes with vuforia studio. The only thing I have added is one extra button input widget, and some Javascript code.

Button-1.JPG

 

When I test it using a preview feature in vuforia studio, the button text only updates once. The console continually rewrites the same orientation each time I change the preview orientation or the preview screen size. 

Landscape.JPG

I also tested it by publishing this app and running it on an iPhone using Vuforia View. Here is gets a little better.

 

But It appears the experience needs to see another event, beyond orientation change, to push the button text change. For example, if I switch the iPhones orientation, my button text does not change, but once I touch a different button, say the Rotation Toggle button, the text on my Button-1 widget updates. 

 

Any advice? 

Thanks,

Best answer by sebben

Hi,

I'm not sure how to do this in javascript as well, but maybe a css approach would be fine for you aswell:

Instead of changing the text of your button you can add another one and hide it via css depending on the orientation.

So you only need two buttons. One with a portrait class, one with a landscape class. Then you change the visibility like this:

@media only screen and (orientation: landscape) {
 .landscape {display:none}
}
@media only screen and (orientation: portrait) {
 .portrait {display:none}
}

 

I hope that will help you.

2 replies

S
sebben14-AlexandriteAnswer
14-Alexandrite
March 31, 2020

Hi,

I'm not sure how to do this in javascript as well, but maybe a css approach would be fine for you aswell:

Instead of changing the text of your button you can add another one and hide it via css depending on the orientation.

So you only need two buttons. One with a portrait class, one with a landscape class. Then you change the visibility like this:

@media only screen and (orientation: landscape) {
 .landscape {display:none}
}
@media only screen and (orientation: portrait) {
 .portrait {display:none}
}

 

I hope that will help you.

C
CliffRice1-VisitorAuthor
1-Visitor
March 31, 2020

@sebben that just might work for my specific issue. I have some javascript tied to the button on my real experience, so I will need to see how that affects things. great idea! 

R
RolandRaytchev21-Topaz I
21-Topaz I
March 31, 2020

Hi @CliffRice ,

yes the mention link in your post could be used only on start- but it will not detect a dyncamic change - e.g. rotate the device. For me I used a soluton which was working in preview and in android. Possibliy it works also on IOS, but I did not test it there. ON HoloLens it is only landscape mode - so far I know.

I used the following code:

//============================================
angular.element(document).ready(function() {
 angular.element(window).on('resize', function(evt) {
 //console.log("resized window evnt :");console.warn(evt);
 var message = ''
 var win = evt.path[0];
 if(win.innerWidth > win.innerHeight){
 // LANDSCAPE -> do something here call your landscapeFunc()
 message = "current orientation is Landscape!"
 }
 else {
 // PORTRAIT -> do something here your PortraitFunc()
 message = "current orientation is Portrait!" 
 }
 twx.app.fn.addSnackbarMessage(message,"twLogo");
 
 });
})
//////////////////////

 We need to pay attion here that we are in angular js environment . I think the windows variable is static an is passed on system start - therefore it will not update dynamicaly.

    C
    CliffRice1-VisitorAuthor
    1-Visitor
    March 31, 2020

    @RolandRaytchev thank you for the clarification and alternative solution.  Can you elaborate on " We need to pay attention here that we are in angular js environment . I think the windows variable is static an is passed on system start - therefore it will not update dynamically."

    I was under the impression that all of the code written in Home.js was angular js and not true javascript. 

    Perhaps it would be easier to explain why the original post is not dynamic, but this one is. Also if the original solution was not dynamic why did the console write each time, and why would the app update once I touch a different button? 

     

    Forgive excess questions here. I am an automation engineer who have not written in Higher Level Languages with any regularity in several years. So I am try to not only solve the problem, but understand why and how each instance worked or failed to work. 

    R
    RolandRaytchev21-Topaz I
    21-Topaz I
    March 31, 2020

    Hi @CliffRice ,

    thank you for your feedback!

    Yes , I agree.  This is correct. It angular.js what use javascript js also/native. May be my description was not accurate enough.

    The Javascript is called  in the angular controller function where also  some variables/object are passed as arguments. Mostly they are passed at begin and therefore some changes which are done outside will not update all properties of all objects. So for example it seems that the window. screen properties will not update at the runtime when we later rotate the screen. Also the access to entities html elements is different comparing to HTML only.

    I did not check your  code more detailed the understand better the problem and  I think in generally it should work but there are some properties which will not update -which PTC development team considered as not supported and therefore does not take care to update them… one is the mention windows.screen object as example. Let considerted the followng code:

     

    $scope.$watch('window.innerHeight', function (newValue, oldValue, scope) { 
 var message = "$scope.$watch callback for window.screen.height="+window.screen.height
 twx.app.fn.addSnackbarMessage(message,"twLogo");
 $scope.$applyAsync();
});

     

     

    This above will be called only on start but it will not be called later when we rotate the device. Means the window.innerHeight will not update

    The code below will also pass the window as object but it is updated property (in the code below the win variable refer the same object:  window  in the code above)

     

     

    //============================================
angular.element(document).ready(function() {
 angular.element(window).on('resize', function(evt) {
 console.warn(evt);
 var message = ''
 var win = evt.path[0];
 if(win.innerWidth > win.innerHeight){
 \\....
 }
})
//////////////////////

     

     

      Terms & ConditionsAccessibility statement