-
Notifications
You must be signed in to change notification settings - Fork 0
/
tors.html
131 lines (118 loc) · 6.48 KB
/
tors.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
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>David Black Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('images/columnar.jpg');
min-height: 100%;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.bgimg-1 {
background-attachment: scroll;
min-height: 400px;
}
}
</style>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="index.html" class="w3-bar-item w3-button">HOME</a>
<a href="index.html#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> ABOUT</a>
<a href="index.html#cv" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> CV</a>
<a href="adventure.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-map-o"></i> ADVENTURE</a>
<a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red">
<i class="fa fa-search"></i>
</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="index.html#about" class="w3-bar-item w3-button" onclick="toggleFunction()">ABOUT</a>
<a href="index.html#cv" class="w3-bar-item w3-button" onclick="toggleFunction()">CV</a>
<a href="adventure.html" class="w3-bar-item w3-button" onclick="toggleFunction()">ADVENTURE</a>
<a href="index.html#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTACT</a>
<a href="#" class="w3-bar-item w3-button">SEARCH</a>
</div>
</div>
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MIXED REALITY <span class="w3-hide-small"></span> TORS</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h2 id="mixedreality-guided ultrasound-for-trans-oral-robotic-surgery">Mixed Reality-Guided Ultrasound for Trans-Oral Robotic Surgery</h2>
<h4 id="date-sept-2023-present">Date: September 2023 - Present</h4>
<p>Trans-oral robotic surgery (TORS) involves inserting a da Vinci surgical system into the mouth of a patient to dissect tumours in the back of the throat. Dr. Eitan Prisman is working with Wanwen Chen, a PhD student in my lab, and Randy Moore, a master's student in my lab, to facilitate TORS using augmented reality overlays of pre-operative imaging.</p>
<p>However, intraoperative imaging is more dynamic and can provide real-time feedback to the surgeon, letting them effectively see through tissue. Thus, we are working on integrating ultrasound on the outside of the neck. For this, I designed adapters for the da Vinci ProGrasp tool to hold an ultrasound device. However, we found that it would be easier to have a person (eg. the resident who is assisting) hold the probe in place. For this, the resident should be guided as to where on the patient to place the probe. This is closely related to my work on MR human teleoperation, so I created a HoloLens application to show the resident a virtual probe with which they align their real probe. This virtual probe can be controlled by the surgeon on the console, or automatically by keeping the surgical tools in the ultrasound plane. I therefore implemented precise HoloLens-based IR marker tracking to enable registration between HoloLens and robot, as well as a communication system and UI to send desired and measured poses and ultrasound images between the surgeon console and the HoloLens.</p>
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section">
<a href="https://github.com/dgblack"><i class="fa fa-github w3-hover-opacity"></i></a>
<a href="https://scholar.google.com/citations?user=As_yDKkAAAAJ&hl=en"><i class="fa fa-google w3-hover-opacity"></i></a>
<a href="https://twitter.com/BlackDavidG"><i class="fa fa-twitter w3-hover-opacity"></i></a>
<a href="https://linkedin.com/in/davidgblack"><i class="fa fa-linkedin w3-hover-opacity"></i></a>
</div>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>