Image Image Image Image Image

© Copyright 2012 ABCoder | Email | RSS

Scroll to Top

To Top

Blog

17

Nov
2013

No Comments

In Titanium

By abcoder

Retrieve thumbnail from video (Titanium)

On 17, Nov 2013 | No Comments | In Titanium | By abcoder

Here is a pretty much straight forward way to capture image thumbnail from a video clip for Titanium sdk. You’ll need a video_icon.png image (not attached) 20 x 20 size. The code is almost self explaining. Just use callback method to display the thumb image in an imageview as there need a few seconds delay to retrieve image frame from video. You can change the thumbnailImageAtTime() function’s first parameter (playback time) to get thumb of a certain time.

// media is the video url or the video file blob source
// cb - callback function to receive the thumb image and video duration in seconds
// size - dimension of one side of the required thumb (the other side will be calculated based on aspect ratio)
function getVideoThumb = function(media, cb, size) {
  var player = Titanium.Media.createVideoPlayer({
    autoplay : false,
    media : media,
    scalingMode : Ti.Media.VIDEO_SCALING_MODE_FILL
  });

  setTimeout(function() {
    tryToRetrieveVideoThumb(player, cb, size);
  }, 1000);
};

function tryToRetrieveVideoThumb(player, cb, size) {
  if (player.naturalSize.width == 0) {
    setTimeout(function() {
      tryToRetrieveVideoThumb(player, cb);
    }, 1000);
    return;
  }

  player.width = player.naturalSize.width;
  player.height = player.naturalSize.height;
  var imageBlob = player.thumbnailImageAtTime(1.0, Ti.Media.VIDEO_TIME_OPTION_EXACT);
  if (size) {
    var img = _resizePhoto(imageBlob, size), 

    thumbView = Ti.UI.createView({
      width : img.w,
      height : img.h,
      backgroundImage : img.media
    }), playIcon = Ti.UI.createImageView({
      image : '/img/video_icon.png',
      height : 20,
      width : 20
    });
    thumbView.add(playIcon);
    cb(thumbView.toImage(), player.duration / 1000);
  } else
    cb(imageBlob, player.duration / 1000);
}


function _resizePhoto(media, size) {
  var oW = media.width, oH = media.height, w = oW >= oH ? Math.round(Math.min(size, oW)) : Math.round(Math.min(oW * (size / oH), oW)), h = oW <= oH ? Math.round(Math.min(size, oH)) : Math.round(Math.min(oH * (size / oW), oH));
  return {
    media : media.imageAsResized(w, h),
    w : w,
    h : h
  };
};

16

Nov
2013

No Comments

In Titanium

By abcoder

Resize image maintaining aspect ratio in Titanium

On 16, Nov 2013 | No Comments | In Titanium | By abcoder

Titanium does not have any built in function to resize blob image keeping aspect ratio. The 3 Ti.Blob methods for resizing/cropping blob image are Ti.Blob.imageAsCropped(), Ti.Blob.imageAsResized() and Ti.Blob.imageAsThumbnail()

To resize an image maintaining aspect ratio here is a very simple function:

function resizePhoto(media, size) { // size - size of any side
  var oW = media.width, oH = media.height, w = oW >= oH ? Math.round(Math.min(size, oW)) : Math.round(Math.min(oW * (size / oH), oW)), h = oW <= oH ? Math.round(Math.min(size, oH)) : Math.round(Math.min(oH * (size / oW), oH));
  return media.imageAsResized(w, h);
};

07

Mar
2013

No Comments

In Android
Titanium

By abcoder

Titanium Android evalJS() issue on WebView for distribution build

On 07, Mar 2013 | No Comments | In Android, Titanium | By abcoder

It’s been so long since I last posted. I’ve been so busy preparing our whole team to expertise in Titanium, an amazing framework indeed for developing cross platform native apps using Javascript. For the last couple of months we’ve solved many challenging issues of Titanium and I’m gonna share them one by one (as much as possible).

Recently we’ve developed U.S. Survival Tools for both Android and iOS. While developing for Android and testing on device (Galaxy Nexus) it was fine. We used a WebView to display the manual contents. For text search we used a jQuery plugin. Everything was fine on dev version.

Before uploading on Google Play we found a weird problem, the evalJS() can not call any js function inside the included .js file. But if we write any js function inside head tag of html page it works fine. So the problem was somewhere including the .js file.

After several hours of wild guessing (:@) we got the solution. It’s so simple, just renamed the .js files to something else (we used .jsx). Not sure why the android distribution build can not include .js files inside html WebView, and it really sounds funny to use a different extension. However it works! :-)

Tags | , , , , , , , , , , , , ,

29

Oct
2011

3 Comments

In Sencha Touch

By abcoder

Sencha Touch Carousel like TabPanel

On 29, Oct 2011 | 3 Comments | In Sencha Touch | By abcoder

How do you make a sencha touch tabpanel behaves like a carousel? Or how to control a carousel from tabBar? I’ve found similar questions on sencha forum and stackoverflow, but unfortunately the solutions given by the users are simply showing how to “insert” a carousel inside a single tab of tabpanel.

From the user-experience point of view sencha team didn’t give an option of changing tabs by swing left/right which makes sense. Cos when you are inside a tabpanel if the tabs are changed by a slight touch/swing it would be annoying. But sometimes it could be necessary depending on the purpose of the app. There is no option to turn it on. And there is no easy way to combine a carousel with a tabBar.

You know sencha is open source and if you go through their source code for carousel and tabpanel you can do it yourself. I’ve achieved the functionality after several tries, here is the working demo.

Source code of viewport.js:

App.views.Viewport = Ext.extend(Ext.Panel, {
    fullscreen: true,
    id: 'Viewport',
    layout: 'card',
    cardSwitchAnimation: 'slide',
    initComponent: function() {
        this.dockedItems = [header, {
            xtype: 'tabbar',
            id: 'bottom-tab-bar',
            ui: 'dark',
            dock: 'bottom',
            layout: {
                pack: 'center'
            },
            scroll: {
                direction: 'horizontal',
                useIndicators: false
            },
            items: [{
                cls: 'x-tab-active',
                iconCls: 'home',
                text: 'Home',
                handler: this.tabHandler // defined at the bottom
            },
            {
                text: 'Locations',
                iconCls: 'list',
                handler: this.tabHandler
            },
            {
                text: 'About',
                iconCls: 'info',
                handler: this.tabHandler
            }]
        }];
        this.items = [{
            xtype: 'carousel',
            id: 'tabs-carousel',
            listeners: {
                cardswitch: function() { // here we'll change the class of related tab icon to active state after swipe left/right of the carousel cards.
                    var n = this.getActiveIndex();
                    for (i = 0; i < Ext.getCmp('bottom-tab-bar').items.items.length; i++) {
                        Ext.getCmp('bottom-tab-bar').items.items[i].removeCls('x-tab-active');
                    }
                    Ext.getCmp('bottom-tab-bar').items.items[n].addCls('x-tab-active');
                }
            },
            indicator: false, // remove it, so that it looks like a real tabPanel instead of carousel.
            items: [{
                xtype: 'HomeIndex',
                title: 'Home',
                iconCls: 'home'
            },
            {
                xtype: 'HomeLocations',
                title: 'Locations',
                iconCls: 'list'
            },
            {
                xtype: 'HomeAbout',
                title: 'About',
                iconCls: 'info'
            }]
        }];
        App.views.Viewport.superclass.initComponent.apply(this, arguments);
    },
    tabHandler: function(tab) { // here we'll set the active tab of the carousel when a tab icon is clicked
        var selected = -1;
        var n = Ext.getCmp('bottom-tab-bar').items.items.indexOf(tab);
        for (i = 0; i < Ext.getCmp('bottom-tab-bar').items.items.length; i++) {
            if (Ext.getCmp('bottom-tab-bar').items.items[i].getEl().hasCls('x-tab-active')) {
                selected = i;
                Ext.getCmp('bottom-tab-bar').items.items[i].removeCls('x-tab-active');
            }
        }
        Ext.getCmp('bottom-tab-bar').items.items[n].addCls('x-tab-active');
        var direction = 'left';
        if (n > selected) direction = 'left';
        else direction = 'right';
        Ext.getCmp('tabs-carousel').setActiveItem(n, {
            type: 'slide',
            direction: direction
        });
    }
});
Ext.reg('Viewport', App.views.Viewport);

Hope this would be helpful. Happy coding! :)

16

Oct
2011

2 Comments

In JavaScript
Sencha Touch

By abcoder

Invite Facebook friends from Sencha Touch app

On 16, Oct 2011 | 2 Comments | In JavaScript, Sencha Touch | By abcoder

Recently I’ve been working on a Sencha Touch project which is based on facebook api. A very simple feature is to invite facebook friends to this app. I was ransacking into the facebook api docs, other websites to figure out how to do it from Sencha Touch. There is a PhoneGap plugin for this but we’re not going to use PhoneGap for this one. I need a very simple php based solution. First I tried a lot to do it from php sdk. Cos according to the application’s design the user will select his friends from a sencha touch list, click a button and the selected records will be passed to backend php script via Ext.Ajax.request. After spending several hours on this I figured out it is not possible to invite friends to app from php sdk! Grrr..

Now the only way left is javascript. Most people are still using fbml for this and I tried it first, it didn’t work and you know fbml is deprecated by facebook anyway. Next javascript sdk. Requests Dialog is the proper way of doing this.

function sendRequestToManyRecipients() {
  FB.ui({method: 'apprequests',
    message: 'My Great Request',
  }, requestCallback);
}


From iPhone this won’t look good. You need to add display:’touch’ with it and call the function from your sencha touch button’s handler.

function sendRequestToManyRecipients() {
  FB.ui({method: 'apprequests',
    message: 'My Great Request',
    display:'touch',
  }, requestCallback);
}

That’s it! Here is how it looks from iPhone 4:
Facebook friend invitation to application requests dialog from sencha touch app

Tags | , , , , , , , ,

13

Oct
2011

2 Comments

In Core JavaScript
JavaScript

By abcoder

Maintain reference to popup window over page refresh or redirect in Javascript (solved)

On 13, Oct 2011 | 2 Comments | In Core JavaScript, JavaScript | By abcoder

I’m working on a live chat project where the chat window opens as a child popup. The parent window may get refreshed or user may go to another page to chat with someone else. The chat window should not get refresh when user goes from one page to another page or try to chat with a new user. Problem is reference to the child window gets lost when you refresh your parent window which is supposed to be as all the js variables get reinitialized.

// from parent window
var win = null;
if(win === null)
  win = window.open('chatwindow.php');
// unfortunately win will be null again when the parent 
// window is refreshed or redirected to another link

I know this is how JS works but somehow I need to retain the child window reference in parent window even after page refresh. Here comes googling and found a lot of guys having the same issue like me and no workaround. First I thought about localStorage and cookies but they both have limitations.

When you are under same domain you can talk between parent-child window seamlessly which is fine. So from parent window we can say win.some_child_win_var = 5; and from child window we can say window.opener.parent_var = something; In the same way I can do this from child window:

// parent window       // child window
window.opener.win    =    window;

But the parent window will forget the child window reference upon refresh. So why not make the child keep on buzzing this!! I’m your child.. I am your child… lol

This is what I am doing:

childTimer = window.setInterval(function(){
 try{
  window.opener.win = window;
 } catch(e){}
}, 300);

And I can’t believe myself! It really works on all browsers even on ie(omg).

[Update] When the child window is closed we should assign the “win” to null:

window.onUnload = function(){
 try{
  window.clearInterval(childTimer);
  window.opener.win = null;
 } catch(e){}

Not sure if this is the best way of doing it. Your suggestions are most welcome.

Tags | , , , , , , , , , ,

08

Oct
2011

No Comments

In iPhone 4

By abcoder

My iPhone got a second life!

On 08, Oct 2011 | No Comments | In iPhone 4 | By abcoder

A few hours back I went to attend a wedding. The network was not that good there but my iphone’s battery was about 75% charged. Last time I checked a message on Beluga. After a while I tried to make a call and found my iphone(4) switched off and it didn’t turn on after several tries. At first I assumed the battery ran out due to poor network coverage and I didn’t even have the charger with me.

I came back to my place, connected the charger and tried to turn it on. But no luck, I started sweltering :-’(
After several minutes of charging I tried again and no it is not waking up any more!

I Googled about the problem and found a lot of peopled had the same issue several times. After trying some random tips got the correct solution.

Here is the secret to solve such a breath-taking situation: Press and hold Power button + Home button together simultaneously until the Apple logo appears on screen. That’s it! This is called “soft boot” (or “Hard Reset” as well). Don’t worry it won’t remove any data, just the cache will be erased and the phone will run smoothly again.

Hope it’ll work for you as well.
Cheers…

Tags | , , , , , , , , , ,

30

Sep
2011

No Comments

In PHP

By abcoder

UK to MySQL date format

On 30, Sep 2011 | No Comments | In PHP | By abcoder

European date format is sometime confusing to most of the US people and same in programming world also. 03/04/2011 – In US it is 04 March 2011 and in Europe/UK it is 03 April 2011. I was working on a CakePHP e-commerce project for a UK client. A customer can select his preferable delivery date in UK format and I was supposed to save this date in database as mysql date format. In php strtotime(’03/04/2011′) returns timestamp of 04 March 2011. Here is the list of all supported date formats: http://www.php.net/manual/en/datetime.formats.date.php

On that link you can see the possible date formats using “/” are either mm “/” dd “/” y or YY “/” mm “/” dd. That means you can not parse the UK date using php’s strtotime function. On that list you’ll find dd [.\t-] mm [.-] YY and dd [.\t] mm “.” yy which are in UK date format. The workaround I figured out is replace the “/” with “-” or “.” and then use strtotime.

<?php 
$timestamp = strtotime(str_replace('/', '.', '03/04/2011'));
$mysql_date = date('Y-m-d', $timestamp); // 2011-04-03
?>

Hope this tip will help you sometime. If you know any better way please share with me. Thanks

Tags | , , , , ,

13

Aug
2010

6 Comments

In jQuery

By Saif Uddin

jQuery pushStack Sortable Tables

On 13, Aug 2010 | 6 Comments | In jQuery | By Saif Uddin

pushStack() is a very useful function to handle the jQuery stack. $.pushStack( elements, name, arguments ) is very handy when you need to apply a method on the array of DOM elements. Recently I was doing some experiment on pushStack to create a sortable table. You can see it in action here. The source code is self-explanatory. (In fact I’m very busy right now to explain it. lol)

Tags | , , , , , , ,

17

Jul
2010

2 Comments

In css

By Saif Uddin

Pure CSS Arrows

On 17, Jul 2010 | 2 Comments | In css | By Saif Uddin

This is a very interesting post! I was doing some experiments with CSS. Using css border properties I created arrow shapes. Hope you’ll enjoy it.

Link to the html page.

Screenshot:

Tags | , , , , , ,