changeset 7:7e05f4f580b7

modify index.html
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Thu, 08 Sep 2011 08:41:09 +0900
parents c193ee47050d
children a2ddbfc1a8f7
files OpenSourceConference/index.html OpenSourceConference/pix/TreeVNC3.png OpenSourceConference/ui/default_utf/pretty.css
diffstat 3 files changed, 111 insertions(+), 51 deletions(-) [+]
line wrap: on
line diff
--- a/OpenSourceConference/index.html	Thu Sep 08 05:55:10 2011 +0900
+++ b/OpenSourceConference/index.html	Thu Sep 08 08:41:09 2011 +0900
@@ -10,6 +10,10 @@
 margin-right: auto;
 text-align: center;
 }
+.textcenter {
+text-align: center;
+}
+
 </style>
 <title>2011/9/6</title>
 <!-- metadata -->
@@ -530,6 +534,11 @@
 	<li>N = 60、 M = 1 となる。</li>
 	<li>724 * 449 の画面分のデータ(0.8M)を送信するとする。 </li>
 	
+	</div>
+	<!-- PAGE -->
+	<div class="slide">
+	  <h1>データ転送量</h1>
+	  <li></li>
 	<table class="center" border=1 cellspacing="0" width=80%>
 	  <tr>
 	    <td></td>
@@ -542,9 +551,6 @@
 	    <td>2.4M</td>
 	  </tr>
 	</table>
-	</div>
-	<!-- PAGE -->
-	<div class="slide">
 
 	<table class="center" width=100% style="text-align: center;">
 	  <tr>
@@ -552,51 +558,118 @@
 	    <td><small>TreeVNC</small></td>
 	  </tr>
 	  <tr>
-	    <td>
-		<img class="scale" src="./pix/NormalVNC3.png" width="300">
+	    <td width=50%>
+		<img class="scale" src="./pix/NormalVNC4.png">
 	      </td>
 	    <td>
-	      <img src="./pix/TreeVNC3.png" width="300">
+	      <img src="./pix/TreeVNC5.png">
 	    </td>
 	  </tr>
 	    </p>
-	</table>
-
-
+	  </table>
+	  <small>	  
+	  <p style="text-align: center">クライアント:60台 TreeVNCは2分木でTreeを構成 </p>
+	  </small>
+      </div>
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>エンコード</h1>
+	<li>MacintoshでVNCを行うとZRLEを使うことができる。</li>
+	<li>データ量がRAWデータの約4分の1のデータ量ですむ。</li>
+	<li class="incremental">TreeVNCではこのZRLEを扱っている。</li>
       </div>
       <!-- PAGE -->
       <div class="slide">
-	<h1>データ量の見積もり</h1>
-	<li>ZRLEエンコードの場合</li>
-	  <li>最初の4bitにどれだけのデータ量が送られてくるのかという情報が送られてくる。</li>
+	<h1>ZRLE</h1>
+	<li>ZRLE : Zlib Run-Length Encoding </li>
+	<ul>
+	  <li>Zlib圧縮(gzip)されたデータ扱うエンコーディング。</li>
+	</ul>
+	  <li>最初の4バイトにはZlibのデータの長さが、続いてZlibのデータが送られてくる。</li>
 	  <small>
-	  <table border=1 width=50%>
+	  <table border=1 width=50% cellspacing="0">
 	    <tr>	
       <td>バイト数</td>
-	      <td><pre>型   [値]</pre></td>
+	      <td><pre>型 </pre></td>
 	      <td>説明 </td>
 	    </tr>
-	    
 	    <tr>
 	      <td>4</td>
 	      <td>U32</td>
 	      <td>length</td>
 	    </tr>
-	    
 	    <tr>
 	      <td>length</td>
 	      <td>U8 array</td>
 	      <td>zlibData</td>
 	    </tr>
-
 	  </table>
 	  </small>
-	  <small>
-	<ul>
-	  <li>ZlibDataはgzipされたデータのこと</li>
-	  <li></li>
+
+	  <li>Zlibデータ</li>
+	  <ul>
+	    <li>Zlibデータは辞書を元にデータの解凍を行う</li>
 	</ul>
-	</small>
+	<li class="incremental">辞書がなければデータを正しく解凍できない</li>
+	</div>
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>ZRLEの問題</h1>
+	<li>辞書はZlibデータの最初に送られてくる。</li>
+	<li>ZRLEのデータを最初から送ることができれば、辞書も送ることができる。</li>
+	<li>データの途中から送ると辞書は送られず、正しく解凍を行うことができない。</li>
+	<table class="textcenter" width=100%>
+	  <tr>
+	    <td>
+	  <img src="./pix/ZRLE.png" width="600" >
+	  </td>
+	<td>
+	    <img src="./pix/ZRLE2.png" width="600" >
+	  </td>
+	</tr>
+	  </table>
+	</div>
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>ZRLEE</h1>
+	<li>そこで、Top ProxyにZRLEのデータを再度圧縮し直すことで辞書を付けてもらうことにした。</li>
+<small>	
+	<pre>
+Deflater nDeflater = deflater; // new Deflater();
+LinkedList<ByteBuffer> out = new LinkedList<ByteBuffer>();
+unzip(inflater, inputs, 0 , out, INFLATE_BUFSIZE);
+// dump32(inputs);
+int len2 = zip(nDeflater, out, 0, bufs);
+</pre>
+</small>
+<li>一度再圧縮してしまえば後はどこからデータを流しても問題ない。</li>
+	<table class="textcenter" width=100%>
+	  <tr>
+	    <td>
+	      <img src="./pix/ZRLEE2.png" width="600">
+		</td>
+	      <td>
+	      <img src="./pix/ZRLEE3.png" width="600">
+		</td>
+	      </tr>
+	    </table>
+	</div>
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>ZRLEE</h1>
+	  <li>クライアント側は毎回新しい解凍器(Deflater)を使うようにする。</li>
+	  <pre>
+	    if (rfb.updateRectEncoding==RfbProto.EncodingZRLEE) zrleInStream = null;
+	    if (zrleInStream == null)
+	    zrleInStream = new ZlibInStream();
+	  </pre>
+	</div>
+      <!-- PAGE -->
+      <div class="slide">
+	<h1>ZRLEの問題</h1>
+	<li>解凍に必要な辞書を取り出すことができないため、ZRLEのデータはそのまま投げるだけでは正しく解凍されない。</li>
+	<li>そこで、VNC Serverへ接続するTop ProxyはZRLEで送られてきたデータを毎回新しく圧縮し直すという方法をとった。</li>
+	<li>一度圧縮し直されたデータはそのまま流すことができる。よってクライアント側では圧縮し直す必要はない。 </li>
 	</div>
       <!-- PAGE -->
       <div class="slide">
@@ -656,23 +729,6 @@
 	</div>
       <!-- PAGE -->
       <div class="slide">
-	<h1>エンコードの問題 </h1>
-	<li>ZRLE : Zlib Run-Length Encoding </li><br>データをZlib圧縮扱うエンコーディング。
-	  <br><small>Macintoshでもこのエンコードは使うことができる。</small></li>
-	<li>Rawエンコードより約1/8倍少ないデータ量ですむ。</li>
-	<li>解凍器(Deflater)は辞書を持っていて、その辞書を元に解凍を行う。</li>
-	<li class="incremental">この辞書を吐き出す(flush)する機能がJavaにはなかった。</li>
-	</div>
-      <!-- PAGE -->
-      <div class="slide">
-	<h1>ZRLEの問題</h1>
-	<li>解凍に必要な辞書を取り出すことができないため、ZRLEのデータはそのまま投げるだけでは正しく解凍されない。</li>
-	<li>そこで、VNC Serverへ接続するTop ProxyはZRLEで送られてきたデータを毎回新しく圧縮し直すという方法をとった。</li>
-	<li>一度圧縮し直されたデータはそのまま流すことができる。よってクライアント側では圧縮し直す必要はない。 </li>
-     	<li>このエンコードはZRLEE(Economy)として扱うことにした。</li>
-	</div>
-      <!-- PAGE -->
-      <div class="slide">
 	<h1>TreeVNCの利点と欠点</h1>
 	<ul>
 	  <li>ケーブル1本への負荷が減る。一極集中型よりスループットを維持できる。</li>
Binary file OpenSourceConference/pix/TreeVNC3.png has changed
--- a/OpenSourceConference/ui/default_utf/pretty.css	Thu Sep 08 05:55:10 2011 +0900
+++ b/OpenSourceConference/ui/default_utf/pretty.css	Thu Sep 08 08:41:09 2011 +0900
@@ -1,11 +1,9 @@
 /* Following are the presentation styles -- edit away! */
 
-//body {background: #FFF url(bodybg.gif) -16px 0 no-repeat; color: #000; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 2.25em;}
-body {background: #FFF -16px 0 no-repeat; color: #000; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 2.25em;}
-a:link, a:visited {text-decoration: none; color: #00C;}
+body {background: #FFF; color: #000; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 2.25em;}
+a:link, a:visited {text-decoration: none; color: #507aaa;}
 
 h1, h2, h3, h4 {font-size: 100%; margin: 0; padding: 0; font-weight: inherit;}
-h1 {text-shadow: 0.1em 0.1em 0.1em #666;}
 
 ul, pre {margin: 0; line-height: 1em;}
 html, body {margin: 0; padding: 0;}
@@ -20,28 +18,34 @@
 img {border: 0;}
 kbd {font-weight: bold; font-size: 1em;}
 sup {font-size: smaller; line-height: 1px;}
+body {
+	background-image: url("concurrency_logo.png");
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-position: right 94% 
+}
 
 .slide code {padding: 2px 0.25em; font-weight: bold; color: #c00;}
 .slide code.bad, code del {color: red;}
 .slide code.old {color: silver;}
 .slide pre {padding: 0; margin: 0.25em 0 0.5em 0.5em; color: #533; font-size: 90%;}
 .slide pre code {display: block;}
-.slide ul {margin-left: 5%; margin-right: 7%; list-style: disc;}
+.slide ul {margin-left: 0%; margin-right: 0%; list-style: disc;}
+.slide ol {margin-left: 0.75em; margin-right: 0%; list-style: decimal;}
 .slide li {margin-top: 0.75em; margin-right: 0;}
 .slide ul ul {line-height: 1;}
-.slide ul ul li {margin: .2em; font-size: 85%; list-style: square;}
+.slide ul ul li {margin: 0.75em 2em; font-size: 85%; list-style: square;}
 .slide img.leader {display: block; margin: 0 auto;}
 
-div#header, div#footer {background: #005; color: #AAB; font-family: Verdana, Arial, Helvetica, sans-serif;}
-//div#header {background: #005 url(bodybg.gif) -16px 0 no-repeat; line-height: 1px;}
-div#header {background: #005 -16px 0 no-repeat; line-height: 1px;}
+div#header, div#footer {background: #507aaa; color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif;}
+div#header {background: #507aaa; line-height: 1px;}
 div#footer {font-size: 0.5em; font-weight: bold; padding: 1em 0;}
 #footer h1, #footer h2 {border: none; display: block; padding: 0; position:absolute; bottom:0.5em;}
 #footer h1 {left:1em;}
 #footer h2 {right:1em; font-style: italic;}
 
 div.long {font-size: 0.75em;}
-.slide h1 {position: absolute; top: 0.7em; left: 87px; z-index: 1; margin: 0; padding: 0.3em 0 0 50px; white-space: nowrap; font: bold 150%/1em Arial, Helvetica, sans-serif; text-transform: capitalize; color: #DDE; background-color: transparent;}
+.slide h1 {position: absolute; top: 0.7em; left: 0px; z-index: 1; margin: 0; padding: 0.3em 0 0 50px; white-space: nowrap; font: bold 150%/1em Arial, Helvetica, sans-serif; text-transform: capitalize; color: #FFF; background-color: transparent;}
 .slide h3 {font-size: 130%;}
 h1 abbr {font-variant: small-caps;}
 
@@ -58,7 +62,7 @@
 
 #jumplist, #volumelist {padding: 0; margin: 0; width: 1.5em; height: 2.25em; cursor: pointer;}
 
-#currentSlide {white-space: nowrap; text-align: center; margin-bottom: -0.5em; font-size: 0.5em; background-color: transparent; color: #666;}
+#currentSlide {white-space: nowrap; text-align: center; margin-bottom: -0.5em; font-size: 0.5em; background-color: transparent; color: #FFF;}
 
 #guru {position: absolute; visibility: visible; left: 0px; top: 0px; padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; z-index: 10;}
 #guru div {border: solid 3px red; padding: 4px; font-family: monospace; font-size: 60%; width: auto; height: auto; color: red; text-align: center;}
@@ -94,4 +98,4 @@
 table.fs50 tr td, table.fs50 tr th, div.fs50, pre.fs50, p.fs50 ,ul.fs50 {font-size: 0.5em; }
 
 #soundmanager-debug {position:fixed; top:0px; right:0px; width:30em; height:20em; overflow:auto; border:1px solid red; padding:1em; margin:2em; font-family:"sans serif"; font-size: 12px;color: black; background-color:#f6f6f6; z-index: 100;}
-#soundmanager-debug code {font-size: 11px;}
\ No newline at end of file
+#soundmanager-debug code {font-size: 11px;}