Qt ,Maemo and some other stuff

Custom UISwitch in iOS

2015-10-10T22:25:00.001-07:00

I wanted to create Custom UISwitch in my iOS game. Initially I just waned to change size, font and color and for that I used UICustomSwitch from Hardy Macia found at here. It's quite easy to use and customisable, but then I wanted to switch to use custom image instead of standard one. For that I need to modify code a bit, below is the code which use custom image to create UISwitch. BTW this is how it looks

Header is same as original implementation, but I removed unnecessary properties and added left and right images required to display on and off images for switch.

@interface UICustomSwitch : UISlider {
    BOOL on;
    UIImageView* leftImage;
    UIImageView* rightImage;
 
    BOOL touchedSelf;
}

@property(nonatomic,getter=isOn) BOOL on;
@property (nonatomic, retain) UIImageView* leftImage;
@property (nonatomic, retain) UIImageView* rightImage;

- (void)setOn:(BOOL)on animated:(BOOL)animated;

@end

Now lets see implementation. Below is code for initialising the UISwitch with custom rect. You can also see we are adding On and Off image as left and right subview to switch.

-(id)initWithFrame:(CGRect)rect
{    
    if ((self=[super initWithFrame:rect])) {
 [self awakeFromNib];
    }
    return self;
}

-(void)awakeFromNib
{
    [super awakeFromNib];
 
    self.backgroundColor = [UIColor clearColor];
    
    [self setThumbImage:[Util imageNamed:@"switch"] 
        forState:UIControlStateNormal];
    [self setMinimumTrackTintColor:[UIColor clearColor]];
    [self setMaximumTrackTintColor:[UIColor clearColor]];
    
    self.minimumValue = 0;
    self.maximumValue = 1;
    self.continuous = NO;
 
    self.on = NO;
    self.value = 0.0;
 
    self.leftImage = [[UIImageView alloc] initWithFrame:self.frame];
    self.leftImage.image = [Util imageNamed:@"on"];
    [self addSubview: self.leftImage];
    [self.leftImage release];
    
    self.rightImage = [[UIImageView alloc] initWithFrame:self.frame];
    self.rightImage.image = [Util imageNamed:@"off"];
    [self addSubview: self.rightImage];
    [self.rightImage release];
}

Now you should be able to see UISwitch with custom images, we now need to add code required to on and off switch from code and change image accordingly.

- (void)setOn:(BOOL)turnOn animated:(BOOL)animated;
{
    on = turnOn;
 
    if (animated) {
 [UIView beginAnimations:@"UICustomSwitch" context:nil];
 [UIView setAnimationDuration:0.2];
    }
 
    if (on) {
 self.value = 1.0;
        self.rightImage.hidden = YES;
        self.leftImage.hidden = NO;
    } else {
 self.value = 0.0;
        self.rightImage.hidden = NO;
        self.leftImage.hidden = YES;
    }
 
    if (animated) {
 [UIView commitAnimations]; 
    }
}

Now finally we also have to add code to enable interaction.

- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{
    [super endTrackingWithTouch:touch withEvent:event];
    touchedSelf = YES;
    [self setOn:on animated:YES];
}

- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    [super touchesBegan:touches withEvent:event];
    touchedSelf = NO;
    on = !on;
}

- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{
    [super touchesEnded:touches withEvent:event]; 
    if (!touchedSelf) {
 [self setOn:on animated:YES];
 [self sendActionsForControlEvents:UIControlEventValueChanged];
    }
}

That's it, I hope this will help.

The Math Game for iOS

2015-08-16T01:23:00.002-07:00

If you have read my previous posts, you might already know I was trying to learn Swift language. While doing so I tried to create a simple game.

Finally I was able to complete the app and was able to publish it as well. You can download app from here.

Below is demo of the game.

You can also get more information about app here.

Displaying Game Centre Leaders board from Swift

2015-07-17T20:09:00.000-07:00

In last post, I showed how we can authenticate local player and how we can post score to default leader board.

In this post, I will show how we can display leader board using swift gamekit API. Below code shows how we can display GKGameCenterViewController. Game center viewcontroller needs delegate, which is called when view is dismissed. Also we need parent viewcontroller which will be used to display GKGameCenterViewController.

func showLeaderboard(viewController: UIViewController, 
    gameCenterDelegate: GKGameCenterControllerDelegate) {
    let gameCenterVC: GKGameCenterViewController = GKGameCenterViewController();
    gameCenterVC.leaderboardIdentifier = defaultLeaderBoard;
    gameCenterVC.gameCenterDelegate = gameCenterDelegate;
    viewController.presentViewController(gameCenterVC, animated: true, completion: nil);
}

Now we have code that can display leader board, but we need to make our class conform to GKGameCenterControllerDelegate protocol and implement required method. Below is code for delegate method. Which simply dismiss presented view controller.

func gameCenterViewControllerDidFinish(gameCenterViewController: GKGameCenterViewController!) {
    gameCenterViewController.dismissViewControllerAnimated(true, completion: nil)
}

So, as you can see it's quite simple. Hope this will be helpful.

Creating array of IBOutlets of NSLayoutConstraint's from Swift in iOS

2015-07-10T21:14:00.000-07:00

While working on my iOS app, I wanted to modify UI Constraint set from Interface Builder from Swift code.

Below video shows how we can create Array of IBOutlets using Interface Builder. Here I am creating array of NSLayoutConstraint, which I want to modify from Swift Code.

Now lets see how we can manipulate constraints from swift. First we need to define array of IBOutlet. Below code shows the same.

@IBOutlet var constraints: Array?

Now, once you connect IBoutlet from Interface Builder as shown in above video. You can use those. In below code I am modifying NSLayoutConstraint's constant value.

if( Utils.isIPad() ) {
    for constraint: NSLayoutConstraint in constraints! {
        if(Utils.isIPad()) {
            constraint.constant = 30
        }
    }
}

That's it, Thank you for reading.

Posting score to Game Kit Leader board using swift

2015-06-28T22:37:00.001-07:00

As you might already know, I recently started exploring Swift language and now I am trying out GameKit framework. While I have some experience in working with GameKit using Objective C. I wanted to do the same thing using swift. As such there are no API changes while using GameKit with Swift or Objective C. However there are some syntax change.

In this post, I will show how to Authenticate local player using GameKit framework and post score to LeaderBoard defined in iTune Connect Application setting.

Following is code snippet that shows how to Authenticate Local player. This function takes ViewController as argument. Login dialog will be displayed using this View controller. Rest will be taken care by GameKit framework.

func authenticateLocalPlayer(viewController: UIViewController) {
    let localPlayer: GKLocalPlayer = GKLocalPlayer.localPlayer()
    
    localPlayer.authenticateHandler = {(ViewController, error) -> Void in
        if((ViewController) != nil) {
            // 1 Show login if player is not logged in
            viewController.presentViewController(ViewController, animated: true, completion: nil)
        } else if (localPlayer.authenticated) {
            // 2 Player is already euthenticated & logged in, load game center
            self.isGameCenterEnabld = true                
        } else {
            // 3 Game center is not enabled on the users device
            self.isGameCenterEnabld = false
            println("Local player could not be authenticated, disabling game center")
            println(error)
        }
        
    }
    
}

Now we have authenticated local player. So when we are ready to post score to Leader Board. We can use below function. Here we are posting score to "defaultLeaderBoard". Which is identifier of Leader board defined in iTune connect App setting.


func submitScore( score: Int) {
    if( !isGameCenterEnabld ) {
        return;
    }
    
    var sScore = GKScore(leaderboardIdentifier: defaultLeaderBoard)
    sScore.value = Int64(score)
    
    let localPlayer: GKLocalPlayer = GKLocalPlayer.localPlayer()
    
    GKScore.reportScores([sScore], withCompletionHandler: { (error: NSError!) -> Void in
        if error != nil {
            println(error.localizedDescription)
        } else {
            println("Score submitted")
            
        }
    })
}

That's it. Hope this will be useful.

Using NSNotificationCenter in Swift

2015-06-27T18:42:00.001-07:00

NSNotificationCenter is a convenient method to implement Observer pattern in iOS, something similar to what we say Signal/Slot in Qt framework.

To register one self as observer to some event, you can use addObserver method form NSNotificationCenter. In below code you are adding self as observer, selector is method which will be called when event is triggered, name is name of event or notification in which we are interested in, and object is object from which we want to receive event from, nil means we are ready to receive event from any object.

NSNotificationCenter.defaultCenter().addObserver(
    self, 
    selector: "gameViewClosed", 
    name: "gameViewClosed", 
    object: nil);

Now to trigger the notification, you can use postNotificationName method from NSNotificationCenter. Following code shows the same. Here we are sending notification for "gameViewClosed" event, object nil mean deliver event to all interested objects.

NSNotificationCenter.defaultCenter().postNotificationName(
    "gameViewClosed", 
    object: nil);

That's it, thanks for reading.

Playing sound using Swift

2015-06-25T19:11:00.000-07:00

Posting small code snippet to that shows how to play sound using Swift in iOS.

First we need to import AVFoundation.

import AVFoundation

Then we need to create instance of AVAudioPlayer. I created a small utility function like below for the same.


private static func createAudioPlayer
( sound: String, type: String ) -> AVAudioPlayer {

    var error:NSError?;
    let soundUrl = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource(sound, ofType: type)!);
    println(soundUrl)
    
    var player = AVAudioPlayer(contentsOfURL: soundUrl, error: &error);
    player.prepareToPlay();
    return player;
}

And this function can be used like below.

public init() {
    // Removed deprecated use of AVAudioSessionDelegate protocol
    AVAudioSession.sharedInstance().setCategory(AVAudioSessionCategoryPlayback, error: nil);
    AVAudioSession.sharedInstance().setActive(true, error: nil);
    
    correctAns = MusicHelper.createAudioPlayer("correctAns", type: "wav");
    wrongAns = MusicHelper.createAudioPlayer("wrongAns",type: "wav");
}

Now we can use AVAudioPlayer's play API to play the sound. Like below.


public func playCorrectAnsSound() {
    correctAns.play();
}

public func playWrongAnsSound() {
    wrongAns.play();
}

That's it, thanks for reading.

Performing Segue and Passing data in iOS

2015-06-07T02:23:00.000-07:00

I was trying to learn how to perform view switching using Segue for UI created by StoryBoard. Using Segue is quite easy and convenient. You can create Segue from Interface Builder, which associate action to view. Like if you click some button then you can associate this click action with view switch and you can select which view to switch to. This all is quite simple and can be done using simple drag and drop.

In case you want to perform view switch manually without any user interaction, you can call "performSegueWithIdentifier", like below. Here once my game is finished, I am calling "GameOverSegue", which will switch view to GameOver view.

self.performSegueWithIdentifier("GameOverSegue", sender: self)

If you want to pass some data while performing Segue, your calling ViewController needs to override "prepareForSegue" function. In this function you can set data to called view. Like below, I want to pass score to my GameOver view.

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if( segue.identifier == "GameOverSegue") {
        let gameOverVC: GameOverViewController = 
            segue.destinationViewController as! GameOverViewController;
        gameOverVC.setScore(self.score)
    }
}

Thanks, hope this will be helpful.

Drawing round border around UIView in iOS

2015-06-06T19:20:00.000-07:00

I wanted to create a subview UIView with round border in iOS. I found following code works very well to draw round border around UIView. While this code is written swift you can easily write similar code in Objective C as well.

Following is the code. As you can see, I selected subview UIView and made is IBOutlet using Interface Builder. Once that is done you can see round border around view.


@IBOutlet weak var contentView: UIView?
    
override func viewDidLoad() {
    super.viewDidLoad();
        
    contentView?.layer.borderWidth = 3.0
    contentView?.layer.borderColor = UIColor(red:102/255,green:102/225,blue:102/225, alpha:1).CGColor
    contentView?.layer.cornerRadius = 14
}

And following how it looks.

Hiding status bar in iOS8 using Swift

2015-06-05T20:18:00.000-07:00

I recently started learning swift, while learning I started to create simple game. I wanted to make my game full screen, but I was unable to hide top status bar from Interface builder. No matter what I change that status bar was always visible.

Buf I found following code snippet, if you add this code in your View Controller file, you can easily hide status bar.

override func prefersStatusBarHidden() -> Bool {
    return true;
}

Following how my ViewController file looks after adding this code.

class ViewController: UIViewController {
        
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    override func prefersStatusBarHidden() -> Bool {
        return true;
    }
}

That's it. Hope this will be hopeful.

Color Animation using Animator with Unity3D

2015-05-03T22:47:00.002-07:00

I created a small demo application to demonstrate how Animation can be done using Animator and State Machine with Unity5. This demo creates a Blinking Animation on Mouse click.

Following is final output of this demo.

Below post shows, how above animation can be created.

-> To begin, First create a simple cube and apply a material on the cube. Setup should look like below.

-> Then using "Add Component", add Animator to this cube.

-> Once Animator is added, open Animation window using "Window" -> "Animation", We will need to use while performing the animation.

Animator performs animation using State Machine and this state machine should have default state. Animator will transit to this default State when object is created. In Animator, Animation clip is considered as a State, so lets add a Animation clip and name it default.

-> Our default state will not have any animation, it should show just initial color. Let's just add one frame with current color. Like below.

-> Now we have default state, let's add another state which will perform "Blinking" animation.

-> Now we should add frames, so let's add color property and frames to animate color.

After adding these frames color should animate like below.

-> Now we have Blinking animation state, we are now ready to create a State Machine. Open Animator window by clicking on "Animator" object, it should look like below.

-> We should now add a Parameter which will be used to Trigger animation. On "Animator" window add new boolean parameter and name it "blink".

Following video shows how to create transition and how to add condition to those transition.

-> Now we have state machine with transition and condition, but we want Blink Animation to terminate once its finished. Let's open "Blink Animation" and add Animation event line shown in below image.

This will prompt you to select function to be invoked when Animation frame is reached. You can select function from attached Script.

Following video shows the same process.

-> Finally, We also need to add a script to Cube object. Following is code for the script. In script we are setting "blink" transition parameter of Animator to true on mouse click. While StopAnimation sets "blink" parameter to false when animation event is called.

using UnityEngine;
using System.Collections;

public class MyAnimation : MonoBehaviour {

 private Animator animator;

 void Awake() {
  animator = GetComponent ();
 }

 void OnMouseUp() {
  startAnimation ();
 }

 public void startAnimation() {
  animator.SetBool ("Blink", true);
 }

 public void stopAnimation() {
  animator.SetBool ("Blink", false);
 }
}

And now if run project and click cube, you should see blink animation as per demo video. That's it hope this post will be helpful.

Handling Drag and Drop with Unity 3D

2015-04-12T04:25:00.000-07:00

Drag and Drop is quite useful and we need to implement this quite often in our project. While working on one of my Unity Project, I required to implement the same.

There are some options but I found code described in this post quite simple to use with my project. In this post I will describe how I achieved the same.

So, Let's first create a C# script, I named it Drag.cs and added following code to it. This script will enable touch interaction to added GameObject and will move object along with touch. Also add BoxCollider to GameObject, so we can detect collision.


using UnityEngine;
using System.Collections;
 
public class Drag : MonoBehaviour {
    private Plane plane;
    private Vector3 v3Offset;


    void OnMouseDown() {
 plane.SetNormalAndPosition
             (Camera.main.transform.forward, transform.position);
 Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition);
 float dist;
 plane.Raycast (ray, out dist);
 v3Offset = transform.position - ray.GetPoint (dist);         
    }

    void OnMouseUp() {
    }

    void OnMouseDrag() {
 Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition);
 float dist;
 plane.Raycast (ray, out dist);
 Vector3 v3Pos = ray.GetPoint (dist);
 transform.position = v3Pos + v3Offset;  
    }
}

Now, suppose we have another GameObject and we want to detect when GameObject we just created with above script, is dropped on it. To detect drop easily let's first add RigidBody to this GameObject and BoxCollider. After adding BoxCollider also check isTrigger is true. After doing this we need to add C# script to it which will handle drop. Let's name it to Drop.cs and add below code to it.

Below script observe the Collision. When collision happens it checks which object is collided with it. If collided object is Drag object then do something.

using UnityEngine;
using System.Collections;

public class Drop : MonoBehaviour {


    void OnCollisionEnter2D (Collision2D other) {
    }
 
    void OnCollisionExit2D(Collision2D other){
    }
 
    void OnTriggerStay2D (Collider2D other) {
        if( other.gameObject.tag == "Drag" ) {
            // Object dropped, handle the drop
        } 
    }
}

That's pretty much it, hope this helps.

Sprite with Text in Unity3D

2015-04-04T23:10:00.000-07:00

I am working on one game where I wanted to show text over sprite. With new Unity UI System, it's quite easy to create button as sprite and text over it.

But if you want to create a traditional sprite and add text to it, this post describes the same.

Basic idea is to add 3D text component to sprite, but if you have tried it then you might know after adding 3D text component we need to move it to same sorting order as sprite. Also we need to layout text properly to set alignment.

Before we begin, I assume you know how to create Sprite, how to create 3D text component and make it a Prefab object. If not you can refer this article to know how to make Prefab object.

Finally, following is my script which I attached to Sprite. Once added to Sprite, It will create 3D text component from provided Prefab object and add the same to Sprite.

using UnityEngine;
using System.Collections;
 
public class TextScript : MonoBehaviour {
 
 public string text;
 public GameObject textPrefab;
    
 void Start() {
  GameObject text = Instantiate(textPrefab) as GameObject;
  text.transform.parent = gameObject.transform;
  text.transform.rotation = gameObject.transform.rotation;

  TextMesh textInstance = text.GetComponent();
  textInstance.text = text;

  Renderer textRenderer = text.GetComponent ();
  Renderer thisRenderer = GetComponent ();

  textRenderer.sortingLayerID = thisRenderer.sortingLayerID;
  textRenderer.sortingOrder = thisRenderer.sortingOrder+1;
 
  Bounds textBounds = textRenderer.bounds;
  Bounds parentBounds = thisRenderer.bounds;
  
  float x = gameObject.transform.position.x 
                     - (textBounds.size.x/2); 
  float y = gameObject.transform.position.y 
                     + (textBounds.size.y/2);
  textInstance.transform.position = 
                     new Vector3(x, y, parentBounds.center.z + 1);
 }
}

That's it, you can add this script to any component and add text over it.

Notification on property change in iOS SDK

2015-01-24T19:35:00.000-08:00

I have used QML quite a lot in my projects and there is one quite nice feature in QML that makes implementation quite easy. The feature is Property change notification.

Apple iOS SDK also similar mechanism named Key-Value Observing mechanism. Here is Apple's documentation for the same.

Following is simple code which demonstrate how we can use Key-Value Observer API to get notification on property changes. First we need to register observer and in which property observer is interested in. Code shows, class "self" is interested in property change event from propertyOwner for "isPlaying" property.

[propertyOwner addObserver:self
    forKeyPath:@"isPlaying"
       options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld
       context:NULL];

Now, we have registered observer for property change, we need to implement method which will be called in case of property is changed. Following code shows the same. We need to check which object sent event and for which property, then we can take appropriate action.

- (void) observeValueForKeyPath:(NSString *)path ofObject:(id) object change:(NSDictionary *) change context:(void *)context
{
    // this method is used for all observations, so you need to make sure
    // you are responding to the right one.
    if (object == propertyOwner && [path isEqualToString:@"isPlaying"]) {
        // now we know which property is modified
    }
}

When we are done and don't need notification any more we can remove observer. Below is code for the same. It's safe to use try and catch as we might get exception if we try to remove observer when none is registered.

    @try{
        [propertyOwner removeObserver:self forKeyPath:@"isPlaying"];
    }@catch(id anException){
        //do nothing, obviously it wasn't attached because an exception was thrown
    }

Now whenever "propertyOwner" changes's "isPlaying" property then "self" will get notification and "observeValueForKeyPath" method will get called.

Showing Remote Image using ImageView in BB10 Cascades

2014-12-27T18:16:00.000-08:00

While working on my BB10 App update, I required to show Remote Image using ImageView BB10 cascades API. ImageView or Image component by default does not support loading image from URL on internet. I implemented a custom component which serve the purpose and also easily integrated with ImageView.

Following is implementation for the same, I hope it will be useful to someone.

Let's start by showing how my custom component works. Following code shows how to use ImageDownloader custom component along with ImageView to display Grid of images from internet. Data Model contains two kind of URL, url for low resolution image and url for high resolution image.

import my.library 1.0

ListView {
  id: listView
  
  layout: GridListLayout {}
  dataModel: model;
  
  listItemComponents: [
      ListItemComponent {                        
          ImageView {
              id: imgView
              imageSource: "default_image.jpg"  
                                        
              attachedObjects: [
                  ImageDownloader {
                      id: imageLoader
                      url: ListItemData.mediumImage
                      onImageChanged: {                 
                          if (imageLoader.isVaid) {
                              imgView.image = imageLoader.image
                          }
                      }
                  }
              ]
          }
      }
  ]
}

ImageDownloader component is available in QML because we imported "my.library". We can make any C++ code available to QML by registering it to QML System, folloiwing snippet shows how we can register C++ component to QML system.


#include "ImageDownloader.h"

int main(int argc, char **argv) 
{
 Application app(argc, argv);

 qmlRegisterType<ImageDownloader>("my.library",1, 0, "ImageDownloader");

 QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(&app);

 AbstractPane *root = qml->createRootObject();
 app.setScene(root);

 return Application::exec();
}

Now that custom component is ready to be used with QML, let's see how its implemented. Below if header file for ImageDownloader class. We are defining few properties like url, image and isValid. By setting "url" we can initiate download of image, when "image" download is finished downloaded image can be accessed by using "image" property. We can check if image is valid or not by checking "isValid" property. we are also defining few signal like "urlChanged" and "imageChanged", which are emited when url is changed or image is downloaded. And we are using QNetworkAccessManager to download image from internet.

#ifndef IMAGEDOWNLOADER_H_
#define IMAGEDOWNLOADER_H_

#include 
#include 

class QNetworkAccessManager;

class ImageDownloader: public QObject
{
    Q_OBJECT
    Q_PROPERTY(QVariant image READ image NOTIFY imageChanged)
    Q_PROPERTY(QString url READ url WRITE setUrl NOTIFY urlChanged)
    Q_PROPERTY(bool isVaid READ isValid CONSTANT);
public:
    ImageDownloader( QObject* parent = 0);
    virtual ~ImageDownloader();

signals:
    void urlChanged();
    void imageChanged();

private slots:
    QString url() const;
    void setUrl( const QString& url);

    QVariant image() const;
    bool isValid() const;

    void startDownload();
    void onReplyFinished();

private:
    QNetworkAccessManager mNetManager;
    QString mImageUrl;
    bb::cascades::Image mImage;
    bool mIsValid;
};

#endif /* IMAGEDOWNLOADER_H_ */

Implementation is also quite simple, let's see how its implemented. On URL change, we are initiating the image download using QNetworkAccessManager. When download is finished, we are reading image data in to buffer and creating Image using BB10 Image API.

#include "ImageDownloader.h"

#include <QNetworkAccessManager>
#include <QNetworkRequest>
#include <QNetworkReply>

ImageDownloader::ImageDownloader(QObject* parent):
    QObject(parent), mIsValid(false) {}

ImageDownloader::~ImageDownloader() {}

QString ImageDownloader::url() const {
    return mImageUrl;
}

void ImageDownloader::setUrl( const QString& url)
{
    if(url != mImageUrl) {
        mImageUrl = url;
        mIsValid = false;
        mImage = bb::cascades::Image();
        emit urlChanged();
        emit imageChanged();
        startDownload();
    }
}

QVariant ImageDownloader::image() const {
    return QVariant::fromValue(mImage);
}

bool ImageDownloader::isValid() const {
    return mIsValid;
}

void ImageDownloader::startDownload() {
    QNetworkRequest request(mImageUrl);
    QNetworkReply* reply = mNetManager.get(request);
    connect(reply, SIGNAL(finished()), this, SLOT(onReplyFinished()));
}

void ImageDownloader::onReplyFinished() {
    QNetworkReply* reply = qobject_cast(sender());
    QString response;
    if (reply) {
        if (reply->error() == QNetworkReply::NoError) {
            const int available = reply->bytesAvailable();
            if (available > 0) {
                const QByteArray data(reply->readAll());
                mImage = bb::cascades::Image(data);
                mIsValid = true;
                emit imageChanged();
            }
        }
        reply->deleteLater();
    }
}

That's all we have to do to do display remote image in BB10, hope you liked it.

Resolving "_clock$UNIX2003", referenced from" error

2014-12-20T20:17:00.000-08:00

I was trying to build Unity 3D project for simulator SDK. I wanted to get different screen size screen shot. But when I tried to build it I got following build error.

_clock$UNIX2003", referenced from

I found one work around to resolve this issue. We need to add following patch to main.mm file.

#include <time.h>

// "_clock$UNIX2003", referenced from:
//Temporary hack for building Simulator Project for Unity
extern "C"
{
    clock_t
    clock$UNIX2003(void)
    {
        return clock();
    }
}

Once I added above patch build started working fine for me and I was able to run project on Simulator.

Your Shot Ubuntu Touch Scope

2014-11-23T03:38:00.003-08:00

You might have heard about Ubuntu Touch, and one of unique feature of Ubuntu Touch is Scope. Recently they also announced Ubuntu Touch Scope competition. This got me interested, I wanted to learn about Scope development, so I thought to take part as well in the competition.

You can get more information about competition here.

Recently I discovered Your Shot photo community, I like pictures uploaded there and I visit site every day to checkout newly updated photos, so I thought it is good candidate for Scope development and I decided to write score for Your Shot photo community.

Your Shot has nice Jason based web API and I was able to create scope quite easily using Ubuntu Touch socpe's Jason template. In fact I was able to get decent working scope in few hours using template. Documentation is also quite good and rich with API Reference, Guide and Tutorials.

Here is demo for the same running on my desktop.

And Few snapshot.

It looks like now I am ready to write more complex Scope but may be later.

Creating dynamic QML object asynchronously

2014-10-30T07:44:00.000-07:00

We can create QML object dynamically by using createComponent and createObject API.

Like follow,

var component = Qt.createComponent("Button.qml");
if (component.status == Component.Ready)
    component.createObject(parent, {"x": 100, "y": 100});

You can find more information regarding same here.

Latest Qt release added new API named incubateObject. This allows object to be created in asynchronously. You can find more information about this API here.

Following code I written for Ubuntu touch calendar application, which uses the same. Here thing to remember is that incubateObject returns the incubator and not created object itself. You need to get object from incubator by incubator.object call.

var incubator = delegate.incubateObject(bubbleOverLay);
if (incubator.status !== Component.Ready) {
    incubator.onStatusChanged = function(status) {
        if (status === Component.Ready) {
            incubator.object.objectName = children.length;
            assignBubbleProperties( incubator.object, event);
        }
    }
} else {
    incubator.object.objectName = children.length;
    assignBubbleProperties(incubator.object, event);
}

Creating array of IBOutlet

2014-09-13T20:13:00.001-07:00

Sometimes you want to enable/disable bunch of buttons together or perform other such activities on bunch of UI elements created using Interface Builder.

I recently needed to perform similar operation on bunch of button for iOS game I am working on. For this kind of operation, its easier to create array of IBOutlet which can be created using IBOutletCollection. Following is my code, which create IBOutletCollection of UIButtons and then enable/disbale them together.

@interface MyViewController : UIViewController {
    IBOutletCollection(UIButton) NSArray *buttons;
}

in MyViewController.m, we can use buttons as below.

-(void) enableUI:(BOOL) enable {    
    for( UIButton* button in buttons){
        button.enabled = enable;
    }    
}

Only thing missing now is, connecting UIButtons created using Interface Builder to IBoutletCollection. We need to do this from Interface Builder, process is similar to connecting UI Elements from Interface Builder to IBOutlet.

Following snaps describes the required process. I created three buttons on view.

You can connect IBoutletCollection to UIButton as shown in below snap.

And you can repeat above process to connect more UIButton with IBOutletCollection.

That's it.

Matching custom NSObject with isEqual and hash

2014-09-10T01:03:00.001-07:00

While working on one multiplayer game for iOS using GameKit, I faced issue while comparing object.

For single player version I was not facing this issue but while running multiplayer version I was facing this issue. After debugging a little I realised condition for comparing object's value is failing and it turned out that I was comparing object's address rather then its value. As for Multiplayer game I was creating object using data from server/host, I needed to compare object's value and not its address.

For objectiveC, if you want to compare object's value using "==" operator, you need to overload isEqual and hash method as shown like below.

-(BOOL)isEqual:(id) other {
    if (other == self)
        return YES;
    
    if (!other || ![other isKindOfClass:[self class]])
        return NO;
    
    Card* otherCard = other;
    return ( mSuit == otherCard.mSuit && mRank == otherCard.mRank);
}

- (NSUInteger)hash {
    NSUInteger hash = 0;
    hash += [[NSNumber numberWithInt:mSuit] hash];
    hash += [[NSNumber numberWithInt:mRank] hash];
    return hash;
}

Note that you need to overload both method together, overloading only one will not work. Once I overloaded above method my multiplayer version started working as normal.

Creating simple fade animation with Unity3D

2014-07-04T23:14:00.002-07:00

I recently used fade animation or opacity animation with one of my Unity game, it was used to fade then earned points during game play. Initially I struggled a bit to achieve opacity animation due to confusion between using Animation or Animator. Look like from Unity version 4.3 we need to use Animator to animate the properties. I was trying to use Animation instead of Animator, was not able to perform opacity animation properly.
In this post I will show, how I accomplished the Fading animation. below is video of final effect and whole process to achieve animation.

First create a initial setup of scene. Following is how my scene looks like.

I wanted to add fading effect to 3D text, which signifies the points earned during game play. Now scene looks like below.

Now we need to add animator component to text.

Now, that we have added animator, we can go to Animation windows and setup our first key.

First key is from where our animation will start, we need to setup second key where animation will end. Create a second key at desired location and move text at appropriate location.

I also wanted to animate opacity with size and location. So lets add new curve for color animation.

Setup the opacity value for color curve for both first key and second key. Following is how my keys looks like.

Now if you press play button or play animation you will be able to see fade animation. Thanks for reading my blog.

Creating global variable in Unity3D

2014-07-04T20:32:00.000-07:00

Sometime you want to create Global object that you can access from whole project. Recently while working on my unity game, I also needed the same.

While method is quite simple to achieve the same, but its quite confusing if you are just started with Unity3D just like me. Finally I now understand the process, and in this post I am describing how we can create global variable with Unity3D.

In Unity we work with Scene and when scene is unloaded all its objects are unloaded as well. To make global variable, we need to create a game object in first scene and attach a script to it which prevent it from unloading when scene is unloaded. Now we can access this game object from newly loaded scene and other scenes as well.

Let's start with simple project and create a scene, I called this scene as first scene.

Now we need to create a empty object which we treat as a global gameobject. This object will not be destroyed when first scene is unloaded.

To preserve this gameobject when First scene is unloading, we need to attach a script, I named it MakeGlobal and added following code to it.

using UnityEngine;
using System.Collections;

public class MakeGlobal : MonoBehaviour {
 void Awake () {
  DontDestroyOnLoad (transform.gameObject);
 }
}

By using DontDestroyOnLoad, we ask Unity engine not to destroy this gameobject when its scene is getting unloaded, now we can assign a new script to this global gameobject, which holds global variables.

This script is simple, it just holds a variable which can be accessed from any scene by any game object.

using UnityEngine;
using System.Collections;

public class GlobalVariables : MonoBehaviour {
 public string globalVar;
}

Now we have a GameObject which we can treat as a Global Object and it has a script which holds global variables. But till now we have not used it. To use it we can assign a script to Background element and that assign some value to globalVar variable.

using UnityEngine;
using System.Collections;

public class background : MonoBehaviour {
 // Use this for initialization
 void Start () {
  GameObject globalGO = GameObject.Find("global_gameObject");
  GlobalVariables globalVars  = globalGO.GetComponent();
  globalVars.globalVar = "String from 1st Scene";
 }
}

Now our global variable has value which is assigned by script attached to background object. To see its value on screen I created a 3D Text Object and assigned a simple script which update text object's text to global variable.

using UnityEngine;
using System.Collections;

public class TextUpdate : MonoBehaviour {
 // Update is called once per frame
 void Update () {
  GameObject globalGO = GameObject.Find("global_gameObject");
  GlobalVariables globalVars  = globalGO.GetComponent();
  gameObject.GetComponent ().text = globalVars.globalVar;
 }
}

Now if you run first scene, you can see text is displaying global variables value.

To test if global variable really retaining its value, we should create another scene and destroy first scene. So I created a another scene, which has 3D text object which displays global variables value, using the same TextUpdate script. You will can see it still preservs value from first scene and we can use global variable in second scene as well.

That's all, Thanks for reading my blog.

Resolving Folder reading issue from SD Card in BB10

2014-06-28T04:34:00.002-07:00

There was a tricky bug in Audiobook Reader BB10 version for quite a some time which I was trying to resolve. Issue was that, for some folder in SD card, I was not able to browse it using QDir Qt API or Posix API. Though API was showing the folder, but when I try to find out folder's content, it reports folder as empty.

This was causing serious usability issue with Audiobook Reader application, as user were not able to add book from SD card. I debugged it long and tried to use various approach to resolve the issue but could not find any satisfactory solution.

I read it somewhere it causes issue if SD card was formatted with PC software and issue is resolved if you format SD card with BB10 setting. But this also looks hassle to user.

Finally, I decided to see how directory structure looks like and what is folders permission using SSH to device. When I used linux command like ls and cd, I was able to see folder's content fine. And I decide to use those command to resolve directory browsing issue.

Following is my code, if someone else is also facing similar issue. First I am escaping special character in filepath, else linux command will not work. Then I am creating "ls" command with sorting and with output which list directory content in absolute file path. Once we have proper command I am using popen API to run command and then using IO api to read command's output.

QStringList BookListModel::getFileList(const QString& dir) {

 QString filePath(dir);
 filePath.replace(" ","\\ ");
 filePath.replace("'","\\'");
 filePath.replace("`","\\`");
 filePath.replace("!","\\!");
 filePath.replace("$","\\$");
 filePath.replace("&","\\&");
 filePath.replace("*","\\*");
 filePath.replace("\"","\\\"");
 filePath.replace("(","\\(");
 filePath.replace(")","\\)");
 filePath.replace("[","\\[");
 filePath.replace("]","\\]");

 qDebug() << filePath;
 QString cmd = QString("ls -1 %1/*").arg(filePath);
 qDebug() << cmd;

 QStringList files;
 char path[1035];
 FILE* fp = popen(cmd.toStdString().c_str(), "r");
 if (fp == NULL) {
  qDebug() << "Failed to run command";
  return files;
 }

 while (fgets(path, sizeof(path)-1, fp) != NULL) {
  QString file = QString(path).trimmed();
  QFileInfo fileInfo(file);
  if (fileInfo.isFile() && FileModel::isSupportedMedia(fileInfo.fileName()) ){
   files << file;
  }
 }

 qDebug() << files;

 pclose(fp);
}

That's all, hope it will be helpful to someone.

Audiobook Reader for BB10 now got Built for Blackberry status

2014-06-26T07:17:00.000-07:00

Recently I upgraded my Audiobook Reader application pro version for BB10.

This version contains many UI related changes and now it is more aligned to Blackberry design guideline and now it is also awarded Built for Blackberry status.

Apart form UI related changes, this version contains two major changes.

Now it Book auto pauses in case it detect phone call activity.

And there was a very critical bug in application which prevents book to be added from SD card. Though issue was related to BB10 OS, I found one work around and now adding books from SD card works as expected.

Full list of features in current version is as below.

Allows adding single file or whole folder with book audio data
Supports adding custom bookmark
Supports browsing mp3 chapter files and play selected mp3 chapter file
Supports chapter skip
Supports 2 min, 1 min, 30 sec skip option
Supports auto pause on call
Supports Play/Pause using HW buttons
Supports custom cover art download
Advance file browser
Supports sleep timer
Supports shuffle
and some more...

Following is demo for current version.

Hope you will like the updates.

Using WorkerScript from QML

2014-06-12T18:35:00.000-07:00

As you might know, I am contributing to Ubuntu Touch Calendar core application. Those application are pure QML application with no C++ backend or we aim to avoid it as much as possible. This is done to make sure application are portable across device.

For simple use-case you can just use javascript code as backend logic and it should work fine without any problem. but if you need to some intensive calculation in application then its better to move those calculation to WorkerScript.

While working on one calendar feature, Calculating layout for overlapping events, I also needed to use WorkerScript. But one major problem with WorkerScript is that, it does not have access to QML Engine. So you will not be able to send your Declarative object to worker script to offload intensive task to threads.

In calendar application I am getting Events declarative object from model and I needed to process events time to decide position and size of events in view.

As such I can not send those Events to WorkerScript, but to overcome that limitation, I created temporary Javascript object which has required data like start time, end time and id, which I can use to decide position, size and Id can be used to map temp object to original object from model and rest of logic then can be implemented in WorkerScript.

Code wise using WorkerScript is quite easy. Following code creates WorkerScript object and sends array of events to script.

    WorkerScript {
        id: eventLayoutHelper
        source: "EventLayoutHelper.js"

        onMessage: {
            //recevied process data, which we can use to layout events
            layoutEvents(messageObject.schedules);
        }
    }

    function createEvents() {

        var eventMap = {};
        var allSchs = [];

        var startDate = new Date().midnight();
        var endDate = new Date().endOfDay();
        var items = model.getItems(startDate,endDate);
        for(var i = 0; i < items.length; ++i) {
            var event = items[i];
            var schedule = {"startDateTime": event.startDateTime, "endDateTime": event.endDateTime,"id":event.itemId };
            allSchs.push(schedule);
            eventMap[event.itemId] = event;
        }

        intern.eventMap = eventMap;
        //here we are asking worker script to process all the events
        eventLayoutHelper.sendMessage(allSchs);
    }

Following is script code, it will process these events and will send back location and size information back.

WorkerScript.onMessage = function(events) {

    //do some pre-processing like sorting and converting the data type more comfortable to algorithm
    var allSchs = processEvents(events);

    while( allSchs.length > 0) {
        var sch = allSchs.shift();

        //finds all schedules overlapping with current schedule and remove from original array
        var schs = findOverlappingSchedules(sch, allSchs);

        //insert original schedule first, so array remain sorted
        schs.unshift(sch);

        //send processed events back to GUI thread so we can render it
        WorkerScript.sendMessage({ 'schedules': schs});
    }
}