this is drawing tool which is an drawing editor for svg element

1. DRAWING TOOL
SUBMITTED TO: SUBMITTED BY:
Deepak Mangal Dinesh Kumar Pathak

2. SYNOPSIS
The objective is to build a drawing editor having all
required operations that a normal drawing editor
should offer.
The coding is implemented for a single svg drawing
editor.
 It is developed in Eclipse with Java, JavaScript and
html pages.
Vector graphics do not lose any quality if they are
zoomed or resized. Vector graphics are composed of
paths.
After Drawing we are generate the png image.

3. About Project:
The aim of this project is to develop a SVG vector
graphics.
The project must also have a user-friendly interface
that contains buttons for all operations.
You can make any type of shape from these buttons.
After shape creation you can select any shape. And
then after that you can perform operations on these
shapes like resize or drag.
 We have one more element that is eraser by which we
can erase the pencil content and any shape.
 We have select any element and can delete any
shape from the drawing tool with the help of delete
button.

4. Cont.:-
 You can change the color of any element.
You also can change the stroke width and stroke
color of the element.
You can change the color of any element.
 You also can change the stroke width and stroke
color of the element.
In final when you create the drawing that you what so
just click on the extract button that button cut the
used portion by the drawing and then convert it into
the PNG image.
After the extraction we can get png image in our
browser.

5. Technology Used:
Java:-Java is defined by a specification and consists
of a programming language, a compiler, core
libraries and a runtime (Java virtual machine) The
Java runtime allows software developers to write
program code in other languages than the Java
programming language which still runs on the Java
virtual machine. The Java platform is usually
associated with the Java virtual machine and
the Java core libraries. Java programs use the Java
virtual machine as abstraction and do not access the
operating system directly. Java is Platform
independent.

6. Tools Used Cont.:
GWT:- Google Web Toolkit is a development toolkit to
create Rich Internet Application(RIA). GWT provides
developers option to write client side application in
JAVA. GWT compiles the code written in JAVA to
JavaScript code. Application written in GWT is cross-
browser compliant. GWT automatically generates
JavaScript code suitable for each browser. GWT is
open source, completely free, and used by thousands
of developers around the world. It is licensed under the
Apache License version 2.0. Being Java based, you
can use JAVA IDEs like Eclipse to develop GWT
application.

7. Technology Used Cont.
HTML:- (Hyper text markup language) It is the
standard markup language used to create web
pages. . Web browsers can read html files and
compose them into visible or audible web pages.
CSS:- CSS is a cascading style sheet which is used
to give designer look to html using the external file. It
is used for describing the look and formatting of a
document written in markup language.

8. Technology Used Cont.
JAVASCRIPT:- Java Script is used for client side
scripting which can help in using validation on the
website and many more other functions. It is a
dynamic computer programming language. It is most
commonly used as a part of web browsers, whose
implementation allow client side scripts to interact
with the user. This allows you to make parts of your
web pages appear or disappear or move around on
the page. JavaScript only execute on the page that
are on your browser window at any set time.

9. Tools Used:
ECLIPSE- Eclipse is an integrated development
environment (IDE) used in computer programming,
and is the most widely used Java IDE. It contains a
base workspace and an extensible plug-in system for
customizing the environment. It is a general purpose
open platform that facilitates and encourages the
development of third party plug-ins. Originally
designed for Java, now supports many other
languages . Good support for C, C++, Python, PHP,
Ruby etc.

10. MODULE DESCRIPTION
The Project involves one major module:
Circle
Rectangle
Triangle
Pencil
Rubber
Line
SVG Image convert into PNG Image

11. Functionality:
 1.Creation:- Firstly we have to move our
cursor to any button and click on the button
then that particular shape is select and then
wherever we click our cursor on svg panel, the
shape is created and the creation of that shape
is continue till we further click on other button
or the same button. If we click on other button
then the shape who is selected is being
created.

12. 2.Selection:- If we click on the shape
that is appeared on svg panel, the
shape is selected. Four lines are
created inscribed that shape and four
circles on those four corner are
created. If we click on other than that
shape, the previous shape will be
deselected and the new shape is
selected.

13. .
3. Deselection:- If we click on other than
that shape, the previous shape will be
deselected and the new shape is selected.
And if we click on svg panel except the
elements then also the current selected
element is deselected.
4.Resize:- We can resize our selected
shape in any dimension which we want.
Mouse down on any circle and move to
anywhere on the svg panel. After resizing our
shape will be selected.

14. .
5.Drag:- We can drag our shape to anywhere in our svg
panel, just mouse down on that shape and move to any place
in svg panel. After dragging our shape will be selected.
6.Delete an Element:- This tool can be used for delete an
element from the svg panel.
7.Change Element Color:- This tool can be used to fill any
closed object with selected color.
8.Change Element Stroke Color:- This tool can be used for
change stroke color of element with selected color.
9.Change Element Stroke Width:- This tool can be used for
change stroke width of element with selected new width for
the element.
10.Extract used svg portion:- In our svg panel there are
many shapes that we are created at different different
locations. If we want to select only that portion on which all the
shapes are created then this tool can be used for cut the
minimum portion which is used by the svg elements.

15. SYSTEM CONFIGURATION
Java: Oracle Java 2 Runtime Environment 1.5.
Operating system: Windows Vista/XP/2000, Mac
OS X 10.4+ (Tiger or Leopard), or Linux with GTK+
2.2.1+
Hardware: 100MB of free disk space, 512MB RAM

16. Cont….
Front-End Design: Eclipse Luna.
RAM: 2GB.

18. 1.Main Page
.

19. 2. CHOOSE AN ELEMENT

20. 3. CREATION OF ELEMENTS

21. 4. SELECTION OF AN ELEMENT

22. 5. RESIZING OF ELEMENTS

23. 6. ERASER ELEMENT

24. 7. COLOR PALETTE

25. 8. CHANGE ELEMENT COLOR

26. 9. SVG TO PNG IMAGE GENERATION

27. 10. FINAL PREPPERBOX

28. Graph Representation of Neo4j

29. Thankyou