-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (239 loc) · 10.8 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<title>Project Periscope</title>
<meta
name="description"
content="A Robotic Camera System to Support Remote Physical Collaboration"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900&display=swap"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./css/app.css" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
<a href="#">upgrade your browser</a> to improve your experience.
</p>
<![endif]-->
<div id="banner">
<img src="./img/00063_Moment.jpg" class="object-fit-cover banner-img" />
</div>
<div class="container">
<header>
<h1 class="text-center fw-bolder">
Periscope: A Robotic Camera System to Support<br>Remote Physical Collaboration
</h1>
<h2 class="text-center fw-bolder"><i><mark>Website under construction</mark></i></h2>
<ul id="authors-list">
<!-- <li><a href="https://pragathipraveena.com/" target="_blank" rel="noopener">Pragathi Praveena</a></li> -->
<li>Pragathi Praveena</li>
<li>Yeping Wang</li>
<li>Emmanuel Senft</li>
<li>Michael Gleicher</li>
<li>Bilge Mutlu</li>
</ul>
</header>
<div>
<section id="links-group">
<a href="https://arxiv.org/abs/2305.07517" target="_blank" rel="noopener"
><img
class="object-fit-cover link-icon"
src="./img/icon/google-docs_2991112.png"
alt="paper icon"
/>Paper</a
>
<a href="https://graphics.cs.wisc.edu/Papers/2023/MWPGM23/mwpgm.pdf" target="_blank" rel="noopener"
><img
class="object-fit-cover link-icon"
src="./img/icon/google-docs_2991112.png"
alt="paper icon"
/>Demo Paper</a
>
<a href="https://periscope.cs.wisc.edu" target="_blank" rel="noopener"
><img
class="object-fit-cover link-icon"
src="./img/icon/industrial-robot_3253587.png"
alt="robot icon"
/>Demo</a
>
<a href="https://www.youtube.com/playlist?list=PLilPy_VXz5rIx2nvijai4Dn-S8uSu5RGf" target="_blank" rel="noopener"
><img
class="object-fit-cover link-icon"
src="./img/icon/youtube_1077046.png"
alt="YouTube icon"
/>Videos</a
>
</section>
<section>
<h3 class="section-heading">Abstract</h3>
<p>
We investigate how robotic camera systems can offer new capabilities to computer-supported cooperative work through the design, development, and evaluation of a prototype system called <i>Periscope</i>. With <i>Periscope</i>, a local worker completes manipulation tasks with guidance from a remote helper who observes the workspace through a camera mounted on a semi-autonomous robotic arm that is co-located with the worker. Our key insight is that the helper, the worker, and the robot should all share responsibility of the camera view—an approach we call <i>shared camera control</i>. Using this approach, we present a set of modes that distribute the control of the camera between the human collaborators and the autonomous robot depending on task needs. We demonstrate the system's utility and the promise of shared camera control through a preliminary study where 12 dyads collaboratively worked on assembly tasks. Finally, we discuss design and research implications of our work for future robotic camera systems that facilitate remote collaboration.
</p>
</section>
<!-- <section>
<h3 class="section-heading">Approach Overview</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet
dictum sit amet justo donec enim diam vulputate ut. Fusce id velit
ut tortor pretium viverra suspendisse potenti. Viverra nibh cras
pulvinar mattis. Viverra tellus in hac habitasse platea dictumst
vestibulum rhoncus. Molestie ac feugiat sed lectus vestibulum mattis
ullamcorper velit sed. Diam in arcu cursus euismod. Pretium viverra
suspendisse potenti nullam ac. Volutpat commodo sed egestas egestas.
Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam.
Volutpat blandit aliquam etiam erat. Sit amet mauris commodo quis
imperdiet massa tincidunt nunc pulvinar. Sed nisi lacus sed viverra
tellus in. Eu scelerisque felis imperdiet proin fermentum.
</p>
<p>
Ultrices in iaculis nunc sed augue lacus viverra. Sagittis id
consectetur purus ut faucibus pulvinar elementum. Massa sapien
faucibus et molestie ac feugiat. Nisl condimentum id venenatis a.
Lacinia quis vel eros donec ac odio. Pulvinar neque laoreet
suspendisse interdum. Ultrices tincidunt arcu non sodales neque.
Purus non enim praesent elementum facilisis leo. Commodo quis
imperdiet massa tincidunt nunc pulvinar sapien et. Et leo duis ut
diam quam nulla porttitor. Aliquet bibendum enim facilisis gravida
neque convallis.
</p>
</section>
<section>
<h3 class="section-heading">Results</h3>
<p>
This section is for showing how to use HTML tags to format texts on
this page
</p>
<p>
If there's a new paragraph, you need to use
<code><p></code> tag to surround your paragraph.
</p>
<p>
If you want to make a bullet-point list, first use
<code><ul></code> tag to create a list, then for each list
item, use <code><li></code> tag to surround them. You should
get the result similar to this:
</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>
For images, put them in the <code><img></code> tag. Note that
for accessibility, it is highly recommended to use
<code>alt</code> attribute in <code><img></code> element and
fill in the description of the image. Use
<code>img-padded</code> class to add padding to the bottom of the
image. Refer to the code for details:
</p>
<img
class="object-fit-cover img-fluid img-padded"
src="./img/00062_Moment.jpg"
alt="the interface with two people collaborating on an assembly task"
/>
<p>
If you want to align multiple elements on the same row, use
Bootstrap <code>col</code> and <code>row</code> classes to do so:
</p>
<div class="row align-items-center div-padded">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<p>Or similarly, for multiple images on the single row:</p>
<div class="row align-items-center">
<div class="col">
<img
class="object-fit-cover img-fluid img-padded"
src="./img/00062_Moment.jpg"
alt="the interface with two people collaborating on an assembly task"
/>
</div>
<div class="col">
<img
class="object-fit-cover img-fluid img-padded"
src="./img/00062_Moment.jpg"
alt="the interface with two people collaborating on an assembly task"
/>
</div>
<div class="col">
<img
class="object-fit-cover img-fluid img-padded"
src="./img/00062_Moment.jpg"
alt="the interface with two people collaborating on an assembly task"
/>
</div>
</div>
</section>
<section>
<h3 class="section-heading">Demo</h3>
<p></p>
</section>
<section>
<h3 class="section-heading">Videos</h3>
<p></p>
</section> -->
<section>
<h3 class="section-heading">Citation</h3>
<pre>
<code>
@article{praveena2023periscope,
author = {Praveena, Pragathi and Wang, Yeping and Senft, Emmanuel and Gleicher, Michael and Mutlu, Bilge},
title = {Periscope: A Robotic Camera System to Support Remote Physical Collaboration},
journal = {Proc. ACM Hum.-Comput. Interact.},
year = {2023},
issue_date = {October 2023},
publisher = {Association for Computing Machinery},
address = {New York, NY, USA},
volume = {7},
number = {CSCW2},
url = {https://doi.org/10.1145/3610199},
doi = {10.1145/3610199},
month = {October},
articleno = {350},
numpages = {39}
}
</code
>
</pre>
</section>
<section>
<h3 class="section-heading">Acknowledgements</h3>
<p>
The icons from this website are from
<a href="https://freepik.com/" target="_blank" rel="noopener"
>Freepik</a
>
</p>
</section>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<script src="./js/app.js" async defer></script>
</body>
</html>