test-server/test.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4  <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
   5  <script src="/lws-common.js"></script>
   6  <title>Minimal Websocket test app</title>
   7 <style type="text/css">
   8         span.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; }
   9         .browser { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#ffff00; vertical-align:middle; text-align:center; background:#d0b070; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
  10         .group2 { vertical-align:middle;
  11                 text-align:center;
  12                 background:#f0f0e0;
  13                 padding:12px;
  14                 -webkit-border-radius:10px;
  15                 -moz-border-radius:10px;
  16                 border-radius:10px; }
  17         .explain { vertical-align:middle;
  18                 text-align:center;
  19                 background:#f0f0c0; padding:12px;
  20                 -webkit-border-radius:10px;
  21                 -moz-border-radius:10px;
  22                 border-radius:10px;
  23                 color:#404000; }
  24         td.wsstatus { vertical-align:middle; width:200px; height:50px;
  25                 text-align:center;
  26                 background:#f0f0c0; padding:6px;
  27                 -webkit-border-radius:8px;
  28                 -moz-border-radius:8px;
  29                 border-radius:8px;
  30                 color:#404000; }
  31         .tdform { vertical-align:middle; width:200px; height:50px;
  32                 text-align:center;
  33                 background:#f0f0d0; padding:6px;
  34                 -webkit-border-radius:8px;
  35                 -moz-border-radius:8px; margin:10px;
  36                 border-radius:8px;
  37                 border: 1px solid black;
  38                 border-collapse: collapse;font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000;
  39                 color:#404000; }
  40
  41         td.l { vertical-align:middle;
  42                 text-align:center;
  43                 background:#d0d0b0;
  44                 padding:3px;
  45                 -webkit-border-radius:3px;
  46                 -moz-border-radius:3px;
  47                 border-radius:3px; }
  48         .content { vertical-align:top; text-align:center; background:#fffff0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
  49         .canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
  50 .tabs {
  51   position: relative;
  52   min-height: 750px; /* This part sucks */
  53   clear: both;
  54   margin: 25px 0;
  55 }
  56 .tab {
  57   float: left;
  58 }
  59 .tab label {
  60   background: #eee;
  61   padding: 10px;
  62   border: 1px solid #ccc;
  63   margin-left: -1px;
  64   position: relative;
  65   left: 1px;
  66 }
  67 .tab [type=radio] {
  68   display: none;
  69 }
  70 .content {
  71   position: absolute;
  72   top: 28px;
  73   left: 0;
  74   background: white;
  75   right: 0;
  76   bottom: 0;
  77   padding: 20px;
  78   border: 1px solid #ccc;
  79 }
  80 [type=radio]:checked ~ label {
  81   background: white;
  82   border-bottom: 1px solid white;
  83   z-index: 2;
  84 }
  85 [type=radio]:checked ~ label ~ .content {
  86   z-index: 1;
  87 }
  88 </style>
  89 </head>
  90
  91 <body>
  92 <header></header>
  93 <article>
  94
  95 <table><tr><td>
  96
  97 <table width=600px>
  98  <tr>
  99   <td valign=middle align=center>
 100    <a href="https://libwebsockets.org">
 101     <img src="libwebsockets.org-logo.png"></a></td><td>
 102         <section class="browser">Detected Browser:
 103         <div id=brow>...</div></section>
 104   </td>
 105  </tr>
 106
 107 </table>
 108 </td></tr>
 109 <tr><td colspan=2 align=center>
 110 Click <a href="leaf.jpg" target="_blank">Here</a> to
 111 have the test server send a big picture by http.
 112 </td></tr>
 113 <tr><td colspan=2>
 114 <div class="tabs">
 115
 116    <div class="tab">
 117        <input type="radio" id="tab-1" name="tab-group-1" checked>
 118        <label for="tab-1">Dumb Increment Demo</label>
 119
 120        <div class="content">
 121         <div id="dumb" class="group2">
 122          <table>
 123           <tr>
 124            <td id=wsdi_statustd align=center class="wsstatus">
 125              <span id=wsdi_status>Websocket connection not initialized</span></td>
 126            <td><span class="title">dumb increment-protocol</span></td>
 127            </tr>
 128            <tr>
 129            <td class="explain" colspan=2>
 130 The incrementing number is coming from the server at 20Hz and is individual for
 131 each connection to the server... try opening a second browser window.
 132 <br/><br/>
 133 The button sends a message over the websocket link to ask the server
 134 to zero just this connection's number.
 135            </td>
 136           </tr>
 137            <tr>
 138             <td align=center><div id=number style="font-size:120%;"> </div></td>
 139             <td align=center>
 140              <input type=button id=offset value="Reset counter" onclick="reset();" >
 141              <input type=button id=junk value="Send junk" onclick="junk();" >
 142             </td>
 143             </tr>
 144          </table>
 145         </div>
 146        </div>
 147    </div>
 148
 149    <div class="tab">
 150     <input type="radio" id="tab-2" name="tab-group-1">
 151     <label for="tab-2">Mirror Demo</label>
 152
 153     <div class="content">
 154      <div id="mirror" class="group2">
 155       <table>
 156        <tr>
 157          <td colspan=1 id=wslm_statustd align=center class="wsstatus">
 158          <span id=wslm_status>Websocket connection not initialized</span>
 159         </td>
 160         <td>
 161          <span class="title">lws-mirror-protocol</span>
 162         </td>
 163        </tr>
 164        <tr>
 165        <td colspan=2>
 166          <div class="explain">
 167 Use the mouse to draw on the canvas below -- all other browser windows open
 168 on this page see your drawing in realtime and you can see any of theirs as
 169 well.
 170 <br/><br/>
 171 The lws-mirror protocol doesn't interpret what is being sent to it, it just
 172 re-sends it to every other websocket it has a connection with using that
 173 protocol, including the guy who sent the packet.
 174 <br/><br/>
 175 <b>libwebsockets-test-client</b> joins in by spamming circles on to this shared canvas when
 176 run.
 177          </div>
 178         </td>
 179        </tr>
 180        <tr>
 181         <td colspan=2>Drawing color:
 182           <select id="color" onchange="update_color();">
 183                 <option value=#000000>Black</option>
 184                 <option value=#0000ff>Blue</option>
 185                 <option value=#20ff20>Green</option>
 186                 <option value=#802020>Dark Red</option>
 187           </select>
 188        </tr>
 189        <tr>
 190          <td colspan=2 width=500 height=320>
 191                 <div id="wslm_drawing" style="background:white"></div>
 192         </td>
 193        </tr>
 194       </table>
 195      </div>
 196     </div>
 197    </div>
 198
 199     <div class="tab">
 200        <input type="radio" id="tab-3" name="tab-group-1">
 201        <label for="tab-3">Close Testing</label>
 202
 203        <div class="content">
 204 <div id="ot" class="group2">
 205       <table>
 206        <tr>
 207         <td>
 208
 209                 </td></tr>
 210                 <tr><td id=ot_statustd align=center class="wsstatus">
 211                  <span id=ot_status>Websocket connection not initialized</span>
 212                 </td>
 213                 <td colspan=2><span class="title">Open and close testing</span></td>
 214                 </tr>
 215                 <tr>
 216 <td class="explain" colspan=3 style="padding:3">
 217 To help with open and close testing, you can open and close a connection by hand using
 218  the buttons.<br>
 219  "<b>Close</b>" closes the connection from the browser with code 3000
 220   and reason 'Bye!".<br>
 221  "<b>Request Server Close</b>" sends a message asking the server to
 222 initiate the close, which it does with code 1001 and reason "Seeya".
 223 </td></tr>
 224                 <tr>
 225                 <td align=center><input type=button id=ot_open_btn value="Open" onclick="ot_open();" ></td>
 226                 <td align=center><input type=button id=ot_close_btn disabled value="Close" onclick="ot_close();" ></td>
 227                 <td align=center><input type=button id=ot_req_close_btn disabled value="Request Server Close" onclick="ot_req_close();" ></td>
 228                 </tr>
 229
 230 </table>
 231
 232 </div>
 233        </div>
 234    </div>
 235
 236     <div class="tab">
 237        <input type="radio" id="tab-4" name="tab-group-1">
 238        <label for="tab-4">Server info</label>
 239
 240        <div class="content">
 241 <div id="ot" class="group2">
 242       <table>
 243        <tr>
 244         <td id=s_statustd align=center class="wsstatus">
 245          <div id=s_status>Websocket connection not initialized</div>
 246         </td>
 247                 <td colspan=1>
 248 <span class="title">Server Info</span>
 249         </td>
 250         </tr><tr>
 251 <td class="explain" colspan=2>
 252 This information is sent by the server over a ws[s] link and updated live
 253 whenever the information changes server-side.
 254 </td></tr>
 255         <tr>
 256         <td align=center colspan=2><div id=servinfo></div></td>
 257         </tr>
 258         <tr>
 259         <td align=center colspan=2><div id=conninfo style="border : solid 2px #e0d040; padding : 4px; width : 500px; height : 350px; overflow : auto; "></</div></td>
 260         </tr>
 261 </table>
 262 </div>
 263        </div>
 264    </div>
 265
 266     <div class="tab">
 267        <input type="radio" id="tab-5" name="tab-group-1">
 268        <label for="tab-5">POST</label>
 269
 270        <div class="content">
 271 <div id="ot" class="group2">
 272       <table width=100%>
 273        <tr>
 274                 <td colspan=1>
 275 <span class="title">POST Form testing</span>
 276         </td>
 277         </tr><tr>
 278 <td class="explain" colspan=2>
 279 This tests POST handling in lws.
 280 </td></tr>
 281         <tr>
 282         <td align=center colspan=2 class=tdform><div id=postinfo style=form>
 283         FORM 1: send with urlencoded POST body args<br>
 284         <form action="formtest" method="post">
 285  <span style="font-size:12pt;">Some text: </span>
 286   <input type="text" name="text" value="Give me some text"><br>
 287   <input type="submit" name="send" value="Send the form">
 288         </form>
 289         </div></td>
 290         </tr>
 291
 292 <script>
 293 function check_file()
 294 {
 295         var f = document.getElementById('file').files[0];
 296         var max_len = 100000;
 297         var dis = 0;
 298
 299         if (f) {
 300                 if (f.size >= max_len) {
 301                         dis = 1;
 302                         document.getElementById('file_info').innerHTML =
 303                                 "<span style=\"color:red;font-weight:bold\">File larger than "+max_len+"</span>";
 304                 } else
 305                         document.getElementById('file_info').innerHTML =
 306                                 "File length "+f.size;
 307         } else
 308                 dis = 1;
 309
 310         document.getElementById('upload').disabled = dis;
 311 }
 312 </script>
 313
 314         <tr>
 315         <td align=center colspan=2 class=tdform><div id=postinfo style=form>
 316         FORM 2: send with multipart/form-data<br>
 317         (can handle file upload, test limited to 100KB)<br>
 318         <form name=multipart action="formtest" method="post" enctype="multipart/form-data">
 319   <span style="font-size:12pt;">Some text: </span>
 320   <input type="text" name="text" value="Give me some text">
 321 <br>
 322   <input type="file" name="file" id="file" size="20"
 323      onchange="check_file();">&nbsp;<span id=file_info style="font-size:12pt;"></span><br>
 324     <input type="submit" id="upload" name="upload" disabled=1 value="Upload">
 325         </form>
 326         </div></td>
 327         </tr>
 328
 329 </table>
 330 </div>
 331        </div>
 332    </div>
 333
 334 </div>
 335 </td></tr></table>
 336
 337 Looking for support? <a href="https://libwebsockets.org">https://libwebsockets.org</a>, <a href="https://github.com/warmcat/libwebsockets">https://github.com/warmcat/libwebsockets</a></a><br/>
 338 Join the mailing list: <a href="https://libwebsockets.org/mailman/listinfo/libwebsockets">https://libwebsockets.org/mailman/listinfo/libwebsockets</a>
 339
 340 </article>
 341
 342 <script>
 343
 344 /*
 345  * We display untrusted stuff in html context... reject anything
 346  * that has HTML stuff in it
 347  */
 348
 349 function san(s)
 350 {
 351         if (s.search("<") != -1)
 352                 return "invalid string";
 353
 354         return s;
 355 }
 356
 357 lws_gray_out(true,{'zindex':'499'});
 358
 359 /* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
 360
 361 var BrowserDetect = {
 362         init: function () {
 363                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
 364                 this.version = this.searchVersion(navigator.userAgent)
 365                         || this.searchVersion(navigator.appVersion)
 366                         || "an unknown version";
 367                 this.OS = this.searchString(this.dataOS) || "an unknown OS";
 368         },
 369         searchString: function (data) {
 370                 for (var i=0;i<data.length;i++) {
 371                         var dataString = data[i].string;
 372                         var dataProp = data[i].prop;
 373                         this.versionSearchString = data[i].versionSearch || data[i].identity;
 374                         if (dataString) {
 375                                 if (dataString.indexOf(data[i].subString) != -1)
 376                                         return data[i].identity;
 377                         }
 378                         else if (dataProp)
 379                                 return data[i].identity;
 380                 }
 381         },
 382         searchVersion: function (dataString) {
 383                 var index = dataString.indexOf(this.versionSearchString);
 384                 if (index == -1) return;
 385                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
 386         },
 387         dataBrowser: [
 388                 {
 389                         string: navigator.userAgent,
 390                         subString: "Chrome",
 391                         identity: "Chrome"
 392                 },
 393                 {       string: navigator.userAgent,
 394                         subString: "OmniWeb",
 395                         versionSearch: "OmniWeb/",
 396                         identity: "OmniWeb"
 397                 },
 398                 {
 399                         string: navigator.vendor,
 400                         subString: "Apple",
 401                         identity: "Safari",
 402                         versionSearch: "Version"
 403                 },
 404                 {
 405                         prop: window.opera,
 406                         identity: "Opera",
 407                         versionSearch: "Version"
 408                 },
 409                 {
 410                         string: navigator.vendor,
 411                         subString: "iCab",
 412                         identity: "iCab"
 413                 },
 414                 {
 415                         string: navigator.vendor,
 416                         subString: "KDE",
 417                         identity: "Konqueror"
 418                 },
 419                 {
 420                         string: navigator.userAgent,
 421                         subString: "Firefox",
 422                         identity: "Firefox"
 423                 },
 424                 {
 425                         string: navigator.vendor,
 426                         subString: "Camino",
 427                         identity: "Camino"
 428                 },
 429                 {               // for newer Netscapes (6+)
 430                         string: navigator.userAgent,
 431                         subString: "Netscape",
 432                         identity: "Netscape"
 433                 },
 434                 {
 435                         string: navigator.userAgent,
 436                         subString: "MSIE",
 437                         identity: "Explorer",
 438                         versionSearch: "MSIE"
 439                 },
 440                 {
 441                         string: navigator.userAgent,
 442                         subString: "Gecko",
 443                         identity: "Mozilla",
 444                         versionSearch: "rv"
 445                 },
 446                 {               // for older Netscapes (4-)
 447                         string: navigator.userAgent,
 448                         subString: "Mozilla",
 449                         identity: "Netscape",
 450                         versionSearch: "Mozilla"
 451                 }
 452         ],
 453         dataOS : [
 454                 {
 455                         string: navigator.platform,
 456                         subString: "Win",
 457                         identity: "Windows"
 458                 },
 459                 {
 460                         string: navigator.platform,
 461                         subString: "Mac",
 462                         identity: "Mac"
 463                 },
 464                 {
 465                            string: navigator.userAgent,
 466                            subString: "iPhone",
 467                            identity: "iPhone/iPod"
 468             },
 469                 {
 470                         string: navigator.platform,
 471                         subString: "Linux",
 472                         identity: "Linux"
 473                 }
 474         ]
 475
 476 };
 477 BrowserDetect.init();
 478
 479 document.getElementById("brow").textContent = " " + BrowserDetect.browser + " "
 480         + BrowserDetect.version +" " + BrowserDetect.OS +" ";
 481
 482         var pos = 0;
 483
 484 function get_appropriate_ws_url()
 485 {
 486         var pcol;
 487         var u = document.URL;
 488
 489         /*
 490          * We open the websocket encrypted if this page came on an
 491          * https:// url itself, otherwise unencrypted
 492          */
 493
 494         if (u.substring(0, 5) == "https") {
 495                 pcol = "wss://";
 496                 u = u.substr(8);
 497         } else {
 498                 pcol = "ws://";
 499                 if (u.substring(0, 4) == "http")
 500                         u = u.substr(7);
 501         }
 502
 503         u = u.split('/');
 504
 505         /* + "/xxx" bit is for IE10 workaround */
 506
 507         return pcol + u[0] + "/xxx";
 508 }
 509
 510
 511 document.getElementById("number").textContent = get_appropriate_ws_url();
 512
 513 /* dumb increment protocol */
 514
 515         var socket_di;
 516
 517         if (typeof MozWebSocket != "undefined") {
 518                 socket_di = new MozWebSocket(get_appropriate_ws_url(),
 519                                    "dumb-increment-protocol");
 520         } else {
 521                 socket_di = new WebSocket(get_appropriate_ws_url(),
 522                                    "dumb-increment-protocol");
 523         }
 524
 525
 526         try {
 527                 socket_di.onopen = function() {
 528                         document.getElementById("wsdi_statustd").style.backgroundColor = "#40ff40";
 529                         document.getElementById("wsdi_status").innerHTML =
 530                                 " <b>websocket connection opened</b><br>" +
 531                                 san(socket_di.extensions);
 532                 }
 533
 534                 socket_di.onmessage =function got_packet(msg) {
 535                         document.getElementById("number").textContent = msg.data + "\n";
 536                 }
 537
 538                 socket_di.onclose = function(){
 539                         document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040";
 540                         document.getElementById("wsdi_status").textContent = " websocket connection CLOSED ";
 541                 }
 542         } catch(exception) {
 543                 alert('<p>Error' + exception);
 544         }
 545
 546         var socket_status, jso, s;
 547
 548         if (typeof MozWebSocket != "undefined") {
 549                 socket_status = new MozWebSocket(get_appropriate_ws_url(),
 550                                    "lws-status");
 551         } else {
 552                 socket_status = new WebSocket(get_appropriate_ws_url(),
 553                                    "lws-status");
 554         }
 555
 556
 557         try {
 558                 socket_status.onopen = function() {
 559                         document.getElementById("s_statustd").style.backgroundColor = "#40ff40";
 560                         document.getElementById("s_status").innerHTML =
 561                                 " <b>websocket connection opened</b><br>" +
 562                                 san(socket_status.extensions);
 563                 }
 564
 565                 socket_status.onmessage =function got_packet(msg) {
 566                         jso = JSON.parse(msg.data);
 567
 568                         document.getElementById("servinfo").innerHTML =
 569                                 "<table><tr><td class=l>Build info</td><td>"+
 570                                         san(jso.version) + "</td></tr>" +
 571                                         "<tr><td class=l>Server info</td><td>" +
 572                                         san(jso.hostname) + "</td></tr>" +
 573                                         "</table>";
 574                         s="<table>";
 575                         var n;
 576                         for (n = 0; n < jso.conns.length; n++)
 577                                 s = s + "<tr><td class=l>client " + (n + 1) +
 578                                 "</td><td><b>" + san(jso.conns[n].peer) +
 579                                 "</b><br>" + san(jso.conns[n].time) +
 580                                 "<br>" + san(jso.conns[n].ua) +
 581                                 "</td></tr>";
 582                         s = s + "</table>";
 583
 584                         document.getElementById("conninfo").innerHTML = s;
 585                 }
 586
 587                 socket_status.onclose = function(){
 588                         document.getElementById("s_statustd").style.backgroundColor = "#ff4040";
 589                         document.getElementById("s_status").textContent = " websocket connection CLOSED ";
 590                 }
 591         } catch(exception) {
 592                 alert('<p>Error' + exception);
 593         }
 594
 595 function reset() {
 596         socket_di.send("reset\n");
 597 }
 598
 599
 600 function junk() {
 601         for(var word = ''; word.length < 9000; word += 'a'){}
 602         socket_di.send(word);
 603 }
 604
 605 var socket_ot;
 606
 607 function ot_open() {
 608         if (typeof MozWebSocket != "undefined") {
 609                 socket_ot = new MozWebSocket(get_appropriate_ws_url(),
 610                                    "dumb-increment-protocol");
 611         } else {
 612                 socket_ot = new WebSocket(get_appropriate_ws_url(),
 613                                    "dumb-increment-protocol");
 614         }
 615         try {
 616                 socket_ot.onopen = function() {
 617                         document.getElementById("ot_statustd").style.backgroundColor = "#40ff40";
 618                         document.getElementById("ot_status").innerHTML = " <b>websocket connection opened</b><br>" + san(socket_di.extensions);
 619                         document.getElementById("ot_open_btn").disabled = true;
 620                         document.getElementById("ot_close_btn").disabled = false;
 621                         document.getElementById("ot_req_close_btn").disabled = false;
 622                 }
 623
 624                 socket_ot.onclose = function(e){
 625                         document.getElementById("ot_statustd").style.backgroundColor = "#ff4040";
 626                         document.getElementById("ot_status").textContent = " websocket connection CLOSED, code: " + e.code +
 627                         ", reason: " + e.reason;
 628                         document.getElementById("ot_open_btn").disabled = false;
 629                         document.getElementById("ot_close_btn").disabled = true;
 630                         document.getElementById("ot_req_close_btn").disabled = true;
 631                 }
 632         } catch(exception) {
 633                 alert('<p>Error' + exception);
 634         }
 635 }
 636
 637 /* browser will close the ws in a controlled way */
 638 function ot_close() {
 639         socket_ot.close(3000, "Bye!");
 640 }
 641
 642 /* we ask the server to close the ws in a controlled way */
 643 function ot_req_close() {
 644         socket_ot.send("closeme\n");
 645 }
 646
 647 /* lws-mirror protocol */
 648
 649         var down = 0;
 650         var no_last = 1;
 651         var last_x = 0, last_y = 0;
 652         var ctx;
 653         var socket_lm;
 654         var color = "#000000";
 655
 656         if (typeof MozWebSocket != "undefined") {
 657                 socket_lm = new MozWebSocket(get_appropriate_ws_url(),
 658                                    "lws-mirror-protocol");
 659         } else {
 660                 socket_lm = new WebSocket(get_appropriate_ws_url(),
 661                                    "lws-mirror-protocol");
 662         }
 663
 664
 665         try {
 666                 socket_lm.onopen = function() {
 667                         document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40";
 668                         document.getElementById("wslm_status").innerHTML =
 669                                 " <b>websocket connection opened</b><br>" +
 670                                 san(socket_lm.extensions);
 671                         lws_gray_out(false);
 672                 }
 673
 674                 socket_lm.onmessage =function got_packet(msg) {
 675                         j = msg.data.split(';');
 676                         f = 0;
 677                         while (f < j.length - 1) {
 678                                 i = j[f].split(' ');
 679                                 if (i[0] == 'd') {
 680                                         ctx.strokeStyle = i[1];
 681                                         ctx.beginPath();
 682                                         ctx.moveTo(+(i[2]), +(i[3]));
 683                                         ctx.lineTo(+(i[4]), +(i[5]));
 684                                         ctx.stroke();
 685                                 }
 686                                 if (i[0] == 'c') {
 687                                         ctx.strokeStyle = i[1];
 688                                         ctx.beginPath();
 689                                         ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true);
 690                                         ctx.stroke();
 691                                 }
 692
 693                                 f++;
 694                         }
 695                 }
 696
 697                 socket_lm.onclose = function(){
 698                         document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
 699                         document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
 700                         lws_gray_out(true,{'zindex':'499'});
 701                 }
 702         } catch(exception) {
 703                 alert('<p>Error' + exception);
 704         }
 705
 706         var canvas = document.createElement('canvas');
 707         canvas.height = 300;
 708         canvas.width = 480;
 709         ctx = canvas.getContext("2d");
 710
 711         document.getElementById('wslm_drawing').appendChild(canvas);
 712
 713         canvas.addEventListener('mousemove', ev_mousemove, false);
 714         canvas.addEventListener('mousedown', ev_mousedown, false);
 715         canvas.addEventListener('mouseup', ev_mouseup, false);
 716
 717         offsetX = offsetY = 0;
 718         element = canvas;
 719       if (element.offsetParent) {
 720         do {
 721           offsetX += element.offsetLeft;
 722           offsetY += element.offsetTop;
 723         } while ((element = element.offsetParent));
 724       }
 725
 726 function update_color() {
 727         color = document.getElementById("color").value;
 728 }
 729
 730 function ev_mousedown (ev) {
 731         down = 1;
 732 }
 733
 734 function ev_mouseup(ev) {
 735         down = 0;
 736         no_last = 1;
 737 }
 738
 739 function ev_mousemove (ev) {
 740         var x, y;
 741
 742         if (ev.offsetX) {
 743                 x = ev.offsetX;
 744                 y = ev.offsetY;
 745         } else {
 746                 x = ev.layerX - offsetX;
 747                 y = ev.layerY - offsetY;
 748
 749         }
 750
 751         if (!down)
 752                 return;
 753         if (no_last) {
 754                 no_last = 0;
 755                 last_x = x;
 756                 last_y = y;
 757                 return;
 758         }
 759         socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';');
 760
 761         last_x = x;
 762         last_y = y;
 763 }
 764
 765
 766 </script>
 767
 768 </body>
 769 </html>