A Project Report:

“IoT Virtual Mirror”

SUBMITTED TO MSBTE, MUMBAI

IN PARTIAL FULFILLMENT OF THIRD YEAR

DIPLOMA
IN
COMPUTER ENGINEERING

By:

1. Shravani Sandip Girhe

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. Shravani Sandip Girhe 2016200120

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.

Shravani Sandip Girhe

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

JSPM’s RSCOE Poly Tathawade 8

 SYNOPSIS
1.1 Brief Description :
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

JSPM’s RSCOE Poly Tathawade 12

 LITERATURE REVIEW
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:
<p> my name is <span> sandip</span></p>

JSPM’s RSCOE Poly Tathawade 27

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;

JSPM’s RSCOE Poly Tathawade 36

36) grid-template-columns: ;
The grid-template-columns property specifies the number (and the widths) of columns in a
grid layout.
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.

JSPM’s RSCOE Poly Tathawade 37

Example: line-height: 40px;
42) list-style: ;
The list-style property is used to set the style for the list.
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;

JSPM’s RSCOE Poly Tathawade 38

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);

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;

JSPM’s RSCOE Poly Tathawade 39

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

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 open properly
properly.

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

TC_05 Verify that the Cloth images should Images are shown Pass
images of cloth be shown correctly correctly
are displayed
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.

JSPM’s RSCOE Poly Tathawade 52

CHAPTER 8
RESULT

JSPM’s RSCOE Poly Tathawade 53

 RESULT
Home Page:

Fig. 10.1

Fig. 10.2

JSPM’s RSCOE Poly Tathawade 54

Shop Page:

Fig. 10.3

Fig.10.4

JSPM’s RSCOE Poly Tathawade 55

Fig.10.5

Fig.10.6

JSPM’s RSCOE Poly Tathawade 56

 Fig. 10.7

New Feature

Fig.10.8

JSPM’s RSCOE Poly Tathawade 57

Contact page

Fig 10.9

About page

Fig 10.10

JSPM’s RSCOE Poly Tathawade 58

Try & Checkout

Fig. 10.11

Fig. 10.12

JSPM’s RSCOE Poly Tathawade 59

CHAPTER 11
CONCLUSION

JSPM’s RSCOE Poly Tathawade 60

 CONCLUSION

 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 RSCOE Poly Tathawade 61

 CHAPTER 12
FUTURE SCOPE

JSPM’s RSCOE Poly Tathawade 62

 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 RSCOE Poly Tathawade 63

 CHAPTER 13
REFERENCES

JSPM’s RSCOE Poly Tathawade 64

 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, 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 RSCOE Poly Tathawade 65

 CHAPTER 14
PAPER PUBLICATION

JSPM’s RSCOE Poly Tathawade 66

JSPM’s RSCOE Poly Tathawade 67
JSPM’s RSCOE Poly Tathawade 68
JSPM’s RSCOE Poly Tathawade 69
JSPM’s RSCOE Poly Tathawade 70
JSPM’s RSCOE Poly Tathawade 71
Certificate:

JSPM’s RSCOE Poly Tathawade 72

SHODH 2023 National Level Project Competition

JSPM’s RSCOE Poly Tathawade 73