My iPhone adventure

iDroid Mini Browser has been rejected by Apple for distribution in AppStore due to feature that resembles a well-known third party… We-know-who..

I am very saddened when i receive the e-mail, the new update suppose to please everyone. However do not despair.. i am currently working to get it back to the Appstore.. Though i must change the name and the icon.

When it’s back on the Appstore, you guys will be the first to know..

P.S. Any suggestions for new name is welcome..

Version 2.0 of iDroid Mini Browser is already in the App Store. The update fixes many bugs and improve the performance. I am sure many people will enjoy using this browser.

I also received numerous complaints about the lack of landscape support, Google suggestions and etc. All these features from version 1.0 still exist in version 2.0. However they are disabled by default.

To enable all features, just go to Settings then scroll down and look for iDroid Mini . Tap on iDroid Mini and thats it, all features should be enabled already. The images below should simplify the instructions to enable all features.

I sincerely apologize for the trouble. I am already working on next update and i am really excited with the ideas in my head. Watch out for it soon!

I am very thrilled to post this! The next update for iDroid Mini Browser finish sooner than i expected . I have submitted the app for review.

I have been receiving very helpful bug reports and  insightful suggestions in the weekends and here i will compile the fixes that will be included in the next update which is estimated to arrive in the app store in 1 week time.

The next update will include:

• Fix for overlapping Urls
• Fix for landscape view
• Fix for freezing
• Show the quick links after tab is closed
• Improve performance
• Options for rotation lock
• Options for disabling suggestions

Features under investigation :

• HTTPS authentication
• Better way to close the tab
• Gestures support for Back/Forward
• Tap on top to scroll up
• Bookmarks integration

I am aware of the performance issue on the older iPhone. Currently i own iPhone 3GS , have little testing done on the older iPhones/iPod touches. I will try to do more testing on the older devices

Having to develop it alone , i might not have sufficient resources , nevertheless i am working as hard as i can to make it a better app for everyone

Look out for the next update to iDroid Mini Browser.

Hi guys, i have just submitted an iPhone application to Apple. It will be called iDroid Mini Browser. I chose the name because while designing the User Interface and Features, i gained inspiration from Android’s browser, the Opera Mini and of course Safari browser.

The new browser will feature:

- Smart url entry ( like the one found in Google Chrome where live suggestions appear as you type)
- Tab browsing.
- Interactive Tab preview and light indicator
- Quick Linkz
- Full screen browsing
- Gorgeous UI
- Find in page!
- Bookmarks

The one feature which is worth highlighting is the tab browsing. The iPhone has a small screen, therefore using the conventional tabs found in most desktop browser is very inconvenient to use (which is why i suspect Apple invent a new way to handle tab browsing) . While Apple has create a new way to have “tabs”, there are not really tabs. And the tabs also doesn’t load simultaneously.

iDroid Mini Browser solution to tabs browsing on iPhone is to have tabs shown below. There are 4 tabs ( due to processing limitation on the old iPhones) available for the user to switch. Each tab has a LED light which show the loading progress of that particular tab. When there is no light it means that tab is not loading, blinking LED light means that tab is loading a web page , and finally green light means that tab has finished loading a web page.

Well there are a lot of things to say about the new browser, but why don’t you take a look at the video demo i have made below while waiting for the app to appear in App Store

To rotate a shape call the function glRotatef(Angle, x, y, z); . The angle is the amount of rotation in degree . The component XYZ define the axis of rotation. To make an animated rotation, the Angle will have to be incremented every frame.

Note that the function glRotate() will affect all the code below it including glTranslatef(). So if need to translate after rotate, use glLoadIdentity() first.

The below code will rotate a triangle along the x-axis:

// define the vertexes for triangle

const GLfloat triVertices[] ={

0.0f, 1.0f, 0.0f,

-1.0f, -1.0f, 0.0f,

1.0f, -1.0f, 0.0f,

};

// define the colors for our triangle vertex

const GLfloat triVertexColors[]={

1.0, 0.0, 0.0, 1.0,

0.0, 1.0, 0.0, 1.0,

0.0, 0.0, 1.0, 1.0,

};

// enable Vertex arrays feature

glEnableClientState(GL_VERTEX_ARRAY);

// enable color array feature

glEnableClientState (GL_COLOR_ARRAY);

// Clear the screen and depth buffer

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

//translate

glTranslatef(0.0, 0.0, -6.0);

// rotate

glRotatef(rtri,0.0,1.0,0.0);

// draw the vertexes

glVertexPointer(3, GL_FLOAT, 0, triVertices);

glColorPointer(4, GL_FLOAT, 0, triVertexColors);

glDrawArrays(GL_TRIANGLES, 0, 3);

rtri += 0.2f;

This post will go through the steps to add color to our shapes in iPhone device with OpenGL ES.

Previously in OpenGL, to add color we can simply call the function glColor3f(r,g,b) , however this function does not exist in OpenGL ES and instead we should call glColor4f(r,g,b,alpha). The difference lies in the 4th parameter which is Alpha value that accepts any value between 0.0 to 1.0 . Alpha value defined the transparency of the color.

In OpenGL we recall that we are able to set the color of each vertex individually by changing the color before drawing the vertex. But since now we use array to draw our vertexes, we also have to use array to specify our color like this :

// define the colors for our triangle vertex
const GLfloat triVertexColors[]={
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
};

And as the vertex array , we have to enable the COLOR_ARRAY feature as well .

glEnableClientState (GL_COLOR_ARRAY);

And finally to tell OpenGL ES about our color , we have to call the function :

glColorPointer(4, GL_FLOAT, 0, triVertexColors);

Our final code inside drawView looks like below

// define the vertexes for triangle

const GLfloat triVertices[] ={

0.0f, 1.0f, -6.0f,

-1.0f, -1.0f, -6.0f,

1.0f, -1.0f, -6.0f,

};

// define the colors for our triangle vertex

const GLfloat triVertexColors[]={

1.0, 0.0, 0.0, 1.0,

0.0, 1.0, 0.0, 1.0,

0.0, 0.0, 1.0, 1.0,

};

// enable Vertex arrays feature

glEnableClientState(GL_VERTEX_ARRAY);

// enable color array feature

glEnableClientState (GL_COLOR_ARRAY);

// Clear the screen and depth buffer

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

// set color

//glColor4f(1.0, 0.0, 0.0, 1.0);

// draw the vertexes

glVertexPointer(3, GL_FLOAT, 0, triVertices);

glColorPointer(4, GL_FLOAT, 0, triVertexColors);

glDrawArrays(GL_TRIANGLES, 0, 3);

Previously i have learnt how to setup window, draw triangle and add color with OpenGL. In this post i will be going through the steps to Draw Triangle on the iPhone device.

Download the iPhone project template from here.  This template is similar to the Iphone sdk’s default OpenGL ES template but much cleaner and easier to understand.

To install the template,  unzip the file and put it into this directory

/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application/Window-Based Application

Create new project in Xcode, choose Application on the left bar and choose “Empty OpenGL Application”.

This template already has setupView. So we can get started right away into the drawView to draw our triangle.

In OpenGL, to draw triangle we will use glBegin(GL_TRIANGLES) and glEnd() to tell OpenGL that the lines in between will specify the vertexes for the triangles to be drawn.

In OpenGL ES, however, we have to use arrays to specify the vertexes like this :

const GLfloat triVertices[] = {
  0.0f, 1.0f, 0.0f,    // x,y,z  vertex1
  -1.0f, -1.0f, 0.0f,  // x,y,z  vertex2
  1.0f, -1.0f, 0.0f    // x,y,z  vertex3
 };
In order to use the vertex, we have to first enable the feature. This line can be called in SetupView or DrawView depending on the needs. It can be disabled also using glDisableClientState(GL_VERTEX_ARRAY);.
glEnableClientState(GL_VERTEX_ARRAY)
To draw the vertexes :
glVertexPointer(3,GL_FLOAT,0,triVertices);    // Tells OpenGL ES that the pointer triVertices is a vertex array
glDrawArrays(GL_TRIANGLES,0,3);

The number 3 from above indicate that there are 3-dimensional vertex (xyz and not xy). To draw in 2D, simply change the number 3 to 2.
We are done! glTranslate still works like in OpenGL. Hit Build & Go!

I would like to thank JEFF LAMARCHE for his wonderful OpenGL ES tutorial. Here is the link to his post .
			

This post will go through the basics to color the shapes that we have created previously.

Previously we have achieved the following result. A red OpenGL window with two basic shapes drawn, one square at the center of the window and one triangle to the right of the square. Now the shapes is still in white color.

To put color, simply set the color before we start drawing using the following code

glColor3f(0.0f,1.0f,0.0f);

glColor3f() will affect the rest of the code below. So we placed it before we draw the shapes like below.

glColor3f(0.0,1.0,0.0);
glBegin(GL_QUADS);						// Draw A Quad
glVertex3f(-1.0f, 1.0f, -6.0f);				// Top Left
glVertex3f( 1.0f, 1.0f, -6.0f);				// Top Right
glVertex3f( 1.0f,-1.0f, -6.0f);				// Bottom Right
glVertex3f(-1.0f,-1.0f, -6.0f);				// Bottom Left
glEnd();							// Done Drawing The Quad

glTranslatef(2.0f,0.0f,0.0f);

glBegin(GL_TRIANGLES);
glVertex3f(  0.0f, 1.0f, -6.0f);
glVertex3f( -1.0f,-1.0f, -6.0f);
glVertex3f(  1.0f,-1.0f, -6.0f);
glEnd();

And the above code will yield the following result

So we have seen that adding glColor3f(0.0,1.0,0.0) will affect all the codes drawing below it unless we change it to another color maybe before drawing the second shapes.
If we are to set the color of individual vertex, the result will be smooth coloring. For example, we can change the triangle vertexes color to Red Green and BLUE. In this case, the color will spread from each vertex to the center, and at the center the color will blend. The codes and images below will illustrate the idea.

Here is the code that set the vertexes of our triangle to three different color.

glBegin(GL_TRIANGLES);

glColor3f(1.0,0.0,0.0);           // set color to pure red
glVertex3f( 0.0f, 1.0f, -6.0f);

glColor3f(0.0,1.0,0.0);          // set color to pure green
glVertex3f( -1.0f,-1.0f, -6.0f);

glColor3f(0.0,0.0,1.0);           // set color to pure blue
glVertex3f( 1.0f,-1.0f, -6.0f);
glEnd();

So basically here we are setting the the vertexes of the triangle to Red, Green and Blue and the actual smooth coloring will be like the image below.

Now that we understand how to setup an OpenGL window , its time to learn how to draw simple triangle and square into the OpenGL window. All the codes for the drawing is to be written inside the function GLvoid DrawGLScene(GLvoid).

Based on the Lesson 02 of great tutorials found at NeHe Productions, 3 basic shapes of drawing is introduced.

Basic shapes drawing :

GL_TRIANGLES ->    Draw a shape of 3 points that make up a triangle
GL_QUADS             ->    Draw a shape 4 points
GL_POLYGONS     ->    Draw shape more than 4 points

To draw a triangle, the 3 points is enclosed in glBegins(GL_TRIANGLES) and glEnd().

glBegins(GL_TRIANGLES);     // Start drawing triangle points

// Specify the first point
// Specify the second point
// Specify the third point

glEnd();                   // End drawing

In 3d world a point is represented in XYZ. The zero point is at the center of the view, with x-axis stretching from left to right, y-axis from bottom to top and z-axis from the inside of the screen to the outside of the screen. To specify a vertex point the code is vertexf( X-point, Y-Point, Z-point) .

To draw more than 1 triangle, just include another set of 3 points below the first set of 3 points.
To draw Quads, replace  GL_TRIANGLES with GL_QUADS and specify 4 sets of points.

glBegins(GL_QUADS);     // Start drawing Quads points

glVertex3f(-1.0f, 1.0f, -6.0f);	  // Top Left
glVertex3f( 1.0f, 1.0f, -6.0f);	  // Top Right
glVertex3f( 1.0f,-1.0f, -6.0f);	  // Bottom Right
glVertex3f( 01.0f,-1.0f, -6.0f);	  // Bottom Left

glEnd();                   // End drawing

Notice all the vertex in the code drawing for quads above is placed 6.0 units behind the z-axis. It has to be drawn deeper into the screen, otherwise we cant see the quads. Note that these vertexes is drawn relative to the center of the screen .

I would like to draw a triangle next to the square now. We will use glTranslatef( x-axis, y-axis, z-axis) to move the center along the x-axis. So what we will do is shift the center to the right by 2 units, then draw a triangle.

glTranslatef(2.0f,0.0f,0.0f);

glBegin(GL_TRIANGLES);
        glVertex3f(  0.0f, 1.0f, -6.0f);
        glVertex3f( -1.0f,-1.0f, -6.0f);
        glVertex3f(  1.0f,-1.0f, -6.0f);
glEnd();

And the result is as below.