test/view/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
  32   $( "#acqButton" ).text( "stop" );
  33
  34   // サーバーとWebSocket接続
  35   ws = new WebSocket( "ws://"+$ipAddress+":3000" );
  36
  37   ws.onopen = function () {
  38     ws.onmessage = function( event ){
  39       data = JSON.parse(event.data)
  40         if(data["type"]=="connection"){
  41           if(data["data"]=="open"){
  42             sendBuf["type"] = "req";
  43             sendBuf["data"] = "img";
  44             ws.send(JSON.stringify(sendBuf));
  45           }
  46         }else if(data["type"]=="img"){
  47           draw(JSON.parse(data["data"]));
  48           sendBuf["type"] = "req";
  49           sendBuf["data"] = "img";
  50           ws.send(JSON.stringify(sendBuf));
  51         }
  52     }
  53   }
  54 }
  55
  56
  57 function stopAcq () {
  58   $( "#acqButton" ).text( "start" );
  59   console.log("stop");
  60   ws.close(1000, "close");
  61 }
  62
  63
  64 function dispParams () {
  65   paramsT =JSON.stringify(params);
  66   $( "#acqParams" ).html( paramsT );
  67 }
  68
  69 function setParams () {
  70   sendSettings();
  71   dispParams();
  72 }
  73
  74 function sendSettings () {
  75   params["size"] = $( "#size option:selected" ).val();
  76   var exptime = $( "#exptime" ).val();
  77   if( 1 >= exptime && exptime >= 0.01){
  78     params["exptime"] = exptime;
  79     params["binning"] = $( "#binning option:selected" ).val();
  80   }
  81   $.ajax({
  82     type:"GET",
  83     url:"http://"+$ipAddress+":"+$port+"/fei/set/acq_init?bng="+params["binning"]+"&&exp="+params["exptime"]+"&&size="+params["size"],
  84     success: function(data){
  85     }
  86   });
  87 }
  88
  89
  90 // 描画
  91 function draw (data) {
  92   var ctx;
  93   var imgData;
  94   var emData;
  95   var length;
  96   var canvas = document.getElementById('test');
  97
  98   if(canvas.getContext){
  99     ctx = canvas.getContext('2d');
 100   }
 101
 102   ctx.scale(0.5, 0.5);
 103
 104   emData = data;
 105   length = data.length
 106   imgData = ctx.createImageData(length, length);
 107
 108   // 各ピクセルの色情報設定
 109   for (var i=0;i<length;i++){
 110     for (var j=0;j<length;j++){
 111       var n = j*4+i*length*4;
 112       var pixel = emData[i][j];
 113       imgData.data[n]   = pixel;
 114       imgData.data[n+1] = pixel;
 115       imgData.data[n+2] = pixel;
 116       imgData.data[n+3] = 255;
 117     }
 118   }
 119   //  console.timeEnd('draw for');
 120
 121   // CanvasのコンテキストにImageDataを設定
 122   //  console.time('put');
 123   ctx.scale(0.5, 0.5);
 124   ctx.putImageData(imgData, 0, 0);
 125 //  ctx.drawImage(imgData, 0, 0);
 126 //  console.log(put);
 127   //  console.timeEnd('put');
 128 }
 129