-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject.html
287 lines (247 loc) · 21.4 KB
/
project.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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<title>Portfolio | Zhengxing Chen</title>
<!--scrollTo-->
<script src="scripts/jquery.scrollTo-min.js" type="text/javascript"></script>
<script language=javascript>
$(function() {
$("#Top").click(function() {
$.scrollTo({
top: '0px',
left: '0px'
}, 400);
});
});
</script>
<!--fancybox-->
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.0.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.0.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'titleShow': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'overlayShow': false
});
});
</script>
<!--Tipsy-->
<link rel="stylesheet" href="tipsy/tipsy.css" type="text/css">
<script type="text/javascript" src="tipsy/jquery.tipsy.js"></script>
<script type="text/javascript">
$(function() {
$('.tipsysouth').tipsy({
gravity: 's'
});
$('.tipsyeast').tipsy({
gravity: 'e'
});
$('.tipsywest').tipsy({
gravity: 'w'
});
});
</script>
</head>
<div id="fake-body-project">
<div id="header">
<!-- <div id="logo" style="position:relative;top:0px;left:0px;"><img style="height:100px;" src="images/logo.png">
</div> -->
</div>
<ul class="menu">
<li class="menu_title_project"><a href="project.html">Projects <span style="font-size:50%">(Non-Publication) </span></a>
</li>
<li class="menu_title_project"><a href="index.html">Home</a>
</li>
</ul>
<div id="gallery">
<h3 id="project6">Debug - Killer Exergame on Android</h3>
<div class="project" style="height:950px;">
<div class="projectimg left">
<a href="images/debug_1.png" class="tipsyeast fancybox" original-title="Main Menu" rel="group"> <img src="images/debug_1_port.png" alt="demo" />
</a>
<br />
<a href="images/debug_2.png" class="tipsyeast fancybox" original-title="In-Game Screenshot" rel="group"> <img src="images/debug_2_port.png" alt="demo" />
</a>
<br />
<a href="images/debug_3.png" class="tipsyeast fancybox" original-title="Instruction Screenshot" rel="group"> <img src="images/debug_3_port.png" alt="demo" />
</a>
<br />
<a href="images/debug_4.jpg" class="tipsyeast fancybox" original-title="" rel="group"> <img src="images/debug_4_port.jpg" alt="demo" />
</a>
<br />
</div>
<div class="projectcontent right" style="height:700px;">
<h4 style="margin-top:0;">Objective</h4>
<p>Build a totally addictive novel exergame for kids (and possibly adults too) that uses motion sensing to keep the kids engaged in a very high level of physical activity for long periods of time.</p>
<h4>Overview and Challenges</h4>
<p>This is the final project for Mobile Application Development (CS5800) course. The basic idea of our game is that people hold their phones with back-cameras facing to the ground. They will see some bugs crawling in the real-time camera screen. They can kill these bugs with their feet by burning/squashing them in the game. There are four main challenges: 1. Develop robust computer vision algorithms to detect distinct color on shoes and directions/speed during users' walking. 2.Use OpenGL to render a corresponding 3D game world. 3. Leverage accelerometer sensors to detect jumping. 4. We (two people) only use 1 month to develop the application.</p>
<h4>The Journey</h4>
<p>The game design took us as much time as programming. There are so many goals we want to achieve in the application. First, since it is an exergame, players are supposed to get enough sweat by playing it. So we introduce three different kinds of motions to play the game: walking (for chasing bugs), jumping (for squashing bugs) and shaking (for freezing bugs). Motion varieties are designed on purpose to make the game stickier. Second, it is natural for people to squash bugs when they see them. Due to this nature, we design the game with bugs instead of other game backgrounds. Third, bugs must appear and interact with players in realistic manners. We develop an interesting algorithm that makes sure bugs will bounce when they hit the edges on the floor. And they now could halt on and off just like real bugs on the ground. Fourth, a good game should be easy to learn how to play. We develop built-in step-by-step tutorials and succinct instructions in both images and texts. Our future tasks include integrating social network sharing and a multiplayer mode for competition. As far as we know, the application is the only one, at least among very few other applications, that combines augmented-reality and mHealth.</p>
<h4>Project Info</h4>
<p>
<span class="inlineRed">Collaborators:</span> Shang Ma, Shaojie Wang(UI)
<br />
<span class="inlineRed">Languages & Tools:</span> Java, C, Eclipse, MAT(Memory Analyzer)
<br />
<span class="inlineRed">Resources:</span>
<a class="tipsysouth" original-title="Dropbox " href="https://db.tt/zNGKbCTn" target="_blank">Final Presentation PPT</a>,
<a class="tipsysouth" original-title="Dropbox" href="https://db.tt/9Bo2M5QM" target="_blank">Project Proposal</a>,
<a class="tipsysouth" original-title="Google Play" href="https://play.google.com/store/apps/details?id=io.github.czxttkl.madcourse&hl=en" target="_blank">Google Play Store</a>
<br/>
<span class="inlineRed">Timeline:</span> Nov 2013 - Dec 2013
</p>
</div>
</div>
<h3 id="project1">
Mobile Service Awareness Platform
<a class="tipsysouth" href="gitstats/stats/index.html" target="_blank" original-title="View Gitstats"><img src="images/git.png"></a>
</h3>
<div class="project" style="height:950px;">
<div class="projectcontent left">
<h4 style="margin-top:0;">Objective</h4>
<p>The mobile Internet awareness platform provides operators, mobile service developers and operation&maintenance personnel with visualized data about mobile services' QoS. Users can clearly observe the health conditions of their application or websites through various models, such as Timeline and Map View. Also, the platform will diagnose problems in mobile services that deteriorate User Experience implicitly and explicitly. </p>
<h4>Overview and Challenges</h4>
<p>Mobile Internet will be a huge trend in the future. Different from traditional networking tests, the mobile Internet awareness platform launches tests from the user perspective. That means, it collects test results while opening websites or using applications through emulating real users' behaviors. </p>
<h4>The Journey</h4>
<p> This project lasted the whole year of my senior and was chosen as my undergraduation project. The whole system and its demo project are designed and developed by myself. The system consists of two components: measurement nodes and Operation Support System (OSS). In a measurement node, mobile devices are connected with a PC end(Runner Server) via USB. Through the communication with Runner Servers, OSS will manage the whole group of mobile devices and dispatch measurement tasks to any of them available. The mobile test devices are able to automatically open websites or use applications according to test scripts. There are two types of measurement schemes: measurement for flow test and measurement for optimization. In a flow test, the system will test if every key procedure is finished in a timely threshold. In an optimization test, I introduce about ten metrics that may affect the user experience negatively in an implicite or explicite way. In the demo project, we integrated several tools in Android SDK to achieve the active measurement module, such as Hierarchy Viewer and Robotium. I used Java to implement Runner Server’s modules. As for the communication between Runner Server and task creating pages, I adopt the Websocket technology, a new feature introduced in HTML5. Result pages could not only show basic parameters in traditional tests but also demonstrate QoS in rich formats like maps, timeframe and historical timeline.</p>
<h4>Project Info</h4>
<p>
<span class="inlineRed">Advisor:</span> <a href="http://cdn.riit.tsinghua.edu.cn/" target="_blank">Yin Hao</a>
<br/>
<span class="inlineRed">Languages & Tools:</span> HTML5, CSS3, JavaScript(JQuery), Java, Dreamweaver CS5.5, Eclipse, Android SDK
<br />
<span class="inlineRed">Resources:</span>
<a class="tipsysouth" original-title="Github" href="https://github.com/czxttkl/hugedata-runnerserver" target="_blank">Codes' host</a>,
<a class="tipsysouth" original-title="Chinese - Dropbox - 1.43MB" href="https://www.dropbox.com/s/gpwblumplwne61r/%E6%AF%95%E8%AE%BE%E8%AE%BA%E6%96%87%E9%99%88%E6%AD%A3%E7%91%86.pdf" target="_blank">Project Thesis</a>
<br/>
<span class="inlineRed">Timeline:</span> July 2012 - July 2013
</p>
</div>
<div class="projectimg right">
<a href="images/art3.jpg" class="tipsywest fancybox" original-title="Geo Panorama of Services' Health" rel="group"> <img src="images/port3.jpg" alt="demo" />
</a>
<br/>
<a href="images/art4.jpg" class="tipsywest fancybox" original-title="Page Load Timeline" rel="group"> <img src="images/port4.jpg" alt="demo" />
</a>
<br/>
<a href="images/art11.jpg" class="tipsywest fancybox" original-title="System Design" rel="group"> <img src="images/port11.jpg" alt="demo" />
</a>
<br/>
<a href="images/art12.jpg" class="tipsywest fancybox" original-title="Diagnosis Report" rel="group"> <img src="images/port12.jpg" alt="demo" />
</a>
<br/>
</div>
</div>
<h3 id="project2">Virtual Costumes-Trial System</h3>
<div class="project" style="height:750px;">
<div class="projectimg left">
<a href="images/art1.jpg" class="tipsyeast fancybox" original-title="A Post Of Our Team" rel="group"> <img src="images/port1.jpg" alt="demo" />
</a>
<br />
<a href="images/art2dot5.jpg" class="tipsyeast fancybox" original-title="Process Edge Info" rel="group"> <img src="images/port2dot5.jpg" alt="demo" />
</a>
<br />
<a href="images/art2.jpg" class="tipsyeast fancybox" original-title="Contest Logo" rel="group"> <img src="images/port2.jpg" alt="demo" />
</a>
<br />
</div>
<div class="projectcontent right" style="height:700px;">
<h4 style="margin-top:0;">Objective</h4>
<p>To design and build a virtual costumes-trial system to eliminate the worry of purchasing unsuitable clothes online.</p>
<h4>Overview and Challenges</h4>
<p>With the rapid development of e-commerce, a large amount of consumers have chosen to purchase clothes online. However, it has always been a tough decision for consumers to make purchases of clothes online without knowing their lookings with the clothes on. In order to eliminate such a worry, we have designed a virtual costumes-trial system based on 3D body modeling. Challenges are significant because we need to consider every aspect both on the level of hardware and software.</p>
<h4>The Journey</h4>
<p>We always put the user’s experience in the first place. After several brainstormings, we held that simplicity, convenience and universality would greatly improve user’s experience. Firstly, our team chose the Intel Atom E6x5C with built-in FPGA of Arria Company as our embedded system's processor, whose superior performance made possible the quick data collection and processing. In terms of camera, we chose to use prevailing USB cameras, which allowed most users to obtain the data more conveniently. I implemented the Canny algorithm on the FPGA, which could quickly obtain edge profiles of users' bodies. Moreover, I used processed body information to form 3D human model accurately by harnessing powerful Java 3D APIs. In the project demo, we prepared several skins of different clothes. When we attached the clothes skins to a built human model, a 360 degree panoramic perspective was possible to observe the effect of trying the clothes on. </p>
<h4>Project Info</h4>
<p>
<span class="inlineRed">Collaborators:</span> Yunbing Ding, Xiaopeng Bi, Jinming Ma
<br />
<span class="inlineRed">Languages & Tools:</span> Verilog, C, Java, Quartus II, Eclipse, 3DMax
<br />
<span class="inlineRed">Resources:</span>
<a class="tipsysouth" original-title="Chinese - Dropbox - 1.36MB" href="https://www.dropbox.com/s/nbfx6s3iubdl05z/%E4%BD%9C%E5%93%81%E8%AE%BE%E8%AE%A1%E6%8A%A5%E5%91%8A%E4%B8%AD%E6%96%87.pdf" target="_blank">Final Report</a>,
<a class="tipsysouth" original-title="English - Dropbox - 369KB" href="https://www.dropbox.com/s/6y4mjzuzhbp0ltz/Final%20English%20Report.pdf" target="_blank">Final Report</a>,
<a class="tipsysouth" original-title="Dropbox - 4.25MB" href="https://dl.dropboxusercontent.com/u/5055823/presentation.pptx" target="_blank">Presentation PPT</a>
<br/>
<span class="inlineRed">Timeline:</span> March 2012 - July 2012
</p>
</div>
</div>
<h3 id="project3">Pitch Match - Practice Assistant for Music Beginners</h3>
<div class="project" style="height:750px;">
<div class="projectcontent left">
<h4 style="margin-top:0;">Objective</h4>
<p>Our goal was to design an app for music rookies as a professional robot-teacher when their music teachers are absent.</p>
<h4>Overview and Challenges</h4>
<p>Innotation, rhythm and sound are three main problems tormenting beginners of playing instruments. When lacking of the on-site instruction of professional music teachers, beginners even don't know where goes wrong during their playing. Pitch Match is a smart app on Android, serving as a professional pitch/rhythm correction assistant for music beginners. Practicing playing instruments is no longer expensive, tedious and difficult! Designing a friendly but professional interface as well as accurate FFT filters is challenging. </p>
<h4>The Journey</h4>
<p> At first, I designed and simulated a FFT filter to extract frequencies of pitches, which generated accurate outputs under the ideal condition. However, when I integrated the FFT filter into our app running on a real phone, the problem emerged because the environmental noise did affect a lot. So I added a module functioning as a collector of environmental noise into the app, mading it more intelligent to filter useless sound frequencies. Another challenge is leveraging the processing speed of normal smart phones and the accuracy of FFT filter. Considering that most frequencies of music pitches are less than 5000Hz, I chose to use a 2048-point FFT filter to ensure the identification accuracy and the smooth operation of the application. After that, my teammates and I devoted to furnish the UI. The elaborated statistics forms and easy-to-use sliding menu were both indispensable elements. We also designed several skins for the application. </p>
<h4>Project Info</h4>
<p>
<span class="inlineRed">Collaborators:</span> Shaojie Wang, Yajie Zhang
<br />
<span class="inlineRed">Languages & Tools:</span> Java, Matlab, Eclipse, Photoshop CS5, Android SDK
<br />
<span class="inlineRed">Resources:</span>
<a class="tipsysouth" original-title="Dropbox - 4.0MB" href="https://dl.dropboxusercontent.com/u/5055823/PitchMatch.apk" target="_blank">APK File</a>,
<a class="tipsysouth" original-title="Dropbox - 3.9MB" href="https://dl.dropboxusercontent.com/u/5055823/PitchMatch.rar" target="_blank">Source Code</a>
<br />
<span class="inlineRed">Timeline:</span> Oct. 2011 - Mar. 2012
</p>
</div>
<div class="projectimg right">
<a href="images/art9.jpg" class="tipsywest fancybox" original-title="APP Screenshots" rel="group"> <img src="images/port9.jpg" alt="demo" />
</a>
<br />
<a href="images/art10.jpg" class="tipsywest fancybox" original-title="APP Screenshots" rel="group"> <img src="images/port10.jpg" alt="demo" />
</a>
<br />
<a href="images/art8.jpg" class="tipsywest fancybox" original-title="APP Screenshots" rel="group"> <img src="images/port8.jpg" alt="demo" />
</a>
<br />
</div>
</div>
<h3 id="project4">MemoQuiz - Game App Development</h3>
<div class="project" style="height:520px;">
<div class="projectimg left">
<a href="images/art5.jpg" class="tipsyeast fancybox" original-title="Screenshots Of The Game" rel="group"> <img src="images/port5.jpg" alt="demo" />
</a>
<br/>
<a href="images/art6.jpg" class="tipsyeast fancybox" original-title="Sales Statistics" rel="group"> <img src="images/port6.jpg" alt="demo" />
</a>
<br/>
</div>
<div class="projectcontent right">
<h4 style="margin-top:0;">Objective</h4>
<p>To design and develop an appealing memory test game app.</p>
<h4>Overview and Challenges</h4>
<p> The biggest challenge is to distinguish my app from a variety of apps.</p>
<h4>The Journey</h4>
<p>The experience is the milestone of my interest in HCI. I participated in the Samsung App Development Competition in my campus when it was my sophomore. At that time, I had neither experience of object-oriented programming beforehand nor ideas about UX and UI design. I started to delve into Java programing with the extreme excitement to make my first app. The game itself was simple. However, I made it sticky through designing hierarchical missions and adding appealing animations. After three months’ constructing, modifying and debugging, my efforts eventually paid off. My first mobile app was successfully approved by the Samsung App Store and until now there have been nearly 40 thousand downloads. </p>
<h4>Project Info</h4>
<p>
<span class="inlineRed">Collaborators:</span> Shaojie Wang, Wentao Zhao, Yunbing Ding
<br />
<span class="inlineRed">Languages & Tools:</span> Java, Eclipse, Photoshop, Bada IDE
<br />
<span class="inlineRed">Resources:</span> <a class="tipsysouth" original-title="Dropbox - 7.94MB" href="https://www.dropbox.com/s/8sttfdo3bp9n8qs/MemoQuiz.rar" target="_blank">Source Code</a>
<br />
<span class="inlineRed">Timeline:</span> Sept. 2010 - March 2011
</p>
</div>
</div>
<div class="galsep" style="text-align:right"><span id="Top">Top</span> </div>
</div>
<!-- close gallery -->
<div id="footer" style="text-align:left; padding-left:10px;">
<br> Visit <a href="projectold.html">old version </a>. Contact me: <a href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=czxttkl@gmail.com" target="_blank">czxttkl@gmail.com</a>
</div>
</div>
</html>