THE BLOG

30
Jan

Using Chrome to Debug your Cordova App

It is incredibly easy it is to get full Chrome Developer Tools functionality (including full JavaScript debugging) whilst running your Cordova application on the emulator or even on a real device. It’s not exactly a new feature but this discovery has made testing and debugging our Ionic Framework apps so much easier.

Here’s how to get full debugging and everything else you expect from Chrome Developer Tools / Web Inspector whilst testing your Ionic app on device or emulator:

Firstly, run your Ionic application on the device. LiveReload is optional but highly recommended:

ionic run -s -c -l

Next, Load up Chrome and go to Tools, More Tools, Inspect Devices. Locate the device/app your are running (the app must be built with debugging enabled). Click Inspect.

A Web Inspect window now opens for the application running on your device. This gives you full debugging functionality including the ability to see the network requests your app is making and add breakpoints to your code. No more console.log('dog.log')!

22
Jan

Custom SSIS Component: File Watcher Enumerator

This page describes a custom SSIS ForEachEnumerator that has been created to provide continuous file watching functionality in SSIS by using a non-infinite loop which times out after a specified period of time. The source code for the component is available on CodePlex and has been tested with SQL Server 2008 R2.Continue Reading..

14
Jan

Ionic – Closing $ionicLoading if your app loses network connectivity.

When loading data to a screen in your app, you have to have some way of notifying the user of what’s happening. You just have to. Not doing so provides a poor user experience, and ultimately leads to the user becoming impatient and/or frustrated with the app, because it doesn’t seem to behaving in a way that they’re expecting.

This isn’t the experience you want to provide your users with.

Conveniently, Ionic, yet again, have provided us with a simple solution to improve the overall UX: $ionicLoading. See here for the documentation.

$ionicLoading is basically a popover that displays a message whilst data is loading. The only issue with this, however, is that when the message is displayed, the user cannot perform any further actions within the app – they have to wait for the data to load. This works fine when you can guarantee that the app will remain connected to a network, but if you lose connectivity, then the $ionicLoading popover is displayed indefinitely (or until you kill the app). Also, a user may just want to continue to use the app while the data is loading, which is again not possible.

We hunted around, but couldn’t find a suitable alternative to $ionicLoading, so we eventually decided to create our own $ionicLoading template. This was essentially the same style as the default popover, but contained a close button – providing the user with the ability to interact with the app, if desired.

Right, enough yakking, and lets get into some code!

First lets create the HTML for the template…

<!-- Setting up a row/col to position the close button -->
<div class="row row-style">
  <div class="col col-10 col-offset-90 col-style">
    <button class="button button-clear button-style" ng-click="closePodcastsLoader()">
    <i class="ion-close-circled"></i>
    </button>
  </div>
</div>
<p>Loading Podcasts...</p>

And our CSS…

.row style {
padding-bottom:0; 
margin-bottom:0; 
margin-top:-19px;
}

.col-style{
text-align:right;
}

.button-style{
line-height: normal;
min-height: 0; 
min-width: 0;
}

As you can see, the template contains HTML and CSS for the positioning of the close button, and for the message that we want to display on the popover. We’ll save this template as popover-template.html in the templates folder (‘templates/popover-template.html’).

Next, the controller code…

.controller('DataLoadingCtrl', function($scope, $ionicLoading) {
  $scope.loadData = function() {
  // function to load some data here, then show the popover with...
    $ionicLoading.show({
      templateUrl: 'templates/popover-template.html',
      scope: $scope
    });
  }
  // function to close the popover...
  $scope.closePopover = function() {
    $ionicLoading.hide();
  }
});

In the controller code we have a function, that when executed, loads some data and displays the $ionicLoading popover whilst this data is loading. You’ll notice that in the $ionicLoading.show() function, we define our templateUrl property as our HTML template.

We then have a $scope.closePopover() function that’s executed when the close button on the popover is ng-clicked. The user now has the freedom to do whatever they want when the $ionicLoading popover is shown.

And that’s it! A simple workaround for a problem that gave us a headache for a little while.

07
Jan

Ionic – Range slider when playing a file with ngCordova’s $cordovaMedia

It’s common knowledge that all good media players can only be considered dev complete, AFTER the implementation of a range slider. Without a range slider, you might as well just toss that shit in the trash, ‘cos ain’t nobody got time fo’ dat. Don’t be that guy. Implement a ranger slider. The following blog post should help you on your way.

In another post we described how to play a media file. The following HTML would go in the same template file as the HTML does in that post.

Template HTML…

 <div class="range range-positive">
    <input type="range" name="podcast-position" min="0" max="{{model.media.length}}" ng-model="model.currentPos" ng-change="sliderPositionChange()"> 
 </div>

The above HTML specifies a start point and an end point for the media, using: min and max, where ‘min’ is the point position that the media will start, and ‘max’ is the length of time to the end of the media.
Since it’s a range slider, we’d obviously want to be able to change the play position of the media by moving the range slider itself. To do this, we need an ng-change and a function that changes the media’s play position: sliderPositionChange().
Ng-model simply tracks the position of the media based on the position of the range slider – it’s position is stored in the model.currentPos variable.

Now we’ve got that out of the way, let’s look at the ng-change function that will allow our range slide to work.

Controller code…

.controller('PlayCtrl', function($scope, $ionicPlatform, $cordovaMedia) {<del datetime="2015-01-21T23:10:51+00:00">
   
   $scope.model = {}; 

   $interval(function() {
     $cordovaMedia.getCurrentPosition(media).then(function(res){
       $scope.model.currentPos = res;
     }); 
   },1000);

   $scope.sliderPositionChange = function() {
     var mediaInMilli = $scope.model.currentPos*1000;
     media.seekTo(mediaInMilli);
   };
});

The most important part about the above code is the $interval function. Inside it we get the current position of the media with $cordovaMedia.getCurrentPosition(media), and assign it to the $scope.model.currentPos variable. The interval period is set at 1000 milliseconds. Now, every second, the $scope.model.currentPos variable will get updated, and since the ng-model of our range slider is model.currentPos, the range slider will update every second too.

The $scope.sliderPositionChange() function above is called when the range slider is moved. When the range slider is moved the ng-model=”model.currentPos” variable is updated and passed into the ng-change="slider.PositionChange()" function (see HTML).
The code inside the $scope.sliderPositionChange function is almost identical to the rewind/fast-foward code in the previous post… The model.currentPos variable is in seconds, the $cordovaMedia.seekTo() function needs the position to be in milliseconds, so we just multiply model.currentPos by 1000, and pass that into the seekTo() function.

Done. So simple, i think everybody got time fo’ dat.

01
Jan

Ionic – Playing a media file with ngCordova’s $cordovaMedia

If you’ve read any of our previous posts, you’ll already have an understanding of how to download a file to your device (and display it), using $cordovaFile. Now that you have the file, let’s play it.

As with the majority of the other posts, ngCordova do most of the legwork for us with their $cordovaMedia plugin.

Plugin installation…

cordova plugin add org.apache.cordova.media

Now, we’ll assume you already have a media file listed and displayed on your app, and get straight into the HTML.

Template Code…

<div class="row" style="padding-top: 0;">
  <div class="col play-buttons-center">
    <button class="button ion-ios-rewind-outline">Rewind</button>
  </div>
  <div class="col play-buttons-right">
    <button class="button ion-ios-play-outline">Play</button>
  </div>
  <div class="col play-buttons-left">
    <button class="button ion-ios-pause-outline">Pause</button>
  </div>
  <div class="col play-buttons-center">
    <button class="button ion-ios-fastforward-outline">Fast Forward</button>
  </div>
</div>

Above we have 4 buttons necessary for playing a file: Rewind, Play, Pause, and Fast Forward. When we press play the play() function is called and we pass through the download that we wish to play. The others buttons (and their functions will just work once a media object is established). Simple stuff. Now let’s look at the Controller code.

Controller code…

.controller('PlayerCtrl', function($scope, $ionicPlatform, $cordovaMedia, $cordovaFile) {
  var directory = 'downloads';
  var filename = 'download.mp3';
  var media;  

  $scope.play = function() {
    return $ionicPlatform.ready(function() {})
    .then(function() {
      return $cordovaFile.checkFile(directory + '/' + filename);
    })
    .then(function(file) {
      media = $cordovaMedia.newMedia(file.nativeURL);
      $cordovaMedia.play(media);
    });
  };

  $scope.pause = function() {
    if (media)
    {
      $cordovaMedia.pause(media);
    }
  };

  $scope.rewind = function() {
    if (media)
    {
      $cordovaMedia.getCurrentPosition(media).then(function(res) {
      var mediaPosition = res - 15;
      var mediaInMilli = mediaPosition*1000;
      media.seekTo(mediaInMilli);
      });
    }
  };

  $scope.fastForward = function() {
    if (media)
    {
      $cordovaMedia.getCurrentPosition(media).then(function(res) {
      var mediaPosition = res + 15;
      var mediaInMilli = mediaPosition*1000;
      media.seekTo(mediaInMilli);
      });
    }
  };
}

The play functionality…

In order to play the file with $cordovaMedia, you first have to create a media object that $cordovaMedia can consume. We do this by calling $cordovaMedia.newMedia() and passing in the location of the file on the device with. The trick here is to get the URL to the file in the correct format. We found the easiest way to achieve this was to use $cordovaFile.checkFile() and read the nativeURL property of the result. Finally we can play the media object by calling $cordovaMedia.play(media).

Pause Functionality…

Nothing really worth instructing here. We just check that if a media object is present, call the $cordovaMedia.pause(media) function on it.

Rewind/Fast-Forward Functionality…

Finally, the rewind/fast-forward code – which was marginally tricky, but still relatively easy and straightforward.

To rewind/fast-forward we make use of 2 functions provided by $cordovaMedia; .getCurrentPosition() and .seekTo().
$cordovaMedia.getCurrentPosition(media) will (yep, you guessed it) return the current position of the media file, IN SECONDS.
When the current position is returned, we add/subtract 15 seconds from it (var mediaPosition = res + 15;) – this is our rewind/fast-forward.
Next we want to seekTo() our new position, to perform the rewind/fast-forward. Unfortunately, seekTo() is expecting our new media’s position to be calculated in milliseconds, so we have to convert this, by simply multiplying the media position by 1000 (var mediaInMilli = mediaPosition*1000;).
We now have our new media position in milliseconds, so we can just go ahead and call media.seekTo(mediaInMilli) – this will rewind/fast-forward our media file to that position, and it will still continue to play.