Final leg of the race

Welcome back from the breather we took last week for IDF2012.  It has been a very busy 15 days, in which we -

1. Had a blast at IDF, demoing the current version of BioIQ on an UltraBook.
2. Had a call with the good folks at Microsoft in preparation to submitting BioIQ to the Win8 store.
3. Created the AppUP version of BioIQ

In the midst of all the above, we also got our third edu-puzzle game, GeometrIQ live  on Android Play and Apple iOS. Please take it for a spin and share your thoughts with us.

In the rest of this post we will talk about our experience in creating the AppUp version and the learning and results from our discussion with Microsoft engineers.


BioIQ for AppUp

Like we have said before, we want to have an AppUp  version along with Metro version.   The primary objective of this version is to be available to schools, teachers, libraries and students who will take time to upgrade to Win 8.

Intel provides the online tool AppUp encapsulator  to generate the Exe/MSI from the HTML5 app.


Intel App-UP HTML Wraper

Tip: While uploading the ZIP containing our app, first we zipped BioIQ instance folder in our application and the encapsulator didn’t like it. Instead, select all files-and-folders in BioIQ instance folder and zip them and things will just fly :).

Testing the resulting app, revealed the issues to fix.  The simplest way to setup a debug environment for this is  

- Download C++ library, install the SDK and this will act as container /server to run the Desktop Application in Debug mode.
- To be able to debug, copy the content of app (BioIQ instance folder  in our case) to   Documents\Intel AppUp(TM) Encapsulator Debugger\cefclient folder.
- Run CEFClient application Documents\Intel AppUp(TM) Encapsulator Debugger folder.

Console.log file will have Javascript console.log output.


We wont talk about every single item that needed attention, just as an example we  had to take care of HTML Canvas behavior between the mobile-device environment and the fixed-screen-size Windows-Desktop app. The code-snippet below demonstrates the changes -

 doc.createCanvasFor = function (doc) {
      var box = getData(doc),
      c_width = box.width(),
      c_height = box.height(),
      result = getData('<canvas width="' + c_width  + '" height="' + c_height  + '"></canvas>')[0];
      return result

Among set of APIs provided by  Intel AppUp, we will be  using the In-App Unlocking API, which enables unlocking additional game levels within an app.  AppUp also provides apis for enabling physical good purchase associated with the application (In-App Purchase) and    upgrading the app from trial version to full-version (In-App Upgrade), features within the current application. More details can be found here.

Device Roaming and a bunch of ‘work’

During the IDF keynote on Day 1, Dadi showed various form factors of Ultrabooks - tablets without keyboards, detachable screen ultrabooks and normal ultrabooks).  So lets say a user starts playing on one device takes a break and picks up a second device, she will be able to start playing exactly where she left of.  To achieve this, the client app maintains app status, which is stored locally(data-changed-event - link ), but synced periodically to the cloud.  When the second device is activated, it picks up state from the cloud.

The code-snippet below demonstrates the changes -

var applicationData = Windows.Storage.ApplicationData.current;
var roamingSettings = applicationData.roamingSettings;
var roamingURL;

function loadBioIQDefaultGame() {

        var currentgame;
        var gamedata = new Windows.Storage.ApplicationDataCompositeValue();
        if (!roamingSettings.values["CurrentGameDetails"])
            gamedata["gamename"] = "plantcell";
            roamingSettings.values["CurrentGameDetails"] = gamedata;
        gameData = roamingSettings.values["CurrentGameDetails"];
        currentGame = gameData["gamename"];
        var gamePurchasedState = localSettings.values[currentGame];
        if (roamingSettings.values["CurrentSuspendedUrl"]) {
                setTimeout(function () { location.href =
                                     roamingSettings.values["CurrentSuspendedUrl"] = "null"; }, 10);
        else {
            if (gamePurchasedState["purchased"] == 0) {
                if (gamePurchasedState["package"] == 2) {
                    $("#buydetails1").css("display", "block");
                if (gamePurchasedState["package"] == 3) {
                    $("#buydetails1").css("display", "block");
            else {
                setTimeout(function () { location.href = currentGame + ".html" }, 10);

This and a few other feature suggestions and requirements came from our discussion with Microsoft.  We had originally reached out to confirm that in-app purchase was available on Win 8 from day 1, and we were happy to hear Microsoft confirm iap availability.

We are coming up the final stretch of this 6 week cycle and feel good about putting it all together next week.


Wesley Culbertson | 20-Sep-2012 2:33 am

Thanks for all of your work on this web page. I am looking forward to reading more of your posts in the future.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Enter the characters shown in the image (to confirm you are not a machine)