Clever Geek Handbook

How to detect orgy in ionic?

I am trying to detect orientation in ios using ionic. I am doing the following:

  • create an empty project
  • Add platform. Then add this plugin http://ngcordova.com/docs/plugins/deviceOrientation/

  • Paste in ngcordova.js file.

                                

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
      <script src="lib/ng-cordova.min.js"></script>

    <!-- your app js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter" class="platform-ios platform-cordova platform-webview">
       <div ng-controller="ThisCtrl">
    <ion-view>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
          <button ng-click="startCompass()" style="position: absolute;top: 90px">stsrt</button>
      </ion-content>
    </ion-view>
       </div>
  </body>
</html>

JS code

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})// Ionic Starter App


    angular.module('starter', ['ionic','ngCordova'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    }).controller('ThisCtrl', function($scope,$cordovaDeviceOrientation) {
            $scope.startCompass = function() {
                var options = {
                    frequency: 500
                };

                $scope.watchPromise = $cordovaDeviceOrientation.watchHeading(options);

                $scope.watchPromise.then(
                    null,
                    function(error) {
                        console.log(error);
                    },
                    function(result) {
                        alert("--")
                        $scope.dir = result.trueHeading;
                    }
                );

            };

            $scope.stopCompass = function() {
                $cordovaDeviceOrientation.clearWatch($scope.watchPromise.watchID);
            };
        });
+3


source to share


1 answer


I first discovered orientation in the ionic project. I ended up using this plugin https://www.npmjs.com/package/cordova-plugin-screen-orientation and all I had to do was add this js.

screen.unlockOrientation();


If all you want to do is unlock orientation in your ionic project and you don't really need compass access, this might be a really handy option for you.

-1


source






More articles:


All Articles