test/view/simple/js/camera.js

   1 // 変数 //////////////////////////////////////
   2
   3 var ws           // WebSocket
   4 var i = 0;       // 画像取得回数カウント用
   5 var params = {
   6   size : 0,      // 画像サイズ
   7   binning : 1,   // ビニング
   8   exptime : 1    // 露光時間
   9 };
  10 var sendBuf = {
  11   "type" : 0,
  12   "data"  : 0
  13 };
  14
  15 //////////////////////////////////////////////
  16
  17
  18 // イベント登録 //////////////////////////////
  19
  20 $(function () {
  21
  22   $( "#acqButton" ).toggle( startAcq, stopAcq) ;
  23   $( "#setButton" ).click( setParams );
  24
  25 });
  26
  27 //////////////////////////////////////////////
  28
  29
  30 function startAcq () {
  31   i = 0;
  32
  33   $( "#acqButton" ).text( "stop" );
  34
  35   // サーバーとWebSocket接続
  36   ws = new WebSocket( "ws://"+$ipAddress+":3000" );
  37
  38   ws.onopen = function () {
  39     console.time(0)
  40    ws.onmessage = function( event ){
  41      console.timeEnd(i)
  42        i = i+1;
  43       data = JSON.parse(event.data)
  44         if(data["type"]=="connection"){
  45           if(data["data"]=="open"){
  46             sendBuf["type"] = "req";
  47             sendBuf["data"] = "img";
  48             ws.send(JSON.stringify(sendBuf));
  49             console.time(i);
  50           }
  51         }else if(data["type"]=="img"){
  52          draw(JSON.parse(data["data"]));
  53           sendBuf["type"] = "req";
  54           sendBuf["data"] = "img";
  55           ws.send(JSON.stringify(sendBuf));
  56         console.time(i)
  57         }
  58     }
  59   }
  60 }
  61
  62
  63 function stopAcq () {
  64   $( "#acqButton" ).text( "start" );
  65   console.log("stop");
  66   ws.close(1000, "close");
  67 }
  68
  69
  70 function dispParams () {
  71   paramsT =JSON.stringify(params);
  72   $( "#acqParams" ).html( paramsT );
  73 }
  74
  75 function setParams () {
  76   sendSettings();
  77   dispParams();
  78 }
  79
  80 function sendSettings () {
  81   params["size"] = $( "#size option:selected" ).val();
  82   var exptime = $( "#exptime" ).val();
  83   if( 1 >= exptime && exptime >= 0.01){
  84     params["exptime"] = exptime;
  85     params["binning"] = $( "#binning option:selected" ).val();
  86   }
  87   $.ajax({
  88     type:"GET",
  89     url:"http://"+$ipAddress+":"+$port+"/fei/set/acq_init?bng="+params["binning"]+"&&exp="+params["exptime"]+"&&size="+params["size"],
  90     success: function(data){
  91     }
  92   });
  93 }
  94
  95
  96 // 描画
  97 function draw (data) {
  98   var ctx;
  99   var imgData;
 100   var emData;
 101   var length;
 102   var canvas = document.getElementById('test');
 103
 104   if(canvas.getContext){
 105     ctx = canvas.getContext('2d');
 106   }
 107
 108   ctx.scale(0.5, 0.5);
 109
 110   emData = data;
 111   length = data.length
 112   imgData = ctx.createImageData(length, length);
 113
 114   // 各ピクセルの色情報設定
 115   for (var i=0;i<length;i++){
 116     for (var j=0;j<length;j++){
 117       var n = j*4+i*length*4;
 118       var pixel = emData[i][j];
 119       imgData.data[n]   = pixel;
 120       imgData.data[n+1] = pixel;
 121       imgData.data[n+2] = pixel;
 122       imgData.data[n+3] = 255;
 123     }
 124   }
 125   //  console.timeEnd('draw for');
 126
 127   // CanvasのコンテキストにImageDataを設定
 128   //  console.time('put');
 129   ctx.scale(0.5, 0.5);
 130   ctx.putImageData(imgData, 0, 0);
 131 //  ctx.drawImage(imgData, 0, 0);
 132 //  console.log(put);
 133   //  console.timeEnd('put');
 134 }
 135