**Development of an Interactive Virtual Campus Tour using Panoramic Video**
Aznoora Osman1\*, Nur Izlin Iskak2, Nadia Abdul Wahab3, Norfiza Ibrahim4
1,2,3,4 Faculty of Computer and Mathematical Sciences, UiTM Perlis Branch, Perlis, Malaysia
Corresponding author: \*aznoora@uitm.edu.my
Received Date: \*date
Accepted Date: \*date
ABSTRACT
*Difficulty in finding the destination around a campus is a common problem faced by students, staffs and visitors of a university. Outdated signboards, confusing building architecture and layout, and bad weathers are just some of the hindrance to find location for people who are unfamiliar with the campus area. To solve the problem, virtual campus tour is chosen because it can also be embedded into a university website, or use as a stand-alone app. The virtual campus tour which can be accessed as mobile app or web app, can help users in visualizing their journey around campus because it was developed using collections of panoramic video footage, which allows user to watch in 360-degree view of selected campus area. Administrative building, academic blocks and residential college are some of the destinations included in the tour. Due to the need to create and test components of the product iteratively, Agile method was employed as the development methodology. Agile supports high integration between development and testing phase. This paper discusses few related works of virtual tour, and the development process of the virtual campus tour, which were encapsulated in the four phases of Agile methodology, requirement phase, design phase, development phase and test and feedback phase.*
*Keywords: virtual tour, campus tour, panoramic video*
# INTRODUCTION
A virtual tour is the reproduction of actual location with the help of consecutive still images. It can help in renewing a realistic presentation of reality (Bakre, Deshmukh, Sapaliga, & Doulatramani, 2017). The use of virtual tour began in 1994 and has ever since spreaded throughout the world in line with the circulation of time and advanced technology. A virtual tour may use multimedia elements such as sound effects, music, narration, and text (Virtual Tour, 2019). Tourist attraction places, universities, and schools are some of the suitable areas for virtual tour.
Panorama is a wide-angle image or represents of physical space whether in painting, drawing, photography or three-dimensional model. Panoramic tours exploded onto the college market since 1999. Panoramic tours are a good complement to the traditional walking tour and give visitors the capability to immerse themselves in a college scene. Some panoramic tours offer an accompanying campus map, and others include narration.
To ease a walking tour inside the university campus area, a virtual tour is used in colleges and universities. Potential students can just use the virtual tour platform to look around the campus and its environment. It has advantages in term of accessibility that user can access it either in mobile phone or personal computer. For campus users, it can save time from traveling around the campus just to find their intended destinations. Examples of a university that have already implemented virtual tour are INTI College and Taylor's University in Malaysia, Johns Hopkins University in Maryland and many more. Nevertheless, most of the virtual campus tours used panoramic images as a basis to present the panoramic views, rather than panoramic videos.
Earlier, Namsong (2009) asserted the idea of campus virtual tour, that include videos consisting of an arrangement of images and audio, could provide numerous benefits for demonstration and instructional functions. This is because the student or user tends to better remember information acquired from videos rather than through reading or listening. Additionally, virtual campus tour could enhance user experience and user appreciation towards the natural surroundings of a university campus (Wook, Zairon, Idris, Zin, Judi, and Jailani, 2018). Besides that, virtual campus tour allow the university students, lecturers and staffs, as well as visitors to discover the facilities provided inside a building.
With the advent of technology, having a virtual campus tour that can be accessed via mobile app or website would notably ease students, staff and visitors in finding their way around. Normally, new student’s face difficulty in reaching their destinations around the campus area. They need to ask people nearby or find by themselves. Additionally, visitors also might be lost while finding their way around a university campus area. Unpredictable weather can be one of the problems when they are not familiar with the university campus area. If it starts raining, they won't be able to find the way easily. An outdated signboard around university campus also causes problem for them to search the building they want to go to.
Therefore this paper discusses the design and development of a panoramic video for a virtual campus tour that could enhance the experience of exploring the campus area in the absence of physical presence in the university.
**RELATED WORKS**
A virtual campus tour is a digital tour of a specific location that includes 2D panoramic images and a series of video images or hyperlinked imagery. Hotspots are used to attach these panoramas to one another (Koyuncu & Kocabasoglu, 2008). The concept of the virtual tour is located under a virtual space cyberspace and larger cyberspace. Time, distance and commitment are the reason why not everyone can visit each college destinations (Bakre et al., 2017). The virtual campus tour has become a phenomenon today, where user can access it via their mobile phone or personal computer. Many colleges and universities have begun implementing virtual campus tour method, whether for students, staff of university or visitors.
**Campus Virtual Tour Design To Enhance Visitor Experience and Interaction in a Natural Environment**
Campus virtual tour is an approach to control construction in the university campus environment and to improve the visibility and presence of user experience and deliver a message to discipline staff, students and visitors (Wook et al., 2018). To reach a large scope of campus residents, campus virtual tour can be achieved formally, informally and in an informal capacity. The design of campus virtual tours that include a combination of images and videos can give some benefits to student and visitor where they will remember information more in video rather than information in text format. In the research, the first approach for virtual campus tour utilises an online map that shows a specific location to the users. Its second approach provides information-rich content via a webpage. For third approach, it uses the interactive map with video, audio, pictures. Aims of this study are to investigate an effective interaction design to create a campus virtual tour web application to allow users to experience being in the natural environment, where visitors can interactively select tour path and view on what they prefer. Compared to the traditional approaches that only use still images and videos, this way is more interesting. It allows the user to feel as if he or she is actually in the real surrounding, thus boosting the virtual tour’s effectiveness and usability.
**Campus Virtual Tour**
Not everyone has an opportunity to visit each and every college campus environment due to some problems such as time, distance, work commitments or financial problems. Lately, many universities and colleges are able to offer a virtual visit via the virtual campus tour. In this article, they focus on the development and implementation of the virtual tour at Vidyalankar Institutes of Technology by using a photo stitching technique. The aim of this project is to make sure the user can view the universities or colleges from any place accessible with a proper internet connection. For a better experience, user can view from several materials such as videos, text and still images in interactive web content (Bakre et al., 2017).
**METHODOLOGY**
Agile software processes is an iterative and incremental based development, where requirements are tailored according to customer demands (Sharma, Sarkar, & Gupta, 2012). It helps in adaptive planning, iterative development and time boxing. It is a theoretical framework that support foreseen interactions throughout the development cycle. The testing establish at the start of the project and there is growing integration between testing and development. Achieve a high product quality is the objective of agile development and testing in creating a software. Agile model uses least documentation, which could help to save time of development and deliver the project in least possible time. Figure 1 shows the Agile Model.
**Requirement Phase**
Requirement phase focuses on creating the plan for implementing the project. The target users were identified first, so that it would be easier to select participants as representative user. Once the users were identified, a preliminary investigation (PI) was conducted to identify the problems related to finding destinations around university campus.
In carrying out the PI, an online survey was administered using Google form, and its link was shared via the Whatsapp messaging service. This was deemed as just a brief phase to confirm the existence of the inherent problems in finding ways around campus, therefore the link was shared for three days only. A total of 23 respondents answered the survey where 14 of them were university students and nine of them were visitors of university. There were six open ended questions that include the user to list how they search for a destination inside the campus area and the problems they faced.
It was discovered that most respondents experienced similar issues when finding destinations around campus, such as having to ask for direction from passersby repeatedly, navigating around confusing building layouts, reading outdated signage, and for some, finding no signboard at all to identify a particular location. Bad weather such as heavy rain also was reported as the difficulty when trying to find buildings.
Based on these findings, the possible solutions were defined. For functional requirements, a virtual campus tour that is based off panoramic videos were selected as the technology to be used because it offers dynamic 360 degree experience while watching it, as compared to traditional photo-stitching based virtual tour. Furthermore, it should represent popular destinations in the campus, by providing textual description and video tour on how to access it from the main gate of the campus.
In terms of hardware requirement, a laptop with Microsoft Windows 64-bit Operating System was used to create and edit the assets such as static pictures, and collections of panoramic video footage, as well as to combine every asset into one app. The laptop consists of Intel® Core™ i5-3230M CPU @ 2.60GHz and 8.00 GM random-access memory (RAM).
When it comes to collecting assets for panoramic video, the Xiaomi Mi Sphere Camera Kit 360 Degree was used to make the recording and to capture images surrounding selected university area. Administrative building, academic blocks and residential college were the prime area for the tour.This camera specification are 7K panoramic photo with up to 23.88 effective megapixels, 3.5K ultra-high definition panoramic video with nearly 360 degree recording. The camera two lenses will automatically calibrate and adjust the image and colours to ensure the video recording is smooth. This camera is perfect for indoor, outdoor, travel, business, journalism, film and other uses. For this project, one of the researchers rode a motorcycle as a passenger, held the camera using one hand and the motorcyclist drove around campus at low speed.
**Design Phase**
The design phase involves designing the sitemap, creating the storyboard and building user interface design. It was important to design the sitemap so that the navigational flow of the tour app could be defined in a systematic approach. It was decided that the tour should employ a two-tier navigation only, therefore, in the sitemap design, the virtual campus tour were categorised into three main menus which were academic, administration and college.
Under each menu, only one-tier submenus were defined, for example, under Academic, all academic related building names were listed such as classroom buildings, selected laboratory and sports complex. For Administration menu, the corresponding destinations were buildings of academic affairs, student affairs, administration, grand hall, university clinic and library. For college menu, it was divided into two types called Siswa and Siswi, with each representing male and female residentials. Beside that, map of the campus and help menu were also included in the sitemap later, after heuristic evaluation phase, based on recommendation by the evalulator. Figure 2 depicts the sitemap.
Preparation of storyboard in design phase is useful to ease the development process because it helps in assigning the correct images and videos for each screen. Developer can illustrates the flow of direction on how to find the destination around university campus. The purpose of this storyboard is to visualize the venues where the video and image would be captured.
Balsamiq software was used to design user interfaces for the virtual tour, while Eclipse was used to develop the interface of the tour. Advantages of using Eclipse is it is free and open source, and this software can be used to develop applications in other languages such as C++, Ruby, HTML5, and PHP. Then, royalty-free background music for the video were added.
**System Development Phase**
This section discusses the development phase of the virtual campus tour web app. The development phase is the process of authoring and producing materials. MAGIX Video Pro X was used to assemble the assets into one smooth web app. It was chosen because it offers professional video editing capability at a typical user level program.
Figure 3 and Figure 4 show the interface of virtual campus tour system. Every page inside the system will show the video and information about the respective location. Each buildings are labeled and user can rotate the video in 360 degree.
**Test and Feedback Phase**
In test phase, a heuristic evaluation was done with experts to evaluate the features and functionality of the system, in which they can check the system whether it is perfectly functioning based on requirement and design specifications. This evaluation is important to ensure that the system works effectively and smoothly. Components involved in this evaluation was navigation to go from certain building to another, video quality and load time, and smooth display of image on homepage. Five experts participated in evaluating the system. The experts were university lecturers that have 10 to 25 years of professional experience in the computer science field.
**FINDINGS AND DISCUSSION**
**The criteria set in the evaluation were much related to system usability such as visibility of system status, match between system and real world, user control and freedom, consistency and standard, help users recognize, diagnose and recover from errors, error prevention, recognition rather than recall, flexibility and minimalist design, aesthetic and minimalist design and lastly help and documentation. Each criteria can be rated using a scale of Strongly Disagree (1) to Strongly Agree (5). All criterias received mean score of above 4, which indicated that generally, the app received good evaluation.**
**From the heuristic evaluation, experts raised concerns and recommended their solutions to improve the app before it can be tested further with representative users. Among the improvements made were adding 2D map into the homepage interface so that users could refer to it to visualize the exact locations of buildings and areas covered in the campus. This is especially useful if they are lost and need to locate their path. Next, Help menu was also added to provide short and concise on-site assistance should the user feel confused when using an unfamiliar system for the first time. Help consists of tips on how to use the app effectively. Additionally, from design perspective, an expert commented about the use of serif font which is Times New Roman in the informative page containing description of a particular destination, which the expert considered as unsuitable. Therefore it was changed into sans serif font which is Arial.**
**Besides that, another comment was about the size of textual label in the video. Figure 5 shows the size of font in the video before it was changed to smaller size so that the text can be easily read by the user, as shown in Figure 6.**
**CONCLUSION**
The Virtual Campus Tour is a web app that helps university students, university staffs and visitors to discover desired destinations in the campus. The tour not only aid users via a 2D map, it also enhances the user experience in the exploring destinations in the campus via 360 degree panoramic video and images. A heuristic evaluation with five experts helped in upgrading some design features of the tour before having another set of test, user acceptance test with the user representatives in the next iteration. In conclusion, the objectives of this research have been achieved where the system has been successfully designed and developed according to predefined requirements.
**REFERENCES**
Bakre, N., Deshmukh, A., Sapaliga, P., & Doulatramani, Y. (2017). Campus Virtual Tour. International Journal of Advanced Research in Computer Engineering & Technology (IJARCET), 6(4), 5.
Cho, Y., & Fesenmaier, D. R. (2001). A new paradigm for tourism and electronic commerce: Experience marketing using the virtual tour. Tourism distribution channels: practices, issues and transformation, 351-370.
Koyuncu, B., & Kocabasoglu, P. N. (2008). Virtual campus. WSEAS International Conference. Proceedings. Mathematics and Computers in Science and Engineering. World Scientific and Engineering Academy and Society, Ankara, Turkey
Kurtuluş, A. (2013). The effects of web-based interactive virtual tours on the development of prospective mathematics teachers' spatial skills. Computers & Education, 63, 141-150.
Namsong, S. (2009). Virtual Campus Tour. In 14th Annual Technology, Colleges, and Community Worldwide Online Conference, Honolulu, USA.
Sharma, S., Sarkar, D., & Gupta, D. (2012). Agile Processes and Methodologies: A Conceptual Study. International Journal on Computer Science and Engineering, 4.
Wook, T.S., Zairon, I.Y., Idris, M., Zin, N.A., Judi, H.M., & Jailani, N. (2018). Campus Virtual Tour Design to Enhance Visitor Experience and Interaction in a Natural Environment. The International Journal of Multimedia & Its Applications, 10, 77-92. https://doi.org/10.5121/ijma.2018.10307.