ONLINE VIRTUAL TOUR CREATOR

Size: px

Start display at page:

Download "ONLINE VIRTUAL TOUR CREATOR"

Adrian Boone
5 years ago
Views:

1 P a g e 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

2 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 s.

3 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

4 P a g e 4 TABLE OF CONTENTS 1. Introduction 1.1 Problem Statement Scope Requirements 2.1 Software Requirements Hardware Requirements Design Implementation.7 5. User Document Future Enhancements References Appendices 7.1 Project Plan Technologies Used Challenges UML Diagrams 8.1 Use Case Diagram Sequence Diagram....29

5 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.

6 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.1 INTRODUCTION: 4. IMPLEMENTATION 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.

7 P a g e HOME: This the screen which is seen by the user when he opens our project website.

8 P a g e REGISTER: User should enter registration details if he is new to the application LOGIN: Once the users are registered, they could login by providing their details.

9 P a g e 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.

10 P a g e 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.

11 P a g e PREVIEW PAGE: In this page, user can view the selected images, change the order of images and can create tour preview.

12 P a g e 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.

13 P a g e 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.

14 P a g e 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.

15 P a g e 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.

16 P a g e CONTACT US: Here, the user can contact us for any queries, provide reviews which would help us improve our website further.

17 P a g e 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 SAMPLE JSON FILE: A snippet of the JSON Tour file structure is attached below:

18 P a g e 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] [2] "WPF in CSharp".Retrieved from : [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.

19 P a g e 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.

20 P a g e 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.

21 P a g e 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.

22 P a g e 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.

23 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. 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.

24 P a g e UML DIAGRAMS 9.1 USE-CASE DIAGRAM:

25 P a g e 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.

26 P a g e 25 Part 3 Behavioral Functionality of Preview of Panoramic Images. Part 4 Behavioral Functionality of Placing spots.

27 P a g e 26 Part 5 Behavioral Functionality of Creating connections. Part 6 Behavioral Functionality of Creating JSON tour.

Index. Chaminda Chandrasekara 2017 C. Chandrasekara, Beginning Build and Release Management with TFS 2017 and VSTS, DOI /

Index. Chaminda Chandrasekara 2017 C. Chandrasekara, Beginning Build and Release Management with TFS 2017 and VSTS, DOI / Index A Agent platforms, 10 system and user capabilities, 10 Agent pool add user, 12 assign permissions, 55 56 default pool, 8 hosted Linux pool, 8 hosted pool, 7 set up assign administrator role, 45 auto-provision