ONLINE VIRTUAL TOUR CREATOR - University of Houston ...dcm.uhcl.edu/caps17g1/images/final.pdf ·...

P a g e | 1

Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1

ONLINE VIRTUAL TOUR CREATOR

SCHOOL OF SCIENCE AND COMPUTER ENGINEERING

CSCI 6838

TEAM 1 – SPRING 2017

INSTRUCTOR DR. SADEGH DAVARI

MENTOR MR. CLAUS NILSSON

SUBMITTED BY:

SUPRIYA HUBLI

SOWMYA KONGARA

NAGA NANDITA SANVELLY

MANISHA REDDY VEERANNAGARI

P a g e | 2


Acknowledgements

Our group would like to acknowledge and express appreciation to the

people who help make this project possible:

Dr. Sadegh Davari For guiding us throughout the project and providing his valuable inputs

each time and extending his support to our project.

Mentor - Claus Nilsson For explaining to us the requirements of the projects, introducing us

to new technologies, helping us at each phase of the project, guiding

us with the development ideas and for being available at all times

through emails.

P a g e | 3


ABSTRACT

Virtual tours can be found on the web in many different scenarios: touring a campus,

documenting a trip and so on. These tours provide information using images, movies, and sound

to provide users with navigation in such a way that the users feel they are experiencing the

information in real time.

The main aim of this project is to create a browser-based application called “Virtual Tour

Creator”, where we allow the users to dynamically upload a set of panoramic images which

will be used to create a virtual tour. User will be able to use drag and drop images onto the work

space or browse new images from any device to upload images. A panoramic view of the

uploaded images lets user place spots anywhere on each panoramic image and specify

connections between images i.e. which spot navigates to which image. A JSON properties file

is generated which indicates the coordinates of the spots placed by the user, image to which

each spot navigates and the default view point for each image.

This project helps save unfinished work, resume when the user wishes to and exports

finished tours to the Virtual Tour viewer. User authentication and authorization is done using

the features of ASP.NET and MVC5 controls.

Keywords: ASP.NET, MVC5, SQL Database, File Systems, Panoramic Images, JSON

P a g e | 4


TABLE OF CONTENTS

1. Introduction 1.1 Problem Statement...............................................................................................4

1.2 Scope ...................................................................................................................4

2. Requirements

2.1 Software Requirements………………………………………………………....5

2.2 Hardware Requirements…………………………………………………….......5

3. Design ……………………………………………………................................................6

4. Implementation………………………………………………………………………….7

5. User Document……………………………………….………………………………...17

6. Future Enhancements ……………………………………………………………...….18

7. References........................................................................................................................19

8. Appendices 7.1 Project Plan…………………………………………………………………….20

7.2 Technologies Used……………………………………………………………..22

7.3 Challenges……………………………………………………………………...25

9. UML Diagrams

8.1 Use Case Diagram...…………………………………………............................28

8.2 Sequence Diagram….…………………………………………..........................29

P a g e | 4


1. INTRODUCTION

1.1 PROBLEM STATEMENT:

Earlier, Virtual Tour Creator was a desktop application which lets the user create a virtual tour

by importing panoramic images, arranging them into a desired tour and then exporting said tour

to a format understood by Virtual Tour Viewer.

Our aim is to create a browser-based application and automate the generation of JSON tour file.

To achieve this goal, we have implemented a drag and drop feature, where the user can drag

and drop the images onto the work space from a list of thumbnail images displayed in the project

area. The thumbnails are displayed for better user accessibility and understanding. User can

place spots anywhere on the panoramic view of images and mention connections between

images by mentioning which spot navigates to which image.

1.2 SCOPE:

The main aim of this project is to create a browser-based application called “Virtual Tour

Creator”. Modules of this project includes displaying thumbnails of images, drag and drop of

images, placing spots anywhere on the panoramic view of images, specify connections between

images, JSON file generation and future enhancements.

2. SOFTWARE / HARDWARE REQUIREMENTS

2.1 SOFTWARE REQUIREMENTS:

User should be able to Login.

User should be able to create a virtual tour.

User should be able to upload images by browsing their devices.

User should be able to drag and drop predefined images or images that have already

been uploaded into a project from the project area to the work space.

User should be able to delete and change the order of images from a new/resumed

project.

User should be able to see a panoramic view of images uploaded.

User should be able to place spots anywhere in the panoramic view of images.

User should be able to place as many spots as they wish to in one image.

User should be able to create connections between images by specifying which spot

navigates to which image.

Default direction at which the user will look at on entering a new image.

User should be able to see a list of projects along with the project names, so they can

choose the project they want to resume work on.

P a g e | 5


3. DESIGN

Online Virtual Tour Creator is a browser-based application which generates the

automated JSON text file as output and it is taken as an input by Online Virtual Tour Viewer

team to display the panoramic virtual tour.

In our application, user interacts with home screen, where user can register and login.

Once the user gets logged in, user is provided with the menu of options for creating a tour,

previewing their tour and resuming tour. If users want to create a tour, they should import the

images and provide the connection among these images. Users can also resume their work by

choosing Resume Tour. At the end, a JSON tour file is generated.

4. IMPLEMENTATION

4.1 INTRODUCTION:

It is a browser-based application in which the User Interface allows the user to map the

relationships between the property images.

4.2 FLOW CHART:

We have a navigation bar with Home, Menu, Contact, Register and Login options. Below are

the descriptions and screen shots of our pages created.

P a g e | 6


4.2.1 HOME:

This the screen which is seen by the user when he opens our project website.

P a g e | 7


4.2.2 REGISTER:

User should enter registration details if he is new to the application.

4.2.3 LOGIN:

Once the users are registered, they could login by providing their details.

P a g e | 8


4.2.4 MENU:

Once the user is logged in, user can have access to Menu page which is a drop-down list of

Create Tour and List Project pages.

P a g e | 9


4.2.5 CREATE TOUR:

The project area consists of a list of thumbnail images. The work space consists of the title and

description of the tour being created. Drag and drop can be used to drag images from the project

area onto the work space. Browsing new images from their devices onto the work space is also

possible. By clicking the preview tour button, the preview page will be displayed.

The screen after dropping the images on the main grid is shown below.

P a g e | 10


4.2.6 PREVIEW PAGE:

In this page, user can view the selected images, change the order of images and can create tour

preview.

P a g e | 11


4.2.7 CHANGING ORDER:

The user is also provided with another functionality, where he can alter the images by entering

the order of the numbers in which he wanted to display.

P a g e | 12


4.2.8 CREATE TOUR PREVIEW:

By selecting create tour preview button, panoramic view of uploaded images is displayed. User

can place spots anywhere on the panoramic view of each image. Create connections between

images, by specifying which spot navigates to which image. User can set the target view point

which specifies the default location at which user wants to look at when entering the new image.

P a g e | 13


4.2.9 LIST PROJECT

Here, a list of saved projects is displayed. User can resume work on any saved project by

clicking on the project name they wish to resume. JSON files generated for each project can be

downloaded here.

P a g e | 14


4.2.10 RESUME PROJECT:

By clicking the Resume Project link in the List Project page, the user will be redirected to the

Create Tour page from where he will be able to add, change order or create new connections to

the tour.

P a g e | 15


4.2.11 CONTACT US:

Here, the user can contact us for any queries, provide reviews which would help us improve

our website further.

P a g e | 16


4.2.12 JSON FILE:

Clicking the “Create Tour” button on the preview page auto generates a JSON Tour file. This

file indicates general properties of uploaded images. The coordinates at which the spots were

placed, connections which are the image numbers that each spot navigates to and the default

direction at which user can view each image.

4.2.13 SAMPLE JSON FILE:

A snippet of the JSON Tour file structure is attached below:

P a g e | 17


5. USER DOCUMENT

User must first login by providing their login credentials. On login, a message pops up

saying ‘Hello followed by the user name’. This shows that the user has successfully

logged in.

Now after this user can access “MENU” which has a drop drown list containing create

tour, list project.

On clicking the create tour button, it navigates to the create tour page where there the

user should provide a title, description of the tour and then upload images using drag

and drop or by browsing new images from their devices.

The order of images can be changed by just changing the numbers assigned, on clicking

change order, list of newly ordered images will be displayed.

User can click on preview tour to view a panoramic view of the uploaded images.

List of project page displays a list of saved projects, user can resume work on any of

their saved projects by clicking resume work.

A link to the JSON files generated for each project are also listed. User can download

the corresponding JSON file by clicking on the links respectively.

6. FUTURE ENHANCEMENTS

• Place spots directly on the 360-degree view of panoramic images.

• Making it more dynamic.

• There is scope for creating virtual tours under water.

7. REFERENCES

• [1] http://www.webopedia.com/TERM/V/virtual_tour.html

• [2] "WPF in CSharp" .Retrieved from :

http://www.emgu.com/wiki/index.php/WPF_in_CSharp

• [3] Dragomir Anguelov, Carole Dulong, Daniel Filip, Christian Frueh, Stéphane

Lafon, Richard Lyon,Abhijit Ogale, Luc Vincent, and Josh Weaver,”Google street

view: Capturing the world at street level”, Google,Retrieved on 10/8/2016

• [5] Eun-Young (Elaine) Kang and Ilmi Yoon,”Smooth Scene Transition for Virtual

Tour on the World Wide Web”, IEEE ICCIMA’05, Retrieved on 10/8/2016

• [6] Dan Zhang, Rui Zheng* and GuoSheng Yang, “Image Clusters Based 3D Virtual

Tour Schema”,Retrieved on 10/8/2016.

http://www.webopedia.com/TERM/V/virtual_tour.html

https://research.google.com/pubs/pub36899.html



P a g e | 18


8. APPENDICES

8.1 PROJECT PLAN:

We have chosen AGILE methodology to work with for this project. Since, Agile

software development is based on an incremental, iterative approach. It is open to changing

requirements over time and customers are heard, due to which we found it to be better and more

suitable for our project than Scrum and CMMI methodologies.

As per Agile, we have divided/scheduled the entire projects into 4 iterations based on

user requirements.

We had been given a deadline for each iteration to be completed and as we would

complete one iteration we could move to the next one in case the user/customer is satisfied with

what we have come up with. Otherwise, we had to work on the corrections or new features to

be added.

This phase involved the completion of technical project report along with other

documentations. Also, testing of this application was carried out during this phase. Visual

Studio Team Services was updated with test cases and details about every user

stories/epics/features were filled.

Below is scheduled plan for our project:

1. Iteration 1

In Iteration 1, we gathered requirements from the customer/user to know what they

want from this project and to understand what this project is all about.

We tried to figure out the technologies and tools to be used in this project.

We got familiar with Online Visual Studio Team Services, where we had to clone our

work into and update all the work progress through stories and their status.

2. Iteration 2

We created a website for the user to create an online virtual tour.

In this website, the user will be able to login and start working on a project.

User can upload images onto the work space by browsing their devices.

User can also upload images using the drag and drop feature, where predefined images

present in the project area can be dragged and dropped on to the work space.

Deleting the unwanted images that have been imported before is also an introduced

feature.

P a g e | 19


3. Iteration 3

User can save the work on to the database.

User can also resume work on to the database.

User can resume work on the projects that are saved before.

User can fetch a list of saved projects with their corresponding names, which makes it

easy for the user to identify which project to resume work on.

4. Iteration 4

A panoramic preview of images uploaded by the user can be seen.

User can place spots anywhere on the panoramic view of each image.

User can make connections between images by specifying which spot navigates to

which image.

Generation of JSON file, which captures the coordinates at which spots where placed

by user, image to which each spot navigates to and the default direction at which user

can view each image on entering the tour.

8.2 TECHNOLOGIES USED:

1. VISUAL STUDIO TEAM SERVICES:

It’s an all-in-one tool to track Software Development process. The Software Development

process involves idea/thought/imagination, design, plan, code, test and deploy. It provides

the following features:

Project management - It provides different methodology like Agile, CMMI and Scrum.

Easy Version Control - It offers 2 repositories, Git which is a distributed repository and

Team Service Foundation server which is a central repository.

Multiple programming languages & IDE support - It supports multiple programming

languages like Java, C#, various IDE’s could work with VSTS like Visual Studio,

Eclipse, IntelliJ and Android Studio, and is capable to work on various application

platforms like Linux, Mac, Windows, Android and iOS.

Easy Team Collaboration - It is easy and fast to share code, get review of other team

mates, provides interface to communicate as well.

Test and Build - It lets the team create test cases and run them online.

Transparency - As everyone uses Team Services, it’s easy to get information at one

place.

P a g e | 20


2. JSON:

JSON which is JavaScript Object Notation is a lightweight data-interchange format.

It is easy for humans to read and write.

JSON is text, and we can convert any JavaScript object into JSON, and send JSON to

the server.

JSON data can be stored in arrays.

In our project, we will be writing an algorithm that generates a JSON properties file,

which will describe the coordinates at which images navigate from image to another.

3. GIT (Workflow):

Create a branch for the changes you plan to make and give it a name.

Commit changes to your branch. People often have multiple commits for a bug fix or

feature.

Push your branch to the remote repository.

Create a pull request so other people can review your changes. To incorporate

feedback, you might need to make more commits and push more changes.

Complete your pull request and resolve any merge conflicts from changes other

people made after you created your branch.

4. ASP.NET MVC:

ASP.NET MVC framework is a lightweight, highly testable presentation framework

that is integrated with existing ASP.NET features. It allows software developers to

build a web application as a composition of three roles:

MODEL: A model represents the state of a particular aspect of the

application.

CONTROLLER: A controller handles interactions and updates the model to

reflect a change in state of the application, and then passes information to the

view.

VIEW: A view accepts necessary information from the controller and renders

a user interface to display that information.

5. MICROSOFT AZURE SQL DATABASE:

Microsoft Azure SQL Database (formerly SQL Azure, SQL Server Data Services, SQL

Services, and Windows Azure SQL Database) is a managed cloud database for app

developers that makes building and maintaining applications easier and more productive.

It includes built-in intelligence that learns app patterns and adapts to maximize

performance, reliability, and data protection.

https://en.wikipedia.org/wiki/Web_application

P a g e | 21


8.3 CHALLENGES:

We have faced many issues during the project, both technically (coding) and while getting used

to tools like Visual Studio Online Team Services and Microsoft Azure.

A few of them have been listed below:

Learning how to implement the dragging and dropping of images on to the work space

in ASP.NET.

Figuring how to place spots on the panoramic preview of each image using ASP.NET,

as it involves x and y coordinates to be captured.

We have faced problems while creating branches on Online Visual Studio Team

Services, cloning and committing the code.

Getting to know JSON and how it works, so we could generate a JSON properties file

which indicates x and y coordinates of the point at which the spot was placed and to

how many images is the initial image navigating to. Which direction of the image does

the user face on entering a new image.

On being introduced to Microsoft Azure we initially had problems when we tried to

publish our website onto Azure.

We also had to fix bugs in the web.config file which occurred when we tried to connect

our local database to the Azure database.

8.4 PROJECT MANAGEMENT:

To make working on this project easier, we divided work among all the team members from

requirement analysis to design.

Distribution of some major roles among our team members have been listed below:

1. Supriya Hubli (Team Lead):

Managed the Team and Project.

Assigned tasks to team members, updated Visual Studio Team Services on a regular

basis.

Storing of images uploaded on to a file system and then saving it on to the SQL

Database.

Created a sample for navigating one image to another.

Worked on resuming work on a saved project from the database.

Working on placing spots anywhere on to the panoramic view of images.

Worked on capturing (x, y) coordinates of the spots placed.

P a g e | 22


Worked on providing connections between images i.e. which image does each spot

navigate to. Default view direction on entering each image in the tour.

Worked on figuring the JSON file format needed to capture the details of the tour.

Documented the Minutes of Meeting for every meeting with the mentor.

2. Sowmya Kongara (Team Member):

Gathered required requirements from the customer to know what the user wants from

project and to understand what this project is all about.

Worked on “Drag and Drop” implementation for drag and drop of images from the

project area on to the work space

Displaying thumbnail images for better user accessibility.

Adding of new images on to the resumed project in resuming tour page.

Worked on the development of User Interface for Development Phase.





3. Naga Nandita Sanvelly (Team Member):

Figured out the technologies and tools to be used in this project.

Designed the Sequence diagram and Class diagram for the application.

Worked on cloning our code into Online Visual Studio team Services.

Created an ASP.NET website which features the Home, Login, Register, Menu and

Contact Us pages.

Deleting of unwanted images from the project and saving work done by user on to the

database.

Worked on changing the order of images in the preview tour page.





4. Manisha Reddy Veerannagari (Team Member):

Designed initial test cases for the application on the Visual Studio team services.

Uploading of new images by the user, fetching predefined.

Fetching a list of projects which have been saved on to the database so that the user

could choose a project and resume work on it.

Improved the performance of the “Online Virtual Tour Creator”.

Generated a JSON tour file in the file system for every project created and then

import/store the file on to a table in SQL database.

P a g e | 23


9. UML DIAGRAMS

9.1 USE-CASE DIAGRAM:

P a g e | 24


9.2 SEQUENCE DIAGRAM:

It is divided into 6 parts:

Part 1 - Behavioral functionality of “User Authentication”, “Display of Menu”.

Part 2 – Behavioral Functionality of “ Fetching of Images”, ”Drag and Drop”.

P a g e | 25


Part 3 – Behavioral Functionality of “Preview of Panoramic Images”.

Part 4 – Behavioral Functionality of “Placing spots”.

P a g e | 26


Part 5 – Behavioral Functionality of “Creating connections”.

Part 6 – Behavioral Functionality of “Creating JSON tour.

ONLINE VIRTUAL TOUR CREATOR - University of Houston ...dcm.uhcl.edu/caps17g1/images/final.pdf ·...

Documents

Transcript of ONLINE VIRTUAL TOUR CREATOR - University of Houston ...dcm.uhcl.edu/caps17g1/images/final.pdf ·...