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">
 141              <input type=button id=junk value="Send 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">
 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"></td>
 226                 <td align=center><input type=button id=ot_close_btn disabled value="Close" ></td>
 227                 <td align=center><input type=button id=ot_req_close_btn disabled value="Request Server 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 nonce="lwscaro">
 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">&nbsp;<span id=file_info style="font-size:12pt;"></span><br>
 323     <input type="submit" id="upload" name="upload" disabled=1 value="Upload">
 324         </form>
 325         </div></td>
 326         </tr>
 327
 328 </table>
 329 </div>
 330        </div>
 331    </div>
 332
 333 </div>
 334 </td></tr></table>
 335
 336 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/>
 337 Join the mailing list: <a href="https://libwebsockets.org/mailman/listinfo/libwebsockets">https://libwebsockets.org/mailman/listinfo/libwebsockets</a>
 338
 339 </article>
 340
 341 <script nonce="lwscaro">
 342
 343 document.getElementById('file').onchange = check_file;
 344 document.getElementById('offset').onclick = reset;
 345 document.getElementById('junk').onclick = junk;
 346 document.getElementById('color').onclick = update_color;
 347 document.getElementById('ot_open_btn').onclick = ot_open;
 348 document.getElementById('ot_close_btn').onclick = ot_close;
 349 document.getElementById('ot_req_close_btn').onclick = ot_req_close;
 350
 351 /*
 352  * We display untrusted stuff in html context... reject anything
 353  * that has HTML stuff in it
 354  */
 355
 356 function san(s)
 357 {
 358         if (s.search("<") != -1)
 359                 return "invalid string";
 360
 361         return s;
 362 }
 363
 364 lws_gray_out(true,{'zindex':'499'});
 365
 366 /* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
 367
 368 var BrowserDetect = {
 369         init: function () {
 370                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
 371                 this.version = this.searchVersion(navigator.userAgent)
 372                         || this.searchVersion(navigator.appVersion)
 373                         || "an unknown version";
 374                 this.OS = this.searchString(this.dataOS) || "an unknown OS";
 375         },
 376         searchString: function (data) {
 377                 for (var i=0;i<data.length;i++) {
 378                         var dataString = data[i].string;
 379                         var dataProp = data[i].prop;
 380                         this.versionSearchString = data[i].versionSearch || data[i].identity;
 381                         if (dataString) {
 382                                 if (dataString.indexOf(data[i].subString) != -1)
 383                                         return data[i].identity;
 384                         }
 385                         else if (dataProp)
 386                                 return data[i].identity;
 387                 }
 388         },
 389         searchVersion: function (dataString) {
 390                 var index = dataString.indexOf(this.versionSearchString);
 391                 if (index == -1) return;
 392                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
 393         },
 394         dataBrowser: [
 395                 {
 396                         string: navigator.userAgent,
 397                         subString: "Chrome",
 398                         identity: "Chrome"
 399                 },
 400                 {       string: navigator.userAgent,
 401                         subString: "OmniWeb",
 402                         versionSearch: "OmniWeb/",
 403                         identity: "OmniWeb"
 404                 },
 405                 {
 406                         string: navigator.vendor,
 407                         subString: "Apple",
 408                         identity: "Safari",
 409                         versionSearch: "Version"
 410                 },
 411                 {
 412                         prop: window.opera,
 413                         identity: "Opera",
 414                         versionSearch: "Version"
 415                 },
 416                 {
 417                         string: navigator.vendor,
 418                         subString: "iCab",
 419                         identity: "iCab"
 420                 },
 421                 {
 422                         string: navigator.vendor,
 423                         subString: "KDE",
 424                         identity: "Konqueror"
 425                 },
 426                 {
 427                         string: navigator.userAgent,
 428                         subString: "Firefox",
 429                         identity: "Firefox"
 430                 },
 431                 {
 432                         string: navigator.vendor,
 433                         subString: "Camino",
 434                         identity: "Camino"
 435                 },
 436                 {               // for newer Netscapes (6+)
 437                         string: navigator.userAgent,
 438                         subString: "Netscape",
 439                         identity: "Netscape"
 440                 },
 441                 {
 442                         string: navigator.userAgent,
 443                         subString: "MSIE",
 444                         identity: "Explorer",
 445                         versionSearch: "MSIE"
 446                 },
 447                 {
 448                         string: navigator.userAgent,
 449                         subString: "Gecko",
 450                         identity: "Mozilla",
 451                         versionSearch: "rv"
 452                 },
 453                 {               // for older Netscapes (4-)
 454                         string: navigator.userAgent,
 455                         subString: "Mozilla",
 456                         identity: "Netscape",
 457                         versionSearch: "Mozilla"
 458                 }
 459         ],
 460         dataOS : [
 461                 {
 462                         string: navigator.platform,
 463                         subString: "Win",
 464                         identity: "Windows"
 465                 },
 466                 {
 467                         string: navigator.platform,
 468                         subString: "Mac",
 469                         identity: "Mac"
 470                 },
 471                 {
 472                            string: navigator.userAgent,
 473                            subString: "iPhone",
 474                            identity: "iPhone/iPod"
 475             },
 476                 {
 477                         string: navigator.platform,
 478                         subString: "Linux",
 479                         identity: "Linux"
 480                 }
 481         ]
 482
 483 };
 484 BrowserDetect.init();
 485
 486 document.getElementById("brow").textContent = " " + BrowserDetect.browser + " "
 487         + BrowserDetect.version +" " + BrowserDetect.OS +" ";
 488
 489         var pos = 0;
 490
 491 function get_appropriate_ws_url()
 492 {
 493         var pcol;
 494         var u = document.URL;
 495
 496         /*
 497          * We open the websocket encrypted if this page came on an
 498          * https:// url itself, otherwise unencrypted
 499          */
 500
 501         if (u.substring(0, 5) == "https") {
 502                 pcol = "wss://";
 503                 u = u.substr(8);
 504         } else {
 505                 pcol = "ws://";
 506                 if (u.substring(0, 4) == "http")
 507                         u = u.substr(7);
 508         }
 509
 510         u = u.split('/');
 511
 512         /* + "/xxx" bit is for IE10 workaround */
 513
 514         return pcol + u[0] + "/xxx";
 515 }
 516
 517
 518 document.getElementById("number").textContent = get_appropriate_ws_url();
 519
 520 /* dumb increment protocol */
 521
 522         var socket_di;
 523
 524         if (typeof MozWebSocket != "undefined") {
 525                 socket_di = new MozWebSocket(get_appropriate_ws_url(),
 526                                    "dumb-increment-protocol");
 527         } else {
 528                 socket_di = new WebSocket(get_appropriate_ws_url(),
 529                                    "dumb-increment-protocol");
 530         }
 531
 532
 533         try {
 534                 socket_di.onopen = function() {
 535                         document.getElementById("wsdi_statustd").style.backgroundColor = "#40ff40";
 536                         document.getElementById("wsdi_status").innerHTML =
 537                                 " <b>websocket connection opened</b><br>" +
 538                                 san(socket_di.extensions);
 539                 }
 540
 541                 socket_di.onmessage =function got_packet(msg) {
 542                         document.getElementById("number").textContent = msg.data + "\n";
 543                 }
 544
 545                 socket_di.onclose = function(){
 546                         document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040";
 547                         document.getElementById("wsdi_status").textContent = " websocket connection CLOSED ";
 548                 }
 549         } catch(exception) {
 550                 alert('<p>Error' + exception);
 551         }
 552
 553         var socket_status, jso, s;
 554
 555         if (typeof MozWebSocket != "undefined") {
 556                 socket_status = new MozWebSocket(get_appropriate_ws_url(),
 557                                    "lws-status");
 558         } else {
 559                 socket_status = new WebSocket(get_appropriate_ws_url(),
 560                                    "lws-status");
 561         }
 562
 563
 564         try {
 565                 socket_status.onopen = function() {
 566                         document.getElementById("s_statustd").style.backgroundColor = "#40ff40";
 567                         document.getElementById("s_status").innerHTML =
 568                                 " <b>websocket connection opened</b><br>" +
 569                                 san(socket_status.extensions);
 570                 }
 571
 572                 socket_status.onmessage =function got_packet(msg) {
 573                         var s;
 574
 575                         jso = JSON.parse(msg.data);
 576
 577                         document.getElementById("servinfo").innerHTML =
 578                                 "<table><tr><td class=l>Build info</td><td>"+
 579                                         san(jso.version) + "</td></tr>" +
 580                                         "<tr><td class=l>Server info</td><td>" +
 581                                         san(jso.hostname) + "</td></tr>" +
 582                                         "</table>";
 583                         s="<table>";
 584                         var n;
 585                         for (n = 0; n < jso.conns.length; n++) {
 586                                 var d = new Date(parseInt(jso.conns[n].time) * 1000);
 587
 588                                 s = s + "<tr><td class=l>client " + (n + 1) +
 589                                 "</td><td><b>" + san(jso.conns[n].peer) +
 590                                 "</b><br>" + san(d.toString()) +
 591                                 "<br>" + san(jso.conns[n].ua) +
 592                                 "</td></tr>";
 593                         }
 594                         s = s + "</table>";
 595
 596                         document.getElementById("conninfo").innerHTML = s;
 597                 }
 598
 599                 socket_status.onclose = function(){
 600                         document.getElementById("s_statustd").style.backgroundColor = "#ff4040";
 601                         document.getElementById("s_status").textContent = " websocket connection CLOSED ";
 602                 }
 603         } catch(exception) {
 604                 alert('<p>Error' + exception);
 605         }
 606
 607 function reset() {
 608         socket_di.send("reset\n");
 609 }
 610
 611
 612 function junk() {
 613         for(var word = ''; word.length < 9000; word += 'a'){}
 614         socket_di.send(word);
 615 }
 616
 617 var socket_ot;
 618
 619 function ot_open() {
 620         if (typeof MozWebSocket != "undefined") {
 621                 socket_ot = new MozWebSocket(get_appropriate_ws_url(),
 622                                    "dumb-increment-protocol");
 623         } else {
 624                 socket_ot = new WebSocket(get_appropriate_ws_url(),
 625                                    "dumb-increment-protocol");
 626         }
 627         try {
 628                 socket_ot.onopen = function() {
 629                         document.getElementById("ot_statustd").style.backgroundColor = "#40ff40";
 630                         document.getElementById("ot_status").innerHTML = " <b>websocket connection opened</b><br>" + san(socket_di.extensions);
 631                         document.getElementById("ot_open_btn").disabled = true;
 632                         document.getElementById("ot_close_btn").disabled = false;
 633                         document.getElementById("ot_req_close_btn").disabled = false;
 634                 }
 635
 636                 socket_ot.onclose = function(e){
 637                         document.getElementById("ot_statustd").style.backgroundColor = "#ff4040";
 638                         document.getElementById("ot_status").textContent = " websocket connection CLOSED, code: " + e.code +
 639                         ", reason: " + e.reason;
 640                         document.getElementById("ot_open_btn").disabled = false;
 641                         document.getElementById("ot_close_btn").disabled = true;
 642                         document.getElementById("ot_req_close_btn").disabled = true;
 643                 }
 644         } catch(exception) {
 645                 alert('<p>Error' + exception);
 646         }
 647 }
 648
 649 /* browser will close the ws in a controlled way */
 650 function ot_close() {
 651         socket_ot.close(3000, "Bye!");
 652 }
 653
 654 /* we ask the server to close the ws in a controlled way */
 655 function ot_req_close() {
 656         socket_ot.send("closeme\n");
 657 }
 658
 659 /* lws-mirror protocol */
 660
 661         var down = 0;
 662         var no_last = 1;
 663         var last_x = 0, last_y = 0;
 664         var ctx;
 665         var socket_lm;
 666         var color = "#000000";
 667
 668         if (typeof MozWebSocket != "undefined") {
 669                 socket_lm = new MozWebSocket(get_appropriate_ws_url(),
 670                                    "lws-mirror-protocol");
 671         } else {
 672                 socket_lm = new WebSocket(get_appropriate_ws_url(),
 673                                    "lws-mirror-protocol");
 674         }
 675
 676
 677         try {
 678                 socket_lm.onopen = function() {
 679                         document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40";
 680                         document.getElementById("wslm_status").innerHTML =
 681                                 " <b>websocket connection opened</b><br>" +
 682                                 san(socket_lm.extensions);
 683                         lws_gray_out(false);
 684                 }
 685
 686                 socket_lm.onmessage =function got_packet(msg) {
 687                         j = msg.data.split(';');
 688                         f = 0;
 689                         while (f < j.length - 1) {
 690                                 i = j[f].split(' ');
 691                                 if (i[0] == 'd') {
 692                                         ctx.strokeStyle = i[1];
 693                                         ctx.beginPath();
 694                                         ctx.moveTo(+(i[2]), +(i[3]));
 695                                         ctx.lineTo(+(i[4]), +(i[5]));
 696                                         ctx.stroke();
 697                                 }
 698                                 if (i[0] == 'c') {
 699                                         ctx.strokeStyle = i[1];
 700                                         ctx.beginPath();
 701                                         ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true);
 702                                         ctx.stroke();
 703                                 }
 704
 705                                 f++;
 706                         }
 707                 }
 708
 709                 socket_lm.onclose = function(){
 710                         document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
 711                         document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
 712                         lws_gray_out(true,{'zindex':'499'});
 713                 }
 714         } catch(exception) {
 715                 alert('<p>Error' + exception);
 716         }
 717
 718         var canvas = document.createElement('canvas');
 719         canvas.height = 300;
 720         canvas.width = 480;
 721         ctx = canvas.getContext("2d");
 722
 723         document.getElementById('wslm_drawing').appendChild(canvas);
 724
 725         canvas.addEventListener('mousemove', ev_mousemove, false);
 726         canvas.addEventListener('mousedown', ev_mousedown, false);
 727         canvas.addEventListener('mouseup', ev_mouseup, false);
 728
 729         offsetX = offsetY = 0;
 730         element = canvas;
 731       if (element.offsetParent) {
 732         do {
 733           offsetX += element.offsetLeft;
 734           offsetY += element.offsetTop;
 735         } while ((element = element.offsetParent));
 736       }
 737
 738 function update_color() {
 739         color = document.getElementById("color").value;
 740 }
 741
 742 function ev_mousedown (ev) {
 743         down = 1;
 744 }
 745
 746 function ev_mouseup(ev) {
 747         down = 0;
 748         no_last = 1;
 749 }
 750
 751 function ev_mousemove (ev) {
 752         var x, y;
 753
 754         if (ev.offsetX) {
 755                 x = ev.offsetX;
 756                 y = ev.offsetY;
 757         } else {
 758                 x = ev.layerX - offsetX;
 759                 y = ev.layerY - offsetY;
 760
 761         }
 762
 763         if (!down)
 764                 return;
 765         if (no_last) {
 766                 no_last = 0;
 767                 last_x = x;
 768                 last_y = y;
 769                 return;
 770         }
 771         socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';');
 772
 773         last_x = x;
 774         last_y = y;
 775 }
 776
 777
 778 </script>
 779
 780 </body>
 781 </html>