18 Replies Latest reply on Mar 29, 2017 11:45 AM by kerrishotts

    Portrait lock screen orientation not work

    michałg48705107

      Hi,

       

      I have a little problem.

       

      I creating my first time app in Phonegap and i would like portrait screen orientation only - landscape disable.

       

      I installed cordova-plugin-screen-orientation in this way(i working on OS X): cordova plugin add cordova-plugin-screen-orientation in my app folder.

      Here is link to this plugin: GitHub - apache/cordova-plugin-screen-orientation: Mirror of Cordova Plugin Screen Orientation

       

      I see in folder myapp/plugins this plugin.

       

      My index.html looks like:

       

      <!DOCTYPE html>

      <html>

       

      <head>

          <meta charset="utf-8" />

          <meta name="format-detection" content="telephone=no" />

          <meta name="msapplication-tap-highlight" content="no" />

          <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

          <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->

          <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

        

          <link rel="stylesheet" type="text/css" href="css/index.css" />

          <title>myapp</title>

      </head>

      <body>

        

            *

            *

            *

        

          <script type="text/javascript" src="cordova.js"></script>

          <script type="text/javascript" src="js/index.js"></script>

          <script type="text/javascript">   

              screen.orientation.lock('portrait');

              app.initialize();

          </script>

      </body>

      </html>

       

      Addionatly in config.xml a have:

       

      <preference name="orientation" value="portrait" />

      <plugin name="cordova-plugin-screen-orientation" source="npm" spec="~1.4.2" />

       

      My question is easy: Why can I switch orientation? How resolve this problem ?

        • 1. Re: Portrait lock screen orientation not work
          Chris W. Griffith Adobe Community Professional

          I suspect that your call to the plugin is occurring before the deviceready event has been triggered. Although setting that preference should be enough.

          • 2. Re: Portrait lock screen orientation not work
            vishal_mishra Adobe Employee

            If you are installing the plugin from npm , you should use the docs provided at cordova-plugin-screen-orientation  .So, in your case , the code could be 'screen.lockOrientation('portrait')' . The latest github version is not yet published. You can either use the npm version(recommended) or use the github version with the respective documents. Also, i would recommend trying to lock the orientation after deviceready fires (you can find it in index.js) .

            • 3. Re: Portrait lock screen orientation not work
              michałg48705107 Level 1

              I tried this plugin too : cordova-plugin-screen-orientation

              but this not work too,

               

              My index.js look like this, where i must add code ?

               

              var app = {

                  // Application Constructor

                  initialize: function() {

                      this.bindEvents();

               

                  },

                  bindEvents: function() {

                      document.addEventListener('deviceready', this.onDeviceReady, false);

                  },

                

                  onDeviceReady: function() {

                      console.log('Received Device Ready Event');

                      console.log('calling setup push');

                      app.setupPush();

                  },

                  setupPush: function() {

                      console.log('calling push init');

                      var push = PushNotification.init({

                          "android": {

                              "senderID": "XXXXXXXX"

                          },

                          "browser": {},

                          "ios": {

                              "sound": true,

                              "vibration": true,

                              "badge": true

                          },

                          "windows": {}

                      });

                      console.log('after init');

               

               

                      push.on('registration', function(data) {

                          console.log('registration event: ' + data.registrationId);

               

               

                          var oldRegId = localStorage.getItem('registrationId');

                          if (oldRegId !== data.registrationId) {

                              // Save new registration ID

                              localStorage.setItem('registrationId', data.registrationId);

                              // Post registrationId to your app server as the value has changed

                          }

               

               

                          var parentElement = document.getElementById('registration');

                          var listeningElement = parentElement.querySelector('.waiting');

                          var receivedElement = parentElement.querySelector('.received');

               

               

                          listeningElement.setAttribute('style', 'display:none;');

                          receivedElement.setAttribute('style', 'display:block;');

                      });

               

               

                      push.on('error', function(e) {

                          console.log("push error = " + e.message);

                      });

               

               

                      push.on('notification', function(data) {

                          console.log('notification event');

                          navigator.notification.alert(

                              data.message,         // message

                              null,                 // callback

                              data.title,           // title

                              'Ok'                  // buttonName

                          );

                     });

                  }

              };

              • 4. Re: Portrait lock screen orientation not work
                kerrishotts Adobe Community Professional

                You should be able to do it in the onDeviceReady method.

                • 5. Re: Portrait lock screen orientation not work
                  michałg48705107 Level 1

                  onDeviceReady: function() {

                          screen.orientation.lock('portrait');

                          console.log('Received Device Ready Event');

                          console.log('calling setup push');

                          app.setupPush();

                      },

                   

                  Not work too ;<

                  • 6. Re: Portrait lock screen orientation not work
                    vishal_mishra Adobe Employee

                    Replace  `screen.orientation.lock('portrait')`   with   screen.lockOrientation('portrait') . That should work for you .

                    1 person found this helpful
                    • 7. Re: Portrait lock screen orientation not work
                      risingj Adobe Employee

                      The published version includes an older API, so to be safe for when npm gets updated, you should probably do a check before calling the function.

                       

                      if(screen.lockOrientation) {
                          screen.lockOrientation('portrait');
                      } else {
                          screen.orientation.lock('portrait');
                      }
                      
                      1 person found this helpful
                      • 8. Re: Portrait lock screen orientation not work
                        michałg48705107 Level 1

                        onDeviceReady: function() {

                                if(screen.lockOrientation) { 

                            screen.lockOrientation('portrait'); 

                        } else { 

                            screen.orientation.lock('portrait'); 

                                console.log('Received Device Ready Event');

                                console.log('calling setup push');

                                app.setupPush();

                            },

                         

                        not work too, with screen.lockOrientation('portrait'); not work too

                         

                        Someone know why ?

                        • 9. Re: Portrait lock screen orientation not work
                          taoufiqb58387721

                          I remove the  cordova-plugin-screen-orientation and i install the latest one 2.0.0, it's work for me.

                          • 11. Re: Portrait lock screen orientation not work
                            erikh99283575

                            Did you ever get this to work?  I have the same problem.  I tried uninstalling the plugin and then reinstalling, as suggested in this thread, but no luck.  I have version 2.0.0 installed.

                             

                            This has been unbelievably tricky for something I thought would be so simple!

                             

                            I've also tried setting it in the config file.  No luck.

                            • 12. Re: Portrait lock screen orientation not work
                              vishal_mishra Adobe Employee

                              Can you explain your problem/code in detail ?

                              • 13. Re: Portrait lock screen orientation not work
                                taoufiqb58387721 Level 1

                                Remove the android platform and reinstall it.

                                • 14. Re: Portrait lock screen orientation not work
                                  risingj Adobe Employee

                                  Erik, can you explain the exact problem you are having?

                                  • 15. Re: Portrait lock screen orientation not work
                                    erikh99283575 Level 1

                                    Hi.

                                     

                                    I am starting to realize that I had perhaps a more fundamental misunderstanding about PhoneGap.

                                     

                                    Bottom line, I cannot lock the screen in portrait mode in either ios or android using either a preference in the config file or any of the plugins listed on the site.

                                     

                                    However, I am not using PhoneGap Build yet.  I am simply using PhoneGap CLI with the app, I believe you all call it the developer app, downloaded onto my phone(s).  My project is simply modified from the Hello World project you all make available.  That app has many, many plugins built into it.  I can make them work.

                                     

                                    But I have had no luck adding new plugins and using them, and I have had no luck with anything that requires modification of the config file.

                                     

                                    I cannot really determine whether my inability to add new plugins and use them is due to an error I have made or whether doing that sort of thing without using PGBuild was never possible.

                                     

                                    Several sites and commentators are suggesting that you all do not really read the config file when the coder is not using PGBuild, so you do not detect changes in it.  This sounds logical and sort of answers all my questions.

                                     

                                    But if it's not true, then I just have some sort of coding or settings error.

                                     

                                    I really hope that I am correct that you all will not detect changes to the config file, including the addition of new plugins, until I get and use a PhoneGap Build account.  If so, I will happily work on the many aspects of my project that require one of the existing plugins or that depend on javascript, Angular, and html with reasonable confidence that things like orientation lock can be fixed with a simple config setting later on.

                                     

                                    If I am wrong, and I am supposed to be able to do these things using my current setup (PG CLI + developer app), then I am probably going to start thinking that working with this platform is a little buggier and difficult than I was hoping.

                                     

                                    Please tell me I'm right.

                                     

                                    Thanks.

                                     

                                    EH

                                    • 16. Re: Portrait lock screen orientation not work
                                      kerrishotts Adobe Community Professional

                                      The PhoneGap Developer app ships with the core Cordova plugins and a select few third-party plugins. It is not possible to use other plugins unless you build a version of the PGDev app yourself, add the plugins, and install it on your device.

                                       

                                      The PhoneGap Developer app does not parse your app's config.xml file either, so nothing you do there will make any difference.

                                       

                                      You'll want to use PhoneGap Build or the PhoneGap CLI to build apps that can use arbitrary plugins and that respond to changes in your config.xml file.

                                      1 person found this helpful
                                      • 17. Re: Portrait lock screen orientation not work
                                        erikh99283575 Level 1

                                        OK.  Everything you said helps and makes sense to me except the part where you indicate that I can use the PhoneGap CLI to use arbitrary plugins that response to changes in my config file.

                                         

                                        I do generally use the PhoneGap CLI.  I admit, I don't do much with it other than type "phonegap serve".  Is there a command line statement I can use to force it to read my config file as well?

                                         

                                        If there's some resource I should use to answer these basic questions, I would definitely use it.  I do feel the documentation could be a bit clearer on this stuff though.

                                        • 18. Re: Portrait lock screen orientation not work
                                          kerrishotts Adobe Community Professional

                                          Ok -- the PhoneGap CLI "serve" command is intended for interfacing with the PGDev App, and so will suffer the same problem -- it's the client that has the plugins installed, not the server. Since the PGDev app doesn't have the plugins you are trying to use and doesn't parse config.xml, you only have two options (note: you'll need the Android SDK installed and properly configured):

                                           

                                          • Build a version of the PhoneGap Developer App with the config.xml options you need, and add all the third-party plugins you need. You can then use "phonegap serve" with it, and it should act as expected. Of course, if you're doing this, you might as well just move on to the next bullet...
                                          • Build your app using the PhoneGap CLI with "phonegap build <platform>" (use "run" to launch on a device and "emulate" to launch on an emulator). The compilation process will install your plugins, copy your config.xml to the app bundles, etc., and build an app that uses your plugins and config.xml.

                                           

                                          Here's the thing: the PG Dev app is a PhoneGap app. That means it has its own "config.xml" file. Yours can't override it because it's coming too late in the process -- the PGDev app has already started with its own config. And since native bits can't be added arbitrarily, the PGDev app also can't dynamically support additional plugins, either.

                                           

                                          Now, building your app using the CLI means giving up some of the conveniences of the PG Dev app -- you need to build & deploy to the device in order to see your changes (unless you use some sort of live reload tool), but you'll also be seeing how your app functions on its own, which is what it will be doing when you submit to an app store anyway.

                                           

                                          Hopefully that helps some?

                                          1 person found this helpful