SlideShare a Scribd company logo
DRAWING TOOL
SUBMITTED TO: SUBMITTED BY:
Deepak Mangal Dinesh Kumar Pathak
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.
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.
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.
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.
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.
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.
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.
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.
MODULE DESCRIPTION
The Project involves one major module:
Circle
Rectangle
Triangle
Pencil
Rubber
Line
SVG Image convert into PNG Image
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.
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.
.
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.
.
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.
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
Cont
.
Front-End Design: Eclipse Luna.
RAM: 2GB.
Drawing Tool
1.Main Page
.
2. CHOOSE AN ELEMENT
3. CREATION OF ELEMENTS
4. SELECTION OF AN ELEMENT
5. RESIZING OF ELEMENTS
6. ERASER ELEMENT
7. COLOR PALETTE
8. CHANGE ELEMENT COLOR
9. SVG TO PNG IMAGE GENERATION
10. FINAL PREPPERBOX
Graph Representation of Neo4j
Thankyou

More Related Content

PPTX
Adobe xd- The Empire strikes back
PPTX
Introduction to React Native
PDF
Build your Own Customizable 3D Objects with Sculpteo
PDF
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
PPTX
ĐșĐŸĐŒĐżŃŒŃŽŃ‚Đ”Ń€ĐœŃ‹Đ” ĐżŃ€ĐŸĐłŃ€Đ°ĐŒĐŒŃ‹ ĐČ Ń€Đ°Đ±ĐŸŃ‚Đ” графОчДсĐșĐŸĐłĐŸ ЎОзаĐčĐœĐ”Ń€Đ°
PPTX
Android Effective UI: Tips, Tricks and Patterns
PDF
UX Prototyping: New Principles and Tools (HTP Grodno, 20.03.2018)
PDF
Practicing AppDevKit in kata training
Adobe xd- The Empire strikes back
Introduction to React Native
Build your Own Customizable 3D Objects with Sculpteo
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
ĐșĐŸĐŒĐżŃŒŃŽŃ‚Đ”Ń€ĐœŃ‹Đ” ĐżŃ€ĐŸĐłŃ€Đ°ĐŒĐŒŃ‹ ĐČ Ń€Đ°Đ±ĐŸŃ‚Đ” графОчДсĐșĐŸĐłĐŸ ЎОзаĐčĐœĐ”Ń€Đ°
Android Effective UI: Tips, Tricks and Patterns
UX Prototyping: New Principles and Tools (HTP Grodno, 20.03.2018)
Practicing AppDevKit in kata training

What's hot (6)

PPTX
Essentials of Adobe Experience Design
PDF
What Game Engine you should choose Unity or Unreal Engine?
PDF
AppDevKit for iOS Development
PPT
PDF
Mastering the Master Detail Pattern
PDF
New to android studio
Essentials of Adobe Experience Design
What Game Engine you should choose Unity or Unreal Engine?
AppDevKit for iOS Development
Mastering the Master Detail Pattern
New to android studio
Ad

Similar to Drawing Tool (20)

PDF
Canvas Based Presentation tool - First Review
PDF
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
PDF
JavaFX 101
PPT
Rich User Interaction with SVG
 
KEY
How To Make A Framework Plugin That Does Not Suck
PPTX
Practical html5
PDF
PDF
PDF
Choosing Javascript Libraries to Adopt for Development
PDF
Canvas & Canvas - Presentation to NYC.js
PDF
Beyond the Standards
PDF
From Flash to Canvas - a penchant for black holes
PDF
JavaONE 2012 Using Java with HTML5 and CSS3
PPTX
Edy Dawson Notes on SF HTML5 Dev Conf
PDF
Interactive Mouse (Report On Processing)
PDF
hwtut
PDF
hwtut
PDF
Learn about Eclipse e4 from Lars Vogel at SF-JUG
PDF
Software Engineering 2014
PPT
Creation&imitation
Canvas Based Presentation tool - First Review
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
JavaFX 101
Rich User Interaction with SVG
 
How To Make A Framework Plugin That Does Not Suck
Practical html5
Choosing Javascript Libraries to Adopt for Development
Canvas & Canvas - Presentation to NYC.js
Beyond the Standards
From Flash to Canvas - a penchant for black holes
JavaONE 2012 Using Java with HTML5 and CSS3
Edy Dawson Notes on SF HTML5 Dev Conf
Interactive Mouse (Report On Processing)
hwtut
hwtut
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Software Engineering 2014
Creation&imitation
Ad

Recently uploaded (20)

PDF
Top 10 Software Development Trends to Watch in 2025 🚀.pdf
 
PDF
Website Design Services for Small Businesses.pdf
PPTX
Log360_SIEM_Solutions Overview PPT_Feb 2020.pptx
PPTX
Weekly report ppt - harsh dattuprasad patel.pptx
PPTX
Tech Workshop Escape Room Tech Workshop
PPTX
Trending Python Topics for Data Visualization in 2025
PDF
AI/ML Infra Meetup | LLM Agents and Implementation Challenges
PDF
AI/ML Infra Meetup | Beyond S3's Basics: Architecting for AI-Native Data Access
PDF
Autodesk AutoCAD Crack Free Download 2025
PPTX
"Secure File Sharing Solutions on AWS".pptx
PPTX
Oracle Fusion HCM Cloud Demo for Beginners
PPTX
Embracing Complexity in Serverless! GOTO Serverless Bengaluru
PPTX
assetexplorer- product-overview - presentation
PPTX
Why Generative AI is the Future of Content, Code & Creativity?
PPTX
chapter 5 systemdesign2008.pptx for cimputer science students
PDF
Digital Systems & Binary Numbers (comprehensive )
PDF
AI-Powered Threat Modeling: The Future of Cybersecurity by Arun Kumar Elengov...
PDF
Complete Guide to Website Development in Malaysia for SMEs
PDF
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)
PPTX
Advanced SystemCare Ultimate Crack + Portable (2025)
Top 10 Software Development Trends to Watch in 2025 🚀.pdf
 
Website Design Services for Small Businesses.pdf
Log360_SIEM_Solutions Overview PPT_Feb 2020.pptx
Weekly report ppt - harsh dattuprasad patel.pptx
Tech Workshop Escape Room Tech Workshop
Trending Python Topics for Data Visualization in 2025
AI/ML Infra Meetup | LLM Agents and Implementation Challenges
AI/ML Infra Meetup | Beyond S3's Basics: Architecting for AI-Native Data Access
Autodesk AutoCAD Crack Free Download 2025
"Secure File Sharing Solutions on AWS".pptx
Oracle Fusion HCM Cloud Demo for Beginners
Embracing Complexity in Serverless! GOTO Serverless Bengaluru
assetexplorer- product-overview - presentation
Why Generative AI is the Future of Content, Code & Creativity?
chapter 5 systemdesign2008.pptx for cimputer science students
Digital Systems & Binary Numbers (comprehensive )
AI-Powered Threat Modeling: The Future of Cybersecurity by Arun Kumar Elengov...
Complete Guide to Website Development in Malaysia for SMEs
Ableton Live Suite for MacOS Crack Full Download (Latest 2025)
Advanced SystemCare Ultimate Crack + Portable (2025)

Drawing Tool

  • 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
  • 19. 2. CHOOSE AN ELEMENT
  • 20. 3. CREATION OF ELEMENTS
  • 21. 4. SELECTION OF AN ELEMENT
  • 22. 5. RESIZING OF ELEMENTS
  • 26. 9. SVG TO PNG IMAGE GENERATION