Sunday 11 March 2012

Cytoscape Web Tutorial


What is cytoscape web?

 Cytoscape Web is a tool for developers to display networks on the web page. It is a network visualisation library. For using cytoscape web, you should  familiar with HTML and Javascript.

 How to get it?

you can download Cytoscape Web from


Getting started.

1.   Download cytoscape web.
2.   Extract the files.
3.   Open cytoscapeweb_v1.0 which contains 2 subfolders, js and swf.
4.   Copy the files
AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js from js/min (java script files)
CytoscapeWeb.swf, playerProductInstall.swf from swf folder. (flash files)
you need the above 5 files for running cytoscape web.
5.  Download a web server such as apache tomcat. (we can run the cytoscape with out using    the server as       it      is   a simple html.but we need to change the security settings to allow flash to run from the local system. You do not need to change the  security settings if you deploy Cytoscape Web on a web server).
6.     Open apache-tomcat-7.0.23\webapps folder. create a new folder say cytoscape inside webapps.  create  2 folders js and swf in cytoscape. put the files AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js in js folder  and  CytoscapeWeb.swf, playerProductInstall.swf in swf folder.
7.    Start the tomcat server by double clicking startup.bat in apache-tomcat-7.0.23\bin folder
8.    For testing copy the below example in txt file and save it as html file. adjust the Script tag references to the path where you extracted Cytoscape Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
   
    <head>
        <title>Cytoscape Web example</title>
       
        <!-- JSON support for IE (needed to use JS API) -->
        <script type="text/javascript" src="js/json2.min.js"></script>
       
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
        <script type="text/javascript" src="js/AC_OETags.min.js"></script>
       
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
        <script type="text/javascript" src="js/cytoscapeweb.min.js"></script>
       
        <script type="text/javascript">
            window.onload=function() {
                // id of Cytoscape Web container div
              
                var div_id = "cytoscapeweb";
               
                // you could also use other formats (e.g. GraphML) or grab the network data via AJAX
                var network = {
                    data: {
                        nodes: [ { id: "1" }, { id: "2" }, { id: "3" } ],
                        edges: [ { id: "2to1", target: "1", source: "2" },{ id: "3to2", target: "3", source: "2" } ]
                    }
                };
               
                // initialization options
                var options = {
                    // where you have the Cytoscape Web SWF
                    swfPath: "swf/CytoscapeWeb",
                    // where you have the Flash installer SWF
                    flashInstallerPath: "swf/playerProductInstall"
                };
               
                // init and draw
                var vis = new org.cytoscapeweb.Visualization(div_id, options);
                vis.draw({ network: network });
            };
        </script>
       
        <style>
            /* The Cytoscape Web container must have its dimensions set. */
            html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
            #cytoscapeweb { width: 100%; height: 100%; }
        </style>
    </head>
   
    <body>
        <div id="cytoscapeweb">
            Cytoscape Web will replace the contents of this div with your graph.
        </div>
    </body>
   
</html>



I have save the above example as NewFile.html .

9. open browser and type url : http://localhost:8080/cytoscape/NewFile.html


Tuesday 6 March 2012

How to expand and collapse rows in jsf datatable?

How to expand and collapse rows in jsf datatable?

<%@ taglib uri="http://myfaces/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://adesa.com/jsf/components" prefix="adesa"%>
<%@ taglib uri="http://www.adesa.com/security" prefix="security"%>
<script type="text/javascript">
 function validate() {
     return false;
}

function addOnclickToDatatableRows(row) {
   
    var trs = document.getElementById('body:form1:dt1:'+row+':hide');
   
    if(trs.style.display=='none') {
        trs.style.display='block'
    } else {
        trs.style.display='none'
    }
 }

function highlightRow(tr) {
    tr.style.display = 'none' ;
}
</script>
<f:view>
    <h:form id="form1" onsubmit="return validate();">
        <br>
        <br>
        <br>
        <t:dataTable id="dt1" rowIndexVar="row"
            value="#{TableBean.perInfoAll}" var="item" bgcolor="#F1F1F1"
            border="10" cellpadding="5" cellspacing="3" first="0" rows="4"
            width="50%" dir="LTR" frame="hsides" rules="all"
            summary="This is a JSF code to create dataTable.">
            <h:column>
           
                <t:div id="heading">
                    <h:outputText value="heading"></h:outputText>
                   
                </t:div>
                <t:div id="hide">
                    <h:outputText value="#{item.id}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                    <h:outputText value="#{row}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                </t:div>
                <h:commandLink value="show/hide"
                    onclick="addOnclickToDatatableRows(#{row})"></h:commandLink>
            </h:column>
        </t:dataTable>
        <br>
        <br>
    </h:form>
</f:view>

How to Re-Execute Javascript on Ajax Render?

How to Re-Execute Javascript on Ajax Render?

Enclose all the ajax call and java script with in the output panel and set ajaxRendered = true

<a4j:outputPanel ajaxRendered="true">

Monday 5 March 2012

UML Tutorial

Introducing the UML

The Unified Modeling Language or UML is a standard  language for specifying, visualizing, constructing, and documenting the  software systems.
•The UML uses mostly graphical notations to express the design of software projects.
•UML describes a notation and not a process. 
•UML model describes what a system is supposed to do. It does not tell how to implement the system.

Uml diagrams
In  UML certain number of graphical elements combined into diagrams.
•Because it is a language, the UML has rules for combining these elements.
•Uml consists of eight basic diagram 
  1.      Class Diagram
  2.      Object Diagram
  3.      Component Diagram
  4.      Deployment Diagram
  5.      Use Case Diagram
  6.      Collaboration Diagram
  7.      Activity Diagram
  8.      State Diagram
Class Diagram
•It is used to describe the structure of a class including the properties and methods and the relationship between the classes.
         
Notations

 class












Relationship between classes

Aggregation ->line with a hollow diamond
Composition ->line with a filled diamond
Generalization-> line with a hollow arrow head
realization->dashed line with a hollow arrow head
Association->line connecting two classes

Object diagram

It is used to describe the system at a particular point of time.
     
 Notations
 Objects
      objects are the instance of class.

Association
       it represents the association between the objects

Component Diagram

•It is used to describe the dependency  between various software components.
     
  Notations
Component  ->represents a software entity in a system.

 





Dependency ->represents the relationship between the components.
 
 
Deployment Diagram

•It is used to represent the hardware used to implement the system and  association between hardware components.
Notation
Components->represents the software entity.






Node ->represents a piece of hardware in a system.




  
  





 Association->represents the communication between hardware components 

example



















Use case diagram
•It identifies the functionality provided by the system (use case) ,the users that interact with the system (Actor) and the association between the user and functionality.

Notations
        use case->functionality provided by the system







Actor-> user or another system that interact with the use case








Association -> link actors with the use case
 
example shows a user placing an order with a sales company might follow these steps.
 



















State Diagram

It represents the various state an object can go through and event that cause the state transition.
      Notations
     state ->





Transition-> represent the  changing object state caused by events





Initial State -> state of an object before transition 





Final State ->represent the destruction of an object.





State diagram of a light









Activity Diagram
•It is used to represent the work flow with in a system.
•It shows steps (activities) ,decision point and branch
Notations
–Activity->each step in a work flow
 









–Initial state->entry point

  



Final state->end of work flow
 


–Transition ->
 



–Decision ->represent a condition







Activity diagram to find the factorial of a number















Collaboration Diagram


It represent the interaction between the objects.
Notations
 Object->
 Message->tells the receiving object to execute one of its operation






Actor->communicate with the object





example:

Administrator use a web application to manage user account
 

Find User
   LookUpUser
Update User
   ValidateUser
   UpdateUser

 
Conclusion

It is  independent of particular programming languages.
•It encourage the growth of the OO tools market.

























 













Thursday 16 February 2012

LIBSVM tutorial


What is SVM?

A Support Vector Machine is a learning algorithm typically used for classification
problems (Weather prediction, text categorization, handwritten character recognition, image
classification,Facial expression classification etc.). ie, if we have some sets of things classified
But we  know nothing about how we classified it, or we don't know the rules used for classification),
when a new data comes, SVM can PREDICT which set the data should belong to.

Suppose we have to differentiate a square from rectangle. how can we do it?
we know the logic is

if length=breadth then it is a square
else
it is a rectangle.

this is the logic we want to cluster using the SVM, we would have to give the have data in following format:

1 1:2 2:2
1 1:4 2:4
1 1:9 2:9
1 1:10 2:10
..........
..........
-1 1:5 2:6
-1 1:3 2:4
-1 1:6 2:9
-1 1:4 2:1
..........
..........

The above example is a TWO-class classification with labels +1 and -1 . +1 represents square and -1 represents rectangle.

Consider the 4 th line in the above format ie 1 1:10 2:10

1 represents this is a square.
For the second column (eg: 1:10) 1: represents the index value and 10 represents the length.
For the third column (eg: 2:10) 2: represents the index value and 10 represents the bredth.

Consider the 8 th line in the above format ie -1 1:4 2:1

-1 represents this is a rectangle.
For the second column (eg: 1:4) 1: represents the index value and 4 represents the length.
For the third column (eg: 2:1) 2: represents the index value and 1 represents the bredth.

This is the input file format of SVM.

[label] [index1]:[value1] [index2]:[value2] ...
[label] [index1]:[value1] [index2]:[value2] ...

label
Sometimes referred to as 'class', the class (or set) of your classification. Usually we put integers here.

index
Ordered indexes. usually continuous integers.

value
The data for training. Usually lots of real (floating point) numbers.

Why value, value2, ...?

The reason is usually the input data to the problem you were trying to solve involves lots of 'features'
or say 'attributes', so the input will be a set (or say vector/array).

For the above example we have 2 features lenght and breadth.

Installing Libsvm

We can download the libsvm from http://www.csie.ntu.edu.tw/~cjlin/libsvm/
libsvm.zip or libsvm.tar.gz

Contents in the .zip and .tar.gz are the same.
For windows users unzip the file. libsvm folder will be created.
UNIX users mostly prefer .tar.gz.

What is Libsvm?
Libsvm is a library for support vector machines.

How to Use Libsvm

We must follow the below procedure :
 1. Data Preparation for SVM
 2. Convert data into SVM format
 3. Conduct simple scaling on the data
 4. Consider the RBF kernel K(x; y) = e
 5. Use cross-validation to find the best parameter C and gamma
 6. Use the best parameter C and gamma to train the whole training set
 7. Test

We discuss this procedure in detail in the following sections

1. Data Preparation for SVM
We need to collect maximum data as possible. data set should contains both positive and negative data.
if it contains only one type of data(ie either positive or negative), it will shows wrong accuracy.
The selection of a negative data set is essential to the reliability of the prediction model.
we need to split the data set into two, one for training and other for testing.
After collecting the data , we need to convert both the training set and testing set into SVM format.

2.  Convert the data into SVM format
The SVM algorithm operates on numeric attributes.
So we need to convert the data into libsvm format which contains only numerical values.

For example , If we have imaginary data records like this:

man voice:low figure:big income:good
woman voice:high figure:slim income:fare

1. Convert the feature values to its numeric representation.
   Let's say, that best salary would be 5 and worst salary 1 (or no salary = 0), the same with other enumarated variables.
2. We have 2 classes, man and women . convert the classes to numeric values: man = 1, woman = -1
3. Save it in libsvm data format:

[class/target] 1:[firstFeatureValue] 2:[secondFeatureValue] etc.
ex.:
a women with great salary, low voice and small figure would be encoded like:
-1 1:5 2:1.5 3:1.8

In general the input file format of SVM is

[label] [index1]:[value1] [index2]:[value2] ...
[label] [index1]:[value1] [index2]:[value2] ...

label
Sometimes referred to as 'class', the class (or set) of your classification. Usually we put integers here.

index
Ordered indexes. usually continuous integers.

value
The data for training. Usually lots of real (floating point) numbers.


Is there a program to check if my data are in the correct format?
yes.
we can use the python script libsvm-3.11/tools /checkdata.py

Before doing that you need to install Python.
put checkdata.py in the Python folder. open a command prompt and type python checkdata.py filename.






3. Conduct simple scaling on the data

The original data maybe too huge or small in range, thus we can
rescale them to the proper range so that training and predicting will be faster.
The main advantage of scaling is to avoid attributes in greater numeric
ranges dominating those in smaller numeric ranges. Another advantage is to avoid
numerical difficulties during the calculation.

We recommend linearly scaling each attribute to the range [1; +1] or [0; 1].
we have to use the same method to scale both training and testing
data.

svm-scale is a tool for scaling input data file.
It is available at libsvm-3.11\windows

The syntax of svm-scale is
svm-scale [options] data_filename.

For options please refer README file in libsvm.






Running the above command generates 2 files. training.scale and range file.
In the above example we scale the file training.txt and scale each attribute/feature to the range [-1 +1].

The output of scaling is training.scale file, which is used for creating the model.
(model will be discussed later).
here we use option -s for saving the scaling parameters to range file.
Scaling factors are stored in the file range and that file is used for scaling the
test data.


we should scale the testing and scaling data in same range.
so for scaling the testing file we can use the range file .





Above example uses the range file for scaling the testing data. It generates the output testing.scale.

note: we can scale training and testing data in a similar way.
> svm-scale -s scaling_parameters train_data > scaled_train_data
> svm-scale -r scaling_parameters test_data > scaled_test_data

But using the same scaling factors for training and testing sets, we obtain much better
accuracy


4. Model Selection

After scaling the data set , we have to choose a kernel function for creating the model.
4 basic kernels are

  1. linear
  2. polynomial
  3. radial basis function
  4. sigmoid

In general, the RBF kernel is a reasonable first choice.
A recent result shows that if RBF is used with model selection, then there is no need to consider the linear kernel. The kernel matrix using sigmoid may not be positive definite and in general it's accuracy is not better than RBF.  Polynomial kernels are ok but if a high degree is used, numerical difficulties tend to happen.

In some cases RBF kernel is not used.
case 1: Number of instances < number of features/attributes

(instance means each entry in the txt file)

Consider an example1 .
we have 2 data sets one for training and other for testing
training set contains 38 instance and testing set contains 34 instance. number of features:7,129.

If you use RBF kernel the accuracy is 71.05
and for linear kernel accuracy is 94.73 (please see below)

In such cases linear kernel have more accuracy than RBF kernel.

There are two parameters for an RBF kernel: C and gamma
linear kernel has a penalty parameter C.
It is not known beforehand which C and gamma are best for a given problem; consequently some kind of model selection(parameter search) must be done. The goal is to identify good (C , gamma) so that the
classifier can accurately predict unknown data (i.e. testing data).

For selecting the best parameter value , we can use grid.py in the libsvm-3.11\tools directory.

grid.py is a parameter selection tool for C-SVM classification using
the RBF (radial basis function) kernel. It uses cross validation (CV) (will discuss later)
technique to estimate the accuracy of each parameter combination in
the specified range and helps you to decide the best parameters for
your problem.
grid.py directly executes libsvm binaries (so no python binding is needed)
for cross validation and then draw contour of CV accuracy using gnuplot.

Before using the grid.py , we should edit grid.py for setting the path of svmtrain_exe and gnuplot_exe

grid.py

if not is_win32:
       svmtrain_exe = "../svm-train"
       gnuplot_exe = "/usr/bin/gnuplot"
else:
       # example for windows
       svmtrain_exe = r"F:\lekshmi\libsvm-3.11\windows\svm-train.exe"
       # svmtrain_exe = r"c:\Program Files\libsvm\windows\svm-train.exe"
       gnuplot_exe = r"F:\lekshmi\gp444win32\gnuplot\binary\gnuplot.exe"

you should install python and gnuplot before running grid.py.
After installing python set the environment variable "PYTHONPATH" as C:\Python27(in my system python is installed in C directory)
put the grid.py in the python folder. open the command promt and change directory to the folder contains grid.py.

Consider the above example1 (Number of instances < number of features/attributes)

for linear kernel







for RBF kernel






now we can discuss the grid.py in detail
The syntax for grid.py is


grid.py [-log2c begin,end,step] [-log2g begin,end,step] [-v fold]
       [-svmtrain pathname] [-gnuplot pathname] [-out pathname] [-png pathname]
       [additional parameters for svm-train] dataset









Monday 9 January 2012

Connecting MySQL in xampp with java

phpMyAdmin in xampp server is used  to manage MySQL database.We can connecting java with mysql xampp using the below code:

Prerequisite
Xampp should be installed.


In the java code 
  String url = "jdbc:mysql://localhost:3306/"; ( MySQL server in xampp is installed in port 3306)
  String dbName = "test";
  String driver = "com.mysql.jdbc.Driver";
  String userName = "root";
  String password = "";
  try {
      Class.forName(driver).newInstance();
      Connection con =DriverManager.getConnection(url+dbName,userName,password);

  }
We need to put mysql-connector-java-5.1.18-bin.jar in the classpath.





Sunday 11 December 2011

table.css

table.example {
    border:1px solid black;
    border-collapse:collapse;
}
table.example th, table.example td {
    border:1px solid #aaaaaa;
    padding: 17px 15px 2px 15px;
}
table.example thead th {
    background-color:#ccccff;
}
table.example tfoot td {
    background-color:#ffccff;
}

table.example tr.tbody_header {
    font-weight:bold;
    text-align:center;
    background-color:#dddddd;
}

table.example a.pagelink {
    padding-left:5px;
    padding-right:5px;
    border:1px solid #666666;
    margin:0px 5px 0px 5px;
}
table.example a.currentpage {
    background-color:yellow;
}
/* Striping */
tr.alternate {
    background-color:#ffffcc;
}

/* Sorting */
th.table-sortable {
    cursor:pointer;
    background-image:url("../images/sortable.gif");
    background-position:center left;
    background-repeat:no-repeat;
    padding-left:12px;
}
th.table-sorted-asc {
    background-image:url("../images/sorted_up.gif");
    background-position:center left;
    background-repeat:no-repeat;
}
th.table-sorted-desc {
    background-image:url("../images/sorted_down.gif");
    background-position:center left;
    background-repeat:no-repeat;
}
th.table-filtered {
    background-image:url("filter.gif");
    background-position:center left;
    background-repeat:no-repeat;
}
select.table-autofilter {
    font-size:smaller;
}

/* Examples which stray from the default */
table.altstripe tr.alternate2 {
    background-color:#ccffff;
}

/* Sort Icon Styles */
table.sort01 th.table-sortable { background-image:url("../images/01_unsorted.gif"); }
table.sort01 th.table-sorted-asc { background-image:url("../images/01_ascending.gif"); }
table.sort01 th.table-sorted-desc { background-image:url("../images/01_descending.gif"); }

table.sort02 th.table-sortable { background-image:none; padding-left:16px; }
table.sort02 th.table-sorted-asc { background-image:url("../images/icons/02_ascending.gif"); }
table.sort02 th.table-sorted-desc { background-image:url("../images/icons/02_descending.gif"); }

table.sort03 th.table-sortable { background-image:none; }
table.sort03 th.table-sorted-asc { background-image:url("../images/icons/03_ascending.gif"); }
table.sort03 th.table-sorted-desc { background-image:url("../images/icons/03_descending.gif"); }

table.sort04 th.table-sortable { background-image:none; }
table.sort04 th.table-sorted-asc { background-image:url("../images/icons/04_ascending.gif"); }
table.sort04 th.table-sorted-desc { background-image:url("../images/icons/04_descending.gif"); }

table.sort05 th.table-sortable { background-image:url("05_unsorted.gif"); padding-left:16px;}
table.sort05 th.table-sorted-asc { background-image:url("05_ascending.gif"); }
table.sort05 th.table-sorted-desc { background-image:url("05_descending.gif"); }

table.sort06 th.table-sortable { background-image:none; padding-left:16px;}
table.sort06 th.table-sorted-asc { background-image:url("icons/06_ascending.gif"); }
table.sort06 th.table-sorted-desc { background-image:url("icons/06_descending.gif"); }

table.sort07 th.table-sortable { background-image:none; }
table.sort07 th.table-sorted-asc { background-image:url("07_ascending.gif"); }
table.sort07 th.table-sorted-desc { background-image:url("07_descending.gif"); }

table.sort08 th.table-sortable { background-image:none; }
table.sort08 th.table-sorted-asc { background-image:url("icons/08_ascending.gif"); }
table.sort08 th.table-sorted-desc { background-image:url("icons/08_descending.gif"); }

table.sort09 th.table-sortable { background-image:none; padding-left:30px;}
table.sort09 th.table-sorted-asc { background-image:url("icons/09_ascending.gif"); }
table.sort09 th.table-sorted-desc { background-image:url("icons/09_descending.gif"); }

table.sort10 th.table-sortable { background-image:url("icons/10_unsorted.gif"); }
table.sort10 th.table-sorted-asc { background-image:url("icons/10_ascending.gif"); }
table.sort10 th.table-sorted-desc { background-image:url("icons/10_descending.gif"); }

table.sort11 th.table-sortable { background-image:url("icons/11_unsorted.gif");padding-left:24px; }
table.sort11 th.table-sorted-asc { background-image:url("icons/11_ascending.gif"); }
table.sort11 th.table-sorted-desc { background-image:url("icons/11_descending.gif"); }

table.sort12 th.table-sortable { background-image:none; }
table.sort12 th.table-sorted-asc { background-image:url("icons/12_ascending.gif"); }
table.sort12 th.table-sorted-desc { background-image:url("icons/12_descending.gif"); }

table.sort13 th.table-sortable { background-image:none; }
table.sort13 th.table-sorted-asc { background-image:url("icons/13_ascending.gif"); }
table.sort13 th.table-sorted-desc { background-image:url("icons/13_descending.gif"); }

table.sort14 th.table-sortable { background-image:none; }
table.sort14 th.table-sorted-asc { background-image:url("icons/14_ascending.gif"); }
table.sort14 th.table-sorted-desc { background-image:url("icons/14_descending.gif"); }

table.sort15 th.table-sortable { background-image:none; }
table.sort15 th.table-sorted-asc { background-image:url("icons/15_ascending.gif"); }
table.sort15 th.table-sorted-desc { background-image:url("icons/15_descending.gif"); }

table.sort16 th.table-sortable { background-image:none; }
table.sort16 th.table-sorted-asc { background-image:url("icons/16_ascending.gif"); }
table.sort16 th.table-sorted-desc { background-image:url("icons/16_descending.gif"); }

table.sort17 th.table-sortable { background-image:none; }
table.sort17 th.table-sorted-asc { background-image:url("icons/17_ascending.gif"); }
table.sort17 th.table-sorted-desc { background-image:url("icons/17_descending.gif"); }

table.sort18 th.table-sortable { background-image:url("icons/18_unsorted.gif"); }
table.sort18 th.table-sorted-asc { background-image:url("icons/18_ascending.gif"); }
table.sort18 th.table-sorted-desc { background-image:url("icons/18_descending.gif"); }

table.sort19 th.table-sortable { background-image:url("icons/19_unsorted.gif");padding-left:24px; }
table.sort19 th.table-sorted-asc { background-image:url("icons/19_ascending.gif"); }
table.sort19 th.table-sorted-desc { background-image:url("icons/19_descending.gif"); }

/* Icons box */
.iconset {
    margin:5px;
    border:1px solid #cccccc;
    border-color:#cccccc #666666 #666666 #cccccc;
    text-align:center;
    cursor:pointer;
    width:100px;
}
.iconset img {
    margin:3px;
}

/* Documentation */
tr.doc_section {
    font-weight:bold;
    text-align:center;
    background-color:#dddddd;
}