Monthly Archives: April 2012

Determining distance in kilometers between two geocoded positions using JavaScript


 function toRad(num) {
   return num * Math.PI / 180
 }
 
 function calcDistance(lat1,lng1,lat2,lng2) {
  var R = 6371; // km
  var dLat = toRad((lat2-lat1));
  var dLon = toRad(lng2-lng1);
  var lat1 = toRad(lat1);
  var lat2 = toRad(lat2);

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c;
		  
  return d
}

Getting Started with the Sencha Charts 2 DrawComponent

One of my Sencha Touch 2 students asked about extending the types of charts that ship with Sencha Touch Charts 2 (currently in beta) – so I helped her cobble together this little proof-of-concept:

Ext.define("Charts.view.MyDrawComponent", {
    xtype: 'mydrawcomponent',
    extend: 'Ext.draw.Component',
    requires: ['Ext.Container'],
    config: {
        viewBox: false,
        store: 'SampleStore'
    },
    initialize: function() {
        this.callParent();
        var chartObjects = [ ];
        var myStore = Ext.getStore(this.getStore());
        this.createSurface();

        /* build config object */
        var me = this;
            var mySprite = Ext.getStore(this.getStore());
            //console.log(this.getStore());
            //simultaneously load the store.
            mySprite.load({
               callback: function(records,op, success) {
                   for(var i=0; i < records.length; i++) {
                      me.surface.add({
                           type: 'circle',
                           fill: '#79BB3F',
                           radius: mySprite.getAt(i).get('wasteml'),
                           x: 100+i*100,
                           y: 100
                   });

               }
            }
            });

    }
});

Sencha Touch 2 – Implementing a Gratuitous Ext.List Tap Animation

A student in my Sencha Touch 2 class asked me recently how to trigger an animation on a list item that had been tapped by a user.

The solution is relatively straightforward (for iOS). Add the following style to your CSS:

  .rotateListViewItem {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 2s;
	-webkit-transform: rotateX(720deg);
  }

Then modify your Ext.List definition to refer to that class through the selectedCls property:

Ext.define("CrimeFinder.view.news.confess.List", {
 extend : 'Ext.dataview.List',
 xtype : 'confesslist',
 requires : ['Ext.plugin.PullRefresh', 'Ext.plugin.ListPaging'],
 config : {
   itemTpl : '{lname},{fname}',
   store : 'Confessions',
   selectedCls: 'rotateListViewItem',
   onItemDisclosure : true,
   clearSelectionOnDeactivate : true,
   plugins : [
    {
     xclass : 'Ext.plugin.PullRefresh',
     pullRefreshText : 'Pull down to see recent confessions!'
    }, 
    {
     xclass : 'Ext.plugin.ListPaging',
     autoPaging : true
    }
   ]
  }
});

Android webkit produces a whackier result that I haven’t had time to troubleshoot.

Submitting a Sencha Touch 2 Native App to the App Store

Preparing a Sencha Touch 2 app for submission to the App Store is not as straightforward as it appears:

Steps:

  1. Go into the iOS Provisioning Portal and create a Distribution Provisioning Profile for your application
    Image
  2. Download the distribution provisioning file and rename it to embedded.mobileprovision
  3. Copy the embedded.mobileprovision file into the root of your app’s source code folder
    Image
  4. Modify your app’s Sencha SDK JSON configuration file
      • Set the “configuration” property to “Release”
      • Set the “certificateAlias” property to “iPhone Distribution”
      • Save the file
  5. Use the Sencha SDK to build the app. This will generate a .app file
  6. Drag and drop the generated .app file into iTunes
  7. Drag the app from iTunes back out to your file system. This will generate a .ipa file, suitable for uploading to the App Store (No, I am *not* making this up)
  8. Log into iTunes Connect
    https://itunesconnect.apple.com/
  9.  Click on Manage your Applications
  10. Click on Add New App
  11. Enter info for your App
  12. Continue through the wizard-driven process until it tells you that it is ready for you to submit your app.
  13. Open XCode
  14. Select XCode > Open Developer Tool > Application Loader
  15. Click Deliver Your App
  16. Select the app that you defined in iTunes Connect
  17. Select the .ipa file for upload
  18. The app will be uploaded to Apple for review.

Thank God I’m a Coder Boy!

Well life at the Fig ain’t very laid back
Ain’t much an old coder boy like me can’t hack
It’s early to rise, late in the sack
Thank God, I’m a Coder Boy

Got up in the morning, ain’t feeling fine
Last night’s code took too much time
Too much script with buggy lines
Thank God, I’m a Coder Boy

Well passing variables by value never did me no harm
Sometimes raisin’ an exception sometimes workin’ like a charm
Got API docs tatooed on my forearm
Thank God I’m a Coder boy

When the work’s all done and the sun’s settin’ low
I turn on the XBox and get gears of war to show
The kids are asleep so I keep it kinda low
Thank God I’m a coder boy

Well I got me a fine wife, I got me some skittles
When the sun’s comin’ up I got tweets and some twittles
Recursion ain’t nothin’ but a funny, funny riddle
Thank God I’m a coder boy

Well I wouldn’t trade my Bimmer for diamonds or jewels
I never was one of them metrosexual fools
I’d rather have my SDK’s and my development tools
Thank God I’m a coder boy

Yeah, venture cap folk drivin in a black limousine
A lotta stock holders thinkin’ that’s a mighty keen
Son, let me tell ya now exactly what I mean
I thank God I’m a coder boy

Well I got me a fine wife, I got me some skittles
When the sun’s comin’ up I got tweets and some twittles
Recursion ain’t nothin’ but a funny, funny riddle
Thank God I’m a coder boy

Well, my iPad was my daddy’s til the day he died
And he took me by the hand and and held me close to his side
He said…”Live a good life and code mobile apps with pride
And thank God you’re a coder boy”

My daddy taught me young how to code and how to debug
He taught me how to work hard and that coffee was a drug
Taught me how to love and how to jagermeister chug
Thank God I’m a coder boy

Well I got me a fine wife, I got me some skittles
When the sun’s comin’ up I got tweets and some twittles
Recursion ain’t nothin’ but a funny, funny riddle
Thank God I’m a coder boy

Well thank God I’m a coder boy!
Thank God I’m a coder boy!!

A fun little JavaScript experiment with Regex.

function stringFormat(template,adata,recordStart,recordEnd) {
  var expr = template.match(/{[^}]*}/g);
  var s = template;
  var path = "", regExp;
  var result = "";
				
  for (var i=0; i<adata.length; i++) {
    var s = template;
    result += recordStart;
    for (var j=0; j<expr.length; j++) {
      path = expr[j].substring(1,expr[j].length - 1);
      path = path.replace(/\//,'.');
      regExp = new RegExp(expr[j],"g");
      s = s.replace(regExp,eval("adata[i]" + path));
    }
    result += s + recordEnd;
   }
   return result;
  }
  console.log(stringFormat("{/foo} was here {/bar}",[{foo: 'hey', bar: 'now'},{foo: 'foo', bar: 'bar'}],"<div>","</div>"));