-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdexnet.html
More file actions
358 lines (355 loc) · 31.9 KB
/
dexnet.html
File metadata and controls
358 lines (355 loc) · 31.9 KB
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Sona Dolasia</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/material-icons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+TC">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+TC:300,400,500,600,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean.css">
<link rel="stylesheet" href="assets/css/Projects-Clean.css">
<link rel="stylesheet" href="assets/css/Projects-Horizontal.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body style="background-color: rgb(224,232,222);">
<nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background-color: rgb(224,232,222);font-family: 'Noto Serif TC', serif;">
<div class="container"><a class="navbar-brand text-lowercase" href="index.html" style="font-family: 'Noto Serif TC', serif;background-color: rgba(255,255,255,0);color: rgb(78,84,71);font-size: 18px;margin: 0px 0px 0px;">SONA DOLASIA</a><button class="navbar-toggler"
data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link text-lowercase" href="about.html" data-bs-hover-animate="tada" style="font-family: 'Noto Serif TC', serif;color: rgb(78,84,71);">ABOUT</a></li>
<li class="nav-item" role="presentation"><a class="nav-link text-lowercase" href="work.html" style="font-family: 'Noto Serif TC', serif;color: rgb(78,84,71);background-color: #;"><strong>WORK</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="https://drive.google.com/file/d/1ZWuNkIAm7SLdPxyaSuiWzRVCM2zyUAIw/view?usp=sharing" data-bs-hover-animate="tada" style="font-family: 'Noto Serif TC', serif;color: rgb(78,84,71);">resume</a></li>
</ul>
</div>
</div>
</nav>
<div>
<div class="container text-center">
<div class="row">
<div class="col-md-6" style="padding: 0px 0px 10px 0px;"><img class="img-fluid d-inline bounce animated" src="assets/img/Frame%204.1.png" width="500"></div>
<div class="col-md-6" style="padding: 0px 0px 0px 0px;">
<h1></h1>
<h1 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;font-size: 40px;padding: 60px 0px 0px;color: rgb(78,84,71);"><strong>Dex-Net User Interface</strong></h1>
<p style="font-family: 'Noto Serif TC', serif;"><em>January - April 2018</em></p>
<p class="text-left" style="font-family: 'Open Sans', sans-serif;padding: 0px 0px 0px;color: #212529;font-size: 14px;">In Spring 2018, working as an undergraduate researcher in the<a href="http://autolab.berkeley.edu/"> UC Berkeley Automation Lab</a> (AUTOLab), I was given a unique project to <strong>design and develop a graphical user interface</strong> for the <a href="https://berkeleyautomation.github.io/dex-net/">Dexterity Network (Dex-Net)</a>. I worked in collaboration with <a href="http://goldberg.berkeley.edu/">Prof. Ken Goldberg</a> and graduate students; <a href="https://jeff-mahler.com/">Jeff Mahler</a>,
<a href="https://mjd3.github.io/">Mike Danielczuk</a> and <a href="https://mmatl.github.io/">Matt Matl</a>.</p><a class="btn btn-light text-lowercase text-center" role="button" href="https://docs.google.com/presentation/d/1KwY9t-TQA1stVitIh5e1aVD7Unatq3qzqbzLYIDJtK0/edit?usp=sharing"
style="background-color: rgba(78,84,71,0.65);font-family: 'Noto Serif TC', serif;color: rgb(234,234,234);margin: 10px 40px;filter: brightness(100%);opacity: 1;"><strong>VIEW PROCESS DECK</strong></a>
<p class="text-left" style="font-family: 'IBM Plex Sans', sans-serif;"></p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 0px;background-color: rgba(78,84,71,0.65);color: rgb(234,234,234);font-size: 20px;"><strong>PROJECT OVERVIEW</strong></h3>
</div>
</div>
</div>
</div>
<div></div>
<div></div>
<div class="shadow"></div>
<div class="text-left" style="padding: 20px 0px 30px 0px;">
<div class="container">
<div class="row">
<div class="col-md-6" style="padding: 0px 0px 30px 0px;">
<p style="padding: 10px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">The AUTOLab was invited to present the <a href="https://berkeleyautomation.github.io/dex-net/">Dex-Net</a> project at <strong>Amazon's invite-only </strong><a href="https://marsconference.com/"><strong>MARS conference</strong></a> in
Palm Springs. For the live demo the lab wanted <strong>a display</strong> that would sit on top of the robot, <strong>demonstrating the thought process of the project in real time</strong>. <br></p>
<p style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">At the time, I was a member of the lab, assisting on various research projects. Knowing a bit about my interest in design, I was approached to help design this display. </p>
<p style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">One of the key challenges with this project was <strong>creating a simple design for the display that could be understood by a non-technical audience.</strong> </p>
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 0px 30px;margin: 10px 0px;"><strong>WHAT IS DEX-NET?</strong></p>
<p style="padding: 0px 30px;font-family: 'Noto Sans TC', sans-serif;font-size: 14px;">The Dexterity Network (Dex-Net) is <strong>a research project</strong> including code, datasets, and algorithms for generating datasets of synthetic point clouds, robot parallel-jaw grasps and metrics of grasp robustness based on physics
for thousands of 3D object models<strong> to train machine learning-based methods to plan robot grasps.</strong><br></p>
</div>
<div class="col text-center"><img class="border-white shadow" src="assets/img/Screen%20Shot%202019-01-07%20at%209.30.46%20PM.png" height="400"></div>
<div class="col-md-12">
<header></header>
</div>
</div>
</div>
<div class="col-md-12 text-center"><img class="img-fluid" src="assets/img/icons%20projects-07.png" width="800"></div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;color: rgb(234,234,234);font-size: 20px;"><strong>UNDERSTANDING DISPLAY REQUIRMENTS</strong></h3>
</div>
</div>
</div>
</div>
<div></div>
<div style="padding: 20px 0px 0px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12" style="padding: 0px 30px;">
<p style="font-family: 'Open Sans', sans-serif;padding: 0px;font-size: 14px;">The <strong>first step</strong> of this project was meeting with the graduate students working on the Dex-Net project and <strong>discussing the goals for the display</strong>. We came up with a list of information that should be displayed,
and briefly discussed the actual implementation - discussing a few different languages and libraries that could be used to develop it. I was also given the dimensions of the screen I would be designing for. </p>
<p class="text-left"
style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 0px 30px;margin: 10px 0px;"><strong>DIMENSIONS:</strong><br></p>
<ul style="padding: 0px 70px;">
<li style="font-family: 'Noto Sans TC', sans-serif;font-size: 14px;">1440px x 900px</li>
</ul>
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 0px 30px;margin: 10px 0px;"><strong>REQUIRED ELEMENTS: </strong></p>
<ul style="padding: 0px 70px;font-family: 'Open Sans', sans-serif;font-size: 14px;">
<li><strong>Confidence percentage</strong> - The robot's percentage of confidence that it will perform a successful grasp</li>
<li><strong>Depth camera live video </strong>- Displaying exactly what the robot is seeing</li>
<li><strong>Picks per hour </strong>- Given its current speed, how many objects the robot could potentially pick up each hour</li>
<li><strong>Weight of object bin </strong>- Show the weight of the object bin, which gets smaller as the robot is more successful </li>
<li><strong>Robot current thought process </strong>- Current stage of the algorithm (paused, sensing, planning, moving, error recovery)</li>
<li>AUTOLab logo</li>
<li>Dex-Net logo</li>
<li>UC Berkeley logo</li>
</ul>
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;margin: 20px 0px 0px 0px;color: rgb(234,234,234);font-size: 20px;"><strong>IDEATION</strong></h3>
<p style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 30px;"></p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p style="font-family: 'Open Sans', sans-serif;padding: 20px 30px 0px 30px;font-size: 14px;">After discussing the goals of the display at length, I felt slightly overwhelmed. There were <strong>so many different data points</strong> the lab wanted to include on the display, and finding a <strong>way to make it clean and not number heavy</strong> seemed <strong>challenging</strong>. I began by sketching out some different ways to present the different elements and thinking about the composition of the display.</p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-3"><img class="img-fluid shadow" src="assets/img/new%20doc%202019-01-08%2014.20.57_1.jpg" width="300"></div>
<div class="col-md-3"><img class="img-fluid shadow" src="assets/img/new%20doc%202019-01-08%2014.20.57_2.jpg" width="300"></div>
<div class="col-md-3"><img class="img-fluid shadow" src="assets/img/new%20doc%202019-01-08%2014.20.57_3.jpg" width="300"></div>
<div class="col-md-3"><img class="img-fluid shadow" src="assets/img/new%20doc%202019-01-08%2014.20.57_4.jpg" width="300"></div>
</div>
</div>
</div>
<div style="margin: 10px 0px;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center"><small class="text-center" style="font-family: 'IBM Plex Sans', sans-serif;">Initial Sketches </small></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 0px 30px;margin: 10px 0px;"><strong>ROBOT GRASP ICONS:</strong></p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px;font-size: 14px;">One of the first things I worked on was <strong>creating icons for the robot's three different typed of grasps. </strong>These would would be overlayed on the live depth image to show the location and type of grasp the robot
was attempting. </p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-4 text-center"><strong style="font-family: 'Noto Serif TC', serif;">SUCTION</strong><img class="img-fluid" src="assets/img/suction%20-%20green.png" width="200"></div>
<div class="col-md-4 text-center"><strong style="font-family: 'Noto Serif TC', serif;">GRIPPER</strong><img class="img-fluid" src="assets/img/gripper-green.png" width="200"></div>
<div class="col-md-4 text-center"><strong style="font-family: 'Noto Serif TC', serif;">PROBE/PUSH</strong><img class="img-fluid" src="assets/img/probe-green.png" width="200"></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12 text-left">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;margin: 20px 0px 0px 0px;color: rgb(234,234,234);font-size: 20px;"><strong>INITIAL DESIGNS</strong></h3>
<p style="font-family: 'Open Sans', sans-serif;padding: 20px 30px 0px 30px;font-size: 14px;">Discussing further with Prof. Goldberg, we came up with a few ideas of how the elements should be presented. These included having the <strong>confidence percentage be the most significant number</strong>, possibly having the <strong>object bin weight be shown in a scale bar</strong>,
and having the<strong> robot's thought process in a linear traffic light bar</strong> (lighting up the current state). </p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px;font-size: 14px;">After coming up with a few basic ideas, I began mocking up the design in Illustrator. </p>
<p class="text-left" style="font-family: 'Noto Serif TC', serif;font-size: 20px;padding: 0px 30px;margin: 10px 0px;"><strong>FIRST DESIGNS:</strong></p>
</div>
</div>
</div>
</div>
<div style="margin: 10px 0px ;">
<div class="container">
<div class="row">
<div class="col-md-4 text-center"><img class="img-fluid" src="assets/img/display_1.png" width="350" style="margin: 15px 0px;"><small class="text-center" style="margin: 10px 0px;font-family: 'IBM Plex Sans', sans-serif;font-size: 11px;">Centered depth footage, confidence in a rectangular box </small>
<img
class="img-fluid" src="assets/img/display_5.png" width="350" style="margin: 15px 0px;"><small style="margin: 0px 0px;font-family: 'IBM Plex Sans', sans-serif;font-size: 11px;">Centered depth footage, confidence in a circular box </small></div>
<div class="col-md-4 text-center"><img class="img-fluid" src="assets/img/display_3.png" width="350" style="margin: 15px 0px;"><small class="text-center" style="margin: 0px 0px;font-family: 'IBM Plex Sans', sans-serif;font-size: 11px;">Left aligned depth footage, confidence in a circular box, with percentage filled in. Weight displayed in a bar graph. </small>
<img
class="img-fluid" src="assets/img/display_4.png" width="350" style="margin: 15px 0px;"><small class="text-center" style="margin: 0px 0px;font-family: 'IBM Plex Sans', sans-serif;font-size: 11px;">Left aligned depth footage, confidence in a circular box. Weight displayed in a bar graph. </small></div>
<div class="col-md-4">
<p style="font-family: 'Noto Serif TC', serif;padding: 0px 30px 0px 0px;"><strong>FEEDBACK:</strong><br></p>
<ul style="font-family: 'Open Sans', sans-serif;font-size: 14px;">
<li><strong>Colors:</strong> Match the colors to the official UC Berkeley colors. Try different colors for the green, so it still stands out but is more cohesive.</li>
<li><strong>Depth image at center: </strong>Found that the depth image is the clearest way to demonstrate how the robot is thinking. Want this to be large and center so it is visible from a distance. </li>
<li><strong>Disconnect and reduce the size of the pause and error recovery steps: </strong>The robot would mainly be in either the "sensing," "planning," or "moving" stage. And would hopefully never reach the "error recovery" stage.</li>
<li><strong>Add a scale bar for the confidence percentage. </strong>Make the screen more symmetrical and show the confidence percentage in a more visual way. <strong> </strong></li>
</ul>
</div>
</div>
</div>
</div>
<div style="padding: 20px 0px 10px 0px;"></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;color: rgb(234,234,234);font-size: 20px;"><strong>ITERATION & FINAL DESIGN</strong></h3>
<p style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 30px;"></p>
<p style="font-family: 'Open Sans', sans-serif;padding: 20px 30px 20px 30px;font-size: 14px;">I incorporated this feedback into my next iteration of designs. In this iteration I changed the color palatte, using the official UC Berkeley colors, which I found added a nice contrast. I added in the second bar graph for confidence
and increased the size of the three key steps. </p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-4"><img class="img-fluid shadow" src="assets/img/updated_display1.png" width="350"></div>
<div class="col-md-4"><img class="img-fluid shadow" src="assets/img/updated%20display2.png" width="350"></div>
<div class="col-md-4"><img class="img-fluid shadow" src="assets/img/updated_display3.png" width="350"></div>
</div>
</div>
</div>
<div></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p class="text-left" style="font-family: 'Noto Serif TC', serif;padding: 40px 30px 0px 50px;"><strong>FEEDBACK:</strong><br></p>
<ul class="text-left" style="padding: 0px 30px 0px 70px;font-family: 'Open Sans', sans-serif;font-size: 14px;">
<li><strong>Change "PROBE" to "PUSH":</strong> Describes the same action, but in simpler terms. </li>
<li><strong>Change "MG" to "GRAMS":</strong> Had the wrong metrics.</li>
<li><strong>Make the scale bar easier to read. </strong>Change the bar to be filled with a solid color, remove tick bars, and make border thicker.</li>
<li><strong>Match scale bars. </strong>Make the scale bars on either sides the same size. </li>
<li><strong>Increase font size of numbers and bottom status bar names: </strong>Better readability, and make numbers stand out more. </li>
<li><strong>Remove % sign from confidence, add a decimal point. </strong>Percent sign takes up a lot of room and isn't super necessary, would rather have a more precise confidence value. </li>
<li><strong>Replace yellow bottom line with blue. </strong>Easier to see. </li>
</ul><img class="img-fluid shadow" src="assets/img/display_edited1.png" width="700" style="margin: 20px 0px 10px 0px;">
<p style="margin: 0px;font-family: 'IBM Plex Sans', sans-serif;font-size: 12px;">Final mock-up!</p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;margin: 30px 0px;color: rgb(234,234,234);font-size: 20px;"><strong>BUILDING THE DISPLAY</strong></h3>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-6" style="font-size: 14px;">
<p style="font-family: 'Open Sans', sans-serif;padding: 20px 30px 0px 30px;font-size: 14px;">The second phase of this project was developing my design. We decided I would implement my design, and leave it to the graduate students to connect all of the data from the robot. </p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 0px 30px;font-size: 14px;">After researching a number of different libraries and tools we chose to <strong>build the display in </strong><a href="https://www.qt.io/qt-for-python"><strong>PyQt</strong></a><strong>, </strong>a Python binding for the QT framework,
which is used to create user interface applications. No one in the lab had any experience with the toolkit, and there was a bit of a learning curve. </p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 20px 30px;">The toolkit contains hundreds of widgets, that you can use together to create a UI. <strong>I quickly found that these widgets were not very customizable</strong>, and were quite limited.</p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 20px 30px;">In my first attempt, I tried to find different widgets that looked similar to my designs and added in icon images. <strong>This attempt was unattractive</strong>, to say the least, and at this point, it didn't seem like my design
would be possible. </p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 20px 30px;">As I dug deeper into StackOverflow and the QT documentation, I <strong>found ways to customize the colors</strong>, and adding shapes for the bottom status bar. This second attempt was better, but still far off from the desired design. </p>
<p
style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 20px 30px;">After meeting with some of the grad students, we found a way to <strong>customize the fonts</strong>, and decided to simply use labels instead of the fancy widgets, and <strong>change the background color</strong>. I added in the logo
image, the grasp icon key, and a placeholder for the depth video. </p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 20px 30px;">There was still one issue. <strong>We still couldn't find a way to implement the bottom status bar.</strong> This was frustrating because it was a vital feature of the design, and would allow users to see the current thought
process of the robot. </p>
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 20px 30px;">Right as we began brainstorming other possible ways to demonstrate this, <strong>I had a hack-y idea to keep our original design</strong>. Instead of implementing the bar, <strong>we could just use 5 different images</strong>.
There would be an image for each of the different phases, and <strong>as the robot changed state, the images would change</strong>. It would look and act exactly like our design. The team liked this idea, and we implemented
it. </p>
</div>
<div class="col-md-6 text-center"><img class="img-fluid shadow" src="assets/img/Screen%20Shot%202018-03-05%20at%208.43.52%20AM.png" width="550" style="padding: 0px 0px;margin: 30px 0px;"><small>First Attempt</small><img class="img-fluid shadow" src="assets/img/Screen%20Shot%202018-03-06%20at%201.06.38%20AM.png" width="550" style="margin: 30px 0px;"><small>Second Attempt</small>
<img
class="img-fluid shadow" src="assets/img/Screen%20Shot%202018-03-07%20at%2011.18.33%20PM.png" width="550" style="margin: 30px 0px;"><small>Almost Final Display</small></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;margin: 30px 0px;color: rgb(234,234,234);font-size: 20px;"><strong>FINAL PRODUCT </strong></h3>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-6"><img class="img-fluid shadow" src="assets/img/IMG_0820%20.png" width="500"></div>
<div class="col-md-6" style="font-size: 14px;">
<p style="font-family: 'Open Sans', sans-serif;padding: 0px 30px 0px 0px;">We made some <strong>minor tweaks to the final display</strong>, and I created high-resolution PNG's for all of the images on it. The final changes were: </p>
<ul style="padding: 0px 30px 0px 30px;">
<li style="font-family: 'Open Sans', sans-serif;"><strong>Confidence value to the bottom right: </strong>To maintain consistency of the two bars, we moved the confidence underneath the bar, matching the weight. </li>
<li style="font-family: 'Open Sans', sans-serif;"><strong>Added in "Success" element:</strong> With the grid layout of the display, the top right felt empty being empty, we added in another element clearly stating whether the last grasp was a "SUCCESS" or "FAILURE." Moved
the picks per hour to the other side.</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p style="font-family: 'Noto Serif TC', serif;font-size: 25px;padding: 40px 0px 0px 0px;"><i class="material-icons" style="background-color: #d7d7d7;">arrow_downward</i><strong> IN ACTION </strong><i class="material-icons" style="background-color: #d7d7d7;">arrow_downward</i></p><iframe class="shadow" width="700"
height="450" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/GBiAxoWBNho"></iframe></div>
</div>
</div>
</div>
<div></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;margin: 30px 0px;color: rgb(234,234,234);font-size: 20px;"><strong>PRESS</strong></h3>
<p style="font-family: 'IBM Plex Sans', sans-serif;padding: 0px 30px 0px 0px;"></p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-6 text-center"><img class="img-fluid shadow" src="assets/img/MARS18-070_0349.jpg" height="500" style="padding: 0px;margin: 20px;"><small>The team presenting to Jeff Bezos. </small><img class="img-fluid shadow" src="assets/img/Screen%20Shot%202018-03-26%20at%201.17.08%20PM.png" height="500" style="margin: 20px;"><small>Front page of MIT Tech Review. Read the article <a href="https://www.technologyreview.com/s/610587/robots-get-closer-to-human-like-dexterity/"><span style="text-decoration: underline;">here</span>.</a></small>
<iframe
class="shadow" width="500" height="300" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/w_wPqsKckdw" style="margin: 20px ;"></iframe><small>CNBC News</small></div>
<div class="col-md-6 text-center"><img class="img-fluid shadow" src="assets/img/Screen%20Shot%202019-01-09%20at%201.15.53%20PM.png" height="500" style="margin: 20px ;"><small>Jeff Bezos in front of my work!</small><img class="img-fluid shadow" src="assets/img/Screen%20Shot%202019-01-09%20at%201.27.31%20PM.png" height="500" style="margin: 20px;"><small>New York Times article, <a href="https://www.nytimes.com/interactive/2018/07/30/technology/robot-hands.html?smid=tw-share"><em>How Robot Hands Are</em></a><br><a href="https://www.nytimes.com/interactive/2018/07/30/technology/robot-hands.html?smid=tw-share"><em>Evolving to Do What Ours Can</em></a></small></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-auto col-md-12 text-center">
<h3 class="text-lowercase text-center" style="font-family: 'Noto Serif TC', serif;padding: 5px 30px;background-color: rgba(78,84,71,0.65);height: 60;margin: 30px 0px;color: rgb(234,234,234);font-size: 20px;"><strong>REFLECTION</strong></h3>
<p class="text-left" style="padding: 0px 30px;font-family: 'Open Sans', sans-serif;font-size: 14px;">This project was one of my favorite things I've had the chance to work on. I was able to see how I could <strong>use my technical, and design abilities display the complexities of this algorithm in an understandable way</strong>. <br><br>Looking
back <strong>I would want to do user testing on the design</strong>. I feel like the design may still be a bit technical, and would be easier understood by a larger audience with some user feedback. However at the time of this
project, due to the secrecy of this project and the fast-paced timeline, it was not possible to test with anyone not working in the lab.</p>
</div>
</div>
</div>
</div>
<div class="footer-basic" style="background-color: rgb(224,232,222);">
<footer>
<p class="copyright" style="font-family: 'IBM Plex Sans', sans-serif;">Sona Dolasia © 2019</p>
</footer>
</div>
<div></div><br>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
</body>
</html>