|
0
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta charset='utf-8'>
|
|
|
5 <title>Seminar</title>
|
|
|
6
|
|
|
7 <!--
|
|
|
8 Notes on CSS media types used:
|
|
|
9
|
|
|
10 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
|
|
|
11 2) screen -> outline mode (display all slides-at-once on screen)
|
|
|
12 3) print -> print (and print preview)
|
|
|
13
|
|
|
14 Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
|
|
|
15
|
|
|
16 Questions, comments?
|
|
|
17 - send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
|
|
|
18 -->
|
|
|
19
|
|
|
20 <!-- style sheet links -->
|
|
|
21 <link rel="stylesheet/less" href="themes/blank/projection.css.less" media="screen,projection">
|
|
|
22 <link rel="stylesheet/less" href="themes/blank/screen.css.less" media="screen">
|
|
|
23 <link rel="stylesheet/less" href="themes/blank/print.css.less" media="print">
|
|
|
24
|
|
|
25 <link rel="stylesheet/less" href="blank.css.less" media="screen,projection">
|
|
|
26
|
|
|
27 <!-- Notes about less css support
|
|
|
28 - all less stylesheets (*.css.less) need to get listed/loaded first (before the less.js script)
|
|
|
29 - find more info about less.js online @ http://lesscss.org
|
|
|
30
|
|
|
31 ***** NOTE:
|
|
|
32 less.js browser script currently won’t work if you’re using Google Chrome
|
|
|
33 and the path to your page starts with "file:///" due to a known Chrome issue.
|
|
|
34 (In the developer/js console you will see:
|
|
|
35 XMLHttpRequest cannot load file:///../s6/shared/projection.css.less.
|
|
|
36 Cross origin requests are only supported for HTTP.)
|
|
|
37 -->
|
|
|
38
|
|
|
39 <!-- add js libs (less, jquery) -->
|
|
|
40 <script src="js/less-1.1.4.min.js"></script>
|
|
|
41 <script src="js/jquery-1.7.min.js"></script>
|
|
|
42
|
|
|
43 <!-- S6 JS -->
|
|
|
44 <script src="js/jquery.slideshow.js"></script>
|
|
|
45 <script src="js/jquery.slideshow.counter.js"></script>
|
|
|
46 <script src="js/jquery.slideshow.controls.js"></script>
|
|
|
47 <script src="js/jquery.slideshow.footer.js"></script>
|
|
|
48 <script src="js/jquery.slideshow.autoplay.js"></script>
|
|
|
49 <script>
|
|
|
50 $(document).ready( function() {
|
|
|
51 Slideshow.init();
|
|
|
52
|
|
|
53 // Example 2: Start Off in Outline Mode
|
|
|
54 // Slideshow.init( { mode: 'outline' } );
|
|
|
55
|
|
|
56 // Example 3: Use Custom Transition
|
|
|
57 // Slideshow.transition = transitionScrollUp;
|
|
|
58 // Slideshow.init();
|
|
|
59
|
|
|
60 // Example 4: Start Off in Autoplay Mode with Custom Transition
|
|
|
61 // Slideshow.transition = transitionScrollUp;
|
|
|
62 // Slideshow.init( { mode: 'autoplay' } );
|
|
|
63 } );
|
|
|
64 </script>
|
|
|
65
|
|
|
66 <!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
|
|
|
67 <!--[if IE]>
|
|
|
68 <script src="js/jquery.microsoft.js"></script>
|
|
|
69 <![endif]-->
|
|
|
70
|
|
|
71 </head>
|
|
|
72 <body>
|
|
|
73
|
|
|
74 <div class="layout">
|
|
|
75 <div id="header"></div>
|
|
|
76 <div id="footer">
|
|
|
77 <div align="right">
|
|
|
78 <img src="images/concurrency.png" width="200">
|
|
|
79 </div>
|
|
|
80 </div>
|
|
|
81 </div>
|
|
|
82
|
|
|
83 <div class="presentation">
|
|
|
84
|
|
|
85 <!-- add slides here; example -->
|
|
|
86
|
|
|
87 <div class='slide cover'>
|
|
|
88 <table width="90%" height="90%" border="0" align="center">
|
|
|
89 <tr>
|
|
|
90 <td><div align="center">
|
|
2
|
91 <h1><font color="#808db5">TreeVNC</font></h1>
|
|
0
|
92 </div></td>
|
|
|
93 </tr>
|
|
|
94 <tr>
|
|
|
95 <td><div align="left">
|
|
|
96 Miwa Oshiro
|
|
|
97 <script>
|
|
|
98 var date = new Date();
|
|
|
99 var year = date.getFullYear();
|
|
|
100 var month = date.getMonth();
|
|
|
101 var day = date.getDate();
|
|
|
102
|
|
|
103 var monthList = new Array("January","February","March","April","May","June",
|
|
|
104 "July","August","September","October","November","December");
|
|
|
105
|
|
|
106 document.write(monthList[month]+" "+day+", "+year);
|
|
|
107
|
|
|
108 </script>
|
|
|
109 <hr style="color:#ffcc00;background-color:#ffcc00;text-align:left;border:none;width:300%;height:0.2em;">
|
|
|
110 </div></td>
|
|
|
111 </tr>
|
|
|
112 </table>
|
|
|
113 </div>
|
|
|
114
|
|
|
115
|
|
|
116
|
|
|
117 <div class='slide'>
|
|
2
|
118 <h2>研究目的</h2>
|
|
|
119 <p>本研究では、ゼミや講義をする際に、</p>
|
|
0
|
120 <ul>
|
|
2
|
121 <li>プレゼンテーションの資料が見えない、聴こえないといった問題を失くすこと</li>
|
|
|
122 <li>スムーズな画面表示・画面の切り替えが行うこと</li>
|
|
|
123 <li>綺麗な画質を保ちながらプレゼンテーションすること</li>
|
|
|
124 <li>参加者同士が充分なコミュニケーションを取れること</li>
|
|
0
|
125 </ul>
|
|
2
|
126 <p>を目的としている。</p>
|
|
0
|
127 </div>
|
|
|
128
|
|
1
|
129
|
|
|
130
|
|
0
|
131 <div class='slide'>
|
|
2
|
132 <h2>研究目的を果たすための中間目標</h2>
|
|
3
|
133 <h3>遠距離にいる人でもゼミ・授業に参加できる</h3>
|
|
2
|
134 <ul>
|
|
3
|
135 <li>同一ネットワークの外からTreeVNCに接続できるように</li>
|
|
|
136 <li>遠距離なので、音声の共有も必要になる</li>
|
|
2
|
137 </ul>
|
|
1
|
138 </div>
|
|
|
139
|
|
|
140
|
|
|
141 <div class='slide'>
|
|
2
|
142 <h2>やってきたこと</h2>
|
|
3
|
143 <p>共有する画面サイズを固定することができるオプションを追加しました。</p>
|
|
4
|
144 <p>共有する画面サイズをホスト側で指定できるオプションを追加しているところです。</p>
|
|
2
|
145 </div>
|
|
1
|
146
|
|
2
|
147 <div class='slide'>
|
|
3
|
148 <h2>共有する画面サイズを固定する上での知識</h2>
|
|
|
149 <h3>画面データ(全画面更新・差分更新)の送受信の流れ</h3>
|
|
2
|
150 <ul>
|
|
3
|
151 <li>framebufferUpdateというメッセージに付加される。</li>
|
|
|
152 <li>クライアントからサーバへ、framebufferUpdateRequestを送信する。</li>
|
|
|
153 <li>サーバからクライアントへ、framebufferUpdateが送信される。</li>
|
|
2
|
154 </ul>
|
|
3
|
155 <h3>framebufferUpdateRequest</h3>
|
|
2
|
156 <ul>
|
|
3
|
157 <li>クライアントがサーバに送信してほしい範囲をリクエストすることができる。</li>
|
|
2
|
158 <ul>
|
|
3
|
159 <li>incremental : 全画面更新 or 差分更新</li>
|
|
|
160 <li>x-position : x座標</li>
|
|
|
161 <li>y-position : y座標</li>
|
|
|
162 <li>width : 幅</li>
|
|
|
163 <li>height : 高さ</li>
|
|
2
|
164 </ul>
|
|
|
165 </ul>
|
|
0
|
166 </div>
|
|
|
167
|
|
|
168 <div class='slide'>
|
|
3
|
169 <h2>共有する画面サイズを固定するための変更</h2>
|
|
|
170 <h3>framebufferUpdateRequestの要素の変更</h3>
|
|
|
171 <ul>
|
|
|
172 <li>リクエストする画面サイズを1280 x 800としました。</li>
|
|
|
173 </ul>
|
|
|
174 <h3>Timerの追加</h3>
|
|
2
|
175 <ul>
|
|
3
|
176 <li>いままで全画面更新をしていたframebufferUpdateRequestを変更する。</li>
|
|
|
177 <li>Requestする画面サイズを変更すると、framebufferUpdateが滞ってしまった。</li>
|
|
|
178 <li>tightVNCでも試したが、同じような症状が発生してしまう。</li>
|
|
|
179 <li>定期的(100ミリ秒毎)に差分をRequestするよう、Timerを追加しました。</li>
|
|
|
180 </ul>
|
|
|
181 </div>
|
|
|
182
|
|
4
|
183 <div class='slide'>
|
|
|
184 <h2>画面サイズをホスト側で変更できるようにしたい</h2>
|
|
|
185 <h3>viewerのサイズをそのまま利用</h3>
|
|
|
186 <ul>
|
|
|
187 <li>share buttonを押した時点のサイズを取得</li>
|
|
|
188 <li>取得したサイズを、framebufferUpdateRequestに当てはめる</li>
|
|
|
189 <li>オプションでON/OFFを行う</li>
|
|
|
190 </ul>
|
|
|
191 </div>
|
|
3
|
192
|
|
|
193
|
|
|
194 <div class='slide'>
|
|
|
195 <h2>画面サイズを変更できる枠を作成したい</h2>
|
|
|
196 <h3>枠をどのように使うか</h3>
|
|
|
197 <ul>
|
|
|
198 <li>共有する画面サイズを指定するための枠を作りたい。</li>
|
|
|
199 <li>枠の内側を透明化する。</li>
|
|
|
200 <li>host側で、viewerを閉じる代わりに、この枠を表示する。</li>
|
|
|
201 <li>枠にボタンを設置しそれを押すと、rootに枠のサイズ(幅・高さ・x-position・y-position)が送信されるように。</li>
|
|
|
202 <li>rootからVNCServerへと取得したサイズを利用した、framebufferUpdateRequestを送信されるように。</li>
|
|
|
203 </ul>
|
|
|
204 </div>
|
|
|
205
|
|
|
206
|
|
|
207
|
|
|
208 <div class='slide'>
|
|
|
209 <h2>今後の課題</h2>
|
|
4
|
210 <h3>OS授業で実験した際に起こった問題</h3>
|
|
3
|
211 <ul>
|
|
4
|
212 <li>awdl0というネットワークインターフェースが起動しているとエラーが出た問題</li>
|
|
|
213 <li>lostparent時に落ちる問題</li>
|
|
|
214 <li>死んだ子nodeに接続しようとし失敗する問題</li>
|
|
|
215 </ul>
|
|
|
216 <h3>解決と今後の課題</h3>
|
|
|
217 <ul>
|
|
|
218 <li></li>
|
|
3
|
219 <li>枠の追加をし、host側で指定した画面サイズが共有できるようにする。</li>
|
|
|
220 <li>画面更新が頻繁な時、余計なアニメーションは読み飛ばすという処理の追加。</li>
|
|
2
|
221 </ul>
|
|
0
|
222 </div>
|
|
|
223
|
|
|
224 <div class='slide'>
|
|
3
|
225 <h2>グラフ</h2>
|
|
|
226 <ul>
|
|
|
227 <li>CheckDelayを利用したグラフを作成したい。</li>
|
|
|
228 <h3>作るとしたら、どういったグラフが良いか</h3>
|
|
0
|
229 <ul>
|
|
3
|
230 <li>更新される画面サイズの量と画面更新時の遅延が関係してるのではないかと考えている。</li>
|
|
|
231 <li>折れ線グラフを、木構造の各階層毎・各ネットワーク毎に作成する。</li>
|
|
|
232 <li>[ x軸 : 更新された画面のサイズ、y軸 : 遅延時間 ]</li>
|
|
|
233 <li>授業中に不具合が生じてしまって、あまりデータが取得できていない問題を解決・・・。</li>
|
|
|
234 </ul>
|
|
0
|
235 </ul>
|
|
|
236 </div>
|
|
|
237
|
|
2
|
238 <div class='slide'>
|
|
3
|
239 <h2>現在取得できているデータからのグラフ</h2>
|
|
|
240 <ul>
|
|
|
241 <li>取得できているデータが少ない。</li>
|
|
|
242 <li>画面サイズが大きいほど遅延が生じているという予想に反してバラバラになってる。</li>
|
|
|
243 <li>send checkDelayとreceive checkDelayの間に更新されているデータを、画面サイズとしている。</li>
|
|
|
244 <li>有線接続だと、checkDelayの間に画面サイズのデータが取得できない。</li>
|
|
|
245 </ul>
|
|
2
|
246 <center>
|
|
|
247 <object data="images/node1.pdf" width="600" height="600">
|
|
|
248 </center>
|
|
|
249 </div>
|
|
|
250
|
|
|
251
|
|
0
|
252
|
|
|
253
|
|
|
254
|
|
|
255
|
|
|
256 </div> <!-- presentation -->
|
|
|
257 </body>
|
|
|
258 </html>
|
