PhoneGap Build

ConfiGAP 1.3.11 released

ConfiGAP

I released an update to ConfiGAP today. One of my users found a couple of issues that snuck in. The first was the size value for retina iPad splash screens. There was conflicting documentation on the size, but I think I have the proper value. The other was an issue with setting the icon and tile images for Windows Phone.

I also added support for PhoneGap 3.4. Now PhoneGap Build has NOT enabled support for this version yet, but I figured it should occur really soon. Well, on April 8th, PhoneGap Build announced support for PhoneGap 3.4 ūüôā

If you find an issue, or have a comment, please drop me an email.

 

Edge Animate & PhoneGap Build

On the PhoneGap Build forum, someone was inquiring about how to have an Edge Animate animation play audio when used within a PhoneGap application. For those who are not familiar with Edge Animate, it is an animation design tool from Adobe that uses web standards for the animations. Their most recent release added the ability play audio with the animation.

Since I am familiar with both tools, I thought I would create a simple demonstration of how to have an Edge Animate composition working in PhoneGap.

Although HTML5 does have an <audio> element, PhoneGap’s web view will not enable the audio to function. Instead we will need to rely on the Media API to do the actual audio playback.

EdgeAnimation

I first created a simple animation. A cloud floating across the screen, and when the Starling bird is tapped, it will play a tweet sound effect, and fly off screen. Once I have my animation completed, the next step is to publish it for the web.

We can now make some various edits to the index.html file and the index_edgeActions.js file.

Let’s update the index.html file first.

Within the <head> portion of the file, include a meta viewport element. This will ensure that the webview will be properly sized.

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

Next, we need to include the reference to the PhoneGap library. Add the following at the end of the <head> section.

<script src="phonegap.js"></script>

Go ahead and save this file.

Now, we need to make some changes to the index_edgeActions.js file. Depending on how complex your animation is this file might be quite complex, but I kept this animation very simple so you can understand what you have to modify.

We first need to comment out the audio playback calls that Edge Animate uses.  Comment out this line of JavaScript:

sym.$("tweet")[0].play();

Now add this JavaScript:

playPGAudio(getPhoneGapPath() + 'audio/tweet.mp3');

For your animation will need to locate all the instances where Edge Animate plays audio and make the change from calling it’s playAudio function to our PhoneGap friendly audio function. This sample animation only has one audio event.

This new function will use the Media API plugin to play the audio instead. At the end of the file, we need to add two functions. The first function is the playPGAudio. Since the Edge Animate library already uses playAudio, we need to have our function use a different name.

This function will take the url of our media file, then trigger the play method.

// Play audio
//
function playPGAudio(url) {
 // Play the audio file at url
 console.log('playPGAudio');
 var my_media = new Media(url,
   // success callback
   function () {
     console.log("playAudio():Audio Success");
   },
   // error callback
   function (err) {
     console.log("playAudio():Audio Error: " + err);
   }
 );
 // Play audio
 my_media.play();
}

The other function we need to include a helper function that will assist in locating the audio file’s full file path.

function getPhoneGapPath() {
var path = window.location.pathname;
 path = path.substr( path, path.length - 10 );
 return 'file://' + path;
};

Save this file.

The final piece of the puzzle is to ensure that our config.xml has to include the Media plugin and the File plugin references, as well as enabling any device permissions that might be needed. I naturally used ConfiGAP to create my config.xml file. I opted to skip defining app icons and splashscreens.

The entire project is then uploaded to PhoneGap Build and a native app generated. Once installed on my devices, I have a bird animation flying, tweeting away.

This sample project is available from my GitHub repo.

UPDATE:

I posted an update on this here.

 

Lynda.com

I am very excited to announce that I am developing my first course for lynda.com!¬†It is quite an honor to be to working with such a talented group of people. A big thank you to James Williamson, who helped craft my demo movie. My initial effort will be “Up and Running with PhoneGap Build”.

This going to be a fun and exciting challenge. One the first challenges will be creating the sample app to showcase the service.

ConfiGAP updated

ConfiGAP

Demoing software always seems to be one of the best ways to find a bug in your application. Recently I was demonstrating ConfiGAP, and stumbled across a bug that prevented you from switching between the platforms for the application icons. Sigh…

Verion 1.3.6 fixes this ‘issue’ and adds support for PhoneGap 3.2. Now, be aware that PhoneGap Build ¬†3.2 is NOT supported ¬†yet, but should be soon.

We are looking to add a lot of the new settings that are available to PhoneGap Build. The UI is mostly in place, it is the parsing and export code that is still being worked on.

ConfiGAP updated!

ConfiGAP

PhoneGap Build has just gotten an update, and we have been working on adding some of the new features into the latest version of ConfiGAP. Here is a breakdown of all the new features:

 

PhoneGap v3.0 Support!

Obviously this is the big one. You can learn about this release here.

Platform Specific Builds

PhoneGap Build now supports the ability to control which platforms you wish it to build for.

Custom Plug-ins

Since the list of third party plug-ins keeps growing (yeah!), we needed to find a solution for developers who are using this capability with their projects. ConfiGAP will now read and save the markup for any custom plugins that you may have added. There is no user interface for interacting with them at this time.

Core API Plug-ins

Another major change to PhoneGap was moving all the APIs to stand alone plug-ins. This allows for smaller and faster applications, as you no longer need to include any unwanted APIs into your application.

XXHDPI Icon support

We added support for this new icon size for Android.

iOS7 Icon support.

Support for these new icons sizes. PhoneGap Build does not yet support them at this time. Rumor has it that this will be added in v3.1.

What’s next?

The PhoneGap Build team has also enabled several other platform settings (https://build.phonegap.com/docs/config-xml#preferences), and we will be looking to add them in the next build.

You can download the application here.