A Photo Tour of Tangeman University Center by

UC 3D: A Photo Tour of
Tangeman University Center
by
Joshua Metzelaar
Submitted to
the Faculty of the Information Engineering Technology Program
in Partial Fulfillment of the Requirements
for
the Degree of Bachelor of Science
in Information Engineering Technology
University of Cincinnati
College of Applied Science
June 2011
i
UC 3D: A Photo Tour of
Tangeman University Center
by
Joshua Metzelaar
Submitted to
the Faculty of the Information Engineering Technology Program
in Partial Fulfillment of the Requirements
for
the Degree of Bachelor of Science
in Information Engineering Technology
© Copyright 2011 Joshua Metzelaar
The authors grant to the Information Engineering Technology Program permission to
reproduce and distribute copies of this document in whole or in part.
______________________________________________
______________________
Joshua Metzelaar
Date
______________________________________________
______________________
Russell McMahon, Faculty Advisor
Date
ii
Table of Contents
Section
Page
Table of Contents ............................................................................................................... iii
List of Figures .................................................................................................................... iv
Abstract ............................................................................................................................... v
1.
Statement of the Problem ............................................................................................ 1
2.
Description of the Solution .......................................................................................... 2
2.1.
User Profiles ......................................................................................................... 2
2.1.1.
Exploration Interface .................................................................................... 2
2.1.2.
Administrator Interface ................................................................................. 3
2.1.3.
User Privileges Outline ................................................................................. 3
3.
Design Protocols .......................................................................................................... 4
4.
Deliverables ................................................................................................................. 4
5.
Proof of Design ............................................................................................................ 5
6.
7.
5.1.
Exploration Interface. ........................................................................................... 6
5.2.
Searchable Room Index ....................................................................................... 7
5.3.
Administration Index............................................................................................ 8
5.4.
Editing/Addition Interface.................................................................................... 8
Testing Procedures ...................................................................................................... 9
6.1.
Testing Scenario 1: Accessing the Virtual Tour .................................................. 9
6.2.
Testing Scenario 2: Navigating in the Virtual Tour ............................................. 9
6.3.
Testing Scenario 3: Access the Administration Interface .................................... 9
6.4.
Testing Scenario 4: Adding a Room .................................................................. 10
6.5.
Testing Scenario 4: Editing a Room .................................................................. 10
Conclusion ................................................................................................................. 10
Appendix A: Timeline ...................................................................................................... 11
Appendix B: Budget ......................................................................................................... 12
Appendix C: Software....................................................................................................... 12
Appendix D: Hardware ..................................................................................................... 12
Appendix E: Code Snippets .............................................................................................. 13
C 1. Rendering the View ............................................................................................... 13
C 2. Administration Index ............................................................................................. 19
Appendix F: Use Case Diagram ....................................................................................... 27
Appendix G: Database Diagram ....................................................................................... 28
iii
List of Figures
Figure Number
Figure 1: On-line navigation interface
Figure 2: Searchable room index
Figure 3: Administration index
Figure 4: Editing/addition interface
Figure 5: Timeline, Winter-Spring 2011
Figure 6: Budget
Figure 7: Use case diagram
Figure 8: Database diagram
Page
6
7
8
9
11
12
27
28
iv
Abstract
Attracting new students is often a constant challenge for any university. In many
cases, there can be too much information or too little information. At the moment, the
virtual tour the University of Cincinnati currently has implemented involves a few
videos, text information, and a couple of photo galleries. The end result of this is an
incomplete picture of the University of Cincinnati campus, where information is, in some
cases too fast paced, and in others sparse. My project works to propose a new virtual tour
system that can address those issues, and is scalable and easily adjustable. I created the
UC3D virtual tour system to allow students, new and old, as well as guests to the campus
to take walk around campus without actually setting foot there. Corridors, rooms, and the
campus will be extensively photographed to allow someone to visit and explore the
campus at their own pace, and to learn about the campus as he/she does.
v
1. Statement of the Problem
Universities constantly face the challenge of attracting prospective students who live
far away from campus. The cost of travel of travel is a consideration that prevents
students from visiting universities of interest. Without a method to experience the
campus, the prospective student might decide to choose a closer college that he/she can
visit.
Currently, the only methods for prospective students to remotely get a feel of the
University of Cincinnati campus is via the maps, photos, and video tours on-line. At the
moment, the available material is not thorough, sometimes fast paced, and do not provide
the experience of the actually visiting the campus.
The videos on the UC virtual tour page only give prospective students a quick run
through different locations on campus. They do not show the entirety of the buildings.
You are not walked down all of the hallways, or shown all of floors. There might also be
information in those videos that is not completely up to date. The photographs, likewise,
do not tell a complete story.
The videos are often only one minute long, so they only give a short paragraph about
the location before ending. You cannot stop the tour at any point and decide to look
around, the video does not allow you any choices on what and where you are shown.
There is little substitute for actually visiting the campus. When visiting the campus
you have the opportunity to explore and view whatever parts of campus he/she desires.
Still, even when on a guided tour, the tour guide currently takes you on an almost
completely preset path, not really giving you the freedom to explore at your own leisure.
1
2. Description of the Solution
My solution to this problem is a Web based application that would allow users to,
starting at any location on campus, virtually walk through campus and learn about
campus in the process. It will include a friendly interface for users as well as an easy to
update back end for administrators.
In each area the user explores, there would full view pictures taken at strategic
locations. Depending on what the administrator decides for the specific area, these
pictures may only show a limited number of angles, or a full panoramic view of the
location. Within each location, the administrator can implement HTML content to
provide detailed information about a location, as well as videos and other such content.
The system is designed to be easy enough to update when needed.
The navigation is designed to be simple and easy to use, allowing the user to rotate
their view as he/she wishes, and travel in the direction that he/she decides. Within each
location, the user can decide their path, walking down hallways, up and down stairs,
using the elevator, or even examining labs and classrooms.
Allowing the user to backtrack and examine areas as much as he/she wants to. It
allows the users to get a feel of actually walking through campus. The information
included by content boxes simulates a tour guide to a degree.
2.1.User Profiles
Users can be split into primarily two types, explorers, and administrators.
2.1.1. Exploration Interface
2
Everyone who accesses the webpage would have access to the exploration interface.
It is designed to allow the users to walk from room to room, as well as allow users to
search for a room in the room index.
2.1.2. Administrator Interface
Only administrators have access to the administrator interface. It is password
protected and allows the administrator to add new rooms as well as edit existing rooms.
2.1.3. User Privileges Outline
• Administrators
o Administrator Interface
 Room Database
• Edit Rooms
o Modify HTML Content
o Modify Directional Navigation
o Modify Picture
o Modify Administrative Notes
 Add Rooms
 Drop Rooms
• Explorers
o Exploration Interface
 Navigate
3
3. Design Protocols
Adobe Dreamweaver was used for the HTML and PHP coding of the interface and
administration tools. Dreamweaver is a powerful ‘what you see is what you get’ Web
development program. I chose Dreamweaver specifically for its built in database
communication tools, which allowed for automatic generation of code needed to connect
to the MySQL database.
PHP is a scripting language designed to build dynamic Web pages. I chose PHP for
this project for the following reasons: the Web server, on which the site was being
programmed, used PHP, the UC Web Site uses PHP in many places, and PHP was a
language I had experience in.
MySQL is a relational database management system that can run on a server and
provide access to multiple users. I chose MySQL for the project due to its ease of use,
functionality with PHP, and pre-integration with the Web server. As see in Figure 8:
Database Diagram, there are two tables, one for the ‘Scene’, another for Users. It was
initially planned to have more tables, but as the project progressed, it proved more
efficient to condense it into one.
4. Deliverables
UC 3D: A Virtual Photo Tour of Campus
1. On-line Navigation Interface using PHP
a.
‘Click to navigate’ interface that includes Buttons and ‘doors’ that would
allow someone to rotate their view and travel between ‘rooms.’
b. A searchable room index.
4
2. By end of development, an explorable photo tour of Tangeman University Center.
3. A Room Management Interface
5. Proof of Design
This section shows in detail how deliverables of the project were fulfilled and what
challenges we encountered.
5
5.1.Exploration Interface.
As one can see in Figure 4, the entire exploration interface is based off of
photographs taken throughout campus, rendered into a table by PHP. It can readily be
implemented into the current UC Magazine Web Site. The arrows on the top of the
picture rotate the view and allow the user to ‘walk forward’ to the next view. The
challenge encountered in this section was verifying if there was a destination view for the
arrows to link to, and if there was not, to show an alternate navigation symbol.
Figure 1: On-line navigation interface
6
5.2.Searchable Room Index
As shown in Figure 5, a user can enter the Search interface by clicking the Search
link. Once within the search interface, a user specifies a keyword for the system to look
up, and the system would return any result containing the input. It is also possible to pass
a value from a URL directly into the search engine, allowing the search engine result to
be hyperlinked to a specific room.
Figure 2: Searchable room index
7
5.3.Administration Index
A simple to navigate administration index was one of the first things designed. It
provides ready access to many of the functions the administrator would need.
Figure 3: Administration index
5.4.Editing/Addition Interface
The interface for adding a room and editing a room is virtually identical, with the
primary exception with a rending of the room displayed when in the Editing Interface.
8
Figure 4: Edit/addition interface
6. Testing Procedures
6.1.Testing Scenario 1: Accessing the Virtual Tour
The user travels to the webpage containing the UC3D tour application, and should be
shown the ‘start ‘of the tour. The user sees a photo of the starting location as well as
buttons for navigation.
6.2.Testing Scenario 2: Navigating in the Virtual Tour
When a user clicks on a navigation button, the program queries the database, and the
user should be shown a new image and buttons based on the result of the query.
6.3.Testing Scenario 3: Access the Administration Interface
9
The administrator should be able to access the interface via a password-protected log
in screen. Once logged in he/she should be shown a database of rooms, along with
options to Insert Rooms and Edit Rooms.
6.4.Testing Scenario 4: Adding a Room
When the administrator accesses the Insert Room tool in the administration interface,
he/she should be brought to a new blank room.
Within this interface would be options to insert views into a room, insert navigation
buttons onto a view, and connect navigation buttons to other views. Once committed,
providing the administrator connects another room to it, users should immediately be able
to access it.
6.5.Testing Scenario 4: Editing a Room
When the administrator clicks an edit icon on a room in the administration index
he/she is brought to the edit interface for that room. The administrator can then modify
the room data and then commit changes. After committing changes, the administrator
immediately sees the effects of the change on the edit interface,
7. Conclusion
This project was made in response to the University of Cincinnati’s current virtual
tour system in order to make it more efficient to use. I constructed a visually appealing
navigation interface for normal users, and a simple to use administration interface for
anyone who would need to update the system. The project fulfilled all Design Freeze
deliverables and testing was done in order to ensure it was usable without errors.
10
Appendix A: Timeline
Figure 5: Timeline, Winter-Spring 2011
11
Appendix B: Budget
Product
Price
Canon PowerShot S200 2MP Digital ELPH Camera w/ 2x Optical Zoom
Yearly Godaddy Linux Web Hosting with MySQL Server
$ 35.99
48.00
142.00
Dreamweaver CS5
Total
$225.99
Figure 6: Budget
Appendix C: Software
The software used for the project was the following:
•
Adobe Dreamweaver CS5
•
MySQL Workbench
o A free MySQL database management tool.
•
Picasa
o For remote hosting of the images
Appendix D: Hardware
The hardware used for this project was a Cannon Digital Camera and a personal
computer.
12
Appendix E: Code Snippets
C 1. Rendering the View
In order to get a data to show from a specific room, an ID would be pulled from an URL
and be used to render the room.
//Gets the viewID from the URL, if not specified, sends the user to view 1.
if (isset($_GET['viewID'])) {
$colname_Scenes = $_GET['viewID'];
}
else
{
$colname_Scenes = 1;
}
//Selects the view where the URL value matches the primary key.
mysql_select_db($database_UC3D, $UC3D);
$query_Scenes = sprintf("SELECT * FROM Scene WHERE idView = %s",
GetSQLValueString($colname_Scenes, "int"));
$Scenes = mysql_query($query_Scenes, $UC3D) or die(mysql_error());
$row_Scenes = mysql_fetch_assoc($Scenes);
$totalRows_Scenes = mysql_num_rows($Scenes);
?>
<a href="search.php">Search</a>
<!-- Begin the View Rendering -->
<table border=0 align='center' cellpadding=0 cellspacing=0 id="ViewTable"
style='background-image: url(<?php echo $row_Scenes['imageURL']; ?>);'
class="SceneTable">
<tr height='75' valign='center'>
<td width='75' align="left" valign="top" id='RotateLeft'>
13
<?php
//If the arrow is set to show, check to see if a destination is
specified.
if ($row_Scenes['showRotateLeft'])
{
if ($row_Scenes['rotateLeftID'])
{
//If the room arrow is set to show and the room is
specified, make a link to the room
echo "<a href='view.php?viewID=";
echo $row_Scenes['rotateLeftID'];
echo "'><img border='0' src='img/RotateLeft.png'/></a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "<img border='0' src='img/X.png'//>";
}
}
else
{
echo " &nbsp;";
}
?></td>
<td align="center" valign="top" id='Up'>
<?php
//If the arrow is set to show, check to see if a destination is
specified.
if ($row_Scenes['showUp'])
{
14
if ($row_Scenes['upID'])
{
//If the room arrow is set to show and the room is
specified, make a link to the room
echo "<a href='view.php?viewID=";
echo $row_Scenes['upID'];
echo "'><img border='0' src='img/Up.png'/></a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "<img border='0' src='img/X.png'//>";
}
}
else
{
echo " &nbsp;";
}
?></td>
<td width='75' align="right" valign="top" id='RotateRight'>
<?php
//If the arrow is set to show, check to see if a destination is
specified.
if ($row_Scenes['showRotateRight'])
{
if ($row_Scenes['rotateRightID'])
{
//If the room arrow is set to show and the room is
specified, make a link to the room
echo "<a href='view.php?viewID=";
echo $row_Scenes['rotateRightID'];
15
echo "'><img border='0' src='img/RotateRight.png'/></a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "<img border='0' src='img/X.png'//>";
}
}
else
{
echo " &nbsp;";
}
?></td>
</tr>
<tr valign='middle' height="446">
<td width='75' id='Left' align="left">
<?php
//If the arrow is set to show, check to see if a destination is
specified.
if ($row_Scenes['showLeft'])
{
if ($row_Scenes['leftID'])
{
//If the room arrow is set to show and the room is
specified, make a link to the room
echo "<a href='view.php?viewID=";
echo $row_Scenes['rotateLeftID'];
echo "'><img border='0' src='img/Left.png'/></a>";
}
else
16
{
//If the room was not specified, place a placeholder X in
its place.
echo "<img border='0' src='img/X.png'//>";
}
}
else
{
echo " &nbsp;";
}
?></td>
<td valign="bottom" id='Center'><div id="centerContent"><?php echo
$row_Scenes['centerContent']; ?></div>
</td>
<td width='75' id='Right' align="right">
<?php
//If the arrow is set to show, check to see if a destination is
specified.
if ($row_Scenes['showRight'])
{
if ($row_Scenes['rightID'])
{
//If the room arrow is set to show and the room is
specified, make a link to the room
echo "<a href='view.php?viewID=";
echo $row_Scenes['rightID'];
17
echo "'><img border='0' src='img/Right.png'/></a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "<img border='0' src='img/X.png'//>";
}
}
else
{
echo " &nbsp;";
}
?></td>
</tr>
<tr height='75' valign='bottom'>
<td>&nbsp;
</td>
<td id='Back' align="center">
<?php
//If the arrow is set to show, check to see if a destination is
specified.
if ($row_Scenes['showBack'])
{
if ($row_Scenes['backID'])
{
//If the room arrow is set to show and the room is
specified, make a link to the room
echo "<a href='view.php?viewID=";
18
echo $row_Scenes['backID'];
echo "'><img border='0' src='img/Back.png'/></a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "<img border='0' src='img/X.png'//>";
}
}
else
{
echo " &nbsp;";
}
?></td>
<td width='75'>&nbsp;
</td>
</tr>
</table>
<div id="Footer">
<?php //Render any HTMl Footer Content
echo $row_Scenes['publicDescription']; ?>
</div>
<!--End View Rendering-->
C 2. Administration Index
Generating the Administration Index was one of the harder things to craft. The code is
used to pull most of the data for a view and render it in an easy to access list.
<?php
//Connect to the Database and gather all views.
19
mysql_select_db($database_UC3D, $UC3D);
$query_Scenes = "SELECT * FROM Scene";
$Scenes = mysql_query($query_Scenes, $UC3D) or die(mysql_error());
$row_Scenes = mysql_fetch_assoc($Scenes);
$totalRows_Scenes = mysql_num_rows($Scenes);mysql_select_db($database_UC3D,
$UC3D);
$query_Scenes = "SELECT * FROM Scene ORDER BY idView ASC";
$Scenes = mysql_query($query_Scenes, $UC3D) or die(mysql_error());
$row_Scenes = mysql_fetch_assoc($Scenes);
$totalRows_Scenes = mysql_num_rows($Scenes);
mysql_free_result($Scenes);
$result = mysql_query($query_Scenes, $UC3D);
?>
<!-- As a placeholder in Dreamweaver, generate the header cells out of the PHP
code block -->
<table border='1' style='text-align:center' width='100% cellpadding='3'
cellspacing='0'>
<tr>
<th>Details</th>
<th>Condensed Preview</th>
</tr>
<?php
//While there is data, a new row with the data will be outputted.
while($row = mysql_fetch_array($result))
{
//Output the View ID, as well as an anchor for it
echo "<tr valign='top'>
20
<td><table border='0' cellpadding='0' cellspacing='0' width=100%>
<tr valign='top'><th align='left'>ID:</th><td><a name='" . $row['idView']
. "' ></a>" . $row['idView'] . "</td></tr>";
//Output the Admin visible View Name
echo "<tr valign='top'><th align='left'>Name:</th><td>" . $row['viewName'] .
"</td></tr>";
footer
//within a text area box, display the code that normally appears in the
echo "<tr valign='top'><th align='left'
nobreak>Footer:&nbsp;&nbsp;</th><td><textarea disabled style='width=100%'>" .
$row['publicDescription'] . "</textarea></td>";
//Output any administration notes
echo "<tr valign='top'><th align='left'
nobreak>Notes:&nbsp;&nbsp;</th><td><textarea disabled style='width=100%'>" .
$row['adminDescription'] . "</textarea></td></tr>";
echo "</TR></table>";
//Output a View, Edit, and Drop button. Drop is currently inoperable.
echo "<a href='../view.php?viewID=" . $row['idView'] . "'><img
src='../img/view.gif' width='16' height='16' alt='View'hspace='5'></a>";
echo "<a href='edit.php?viewID=" . $row['idView'] . "'><img
src='../img/edit.png' width='16' height='16' alt='Edit'hspace='5'></a>";
echo "<a href='drop.php?viewID=" . $row['idView'] . "'><img
src='../img/drop.gif' width='16' height='16' alt='Drop' hspace='5'></a>";
echo "</td>";
//Render the preview of the room.
echo "<td align='center'><table border='0' cellpadding='2'
cellspacing='0' style='text-align:center'>";
echo "<tr><td>";
21
//If the arrow is set to show, check to see if a destination is
specified.
if ($row_Scenes['showRotateLeft'])
{
if ($row_Scenes['rotateLeftID'])
{
//If the room arrow is set to show and the room is
specified, make a link to the room
echo "<a href='view.php?viewID=";
echo $row_Scenes['rotateLeftID'];
echo "'><img border='0' src='img/RotateLeft.png'/></a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "<img border='0' src='img/X.png'//>";
}
}
else
{
echo " &nbsp;";
}
echo "</td><td>";
//If the arrow is set to show, check to see if a destination is
specified.
if ($row['showUp'])
{
//If the room arrow is set to show and the room is specified,
make a link to the room
if ($row['upID'])
{
22
echo "<a href='#" . $row['upID'] . "'>" . $row['upID'] . "</a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "X";
}
}
else
{
echo "&nbsp;";
}
echo "</td><td>";
//If the arrow is set to show, check to see if a destination is
specified.
if ($row['showRotateRight'])
{
//If the room arrow is set to show and the room is specified,
make a link to the room
if ($row['rotateRightID'])
{
echo "<a href='#" . $row['rotateRightID'] . "'>" .
$row['rotateRightID'] . "</a>";
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "X";
}
}
23
else
{
echo "&nbsp;";
}
echo "</td></tr>";
echo "<tr><td>";
//If the arrow is set to show, check to see if a destination is
specified.
if ($row['showLeft'])
{
//If the room arrow is set to show and the room is specified,
make a link to the room
if ($row['leftID'])
{
"</a>";
echo "<a href='#" . $row['leftID'] . "'>" . $row['leftID'] .
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "X";
}
}
else
{
echo "&nbsp;";
}
echo "</td><td>";
echo "<a href='#" . $row['idView'] . "'> <img src='" .
$row['imageURL'] . "' width='100' /> </a>";
echo "</td><td>";
24
//If the arrow is set to show, check to see if a destination is
specified.
if ($row['showRight'])
{
//If the room arrow is set to show and the room is specified,
make a link to the room
if ($row['rightID'])
{
"</a>";
echo "<a href='#" . $row['rightID'] . "'>" . $row['rightID'] .
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "X";
}
}
else
{
echo "&nbsp;";
}
echo "</td></tr>";
echo "<tr><td>";
echo "&nbsp;";
echo "</td><td>";
//If the arrow is set to show, check to see if a destination is
specified.
if ($row['showBack'])
{
//If the room arrow is set to show and the room is specified,
make a link to the room
25
if ($row['backID'])
{
"</a>";
echo "<a href='#" . $row['backID'] . "'>" . $row['backID'] .
}
else
{
//If the room was not specified, place a placeholder X in
its place.
echo "X";
}
}
else
{
echo "&nbsp;";
}
echo "</td><td>";
echo "&nbsp;";
echo "</td></tr></table></td>";
echo "</tr>";
}
?>
</table>
26
Appendix F: Use Case Diagram
Figure 7: Use Case Diagram
27
Appendix G: Database Diagram
Figure 8: Database Diagram
28