Capture picture on Webpage with Java Backend

In most of the projects we try to capture user’s face on web page. Till recently many projects have been implementing this using either Activex objects or Using Java Plugin’s or some other media plugin’s. With advent of flash and it’s related technologies this and it’s increase in presence over the web flash has become favorite technology to build such application.  Thus making it browser agnostic as compared to ActiveX Objects.

There is a project on web named JPEGCam which is free and opensource which has capability to do that.

http://code.google.com/p/jpegcam/

My effort is to create a java backend to it’s frontend ( Default one comes with php backend). Following example explains my effort

I have created a mavenized application to make it run without any extra server deployment. Here is the description

I’ve created a simple servlet which just capture’s input stream

Stores data in a folder named uploads

Send the file url back to Client to display

Here is the code

package com.linkwithweb.jpegcam;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;

import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Ashwin Kumar
 * Servlet implementation class PictureCaptureServlet
 */
public class PictureCaptureServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private String fileStoreURL = "";

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public PictureCaptureServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see Servlet#init(ServletConfig)
	 */
	public void init(ServletConfig config) throws ServletException {
		fileStoreURL = config.getServletContext().getRealPath("") + "/uploads";
		try {
			File f = new File(fileStoreURL);
			if (!f.exists()) {
				f.mkdirs();
			}
		} catch (Exception e) {
			// TODO: handle exception
		}
	}

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		try {
			long time = new Date().getTime();
			
			FileOutputStream fileOutputStream = new FileOutputStream(
					fileStoreURL + "/"+time+".jpg");
			int res;
			while ((res = request.getInputStream().read()) != -1) {
				fileOutputStream.write(res);
			}
			fileOutputStream.close();
			/**
			 * To make sure each url is differeent and not cached added time to tit
			 */
			response.getWriter().append(
					"http://localhost:8080/uploads/" + time
							+ ".jpg");

		} catch (Exception e) {
			e.printStackTrace();
		} finally {

		}
	}

}

Below is sample javascript which handles frontend

	<!-- First, include the JPEGCam JavaScript Library -->
	<script type="text/javascript" src="webcam.js"></script>
	
	<!-- Configure a few settings -->
	<script language="JavaScript">
		webcam.set_api_url( '/capture' );
		webcam.set_quality( 90 ); // JPEG quality (1 - 100)
		webcam.set_shutter_sound( true ); // play shutter click sound
	</script>
	
	<!-- Next, write the movie to the page at 320x240 -->
	<script language="JavaScript">
		document.write( webcam.get_html(320, 240) );
	</script>
	<!-- Code to handle the server response (see test.php) -->
	<script language="JavaScript">
		webcam.set_hook( 'onComplete', 'my_completion_handler' );
		
		function take_snapshot() {
			// take snapshot and upload to server
			document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
			webcam.snap();
		}
		
		function my_completion_handler(msg) {
			// extract URL out of PHP output
			if (msg.match(/(http\:\/\/\S+)/)) {
				var image_url = RegExp.$1;
				// show JPEG image in page
				document.getElementById('upload_results').innerHTML = 
					'<h1>Upload Successful!</h1>' + 
					'<h3>JPEG URL: ' + image_url + '</h3>' + 
					'<img src="' + image_url + '">';
				
				// reset camera for another shot
				webcam.reset();
			}
			else alert("Java Error: " + msg);
		}
	</script>

Now let me paste my pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.linkwithweb.browsercam</groupId>
	<artifactId>JPEGCamIntegration</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>JPEGCamIntegration Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
	</dependencies>
	<build>
		<finalName>JPEGCamIntegration</finalName>
		<plugins>
			<plugin>
				<groupId>org.mortbay.jetty</groupId>
				<artifactId>jetty-maven-plugin</artifactId>
				<version>8.0.0.M2</version>
				<configuration>
					<scanIntervalSeconds>3</scanIntervalSeconds>
				</configuration>
			</plugin>

			<!-- Facilitates downloading source and javadoc in Eclipse -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-eclipse-plugin</artifactId>
				<version>2.8</version>
				<configuration>
					<wtpversion>2.0</wtpversion>
					<downloadSources>true</downloadSources>
					<downloadJavadocs>true</downloadJavadocs>
				</configuration>
			</plugin>


			<!-- Ensures we are compiling at 1.6 level -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.3.2</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

Here is how you run this and test

mvn jetty:run-exploded

and click this URL

http://localhost:8080

Code has been checked in to following location

http://code.google.com/p/linkwithweb/source/browse/trunk/Utilities/JPEGCamIntegration.rar

Struts2 , JSON , JQGrid with annotations

This article explains my hardships which trying to get the example work. It is still not fully working solution but a solution which takes you through steps any new guys goes through while trying to configure struts2 using annotation. With introduction of annotation concept in Java5 , many framework’s tried to exploit it very well to make themselves developer friendly. With respect to Web Framework’s Spring MVC is the leader as well as frontrunner in using this. Struts2 has tried to implement the same concepts but for any new developer it be little hard to get it to work as there are not many working articles over the web. I never suggest using any fremawork tags in building UI elements which these framework’s profess ( It would be difficult to reuse/migrate if at all we have migrate in future). I never support people/framework’s who push UI development in hands of developers rather then to designer’s.

Saying this here is example of a sample struts2 application where i have a html named index.jsp which call a Struts2 Action in back-end to get data and presentation is defined in HTML

First of all i’ll define by build structure and dependencies. As i’m planning to use Maven my build structure is default maven build structure here is my pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.linkwithweb.struts2</groupId>
	<artifactId>Struts2Example</artifactId>
	<packaging>war</packaging>
	<version>1.0</version>
	<name>Struts2Example Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>

		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>org.apache.struts</groupId>
			<artifactId>struts2-core</artifactId>
			<version>2.1.8</version>
		</dependency>

		<dependency>
			<groupId>org.apache.struts</groupId>
			<artifactId>struts2-convention-plugin</artifactId>
			<version>2.1.8</version>
		</dependency>

		<dependency>
			<groupId>org.apache.struts</groupId>
			<artifactId>struts2-json-plugin</artifactId>
			<version>2.1.8</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
	</dependencies>
	<build>
		<finalName>Struts2Example</finalName>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.3.1</version>
				<configuration>
					<source>1.5</source>
					<target>1.5</target>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>tomcat-maven-plugin</artifactId>
				<version>1.0</version>
				<configuration></configuration>
			</plugin>

			<plugin>
				<groupId>org.mortbay.jetty</groupId>
				<artifactId>jetty-maven-plugin</artifactId>
				<version>7.1.4.v20100610</version>
				<configuration>
					<webApp>${basedir}/target/medihits-admin</webApp>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

The struts2-convention-plugin-version jar file is needed if your are using annotations.

Struts2 has made life little simple by avoiding all the Configuration files it needed before this version by providing configuration by annotation if we just see our web.xml , it’s pretty straightforward where we configure Struts2 Filter to route all requests to corresponding actions

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
	<display-name>Struts 2 Sample Web Application</display-name>

	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
	</filter>

	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/struts/*</url-pattern>
	</filter-mapping>

</web-app>

If you observer web.xml i’m filtering all requests that are starting with /struts/* using struts filter. This is entry point of struts application. Now let me describe how we define an Action in Struts2

package com.linkwithweb.user.action;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.ResultPath;

import com.opensymphony.xwork2.ActionSupport;
/**
*Example : http://localhost:8080/struts/User
*/
@Namespace("/struts/User")
@ResultPath(value="/")
public class WelcomeUserAction extends ActionSupport{

	private String username;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

        // Example URL : http://localhost:8080/struts/User/Welcome
	@Action(value="Welcome", results={
			@Result(name="success",location="pages/welcome_user.jsp")
	})
	public String execute() {

		return SUCCESS;	}
}

Looking at above code by now you might have understood how URL are mapped in Struts2.

Now let me describe my effort to add JSON-Plugin. If you have previously observed my pom i have added JSON plugin depdendency

		<dependency>
			<groupId>org.apache.struts</groupId>
			<artifactId>struts2-json-plugin</artifactId>
			<version>2.1.8</version>
		</dependency>

Here is some background how struts2 works

The Convention plug-in is the one which does everything in the background. The Convention plug-in does the following things.

  • By default the Convention plug-in looks for the action classes inside the following packagesstrut, struts2, action or actions. Here our package name is com.vaannila.action. Any package that matches these names will be considered as the root package for the Convention plug-in.
  • The action class should either implement com.opensymphony.xwork2.Action interface or the name of the action class should end with Action. Here we extend our WelcomeUser class from com.opensymphony.xwork2.ActionSupport which inturn implements com.opensymphony.xwork2.Action.
  • The Convention plug-in uses the action class name to map the action URL. Here our action class name is WelcomeUser and the URL is welcome-user. The plug-in converts the camel case class name to dashes to get the request URL.
  • Now the Convention plug-in knows which Action class to call for a particular request. The next step is to find which result to forward based on the return value of the execute method. By default the Convention plug-in will look for result pages in WEB-INF/contentdirectory.
  • Now the Convention plug-in knows where to look for results, but it doesn’t know which file to display inside the content directory. The Convention plug-in finds this with the help of the result code returned by the Action class. If “success” is returned then the Convention plug-in will look for a file name welcome-user-success.jsp or welcome-user.jsp . It need not be a jsp file it can be even a velocity or freemaker files. If the result value is “input” it will look for a file name welcome-user-input.jsp or welcome-user-input.vm or welcome-user-input.ftl.
Now id we need to define a Action which return’s JSON String, we need to define that action implements json-convention which is defined this way
package com.linkwithweb.ajax.action;

import java.util.ArrayList;
import java.util.List;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;

import com.opensymphony.xwork2.ActionSupport;

/**
 * @author Ashwin Kumar
 * 
 */
@Namespace("/struts/Ajax")
@Result(name = "success", type = "json")
@ParentPackage("json-default")
public class AjaxAction extends ActionSupport {

	@Action(
			value = "grid",
				results = { @Result(name = "success", type = "json") })
	public String execute() {
		return "success";
	}
/**
 * To Directly write to response and skip all Struts process flows use the below 2 methofs
 */
/*	public HttpServletResponse getResponse() {
		return ServletActionContext.getResponse();
	}*/

	/**
	 * Rename to execute to override
	 * 
	 * @return
	 * @throws Exception
	 *//*
	public String executeToOverrride() throws Exception {
		PrintWriter printWriter = null;
		getResponse().setContentType("text / xml;charset = UTF-8");
		getResponse().setHeader("Cache - Control", "no - cache");

		StringBuffer sb = new StringBuffer("<movie>");
		// let's say you have A Movie object "movie" that needs to be represented as XML
		try {
			printWriter = getResponse().getWriter();
			sb.append("<director>dir</director>");
			sb.append("<language>lang</language>");
			sb.append("<year>year</year>");
			sb.append("</movie>");
			printWriter.print(sb.toString());
		} catch (IOException e) {
			e.printStackTrace();
			throw e;
		} finally {
			printWriter.close();
			printWriter = null;
		}
		return NONE;
	}*/

	/**
	 * @return
	 */
	public String getPage() {
		return "1";
	}

	public int getTotal() {
		return 2;
	}

	public String getRecords() {
		return "13";
	}

	public List<String> getRows() {
		List<String> arrayList = new ArrayList<String>();
		arrayList.add("{'id':'13','cell':['13','2007-10-06','Client 3','1000.00','0.00','1000.00',null]}");
		arrayList.add("{'id':'12','cell':['12','2007-10-06','Client 2','700.00','140.00','840.00',null]}");
		arrayList.add("{'id':'11','cell':['11','2007-10-06','Client 1','600.00','120.00','720.00',null]}");
		arrayList.add("{'id':'10','cell':['10','2007-10-06','Client 2','100.00','20.00','120.00',null]}");
		arrayList.add("{'id':'9','cell':['9','2007-10-06','Client 1','200.00','40.00','240.00',null]}");
		arrayList.add("{'id':'8','cell':['8','2007-10-06','Client 3','200.00','0.00','200.00',null]}");
		arrayList.add("{'id':'7','cell':['7','2007-10-05','Client 2','120.00','12.00','134.00',null]}");
		arrayList.add("{'id':'6','cell':['6','2007-10-05','Client 1','50.00','10.00','60.00','']}");
		arrayList.add("{'id':'5','cell':['5','2007-10-05','Client 3','100.00','0.00','100.00','no tax at all']}");
		arrayList.add("{'id':'4','cell':['4','2007-10-04','Client 3','150.00','0.00','150.00','no tax']}");
		
		
		return arrayList;
	}
}
If you observe the above code any url request of form /struts/Ajax/grid will come to this Action class and as we defined it follows json-default convention and so this class acts as bean and this java bean is converted to json string in response here is sample response for above class
{"page":"1","records":"13","rows":["{'id':'13','cell':['13','2007-10-06','Client 3','1000.00','0.00','1000.00',null]}","{'id':'12','cell':['12','2007-10-06','Client 2','700.00','140.00','840.00',null]}","{'id':'11','cell':['11','2007-10-06','Client 1','600.00','120.00','720.00',null]}","{'id':'10','cell':['10','2007-10-06','Client 2','100.00','20.00','120.00',null]}","{'id':'9','cell':['9','2007-10-06','Client 1','200.00','40.00','240.00',null]}","{'id':'8','cell':['8','2007-10-06','Client 3','200.00','0.00','200.00',null]}","{'id':'7','cell':['7','2007-10-05','Client 2','120.00','12.00','134.00',null]}","{'id':'6','cell':['6','2007-10-05','Client 1','50.00','10.00','60.00','']}","{'id':'5','cell':['5','2007-10-05','Client 3','100.00','0.00','100.00','no tax at all']}","{'id':'4','cell':['4','2007-10-04','Client 3','150.00','0.00','150.00','no tax']}"],"total":2}
I have integrated JQGrid multiselect functionality in index.jsp. here is sample code which configures jqgrid multiselect
jQuery("#list9").jqGrid({
   	url:'response.jsp?time='+new Date().getTime(),
	datatype: "json",
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right"},		
   		{name:'total',index:'total', width:80,align:"right"},		
   		{name:'note',index:'note', width:150, sortable:false}		
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#pager9',
   	sortname: 'id',
	recordpos: 'left',
    viewrecords: true,
    sortorder: "desc",
	multiselect: true,
	caption: "Multi Select Example"
});
jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});
jQuery("#m1").click( function() {
	var s;
	s = jQuery("#list9").jqGrid('getGridParam','selarrrow');
	alert(s);
});
jQuery("#m1s").click( function() {
	jQuery("#list9").jqGrid('setSelection',"13");
});
Here is how index.jsp looks like after running ( you can use mvn -Djetty.port=9090 jetty:run or mvn tomcat:run)
Will make it more professional and fix all issues along with article in coming week. Got to work on something else so leave it here
Code has been checked in to following svn location. https://linkwithweb.googlecode.com/svn/trunk/Struts
So play with this as you want

Build your own WebMockup Tool using jQuery

This article is to show the capability of Javascript and jQuery Framework’s rather than as reference implementation to create a web mockup tool.  Infact this is not the best architecture to build a mockup tool in javascript.

Sample demo is hosted at  http://linkwithweb.appspot.com/DynamicForm.html   ( It only Works in Firefox and Chrome) 🙂

Concepts like  Drag/Drop , Resizable , Context Menu , Container’s, Grouping,

Cornering element view’s etc…. are being explained through this article.

I have used following javascript libraries to create this

  1. jquery
  2. jqueryui
  3. jquery.corner.js
  4. jquery.contextmenu.js

To create any Mockup tool we first to define few things that are required to build it

  1. Creation of Draggable Objects
  2. Creation of Droppable Area where object’s can be dropped.
  3. Layout of objects on droppable area(Dashboard)
  4. Deleting/Changing properties of objects/elements in the dashboard





Because i ‘m going to build a HTML mockup tool , i’ll define few html element’s as my draggable objects which i’m going to play with. Apart from this as i’m planning to make all objects/elements in my mockup tool as draggable one’s i’ll define a Dragholder which is used to hold my draggable objects. I have defined a class with name “drag” that defines all draggable objects

TextBox

<div id="drag1" class="drag">
     <input type="text" value="test" style="width: 80%; height: 80%;"></input>
</div>

Form

<form id="drag2" class="drag containerdiv">

	<div style=""
		class="context-menu context-menu-theme-vista context-menu-example-trigger menu-vista">
		<div class="context-menu-item">
			<div class="context-menu-item-inner">Form Container</div>
		</div>
	</div></form>

Button

<div id="drag3" class="drag">
	<input type="button" value="Drag Me" />
</div>

TextArea

<div id="drag4" class="drag">
	<textarea name="userInput" style="width: 80%; height: 80%;"></textarea>
</div>

SelectBox

<div id="drag4" class="drag">
	<select>
		<option>Small</option>
		<option selected="true">Medium</option>
		<option>Large</option>
		<option>X-Large</option>
	</select>
</div>

All the above elements have been defined with css class “drag” which we use to query latter.

Now lets define a container where all the above draggable elements will be dragged and played around

<div id="frame">
</div>

the above div element with id “frame” is used as container in our mockup tool.

Now as we have defined all elements in our HTML playground , let me explain the logic i’m going to use to create this.  Before going into that lemme explain that elements like form can have other elements so lets also make it droppable once it enters our playground

  1. Get all objects with class “drag”
  2. Add control key listener which add’s class “grouped” to elements if clicked by holding cotrol key ( Kind of selecting a element)
  3. Make all of then resizable.
  4. Add context menu for all elements
  5. Enable drag on them and assign them some id’s
  6. If element contain’s class “grouped” , moved all other elements with class “grouped” same width and height as our draggable element
  7. If elements also have class name “containerdiv” then they droppable apart from draggable, so enable droppable feature on them
Here is how sample menu is created
var menu = [
	{
		'Show an alert' : function() {
			alert('This is an alert!');
		}
	},
	{
		'Turn me red (try it)' : function() {
			this.style.backgroundColor = 'red';
		}
	},
	{
		'<b>HTML</b> <i>can be</i> <u>used in</u> <input type="text" value="test"/>' : function(
				menuItem, cmenu, e) {
			$t = $(e.target);
			return false;
		}
	},
	$.contextMenu.separator,
	{
		'Just above me was a separator!' : function() {
		}
	},
	{
		'Option with icon (for themes that support it)' : {
			onclick : function() {
			},
			icon : 'i_save.gif'
		}
	},
	{
		'Disabled option' : {
			onclick : function() {
			},
			disabled : true
		}
	},
	{
		'<div><div style="float:left;">Choose a color (don\'t close):</div><div class="swatch" style="background-color:red"></div><div class="swatch" style="background-color:green"></div><div class="swatch" style="background-color:blue"></div><div class="swatch" style="background-color:yellow"></div><div class="swatch" style="background-color:black"></div></div><br>' : function(
				menuItem, cmenu, e) {
			$t = $(e.target);
			if ($t.is('.swatch')) {
				this.style.backgroundColor = $t.css('backgroundColor');
				$t.parent().find('.swatch').removeClass('swatch-selected');
				$t.addClass('swatch-selected');
			}
			return false;
		}
	},
	{
		'Use fadeOut for hide transition' : function(menuItem, cmenu) {
			cmenu.hideTransition = 'fadeOut';
			cmenu.hideSpeed = 'fast';
		}
	},
	{
		'Use slideUp for hide transition (quirky in IE)' : function(
				menuItem, cmenu) {
			cmenu.hideTransition = 'slideUp';
		}
	},
	{
		'Use normal hide transition' : function(menuItem, cmenu) {
			cmenu.hideTransition = 'hide';
		}
	},
	{
		'Increments each time menu is displayed using beforeShow hook: #<span class="option-count">1</span>' : function() {
		}
	}, {
		'Custom menu item class and hover class for this item only' : {
			onclick : function() {
			},
			className : 'context-menu-item-custom',
			hoverClassName : 'context-menu-item-custom-hover'
		}
	} ];

Below is sample code on how we implement above functionality using jquery

/**
 * Called once document is loaded
 */
$(document).ready(function() {
	$('a[rel*=facebox]').facebox({
		div : '#frame',
		loading_image : 'loading.gif',
		close_image : 'closelabel.gif'
	});

	// Counter
	counter = 0;

	// Make element draggable
	// $(".dragged").resizable().draggable();
	enableDrag("frame", ".drag", "false");

	// $(".drag").corner();

	// Make element droppable
	$("#frame").droppable({
		drop : function(ev, ui) {
			if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
				counter++;
				var element = $(ui.draggable).clone();

				// alert(element);
				element.addClass("tempclass");

				$(this).append(element);

				$(".tempclass").attr("id", "clonediv" + counter);
				$("#clonediv" + counter).removeClass("tempclass");

				// Get the dynamically item id
				draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
				// itemDragged = "dragged" + RegExp.$1
				// //console.log(itemDragged)
				itemDragged = "dragged";

				$("#clonediv" + counter).addClass(itemDragged);

				enableDrag("parent", "#clonediv" + counter, "true");

			}
		}
	});
});

Code for function enableDrag which is main funciton in our project

/**
 * This function enables drag on a object and contains its drag in the passed
 * container
 *
 * @param dragContainment
 * @param draggableClass
 * @param resizable
 */
function enableDrag(dragContainment, draggableClass, resizable) {
	// Make element draggable and resizable
	$(draggableClass).click(function(event) {
		if (event.ctrlKey) {
			$(this).toggleClass('grouped');
		}
	});
	/**
	 * Add Context Menu
	 */
	$(draggableClass).find(".menu-vista").contextMenu(menu, {
		theme : 'vista',
		beforeShow : beforeShowFunc
	});
	$(draggableClass).contextMenu(draggableObjectMenu, {
		theme : 'vista'
	});

	var element;

	/**
	 * Make the element resizable
	 */
	if (resizable == "true") {
		element = $(draggableClass).corner().resizable();
	} else {
		element = $(draggableClass).corner();
	}

	/**
	 * If element is containerdiv then make it droppable
	 */
	if (element.hasClass("containerdiv")) {

		// Make element droppable
		element.droppable({
			greedy : true,
			out : function(event, ui) {

				var element = $(ui.draggable);
				if (!element.hasClass("containerdiv")) {
					$(this).parent().append(element);
				}
			},
			drop : function(ev, ui) {
				if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
					var element = $(ui.draggable);
					counter++;

					element = $(ui.draggable).clone();
					// alert(element);
					element.addClass("tempclass");

					$(this).append(element);

					$(".tempclass").attr("id", "clonediv" + counter);
					$("#clonediv" + counter).removeClass("tempclass");

					// Get the dynamically item id
					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
					// itemDragged = "dragged" + RegExp.$1
					// //console.log(itemDragged)
					itemDragged = "dragged";

					$("#clonediv" + counter).addClass(itemDragged);

					enableDrag("frame", "#clonediv" + counter, "true");

				} else {
					var element = $(ui.draggable);
					$(this).append(element);
				}
			}
		});

	}

	/**
	 * Now make element draggable
	 */
	element.draggable({
		helper : 'clone',
		containment : dragContainment,

		start : function(event, ui) {
			posTopArray = [];
			posLeftArray = [];
			thisElem = $(this);

			if ($(this).hasClass("grouped")) { // Loop through each element and
				// store beginning start and
				// left positions

				$(".grouped").each(function(i) {
					thiscsstop = $(this).css('top');
					if (thiscsstop == 'auto')
						thiscsstop = 0; // For IE

					thiscssleft = $(this).css('left');
					if (thiscssleft == 'auto')
						thiscssleft = 0; // For IE

					posTopArray[i] = parseInt(thiscsstop);
					posLeftArray[i] = parseInt(thiscssleft);
				});
			}

			begintop = $(this).offset().top; // Dragged element top position
			beginleft = $(this).offset().left; // Dragged element left position
		},

		drag : function(event, ui) {
			var topdiff = $(this).offset().top - begintop; // Current distance
			// dragged element
			// has traveled
			// vertically
			var leftdiff = $(this).offset().left - beginleft; // Current
			// distance
			// dragged
			// element has
			// traveled
			// horizontally

			var draggingId = $(this).attr("id");
			if ($(this).hasClass("grouped")) {
				// //console.log("Initial pos "+begintop +"
				// Left----"+beginleft);
				// //console.log("Diff Value is "+topdiff +"
				// Left----"+leftdiff);
				$(".grouped").each(function(i) {
					if (draggingId === $(this).attr("id")) {
						topdiff = $(this).offset().top - begintop; // Current
						leftdiff = $(this).offset().left - beginleft; // Current
					}
				});

				$(".grouped").each(function(i) {
					// //console.log("Pres pos for "+$(this).attr('id')+" is
					// "+posTopArray[i] +" Left----"+posLeftArray[i]);
					if (draggingId !== $(this).attr("id")) {
						$(this).css('top', posTopArray[i] + topdiff); // Move
						$(this).css('left', posLeftArray[i] + leftdiff); // Move
					}
				});

			}
		},

		// When first dragged
		stop : function(ev, ui) {
			var pos = $(ui.helper).offset();
			objName = "#clonediv" + counter
			var draggingId = $(this).attr("id");

			var leftValue = pos.left;
			var topValue = pos.top;

			/**
			 * The below if loop is written to fix the relative and abosiulte
			 * positioning issue. When any draggable object is dropped into a
			 * droppable container which resides in another container then the
			 * droppable with more z-index becomes relative positining for its
			 * sub elements
			 */
			if ($(this).parent().hasClass("containerdiv")) {
				// console.log("Left Pos "+leftValue);
				// console.log("Top Pos "+topValue);
				// console.log("$(this).parent().attr('left')
				// "+$(this).parent().offset().left);
				// console.log("$(this).parent().offset().top
				// "+$(this).parent().offset().top);
				leftValue = pos.left - $(this).parent().offset().left;
				topValue = pos.top - $(this).parent().offset().top;
			}

			if ($(this).hasClass("drag")) {
				$(objName).css({
					"left" : leftValue,
					"top" : topValue
				});
				$(objName).removeClass("drag");

			} else {
				objName = draggingId;
				thisElem.css({
					"left" : leftValue,
					"top" : topValue
				});
			}

			// console.log("Left Pos "+leftValue);
			// console.log("Top Pos "+topValue);

			var topdiff = $(this).offset().top - begintop; // Current distance
			// dragged element
			// has traveled
			// vertically
			var leftdiff = $(this).offset().left - beginleft; // Current
			// distance
			// dragged
			// element has
			// traveled
			// horizontally

			// This logic for Group Elements

			if ($(this).hasClass("grouped")) {
				// //console.log("Initial pos "+begintop +"
				// Left----"+beginleft);
				// //console.log("Diff Value is "+topdiff +"
				// Left----"+leftdiff);
				$(".grouped").each(function(i) {
					if (draggingId === $(this).attr("id")) {
						topdiff = $(this).offset().top - begintop; // Current
						// distance
						// dragged
						// element
						// has
						// traveled
						// vertically
						leftdiff = $(this).offset().left - beginleft; // Current
						// distance
						// dragged
						// element
						// has
						// traveled
						// horizontally
					}
				});

				$(".grouped").each(function(i) {
					// //console.log("Pres pos for "+$(this).attr('id')+" is
					// "+posTopArray[i] +" Left----"+posLeftArray[i]);
					if (draggingId !== $(this).attr("id")) {
						$(this).css('top', posTopArray[i] + topdiff); // Move
						// element veritically - current css top + distance
						// dragged element has travelled vertically
						$(this).css('left', posLeftArray[i] + leftdiff); // Move
						// element horizontally-current css left + distance
						// dragged element has travelled horizontally
					}
				});

			}

		}
	});

}

Below is code which generate HTML Code from the design we made

/**
 * On Spit html button clicked alert the HTML in the frame that gets generated
 */
function alertHTML() {
	var htmlClone = $("#frame").clone();
	alert("<html><head></head><body>" + htmlClone.html() + "</body></html>");
}

Code has been checked in to follow svn url https://linkwithweb.googlecode.com/svn/trunk/WebMockup

Njoy playing with javascript and jQuery

Javascript RSA Encryption and Java Decryption

Many of us have been working with Javascript since long time but when ever i ask people how to send encrypted data, the only answer is to use SSL . But this article shows how to send encrypted data even when we don’t have ssl enabled. This can come in to handy in many scenario’s

I used jCryption and Javascript Library to encrypt in Javascript and BouncyCastle Library on Javabackend to decypt,

Here is the flow in the example

  1. First Generate  RSA keys on server end ( Store in session).
  2. Send public key to client (javascript)
  3. Store keys in javascript variable
  4. In All subsequent requests use this key to encrypt data and send to server
  5. Use keys stored in session  to decrypt data and send response to server

Keys generation utility class in Java

package com.linkwithweb.encryption;

import java.io.IOException;
import java.security.KeyPair;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class EncryptionServlet
 */
public class EncryptionServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * Default constructor.
	 */
	public EncryptionServlet() {
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		if (request.getParameter("generateKeypair") != null) {

			JCryptionUtil jCryptionUtil = new JCryptionUtil();

			KeyPair keys = null;
			if (request.getSession().getAttribute("keys") == null) {
				keys = jCryptionUtil.generateKeypair(512);
				request.getSession().setAttribute("keys", keys);
			}

			StringBuffer output = new StringBuffer();

			String e = JCryptionUtil.getPublicKeyExponent(keys);
			String n = JCryptionUtil.getPublicKeyModulus(keys);
			String md = String.valueOf(JCryptionUtil.getMaxDigits(512));

			output.append("{\"e\":\"");
			output.append(e);
			output.append("\",\"n\":\"");
			output.append(n);
			output.append("\",\"maxdigits\":\"");
			output.append(md);
			output.append("\"}");

			output.toString();
			response.getOutputStream().print(
					output.toString().replaceAll("\r", "").replaceAll("\n", "")
							.trim());
		} else {
			response.getOutputStream().print(String.valueOf(false));
		}
	}

}

All client code is there in index.jsp and framework.js

Javascript Function that gets keys from server and stores in javascript variable

/**
 * Get Security keys from server so that we can encrypt request in future
 */
function getKeys() {
	$.jCryption.getKeys("EncryptionServlet?generateKeypair=true", function(
			receivedKeys) {
		keys = receivedKeys;
	});
}

On login button clicked here is how you encrypt and send request to server

/**
 * Called on Login Button clicked
 */
function onLoginButtonClicked() {
	var user = $("#login_user").val();
	var password = $("#login_password").val();
	$.jCryption.encrypt(user, keys, function(encrypted) {
		encryptedUser = encrypted;
		$.jCryption.encrypt(password, keys, function(encryptedPasswd) {
			encryptedPassword = encryptedPasswd;
			/**
			 * As both userName and password are encrypted now Submit login
			 */
			submitLoginRequest();
		});
	});
}

/**
 * Submit Login request
 */
function submitLoginRequest() {
	sendAjaxRequest("LoginServlet", {
		username : encryptedUser,
		password : encryptedPassword
	}, function(data) {
		if (data.length > 0) {
			$("#login_status").empty();
			$("#login_status").append(data);
		}
	});
}

And below is svn URL to download sample source code  https://linkwithweb.googlecode.com/svn/trunk/Utilities/jCryptionTutorial

Next version of tutorial will be from flex to java. Njoy reading and playing with Encryption code

Repairing /Fixing WMI Repository

Rebuilding the WMI Repository

If you experience behavior when using WMI, such as application errors or scripts that used to work are no longer working, you may have a corrupted WMI repository. To fix a corrupted WMI repository, use these steps:

Windows XP and Windows Vista

Click Start, Run and type CMD.EXE

Note: In Windows Vista, you need to open an elevated Command Prompt window. To do so, click Start, click All Programs, click Accessories, right-click Command Prompt, and then click Run as administrator.

Type this command and press Enter:

net stop winmgmt

Using Windows Explorer, rename the folder %windir%\System32\Wbem\Repository. (For example, %windir%\System32\Wbem\Repository_bad). %windir% represents the path to the Windows directory, which is typically C:\Windows.

Switch to Command Prompt window, and type the following and press ENTER after each line:

net start winmgmt

EXIT

Courtesy: The above is excerpted from Microsoft Technet article WMI Isn’t Working!
© 2007 Microsoft Corporation. All rights reserved.

For Windows XP Service Pack 2

Click Start, Run and type the following command:

rundll32 wbemupgd, UpgradeRepository

This command is used to detect and repair a corrupted WMI Repository. The results are stored in the setup.log (%windir%\system32\wbem\logs\setup.log) file.

For Windows Vista

Open an elevated Command Prompt window. To do so, click Start, click All Programs, click Accessories, right-click Command Prompt, and then click Run as administrator.

Type the following command:

winmgmt  /salvagerepository

The above command Performs a consistency check on the WMI repository, and if an inconsistency is detected, rebuilds the repository. The content of the inconsistent repository is merged into the rebuilt repository, if it can be read.

For Windows Server 2003

Use the following command to detect and repair a corrupted WMI Repository:

rundll32 wbemupgd, RepairWMISetup

Re-registering the WMI components (Ref WMI FAQ)

The .DLL and .EXE files used by WMI are located in %windir%\system32\wbem. You might need to re-register all the .DLL and .EXE files in this directory. If you are running a 64-bit system you might also need to check for .DLLs and .EXE files in %windir%\sysWOW64\wbem.

To re-register the WMI components, run the following commands at the command prompt:

  • cd /d %windir%\system32\wbem
  • for %i in (*.dll) do RegSvr32 -s %i
  • for %i in (*.exe) do %i /RegServer

Note that none of the above two methods restore the missing files related to Windows Management Instrumentation (WMI). So, below is a comprehensive repair procedure that restores all the missing WMI modules. In case of missing WMI modules, you may use the following method.


Microsoft has released a new diagnosis tool that helps system administrators diagnose and repair problems with the WMI. It is advisable to go through the WMIDiag_ReadMe.doc file to understand how the utility works, and the supported command-line arguments. Here is the download link: The WMI Diagnosis Utility

You may use the utility (WMIDiag.vbs) to find if a repository rebuild is necessary or not. The utility runs a comprehensive testing of WMI and reports the results to a log file, which is placed in the user’s Temp folder (%Temp%) folder by default.

OAuth using Scribe with Yahoo API

This is Sequence of my previous post but now with yahoo

I have downloaded Scribe example source code to get Authenticated with yahoo. But the default example was not working. After doing some 4 hours of research i found out that the author had forgot to send a request to yahoo api’s to get GUID which is inturn used to get user profile data. I have modified code to fix that and here is the working code

package org.scribe.examples;

import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.util.Scanner;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

import org.scribe.builder.ServiceBuilder;
import org.scribe.builder.api.YahooApi;
import org.scribe.model.OAuthRequest;
import org.scribe.model.Response;
import org.scribe.model.Token;
import org.scribe.model.Verb;
import org.scribe.model.Verifier;
import org.scribe.oauth.OAuthService;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

public class YahooExample {
	private static String PROTECTED_RESOURCE_URL = "http://social.yahooapis.com/v1/user/GUID/profile?format=json";

	public static void main(String[] args) {
		OAuthService service = new ServiceBuilder()
				.provider(YahooApi.class)
				.apiKey("dj0yJmk9TXZDWVpNVVdGaVFmJmQ9WVdrOWMweHZXbkZLTkhVbWNHbzlNVEl5TWprd05qUTJNZy0tJnM9Y29uc3VtZXJzZWNyZXQmeD0wMw--")
				.apiSecret("262be559f92a2be20c4c039419018f2b48cdfce9").build();
		Scanner in = new Scanner(System.in);

		System.out.println("=== Yahoo's OAuth Workflow ===");
		System.out.println();

		// Obtain the Request Token
		System.out.println("Fetching the Request Token...");
		Token requestToken = service.getRequestToken();
		System.out.println("Got the Request Token!");
		System.out.println();

		System.out.println("Now go and authorize Scribe here:");
		System.out.println(service.getAuthorizationUrl(requestToken));
		System.out.println("And paste the verifier here");
		System.out.print(">>");
		Verifier verifier = new Verifier(in.nextLine());
		System.out.println();

		// Trade the Request Token and Verfier for the Access Token
		System.out.println("Trading the Request Token for an Access Token...");
		Token accessToken = service.getAccessToken(requestToken, verifier);
		System.out.println("Got the Access Token!");
		System.out.println("(if your curious it looks like this: "
				+ accessToken + " )");
		System.out.println();

		// Now let's go and ask for a protected resource!
		System.out.println("Now we're going to access a protected resource...");
		OAuthRequest request1 = new OAuthRequest(Verb.GET,
				"http://social.yahooapis.com/v1/me/guid?format=xml");
		service.signRequest(accessToken, request1);
		Response response1 = request1.send();
		System.out.println("Got it! Lets see what we found...");
		System.out.println();
		System.out.println(response1.getCode());
		System.out.println(response1.getBody());

		PROTECTED_RESOURCE_URL = PROTECTED_RESOURCE_URL.replaceAll("GUID",
				parseYahooGUIDResposne(response1.getBody()));
		System.out.println("PROTECTED_RESOURCE_URL    "
				+ PROTECTED_RESOURCE_URL);
		// Now let's go and ask for a protected resource!
		System.out.println("Now we're going to access a protected resource...");
		OAuthRequest request = new OAuthRequest(Verb.GET,
				PROTECTED_RESOURCE_URL);
		service.signRequest(accessToken, request);
		request.addHeader("realm", "yahooapis.com");
		Response response = request.send();
		System.out.println("Got it! Lets see what we found...");
		System.out.println();
		System.out.println(response.getCode());
		System.out.println(response.getBody());

		System.out.println();
		System.out
				.println("Thats it man! Go and build something awesome with Scribe! :)");

	}

	/**
	 *
	 */
	private static String parseYahooGUIDResposne(String data) {
		// get the factory
		DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();

		try {

			// Using factory get an instance of document builder
			DocumentBuilder db = dbf.newDocumentBuilder();

			// parse using builder to get DOM representation of the XML file
			Document dom = db.parse(new ByteArrayInputStream(data.getBytes()));

			Element rootElement = dom.getDocumentElement();
			return getGUID(rootElement);

		} catch (ParserConfigurationException pce) {
			pce.printStackTrace();
		} catch (SAXException se) {
			se.printStackTrace();
		} catch (IOException ioe) {
			ioe.printStackTrace();
		}
		return null;
	}

	/**
	 * I take an employee element and read the values in, create
	 * an Employee object and return it
	 */
	private static String getGUID(Element guidEl) {

		// for each <employee> element get text or int values of
		// name ,id, age and name
		String name = getTextValue(guidEl, "value");
		// System.out.println("Name:   "+name);

		return name;
	}

	/**
	 * I take a xml element and the tag name, look for the tag and get
	 * the text content
	 * i.e for <?xml version="1.0" encoding="utf-8"?><guid xmlns="http://social.yahooapis.com/v1/schema.rng"
	 * xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
	 * yahoo:uri="http://social.yahooapis.com/v1/me/guid"><value>4QWOBUCQHETEL34LSRUKJEV5W4</value></guid> xml snippet if
	 * the Element points to employee node and tagName is 'name' I will return John
	 */
	private static String getTextValue(Element ele, String tagName) {
		String textVal = null;
		NodeList nl = ele.getElementsByTagName(tagName);
		if (nl != null && nl.getLength() > 0) {
			Element el = (Element) nl.item(0);
			textVal = el.getFirstChild().getNodeValue();
		}

		return textVal;
	}

	/**
	 * Calls getTextValue and returns a int value
	 */
	private static int getIntValue(Element ele, String tagName) {
		// in production application you would catch the exception
		return Integer.parseInt(getTextValue(ele, tagName));
	}

}

In Next post i would provide a sample webapp where OAuth is used to authenticate with Yahoo/Google/Facebook. Njoy networking

OAuth with Facebook

Most of the applications over web these days need to get connected with each other. With the surge of Social Aware applications people started integrating all of their social application in one location.  Following is my attempt to solve the "Complex" but easy puzzle for novice developers

To start with i’ll demonstrate how to Login with Facebook and details of facebook user into your application

Lemme first explain what OAuth means in Brief.  Below is the diagram which explains

First we call Service provider with  ClientID  / CallBack URL  and Some additional Parameters based on Service provider you use

Then if we pass the right parameters then Service provider will give us a call back to given callback URL with Authorization Token and some parameter that states time to live

Now we can use this Authorization token in our subsequent requests to Service Provider Provided services

Here is example of facebook

Step 1

Goto Facebook developer Page

Step 2

Register your App. You will get you app key/secret etc

Step 3

Now goto this sample URL to get your token

Test with this URL

https://graph.facebook.com/oauth/authorize?type=user_agent&client_id=168452316544703&redirect_uri=http%3A%2F%2Fnorthalley.com%2FTestWeb%2F/GetIPServlet&scope=user_photos,email,user_birthday,user_online_presence

Replace Corresponding Tokens for your Application

https://graph.facebook.com/oauth/authorize?type=user_agent&client_id=CLIENT_ID&redirect_uri=REDIRECT_URL&scope=user_photos,email,user_birthday,user_online_presence

Step 4

Once you get Call back get the access_token from the request and store it

Example

—————–

http://northalley.com/TestWeb/GetIPServlet#access_token=168452316544703%7C2.WKMyHmlbzscco7HjrkJUMw__.3600.1304560800.1-100000131478113%7C9IpaoHOvCIfS4bqRZSqbu5-Rp8E&expires_in=5233

Step5

——–

Get user Data using the above token.

https://graph.facebook.com/me?access_token=168452316544703|2.WKMyHmlbzscco7HjrkJUMw__.3600.1304560800.1-100000131478113|9IpaoHOvCIfS4bqRZSqbu5-Rp8E

This gets user data in following format

{
   "id": "100000131478113",
   "name": "Ashwin Kumar",
   "first_name": "Ashwin",
   "last_name": "Kumar",
   "link": "http://www.facebook.com/profile.php?id=100000131478113",
   "birthday": "06/24/1984",
   "hometown": {
      "id": "103095893064172",
      "name": "Rajahmundry"
   },
   "location": {
      "id": "103129393060364",
      "name": "Allentown, Pennsylvania"
   },
   "work": [
      {
         "employer": {
            "id": "111926488822704",
            "name": "Freelancer"
         },
         "position": {
            "id": "130875350283931",
            "name": "CEO & Founder"
         },
         "start_date": "0000-04",
         "end_date": "0000-00"
      },
..............
...........
.............

Njoy integrating facebook to your application. Subsequent series will Cover Google/Twitter/LinkedIn/Yahoo Integration. Also writing a java library for this.. Will share that in opensource once done

Njoy playing with social apps….