Thursday, October 9, 2014

This is a simple tutorial to load a .obj file (wavefront .obj) using OpenGL. I came up with this loader during my university project, where I had a requirement to load various objects into my OpenGL scene. The aim of the project was to build a 3D environment containing various objects around which one could roam about in first person view as in free roaming games.

I wanted to include objects like cars, air-crafts, boats etc in my OpenGL scene. It was then that I stumbled upon wavefront .obj files. I realized that there were plenty of cool and complex objects available all over the internet in wavefront .obj file format. But I could not put them to use as I did not have a loader that loaded these .obj files into my scene.

Then I thought I must understand the wavefront .obj file format. I spent a few minutes understanding the obj format and a few more minutes to write a code that reads the vertex information from it and renders the object defined in the .obj file using GL_Points. After a few minutes of coding, what I got was a clean loader which was capable of displaying the object in the .obj file.

Saturday, September 27, 2014

Lets have a look at a simple way to make images scale responsively in a webpage in response to the device on which the webpage is viewed. In the example considered below, the image will scale responsively to the required dimension, stay aligned to the center and will maintain its aspect ratio. If you are viewing this page on a desktop / laptop, try to resize the browser to smaller dimensions and you can see that the image will resize to the browser's width. In fact, all elements including the images on this site is designed to resize (i.e., show a responsive behavior) keeping in mind the responsive web design techniques.

Demo

(Resize your browser window)

This is achieved by wrapping the img element into a div section with style containing the property 'display' with value 'table' and for the property 'margin' we provide a value '20px auto' signifying that we need a margin of 20px on the top and bottom of the div section and let the browser calculate the left and right margins automatically so as the keep the div section centered horizontally. In the img tag make sure the width property is specified with a value set to 100%.

Monday, September 15, 2014

Here is a simple way to generate a web form which has default values loaded into the text fields without actually using a placeholder tag. A placeholder tag is only supported by few browsers. This form uses javascript to achieve the same functionality and works with all browsers having javascript enabled.

This is how the signup form behaves in action.

Demo

New user? Sign up below...

FemaleMale

Given below is the code to create the above signup form, without using placeholder tag.

Obtaining App ID and App Secret

In the next window, click on "Skip Quickstart" as you don't have anything existing to be configured. Type in the name of your application as desired, select an appropriate category below and click on Create App.

Now you have your App ID and App Secret which you will be making use to initialize the Facebook PHP SDK and get the user information.

Download the Facebook PHP SDK

Once downloaded, unpack the contents. Rename the folder "facebook-php-sdk-v4-4.0-dev" to "facebook-php-sdk" for the sake of simplicity. Make sure you move this folder to the same directory which contains your website's index.php i.e., your website's root folder.

Authentication , Authorization and Making requests to the Graph API to obtain the required facebook user information

Facebook login in simple terms can be stated as follows:

Create a helper object, which will help you in generating 'Login URL' and 'Logout URL'.

Login URL will take a new user to facebook login page for authentication and redirect to a page as specified by redirectUrl of getLoginUrl() on successful authentication.

Logout URL will take an signed in user to facebook's logout page and redirect to a page as specified by redirectUrl of getLogoutUrl().

Do a bit of session management.

Retrieve user information from Facebook's Graph API.

Also note that you will be taken to the page as specified by redirectUrl only after you make an entry of the absolute path name of the redirect page in your facebook's app. This can be done as follows:

The code is run on xampp local host and the project is named as 'floginproj'. index.php contains the login link which when pressed takes you to facebook login page, after authentication you are redirected to 'fbhome.php'. In fbhome.php you can retrieve the necessary user information obtained via the graph API and store them in the database or use them further as required in your website.

Common Errors:

In this section, I've listed down the most common errors you might come across while performing the above steps. Most of the errors given below might happen if you are using a php version lesser than php 5.4. Facebook documentation already mentions that. But in case you are using a lower version you might come across these errors and I have provided a fix.