A Project Report:

“IoT Virtual Mirror”

SUBMITTED TO MSBTE, MUMBAI

IN PARTIAL FULFILLMENT OF THIRD YEAR

DIPLOMA
IN
COMPUTER ENGINEERING

By:

1. Mrunal Changdev Wakadkar

Under Guidance of:

Mrs. S.U. Puri

DEPARTMENT OF COMPUTER ENGINEERING

JSPM’s Rajarshi Shahu College of Engineering Polytechnic,
Tathawade, Pune-33
ACADEMIC YEAR: 2022-23

JSPM’s RSCOE Poly

Tathawade 1
 DEPARTMENT OF COMPUTER ENGINEERING
JSPM’s Rajarshi Shahu College of Engineering Polytechnic,
Tathawade, Pune-33
CERTIFICATE
THIS IS TO CERTIFY THAT

Name Enrollment no.

1. Mrunal Changdev Wakadkar 2016200141

Has worked on an “IoT Virtual Mirror”. This is a bonafide work carried out by them under
the supervision of Mrs. S. U.Puri and it is approved for the partial fulfilment of the
requirement of MSBTE, Mumbai for the award of the Diploma (Computer Engineering).

Prof. S. U. Puri Prof. V.T.Thakare Prof. V.T.Thakare

(Project Guide) (Project Co-Ordinator) (H.O.D Computer)

Dr. S. S. Gaikwad

(Principal)

Internal Examiner External Examiner

PLACE: Pune DATE:

JSPM’s RSCOE Poly

Tathawade 2
 JSPM’S RAJARSHI SHAHU COLLEGE OF
ENGINEERING POLYTECHNIC
DEPARTMENT OF COMPUTER ENGINEERING

Institute’s Vision and Mission Statements:

Vision
To satisfy the aspirations of youth force, who want to lead the nation towards prosperity
through techno economic development.

Mission
To provide, nurture and maintain an environment of high academic excellence, research and
entrepreneurship for all aspiring students, which will prepare them to face global challenges
maintaining high ethical and moral standards.

Department’s Vision and Mission Statements:

Vision
To impart value based technical education for developing competent computer engineers,
fulfilling expectations of industry and society.

Mission
M1: To provide sound theoretical and practical knowledge
M2: To improve self-awareness and ethical values among students along with technical proficiency.
M3: To promote awareness about life-long learning and problem solving among students.

Program Educational Objectives (PEO’s):

PEO1: Provide socially responsible, environment friendly solutions to Computer Engineering

related broad based problems adapting professional ethics.
PEO2: Adapt state-of-the-art Computer engineering broad-based technologies to work in multi-
disciplinary work environments.
PEO3: Solve broad-based problems individually and as a team member communicating
effectively in the world of work.
Program Specific Outcomes (PSO’s - For ‘I’ Scheme as given by MSBTE):

PSO 1: Computer Software and Hardware Usage: Use state-of-the-art technologies for
operation and application of computer software and hardware.
PSO 2: Computer Engineering Maintenance: Maintain computer engineering related software
and hardware systems.

JSPM’s RSCOE Poly

Tathawade 3
 ACKNOWLEDGEMENT

It is great pleasure for me to acknowledge the assistance and contribution of number of

individuals who helped me in developing “IoT Virtual Mirror”.

First and foremost, I wish to record my gratitude and thanks to Mrs. S. U. Puri (Project
Coordinator) for his enthusiastic guidance and help in successful completion of Project
work. I express my thanks to Dr. S. S. Gaikwad (Principal) and Mrs. V.T.Thakare (Head
of Computer Department) for their valuable guidance. I am also thankful to other teachers
and non-teaching staff of Computer Engineering Department and Library for their co-
operation and help.

THANKING TO ALL OF YOU.

Mrunal Changdev Wakadkar

JSPM’s RSCOE Poly

Tathawade 4
 ABSTRACT

Augmented reality is the technology that expands our physical world, adding layers of
digital information onto it. Augmented reality adds digital element to live view by using
cameras or sensors. The main aim of this work is to develop virtual trial room using
augmented reality which allows user to try on virtual clothes. Kinect sensor is used to
calculate the effective distance between the sensor and the user who is standing in front
of it. Based on this distance we can analyse how the clothes will look on user. This
application improves present augmented based posing and gives full view of 3D image
rather than 2D image.
A lot of shoppers have encountered a problem that trying clothes in clothing stores is
usually a time consuming activity especially during peak hours such as weekends, it
might not even be possible to try-on clothes in such cases as online shopping. Also Due
to security reasons there is limitation on number of garments that can be taken for trial at
a time. Also some times the shoppers are unable to show the customers the new stock
that is supposed to arrive in coming few days. To overcome these problems we aim to
develop a virtual trial room using augmented reality. In this proposed application a sensor
named Kinect is used for the overall analysis of the user's body measurements with the
help of sensor information and his positioning coordinates following components will be
required to design the system.

JSPM’s RSCOE Poly

Tathawade 5
 CONTENTS
Content Page Number
Chapters
1 Synopsis 8-9
9
1.1 Brief Description
9
1.2 Aim of The Project 9
1.3 Actual Methodology Followed

2 Introduction 10 - 11
2.1 Project Plan 11
2.2 Project Scope 11

3 Review Of Literature 12 - 14

3.1 Literature survey 13

4 Proposed System 15 - 16

4.1 Proposed System 16

5 Hardware Requirement 17 - 18

6 Software Requirement 19 - 36
20
Software
21
Technologies Used
7 System Testing 37- 55

7.1 Unit Testing

38
7.2 Integration Testing
39
7.3 User Acceptance Testing
39

JSPM’s RSCOE Poly

Tathawade 6
8 Diagrams 40 – 45

8.1 Architecture 41-42

8.2Use Case Diagram. 43
8.3 Data Flow Diagram Level 0. 44
8.4 Data Flow Diagram Level 1. 44
8.6 Class Diagram. 45

9 Experimentation 46 – 47

9.1 Test Plan

47
9.2 Test Pass OR Fail Criteria
47
9.3 Test Entry OR Exit Criteria
47
9.4 Testing Type
47

10 Result 48- 54

10.1 Resulted Output

11 Conclusion 55-56

12 Future Scope 57-58

13 Bibliography 59-60

14 Paper Publication 61-64

15 National level Project Competition 65-66

Certificate

JSPM’s RSCOE Poly

Tathawade 7
 CHAPTER 1
SYNOPSIS

SYNOPSIS
1.1 Brief Description :

JSPM’s RSCOE Poly

Tathawade 8
In our Virtual trial room software the user can change his dress virtually using
virtual clothes. The user has to stand in front of the Kinect sensor. The Kinect
scans the human body from the environment using the skeleton tracking
algorithm. The monitor which is connected with the Kinect sensor and the system
processor displays the user and also the list of dresses which can be worn
virtually. Live video streaming of the environment is scanned by the Kinect and
displayed in the monitor. The monitor also displays the list of dresses which can
be worn by the user. The user when selects the dress the dress is selected and it is
worn by the user virtually. The dress is super imposed over the user by scanning
the skeleton joints of the user. The dress fitted moves according to the movement
of the user standing in front of the Kinect sensor

1.2 Aim of the Project:

The main objective of this project is virtual fitting room, is the digital version of
an in-store dressing room, where customers can try on a product virtually to
visualize how it may look on their bodies, and evaluate features such as color,
pattern, and style before purchasing.

1.3 Actual Methodology Followed:

Procedures that we followed during the completion of project are:

1. Firstly, a discussion was held with the group members on the topic IoT Virtual
Mirror
2. The topic was divided into several modules and each and every group member
was assigned one of them.
3. Through research on the “IoT Virtual Mirror” was specified to the group
members which include all the key concepts related to it.
4. All of them get perfectly arranged into the specified format and all the
errors/mistakes committed resolved.
Finally, the copy was submitted to the concerned course coordinator.

JSPM’s RSCOE Poly

Tathawade 9
 CHAPTER 2
INTRODUCTION

JSPM’s RSCOE Poly

Tathawade 10
 INTRODUCTION
Our website is a free and informative. For accessing the website, one must have
the link and visit it. After that, the home page will appear which contains the
basic knowledge of our website. The home page will have the tab pane for the
user to visit other pages such as: About Us, Contact Us, and New Feature.

2.1 Project Plan:

The first activity in Website project planning is the determination of

Website Scope. The second Website planning task is problem
formulation. The scope of the project is limited to the intranet for time
being it is not deployable on any handheld devices

2.2 Project Scope:

 Ask Question.
 The e-commerce web application is developed for the end user of an e-
commerce site to get the right product for the user.
 Manage Solutions (View Solutions)
 Virtual roomView By User Point

JSPM’s RSCOE Poly

Tathawade 11
 CHAPTER 3
LITERATURE
REVIEW

LITERATURE REVIEW

JSPM’s RSCOE Poly

Tathawade 12
3.1 Literature Review

Many of the existing systems have variable perceptions in the area of

Augmented Reality which made possible the implementation of Trial Room
concept virtual. Few such E Commerce sites like Lens-kart, Abo, Snatcher, have
developed applications based on virtual reality. One of those ideas is the Virtual
Trial Room which displays the user in desired attire. But, none of the current
applications provide the three dimensional dynamic imaging. In order to
improve on this area we are proposing a new system called the “3D Virtual
Trial Room” Augmented Reality is direct and indirect view of real world
elements that area augmented on computer software. Augmented Reality
considers real and virtual elements. It mainly adds the software information and
refines the users view to actual environment. This work is an implementation to
develop Virtual trial Room application using AR which allows a user to try on
different colour of clothes. Most of the early applications attempted to do this
by overlying a static image of clothing over an image of the user captured by a
camera or any digital camera. But, like any other idea, the virtual trial room
involved from very basic solutions to more advanced solutions which were
more in sync with actual reality. This is the motivation behind any AR
application. This work presents an image processing design flow for Virtual
Trial Room applications, targeting personal computers.

3.2 Existing Systems:

In journal “Human Friendly Interface Design for Virtual Fitting Room

Applications on Android Based Mobile Devices” is completely gives idea about
the virtual fitting of garments over user. The application targets both mobile and
computers. The proposed implementation is uses three-stage algorithms, they
are- Face detection, Augmented Reality using marker and super imposing of
cloths over the human image. This application can be used in any devices with a
fine camera. In order to obtain the body shape several techniques are being used
they are: 1) Filtering with threshold, canny edge detection, K-means. 2) Motion
detection or skeleton detection wherein multiple frames were analyzed for any
movement

JSPM’s RSCOE Poly

Tathawade 13
 For face detection, Haar algorithm is being used, it uses digital image features
for object recognition Open CV is being added for rectangular features as well
as improvements to make the algorithms faster for hardware implementation.
An augmented reality marker is used to display (superimpose) the cloths over
the users’ image.

The main objective to obtain a real time, platform independent application.

Users are able to select sizes from XS to XL and choose between different
cameras on the device to implement the VFR. In addition, the algorithm can
track and scale the clothing according to user’s position and movement. The
application needs each marker for each garments and the dress only super
impose on the user, it only shows the 2D image. It’s impossible to protect the
markers. Count of markers increases with the count of dress. Storing and using
of large number of marker is difficult.

3.3 Background

3.3.1 Md. Farhan hamid, md. Ashraful alam

"Virtual wardrobe for physically impaired using microsoft kinect sensor"
This paper throws light particularly on physically impaired people who are
partially or completely challenged. For completely impaired people, sensor
senses the head movements for iterating through the clothes and the eyes
movement for selection of apparel[5]But the paper tends to incline more
towards the challenged people rather than normal people leading to noticeable
change in functions adding to which the population too reduces as compared to
normal people.

3.3.2 Ari Kusumaningsih; Arik Kurniawati; Cucun Very Angkoso, Eko

Mulyanto Yuniarno; Mochammad Hariadi,
"User experience measurement on virtual dressing room of Madura Batik
clothes"
The system proposed in paper is used for online trial of Madura Batik clothes
which is the regional wear of Indonesia. It provides virtual reality trial room for
foreign customers to change consumer shopping experience and increase buying

JSPM’s RSCOE Poly

Tathawade 14
desire. The major drawback here could be that the apparels are limited only to
their regional wear and nothing apart from that.

3.3.3 Srinivasan K.,Vivek S.,

"Implementation of virtual fitting room using image processing"
This system uses a fixed webcam for capturing the images of the user. This
image is processed by MATLAB to compute every pixel of the image and check
which apparel suits the best as per user's choice. The drawback for this is that
the system was only used for online shopping platform and not for any other
offline use. Also as there is absence of kinect sensor due to which the actual
measurements with respect to the depth is missing.

JSPM’s RSCOE Poly

Tathawade 15
 CHAPTER 4
PROPOSED SYSTEM

JSPM’s RSCOE Poly

Tathawade 16
 PROPOSED SYSTEM

4.1 Proposed System:

 User can select the product based on the image provided by the user

 User can try and view how he/she look.

 User can order the product by adding to the cart

4.2 Project Modules:

1. Setting up the room for this project we have created an augmented reality
software in which the user can try on virtual clothes. We use the Kinect sensor
to capture the user’s pose tracking and depth sensing. For rendering the clothes
in the user's environment we use the visual studio. For accurate fitting of clothes
on the user, the size estimation technique is done using the Kinect.

2. User Tracking The user stands in front of the Microsoft Kinect sensor. The
Kinect sensor uses RGB color sensing and depth sensing to detect the human
standing in front of the Kinect. The Kinect detects the joints which is visible for
the Kinect and also predicts the join is invisible for the user. The joints and the
skeleton points or mapped by the Kinect using Kinect coordinate mapping. All
the skeleton joints which are detected and predicted by the Kinect is joined to
form the full skeleton structure of the human and the human is detected.

3. Virtual Clothes The virtual clothes which are worn by the user are 3D object
file. This 3D .obj files are generated using skanect software. This skanect
software is used to scan the 3D object from the environment using Kinect. This
3D objects are virtually placed over the user using sizing and fitting algorithm.

JSPM’s RSCOE Poly

Tathawade 17
4. Interactive Cloth The cloth which is fitted over the human body is fitted
using the skeleton joints of the user. The size of the chest is measured by
calculating the difference between the shoulders. And the height is calculated by
the difference between the neck and the hip. The cloth moves according the
movement of the skeleton joints of the user. Skinned Cloth The cloth is exactly
fitted to the user by using skinning.
Each vertex of the skeleton joint is mapped and exactly matched with the points
of the 3d dress. Thus by the exact mapping of each vertex of the skeleton joints
with the points of the 3d dress the dress id perfectly superimpose over the body
of the user.

JSPM’s RSCOE Poly

Tathawade 18
 CHAPTER 5
HARDWARE
REQUIREMENT

JSPM’s RSCOE Poly

Tathawade 19
 HARDWARE REQUIREMENT

5.1 Hardware Requirements

A hardware compatibility is a list of computer hardware (typically including many

types of peripheral devices) that is compatible with a particular operating system or
device management software. In today's world, there is a vast amount of computer
hardware in circulation, and many operating systems too.

All the hardware requirements mentioned below are minimum requirements.

For better experience, higher the system specifications, better the experience.

• Processor - Core 2 DUO and Above

• RAM - Min 1GB
• Hard Disk - Min 30 GB
• LAN Cable - 4 (Depending upon number of machine)

JSPM’s RSCOE Poly

Tathawade 20
CHAPTER 6
SOFTWARE
REQUIREMENT

JSPM’s RSCOE Poly

Tathawade 21
 SOFTWARE REQUIREMENT

6.1 Software Requirements

A software requirement is a description of a software system to be developed. It lays

out functional and non-functional requirements, and may include a set of use cases that
describe user interactions that the software must provide.
 Operating System: Windows or Linux or Any
 Technology: Java 8
 Database: MySQL 5.5
 Eclipse Indigo IDE

Software used: -
Eclipse:

Eclipse is a free open-source integrated development environment that allows users to

create Java-based applications. Eclipse IDE is composed of plug-ins and be customized
using third-party plug-ins. With its extensible plug-in framework, Eclipse can support
other programming languages such as FORTRAN, Haskell, C, C++, JavaScript, Lua,
PHP, Python, R, Ruby, Scala, and more

JSPM’s RSCOE Poly

Tathawade 22
 For any software the software update system is always the key mechanism. For the
eclipse IDE the software update system is very simple as the developer can easily add
the plug-ins that help the developer to develop the advanced version of applications.
 The platform also supports JPA tooling and JSF tooling, web service development
and also supports to edit the XML files. In the platform the server view tab is
available in which application can be deployed in any server as per user requirements.
 The spring developers also uses the same IDE platform as the eclipse also supports
spring-based applications.
 It is used for the modelling purpose as it can be perfect example for the modelling
tool and models can be easily created in the eclipse tool. The EMF technology is used
for creating the models for the projects.
 For any IDE the perspective is also the main feature that need to be focused. There
are several perspectives in the eclipse IDE like JEE perspective, plug in development,
debugging perspective helps to view the modules separately.
 The testing can be done easy using the Eclipse IDE. The debugging process can be
run smoothly for finding the bugs and threats in the application. The testing job can
be run to find the threats so that application can be developed smoothly.
 The plug-ins are available for the Eclipse IDE and user can find the plug-ins in the
Eclipse marketplace. The different type of plug-ins like static analysis, checking of
code style, checking of version of system are all available in the Eclipse Marketplace.

Technologies used:
1. PYTHON
 OpenCV:
OpenCV (Open Source Computer Vision Library) is a library of programming functions
mainly for real-time computer vision.Originally developed by Intel, it was later
supported by Willow Garage, then Itseez (which was later acquired by Intel). The library
is cross-platform and licensed as free and open-source software under Apache License 2.
Starting in 2011, OpenCV features GPU acceleration for real-time operations.

 Flask:
Flask is a micro web framework written in Python. It is classified as a microframework
because it does not require particular tools or libraries.[2] It has no database abstraction
layer, form validation, or any other components where pre-existing third-party libraries
provide common functions. However, Flask supports extensions that can add application
features as if they were implemented in Flask itself. Extensions exist for object-relational
mappers, form validation, upload handling, various open authentication technologies and
several common framework related tools.

JSPM’s RSCOE Poly

Tathawade 23
 OS Module:
Python OS module provides the facility to establish the interaction between the user and
the operating system. It offers many useful OS functions that are used to perform OS-
based tasks and get related information about operating system.
The OS comes under Python's standard utility modules
 Tkinter:
Tkinter is the standard GUI library for Python. Python when combined with Tkinter
provides a fast and easy way to create GUI applications. Tkinter provides a powerful
object-oriented interface to the Tk GUI toolkit.
 PIL:
Python Imaging Library (expansion of PIL) is the de facto image processing package for
Python language. It incorporates lightweight image processing tools that aids in editing,
creating and saving images. Support for Python Imaging Library got discontinued in
2011, but a project named pillow forked the original PIL project and added Python3.x
support to it. Pillow was announced as a replacement for PIL for future usage. Pillow
supports a large number of image file formats including BMP, PNG, JPEG, and TIFF.
The library encourages adding support for newer formats in the library by creating new
file decoders.

 Threading:
Python threading allows you to have different parts of your program run concurrently
and can simplify your design. If you’ve got some experience in Python and want to
speed up your program using threads.

 Dlib:
Dlib is one of the most powerful and easy-to-go open-source library consisting of
machine learning library/algorithms and various tools for creating software. It was
initially released in 2002. It has been used widely in many big industries, companies and
for various big projects, etc. It also has many more types of algorithms that have a
greater role in the real world.
Dlib is mostly used for face recognition purposes. They analyzed the object/face using
the functions called HOG (Histogram of oriented gradients) and CNN (Convolutional
Neural Networks). Face recognition nowadays are been used widely in many
applications.

JSPM’s RSCOE Poly

Tathawade 24
2. HTML
• It’s stands for Hyper Text Markup Language.
• HTML is used to define structure of Web Page.
• HTML is used for Creating the Web Pages.
• HTML is not a case sensitive language.
• HTML is a tag-based language.
HTML Tags:
1) <a> Tag
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes Example:
<a href="https://www.w3schools.com">Visit page</a>
2) <body> Tag
The <body> tag defines a body of html document.
Example:
<body>This is body of html document</body>
3) <button> Tag
The <button> tag defines a button.
Example:
<button>Click it</button>

4) <div> Tag
The <div> tag defines a Division section.
Example:
<div>this is div tag</div>

5) <footer> Tag
The <footer> tag defines a footer of the page behave like section div.
Example:
<footer>This is a footer of the page </footer>

JSPM’s RSCOE Poly

Tathawade 25
6) <form> Tag
The <form> tag defines a form that is used for getting some data from user using their
input fields.
Example: <form>
<input type="text">

<input type="text">
<input type="submit">
</form>

7) <head> Tag
The <head> tag used to set the a resources that requires for the web page. It can
contains external and internal resources as well Example:
<head><title>Home | welcome</title ></head>

8) <header> Tag
The <header> tag defines a header of the html document , it behave like div or section.
Example:
<header>this is header tag</header>

9) <html> Tag
The <html> tag defines a hole document as html and it can contains a lot of tags and
scripts.
Example:
<html>
<head><title>Home | welcome</title ></head>
<body>This is body of html document</body>
</html>

JSPM’s RSCOE Poly

Tathawade 26
10) <li> Tag
The <li> tag defines a list element.
Example:
<li>this is the first element of the list</li>

11) <p> Tag

The <p> tag defines a paragraph and it can contain a lot of text.
Example:
<p>Visit W3Schools</p>

12) <script> Tag

The <script> tag tell the browser this is a script section and it contains scripts for the
page.
Example:
<script type="javascript/text"> document.console.log(“hello world!!”);
</script>

13) <section> Tag

The <section> tag defines a section of the page, it behave like div tag.
Example: <section>This is a section</section >

14)<select> Tag
The <select> tag defines a dropdown list it can contains multiple options.
Example:
<select><option>this is option-1 </option></select>

15) <span> Tag

The <span> tag used to highlight something in the text or paragraph and it also behave
like div.
Example:

JSPM’s RSCOE Poly

Tathawade 27
<p> my name is <span> sandip</span></p>
16) <table> Tag
The <table> tag defines a table structure it can contains multiple columns and rows.
Example:
<table>
<tr>
<td> defines a table structure</td>
<td> defines a table structure</td>
</tr>
</table>

17) <tr> Tag

The <a> tag defines a table row.
Example:
<table>
<tr>
<td> defines a table structure</td>
<td> defines a table structure</td>
</tr>
</table>

18)<td> Tag
The <td> tag defines a table row data, we can say that column data.
Example:
<table>
<tr>
<td> defines a table structure</td>
<td> defines a table structure</td>
</tr>
</table>

JSPM’s RSCOE Poly

Tathawade 28
19) <ul> Tag
The <ul> tag defines a list.
Example:
<ul>
<li>this is the first element of the list</li>
</ul>

20) <video> Tag

The <video> tag can run the video source file such as mp4, webpeg, hd Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> Your
browser does not support the video tag.
</video>

21) <h2> Tag

The <h2> tag defines the small heading of the page it font size 28px.
Example:
<h2>Visit W3Schools</h2>

22)<label> Tag
The <label> tag defines a label for the input tag.
Example:
<label for="name">Name</a><input type="text">

23) <input> Tag

The <input> tag defines used to take input data from end users.
Example:
<input type="text">

JSPM’s RSCOE Poly

Tathawade 29
24) <link> Tag
The <link> tag defines a link external and internal resource files like css js or
other framework.
Example:
<link rel="stylesheet" href="css/style.css">

25) <meta> Tag

The <meta> tag defines a the brain of the page and it contains charset, language,
favicon or much more in that we can add in it.
Example:
<meta charset="utf-8 ">Visit W3Schools</a>

26) <option> Tag

The <option> tag defines a options item for select , this is dropdown list items.
Example:
<select><option>this is option-1 </option></select>

27) <textarea> Tag

The <textarea> tag used to get input data from end user and it act like input tag,
have columns and rows
Example: <textarea cols="15" rows="15" ></textarea>

28) <th> Tag

The <th> tag defines a table row data heading.
Example:
<table>
<tr>
<th> name</td>
<th> roll no</td>
</tr>
</table>

JSPM’s RSCOE Poly

Tathawade 30
29) <title > Tag
The <a> tag defines a tab title of the document. Example:
<head><title>Home | welcome</title ></head>
2. Cascading style sheets (CSS):
 CSS stands for Cascading Style Sheets.
 CSS is used for designing web Pages.
 CSS makes web page more attractive.
 CSS code can be used multiple times.

CSS properties/attributes:
1) color: ;
The color property is used to set the color of the text.
Example: color: blue;

2) width: ;
The width property is used to set the width of the element.
Example: width: 100px;

3) height: ;
The height property is used to set the height of the element.
Example: height: 100px;

4) margin: ;
The margin property is used to set the margin of the element.
Example:
margin: 10px 10px 10px 10px;

5) align-content: ;
The align-content property is used to set alignment of the text.
Example: align-content: Centre;

JSPM’s RSCOE Poly

Tathawade 31
6) align-items: ;
The align-items property is used to set alignment of the child elements.
Example:
align-items: Centre;

7) animation: ;
The animation property is used to set the animation name, duration, type and speed of the
text.
Example: animation: fadeout 2s 2s ease-in;

8) appearance: ;

The appearance property is used to apply platform-specific styling to an element that

doesn’t have it by default, to remove platform-specific styling to an element that does
have it by default

Example:
appearance: none;

9) backface-visibility: ;
The backface-visibility property defines whether or not the back face of an element
should be visible when facing the user.
Example: backface-visibility: hidden;

10) background: ;
The background property is used to set the backgrounds as image or color of the element.
Example: background: blue;

11) background-blend-mode: ;
The background-blend-mode property is used to blending mode of each background
layer (color and/or image).
Example: background-blend-mode: lighten;

JSPM’s RSCOE Poly

Tathawade 32
12) background-clip: ;
The background-clip property defines how far the background (color or image) should
extend within an element.
Example:
background-clip: padding-box;

13) background-color: ;
The color property is used to set the color of the text.
Example: color: blue;

14) background-image: ;
The background property is used to set the background image of the element. Example:
background-image: url(/https/www.scribd.com/images/deo.png);

15) background-position: ;
The background property is used to set the background position of image of elements.
Example:
background: 100px 50px;

16)background-repeat: ;
The background property is used to set the background image repetition or stop the
repetition of element. Example:
background-repeat: no-repeat;

17)background-size: ;
The background-size property is used to set the background image size of the element.
Example:
background-size: 100% 100%;

JSPM’s RSCOE Poly

Tathawade 33
18)border: ;
The border property is used to set the border of the element.
Example:
border: 1px solid blue;

19) border-bottom: ;
The color property is used to set the color of the text.
Example: color: blue;

20)border-collapse: ;
The border-collapse property sets whether table borders should collapse into a single
border or be separated as in standard HTML.
Example:
border-collapse: collapse;

21) border-radius: ;
The border-radius property is used to set the border-radius of the elements.
Example:
border-radius: 5px;

22) bottom: ;
The bottom property affects the vertical position of a positioned element.
This property has no effect on non-positioned elements.
Example:
bottom: 100px;

23) box-shadow: ;
The box-shadow property is used to set the shadow of the element.
box-shadow: 1px 2px 4px green;

JSPM’s RSCOE Poly

Tathawade 34
24) clear: ;
The clear property specifies on which sides of an element floating elements are not
allowed to float.
Example:
clear: left;

25)cursor: ;
The cursor property specifies the mouse cursor to be displayed when pointing over an
element.
Example:
cursor: pointer;

26) display: ;
The display property specifies the display behavior (the type of rendering box) of an
element.
Example: display: none;

27) flex-direction: ;
The flex-direction property specifies the direction of the flexible items Example:
flex-direction: row-reverse;

28)flex-wrap: ;
The flex-wrap property specifies whether the flexible items should wrap or not.
Example:
flex-wrap: wrap;

29) float: ;
The float property specifies how an element should float.
Example:
float: right;

JSPM’s RSCOE Poly

Tathawade 35
30) font-family: ;
The font-family property specifies the font for an element.
Example:
font-family: arial, sans-serif;

31) font-size: ;
The font-size property sets the size of a font.
Example:
font-size: 12px;

32) font-stretch: ;
The font-stretch property allows you to make text narrower (condensed) or wider
(expanded).
Example:
font-stretch: expanded;

33) font-style: ;
The font-style property specifies the font style for a text.
Example:
font-style: italic;

34) font-weight: ;
The font-weight property sets how thick or thin characters in text should be displayed
font-weight: 100;
35) gap: ;
The gap property defines the size of the gap between the rows and columns.
Example: gap: 10px;

36) grid-template-columns: ;
The grid-template-columns property specifies the number (and the widths) of columns in
a grid layout.

JSPM’s RSCOE Poly

Tathawade 36
Example:
grid-template-columns: auto auto;

37)grid-template-rows: ;
The grid-template-rows property specifies the number (and the heights) of the rows in a
grid layout.
Example: grid-template-rows: auto auto;

38) justify-content: ;
The justify-content property is used to set the element to horizontal alignment.
Example:
justify-content: Centre;

39) left: ;
The left property affects the horizontal position of a positioned element.
This property has no effect on non-positioned elements Example:
left: 100px;

40) letter-spacing: ;
The letter-spacing property is used to set the spacing between letter that present in the
text.
Example:
letter-spacing: 5px;

41) line-height: ;
The line-height property is used to set the height of the sentence.
Example: line-height: 40px;
42) list-style: ;
The list-style property is used to set the style for the list.

JSPM’s RSCOE Poly

Tathawade 37
Example:
list-style: bullet;

43) max-height: ;
The max-height property defines the maximum height of an element..
Example:
max-height: 100px;

44) max-width: ;
The max-width property defines the maximum width of an element.
Example:
max-width: 100px;

45) -moz-appearance: ;
The appearance property is used to apply platform-specific styling to an element that
doesn’t have it by default, to remove platform-specific styling to an element that does
have it by default with mozila support moz-appearance: none;

46) -moz-border-radius: ;
The border-radius property is used to set the border-radius of the elements with mozila
support.
Example:
moz-border-radius: 45px;

47) -ms-transform: ;
The -ms-transform property applies a 2D or 3D transformation to an element. This
property allows you to rotate, scale, move, skew, etc., elements. Example:
ms-transform: translateX(50px);

JSPM’s RSCOE Poly

Tathawade 38
48) -o-border-radius: ;
The -o-border-radius property is used to set the border-radius of the elements with opera
support.
Example:
o-border-radius: 5px;

49)-o-transform: ;
The -o-transform property applies a 2D or 3D transformation to an element. This property
allows you to rotate, scale, move, skew, etc., elements with opera browser support.
Example:
o-transform: blue;

50)-o-transition: ;
The -o-transition property the transition effect is for elements with opera supports.
Example:
o-transition: 1s;
51) outline:
The outline property is used to set the outline to elements.
Example: outline: none;

52) overflow:
The overflow property is used to set the handle elements overflow.
Example:
overflow: hidden;

53) overflow-x:
The overflow-x property is used to set the handle the horizontal overflow of the
elements.
Example:
overflow-x: hidden;

JSPM’s RSCOE Poly

Tathawade 39
51. 54)padding:
The padding property is used to an element's padding is the space between its
content and its border.
Example:padding: 1px;

JSPM’s RSCOE Poly

Tathawade 40
 CHAPTER 7
SYSTEM TESTING

JSPM’s RSCOE Poly

Tathawade 41
 SYSTEM TESTING

7.1 System Testing:

System testing is the stage of implementation, which is aimed at ensuring that the
system works accurately and efficiently before live operation commences.
Testing is the process of executing the program with the intent of finding errors
and missing operations and also a complete verification to determine whether the
objectives are met and the user requirements are satisfied. The ultimate aim is
quality assurance. Tests are carried out and the results are compared with the
expected document. In the case of erroneous results, debugging is done. Using
detailed testing strategies, a test plan is carried out on each module.

7.2 Unit Testing:

The Software units in a system are modules and routines that are assembled and
integrated to perform a specific function. Unit testing focuses first on modules,
independently of one another, to locate errors. This enables, to detect errors in
coding and logic that are contained within each module. This testing includes
entering data and ascertaining if the value matches to the type and size supported
by java. The various controls are tested to ensure that each performs its action as
required.

JSPM’s RSCOE Poly

Tathawade 42
7.3 Integration Testing:

Data can be lost across any interface, one module can have an adverse effect
on another, sub functions when combined, may not produce the desired
major functions. Integration testing is a systematic testing to discover errors
associated within the interface. The objective is to take unit tested modules
and build a program structure. All the modules are combined and tested as a
whole. Here the Server module and Client module options are integrated and
tested. This testing provides the assurance that the application is well
integrated functional unit with smooth transition of data.

7.4 User Acceptance Testing:

User acceptance of a system is the key factor for the success of any system.
The system under consideration is tested for the user acceptance by
constantly keeping in touch with the system users at time of developing and
making changes whenever required.

JSPM’s RSCOE Poly

Tathawade 43
CHAPTER 8
DIAGRAMS

JSPM’s RSCOE Poly

Tathawade 44
 DIAGRAMS

8.1 ARCHITECTURE:
The Architecture Diagram consists of many components like the user interface, a
login-screen, an in-app store, the database, etc. To manage these components,
architecture diagram is made, so that we can logically define the relationships and
manner of interactions between all of these components for a Web application.

The Architecture Diagram showing how everything fits together

The following diagram shows, Web application architecture diagram. It is

basically divided into two parts:
1. Front-end
2. Back-end

JSPM’s RSCOE Poly

Tathawade 45
 FRAME/IMAGE
LAPTOP/COMPUTER WEB CAM

PIXEL
FORMAT
CONVERSION

HSV
DATABASE CONVERSION

BLURRING THRESHODING
PRODUCT IMAGES

TRACKER
IMAGES MAPPING Image/frames
CONVERTED substraction,blob
FRAME detection,calculation of
gesture,translation,scali
ng matrices
RENDER GRAPHICS

GUI DISPLAY ON SCREEN

Fig 8.1: Architecture Diagram

JSPM’s RSCOE Poly

Tathawade 46
8.2 Use Case Diagram:

A use case diagram is a dynamic or behaviour diagram in UML. Use case

diagrams model the functionality of a system using actors and use cases. Use
cases are a set of actions, services, and functions that the system needs to perform.
In this context, a "system" is something being developed or operated, such as a
web site. The "actors" are people or entities operating under defined roles within
the system

Fig 8.2:. Use Case Diagram.

JSPM’s RSCOE Poly

Tathawade 47
8.3 UML DESIGN

DFD 0

Fig 8.3.1 DFD 0

DFD 1

Fig 8.3.2 DFD 1

JSPM’s RSCOE Poly

Tathawade 48
8.4 Class Diagram:

A class diagram in the Unified Modelling Language is a type of static structure

Diagram that describes the structure of a system by showing the system's classes, their
attributes, operations, and the relationships among objects.

The standard class diagram is composed of three sections:

Upper section: Contains the name of the class. This section is always required,
Whether you are talking about the classifier or an object.
Middle section: Contains the attributes of the class. Use this section to describe
the qualities of the class. This is only required when describing a specific instance
of a class.
Bottom section: Includes class operations (methods). Displayed in list format, each operation
takes up its own line. The operations describe how a class interacts with data.

Fig 8.4.1: Class Diagram

JSPM’s RSCOE
Poly Tathawade
49
 CHAPTER 9
EXPERIMENTATION

JSPM’s RSCOE
Poly Tathawade
50
 EXPERIMENTATION
9.1 Test Plan:
Testing is a set of tasks that are preplanned and conducted systematically, which
assures working of individual modules as desired or planned. Software testing is one
of the key elements in software projects that are often referred to as verification and
validation.

9.2 Test Pass OR Fail Criteria:

When actual and expected results are same then test will be passed. When actual and
expected results are different then test will be failed.

9.3 Test Entry OR Exit Criteria:

Describe the entry and exit criteria used to start testing and determine when to stop
testing.

Entry Criteria
As soon as have requirement we can start testing.

Exit Criteria
When bug rate falls below certain level, we can stop testing.

9.4 Testing Type:

1. Functional Testing
2. Black Box Testing
3. White Box Testing
4. GUI Testing
5. Integration Testing.

JSPM’s RSCOE
Poly Tathawade
51
 Test Case:

Test Case Test Case Expected Result Actual Result Status

ID

TC_01 Verify that the Website will not Website is not open Pass
website will not open.
open with no
internet.

TC_02 Verify that the Cloth will added to Cloth is added to the Pass
cloth is added to the cart. cart.
the cart

TC_03 Verify that the Home page will Home is open properly. Pass
home page is open properly
open properly.

TC_04 Verify that Try & The camera The camera window is Pass
Checkout button window will open open.
is working Automatically.
properly

TC_05 Verify that the Cloth images Images are shown Pass
images of cloth should be shown correctly
are displayed correctly
correctly

TC_06 Verify the After clicking Shop The shop page is open. Pass
working of Show now the shop page
Now button will open.

CHAPTER 8
RESULT
JSPM’s RSCOE
Poly Tathawade
52
 RESULT

Home Page:

Fig. 10.1

Fig. 10.2

JSPM’s 53
RSCOE Poly Tathawade
Shop Page:

Fig. 10.3

Fig.10.4

JSPM’s 54
RSCOE Poly Tathawade
Fig.10.5

Fig.10.6

JSPM’s 55
RSCOE Poly Tathawade
 Fig. 10.7

New Feature

Fig.10.8

Contact page
JSPM’s 56
RSCOE Poly Tathawade
 Fig 10.9

About page

Fig 10.10

Try & Checkout

JSPM’s 57
RSCOE Poly Tathawade
Fig. 10.11

Fig. 10.12

JSPM’s 58
RSCOE Poly Tathawade
CHAPTER 11
CONCLUSION

CONCLUSION
JSPM’s 59
RSCOE Poly Tathawade
 With the help of this system, the e commerce platform can successfully increase the
sales and also improve customer experience.

 It will give customers a better choice of options which are based on their own
personal adjustments, like tailor-made shopping experience

 .The system can work for any type of platform which requires an individualistic-
approach to the user experience.

JSPM’s 60
RSCOE Poly Tathawade
 CHAPTER 12
FUTURE SCOPE

FUTURE SCOPE

 We can develop an android app for our project.

 Payment feature can also be added

 Tracking live orders can be added.

JSPM’s 61
RSCOE Poly Tathawade
JSPM’s 62
RSCOE Poly Tathawade
 CHAPTER 13
REFERENCES

REFERENCES

[1] Yashwant Kanduri, Sanugula Durga Prasad, “A modular Approach for Cloth
Modelling in Virtual Fitting Room”, 2016 11th International Conference on
Industrial and Information systems(ICIIS)
[2] Anagaha Ramesh, Ankit Raj Kushal, Brinda D, Vaishnavi S, Purohit
Shrinivasacharya, “3D Virtual Trial Room”, Volume 6/Issue 13, International
Journal of Engineering Research & Technology(IJERT)
[3] Vinaya Kulkarni, Sailee Morde, Bhairavi Pawar, Supriya Mahadik, Rutuja
Dahore, “2D Virtual Trial Room Using Augmented Reality”, Volume 4/ Issue 1,

JSPM’s 63
RSCOE Poly Tathawade
International Journal on Future Revolution in Computer Science and Communication
Engineering.
[4] Shreya Kamani, Neel vasa, Kriti Shrivastava, “Virtual Trial Room Using
Augmented Reality”, Volume 3, Number 6, International Journal of Advanced
Computer Technology (IJACT)
[5] Md. Farhan Hamid, Md. Ashraful Alam, "Virtual wardrobe for physically
impaired using Microsoft Kinect Sensor",2017 IEEE 2nd International Conference
on signal and image processing
[6] [online] https://en.wikipedia.org/wiki/Kinect [7] [online]
https://en.wikipedia.org/wiki/OpenCV [8] Ari Kusumaningsih; Arik Kurniawati;
Cucun Very Angkoso, Eko Mulyanto Yuniarno; Mochammad

JSPM’s 64
RSCOE Poly Tathawade
 CHAPTER 14
PAPER PUBLICATION

JSPM’s 65
RSCOE Poly Tathawade
JSPM’s 66
RSCOE Poly Tathawade
JSPM’s 67
RSCOE Poly Tathawade
JSPM’s 68
RSCOE Poly Tathawade
JSPM’s 69
RSCOE Poly Tathawade
Certificate:

JSPM’s 70
RSCOE Poly Tathawade
SHODH 2023 National Level Project Competition

JSPM’s 71
RSCOE Poly Tathawade
JSPM’s 72
RSCOE Poly Tathawade