Tuesday, April 22, 2014

Dropdown in ng-grid

The controller:

var app = angular.module('app', ['ngGrid']);

app.controller('bodyController', function($scope, LanguageList) {
  $scope.myData = [{name: "Moroni", language: 'fr'},
                     {name: "Tiancum", language: 'en'},
                     {name: "Enos", language: 'nl'}];
    $scope.gridOptions = {
            data: 'myData',
                enableCellSelection: true,
                enableRowSelection: false,
                enableCellEditOnFocus: true,
            columnDefs: [
                    field: 'language', enableFocusedCellEdit: true,
                    editableCellTemplate: 'language_edit.html',
                    cellFilter : 'LanguageMap'
                {field: 'name', enableFocusedCellEdit: true }

            canSelectRows: false
    $scope.languages = LanguageList;
.factory('LanguageList', function() {
  return [
      { language_code : 'en', language_title: 'English' },
      { language_code : 'fr', language_title: 'French' },
      { language_code : 'nl', language_title: 'Netherlands' }
.filter('LanguageMap', function(LanguageList) {
  return function(input) {
    var languagesMatched = LanguageList.filter(function(lang) {
      return lang.language_code == input;
    if (languagesMatched.length == 1)
        return languagesMatched[0].language_title;
        return '*unknown language*'
    return text;

Main page
<!DOCTYPE html>
<html ng-app="app">
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script type="text/javascript" src="ng-grid.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="ng-grid.css">
      document.write('<base href="' + document.location + '" />');
    <script src="app.js"></script>
<body ng-controller="bodyController">
    <div ng-grid="gridOptions" style="height: 400px">


Dropdown template:

ng-options='l.language_code as l.language_title for l in languages'

ng-class="'colt' + $index" ng-model="COL_FIELD" ng-input='COL_FIELD' data-placeholder="-- Select One --" 


Live code: http://plnkr.co/edit/IOBXNy2hcJWbtMXZS3SO?p=preview

Friday, March 14, 2014

Sprite Kit: Animation in English-Speak

Message sequence of actions to SKAction, then message that sequence of actions to repeatActionForever, then run that forever action to the player (SKSpriteNode)

Thursday, March 13, 2014

Sprite Kit: Up is down, down is up

There's no error on messaging the location.x to moveToX action of SKAction, think spaceship which just move left and right and remains stationary on its Y

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
    UITouch* touched = [touches anyObject];

    CGPoint location = [touched locationInView:self.view];

    SKAction* moveAction = [SKAction moveToX: location.x duration:0.0];
    [player runAction: moveAction];

However, it's preferable to use locationInNode. If we want the spaceship to move in all direction yet we use locationInView, the app will exhibit this same error: http://stackoverflow.com/questions/21948027/skaction-moveto-goes-up-when-should-go-down

CGPoint location = [touched locationInView:self.view]
SKAction* moveAction = [SKAction moveTo: location duration:0.0];    

Though the spaceship's X will move accordingly to your touch, the spaceship's Y will not follow your finger movements.

To rectify that flaw, get the location from SKScene's view (self) instead of the UIView's view (self.view), then message that view to touched object's locationInNode instead of locationInView

CGPoint location = [touched locationInNode:self];
SKAction* moveAction = [SKAction moveTo: location duration:0.0];

Happy Coding! ツ

Wednesday, March 12, 2014

Sprite Kit: Determine touch location in English-speak

Create a touchesMoved event in the game scene. To determine the touched location, first get a UITouch from touched object (use anyObject), then from that UITouch object get its location(CGPoint) in view, with the parameter being the game scene's view.

To move an object (e.g. player (SKSpriteNode)), message the location(CGPoint) to the moving action functionality (moveTo) of an action(SKAction). Then message that action to the player's (SKSpriteNode) run action functionality

Tuesday, March 11, 2014

Making sense of Sprite Kit and iOS's MVC

Sprite Kit flow in English-speak

From the ViewController’s viewDidLoad we configure the view by doing the following:

1. Create a game view by casting the ViewController’s view to SKView

    SKView has some properties like:

         showsFPS, showsNodeCount, showsDrawCount

2. We create game scene via instance of a class that derives from SKScene

3. Then we call game view’s presentScene to present the game scene

A game scene extends SKScene. On game scene’s initialization: 

1. We can set the size of the scene, from the scene we can also set the background color. 

2. We can add a player (instance of SKSpriteNode) on game scene by calling the game scene’s addChild which has a parameter of SKSpriteNode

Friday, February 28, 2014


Can we survive the onslaught of frameworks that makes our job easier and could potentially make our jobs obsolete?

First, there's No Software, then there's NoSQL, now No Programming is needed when making an application. Ok I exaggerated a bit, in this stage of technology we can now learn to make applications with almost no programming background required.

You got a complete list (no paging) of data a user wanted to filter, it would be overkill to re-fetch the data from the server as all the data being used on filtering are already at the client-side. We can use some jQuery skills or some good ol' DOM manipulation skills to do that task. But who would do that when the No technologies are all the rage now?

Here's one of the many ways to do no programming with AngularJS, enjoy! Active filtering: http://docs.angularjs.org/api/ng/filter/filter

Programming required to fit the filter requirement of clicking the search button first: almost no programming required http://fiddle.jshell.net/G8z9Q/

Thursday, February 13, 2014