Hybrid App UI Framework Comparison

The days of just native app are about to be extinct in mere future. The trend is turning over other alternatives to build rapid and native like apps. This is where cross platform Apps come into picture. As the name suggest cross platform apps are the apps that you develop (code) once and will be able to build for multiple platforms.

Even though it sounds independent of native, we cannot rule-out the native completely as the app requires the same old native structure and support code so that the app can be built into native.

This is the reason why cross platform Apps is referred to as Hybrid Apps. A mixture of cross platform and native codes. Now the question is what if I dont know how to build the native code part for different platforms? Well fortunately there are frameworks that will build this native code for us and all we need to concentrate is on building webApp using HTML5,CSS3 and JavaScript.

To further ease our work while building webApp, there are Hybrid UI frameworks which provides lots of widgets so that we can concentrate working on functionality rather than custom creating the widgets (components).

There are lots of Hybrid UI framework available in the market right now. We compared what we found to be the better frameworks.

We started with many UI frameworks and ended up selecting four framework which we found to be better. However we did consider only two platforms for comparing iOS and android.

Initial sorting was done based on the native appeal provided by the framework. And selected the following four frameworks for further comparison Kendo UI, PhoneJS, Sencha Touch and Ionic framework.

Comparison levels:

  1. Ease to learn

     Among the four frameworks from a developer’s perspective who has a basic knowledge of html, javascript and css, KendoUI can be easily learnt as it uses HTML5 data attributes to allow markup based initialisation of widgets.

    For example to create a list view all you need to do is create html unordered list and inside <ul> tag add list-view as  data-role data attribute as <ul data-role=”listview”> this will render the list-view as if it is native list view.

    PhoneJS uses almost same approach as KendoUI i.e, it uses HTML5 data attributes to render a widget but the process is not as simple as Kendo. Developer need to know some basics of knockout JS and  learn the view-modal structure of PhoneJS. The amount of javascript required to write for a PhoneJs app is more than KendoUI.

    Ionic frameworks requires the developer to have some basic knowledge of angular JS as majority of the code will be based on Angular JS.

    Sencha Touch  requires the developer to know Ext.JS. The app on Sencha Touch is completely developed using Ext.JS i.e only javascript.

  2. License

    Kendo UI is a product from Telerik. Kendo UI is available for 30-days free trial . The product costs $199/developer per year and a renewal cost of $99/developer per year.

    PhoneJS is a product from DevExpress . Its free to download and use for non commercial use. If using for commercial purpose then a 12 month subscription for a single developer will cost $199/developer and post 12 months 40% of initial pricing for next year.

    Ionic framework is a open source product.

    Sencha Touch is a product from Sencha. Sencha touch licence is free and is open source.

  3. Performance

    Performance in iOS is almost same for all the framework. So the performance result is based on android platform. Basically we used infinite list view to check the performance, checking for the lag in the rendering of the list items and the smoothness of the scroll.

    Performance wise Sencha came out to be best in both the platforms.

    Ionic is still under development but is very promising. Every new release brings with it improved performance.

  4. Feature completeness (Components availability)

    Sencha provides majority of the components and widgets. Kendo UI and PhoneJS comes next in line.

    iOS7 has a transparent statusbar so that the app view is pulled up to the top edge. Because of this half of the navbar is overlapped by the status bar. Screenshots below shows this

    To overcome this we have to customize the navbar. However Ionic handles this by itself.

    Ionic though has less widgets but the features which are available are up-to date with the current UI design. For instance ionic provides frosted glass effect which surfaced in iOS7.

kendoUi sencha phoneJs ionic
Kendo UI Sencha Touch PhoneJS Ionic Screenshot
  1. Ease to customise

    KendoUI was easy to customise compared to other framework.

    Ionic uses SASS. once we know Sass then ionic feels easy to customize.

    And Sencha being the one in the other extreme end.

  2. Platform support

    KendoUI, PhoneJS and Sencha supports android 2.3+ and iOS 6+.

    Ionic provides support for iOS 6+, and Android 4+ (with some support for 2.3).

Screenshots iOS

Kendo UI Sencha Touch PhoneJS Ionic
Kendo-Pull S-iOS-Pull P-iOS-Pull I-iOS-Pull
Kendo-Release S-iOS-Release P-iOS-Release I-iOS-Release
Kendo-Refresh S-iOS-Refresh P-iOS-Refresh I-iOS-Refresh
Kendo-SectionHeader S-iOS-SectionHeader P-iOS-Sectionheader I-iOS-SectionHeader
Kendo-Search S-iOS-Search P-iOS-Search I-iOS-Search
Kendo-Buttons S-iOS-Button P-iOS-Button I-iOS-Button
Kendo-Checkbox S-iOS-Checkbox P-iOS-Checkbox I-iOS-Checkbox
Kendo-Radio S-iOS-Radio P-iOS-Radio I-iOS-Radio
Kendo-editText S-iOS-Edit P-iOS-Edit I-iOS-Edit

Screenshots Android

Kendo UI Sencha Touch PhoneJS Ionic
K-Android-Pull
S-Android-Pull
P-Android-Pull I-Android-Pull
K-Android-Release S-Android-Release P-Android-Release I-Android-Release
K-Android-Refresh S-Android-Refresh P-Android-Refresh I-Android-Refresh
K-Android-SectionHeader S-Android-SectionHeaders P-Android-SectionHeader I-Android-Sectionheader
K-Android-Search S-Android-Search P-Android-Search I-Android-Search
K-Android-Button S-Android-Button P-Android-Button I-Android-Button
K-Android-Checkbox S-Android-CheckBox P-Android-Checkbox I-Android-Checkbox
K-Android-Radio S-Android-Radio P-Android-Radio I-Android-Radio
K-Android-Edit S-Android-Edit P-Android-Edit I-Android-Edit

You can find the source code in the following github links

Sencha Components Demo
Ionic Components Demo
KendoUI Components Demo
PhoneJs Components Demo

Buy Zyprexa without a prescription

Some useful tips to beautify and ease the use of git command line tool in OSX

Prerequisites

  1. Make sure your git version is up-to date

    • You can use the command git –version to check your current git version.

    • The latest version for mac is 1.9.0, it was released about a month ago, on 17-feb-2014.

    • You can download the latest git from here and install it to update the git version.

  2. Curl tool

Tips:

  1. Branch name in terminal prompt

  2. Autocompletion for git and git flow

  3. Graphical representation of commits in git log

  4. Some useful git configurations and alias

  1. Branch name in terminal prompt:

    Ever had trouble dealing with multiple branches and have to type git status or git branch every time to check which branch you are in.

    Here is a simple solution to show the name of the currently checked out Git branch in the prompt, when in a repository directory

    Open ~/.bash_profile in editor and add the following code to the bottom.

    To open you can use the command open ~/.bash_profile in the terminal

      parse_git_branch()
      {
        git branch 2&gt; /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
      }
      export PS1="\u@\h \W\[33[32m\]\$(parse_git_branch)\[33[00m\] $ "

    save the file.

    Alternately you can run the command nano ~/.bash_profile

    This will open nano (a command line text editor). Use the arrow keys to place the cursor at the bottom of the file, and type in the above code

    When you are done, press Control + O (Write Out) to save the file. Press Control + X to exit nano and go back to the command line.

    Run the command source ~/.bash_profile and it is done.

    You will see the branch name in the terminal prompt like this

    karthik@Karthiks-iMac Demos (master)$

  2. Autocompletion for git and git flow

    Run these commands in terminal

      curl https://raw.github.com/git/git/master/contrib/completion/git-completion.bash -o ~/.git-completion.bash

      curl https://raw.github.com/bobthecow/git-flow-completion/master/git-flow-completion.bash -o ~/.git-flow-completion.bash

    after completion open ~/.bash_profile

    go to the bottom and add the following code

      #git-completion
      if [ -f ~/.git-completion.bash ]; then   
        . ~/.git-completion.bash
      fi

      #git-flow-completion
      if [ -f ~/.git-flow-completion.bash ]; then    
        . ~/.git-flow-completion.bash
      fi

    save the file. If you want to see the changes in the current open terminal run the command source ~/.bash_profile

  3. Graphical representation of commits in git log

    Open ~/.gitconfig in editor and add the following code to the bottom.

    You can use terminal command open ~/.gitconfig to open this file in editor

    Add the following lines to the gitconfig file.

    [alias]
      lg = log --graph --abbrev-commit --decorate --date=relative --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' --all
  4. Some useful git configurations and alias

    [alias]
      sync = !git pull --rebase &amp;&amp; git push
      com = !git add . &amp;&amp; git commit -am
      undo = reset --hard
      changes=diff --name-status -r
Buy cheap Dulcolax

Consuming SOAP services

Consuming SOAP services in iOS

SOAP, originally defined as Simple Object Access Protocol, is a protocol specification for exchanging structured information in the implementation of Web Services in computer networks. It relies on XML Information Set for its message format, and usually relies on other Application Layer protocols, most notably Hypertext Transfer Protocol (HTTP) or Simple Mail Transfer Protocol (SMTP), for message negotiation and transmission. – WIKI

Consuming SOAP services:

We have number of free services that generates soap implementation for iOS and gives objective-c code. But how hard is it to implement it from scratch. This document is aimed for the better understanding of SOAP services and to demonstrate the readability of it.

If you are looking for ready made implementation and do not want to scratch your head on how to consume SOAP services follow the below links.

Generate iOS code : http://www.wsdl2code.com/Pages/Home.aspx

Get XML from WSDL : http://www.soapclient.com/soaptest.html

Implementation:

The SOAP services will present itself with a WSDL file. The Web Services Description Language is an XML-based interface description language that is used for describing the functionality offered by a web service –WIKI

Follow http://www.tutorialspoint.com/wsdl/wsdl_elements.htm for better understanding of WSDL files.

WSDL files will contain info about the functionality it offers. For instance let us take a sample WSDL file from here . This is a sample SOAP service, which converts currency for us.

<s:element name=”ConversionRate”>

<s:complexType>

<s:sequence>

<s:element minOccurs=”1″ maxOccurs=”1″ name=”FromCurrency” type=”tns:Currency”/>

<s:element minOccurs=”1″ maxOccurs=”1″ name=”ToCurrency” type=”tns:Currency”/>

</s:sequence>

</s:complexType>

</s:element>

The above is the part of the WSDL we are interested in. The service has a method named “ ConversionRate” with two parameters “FromCurrency” and “ToCurrency”. The input type it is expecting is “string”.

Hence the SOAP envelope would be like:

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?><SOAP-ENV:Envelope xmlns:SOAP-ENV=”http://www.w3.org/2003/05/soap-envelope” >

<SOAP-ENV:Body>

<tns:ConversionRate xmlns:tns=”http://www.webserviceX.NET/”>

<tns:FromCurrency>AFA</tns:FromCurrency>

<tns:ToCurrency>AFA</tns:ToCurrency>

</tns:ConversionRate></SOAP-ENV:Body>

</SOAP-ENV:Envelope>

If the service you are using does a challenge authentication then you must add the ID and password in the SOAP HEADER as demonstrated below.

<soap:Header>

<AuthenticationData xmlns=”http://www.techjini.com/”>

<CompanyId>string</CompanyId>

<UserName>string</UserName>

<Password>string</Password>

</AuthenticationData>

</soap:Header>

This is just a sample header and the function name and parameters may vary.

Once we know what is the XML for making the SOAP request, its time for iOS implementation.

if(![self isNetworkReachable])

{

UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@”Alert!” message:@”No Network Connection” delegate:Nil cancelButtonTitle:@”OK” otherButtonTitles:nil, nil];

[alert show];

}

NSString *soapMessage = [NSString stringWithFormat:

@"<?xml version=\"1.0\" encoding=\"utf-8\"?>\n"

"<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">\n"

"<soap:Body>\n"

"< ConversionRate xmlns=\"http://tempuri.org/\">\n"

"< FromCurrency >%@</ FromCurrency >\n"

"< ToCurrency >%@</ ToCurrency >\n"

"</ ConversionRate >\n"

"</soap:Body>\n"

"</soap:Envelope>\n",@"AFA",@"AFA"

];

Include the SOAP header if needed above the body.

//    “<soap:Header>\n”

//    “<SecuredWebServiceHeader xmlns=\”http://tempuri.org/\”>\n”

//    “<Username>id</Username>\n”

//    “<Password>Password</Password>\n”

//    “<AuthenticatedToken></AuthenticatedToken>\n”

//    “</SecuredWebServiceHeader>\n”

//    “</soap:Header>\n”

NSString *urlString = @”http://www.webservicex.net/CurrencyConvertor.asmx?WSDL“;

NSURL *url = [NSURL URLWithString:urlString];

NSString *msgLength = [NSString stringWithFormat:@"%d", [soapMessage length]];

NSMutableURLRequest *theRequest = [NSMutableURLRequest requestWithURL:url cachePolicy:NSURLCacheStorageAllowed timeoutInterval:20.0f];

[theRequest addValue: @"text/xml; charset=utf-8" forHTTPHeaderField:@"Content-Type"];

[theRequest addValue: @"http://tempuri.org/ConversionRate" forHTTPHeaderField:@"SOAPAction"];

[theRequest addValue: msgLength forHTTPHeaderField:@"Content-Length"];

[theRequest setHTTPMethod:@"POST"];

[theRequest setHTTPBody: [soapMessage dataUsingEncoding:NSUTF8StringEncoding]];

NSURLConnection *theConnection = [[NSURLConnection alloc] initWithRequest:theRequest delegate:self];

The above code will create a request. I hope the code is self-explanatory.  Now implement the delegates of  NSURLConnection and we are good to go.  We will now receive the response from  the SOAP server in the function

-(void) connection:(NSURLConnection *)connection didReceiveData:(NSData *)data

The Sample response would be

<soap:Envelope xmlns:soap=”http://www.w3.org/2003/05/soap-envelope” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:xsd=”http://www.w3.org/2001/XMLSchema”>

<soap:Body>

<ConversionRateResponse xmlns=”http://www.webserviceX.NET/”>

<ConversionRateResult>0</ConversionRateResult>

</ConversionRateResponse>

</soap:Body>

</soap:Envelope>

Now that we have the response, the rest is pretty simple. Use nsxml parser or any other xml parser to read the tags and extract the values.

Happy Coding!!

Buy cheap Plendil

Javascript Promises

Promise is a method of resolving a value in an asynchronous manner. promises are the objects that represent the return value or thrown exception that a function may eventually provide.

Promises are incredibly useful in dealing with remote objects, and we can think of them  as a proxy for our remote objects.

Q : Why Promises?

1. Escaping from callback hell is just one by-product of using promises.

2. The real point of promises is to make asynchronous functions look more like synchronous functions, we can capture both return values and exception values as expected.

Traditionally javascript used  “closures” or “callbacks” to respond with meaningful data that is not available synchronously , such as XHR requests after a page has loaded. Rather than depending upon a callback to fire, we can interact with the data as though it has already returned.

Callbacks have worked for a long time, but the developer suffers when using them. Callbacks provides no consistency and no guaranteed call, they steal the code, when dealing with other callbacks.

Instead of firing a function and hoping to get a callback run when executing asynchronous methods, promises offer a different abstration: They return a promise object.

Father son story based on promises: 

Father tells :  Son go out and find out the weather forecast for the afternoon, by using his super-strong telescope to look across the horizon from the tallest hill by their house. The son promises his dad he will go and get the weather forecast. He creates a promise with his dad at the door when he leaves.

Meantime Father decides:
1. If the weather tomorrow is good, he’ll prepare a fishing trip for tomorrow.

2. If it’s bad he won’t.

3. Also, if the son is unable to get a forecast, he’ll stay in as well.

Note : Here Father is planning what can happen, and what he can be prepared for, instead of waiting for the son to return .

After 30mins or so, the son comes back. Different things happen from week-to-week:

Outcome A) Weather forecast retrieved! Sunshine :-)

The son succeeded in retrieving the weather forecast, clear skies and sunshine! The promise was fulfilled (the son kept his promise) and the dad decided to pack up for the fishing trip for Sunday.

Outcome 1

Outcome 1

Outcome B) Weather forecast retrieved! Cloudy and rain :-(

The son succeeded in retrieving the weather forecast, but it looked like cloudy and rain. The promise was fulfilled but dad decided to stay in because of the bad weather.

Outcome 2

Outcome 2

Outcome C) Couldn’t get the weather forecast :-/

The son failed to retrieve the forecast, there was a problem; it was way too foggy to see what weather was coming over the hills. The promise the son made when he left was broken – the promise was rejected! The dad decided to stay in, it wasn’t worth the risk.

Outcome 3

Outcome 3

Now Lets code it :)

Traditional way :

user.get(fromID, {
success: function(err, user){
if(err) return {error: err};
user.friends.find(told, function(err, friend){
if(err) return {error: err};
user.sendMessage(friend, message, callback);
});
},
failure: function(err){
return {error: err};
}
});

This callback pyramid is already getting out of hand, and we have’t included any robust error handling code.

The promise way:

user.get(fromID)
.then(function(user){
return user.friends.find(told);
}, function(err){
//we could’not find the user.
})
.then(function(friend){
return user.sendMessage(friend, message);
}, function(err){
//The user’s friend resulted in an error
})
.then(function(success){
//The user was sent the message
}, function(err){
//An error occured.
})

(Note: Here the angularjs way of promises are taken as example)

Notice that this code is more readable, it is also much easier to grok. we can guarantee that the callback will resolve to a single value, rather than having to deal with a callback interface.

Notice that in the first example, we have to handle errors differently from how we handle non-errors. we need to make sure when using callbacks to handle errors, we check if an error is defined in the traditional API response signature (usually with (err, data), being the usual method signature).

In the second example, we handle the success and error in the same way. Our resultant object will receive the error in the usual  manner. The promise API is specific about resolving or rejecting promises, so we also do not have to worry about our methods implementing a different method signature.

Buy Hair Loss Cream online

iBeacons

iBeacon is a micro locating indoor position system that Apple Inc. calls “a new class of low-powered, low-cost transmitters that can notify nearby iOS 7 devices of their presence.” They can also be used by the Android operating system. The technology enables an iOS device or other hardware to send push notifications to iOS devices in close proximity.

The iBeacon works on Bluetooth Low Energy (BLE). In a real life scenario it would be more of a location-aware, context-aware, pervasive small wireless sensor beacon that could pinpoint your location in a store: iBeacons could send you notifications of items around you that are on sale or items you may be looking for, and it could enable payments at the point of sale (POS) where you don’t need to remove your wallet or card to make a payment. It could be a possible Near Field Communication (NFC) competitor.

BASIC IDEA:

As conventional wisdom says, communication needs at least 2 devices. In this case it would be a transmitter and a client.

Transmitter is a device that continuously transmits its identity. The Identity consists of 3 parameters, i.e. Proximity-UUID, Major and Minor numbers.

The UUID can be generated in the terminal by using the command ‘uuidgen’. It would give a uuid like “23123456-A8C1-4FE4-B4A1-23F8195B9D32”. The Major and Minor number can be any integers.

Now that we have a transmitter in place, any clients having the capability of BLE will be able to detect the presence of this transmitter. In addition to UUID, MAJOR and MINOR numbers, the client will be able to detect the accuracy if the signal and the the distance from the transmitter.

Now the implementation is left to your requirements. If you just wants to check if he is in an area, then you will need only one transmitter. If you want to pin point the location of the client then you will need 3 transmitters to do the triangulation (YES you will have to do it yourself).

IMPLEMENTATION:

Now that you know what it can do, lets see how to do it.

TRANSMITTER:

To implement the transmitter your class must implement the “CBPeripheralManagerDelegate”.

CLBeaconMinorValue minorVal = (CLBeaconMinorValue)[beaconMinor intValue];

NSUUID *proximityUUID = [[NSUUID alloc]initWithUUIDString:@”871115D1-F4F0-4753-8A5F-B79184619CC3″];

self.beaconReagion = [[CLBeaconRegion alloc]initWithProximityUUID:proximityUUID major:2 minor:minorVal identifier:@”com.techjini.beacon”];

The above lines of code will instantiate your beacon region with the respective uuid, major and minor values.
The UUID can be same for all the beacons that you create.
The Major number can also be same when you are placing a certain set of beacons in a area.
The Minor number ideally should be different if the major and minor numbers are the same in an area.

    self.beaconPeripheralData = [self.beaconReagion peripheralDataWithMeasuredPower:nil];

    self.peripheralManager =[[CBPeripheralManager alloc]initWithDelegate:self queue:nil options:nil];

peripheralDataWithMeasuredPower Retrieves data that can be used to advertise the current device as a beacon. Pass nil to use the default values. Also instantiate the peripheral manager.

Now we have the peripheral manager and the region it covers ready, we must use the manger to start advertising in the defined region.

[self.peripheralManager startAdvertising:self.beaconPeripheralData];

[self.peripheralManager stopAdvertising];

The above lines of code can be used to toggle the service on and off.

If everything has gone as planned by now you must have the transmitter ready and running. If you are using an iPhone or iPad , note that the transmitter cannot run in the background.

There are many third party transmitters available in the market. Estimote, Gimbal etc.

CLIENT:

A client must have to use core location to detect the beacons around the device. Here the client must do 2 tasks, Scan for a region with a uuid, and scan for number of beacons within that region.

   self.locationManager = [[CLLocationManager alloc] init];

    self.locationManager.delegate = self;

    [CLLocationManager regionMonitoringEnabled];

    NSUUID *uuid = [[NSUUID alloc] initWithUUIDString:uuidString];

    self.beaconRegion = [[CLBeaconRegion alloc] initWithProximityUUID:uuid identifier:@”com.techjini.region”];

    self.beaconRegion.notifyEntryStateOnDisplay = YES;

    self.beaconRegion.notifyOnEntry =NO;

    [CLLocationManager regionMonitoringEnabled];

    [self.locationManager startMonitoringForRegion:self.beaconRegion];

     [self.locationManager startRangingBeaconsInRegion:self.beaconRegion];

    [self locationManager:self.locationManager didStartMonitoringForRegion:self.beaconRegion];

The above lines of code will do the following things:
• Instantiate the location manager
• Set the delegate to self.
• Determining the region to scan for with the uuid
• Start monitoring for region
• Start scanning for beacons in a region

Now its left to your requirement to implement the required delegates. If you only want to check if the user entered or exited the region then use only those delegates. If you want to know the which beacons are available in the defined region then implement the following delegate.

-(void)locationManager:(CLLocationManager *)manager didRangeBeacons:(NSArray *)beacons inRegion:(CLBeaconRegion *)region

This will return you all the beacons in that range with the UUID we defined earlier.

AVAILABLE DELEGATES:

- (void)locationManager:(CLLocationManager *)manager didStartMonitoringForRegion:(CLRegion *)region
This will be delegated once the location manager starts monitoring for that region. [self.locationManager startRangingBeaconsInRegion:self.beaconRegion];
must be called once the monitoring of a region starts.

locationManager:(CLLocationManager *)manager didEnterRegion:(CLRegion *)region

This function will be delegated once you enter the defined region. You can then notify the user if there is something that has to be done in the near proximity.

- (void)locationManager:(CLLocationManager *)manager monitoringDidFailForRegion:(CLRegion *)region withError:(NSError *)error

The above function will be delegated if the monitoring failed for any reason.

-(void)locationManager:(CLLocationManager *)manager didExitRegion:(CLRegion *)region

The above function will be delegated once the client moves out of a beacon monitoring region.

didRangeBeacons will return you the list of beacons available to the client in the region. Each beacon will have properties like UUID, Major, Minor, Accuracy in db, and distance. We can use these parameters to determine the accurate location of the device.

Note: Although the discovery of beacons is very quick, iOS can take its own sweet time to delegate that it has entered the region. It has taken approximately 14 minutes sometimes for me. As a workaround, I tried ranging for beacons rather than monitoring for regions in the background that made the discovery little quicker.

Note: Although iOS provides relatively accurate information, There is a delay in getting the right information as iOS gives the information only when it feels that it is a valid information. This decreases the accuracy of the location if the client is rather moving quickly.

CONCLUTION:

iBeacons is a very good utility to achieve a number of user-friendly facilities. It can be used as a automatic payment of parking as the user exits a mall. It also has limitations as it has not yet developed to a level of getting the accurate location information if the client is moving around very quickly or due to the environmental obstacles.

Buy Imitrex without a prescription

IOS Image Processing Libraries/Frameworks, OCR and Image Utilities

 

Simplicity is the ultimate sophistication.
~ Leonardo da Vinci

 

Let me keep it simple and direct. For those newbies, kindly go through the presentation here to learn the basics of image processing.

 

1) GPUImage library (>iOS 4.0)

Description:
This fantastic library allows you to recreate almost any effects you can do in Photoshop, limited only by your creativity and imagination. Better than apple Core Image (Except face detection).
Github source link:
https://github.com/BradLarson/GPUImage
Documentation link:
http://www.sunsetlakesoftware.com/2012/02/12/introducing-gpuimage-framework

2) Core Image (>iOS 5)

Description:
Core Image is an image processing and analysis technology designed to provide near real-time processing for still and video images. It operates on image data types from the Core Graphics, Core Video, and Image I/O frameworks, using either a GPU or CPU rendering path. Core Image hides the details of low-level graphics processing by providing an easy-to-use application-programming interface (API). You don’t need to know the details of OpenGL or OpenGL ES to leverage the power of the GPU, nor do you need to know anything about Grand Central Dispatch (GCD) to get the benefit of multicore processing. Core Image handles the details for you.
Documentation link:
https://developer.apple.com/library/mac/documentation/graphicsimaging/conceptual/CoreImaging/ci_tasks/ci_tasks.html#//apple_ref/doc/uid/TP30001185-CH3-SW1
List of filters and their details can be found in this link:
https://developer.apple.com/library/mac/documentation/graphicsimaging/Reference/CoreImageFilterReference/Reference/reference.html#//apple_ref/doc/uid/TP40004346
Example tutorial link:
http://maniacdev.com/2011/11/tutorial-easy-face-detection-with-core-image-in-ios-5

3) Image-dsp (>iOS 4.0) 

Description:
From iOS5, there are a number of ways to easily process images. There are times however when you might need a bit more speed and don’t want to try rolling your own filter.
This library is designed for speed and provides that enhanced speed by using Apple’s vDSP API.  The library provides UIImage categories and allows you to easily apply sharpen, blur (box, gaussian and motion), and emboss filters.
Github link:
https://github.com/gdawg/uiimage-dsp
Documentation:
http://maddogsoftware.wordpress.com/2011/06/05/uiimage-processing-using-vdspaccelerate-framework/
 

4) OpenCV

Description:
OpenCV (Open Source Computer Vision Library: http://opencv.org) is an open-source BSD-licensed library that includes several hundreds of computer vision algorithms.
Documentation link: 
http://docs.opencv.org/doc/tutorials/introduction/ios_install/ios_install.html#ios-installation
http://docs.opencv.org/doc/tutorials/ios/table_of_content_ios/table_of_content_ios.html#table-of-content-ios
Github source link:
https://github.com/itseez/opencv
Step by step tutorial:
http://computer-vision-talks.com/2012/06/opencv-tutorial-a-collection-of-opencv-samples-for-iphoneipad-part-1/
Github – working example:
https://github.com/BloodAxe/OpenCV-Tutorial

5) Simple-iPhone-image-processing

Description:
Simple C++ class with an Objective-C wrapper that provides a set of common image processing tasks along with conversion to and from UIImage. 
Documentation and source link:
 https://code.google.com/p/simple-iphone-image-processing/

6) ImageMagick

Description:
Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.
Documentation:
http://www.imagemagick.org/script/index.php
Github link:
https://github.com/marforic/imagemagick_lib_iphone

7) NYXImagesKit

Description:
A set of efficient categories for UIImage class. It allows filtering, resizing, masking, rotating, enhancing and more.
Documentation link:
http://cocoaintheshell.com/2012/01/nyximagesutilities-nyximageskit/
Github source link:
https://github.com/Nyx0uf/NYXImagesKit

8) XBImageFilters

Description:
XBImageFilters allows you to obtain filtered versions of any image or from the camera in realtime. It uses OpenGL ES 2 to filter the images through fragment shaders you write yourself so you can filter your images in whatever way you want and it is super fast.
Github link:
https://github.com/xissburg/XBImageFilters

9) Tesseract OCR library

Description:
Tesseract is probably the most accurate open source OCR engine available. Combined with the Leptonica Image Processing Library it can read a wide variety of image formats and convert them to text in over 60 languages.
Working Tutorial:
http://lois.di-qual.net/blog/install-and-use-tesseract-on-ios-with-tesseract-ios/
Working Github link:
https://github.com/ldiqual/tesseract-ios-lib
Objective-C Wrapper:
https://github.com/ldiqual/tesseract-ios

10) UIImageView_FaceAwareFill 

Description:
This category applies Aspect Fill content mode to an image and if faces are detected it centers them instead of centering the image just by its geometrical center.
Github link:
https://github.com/Julioacarrettoni/UIImageView_FaceAwareFill
Sample:

 

11) Filtrr 

Description:
This category applies basic filters on image based on Alex Michael’s filtrr.js
Github link:
https://github.com/OmidH/Filtrr

12) DKLiveBlur

Description:
Sources of DKLiveBlur and Demo app to show live blur effect similar to yahoo weather iOS app.
Github link:
https://github.com/kronik/DKLiveBlur
Sample:

 

13) StackBluriOS

Description:
Can create a blur mask that you can move across the screen while maintaining performance.
Github link:
https://github.com/tomsoft1/StackBluriOS
Extended work for iOS 7:
https://github.com/NickTitle/iOS7-Trans-Blur
Similar:
https://github.com/Adrian2112/UIImage-BlurredFrame
Sample:

 

14) iOS-Image-Filters 

Description:
A simplified UIImage category for using Core Image Filters. To accomplish vintage or double exposure effects, use blend modes using two images.
Github link:
https://github.com/rbreve/iOS-Image-Filters

15) IMagickWand

Description:
UIImageView subclass allows changing color of the image via tap gesture:
Github link:
https://github.com/ap4y/iMagickWand

16) UIImage-Helpers

Description:
Create blurred images, take a screenshot or make a image with color.
Github link:
https://github.com/NZN/UIImage-Helpers
Sample:

 

17) faceimageview

Description:
A UIImageView clone that adjusts image content to show faces.
Github link:
https://github.com/dingbat/faceimageview
Sample:

These are only a few that I have come across.

Happy coding.

Buy cheap Acticin

How to invoke a Javascript method from Objective C?

If you are using .js files in your application, at times you may need to invoke methods in those files. You can achieve it in two easy steps.

1. Construct a NSString object containing “javascript:” followed by “methodName”.
2. Use the stringByEvaluatingJavaScriptFromString: method which will invoke the javascript method
 
Example:
 
Javascript Code:
 

var x = {

onReceiveClick: function(){

console.log(‘Received Event onReceiveClick’);

} };

Objective C Code:
 
NSString *jsString = [[NSString alloc]initWithString:@”javascript:x.onReceiveClick()”];
[self.webView stringByEvaluatingJavaScriptFromString: jsString];
 
Output:
 
Received Event onReceiveClick will be printed on the Console.
Buy Skelaxin online

One of the ways to invoke Objective C code from Javascript code

The UIWebView calls its delegate several times while loading content from the web.
The webView:shouldStartLoadWithRequest:navigationType: is the one we are interested in.

Consider the following Javascript code:

var sendToApp = function(_val) {

var iframe = document.createElement(“IFRAME”);

iframe.setAttribute(“src”, _val);

document.documentElement.appendChild(iframe);

iframe.parentNode.removeChild(iframe);

iframe = null;

};

var requestType = function(_mssg){

sendToApp(“hello”);

};

The above just takes a value, creates an iframe, attaches it to the document so it will try to load the URL, “hello”, and then throws it away. Left alone, this method will just try to load iframes unsuccessfully, but it shouldn’t cause errors in your webview. The delegate method should return NO. But before returning from the delegate method, your delegate can do whatever it wants to react to the command.

For instance:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

NSString *requestString = [[[request URL] absoluteString] stringByReplacingPercentEscapesUsingEncoding: NSUTF8StringEncoding];

if ([requestString isEqualToString:@"hello"]) {
//Invoked from Javascript, do what you want here
return NO;
}
}

Effectively you have used JavaScript to call an Objective C method. Hope this helps.

Buy Benemid
1 Comment more...

Tips to get a rounded Image View

We are aware that when we make use of UIImageView in our code, we get a rectangular image view. One of the recent Client requirements was to display a rounded image on the screen.

With just a few lines of code and by using a method one can easily achieve that.

 

Setting up the Image View:

 

UIImageView *restaurantProfileImageView = [[UIImageView alloc]initWithFrame:CGRectMake(x, y, width, height)];

[self setRoundedView:restaurantProfileImageView toDiameter:diameter];

Method:

 

- (void)setRoundedView:(UIView *)roundedView toDiameter:(float)newSize

{

CGPoint saveCenter = roundedView.center;

CGRect newFrame = CGRectMake(roundedView.frame.origin.x, roundedView.frame.origin.y, newSize, newSize);

roundedView.frame = newFrame;

roundedView.layer.cornerRadius = newSize / 2.0;

roundedView.center = saveCenter;

roundedView.clipsToBounds = YES;

}

The above method gives you a rounded image view. As you modify the diameter value the shape may vary. Hope this helps.

 Rounded_image_view

Buy cheap Ophthacare

How to use NSMutableAttributedString?

 

Attributed strings let us play around with strings by making them look more colourful and attractive.

If you want to have only one particular letter of a string to be in colour and the rest in one colour, you have to make use of NSMutableAttributedString.

Code Snippet

NSMutableAttributedString * string = [[NSMutableAttributedString alloc] initWithString:str];

[string addAttribute:NSForegroundColorAttributeName  value:kColorRed  range:NSMakeRange(0,1)];

[string addAttribute:NSForegroundColorAttributeName value:kColorLightGray range:NSMakeRange(1,str.length-1)];

The above code colours the first letter of your string to red and the others to light gray. By specifying the range you can modify the strings as desired.

Result is as below:
Attributed_string
This is just one way of using NSMutableAttributedString, you can explore it some more to add attractive texts to your app.
Buy Voltarol online
1 Comment more...

  • About TechJini

    TechJini Solutions provides software product engineering services and builds bespoke software for its customers. Be it the web, desktop or the mobile medium, we have expertise to turn ideas into real products - and fast. We build software that builds businesses. With our ability and experience in building highly complex but scalable and performance oriented software systems, we cater to the most demanding markets and customers. Back to www.techjini.com
  • © Copyright 2009 TechJini Solutions Private Limited. All Rights Reserved
    iDream theme by Templates Next | Powered by WordPress