Adding HTML wrapper and fixing the SVG not totally viewable problem, using SVG view box

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1157335 13f79535-47bb-0310-9956-ffa450edef68

18 files changed, 504 insertions, 11 deletions

diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/Calculator.xml b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/Calculator.xml
new file mode 100755
index 0000000000..345b9065a9
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/Calculator.xml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<composite xmlns="http://www.osoa.org/xmlns/sca/1.0"
+           targetNamespace="http://sample"
+           xmlns:sample="http://sample"
+           name="Calculator">
+
+    <component name="CalculatorServiceComponent">
+		<implementation.java class="calculator.CalculatorServiceImpl"/>
+        <reference name="addService" target="AddServiceComponent" />
+        <reference name="subtractService" target="SubtractServiceComponent" />
+        <reference name="multiplyService" target="MultiplyServiceComponent" />
+        <reference name="divideService" target="DivideServiceComponent" />
+    </component>
+
+    <component name="AddServiceComponent">
+        <implementation.java class="calculator.AddServiceImpl"/>
+    </component>
+
+    <component name="SubtractServiceComponent">
+        <implementation.java class="calculator.SubtractServiceImpl"/>
+    </component>
+
+    <component name="MultiplyServiceComponent">
+        <implementation.java class="calculator.MultiplyServiceImpl"/>
+    </component>
+
+    <component name="DivideServiceComponent">
+        <implementation.java class="calculator.DivideServiceImpl"/>
+    </component>
+
+</composite>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/MyValueComposite2.xml b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/MyValueComposite2.xml
new file mode 100755
index 0000000000..722bdeb0a5
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/MyValueComposite2.xml
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="ASCII"?>
+
+<!-- MyValueComposite Wires examples -->
+
+<composite     xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200903"
+
+               targetNamespace="http://foo.com"
+
+               name="MyValueComposite2" >
+
+ 	<include name="store"/>
+ 	<include name="Calculator"/>
+ 	<include name="supplychain"/>
+
+   <service name="MyValueService" promote="MyValueServiceComponent">
+
+         <interface.java interface="services.myvalue.MyValueService"/>
+
+         <binding.ws port="http://www.myvalue.org/MyValueService#
+
+               wsdl.endpoint(MyValueService/MyValueServiceSOAP)"/>
+
+   </service>
+
+ 
+
+   <component name="MyValueServiceComponent">
+
+         <implementation.java
+
+               class="services.myvalue.MyValueServiceImpl"/>
+
+         <property name="currency">EURO</property>
+
+         <service name="myValueService"/>
+
+         <reference name="customerService"/>
+
+         <reference name="stockQuoteService"/>
+
+   </component>
+
+ 
+
+   <wire source="MyValueServiceComponent/stockQuoteService"
+
+         target="StockQuoteMediatorComponent"/>
+
+ 
+
+   <component name="StockQuoteMediatorComponent">
+
+         <implementation.java class="services.myvalue.SQMediatorImpl"/>
+
+         <property name="currency">EURO</property>
+
+         <reference name="stockQuoteService"/>
+
+   </component>
+
+ 
+
+   <reference name="CustomerService"
+
+         promote="MyValueServiceComponent/customerService">
+
+         <interface.java interface="services.customer.CustomerService"/>
+
+         <binding.sca/>
+
+   </reference>
+
+ 
+
+   <reference name="StockQuoteService" 
+
+         promote="StockQuoteMediatorComponent">
+
+         <interface.java
+
+               interface="services.stockquote.StockQuoteService"/>
+
+         <binding.ws port="http://www.stockquote.org/StockQuoteService#
+
+               wsdl.endpoint(StockQuoteService/StockQuoteServiceSOAP)"/>
+
+   </reference>
+
+ 
+
+</composite>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/composite_idle.xml b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/composite_idle.xml
new file mode 100755
index 0000000000..99517f639f
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/composite_idle.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<composite xmlns="http://www.osoa.org/xmlns/sca/1.0"
+           targetNamespace="http://sample"
+           xmlns:sample="http://sample"
+           name="IdleTest">
+
+   <component name="AddServiceComponent">
+        <implementation.java class="calculator.AddServiceImpl"/>
+    </component>
+
+    
+
+</composite>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/store.xml b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/store.xml
new file mode 100755
index 0000000000..fc32186344
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/store.xml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<composite	xmlns="http://www.osoa.org/xmlns/sca/1.0"
+		xmlns:t="http://tuscany.apache.org/xmlns/sca/1.0"
+		targetNamespace="http://store"
+		name="store">
+		
+    <component name="Store">
+        <t:implementation.widget location="uiservices/store.html"/>
+        <service name="Widget">
+        	<t:binding.http uri="/store"/>
+        </service>
+		<reference name="catalog" target="Catalog">
+		 	<t:binding.jsonrpc/>
+		 </reference>
+		 <reference name="shoppingCart" target="ShoppingCart/Cart">
+		 	<t:binding.atom/>
+		 </reference>
+		 <reference name="shoppingTotal" target="ShoppingCart/Total">
+		 	<t:binding.jsonrpc/>
+		 </reference>
+    </component>
+    
+	<component name="Catalog">
+		<implementation.java class="services.FruitsCatalogImpl"/> 
+		<property name="currencyCode">USD</property>
+		<service name="Catalog">
+			<t:binding.jsonrpc/>
+   		</service>
+		<reference name="currencyConverter" target="CurrencyConverter"/>	
+	</component> 
+ 	
+	<component name="ShoppingCart">
+		<implementation.java class="services.ShoppingCartImpl"/>
+		<service name="Cart">
+			<t:binding.atom uri="/ShoppingCart/Cart"/>
+		</service>    	
+		<service name="Total">
+			<t:binding.jsonrpc/>
+		</service>    	
+	</component>
+    
+	<component name="CurrencyConverter">
+		<implementation.java class="services.CurrencyConverterImpl"/>
+	</component>     
+
+</composite>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/supplychain.xml b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/supplychain.xml
new file mode 100755
index 0000000000..1964db7fbb
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/input/supplychain.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<composite xmlns="http://www.osoa.org/xmlns/sca/1.0"
+	targetNamespace="http://supplychain"
+	xmlns:sp="http://supplychain"
+	name="supplychain">
+
+    <component name="CustomerComponent">
+        <implementation.java class="supplychain.CustomerComponentImpl" />
+        <reference name="retailer" target="RetailerComponent"/>
+    </component>
+
+    <component name="RetailerComponent">
+        <implementation.java class="supplychain.RetailerComponentImpl" />
+        <reference name="warehouse" target="WarehouseComponent"/>
+    </component>
+
+    <component name="WarehouseComponent">
+        <implementation.java class="supplychain.WarehouseComponentImpl" />
+        <reference name="shipper" target="ShipperComponent"/>
+    </component>
+
+    <component name="ShipperComponent">
+        <implementation.java class="supplychain.ShipperComponentImpl" />
+        <reference name="customer" />
+    </component>
+    
+    <wire source="ShipperComponent/customer" target="CustomerComponent" />
+
+</composite>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/Calculator_diagram.html b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/Calculator_diagram.html
new file mode 100755
index 0000000000..9788bbce0a
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/Calculator_diagram.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+<h1 align='center'>Apache Tuscany - Composite Diagram Generator</h1>
+<h2 align='center'>Calculator</h2>
+</br>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/rgbcolor.js"></script>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/canvg-1.0.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+//load '../path/to/your.svg' in the canvas with id = 'canvas'
+canvg('canvas', 'Calculator_diagram.svg')
+//load a svg snippet in the canvas with id = 'drawingArea'
+canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
+canvg('canvas', 'Calculator_diagram.svg', {})
+}
+</script>
+</head>
+<body>
+<canvas id="canvas" width="1400px" height="1340px">
+</canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/Calculator_diagram.svg b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/Calculator_diagram.svg
index c99236805e..7c7622b974 100755
--- a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/Calculator_diagram.svg
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/Calculator_diagram.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="1400" rx="20" ry="20" height="1340" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1000" rx="20" ry="20" height="1140" stroke="#919191"/><text x="700" font-size="15" y="120" dominant-baseline="mathematical">Calculator</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">CalculatorServiceComponent</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">CalculatorService</text><polygon fill="#BF3EFF" points="586,210 608,210 619,221 608,232 586,232 597,221 " stroke="#68228B"/><text x="586" font-size="15" y="209" dominant-baseline="mathematical">addService</text><polygon fill="#BF3EFF" points="586,242 608,242 619,253 608,264 586,264 597,253 " stroke="#68228B"/><text x="586" font-size="15" y="241" dominant-baseline="mathematical">subtractService</text><polygon fill="#BF3EFF" points="586,274 608,274 619,285 608,296 586,296 597,285 " stroke="#68228B"/><text x="586" font-size="15" y="273" dominant-baseline="mathematical">multiplyService</text><polygon fill="#BF3EFF" points="586,306 608,306 619,317 608,328 586,328 597,317 " stroke="#68228B"/><text x="586" font-size="15" y="305" dominant-baseline="mathematical">divideService</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">AddServiceComponent</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="209" dominant-baseline="mathematical">AddService</text><rect x="800" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="610" dominant-baseline="mathematical">SubtractServiceComponent</text><polygon fill="#00CD66" points="780,470 810,470 825,485 810,500 780,500 795,485 " stroke="#008B45"/><text x="780" font-size="15" y="469" dominant-baseline="mathematical">SubtractService</text><rect x="800" y="720" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="870" dominant-baseline="mathematical">MultiplyServiceComponent</text><polygon fill="#00CD66" points="780,730 810,730 825,745 810,760 780,760 795,745 " stroke="#008B45"/><text x="780" font-size="15" y="729" dominant-baseline="mathematical">MultiplyService</text><rect x="800" y="980" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="1130" dominant-baseline="mathematical">DivideServiceComponent</text><polygon fill="#00CD66" points="780,990 810,990 825,1005 810,1020 780,1020 795,1005 " stroke="#008B45"/><text x="780" font-size="15" y="989" dominant-baseline="mathematical">DivideService</text><rect x="400" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="610" dominant-baseline="mathematical">StockQuoteMediatorComponent</text><rect fill="#EEEE00" x="420" width="20" height="20" y="450" stroke="#EEC900"/><text x="420" font-size="15" y="449" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="380,470 410,470 425,485 410,500 380,500 395,485 " stroke="#008B45"/><text x="380" font-size="15" y="469" dominant-baseline="mathematical">SQMediator</text><polygon fill="#BF3EFF" points="580,470 610,470 625,485 610,500 580,500 595,485 " stroke="#68228B"/><text x="580" font-size="15" y="469" dominant-baseline="mathematical">stockQuoteService</text><polyline fill="none" stroke-width="2" points="619,221 639,221 639,225 795,225" stroke="black"/><polyline fill="none" stroke-width="2" points="619,317 644,317 644,1005 795,1005" stroke="black"/><polyline fill="none" stroke-width="2" points="619,285 649,285 649,745 795,745" stroke="black"/><polyline fill="none" stroke-width="2" points="619,253 654,253 654,485 795,485" stroke="black"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 1400 1340" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="1400" rx="20" ry="20" height="1340" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1000" rx="20" ry="20" height="1140" stroke="#919191"/><text x="220" font-size="15" y="120" dominant-baseline="mathematical">Calculator</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">CalculatorServiceComponent</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">CalculatorService</text><polygon fill="#BF3EFF" points="586,210 608,210 619,221 608,232 586,232 597,221 " stroke="#68228B"/><text x="586" font-size="15" y="209" dominant-baseline="mathematical">addService</text><polygon fill="#BF3EFF" points="586,242 608,242 619,253 608,264 586,264 597,253 " stroke="#68228B"/><text x="586" font-size="15" y="241" dominant-baseline="mathematical">subtractService</text><polygon fill="#BF3EFF" points="586,274 608,274 619,285 608,296 586,296 597,285 " stroke="#68228B"/><text x="586" font-size="15" y="273" dominant-baseline="mathematical">multiplyService</text><polygon fill="#BF3EFF" points="586,306 608,306 619,317 608,328 586,328 597,317 " stroke="#68228B"/><text x="586" font-size="15" y="305" dominant-baseline="mathematical">divideService</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">AddServiceComponent</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="209" dominant-baseline="mathematical">AddService</text><rect x="800" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="610" dominant-baseline="mathematical">SubtractServiceComponent</text><polygon fill="#00CD66" points="780,470 810,470 825,485 810,500 780,500 795,485 " stroke="#008B45"/><text x="780" font-size="15" y="469" dominant-baseline="mathematical">SubtractService</text><rect x="800" y="720" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="870" dominant-baseline="mathematical">MultiplyServiceComponent</text><polygon fill="#00CD66" points="780,730 810,730 825,745 810,760 780,760 795,745 " stroke="#008B45"/><text x="780" font-size="15" y="729" dominant-baseline="mathematical">MultiplyService</text><rect x="800" y="980" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="1130" dominant-baseline="mathematical">DivideServiceComponent</text><polygon fill="#00CD66" points="780,990 810,990 825,1005 810,1020 780,1020 795,1005 " stroke="#008B45"/><text x="780" font-size="15" y="989" dominant-baseline="mathematical">DivideService</text><rect x="400" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="610" dominant-baseline="mathematical">StockQuoteMediatorComponent</text><rect fill="#EEEE00" x="420" width="20" height="20" y="450" stroke="#EEC900"/><text x="420" font-size="15" y="449" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="380,470 410,470 425,485 410,500 380,500 395,485 " stroke="#008B45"/><text x="380" font-size="15" y="469" dominant-baseline="mathematical">SQMediator</text><polygon fill="#BF3EFF" points="580,470 610,470 625,485 610,500 580,500 595,485 " stroke="#68228B"/><text x="580" font-size="15" y="469" dominant-baseline="mathematical">stockQuoteService</text><polyline fill="none" stroke-width="2" points="619,221 639,221 639,225 795,225" stroke="black"/><polyline fill="none" stroke-width="2" points="619,317 644,317 644,1005 795,1005" stroke="black"/><polyline fill="none" stroke-width="2" points="619,285 649,285 649,745 795,745" stroke="black"/><polyline fill="none" stroke-width="2" points="619,253 654,253 654,485 795,485" stroke="black"/></svg>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/IdleTest_diagram.svg b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/IdleTest_diagram.svg
new file mode 100755
index 0000000000..a18d9c11a2
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/IdleTest_diagram.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="1000" rx="20" ry="20" height="560" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="600" rx="20" ry="20" height="360" stroke="#919191"/><text x="500" font-size="15" y="120" dominant-baseline="mathematical">IdleTest</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">AddServiceComponent</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">AddService</text></svg>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/MyValueComposite2_diagram.html b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/MyValueComposite2_diagram.html
new file mode 100755
index 0000000000..ae6b2d49fa
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/MyValueComposite2_diagram.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+<h1 align='center'>Apache Tuscany - Composite Diagram Generator</h1>
+<h2 align='center'>MyValueComposite2</h2>
+</br>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/rgbcolor.js"></script>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/canvg-1.0.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+//load '../path/to/your.svg' in the canvas with id = 'canvas'
+canvg('canvas', 'MyValueComposite2_diagram.svg')
+//load a svg snippet in the canvas with id = 'drawingArea'
+canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
+canvg('canvas', 'MyValueComposite2_diagram.svg', {})
+}
+</script>
+</head>
+<body>
+<canvas id="canvas" width="1400px" height="1080px">
+</canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/MyValueComposite2_diagram.svg b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/MyValueComposite2_diagram.svg
index 8f2772470b..f731eb05aa 100755
--- a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/MyValueComposite2_diagram.svg
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/MyValueComposite2_diagram.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="1400" rx="20" ry="20" height="1080" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1000" rx="20" ry="20" height="880" stroke="#919191"/><text x="220" font-size="15" y="120" dominant-baseline="mathematical">MyValueComposite2</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">MyValueServiceComponent</text><rect fill="#EEEE00" x="420" width="20" height="20" y="190" stroke="#EEC900"/><text x="420" font-size="15" y="189" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">myValueService</text><polygon fill="#BF3EFF" points="580,210 610,210 625,225 610,240 580,240 595,225 " stroke="#68228B"/><text x="580" font-size="15" y="209" dominant-baseline="mathematical">stockQuoteService</text><polygon fill="#BF3EFF" points="580,250 610,250 625,265 610,280 580,280 595,265 " stroke="#68228B"/><text x="580" font-size="15" y="249" dominant-baseline="mathematical">customerService</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">StockQuoteMediatorComponent</text><rect fill="#EEEE00" x="820" width="20" height="20" y="190" stroke="#EEC900"/><text x="820" font-size="15" y="189" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="209" dominant-baseline="mathematical">SQMediator</text><polygon fill="#BF3EFF" points="980,210 1010,210 1025,225 1010,240 980,240 995,225 " stroke="#68228B"/><text x="980" font-size="15" y="209" dominant-baseline="mathematical">stockQuoteService</text><rect x="400" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="610" dominant-baseline="mathematical">SubtractServiceComponent</text><polygon fill="#00CD66" points="380,470 410,470 425,485 410,500 380,500 395,485 " stroke="#008B45"/><text x="380" font-size="15" y="469" dominant-baseline="mathematical">SubtractService</text><rect x="400" y="720" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="870" dominant-baseline="mathematical">MultiplyServiceComponent</text><polygon fill="#00CD66" points="380,730 410,730 425,745 410,760 380,760 395,745 " stroke="#008B45"/><text x="380" font-size="15" y="729" dominant-baseline="mathematical">MultiplyService</text><rect fill="#EEEE00" x="670" width="60" height="60" y="70" stroke="#EEC900"/><text x="670" font-size="15" y="69" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="140,495 230,495 275,540 230,585 140,585 185,540 " stroke="#008B45"/><text x="140" font-size="15" y="494" dominant-baseline="mathematical">MyValueService</text><polygon fill="#BF3EFF" points="1140,425 1230,425 1275,470 1230,515 1140,515 1185,470 " stroke="#68228B"/><text x="1140" font-size="15" y="424" dominant-baseline="mathematical">CustomerService</text><polygon fill="#BF3EFF" points="1140,565 1230,565 1275,610 1230,655 1140,655 1185,610 " stroke="#68228B"/><text x="1140" font-size="15" y="564" dominant-baseline="mathematical">StockQuoteService</text><polyline fill="none" stroke-width="2" points="625,225 795,225" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="1025,225 1050,225 1050,610 1185,610" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="625,265 655,265 655,470 1185,470" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="1025,225 1060,225 1060,470 1185,470" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="275,540 315,540 315,225 395,225" stroke="black"/><rect x="205" y="910" alignment-baseline="middle" fill="#E5E5C0" width="990" rx="20" ry="20" height="65" stroke="#919191"/><text x="210" font-size="15" y="920" dominant-baseline="mathematical">Included Composites</text><text x="210" font-size="15" y="945" dominant-baseline="mathematical"><a xlink:href="store_diagram.svg" xlink:actuate="onRequest" xlink:type="simple" xlink:show="new" xmlns:xlink="http://www.w3.org/1999/xlink"> store ,</a><a xlink:href="Calculator_diagram.svg" xlink:actuate="onRequest" xlink:type="simple" xlink:show="new" xmlns:xlink="http://www.w3.org/1999/xlink"> Calculator ,</a><a xlink:href="supplychain_diagram.svg" xlink:actuate="onRequest" xlink:type="simple" xlink:show="new" xmlns:xlink="http://www.w3.org/1999/xlink"> supplychain ,</a></text></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 1400 1080" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="1400" rx="20" ry="20" height="1080" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1000" rx="20" ry="20" height="880" stroke="#919191"/><text x="220" font-size="15" y="120" dominant-baseline="mathematical">MyValueComposite2</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">MyValueServiceComponent</text><rect fill="#EEEE00" x="420" width="20" height="20" y="190" stroke="#EEC900"/><text x="420" font-size="15" y="189" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">myValueService</text><polygon fill="#BF3EFF" points="580,210 610,210 625,225 610,240 580,240 595,225 " stroke="#68228B"/><text x="580" font-size="15" y="209" dominant-baseline="mathematical">stockQuoteService</text><polygon fill="#BF3EFF" points="580,250 610,250 625,265 610,280 580,280 595,265 " stroke="#68228B"/><text x="580" font-size="15" y="249" dominant-baseline="mathematical">customerService</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">StockQuoteMediatorComponent</text><rect fill="#EEEE00" x="820" width="20" height="20" y="190" stroke="#EEC900"/><text x="820" font-size="15" y="189" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="209" dominant-baseline="mathematical">SQMediator</text><polygon fill="#BF3EFF" points="980,210 1010,210 1025,225 1010,240 980,240 995,225 " stroke="#68228B"/><text x="980" font-size="15" y="209" dominant-baseline="mathematical">stockQuoteService</text><rect x="400" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="610" dominant-baseline="mathematical">SubtractServiceComponent</text><polygon fill="#00CD66" points="380,470 410,470 425,485 410,500 380,500 395,485 " stroke="#008B45"/><text x="380" font-size="15" y="469" dominant-baseline="mathematical">SubtractService</text><rect x="400" y="720" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="870" dominant-baseline="mathematical">MultiplyServiceComponent</text><polygon fill="#00CD66" points="380,730 410,730 425,745 410,760 380,760 395,745 " stroke="#008B45"/><text x="380" font-size="15" y="729" dominant-baseline="mathematical">MultiplyService</text><rect fill="#EEEE00" x="670" width="60" height="60" y="70" stroke="#EEC900"/><text x="670" font-size="15" y="69" dominant-baseline="mathematical">currency</text><polygon fill="#00CD66" points="140,495 230,495 275,540 230,585 140,585 185,540 " stroke="#008B45"/><text x="140" font-size="15" y="494" dominant-baseline="mathematical">MyValueService</text><polygon fill="#BF3EFF" points="1140,425 1230,425 1275,470 1230,515 1140,515 1185,470 " stroke="#68228B"/><text x="1140" font-size="15" y="424" dominant-baseline="mathematical">CustomerService</text><polygon fill="#BF3EFF" points="1140,565 1230,565 1275,610 1230,655 1140,655 1185,610 " stroke="#68228B"/><text x="1140" font-size="15" y="564" dominant-baseline="mathematical">StockQuoteService</text><polyline fill="none" stroke-width="2" points="625,225 795,225" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="1025,225 1050,225 1050,610 1185,610" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="625,265 655,265 655,470 1185,470" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="1025,225 1060,225 1060,470 1185,470" stroke="black"/><polyline fill="none" stroke-dasharray="3 3" stroke-width="2" points="275,540 315,540 315,225 395,225" stroke="black"/><rect x="205" y="910" alignment-baseline="middle" fill="#E5E5C0" width="990" rx="20" ry="20" height="65" stroke="#919191"/><text x="210" font-size="15" y="920" dominant-baseline="mathematical">Included Composites</text><text x="210" font-size="15" y="945" dominant-baseline="mathematical"><a xlink:href="store_diagram.svg" xlink:actuate="onRequest" xlink:type="simple" xlink:show="new" xmlns:xlink="http://www.w3.org/1999/xlink"> store ,</a><a xlink:href="Calculator_diagram.svg" xlink:actuate="onRequest" xlink:type="simple" xlink:show="new" xmlns:xlink="http://www.w3.org/1999/xlink"> Calculator ,</a><a xlink:href="supplychain_diagram.svg" xlink:actuate="onRequest" xlink:type="simple" xlink:show="new" xmlns:xlink="http://www.w3.org/1999/xlink"> supplychain ,</a></text></svg>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/store_diagram.html b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/store_diagram.html
new file mode 100755
index 0000000000..16b72202ac
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/store_diagram.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+<h1 align='center'>Apache Tuscany - Composite Diagram Generator</h1>
+<h2 align='center'>store</h2>
+</br>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/rgbcolor.js"></script>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/canvg-1.0.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+//load '../path/to/your.svg' in the canvas with id = 'canvas'
+canvg('canvas', 'store_diagram.svg')
+//load a svg snippet in the canvas with id = 'drawingArea'
+canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
+canvg('canvas', 'store_diagram.svg', {})
+}
+</script>
+</head>
+<body>
+<canvas id="canvas" width="1800px" height="820px">
+</canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/store_diagram.svg b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/store_diagram.svg
index 396cc733b9..2bce7c1173 100755
--- a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/store_diagram.svg
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/store_diagram.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="1800" rx="20" ry="20" height="820" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1400" rx="20" ry="20" height="620" stroke="#919191"/><text x="900" font-size="15" y="120" dominant-baseline="mathematical">store</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">Store</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">Widget</text><polygon fill="#BF3EFF" points="580,210 610,210 625,225 610,240 580,240 595,225 " stroke="#68228B"/><text x="580" font-size="15" y="209" dominant-baseline="mathematical">catalog</text><polygon fill="#BF3EFF" points="580,250 610,250 625,265 610,280 580,280 595,265 " stroke="#68228B"/><text x="580" font-size="15" y="249" dominant-baseline="mathematical">shoppingCart</text><polygon fill="#BF3EFF" points="580,290 610,290 625,305 610,320 580,320 595,305 " stroke="#68228B"/><text x="580" font-size="15" y="289" dominant-baseline="mathematical">shoppingTotal</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">Catalog</text><rect fill="#EEEE00" x="820" width="20" height="20" y="190" stroke="#EEC900"/><text x="820" font-size="15" y="189" dominant-baseline="mathematical">currencyCode</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="209" dominant-baseline="mathematical">Catalog</text><polygon fill="#BF3EFF" points="980,210 1010,210 1025,225 1010,240 980,240 995,225 " stroke="#68228B"/><text x="980" font-size="15" y="209" dominant-baseline="mathematical">currencyConverter</text><rect x="800" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="610" dominant-baseline="mathematical">ShoppingCart</text><polygon fill="#00CD66" points="780,470 810,470 825,485 810,500 780,500 795,485 " stroke="#008B45"/><text x="780" font-size="15" y="469" dominant-baseline="mathematical">Cart</text><polygon fill="#00CD66" points="780,510 810,510 825,525 810,540 780,540 795,525 " stroke="#008B45"/><text x="780" font-size="15" y="509" dominant-baseline="mathematical">Total</text><rect x="1200" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="1200" font-size="15" y="350" dominant-baseline="mathematical">CurrencyConverter</text><polygon fill="#00CD66" points="1180,210 1210,210 1225,225 1210,240 1180,240 1195,225 " stroke="#008B45"/><text x="1180" font-size="15" y="209" dominant-baseline="mathematical">CurrencyConverter</text><polyline fill="none" stroke-width="2" points="625,305 645,305 645,525 795,525" stroke="black"/><polyline fill="none" stroke-width="2" points="625,265 650,265 650,485 795,485" stroke="black"/><polyline fill="none" stroke-width="2" points="625,225 795,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1025,225 1195,225" stroke="black"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 1800 820" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="1800" rx="20" ry="20" height="820" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1400" rx="20" ry="20" height="620" stroke="#919191"/><text x="220" font-size="15" y="120" dominant-baseline="mathematical">store</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">Store</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">Widget</text><polygon fill="#BF3EFF" points="580,210 610,210 625,225 610,240 580,240 595,225 " stroke="#68228B"/><text x="580" font-size="15" y="209" dominant-baseline="mathematical">catalog</text><polygon fill="#BF3EFF" points="580,250 610,250 625,265 610,280 580,280 595,265 " stroke="#68228B"/><text x="580" font-size="15" y="249" dominant-baseline="mathematical">shoppingCart</text><polygon fill="#BF3EFF" points="580,290 610,290 625,305 610,320 580,320 595,305 " stroke="#68228B"/><text x="580" font-size="15" y="289" dominant-baseline="mathematical">shoppingTotal</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">Catalog</text><rect fill="#EEEE00" x="820" width="20" height="20" y="190" stroke="#EEC900"/><text x="820" font-size="15" y="189" dominant-baseline="mathematical">currencyCode</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="209" dominant-baseline="mathematical">Catalog</text><polygon fill="#BF3EFF" points="980,210 1010,210 1025,225 1010,240 980,240 995,225 " stroke="#68228B"/><text x="980" font-size="15" y="209" dominant-baseline="mathematical">currencyConverter</text><rect x="800" y="460" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="610" dominant-baseline="mathematical">ShoppingCart</text><polygon fill="#00CD66" points="780,470 810,470 825,485 810,500 780,500 795,485 " stroke="#008B45"/><text x="780" font-size="15" y="469" dominant-baseline="mathematical">Cart</text><polygon fill="#00CD66" points="780,510 810,510 825,525 810,540 780,540 795,525 " stroke="#008B45"/><text x="780" font-size="15" y="509" dominant-baseline="mathematical">Total</text><rect x="1200" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="1200" font-size="15" y="350" dominant-baseline="mathematical">CurrencyConverter</text><polygon fill="#00CD66" points="1180,210 1210,210 1225,225 1210,240 1180,240 1195,225 " stroke="#008B45"/><text x="1180" font-size="15" y="209" dominant-baseline="mathematical">CurrencyConverter</text><polyline fill="none" stroke-width="2" points="625,305 645,305 645,525 795,525" stroke="black"/><polyline fill="none" stroke-width="2" points="625,265 650,265 650,485 795,485" stroke="black"/><polyline fill="none" stroke-width="2" points="625,225 795,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1025,225 1195,225" stroke="black"/></svg>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/supplychain_diagram.html b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/supplychain_diagram.html
new file mode 100755
index 0000000000..227ebd720b
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/supplychain_diagram.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+<h1 align='center'>Apache Tuscany - Composite Diagram Generator</h1>
+<h2 align='center'>supplychain</h2>
+</br>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/rgbcolor.js"></script>
+<script type="text/javascript" src="/media/798D-18B1/GSoC-2011/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/resources/canvg-1.0.js"></script>
+<script type="text/javascript">
+window.onload = function() {
+//load '../path/to/your.svg' in the canvas with id = 'canvas'
+canvg('canvas', 'supplychain_diagram.svg')
+//load a svg snippet in the canvas with id = 'drawingArea'
+canvg(document.getElementById('drawingArea'), '<svg>...</svg>')
+canvg('canvas', 'supplychain_diagram.svg', {})
+}
+</script>
+</head>
+<body>
+<canvas id="canvas" width="2200px" height="560px">
+</canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/supplychain_diagram.svg b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/supplychain_diagram.svg
index 11be7dd98d..466028c02e 100755
--- a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/supplychain_diagram.svg
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/output/supplychain_diagram.svg
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="2200" rx="20" ry="20" height="560" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1800" rx="20" ry="20" height="360" stroke="#919191"/><text x="1100" font-size="15" y="120" dominant-baseline="mathematical">supplychain</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">CustomerComponent</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="225" dominant-baseline="mathematical">CustomerComponent</text><polygon fill="#BF3EFF" points="580,210 610,210 625,225 610,240 580,240 595,225 " stroke="#68228B"/><text x="580" font-size="15" y="225" dominant-baseline="mathematical">retailer</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">RetailerComponent</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="225" dominant-baseline="mathematical">RetailerComponent</text><polygon fill="#BF3EFF" points="980,210 1010,210 1025,225 1010,240 980,240 995,225 " stroke="#68228B"/><text x="980" font-size="15" y="225" dominant-baseline="mathematical">warehouse</text><rect x="1200" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="1200" font-size="15" y="350" dominant-baseline="mathematical">WarehouseComponent</text><polygon fill="#00CD66" points="1180,210 1210,210 1225,225 1210,240 1180,240 1195,225 " stroke="#008B45"/><text x="1180" font-size="15" y="225" dominant-baseline="mathematical">WarehouseComponent</text><polygon fill="#BF3EFF" points="1380,210 1410,210 1425,225 1410,240 1380,240 1395,225 " stroke="#68228B"/><text x="1380" font-size="15" y="225" dominant-baseline="mathematical">shipper</text><rect x="1600" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="1600" font-size="15" y="350" dominant-baseline="mathematical">ShipperComponent</text><polygon fill="#00CD66" points="1580,210 1610,210 1625,225 1610,240 1580,240 1595,225 " stroke="#008B45"/><text x="1580" font-size="15" y="225" dominant-baseline="mathematical">ShipperComponent</text><polygon fill="#BF3EFF" points="1780,210 1810,210 1825,225 1810,240 1780,240 1795,225 " stroke="#68228B"/><text x="1780" font-size="15" y="225" dominant-baseline="mathematical">customer</text><polyline fill="none" stroke-width="2" points="625,225 795,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1025,225 1195,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1425,225 1595,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1825,225 1860,225 1860,155 360,155 360,225 395,225" stroke="black"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 2200 560" preserveAspectRatio="xMidYMid meet" version="1.0"><rect x="0" y="0" alignment-baseline="middle" fill="#E5E5D0" width="2200" rx="20" ry="20" height="560" stroke="#919191"/><rect x="200" y="100" alignment-baseline="middle" fill="#E5E5E5" width="1800" rx="20" ry="20" height="360" stroke="#919191"/><text x="220" font-size="15" y="120" dominant-baseline="mathematical">supplychain</text><rect x="400" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="400" font-size="15" y="350" dominant-baseline="mathematical">CustomerComponent</text><polygon fill="#00CD66" points="380,210 410,210 425,225 410,240 380,240 395,225 " stroke="#008B45"/><text x="380" font-size="15" y="209" dominant-baseline="mathematical">CustomerComponent</text><polygon fill="#BF3EFF" points="580,210 610,210 625,225 610,240 580,240 595,225 " stroke="#68228B"/><text x="580" font-size="15" y="209" dominant-baseline="mathematical">retailer</text><rect x="800" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="800" font-size="15" y="350" dominant-baseline="mathematical">RetailerComponent</text><polygon fill="#00CD66" points="780,210 810,210 825,225 810,240 780,240 795,225 " stroke="#008B45"/><text x="780" font-size="15" y="209" dominant-baseline="mathematical">RetailerComponent</text><polygon fill="#BF3EFF" points="980,210 1010,210 1025,225 1010,240 980,240 995,225 " stroke="#68228B"/><text x="980" font-size="15" y="209" dominant-baseline="mathematical">warehouse</text><rect x="1200" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="1200" font-size="15" y="350" dominant-baseline="mathematical">WarehouseComponent</text><polygon fill="#00CD66" points="1180,210 1210,210 1225,225 1210,240 1180,240 1195,225 " stroke="#008B45"/><text x="1180" font-size="15" y="209" dominant-baseline="mathematical">WarehouseComponent</text><polygon fill="#BF3EFF" points="1380,210 1410,210 1425,225 1410,240 1380,240 1395,225 " stroke="#68228B"/><text x="1380" font-size="15" y="209" dominant-baseline="mathematical">shipper</text><rect x="1600" y="200" fill-opacity="0.75" fill="#3D59AB" width="200" rx="20" ry="20" height="130" stroke="#104E8B"/><text x="1600" font-size="15" y="350" dominant-baseline="mathematical">ShipperComponent</text><polygon fill="#00CD66" points="1580,210 1610,210 1625,225 1610,240 1580,240 1595,225 " stroke="#008B45"/><text x="1580" font-size="15" y="209" dominant-baseline="mathematical">ShipperComponent</text><polygon fill="#BF3EFF" points="1780,210 1810,210 1825,225 1810,240 1780,240 1795,225 " stroke="#68228B"/><text x="1780" font-size="15" y="209" dominant-baseline="mathematical">customer</text><polyline fill="none" stroke-width="2" points="625,225 795,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1025,225 1195,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1425,225 1595,225" stroke="black"/><polyline fill="none" stroke-width="2" points="1825,225 1860,225 1860,155 360,155 360,225 395,225" stroke="black"/></svg>
\ No newline at end of file
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/diagram/DiagramGenerator.java b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/diagram/DiagramGenerator.java
index 544ce37a2f..df366581de 100755
--- a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/diagram/DiagramGenerator.java
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/diagram/DiagramGenerator.java
@@ -52,6 +52,7 @@ public class DiagramGenerator {
 	private Element svgRoot;
 	private ArrayList<ReferenceArtifact> refs= new ArrayList<ReferenceArtifact>();
 	private ArrayList<ServiceArtifact> sers= new ArrayList<ServiceArtifact>();
+	private int diagramHeight, diagramWidth;
 	
 	private int lastUsedChangingFactor = 0;
 	enum changingFactor{a(20), b(25), c(30), d(35), e(40), f(15);
@@ -92,6 +93,11 @@ public class DiagramGenerator {
 
 		// Get the root element (the 'svg' element).
 		svgRoot = doc.getDocumentElement();
+				
+		setDiagramHeight(comp.getHeight()+200);
+		setDiagramWidth(comp.getWidth()+400);
+		
+		svgRoot.setAttributeNS(null, "viewBox", "0 0 "+getDiagramWidth()+" "+getDiagramHeight());
 
 		addLayer();
 		addComposite();
@@ -118,9 +124,9 @@ public class DiagramGenerator {
 	}
 
 	private void addLayer() {
-
+		
 		Layer outerLayer = new Layer();
-		Element layerElt = outerLayer.addElement(doc, svgNS, 0, 0, comp.getHeight()+200, comp.getWidth()+400);
+		Element layerElt = outerLayer.addElement(doc, svgNS, 0, 0, getDiagramHeight(), getDiagramWidth() );
 		svgRoot.appendChild(layerElt);
 	}
 
@@ -187,7 +193,7 @@ public class DiagramGenerator {
 			for(String includedComposite : comp.getIncludedComposites()){
 
 				Link link = new Link();
-				Element aLink = link.addElement(doc, svgNS, includedComposite+comp.getFileNameSuffix(), includedComposite);
+				Element aLink = link.addElement(doc, svgNS, includedComposite+comp.getFileNameSuffix()+".svg", includedComposite);
 				text.appendChild(aLink);
 
 			}
@@ -562,6 +568,22 @@ public class DiagramGenerator {
 
 	}
 
+	public void setDiagramHeight(int diagramHeight) {
+		this.diagramHeight = diagramHeight;
+	}
+
+	public int getDiagramHeight() {
+		return diagramHeight;
+	}
+
+	public void setDiagramWidth(int diagramWidth) {
+		this.diagramWidth = diagramWidth;
+	}
+
+	public int getDiagramWidth() {
+		return diagramWidth;
+	}
+
 
 
 }
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/html/HTMLWrapper.java b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/html/HTMLWrapper.java
new file mode 100755
index 0000000000..f286f050b8
--- /dev/null
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/html/HTMLWrapper.java
@@ -0,0 +1,93 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+ */
+
+package org.apache.tuscany.sca.impl.html;
+
+import java.io.BufferedWriter;
+import java.io.File;
+import java.io.FileWriter;
+
+
+public class HTMLWrapper {
+	
+	private File htmlFilePath;
+	private String compositeName;
+	private String svgFileName;
+	private int compositeHeight, compositeWidth;
+	private static final String CANVG_LIB_DIR = System.getProperty("user.dir")+"/resources/";
+	private static final String CANVG_FILE = "canvg-1.0.js";
+	private static final String RGB_FILE = "rgbcolor.js";
+	
+	/**
+	 * 
+	 * @param compositeName
+	 * @param svgFileName
+	 * @param compositeHeight
+	 * @param compositeWidth
+	 * @param htmlFilePath
+	 */
+	public HTMLWrapper(String compositeName, String svgFileName,
+			int compositeHeight, int compositeWidth, File htmlFilePath) {
+		
+		this.compositeName = compositeName;
+		this.svgFileName = svgFileName;
+		this.compositeHeight = compositeHeight;
+		this.compositeWidth = compositeWidth;
+		this.htmlFilePath = htmlFilePath;
+	}
+	
+	public void buildHTML() throws Exception{
+		String content = "" +
+				"<html>\n" +
+				"<head>\n" +
+				"<h1 align='center'>Apache Tuscany - Composite Diagram Generator</h1>\n" +
+				"<h2 align='center'>"+compositeName+"</h2>\n" +
+				"</br>\n" +
+				"<script type=\"text/javascript\" src=\""+CANVG_LIB_DIR+RGB_FILE+"\"></script>\n" +
+				"<script type=\"text/javascript\" src=\""+CANVG_LIB_DIR+CANVG_FILE+"\"></script>\n" +
+				"<script type=\"text/javascript\">\n" +
+				"window.onload = function() {\n" +
+				"//load '../path/to/your.svg' in the canvas with id = 'canvas'\n" +
+				"canvg('canvas', '"+svgFileName+"')\n" +
+				"//load a svg snippet in the canvas with id = 'drawingArea'\n" +
+				"canvg(document.getElementById('drawingArea'), '<svg>...</svg>')\n" +
+				"canvg('canvas', '"+svgFileName+"', {})\n" +
+				"}\n" +
+				"</script>\n" +
+				"</head>\n" +
+				"<body>\n" +
+				"<canvas id=\"canvas\" width=\""+compositeWidth+"px\" height=\""+compositeHeight+"px\">\n" +
+				"</canvas>\n" +
+				"</body>\n" +
+				"</html>";
+		
+		fileWriter(content);
+		
+	}
+
+
+	private void fileWriter(String content) throws Exception{
+
+		FileWriter fileWriter = new FileWriter(htmlFilePath);
+		BufferedWriter bufferedWriter = new BufferedWriter(fileWriter);
+		bufferedWriter.append(content);
+		bufferedWriter.close();
+
+	}
+}
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/layout/CompositeEntity.java b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/layout/CompositeEntity.java
index c7f1142964..aa98c3db65 100755
--- a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/layout/CompositeEntity.java
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/impl/layout/CompositeEntity.java
@@ -44,7 +44,7 @@ public class CompositeEntity extends Entity{
 //	public static final int defaultNoOfRefs= Component.DEFAULT_HEIGHT / (Reference.MAXIMUM_HEIGHT+Reference.SPACING); //same value for defaultNoOfSers
 //	public static final int defaultNoOfProps= Component.DEFAULT_WIDTH / (Property.MAXIMUM_HEIGHT+Property.SPACING); 
 	
-	private final String fileNameSuffix = "_diagram.svg";
+	private final String fileNameSuffix = "_diagram";
 	private int maxInternalLevel=0;
 	private int maxInternalLane=0;
 	private ComponentEntity[] componentList;
diff --git a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/main/Main.java b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/main/Main.java
index f56c88aed4..ce1d6600b9 100755
--- a/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/main/Main.java
+++ b/collaboration/GSoC-2011-Nirmal/CompositeDiagramGeneratorUsingBatik/src/main/java/org/apache/tuscany/sca/main/Main.java
@@ -22,6 +22,7 @@ package org.apache.tuscany.sca.main;
 import java.io.File;
 
 import org.apache.tuscany.sca.impl.diagram.DiagramGenerator;
+import org.apache.tuscany.sca.impl.html.HTMLWrapper;
 import org.apache.tuscany.sca.impl.io.XMLReader;
 import org.apache.tuscany.sca.impl.io.XMLWriter;
 import org.apache.tuscany.sca.impl.layout.CompositeEntity;
@@ -38,16 +39,22 @@ public class Main {
 	public static void main(String[] args) throws Exception {
 
 		XMLReader reader = new XMLReader();
-		Document doc =reader.parseXMLFile(System.getProperty("user.dir")+"/input/composite_with_compositeService.xml");//composite1.xml composite_with_compositeService.xml");
+		Document doc =reader.parseXMLFile(System.getProperty("user.dir")+"/input/composite2.xml");//composite1.xml composite_with_compositeService.xml");
 		EntityBuilder eb = new EntityBuilder(doc);
 		CompositeEntity comp =eb.buildCompositeEntity();
 		
 		DiagramGenerator dg = new DiagramGenerator(comp);
 		Document svg =dg.buildSVGDocument();
 		
-		File outFile = new File(outFileDir + comp.getName()+ comp.getFileNameSuffix());
+		String svgFileName = comp.getName()+ comp.getFileNameSuffix()+".svg";
+		File svgFile = new File(outFileDir + svgFileName);
 		XMLWriter writer = new XMLWriter();
-		writer.fileWriter(svg, outFile);
+		writer.fileWriter(svg, svgFile);
+		
+		File htmlFile = new File(outFileDir + comp.getName()+ comp.getFileNameSuffix()+".html");
+		HTMLWrapper html = new HTMLWrapper(comp.getName(), svgFileName, dg.getDiagramHeight(), 
+				dg.getDiagramWidth(), htmlFile);
+		html.buildHTML();
 	}
 
 }