-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (106 loc) · 5.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MRI Scanner Tour</title>
<!-- Compiled and minified UA Bootstrap CSS, icon font not included -->
<link rel="stylesheet"
href="https://cdn.uadigital.arizona.edu/lib/ua-bootstrap/v1.0.0-beta.26/ua-bootstrap.min.css">
<link rel="stylesheet" href="tour.css" />
</head>
<body>
<div class="container">
<div class="row tour-header" role="banner">
<div class="col-md-12">University of Arizona</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<h1 id="tour-title">MRI Scanner Virtual Tour</h1>
<p>
Welcome to a virtual tour of the University of Arizona's
research MRI scanning facility.
</p>
<p>
Our 3T research scanner is located in the basement of the Biosciences
Research Laboratories (BSRL) building.
It is administered by the Translational Bioimaging Resource (TBIR) group,
under the auspices of the Office for Research, Innovation, and Impact (RII).
</p>
<h2 id="tour-subtitle">Taking the Virtual Tour</h2>
<p>
For best viewing, we recommend a window size of at least 1800 x 1200, although
smaller sizes should work (you'll just have to move around more).
</p>
<p>
<span class="tour-how-hdr">Movement:</span>
On 3D pages, dragging your mouse should rotate the virtual enviroment and
allow you to see the room from various angles. Dragging is possible but
not needed on an iPad; as you can simple turn the entire iPad around to
look all around the scene. Note, that because each 3D
scene was captured by a 3D camera at a fixed point, you cannot move into
or out of the scene, only rotate at the camera's fixed location.
</p>
<p>
<span class="tour-how-hdr">Information:</span>
As you look around the various scenes, you will see bright blue spheres,
we call <i>infospheres</i>. Clicking on one of the infospheres will pop up
a window with more information about the object which the infosphere is
hovering near. All popups should close when the <b>X</b> button in the upper
right corner of the popup is clicked.
</p>
<p>
<span class="tour-how-hdr">More Info (2D):</span>
In the initial scene (the MRI Console Room) you will see a blue and a
green plane, each covering a desk cluttered with devices related
to the operation and/or use of the MRI. Clicking on a plane
will take you to a 2D page which provides more detailed
information about the objects under that plane. The close button, a
black <b>X</b> in the upper right corner of each 2D page, will return
you to the main MRI Console Room scene when clicked.
</p>
<p>
<span class="tour-how-hdr">Navigation:</span>
On the floor of 3D scenes, you may notice black discs with double arrows.
Clicking on one of these will navigate you to the next or previous scene.
</p>
<h3>The Tour: MRI Console Room</h3>
<ul><li><a href="mri/console.html">MRI Console Room</a>
<i>(the main entry point of the tour)</i></p></li></ul>
<h3>Scanner Room Walk</h3>
<p>Individual entry points for the other scenes of the tour:</p>
<ul>
<li><a href="mri/enter_scanner.html">Scanner Room, initial entry</a></li>
<li><a href="mri/patch_panel.html">Scanner Room, near the Patch Panel</a></li>
<li><a href="mri/scanner_back1.html">Scanner Room Back Corner 1</a></li>
<li><a href="mri/scanner_back2.html">Scanner Room Back Corner 2</a></li>
</ul>
<h3>More Information</h3>
<p>Details about the MRI facility and its equipment can be found on the
<a href="https://sites.google.com/a/email.arizona.edu/bmw/mr4-scanner-and-equipment-specs">MRI Equipment Page</a> of the Brain Mapping Workshop site.
</p>
<h3>About The Tour</h3>
<p>
This virtual tour was developed by
<a href="https://profiles.arizona.edu/person/dkp">Dr. Dianne Patterson</a>,
of the <a href="https://www.bic.arizona.edu/">Brain Imaging Center (BIC)</a>,
and Tom Hicks, in the
<a href="https://ischool.arizona.edu/">School of Information</a>.
We are grateful to the
<a href="https://sensorlab.arizona.edu/">RII Sensor Lab</a>, for the loan
of several 360 cameras, and to Devin Bayly, of UITS, for providing us with
example AFrame code to jumpstart our learning.
</p>
<p>
The tour is implemented using HTML, Javascript, the
<a href="https://getbootstrap.com/">Bootstrap</a> frontend toolkit, and the
<a href="https://aframe.io">AFrame</a> web framework for building 3D/AR/VR experiences.
The source code is licensed under the Apache 2.0 license and available on
<a href="https://github.com/hickst/MRI-virtual-tour">GitHub</a>.
</p>
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- container -->
</body>
</html>