test/view/mock/img.js

   1 var ws
   2 var i = 0;
   3
   4
   5 function startAcq(){
   6  $("button").text("stop");
   7   ws = new WebSocket("ws://localhost:3000");
   8
   9   // メッセージ受信時の処理
  10   ws.onmessage = function(event){
  11     if(event.data=="init"){
  12       ws.send("acq");
  13     }else{
  14       ws.send("acq");
  15       draw(JSON.parse(event.data));
  16      console.log(i);
  17       i = i + 1;
  18     }
  19   };
  20
  21 }
  22
  23 function stopAcq(){
  24  $("button").text("start");
  25   console.log("stop");
  26   ws.close(1000, "close");
  27 }
  28
  29 $(function(){
  30   $("button").toggle(startAcq, stopAcq);
  31 });
  32
  33
  34 function draw(data){
  35   var ctx;
  36   var imgData;
  37   var emData;
  38   var canvas = document.getElementById('test');
  39   if(canvas.getContext){
  40     ctx = canvas.getContext('2d');
  41   }
  42
  43   imgData = ctx.createImageData(128, 128);
  44   emData = data;
  45
  46   // 各ピクセルの色情報設定
  47   for (var i=0;i<128;i++){
  48     for (var j=0;j<128;j++){
  49       var n = j*4+i*128*4;
  50       var pixel = emData[i][j];
  51       imgData.data[n]   = pixel;
  52       imgData.data[n+1] = pixel;
  53       imgData.data[n+2] = pixel;
  54       imgData.data[n+3] = 255;
  55     }
  56   }
  57
  58   // CanvasのコンテキストにImageDataを設定
  59   ctx.putImageData(imgData, 0, 0);
  60 }
  61