JS/url_dummy.js

   1
   2 //フォームから入力された顕微鏡のIPアドレス、ポート番号、メーカー、顕微鏡名を記憶
   3 function UserSetting(){
   4         var ipAddress = document.getElementById("ip_address").value;
   5         var port_number = document.getElementById("port_number").value;
   6         var manufacturer = document.getElementById("manufacturer").value;
   7         var em_name = document.getElementById("em_name").value;
   8         //console.log(ipAddress+","+port_number+","+manufacturer+","+em_name);
   9 }
  10
  11 //ajaxの準備
  12 function getAjax(){
  13         var ajax = null;
  14         try{
  15                 ajax = new XMLHttpRequest();
  16         }catch(e){
  17                 alert("Not Init");
  18         }
  19         return ajax;
  20 }
  21
  22 //URLからパラメーターを取得 => URLの引数からパラメータをキーとデータに分けたオブジェクト
  23 function GetUrlElement(){
  24         var argument = new Object();
  25         var key_data = location.search.substring(1).split('&');//頭に?がつくから2文字目から文字列を扱う
  26         for(var i=0; i<key_data.length; i++) {
  27                 var value = key_data[i].split('=');
  28         argument[value[0]] = value[1];//value[0]->key, value[1]->data
  29   }
  30         return {
  31         GetUrlElementInstance: function() {
  32                 return argument;
  33         }
  34   }
  35 }
  36
  37 //URLのメーカーまでの生成 =>URLの頭 ex) http://192.168.4.146:9090/fei/
  38 function MakeUrlHead(){
  39         var userSetting = new GetUrlElement();
  40         var urlElement = userSetting.GetUrlElementInstance();
  41
  42         var urlHead = "http://";
  43         urlHead += urlElement['sendIpAddress'];
  44         urlHead += ":";
  45         urlHead += urlElement['sendPortNumber'];
  46         urlHead += "/";
  47         urlHead += urlElement['sendManufacturer'];
  48         urlHead += "/";
  49
  50         return urlHead;
  51 }
  52
  53 //全パラメータを返す
  54 function AllParams(){
  55
  56         /*vemapi*
  57         # 全パラメーターを返す
  58         # /:emname/get
  59         例
  60         URL：http://localhost:9090/fei/get
  61         返り値:{"x":0,"y":1,"z":1,"a":1,"spotSizeIndex":0,"MagIndex":0}
  62         */
  63
  64         var url = MakeUrlHead();
  65         url += "get";
  66
  67         var on_off = document.getElementsByName("all_params_switch");//返り値は配列
  68         console.log(on_off);
  69
  70         //on
  71         if(on_off[0].checked){
  72                 console.log("on(allparams)");
  73                 //送信
  74                 var ajax = getAjax();
  75                 ajax.open('GET', url);
  76                 ajax.send();
  77
  78                 ajax.addEventListener('readystatechange', function(){
  79                         if(ajax.readyState === 4 && ajax.status === 200){
  80                                 console.log(ajax.responseText);
  81                         }
  82                 });
  83         //off
  84         }else{
  85                 console.log("off(allparams)");
  86                 //URL画面出力
  87                 var show_url = document.getElementById("all_params_url");
  88                 show_url.innerHTML = url;
  89
  90                 var show_return = document.getElementById("all_params_return");
  91                 show_return.innerHTML = "...";
  92         }
  93 }
  94
  95 //ステージ移動　数値指定　絶対座標
  96 function setStage(){
  97
  98         var movex = document.getElementById("movex").value;
  99         var movey = document.getElementById("movey").value;
 100         var movez = document.getElementById("movez").value;
 101
 102         var on_off = document.getElementsByName("move_stage_switch");
 103
 104         /*
 105         # ステージ移動（絶対座標指定）
 106         # /:emname/set/stagea
 107         parameters x, y, z, a
 108
 109         例：
 110         http://localhost:9090/fei/set/stagea?x=1&&y=0&&z=2&&a=0
 111
 112         返り値：
 113         {"x”:"1","y”:"0","z”:"2","a”:"0"}
 114         */
 115
 116         var url = MakeUrlHead();
 117         url += "set/stagea";
 118         url += "?x=";
 119         url += movex;
 120         //url += encodeURIComponent(movex);
 121         url += "&y=";
 122         url += movey
 123         //url += encodeURIComponent(movey);
 124         url += "&z=";
 125         url += movez
 126         //url += encodeURIComponent(movez);
 127         url += "&a=";
 128         url += movez
 129         //url += encodeURIComponent(movez);
 130
 131         if(on_off[0].checked){
 132                 console.log("on(setStage)");
 133                 //送信
 134                 var ajax = getAjax();
 135                 ajax.open('GET', url);
 136                 ajax.send();
 137
 138                 ajax.addEventListener('readystatechange', function(){
 139                         if(ajax.readyState === 4 && ajax.status === 200){
 140                                 console.log(ajax.responseText);
 141                         }
 142                 });
 143         }else{
 144                 console.log("off(setStage)");
 145                 //URL画面出力
 146                 var show_url = document.getElementById("move_stage_url");
 147                 show_url.innerHTML = url;
 148
 149                 var show_return = document.getElementById("move_stage_return");
 150                 show_return.innerHTML = "...";
 151         }
 152
 153 }
 154
 155 //ステージ移動　クリックのボタン移動
 156 function ClickMove(direction){
 157
 158         var movingDistance = document.getElementById('movingDistance').value;
 159
 160         var movex = document.getElementById("movex").value;
 161         var movey = document.getElementById("movey").value;
 162         var movez = document.getElementById("movez").value;
 163
 164         var value = 0;
 165
 166         switch (direction){
 167                 case 'Left':
 168                         value = parseInt(movex) + parseInt(movingDistance);
 169                         document.getElementById("movex").value = value;
 170                         console.log(value);
 171                 break;
 172                 case 'Right':
 173                         value = parseInt(movex) - parseInt(movingDistance);
 174                         document.getElementById("movex").value = value;
 175                         console.log(value);
 176                 break;
 177                 case 'Up':
 178                         value = parseInt(movey) + parseInt(movingDistance);
 179                         document.getElementById("movey").value = value;
 180                         console.log(movey);
 181                 break;
 182                 case 'Down':
 183                         value = parseInt(movey) - parseInt(movingDistance);
 184                         document.getElementById("movey").value = value;
 185                         console.log(movey);
 186                 break;
 187         }
 188
 189         setStage();//通信部を内包したステージ移動の関数を呼び出す
 190
 191
 192         /*
 193         var on_off = document.getElementsByName("move_stage_switch");
 194
 195         var url = MakeUrlHead();
 196         url += "set/stager";
 197         url += "?x=";
 198         url += movex;
 199         //url += encodeURIComponent(movex);
 200         url += "&y";
 201         url += movey
 202         //url += encodeURIComponent(movey);
 203         url += "&z";
 204         url += movez
 205         //url += encodeURIComponent(movez);
 206         url += "&a";
 207         url += movez
 208         //url += encodeURIComponent(movez);
 209
 210         if(on_off[0].checked){
 211                 console.log("on(ClickMove)");
 212                 //送信
 213                 var ajax = getAjax();
 214                 ajax.open('GET', url);
 215                 ajax.send();
 216
 217                 ajax.addEventListener('readystatechange', function(){
 218                         if(ajax.readyState === 4 && ajax.status === 200){
 219                                 console.log(ajax.responseText);
 220                         }
 221                 });
 222         //off
 223         }else{
 224                 console.log("off(ClickMove)");
 225                 //URL画面出力
 226                 var show_url = document.getElementById("move_stage_url");
 227                 show_url.innerHTML = url;
 228
 229                 var show_return = document.getElementById("move_stage_return");
 230                 show_return.innerHTML = "...";
 231         }
 232         */
 233 }
 234
 235 function setSpotsize(){
 236
 237         /*
 238         # スポットサイズ指定（絶対値）
 239         # /:emname/set/spotsizea
 240         parameters sps
 241
 242         例：
 243         http://localhost:9090/fei/set/spotsizea?sps=3
 244
 245         返り値：
 246         {"spotSizeIndex":"3"}
 247
 248         # スポットサイズ指定（相対値）
 249         # /:emname/set/spotsizer
 250         parameters sps
 251
 252         例：
 253         http://localhost:9090/fei/set/spotsizer?sps=3
 254
 255         返り値：
 256         {"spotSizeIndex":"3"}
 257         */
 258
 259         var on_off = document.getElementsByName("spotsize_switch");
 260         var spotsize = document.getElementById("Spotsize").value;
 261
 262         var url = MakeUrlHead();
 263         url += "set/spotsizea";
 264         url += "?sps=";
 265         url += spotsize;
 266
 267         if(on_off[0].checked){
 268                 console.log("on(setSpotsize)");
 269                 //送信
 270                 var ajax = getAjax();
 271                 ajax.open('GET', url);
 272                 ajax.send();
 273
 274                 ajax.addEventListener('readystatechange', function(){
 275                         if(ajax.readyState === 4 && ajax.status === 200){
 276                                 console.log(ajax.responseText);
 277                         }
 278                 });
 279         }else{
 280                 console.log("off(setStage)");
 281                 //URL画面出力
 282                 var show_url = document.getElementById("spotsize_url");
 283                 show_url.innerHTML = url;
 284
 285                 var show_return = document.getElementById("spotsize_return");
 286                 show_return.innerHTML = "...";
 287         }
 288 }
 289
 290
 291 function setMagnificationA(){
 292         /*
 293                 # 倍率設定（絶対値）
 294                 # /:emname/set/magnificationa
 295                 parameters mag
 296
 297                 例：
 298                 http://localhost:9090/fei/set/magnificationa?mag=1
 299
 300                 返り値：
 301                 {"magIndex":"1"}
 302         */
 303         var on_off = document.getElementsByName("magnification_abs_switch");
 304         var mag = document.getElementById("magnificationa").value;
 305
 306         var url = MakeUrlHead();
 307         url += "set/magnificationa";
 308         url += "?mag=";
 309         url += mag;
 310
 311         if(on_off[0].checked){
 312                 console.log("on(setMagnificationA)");
 313                 //送信
 314                 var ajax = getAjax();
 315                 ajax.open('GET', url);
 316                 ajax.send();
 317
 318                 ajax.addEventListener('readystatechange', function(){
 319                         if(ajax.readyState === 4 && ajax.status === 200){
 320                                 console.log(ajax.responseText);
 321                         }
 322                 });
 323         }else{
 324                 console.log("off(setMagnificationA)");
 325                 //URL画面出力
 326                 var show_url = document.getElementById("magnification_abs_url");
 327                 show_url.innerHTML = url;
 328
 329                 var show_return = document.getElementById("magnification_abs_return");
 330                 show_return.innerHTML = "...";
 331         }
 332 }
 333
 334 function setMagnificationR(){
 335         /*
 336                 # 倍率設定（相対値）
 337                 # /:emname/set/magnificationr
 338                 parameters mag
 339
 340                 例：
 341                 http://localhost:9090/fei/set/magnificationr?mag=1
 342
 343                 返り値：
 344                 {"magIndex":"1"}
 345         */
 346         var on_off = document.getElementsByName("magnification_rel_switch");
 347         var mag = document.getElementById("magnificationr").value;
 348
 349         var url = MakeUrlHead();
 350         url += "set/magnificationr";
 351         url += "?mag=";
 352         url += mag;
 353
 354         if(on_off[0].checked){
 355                 console.log("on(setMagnificationR)");
 356                 //送信
 357                 var ajax = getAjax();
 358                 ajax.open('GET', url);
 359                 ajax.send();
 360
 361                 ajax.addEventListener('readystatechange', function(){
 362                         if(ajax.readyState === 4 && ajax.status === 200){
 363                                 console.log(ajax.responseText);
 364                         }
 365                 });
 366         }else{
 367                 console.log("off(setMagnificationR)");
 368                 //URL画面出力
 369                 var show_url = document.getElementById("magnification_rel_url");
 370                 show_url.innerHTML = url;
 371
 372                 var show_return = document.getElementById("magnification_rel_return");
 373                 show_return.innerHTML = "...";
 374         }
 375 }
 376
 377 function defocus(){
 378         /*
 379                 # フォーカス設定（相対値）
 380                 # /:emname/set/defocusr
 381                 parameters defocus
 382
 383                 例:
 384                 http://localhost:9090/fei/set/defocusr?defocus=1
 385
 386                 返り値：
 387                 {"defocus":"1"}
 388         */
 389
 390         var on_off = document.getElementsByName("focus_rel_switch");
 391         var defocus = document.getElementById("focusr").value;
 392
 393         var url = MakeUrlHead();
 394         url += "set/defocusr";
 395         url += "?defocus=";
 396         url += defocus;
 397
 398         if(on_off[0].checked){
 399                 console.log("on(defocus)");
 400                 //送信
 401                 var ajax = getAjax();
 402                 ajax.open('GET', url);
 403                 ajax.send();
 404
 405                 ajax.addEventListener('readystatechange', function(){
 406                         if(ajax.readyState === 4 && ajax.status === 200){
 407                                 console.log(ajax.responseText);
 408                         }
 409                 });
 410         }else{
 411                 console.log("off(defocus)");
 412                 //URL画面出力
 413                 var show_url = document.getElementById("focus_rel_url");
 414                 show_url.innerHTML = url;
 415
 416                 var show_return = document.getElementById("focus_rel_return");
 417                 show_return.innerHTML = "...";
 418         }
 419 }
 420
 421 function resetFocus(){
 422         /*
 423                 # フォーカスリセット
 424                 # /:emname/set/reset_defocus
 425                 parameters なし
 426
 427                 例：
 428                 http://localhost:9090/fei/set/reset_defocus
 429
 430                 返り値：
 431                 {"defocus":"1"}
 432         */
 433
 434         var on_off = document.getElementsByName("focus_reset_switch");
 435
 436         var url = MakeUrlHead();
 437         url += "set/reset_defocus";
 438
 439         if(on_off[0].checked){
 440                 console.log("on(resetFocus)");
 441                 //送信
 442                 var ajax = getAjax();
 443                 ajax.open('GET', url);
 444                 ajax.send();
 445
 446                 ajax.addEventListener('readystatechange', function(){
 447                         if(ajax.readyState === 4 && ajax.status === 200){
 448                                 console.log(ajax.responseText);
 449                         }
 450                 });
 451         }else{
 452                 console.log("off(resetFocus)");
 453                 //URL画面出力
 454                 var show_url = document.getElementById("focus_reset_url");
 455                 show_url.innerHTML = url;
 456
 457                 var show_return = document.getElementById("focus_reset_return");
 458                 show_return.innerHTML = "...";
 459         }
 460 }
 461
 462 function settingCam(){
 463         /*
 464                 # 撮影条件の設定（ビニング, 露光時間, 画像サイズ）
 465                 # /:emname/set/acq_init
 466                 parameters bng, exp, size
 467
 468                 例：
 469                 http://localhost:9090/fei/set/acq_init?bng=2&&exp=0.25&&size=0
 470
 471                 ビニング  ：bng 1, 2, 4
 472                 露光時間  ：exp 1:0.25:0.07（推奨）
 473                 画像サイズ：size 0, 1, 2 （0:full,1:half,2:quarter)
 474         */
 475
 476         var on_off = document.getElementsByName("set_condition_switch");
 477         var bng = document.getElementById("binning").value;
 478         var exp = document.getElementById("exptime").value;
 479         var size = document.getElementById("image_size").value;
 480
 481         var url = MakeUrlHead();
 482         url += "set/acq_init";
 483         url += "?bng=";
 484         url += bng;
 485         url += "&exp="
 486         url += exp;
 487         url += "&size"
 488         url += size;
 489
 490         if(on_off[0].checked){
 491                 console.log("on(settingCam)");
 492                 //送信
 493                 var ajax = getAjax();
 494                 ajax.open('GET', url);
 495                 ajax.send();
 496
 497                 ajax.addEventListener('readystatechange', function(){
 498                         if(ajax.readyState === 4 && ajax.status === 200){
 499                                 console.log(ajax.responseText);
 500                         }
 501                 });
 502         }else{
 503                 console.log("off(settingCam)");
 504                 //URL画面出力
 505                 var show_url = document.getElementById("set_condition_url");
 506                 show_url.innerHTML = url;
 507
 508                 var show_return = document.getElementById("set_condition_return");
 509                 show_return.innerHTML = "...";
 510         }
 511 }
 512
 513 //WebSocketをつなぐスイッチ
 514 /*
 515   # サーバーが送るメッセージ
 516
 517         クライアントと通信確立時
 518         {"type":"connection", "data":"open"}
 519
 520         画像リクエスト時（画像データを返す）
 521         {"type":"img", "data":画像の配列}
 522
 523         # クライアントが送るメッセージ
 524
 525         画像リクエスト時
 526         {"type":"req", "data":"img"}
 527
 528 */
 529 function connectWebSocket(){
 530         var button_value = document.getElementById("ws_button");
 531
 532         var userSetting = new GetUrlElement();
 533         var urlElement = userSetting.GetUrlElementInstance();
 534
 535         if(button_value.value == "close"){
 536                 ws.close();
 537         console.log('closed');
 538         //document.getElementById("wsConnectBtn").value = "websocket start";
 539                 button_value.value = "close";
 540         } else {
 541
 542                 button_value.value = "start";
 543                 ws = new WebSocket("ws://"+urlElement['sendIpAddress']+":3001");
 544         ws.onopen = function(){
 545         console.log('websocket connected');
 546         //  ws.send('req');
 547         };
 548         //document.getElementById("wsConnectBtn").value = "websocket close";
 549         ws.onmessage = function(ture){
 550                 data = JSON.parse(ture.data);//parseでオブジェクトに変換
 551                         console.log('server:' + data["type"]);
 552                         switch(data["type"]){
 553                         case "connection":
 554                                 connection(data);
 555                                 break;
 556
 557                         case "img":
 558                                 //image(data);
 559                                 //画像のリクエスト
 560                                 ws.send('{"type":"req", "data":"img"}');
 561                                 //戻り値のJSONを
 562                                 drawMycrograph(data.data);
 563                                 break;
 564                         }
 565                 };
 566         }
 567         /*
 568         toggleSwitch ^= 1 ;
 569         switch(toggleSwitch){
 570     case 1:
 571
 572         };
 573         break;
 574
 575         case 0:
 576
 577         }
 578         */
 579 }
 580
 581 //URLを投げるスイッチ?  vem docにはないが、開発段階のwitsに存在　（そのまま移植）
 582 function connectApi(){
 583
 584         var url = MakeUrlHead();
 585         url += "set/";
 586
 587         var button = document.getElementById("api_button");
 588         if(button.value == "close"){//closeする処理分岐
 589                 var ajax = getAjax();
 590                 ajax.open('GET', url);
 591                 ajax.send();
 592
 593                 ajax.addEventListener('readystatechange', function(){
 594                         if(ajax.readyState === 4 && ajax.status === 200){
 595                                 console.log(ajax.responseText);
 596                         }
 597                 });
 598                 button.value = "start";
 599         }else{//startの処理分岐
 600                 var ajax = getAjax();
 601                 ajax.open('GET', url);
 602                 ajax.send();
 603
 604                 ajax.addEventListener('readystatechange', function(){
 605                         if(ajax.readyState === 4 && ajax.status === 200){
 606                                 console.log(ajax.responseText);
 607                         }
 608                 });
 609         }
 610 ///////////
 611         /*
 612         switch(toggleSwitch){
 613                 case 1:
 614                 //start
 615
 616
 617                 $.ajax({
 618                   type:"GET",
 619                   url:"http://" +UrlElement['sendIpAddress']+
 620                   ":"+UrlElement['sendPortNumber']+"/"+UrlElement['sendManufacturer']+
 621                   "/set/",
 622                   success: function(data){
 623                         console.log(data);//string型
 624                   }
 625                 });
 626                 document.getElementById("apiConnectBtn").value = "API close";
 627                 break;
 628
 629                 case 0:
 630           //stop
 631
 632                 $.ajax({
 633                   type:"GET",
 634                   url:"http://" +UrlElement['sendIpAddress']+
 635                   ":"+UrlElement['sendPortNumber']+"/"+UrlElement['sendManufacturer']+
 636                   "/set/",
 637                   success: function(data){
 638                         console.log(data);//string型
 639                   }
 640                 });
 641                 document.getElementById("apiConnectBtn").value = "API start";
 642                 break;
 643
 644         }
 645         */
 646 }
 647
 648
 649 function takePhoto(){
 650         /*
 651                 # 撮影
 652                 # /:emname/acq
 653
 654                 例：
 655                 http://localhost:9090/fei/acq
 656
 657                 返り値：
 658                 画像の2次元配列
 659         */
 660
 661         var on_off = document.getElementsByName("capture_switch");
 662
 663         var url = MakeUrlHead();
 664         url += "acq";
 665
 666         if(on_off[0].checked){
 667                 console.log("on(settingCam)");
 668                 //送信
 669                 var ajax = getAjax();
 670                 ajax.open('GET', url);
 671                 ajax.send();
 672
 673                 ajax.addEventListener('readystatechange', function(){
 674                         if(ajax.readyState === 4 && ajax.status === 200){
 675                                 console.log(ajax.responseText);
 676                         }
 677                 });
 678         }else{
 679                 console.log("off(settingCam)");
 680                 //URL画面出力
 681                 var show_url = document.getElementById("capture_url");
 682                 show_url.innerHTML = url;
 683
 684                 var show_return = document.getElementById("capture_return");
 685                 show_return.innerHTML = "...";
 686         }
 687 }
 688
 689 //電顕で撮って返ってくる画像の描画
 690 function drawMycrograph(ddata){
 691         var canvas = document.getElementById("em_capture");
 692         var length;
 693         var context;
 694
 695         data = JSON.parse(ddata);
 696
 697   //  context.scale(0.5,0.5);
 698         if(!canvas || !canvas.getContext){
 699           return(false);
 700         }
 701         else if(canvas.getContext){
 702                 context=canvas.getContext('2d')
 703         }
 704         console.log(data);
 705         length = data.length;
 706         console.log(length);
 707         var imgData = context.createImageData(length,length);
 708
 709         for (var i=0;i<length;i++){
 710           for (var j=0;j<length;j++){
 711                 var n = j*4+i*length*4;
 712                 var pixel = data[i][j];
 713                 imgData.data[n]   = pixel;
 714                 imgData.data[n+1] = pixel;
 715                 imgData.data[n+2] = pixel;
 716                 imgData.data[n+3] = 255;
 717           }
 718         }
 719         context.putImageData(imgData, 0, 0);
 720 }
 721