Defining our own blocks in Blockly

Blockly is a web-based, graphical programming editor. Users can drag blocks together to build an application. No typing required. This tool was needed for our project to enable user to give his/her pseudo code as an input to the system.
You can visit blockly web site following this link.
                      https://code.google.com/p/blockly/
For this task we needed to define some new, simple blocks other than the existing blocks.
I used the block factory to define a new block. You can visit block factory following this link.
                      http://blockly-demo.appspot.com/static/apps/blockfactory/index.html

This is how it looks.

There are pre-defined blocks in the panel to the left hand side under Input, Type, Title and Colour. You can drag and drop the matching blocks and develop the block you required. These blocks defines the look and feel of your final block. Here is an example of creating a simple for loop. 

This is only half way completed. In the Preview area you can see the look of the block you are developing. 

Here you can see the complete For block I have created. In this way you can develop any block you need.