Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
4.2.1 HOME:
This the screen which is seen by the user when he opens our project website.
P a g e | 7
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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.
P a g e | 18
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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.
P a g e | 21
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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.
Worked on capturing (x, y) coordinates of the spots placed.
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.
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.
Worked on capturing (x, y) coordinates of the spots placed.
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.
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
9. UML DIAGRAMS
9.1 USE-CASE DIAGRAM:
P a g e | 24
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
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
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
Part 3 – Behavioral Functionality of “Preview of Panoramic Images”.
Part 4 – Behavioral Functionality of “Placing spots”.
P a g e | 26
Spring 2017 | CSCI 6838-01 Online Virtual Tour Creator | Team#1
Part 5 – Behavioral Functionality of “Creating connections”.
Part 6 – Behavioral Functionality of “Creating JSON tour.