This blog talks about iOS,Android,Mac,Cocoa,use of social networks, tips and tricks which can be used by you.
Monday, July 4, 2011
Tutorial : Localization of iPhone App
If you are confused with long posts describing localization you came across so far, you are in right place.
All the tutorials on this blog are straight to the point , No bullshit.
Let's cut to the chase.
In this post we will be dealing with localization of strings displayed in .m files.
How to localize the .nib or .xib file ? , we will deal with it in the next post. LINK
Ok, We are going to have support for 2 languages in our app: English and German.
We will have 2 directories: en.lproj and de.lproj. We will keep localized file in respective directories.
We will have a text file called Localizable.strings file in "each" directory saved as UTF-16 encoding on TextEdit.
(Note if you can't get over the .rtf format in TextEdit, then just take Localizable.strings file from the Sample Code provided at the end of this post and use it with your own strings.)
See the directory structure

Whats in the Localizable.strings ?
In de.lproj > Localizable.strings, I will have keys and values of german strings
"German" = "Duetsch";
In en.lproj > Localizable.strings,I will have keys and values of english strings
"German" = "German";
German on left is the key and German on right is the value.
Note: They both share same "key".
How to access these strings in your code ?
German is the key for which you are getting the string value. In here the value for key German is German or Duetsch depending on language in our Setting of our device.
How to change Language in Setting on iPhone/iPad. LINK
In Sample Code, you will see the output localized string printed on console.
Download the code HERE
All the tutorials on this blog are straight to the point , No bullshit.
Let's cut to the chase.
In this post we will be dealing with localization of strings displayed in .m files.
How to localize the .nib or .xib file ? , we will deal with it in the next post. LINK
Ok, We are going to have support for 2 languages in our app: English and German.
We will have 2 directories: en.lproj and de.lproj. We will keep localized file in respective directories.
We will have a text file called Localizable.strings file in "each" directory saved as UTF-16 encoding on TextEdit.
(Note if you can't get over the .rtf format in TextEdit, then just take Localizable.strings file from the Sample Code provided at the end of this post and use it with your own strings.)
See the directory structure

Whats in the Localizable.strings ?
In de.lproj > Localizable.strings, I will have keys and values of german strings
"German" = "Duetsch";
German is the key and Duetsch is the value.
In en.lproj > Localizable.strings,I will have keys and values of english strings
"German" = "German";
German on left is the key and German on right is the value.
Note: They both share same "key".
How to access these strings in your code ?
Here, NSString *sString= NSLocalizedString(@"German", @"");
German is the key for which you are getting the string value. In here the value for key German is German or Duetsch depending on language in our Setting of our device.
How to change Language in Setting on iPhone/iPad. LINK
In Sample Code, you will see the output localized string printed on console.
Download the code HERE
Sunday, July 3, 2011
First Polygon in Opengl ES 2.0
Ok. After reading this tutorial , you officially enter the Opengl ES 2.0 club.
We gotta define structures we will be using for creating our shapes. If you ever played that game in childhood where you connect the dots to create a shape. Opengl is same way. A Dot is called a vertex(plural: vertices) and A line created by drawing 2 Dots is called Index(plural: Indices).
Now every shape can be created by joining loads of triangle. If you don't believe me. Lets begin with square: It can made up of 2 triangles.
Imagine this: We have 4 vertex of square as 0,1,2,3 then a square can be made by 2 triangles with vertices 0,1,2 and 3,1,2. Lets stick with square in this tutorial we will move onto 3D shapes in next tutorial.
So in our code there are 2 properties sticked with each vertex- position and color. So we define our structure in code for 2D shapes for now as (for 3D we will have position[3] for x,y and z , as we will see in next tutorial)
Lets define now a little about shaders. There are 2 kinds of shaders: Vertex Shader and Fragment Shader.
In short, Vertex Shaders is called per vertex for defining its color . And Fragment Shader is called per pixel of the scene to define color of that pixel.
We will have 2 shader files, one for each. We will just create an empty new file and name it as MIMFrag.glsl , you can name them whatever you want. Copy following files into it.
Another empty file, name it as MIMVert.glsl and copy following:
Lets forget about Projection, Modelview for now. We will need them more specifically later on for more complicated jobs.
There you go ! Now you have defined how vertex shader and fragment shader will work. Now lets include them in our OpenglView.m file.
We will define our vertex position and corresponding colors , remember the structure we defined for the our vertices above as
struct Vertex {
We also define the indices array which tells us with what vertices our triangles will be formed.
Next important thing to discuss will be to draw
So we set the VertexAttributes with Colors and Positions of the VertexArray. Thats just pure programming bullshit incase it looks very complicated to beginners . Dont worry.
const GLvoid* pCoords is the pointer pointing to the header of the Vertices array(accessing the position property).
We will be using glDrawElements to draw triangles, there is glDrawArrays too but lets just stick to one thing till we are comfortable in one. Also there GL_TRIANGLES_STRIP , GL_TRIANGLES_FAN but we will just use GL_TRIANGLES for now. Oh and 2 * 3 in glDrawElements is the number of lines(indices) we will be drawing. There will be 6 lines((0,1) , (1,2), (2,0) ,(2,3),(3,0),(0,2)).
Finally we see the triangle like following:
We gotta define structures we will be using for creating our shapes. If you ever played that game in childhood where you connect the dots to create a shape. Opengl is same way. A Dot is called a vertex(plural: vertices) and A line created by drawing 2 Dots is called Index(plural: Indices).
Now every shape can be created by joining loads of triangle. If you don't believe me. Lets begin with square: It can made up of 2 triangles.
Imagine this: We have 4 vertex of square as 0,1,2,3 then a square can be made by 2 triangles with vertices 0,1,2 and 3,1,2. Lets stick with square in this tutorial we will move onto 3D shapes in next tutorial.
So in our code there are 2 properties sticked with each vertex- position and color. So we define our structure in code for 2D shapes for now as (for 3D we will have position[3] for x,y and z , as we will see in next tutorial)
struct Vertex {
float Position[2];
float Color[4];
};Lets define now a little about shaders. There are 2 kinds of shaders: Vertex Shader and Fragment Shader.
In short, Vertex Shaders is called per vertex for defining its color . And Fragment Shader is called per pixel of the scene to define color of that pixel.
We will have 2 shader files, one for each. We will just create an empty new file and name it as MIMFrag.glsl , you can name them whatever you want. Copy following files into it.
const char* FragmentShader = STRINGIFY(
You will later see all data of file MIMFrag.glsl will be transferred into const char var called FragmentShader. Got it from Philip Rideout book.varying lowp vec4 DestinationColor;
void main(void)
{
gl_FragColor = DestinationColor;
}
);
Another empty file, name it as MIMVert.glsl and copy following:
const char* VertexShader = STRINGIFY(
attribute vec4 Position;
attribute vec4 SourceColor;
varying vec4 DestinationColor;
uniform mat4 Projection;
uniform mat4 Modelview;
void main(void)
{
DestinationColor = SourceColor;
gl_Position = Projection * Modelview * Position;
}
);
Lets forget about Projection, Modelview for now. We will need them more specifically later on for more complicated jobs.
There you go ! Now you have defined how vertex shader and fragment shader will work. Now lets include them in our OpenglView.m file.
#define STRINGIFY(A) #A
#include "MIMFrag.glsl"
#include "MIMVert.glsl"We will define our vertex position and corresponding colors , remember the structure we defined for the our vertices above as
struct Vertex {
float Position[2];
float Color[4];
};.We also define the indices array which tells us with what vertices our triangles will be formed.
// Define the positions and colors(R,G,B,A) of two triangles.
const Vertex Vertices[] = {
{{-0.5, 0}, {1, 0, 0, 1}},
{{0, 0.5}, {0, 1, 0, 1}},
{{0.5, 0}, {1, 1, 0, 1}},
{{0, -0.5}, {1, 0, 1, 1}},
};
//Define the order of vertices
//0,1,2 forms first triangle
//2,3,0 form second triangle.
const GLubyte Indices[] = {
0, 1, 2,
2, 3, 0
};Next important thing to discuss will be to draw
//Lets give these functions pointer to head of vertex array.
GLsizei stride = sizeof(Vertex);
const GLvoid* pCoords = &Vertices[0].Position[0];
const GLvoid* pColors = &Vertices[0].Color[0];
glVertexAttribPointer(_positionSlot, 2, GL_FLOAT, GL_FALSE, stride, pCoords);
glVertexAttribPointer(_colorSlot, 4, GL_FLOAT, GL_FALSE, stride, pColors);
//Draw the 2 triangles of the square.
const GLvoid* bodyIndices = &Indices[0];
glDrawElements(GL_TRIANGLES,2* 3, GL_UNSIGNED_BYTE, bodyIndices);So we set the VertexAttributes with Colors and Positions of the VertexArray. Thats just pure programming bullshit incase it looks very complicated to beginners . Dont worry.
const GLvoid* pCoords is the pointer pointing to the header of the Vertices array(accessing the position property).
We will be using glDrawElements to draw triangles, there is glDrawArrays too but lets just stick to one thing till we are comfortable in one. Also there GL_TRIANGLES_STRIP , GL_TRIANGLES_FAN but we will just use GL_TRIANGLES for now. Oh and 2 * 3 in glDrawElements is the number of lines(indices) we will be drawing. There will be 6 lines((0,1) , (1,2), (2,0) ,(2,3),(3,0),(0,2)).
Finally we see the triangle like following:
Mixing C or C++ function with Objective-C
Labels:
C++,
mix C++ with Objective-C,
Objective-C Tutorial
Setting up Opengl ES 2.0 window in XCode.
This tutorial covers only Opengl ES 2.0 for iOS. You don't need to install any Opengl ES package from anywhere… its already there.
So we will start from a very generic template for iOS and open a Window-based application. We should add Opengl ES framework and QuartzCore framework.
LINK (How to add frameworks in project in XCode 4).
Ok. So we will just load a clean screen in this tutorial where we will doing drawing in our further tutorials.
Now I am going to make sure that I can compile the combination of Objective-C and C++ as we will be dealing with lots of C++ here as well, hence we will have to make some changes in the project setting regarding our GCC-Language as described in this article. LINK
In this tutorial its not useful but will be later on.
For this tutorial I am going to do everything in single file for beginners not get confused with so many files, classes etc… but later on we will move to get it more standard with classes and templates etc once we are past the beginners step.
Ok. Lets add a UIView and name it OpenglView.
Lets import gl.h
#import "OpenglView.h"
We need to add following to convert the layer of this view to CAEAGLLayer format so that we can do our OpenGL drawing on it.
+ (Class) layerClass
{
return [CAEAGLLayer class];
}We extract our CAEAGLLayer from the current layer. Remember it was easy to extract CALayer from current layer by just doing self.layer for a UIView but now we are downcasting CALayer to CAEAGLLayer for OpenGL specific drawings.
CAEAGLLayer* eaglLayer = (CAEAGLLayer*) super.layer;
This will tell Quartz to stop handling transparency as Opengl will do it all now.
eaglLayer.opaque = YES;
If you have done any Quartz Drawing then you must remember we used to have CGContext prepared in order to be able to draw anything. It acted like a canvas.
mimContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
BOOL setContext=[EAGLContext setCurrentContext:mimContext];
BOOL setContext=[EAGLContext setCurrentContext:mimContext];
if (!mimContext || !setContext)
{
[self release];
return nil;
}
Then we set up the render buffer and frame buffer and viewport
//Lets init and bind render buffer with current context
glGenRenderbuffers(1, &renderbuffer);
glBindRenderbuffer(GL_RENDERBUFFER, renderbuffer);
[mimContext renderbufferStorage:GL_RENDERBUFFER fromDrawable: eaglLayer];
//Frame buffer- which is a collection of render buffers and other kind of buffers like depth etc.
glGenFramebuffers(1, &framebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
glFramebufferRenderbuffer(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, renderbuffer);
//Setting the dimensions of your view area.
glViewport(0, 0, CGRectGetWidth(frame), CGRectGetHeight(frame)); glClearColor(1.0f, 1.0f, 1.0f, 1);
glClear(GL_COLOR_BUFFER_BIT);
[mimContext presentRenderbuffer:GL_RENDERBUFFER];CODE available to download HERE
Next tutorial available : HERE (wait for sometime :) )
Friday, July 1, 2011
Color Picker on Mac OS
There is an inbuilt software which comes with mac for picking the color on any pixel on the screen. It is called DigitalColor Meter. You can find it simple doing the Spotlight Search as shown below.
Then you can just scroll your mouse pointer around. It will tell you the color of selected pixel on the screen as shown in the screenshot below.

Then you can just scroll your mouse pointer around. It will tell you the color of selected pixel on the screen as shown in the screenshot below.

Use the social networks wisely !
Well. Honestly.. I didn't care when I switched from Orkut to Facebook and I wouldn't care much either if I move from FB to Google Plus. In the end, my purpose is to keep up with updates from my friends and share posts, articles with them. The thing is these social networks are nothing but a platform where people can connect, I don't really see it as a war of social networks with arrival of google+ but its more of a business where everyone is trying to make their base of users. Why ? Ad Revenue and thousands of other ways to make money out of their user base. I know one guy who is trying to create a political social network and his main motive is to control politicians through that website in the end which I find ridiculously funny. So all the social networks which I believe make our life more social and more easy to communicate. User must be aware of the hideous plans of the makers of social network and use these social network wisely. I am sure you guys must be aware of TED talk on Facebook . Watch it then decide what you want to share on these social networks ! :)
Labels:
facebook,
Google +,
Google plus,
social networks,
TED
Wednesday, June 29, 2011
Integrating C++ files with Objective-C (tips)
This trick will be helpful for people who are trying to embed Opengl ES code in their iPhone project.
One way to let your compiler know that you will be using mix of C++ and objective-C will be to convert the extension of all .m files to .mm as discussed in one the previous post(LINK) but there is another way if you don't want to change all the extensions !
In your project Settings, Under Build Settings > GCC 4.2- Language
Change the "Compile Source As" value to "Objective-C++"
It will let you compile the code without changing the extensions of all the files.
I found this wonderful tip from Pete Cole blog. LINK
One way to let your compiler know that you will be using mix of C++ and objective-C will be to convert the extension of all .m files to .mm as discussed in one the previous post(LINK) but there is another way if you don't want to change all the extensions !
In your project Settings, Under Build Settings > GCC 4.2- Language
Change the "Compile Source As" value to "Objective-C++"
It will let you compile the code without changing the extensions of all the files.
I found this wonderful tip from Pete Cole blog. LINK
Labels:
.m,
.mm,
C++,
GCC,
Objective-C,
Objective-C Tutorial,
opengl es,
xcode
Tuesday, June 28, 2011
Expected specifier-qualifier-list error in OpenGL ES iPhone project.
Well. Team was trying to create this first OpenGL ES code following the instructions of Chapter 1 in iPhone 3D Programming by Philip Rideout, and faced problem of specifier-qualifier-list in my .hpp file.
Well, to fix this problem do following:
1. Changed all .m in my project to .mm
Hope it helps someone facing the same problem.
Well, to fix this problem do following:
1. Changed all .m in my project to .mm
Hope it helps someone facing the same problem.
Monday, June 27, 2011
Face Detection API in iOS 5.
CoreImage framework introduced in iOS 5 API has classes called CIFaceFeature and CIDetector.This class has potentially has been added for detecting face feature in the image. Currently, it offers following functionalities:
hasLeftEyePosition
hasRightEyePosition
hasMouthPosition
leftEyePosition
rightEyePosition
mouthPosition
If you are wondering how to add framework in your project, refer to this post. LINK
Labels:
CoreImage,
Face Detection,
iOS 5,
iOS 5 framework,
iphone 5
How To Activate Split Keyboard on iPad
Subscribe to:
Posts (Atom)