How to draw a curve between two points in SVG ?

To draw curve in SVG, we need to provide the following information to the SVG tag's 'd' attribute.

d = "M x1 y1 Q a b x2 y2";

Here M and Q are commands,
where x1, y1, x2, y2, are source and destination co-ordinates.
where a and b are a co-ordinate, which is perpendicular to mid point of the (x1, y1) and (x2, y2)

So given that two points source (x1, y1) and Destination (x2, y2), we need to find (a, b)

so draw a straight line between (x1, y1) and (x2, y2), on that draw a perpendicular line from it's mid point. choose any x and y on that perpendicular line which is (a, b).

Now you see here first we need to find the slope of the straight line of (x1, y1) and (x2, y2) from that we need to find the slope of the perpendicular line

m = tanθ = - (y2 - y1)/(x2-x1)
so θ = atan( - (y2 - y1) / (x2 - x1) )

we need to find distance between those two points, it is
sqr(d) = sqr(x2-x1) + sqr(y2 - y1)

r = sqrt ( d )

mid point of those two co-ordinates are this
m1 = ( x1 + x2 ) / 2
m2 = ( y1 + y2 ) / 2

so now,

a = m1 + r * sin θ
b = m2 + r * cos θ

Finally we calculated a and b, now we can use it in the svg 'd' attributes

See the below picture, in the first picture the curves are drawn between two modes whose slope is zero, so
a = m1
b = m2 + r

so these a and b varies when you drag a node, so you need to calculate it for every x and y

javascript simple lightweight draggable window pattern

I have designed a simple draggable window, which can be draggable, minimize, maximize,

The design has a task bar down, so that the draggable window can be minimized, maximized, closed ..

simple javascript validation pattern

I have designed a validation frame work for my web, i am posting the design example.

Concept: I will have an attribute called 'fieldType' on each input element which needs validation, also i will set the validate function on the onblur attribute of that input element.

Intent: To have uniform validation across all the pages input fields, each validation method is classified by it's field type and each one will have a RegEx patterns inside to test the value is proper or not.

simple XQuery

As we know that XQuery is a W3c standard, Saxonica is the best tool so far i explored for various requirements. But I don't know the particular reason why most of the xml developers not choosing it. If you want to derive some information from lot of xml files, better do it in easy X-query.

You can write functions like in a scripting language. The main thing is that you need to understand FLOWER expression to iterate throw a XML tree,

FLWOR means for, let, where, order by, and return

Look at this this simple example

flwor.xq













In this xquery example, we have two xml file, one is emps.xml and depts.xml, which is shown below. In emps.xml, each 'emp' element has deptno reference which is present in depts.xml, So this X-query selects all the employee from emps.xml for this the criteria is that there should be more than one employee present for a same department. Please check it with the result attached below.

depts.xml








emps.xml























result.xml










Lets see an example with functions, it is easy to write a function like we write it in XSLT function, but in XSLT function is like again a xml data , but in xquery it is like a scripting language function.

simple-xq-func.xq




















result.xml









For more information read the W3C pages for Xquery use cases page
http://www.w3.org/TR/xquery-use-cases

SVG draggable objects design

I have designed draggable component in plain javascript which can manipulate SVG Object or it's group, You can drag and drop any svg component structure by simple setting it's draggable attribute to true. My library includes my own layout algorithm, and my own pattern

see the below sample picture , svg-draggable-network-view, (please try this sample in Firefox / chrome )











This UI code and draggable component can also be used inside Acrobat PDF slide view

If you want this sample code, please send me an email to my email id subburajanm@gmail.com























I have posted the PDF object oriented javascript code snippet below for your reference. Go through it if you have a requirement to do it like this ..

%PDF-1.4
1 0 obj
<<     /Type /Catalog     /Pages 2 0 R     /Names 3 0 R  >>
endobj
2 0 obj
<< /Type /Pages    /Kids [7 0 R]    /Count 1 >>
endobj
3 0 obj
<<      /AlternatePresentations 6 0 R      /JavaScript 4 0 R >>
endobj
4 0 obj
<<      /Names [ (OnLoadJavaScript)<< /S /JavaScript /JS 5 0 R >> ]
>>
endobj
5 0 obj
<<  /Length 148 >>
stream
if (alternatePresentations['circuit-app'] != null ) {
app.fs.isFullScreen = true;
alternatePresentations['circuit-app'].start(true);
}
endstream
endobj
6 0 obj
<<      /Names [ (circuit-app)7 0 R ]  >>
endobj
7 0 obj
<<      /Type /SlideShow      /Parent 2 0 R      /MediaBox [0 0 612 792]        /Subtype /Embedded      /Resources 8 0 R      /StartResource (circuit-svg) >>
endobj
8 0 obj
<<      /Names [ (circuit-svg)9 0 R ]  >>
endobj
9 0 obj
<<      /Type /FileSpec      /F (circuit-svg)     /EF 10 0 R  >>
endobj
10 0 obj
<<    /F 11 0 R  >>
endobj
11 0 obj
<<     /Length 56687     /Type /EmbeddedFile     /Subtype /image#2Fsvg+xml >>
stream

--- svg --  xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="doOnLoad(evt)">

--- style type="text/css" ---

---- style ----

----  Java script ----

var ddc;

var svgDoc;

function doOnLoad(evt) {
svgDoc = evt.target.ownerDocument;
var svgRootElem = svgDoc.documentElement;

ddc = new SVGDragAndDrop(svgDoc, svgRootElem);
ddc.init();
}

function SVGDragAndDrop(_svgDocument, _svgRootElement) {
this.svgDocument = _svgDocument;
this.svgRootElement = _svgRootElement;
this.defNS = null;
return this;
}

SVGDragAndDrop.prototype.init = function() {
this.svgRootElement.addEventListener("mousedown",
function(evt) { ddc.grap(evt); }, false);
this.svgRootElement.addEventListener("mousemove",
function(evt) { ddc.drag(evt); }, false);
this.svgRootElement.addEventListener("mouseup",
function(evt) { ddc.drop(evt); }, false);

this.grapPoint = this.svgRootElement.createSVGPoint();
this.trueCoords = this.svgRootElement.createSVGPoint();
this.dragger = new MySVGNodeDragger(this.svgDocument, this.svgRootElement);
this.maxX = 1000;
this.maxY = 500;
}


--- script ----

svg data

endstream
endobj
xref
0 11
0000000000 65535 f
0000000010 00000 n
0000000093 00000 n
0000000162 00000 n
0000000248 00000 n
0000000340 00000 n
0000000544 00000 n
0000000607 00000 n
0000000792 00000 n
0000000855 00000 n
0000000943 00000 n
0000000985 00000 n
trailer
<< /Size 12    /Root 1 0 R >>
startxref
58192
%%EOF

A simple SVG Web Combo box

Click here to open the samples, this prototype works fine in firefox/chrome now, so please try in firefox

graphical combo array as like you see in the below picture
graphical node link selection Combo as like you see in the below picture

Source Code
svgcombo.js, svgcombo_ext.js, vscrollbar.js, hscrollbar.js, svgtextbox.js

Graphical UI component: (web tool)

This is a simple combo box kind of design. We can scroll down thousands of entries and also we can do type and search. Library includes my H/Vscroll algorithm and new paging algorithm

Concept:
Concept is very simple, if the combo size is 5 means, then there are 5 text-fields will be drawn from top to bottom one another along with a vertical scrollbar right side. data will be kept outside of this design in an separate array . So on each click or drag points of the scroll bar, 5 entries from the array will be taken and will be populated in those textfields sequentially.
Also this combo component can come with or without header. Combo row can be text data or an UI data.

Here the vertical scroll bar and horizontal bar objects are also separate component, integrated

Combo box component has the vertical scroll bar support which can scroll for any size, for example for a size of 6 it can scroll max 600 entries. I tested it with maximum size of 2000 which can be scrollable. This combo component has some special that its width will be automatically change depends upon its text width when user scrolls horizontally. Also it has auto completion and type and search functionality.

Here look at the below 2 picture, one picture shows combo with graphic row component and another picture shows combo with text data. This text combo box has some special functionality, i.e, when you scroll down if the size of the text is large or very small compare to the previous row, then it will automatically shrink and expand as it is shown in the below picture.

































Like this i developed some UI component using plain object oriented javscript code.

I developed UI components TextField, vertical/horizontal scrollbar, and combo box in Svg. These component also has draggable functionality

If you want the source code of the javascript, please send me an email subburajanm@gmail.com

What to do with java annotation ??

Java -1.6 annotation features supports annotation which is mainly used to develop a simple Aspect Oriented programs. Apart from the primitive informations we can put more information on a class and on it's members using annotation.

Problem with Object Oriented Programming.
If you expose your interface in an object oriented model, then those clients who are using it need to understand your object model, they have to design their object , they may need to inherit your functionality. they may not have a loosely coupled design.

For example,
Lets take an example of any object oriented api like SAX parser, here you need to inherit some of the abstract class like ContentHandler to serialize/deserialize your objects to XML string.
So first, you start with some abstract definitions which will be tightly coupled to the java interface. What is the intention of you to do it ?, You want to generalize some thing on top of your design. This is good with respect to an Object Oriented Programming.

Thats why JAXB is introduced, You does not have to extend any interface on top of your design. you need only a POJO object with some of its member variables marked with annotation.

Lets take an example of Employee Object

@XmlAccessorType(XmlAccessType.FIELD)
@XmlType(name="employee" propOrder = {"name", "salary"})
public class Employee {

 @XmlElement(name="name", required=true)
 String name;

 @XmlElement(name="salary", required=true)
 double salary;
}

Now you can think of doing it without annotation by ContentHandler interface, it is very difficult.

Note: Recently all the java apis comes with annotation support, example like hibernate, JPA, EJB-3.0, Google GUICE, all Spring. Even Groovy script has annotation like structure.

Web Graphics, SVG, CTM

Scalable Vector Graphics

I have been working with SVG last 2 years, i found it very useful to display the network topological graph view in Web UI, also i have designed rich Web UI tools out of that. Also i developed many draggable components, node-link structure.

Some background on SVG:

As it is a W3 spec similar to HTML spec, it is supported by many programming technologies, mainly supported by all browsers other than IE supports, In IE SVG support is not there, but we can install adobe SVG which provides the support.

Adobe Support.

Acrobat PDF supports SVG if you had installed it's adobe svg viewer, Also you can manipulate the SVG Dom by javascript, inside Acrobat PDF as slide view. You can also manipulate it using the acrobat javascript support.

Java supports.

In java, batik library provides SVG supports and it's w3 API, using that you can manipulate the SVG Dom. You can also export the SVG Graphics2D java object into java awt image.

SVG CTM (current Transformation Matrix ):
CTM is an interesting topic in any graphics tool, Each pixel inside has a transformation matrix, when it is translated to a new X and Y co-ordinate, or rotated by an angle, or scaled by X and Y ratio, then this CTM is needed to calculate the new X and Y co-ordinate.

Lets take a point A present on (2, 2) is translated to a distance of 2 pixel on x - axis and 2 pixel on y -axis, then the new X and Y co-ordinate of A will be (4, 4).

Since it is a simple X and Y translation, the Transformation matrix of A is like this.

1 0 2
0 1 2
0 0 1

so the formula is this




For more information
http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#EstablishingANewUserSpace

Object Oriented JavaScript

How to write Object Oriented javascript ?
I explain simple steps to convert your plain javascript code to an object oriented javascript code.

1.) I will guide you to start with a simple function to the object oriented function at last.
2.) How to do multiple inheritance like in C++, Multi level inheritance like in Java
3.) Friend function like C++
4.) what do you mean by Redefinition in Javascript?
5.) How to design package ?
6.) how to use __proto__, instanceof ?
7.) Singleton design pattern
8.) Enum function
9.) what is prototype.constructor and when to use it ?

step-1: Look at this simple Function.

function add(a, b) {
return a + b;
}

function sub(a, b) {
return a – b;
}

var sum = add(2, 3);
var diff = sub(2, 3);

step-2: Another way by anonymous function

var add = function(a, b) {
return a + b;
}

var sub = function(a, b) {
return a – b;
}

var sum = add(2, 3);
var diff = sub(2, 3);

step-3: By anonymous function, executing it immediately

var sum = function(a, b) {
return a + b;
} (2, 3);

var diff = function(a, b) {
return a – b;
} (2, 3);

step-4: By Object level functions

var math = new Object();

math.add = function(a, b) {
return a + b;
}

math.sub = function(a, b) {
return a – b;
}

var sum = math.add(2, 3);
var diff = math.sub(2, 3);

//or

var sum = math[“add”](2, 3);
var diff = math[“sub”](2, 3);

step-5: By Function Map

var math = {
“add” : function(a, b) {
return a + b;
},

“sub”: function(a, b) {
return a – b;
}
};

var sum = math[“add”](2, 3);
var diff = math[“sub”](2, 3);
//or
var sum = math.add(2, 3);
var diff = math.sub(2, 3);

step-6: Now look at how to make it much more object oriented

function Math() {
this.add = function(a, b) {
return a + b;
};

this.sub = function(a, b) {
return a – b;
};
return this;
}

var math = new Math();

var sum = math.add(2, 3);
var diff = math.sub(2, 3);
//or
var sum = math[“add”](2, 3);
var diff = math[“sub”](2, 3);

//drawback: You cannot redefine the member functions commonly

step-7: Now, i am introducing 'prototype', prototype is like a map which holds the the object member definition of any Function

function Math() {
return this;
}

Math.prototype.add = function(a, b) {
return a + b;
}

Math.prototype.sub = function(a, b) {
return a – b;
}

var math = new Math();
var sum = math.add(2, 3);
var diff = math.sub(2, 3);

//or

var sum = math[“add”](2, 3);
var diff = math[“sub”](2, 3);

Note: ‘prototype’ is present inbuilt in all normal function

step-8: Another way of implementing it as like a map

function Math() {
return this;
}

Math.prototype = {
add: function(a, b) {
return a + b;
},

sub: function(a, b) {
return a – b;
}
};

var math = new Math();
var sum = math.add(2, 3);
var diff = math.sub(2, 3);

//or

var sum = math[“add”](2, 3);
var diff = math[“sub”](2, 3);

step-9: By anonymous prototype functions

var Math = function() {
return this;
}

Math.prototype = {} //Note: ‘prototype’ is not present in anonymous function

Math.prototype.add = function(a, b) {
return a + b;
}

Math.prototype.sub = function(a, b) {
return a – b;
}

var math = new Math();
var sum = math.add(2, 3);
var diff = math.sub(2, 3);

//or

var sum = math[“add”](2, 3);
var diff = math[“sub”](2, 3);

---

Inheritance : Look at this example

function Address() {
return this;
}

Address.prototype.setStreet = function(_street) { this.street = _street; }
Address.prototype.getStreet = function() { return this.street; }
Address.prototype.setCity = function(_city) { this.city = _city; }
Address.prototype.getCity = function() { return this.city;}

function Person() {
return this;
}
Person.prototype = new Address();

function Employee() {
return this;
}
Employee.prototype = new Person();
Employee.prototype = new Account(); //this throws error

Drawback: cannot do multiple inheritance like C++

Lets see how to do it, this is what most of the javascript library is doing,

---

‘extend’

function extend(childclass, parentclass) {
var _clazz = function() { };
_clazz.prototype = parentclass.prototype;
childclass.prototype = new _clazz();
childclass.prototype.constructor = childclass;
childclass.super = parentclass.prototype;
}

function Person() {
return this;
}

function Address() {
return this;
}

function Employee() {
return this;
}

extend(Employee, Person);
extend(Employee, Address);

---

Now you need to understand 'instanceof' and '__proto__'

Instanceof : It works like java instanceof

var emp = new Employee();
emp instanceof Employee // returns true

__proto__: It is used to call super class method

function Shape() {
return this;
}

Shape.prototype.draw = function() { …}

function Square() {
return this;
}

Square.prototype = new Shape();
Square.prototype.draw = function() { this.__proto__.draw(); … }

function Cube() {
return this;
}

Cube.prototype = new Square();
Cube.prototype.draw = function() {
this.__proto__.draw();
//.....
}

var c = new Cube();
c.__proto__.draw(); //calls the Square’s draw function
c.__proto__.__proto__.draw(); //calls the Shape’s draw function

---

What is redefinition ?
Redefinition: Like java invocation handler

function Circle() {
return this;
}

Circle.prototype.draw = function(g) {
g.paint(“circle”, this);
}

var _circle_draw_func = Circle.prototype.draw;
Circle.prototype.draw = function(g) {
//do before ….
_circle_draw_func.call(this, g); //This is like friend function in C++
//do after ….
}

If you don’t do it like this, then you will be replacing the original function with your new function definition

---

How to construct package ?

if(typeof(com) != “undefined”) {
throw “package ‘com’ is already defined”
}
var com = {};

if(typeof(com.tejas) != “undefined”) {
throw “package ‘com.tejas’ is already defined”
}
com.tejas = {};

if(typeof(com.tejas.lang) != “undefined”) {
throw “package ‘com.tejas.lang’ is already defined”
}
com.tejas.lang = {};

note: you should throw error, otherwise all your definitions on first js file will be replaced by the second js file if both using same packages

Creating function definition on package

com.tejas.web.js.Circuit = new function() {
this.sncs = [];
return this;
}

com.tejas.web.js.Circuit.prototype = { }

com.tejas.web.js.Circuit.prototype.addSncs = function(snc) {
this.sncs.push(snc);
}

Note: Anonymous functions will not have ‘prototype’ map by default.

---

how to implement Design patterns ?

Singleton

var shapeFactory = function() {
this.createCircle = function() {
return new Circle();
};

this.createSquare = function() {
return new Square();
};
} ();

//but if you need it to be a child of some other function

var shapeFactory;
function ShapeFactory() {
if(!shapeFactory) {
shapeFactory = this;
}
return shapeFactory;
}

ShapeFactory.prototype.createCircle = function() { return new Circle(); }
ShapeFactory.prototype.createSquare = function() { return new Square(); }

---

How to derive Enum ?

Enum: You have to define it like a singleton object …

com.tejas.lang.TimeUnit = function() {
if(!com.tejas.lang.TIMEUNIT) {
com.tejas.lang.TIMEUNIT = this;
}
return com.tejas.lang.TIMEUNIT;
}

com.tejas.lang.TimeUnit.prototype = {}

com.tejas.lang.TimeUnit.prototype.WEEK = new _TimeUnit(7 * 24 * 60 * 60 * 1000);
com.tejas.lang.TimeUnit.prototype.DAY = new _TimeUnit(24 * 60 * 60 * 1000);
com.tejas.lang.TimeUnit.prototype.HOUR = new _TimeUnit(60 * 60 * 1000);
com.tejas.lang.TimeUnit.prototype.MIN = new _TimeUnit(60 * 1000);
com.tejas.lang.TimeUnit.prototype.SECONDS = new _TimeUnit(1000);

function _TimeUnit(_inSeconds) {
this.seconds = _inSeconds;
return this;
}

_TimeUnit.prototype.convert = function(milli_seconds) { ….. }

new com.tejas.lang.TimeUnit(); //Using: var x = com.tejas.lang.TIMEUNIT.HOUR.seconds;

---

Constructor

It is a built-in property of the ‘prototype’

Ex: Employee.prototype.constructor

It actually has the reference of the constructing function of the Function

var emp = new Employee.prototype.constructor(); is same like
var emp = new Employee();

Usage: It is used like java reflection kind of feature

---

Thanks for reading this ....

About me and my profile

I have been doing some interesting development works and as a NMS Lead Engineer in NMS/EMS in optical networking domain during last few years, around 3 years in IBM, current 2.2 years in Tejas networks.
I mainly do coding, designing work in many java technologies, TMF, corba, snmp, TL1, latest web technologies, web-2.0, javascript, messaging queues like Rational MQ series, oops, aops, ....

• Java: java-1.6, swing, applet, jaxb, jaxp, xstream, Itext, Jdbc, bdb, jasper, javamail, jgraph, jchart, and JavaCC, HttpConnect, quartz, JavaFX, Groovy,batik.


• Web Development: REST, Jsp, Servlet, Ajax, javascript, Json, dhtmlx, spring web flow, adobe flex-3, LiveConnect, Svg, dsvg, google guice, Google App Engine, nodejs, Cloud computing.


• XML: XSL, FO, XSLT, XQuery, Xlink, Saxonica, XForm.


• J2EE: JMS, EJB3, JPA, RMI, JMS, Active MQ, struts, spring, JTS, JTA.


• Database: Oracle 9i, DB2 SQL, mysql, hibernate.


• Applicaton server: Weblogic, Jboss, Websphere


• Messaging: Active MQ, Websphere MQ


• Web service: Tomcat, wsdl, SOAP, Axis-2, Artix, JAX-WS, JAX-RPC, Adobe Flex-3, action script, groovy script.


• Scripting: Object oriented javascript, dhtmlx, shell script, batch script, acro javascript, PDF.


• CORBA: Jacorb, Visibroker, Orbix, Open Fusion notification service, omg Idl.


• SNMP: V1, V2c, V3. Ireasoning, sun jdmk, mib browser.


• Telecom: NMS/EMS, CORBA, SNMP, TL1, Optical networking, SONET, SDH, MPLS, DWDM, TMF-814, FCAPS, ...
  


• Operating Systems: Windows 2000, XP, Unix AIX, Sun solaris, Linux.


• Others: C, C++, maven, ANT, make, CVS, Sablime, design patterns, OOAD, UML, rational rose, eclipse, Star UML, Eclipse debugging