From 64edaff53dbbc64e9116c0a32ffbc815cdca99bc Mon Sep 17 00:00:00 2001
From: YamamotoTakayuki <fall.spling@gmail.com>
Date: Wed, 14 Feb 2018 13:41:30 +0900
Subject: [PATCH] CLEM

---
 JS/CLEM.js       | 295 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 JS/drawImage.js  |  31 ++++++
 JS/em.js         |  16 +--
 JS/log.js        | 122 +++++++++++++++++++++++
 JS/map.js        |  63 ++++++++++++
 index.html       |   6 +-
 simplePhoto.html |  56 +++++++++--
 test.bat         |   1 +
 8 files changed, 576 insertions(+), 14 deletions(-)
 create mode 100644 JS/CLEM.js
 create mode 100644 JS/log.js
 create mode 100644 JS/map.js
 create mode 100644 test.bat

diff --git a/JS/CLEM.js b/JS/CLEM.js
new file mode 100644
index 0000000..ed10ac3
--- /dev/null
+++ b/JS/CLEM.js
@@ -0,0 +1,295 @@
+$(function() {
+  var canvas = $('#canvasCLEM');
+  var ctx = canvas[0].getContext("2d");
+
+  $('#CLEMimg').on('change', function CLEMmap() { //画像を選択時に呼び出される
+
+    if (window.File) { //FileAPIを未対応ブラウザではアラート
+
+      var files = $('#CLEMimg')[0].files[0];
+      var reader = new FileReader();
+      var img = new Image();
+
+      reader.onload = function(evt) {
+        img.onload = function() {
+          //  参考  https://qiita.com/PG0721/items/599ba2921b8339700fe3
+          var imgAspect = img.width / img.height;
+          ctx.clearRect(0, 0, 512, 512);
+          if (imgAspect >= 1) { //画像が横長
+            left = 0;
+            width = ctx.canvas.width;
+            height = ctx.canvas.height / imgAspect;
+            to = (ctx.canvas.height - height) / 2;
+          } else { //画像が縦長
+            to = 0;
+            width = ctx.canvas.width * imgAspect;
+            height = ctx.canvas.height;
+            left = (ctx.canvas.width - width) / 2;
+          }
+          ctx.drawImage(img, 0, 0, img.width, img.height, left, to, width, height); //画像をアスペクト比を維持して中心に表示
+        }
+        img.src = evt.target.result;
+      }
+      reader.readAsDataURL(files);
+    } else {
+      window.alert("本ブラウザではFile APIが使えません");
+    }
+  }); //END   CLEMmap()
+
+  $('#setClemButton').on('click', function setClem() {
+    var tbody = document.getElementById("listCoord");
+    var rowlen = tbody.rows.length; //行数
+    //      LM X Y EM X Y Mov Del
+    //cells 0 1 2  3 4 5  6   7
+
+    if (rowlen >= 2) {
+
+      var LmVec = new Array();
+      var EmVec = new Array();
+      var rad = 0;
+      for (var i = 0; i < (rowlen - 1); i++) {
+        LmVec[i] = new Object();
+
+        LmVec[i].x = tbody.rows[0].cells[1].innerText - tbody.rows[i + 1].cells[1].innerText;
+        LmVec[i].y = tbody.rows[0].cells[2].innerText - tbody.rows[i + 1].cells[2].innerText;
+        //  alert(LmVec[i].x+"  , "+LmVec[i].y);
+        EmVec[i] = new Object();
+        EmVec[i].x = tbody.rows[0].cells[4].innerText - tbody.rows[i + 1].cells[4].innerText;
+        EmVec[i].y = tbody.rows[0].cells[5].innerText - tbody.rows[i + 1].cells[5].innerText;
+        //  alert(EmVec[i].x+"  , "+EmVec[i].y);
+        var dist = Math.sqrt(LmVec[i].x * LmVec[i].x + LmVec[i].y * LmVec[i].y) * Math.sqrt(EmVec[i].x * EmVec[i].x + EmVec[i].y * EmVec[i].y);
+        if (dist == 0) {
+          alert("座標をセットし直して下さい");
+        } else {
+          var cos = (LmVec[i].x * EmVec[i].x + LmVec[i].y * EmVec[i].y) / dist;
+          var sin = (LmVec[i].x * EmVec[i].y - LmVec[i].y * EmVec[i].x) / dist;
+
+          //alert("cos:"+cos+"   sin:"+sin);
+          var rad1 = Math.acos(cos);
+          var rad2 = Math.asin(sin);
+
+          //alert("rad1:"+rad1+"   rad2:"+rad2);
+          if (cos >= 0 && sin >= 0) { //0<rad<pi/2
+            rad += (-1) * rad1;
+          } else if (cos >= 0 && sin < 0) { //-2/pi<rad<0
+            rad += (-1) * rad2;
+          } else if (cos < 0 && sin >= 0) { //pi/2<rad<pi
+            rad += (-1) * rad1;
+          } else { // -pi<rad<-pi/2
+            rad += rad1;
+          }
+        }
+      }
+      rad = rad / (rowlen - 1);
+      alert(rad * 180 / Math.PI + " 度");
+
+      ctx.clearRect(0, 0, 512, 512);
+      ctx.translate(216, 216);
+      ctx.rotate(-1 * rad);
+      ctx.translate(-216, -216);
+      $('#CLEMimg').change();
+      /*for(i=0;i<rowlen;i++){
+        var temp={x:0,y:0};
+      temp.x=tbody.rows[i].cells[1].innerText*Math.cos(rad)-tbody.rows[i].cells[2].innerText*Math.sin(rad);
+      temp.y=tbody.rows[i].cells[1].innerText*Math.sin(rad)+tbody.rows[i].cells[2].innerText*Math.cos(rad);
+      temp.x=Math.round(temp.x);
+      temp.y=Math.round(temp.y);
+      tbody.rows[i].cells[1].innerHTML=temp.x;
+      tbody.rows[i].cells[2].innerHTML=temp.y;
+      alert(temp.x+"  ,  "+temp.y);
+      }*/
+
+    }
+  }); //END setClem()
+
+}); //END $(function(){
+
+
+function calcClemCoord(event) { //CLEM画像のポインター位置の座標を返す
+
+  //参考  https://lab.syncer.jp/Web/JavaScript/Snippet/12/
+  var clickX = event.pageX;
+  var clickY = event.pageY;
+
+  // 要素の位置を取得
+  var clientRect = document.getElementById("canvasCLEM").getBoundingClientRect();
+  var positionX = clientRect.left + window.pageXOffset;
+  var positionY = clientRect.top + window.pageYOffset;
+
+  // 要素内におけるクリック位置を計算
+  // 要素の中心を0にする
+  var cod = new Object();
+  cod.x = clickX - positionX - 256;
+  cod.y = clickY - positionY - 256;
+  return cod;
+}
+/*
+document.getElementById("canvasSimplePhoto").addEventListener('mousemove', function( event ) {//EM画像にマウスオーバー時
+  var coordinate=document.getElementById("EMcoordinate");
+  var cod = calcEmCoord(event);
+  coordinate.childNodes[0].data= "X:"+cod.x+"  ,  Y:"+cod.y;
+ });
+*/
+document.getElementById("canvasCLEM").addEventListener('mousemove', function(event) { //CLEM画像にマウスオーバー時
+  var coordinate = document.getElementById("CLEMcoordinate");
+  var cod = calcClemCoord(event);
+  coordinate.childNodes[0].data = "X:" + cod.x + "  ,  Y:" + cod.y;
+});
+
+function setLmCoordinate(innerTd) {
+
+  var tr = innerTd.parentNode.parentNode; //tr
+  tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="cancelSetLmCoordinate(this)" style="background-color:red;" />'
+  tr.cells[0].state = "on";
+
+  document.getElementById("canvasCLEM").addEventListener('click', function(event) {
+    if (tr.cells[0].state == "on") {
+      var cod = calcClemCoord(event);
+      tr.cells[1].innerHTML = cod.x;
+      tr.cells[2].innerHTML = cod.y;
+      tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
+      tr.cells[0].state = "off";
+    }
+  });
+
+
+}
+
+function cancelSetLmCoordinate(innerTd) {
+  var tr = innerTd.parentNode.parentNode; //tr
+  tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
+  tr.cells[0].state = "off";
+}
+
+document.getElementById("addList").addEventListener('click', function addList(event) {
+
+  // tbody要素に指定したIDを取得し、変数「tbody」に代入
+  var tbody = document.getElementById("listCoord");
+  var row = tbody.insertRow(-1); //tr
+  var cellLM0 = row.insertCell(-1); //td0
+  cellLM0.state = "off";
+  var cellLMX = row.insertCell(-1); //td1
+  var cellLMY = row.insertCell(-1); //td2
+  var cellEM0 = row.insertCell(-1); //td3
+  var cellEMX = row.insertCell(-1); //td4
+  var cellEMY = row.insertCell(-1); //td5
+  var cellMoveButton = row.insertCell(-1); //td6
+  var cellDelButton = row.insertCell(-1); //td7
+  var SetLmButton = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
+  var DelButton = '<input type="button" value="Delete" onclick="deleteList(this)" />';
+  var SetButton = '<input type="button" value="Set" onclick="setEmCoordinate(this)" />';
+  var MoveButton = '<input type="button" value="Move" onclick="moveEmCoordinate(this)" />';
+  cellLM0.innerHTML = SetLmButton;
+  cellDelButton.innerHTML = DelButton;
+  cellEM0.innerHTML = SetButton;
+  cellMoveButton.innerHTML = MoveButton;
+  //      LM X Y EM X Y Mov Del
+  //cells 0 1 2  3 4 5  6   7
+});
+
+function deleteList(innerTd) {
+  var tr = innerTd.parentNode.parentNode; //tr
+  tr.parentNode.deleteRow(tr.sectionRowIndex);
+}
+
+function setEmCoordinate(innerTd) {
+  var movexr = $("#movex").val();
+  var moveyr = $("#movey").val();
+  var tr = innerTd.parentNode.parentNode; //tr
+  cellEMX = tr.cells[4];
+  cellEMY = tr.cells[5];
+  cellEMX.innerHTML = parseInt(movexr);
+  cellEMY.innerHTML = parseInt(moveyr);
+}
+
+function moveEmCoordinate(innerTd) {
+  var tbody = document.getElementById("listCoord");
+  var rowlen = tbody.rows.length //行数
+  var s = 0;
+  var t = 0;
+  //      LM X Y EM X Y Mov Del
+  //cells 0 1 2  3 4 5  6   7
+
+  if (rowlen >= 3) {
+    var target = {
+      x: innerTd.parentNode.parentNode.cells[1].innerText,
+      y: innerTd.parentNode.parentNode.cells[2].innerText
+    };
+    var goal = {
+      x: 0,
+      y: 0
+    };
+    var LmVec = new Array();
+    var EmVec = new Array();
+    var rad = 0;
+
+    alert("init  x:" + goal.x + "  ,y:" + goal.y);
+    for (var i = 0; i < (rowlen - 1); i++) {
+      LmVec[i] = new Object();
+
+      LmVec[i].x = tbody.rows[0].cells[1].innerText - tbody.rows[i + 1].cells[1].innerText;
+      LmVec[i].y = tbody.rows[0].cells[2].innerText - tbody.rows[i + 1].cells[2].innerText;
+      //  alert(LmVec[i].x+"  , "+LmVec[i].y);
+      EmVec[i] = new Object();
+      EmVec[i].x = tbody.rows[0].cells[4].innerText - tbody.rows[i + 1].cells[4].innerText;
+      EmVec[i].y = tbody.rows[0].cells[5].innerText - tbody.rows[i + 1].cells[5].innerText;
+    }
+
+    //target.x=LmVec.x*s+LmVec.y*t   p=ax+by
+    //target.y=EmVec.x*s+EmVec.y*t   q=cx+dy
+
+    for (var i = 0; i < (rowlen - 2); i++) { //解法：クラメルの公式
+      var Det = LmVec[0].x * LmVec[i + 1].y - LmVec[0].y + LmVec[i + 1].x; //ad-bc
+      alert("det:" + Det);
+      if (Det == 0) {
+        //解が一位に定まらない
+      } else {
+        var s = (target.x * LmVec[i + 1].y - LmVec[0].y * target.x) / Det;
+        var t = (LmVec[0].x * target.y - target.y + LmVec[i + 1].x) / Det;
+        alert("s:" + s + "  ,t:" + t);
+        goal.x += s * EmVec[0].x + t * EmVec[i + 1].x;
+        goal.y += s * EmVec[0].y + t * EmVec[i + 1].y;
+      }
+    }
+
+    goal.x = goal.x / (rowlen - 2);
+    goal.y = goal.y / (rowlen - 2);
+    goal.x = Math.round(goal.x);
+    goal.y = Math.round(goal.y);
+    alert("x:" + goal.x + "  ,y:" + goal.y);
+
+    var movexr = $("#movex").val();
+    var moveyr = $("#movey").val();
+    var movezr = $("#movez").val();
+    console.log("movex="+movexr);
+    console.log("movey="+moveyr);
+    movexr = goal.x;
+    moveyr = goal.y;
+    $("#movex").val(String(movexr));
+    $("#movey").val(String(moveyr));
+
+    $.ajax({
+      type:"GET",
+      url:"http://" +UrlElement['sendIpAddress']+
+      ":"+UrlElement['sendPortNumber']+"/"+UrlElement['sendManufacturer']+
+      "/set/stagea?x="+encodeURIComponent(movexr)+
+      "&y="+encodeURIComponent(moveyr)+
+      "&z="+encodeURIComponent(movezr)+
+      "&a="+encodeURIComponent(movezr),
+      success: function(data){
+        console.log(data);//string型
+      }
+    });
+
+
+  } else {
+    alert("LM座標を3つ、EM座標を2つ以上指定して下さい");
+  }
+} // END moveEmCoordinate(innerTd);
+
+
+//var txt=document.createTextNode("X:"+cod.x+"  ,  Y:"+cod.y);
+//first.appendChild(txt);
+//coordinate.removeChild();
+//  var txt=document.createTextNode();
+//  coordinate.appendChild(txt);
diff --git a/JS/drawImage.js b/JS/drawImage.js
index c50f649..95b09d5 100644
--- a/JS/drawImage.js
+++ b/JS/drawImage.js
@@ -30,3 +30,34 @@ function drawMycrograph(ddata){
   context.putImageData(imgData, 0, 0);
 
 }
+$(function(){
+
+  var state="off"
+  var canvas = document.getElementById("canvasGuide");
+  var ctx=canvas.getContext('2d');
+  var center = {x:512/2,y:512/2};
+  $("#dispGuideButton").click( function(){
+    if(state=="on"){
+      ctx.clearRect(0,0,512,512);
+      state="off";
+    }else{
+
+    // 横線を引く
+  ctx.beginPath();
+  ctx.moveTo(0, center.y);
+  ctx.lineTo(512, center.y);
+  ctx.closePath();
+  ctx.stroke();
+
+
+// 縦線を引く
+  ctx.beginPath();
+  ctx.moveTo(center.x, 0);
+  ctx.lineTo(center.x, 512);
+  ctx.closePath();
+  ctx.stroke();
+  ctx . clearRect(center.x-10,center.y-10, 20, 20);
+  state="on";
+}
+});
+});
diff --git a/JS/em.js b/JS/em.js
index d4c9334..979285e 100644
--- a/JS/em.js
+++ b/JS/em.js
@@ -49,27 +49,31 @@ function clickMove(direction){
 console.log("movingdistance="+movingdistance);
 console.log("movex="+movexr);
 console.log("movey="+moveyr);
-
 switch(directionSwitch){
-      case "Up":
+
+    case 'Up':
       moveyr = parseInt(moveyr) + (parseInt(movingdistance));
       $("#movey").val(String(moveyr));
-      break;
+      $('#movey').change();
+    break;
 
-    case "Down":
+    case 'Down':
       moveyr = parseInt(moveyr) - (parseInt(movingdistance));
       $("#movey").val(String(moveyr));
+      $('#movey').change();
     break;
 
-    case "Left":
+    case 'Left':
       movexr = parseInt(movexr) + (parseInt(movingdistance));
       $("#movex").val(String(movexr));
+      $('#movex').change();
     break;
 
-    case "Right":
+    case 'Right':
     movexr = parseInt(movexr) - (parseInt(movingdistance));
     $("#movex").val(String(movexr));
     $("#currentx").val(String(movexr));
+    $('#movex').change();
     break;
     }
     $.ajax({
diff --git a/JS/log.js b/JS/log.js
new file mode 100644
index 0000000..d35ca9a
--- /dev/null
+++ b/JS/log.js
@@ -0,0 +1,122 @@
+//log instance
+var LoadLogMemory = new LogMemory();
+var GETLogMemory = LoadLogMemory.LogMemoryInstance();
+var MemoryAll = LoadLogMemory.GETLog();
+//URL instance
+var userSetting = new GetUrlElement();
+var UrlElement = userSetting.GetUrlElementInstance();
+
+
+/*
+LogMemory()
+ Memory()
+LogCollect()
+LogSimplePhotoCondtionText()
+*/
+
+function LogMemory(Log){
+  console.log("log");
+  var arg = new Array();
+  var i=0;
+  return {
+    LogMemoryInstance: function(log) {
+      arg[i] = log;
+      console.log(i);
+      console.log(arg[i]);
+      console.log(JSON.stringify(arg));
+      i = i + 1;
+      return arg;
+    },
+    GETLog: function(){
+      var argall = "";
+      for(var j=1;j<i;j++){
+        argall= JSON.stringify(arg);
+      }
+      console.log(argall);
+      return argall;
+    },
+  }
+}
+
+function LogCollect(logsave){
+  var date = new Date();
+  var logArray = new Array(2048);
+  var movex = $("#movex").val();
+  var movey = $("#movey").val();
+  var movez = $("#movez").val();
+  var movea = $("#movea").val();
+  var spotSize = $("#spotSize").val();
+  var magnificationA = $("#magnificationA").val();
+  var magnificationR = $("#magnificationR").val();
+  var binning = $("#binnig").val();
+  var size = $("#size").val();
+  var exptime = $("#exptime").val();
+  var Year = date.getFullYear();
+  var Month = date.getMonth() + 1;
+  var day = date.getDate();
+  var Hours = date.getHours();
+  var Minutes = date.getMinutes();
+  var Seconds = date.getSeconds();
+  var  data = Year.toString() +'_'+ Month.toString() +'_'+ day.toString()+'_'+Hours.toString()+'_'+Minutes.toString()+'_'+Seconds.toString();
+
+  var log =
+  { "time":data ,
+   "x":movex ,
+   "y":movey ,
+   "z":movez ,
+   "a":movea ,
+   "imageSize":size ,
+   "binning":binning ,
+   "exptime":exptime ,
+   "spotSize":spotSize ,
+   "magR":magnificationA ,
+   "magA":magnificationR ,
+  };
+
+  //logArray[i] = log;
+//  i=i++;
+console.log(log);
+    logArray.push(log);
+
+    console.log(logArray[2048]);
+    LogMemory(log);
+    LoadLogMemory.LogMemoryInstance(log);
+/*  if(logsave == 0){
+    logArray.push(log);
+  LogSimplePhotoCondtionText(logArray,data);
+}*/
+}
+
+function LogSimplePhotoCondtionText(logArray,data){
+  //ファイル名を取得、デフォルトは「mytext」
+  //      var name = document.getElementById('saveEmConditionFileName').value = 'mytext';
+  //テキストファイルを作成
+  var blob = new Blob([logArray], {type: 'text/plain'});
+  //リンクを取得
+  var linkcondition = document.getElementById('DL_link_condition');
+  //リンクにダウンロードするファイルをセット
+  linkcondition.href = window.URL.createObjectURL(blob);
+  //もしダウンロード属性に対応していたら
+  if ('download' in linkcondition) {
+    var Data = UrlElement['sendManufacturer'] + "_Log_" + data ;
+    //リンクにダウンロードする名前をセット
+    linkcondition.download = Data + '.txt';
+    //リンクをクリックしてダウンロードさせる
+    linkcondition.click();
+    //もし対応してなかったら
+  } else {
+    //メッセージを表示する
+    linkcondition.textContent = '右クリックから名前を付けて保存してください';
+  }
+}
+
+$(function(){
+  $("#logsave").click(function(){
+      var date = new Date();
+    var Year = date.getFullYear();
+    var Month = date.getMonth() + 1;
+    var day = date.getDate();
+    var data = Year.toString() +''+ Month.toString() +''+ day.toString();
+    LogSimplePhotoCondtionText(JSON.stringify(GETLogMemory),data);
+  });
+});
diff --git a/JS/map.js b/JS/map.js
new file mode 100644
index 0000000..669ede6
--- /dev/null
+++ b/JS/map.js
@@ -0,0 +1,63 @@
+
+window.onload=canvasMap;
+function canvasMap(){
+  var canvas = document.getElementById("canvasMap");
+  var ctx = canvas.getContext("2d");
+  var x = $("#movex").val();
+  var y = $("#movey").val();
+  var z = $("#movez").val();
+  var a = $("#movea").val();
+
+  ctx.beginPath();
+  ctx.fillStyle = "#808080";
+  ctx.arc(100,100,100,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.closePath();
+
+
+  canvas.addEventListener("mousedown",function(e){
+    $.ajax({
+      type:"GET",
+      url:"http://"+UrlElement['sendIpAddress']+
+      ":"+UrlElement['sendPortNumber']+
+      "/"+UrlElement['sendManufacturer']+
+      "/set/stagea?x="+encodeURIComponent(x)+
+      "&y="+encodeURIComponent(y)+
+      "&z="+encodeURIComponent(z)+
+      "&a="+encodeURIComponent(z),
+      success: function(data){
+        console.log(data);
+      }
+    });
+  });
+}
+
+function canvasMapDraw(){
+  var step = (1/2000);//倍率変化はここの通知を変化
+  var canvas = document.getElementById("canvasMap");
+  var ctx = canvas.getContext("2d");
+  var x = $("#movex").val();
+  var y = $("#movey").val();
+  if(x == 0 || y==0){
+  ctx.beginPath();
+  ctx.fillStyle = "#000000";
+  ctx.moveTo(100,100);
+  ctx.lineTo((parseInt(x)*step)+100,-(parseInt(y)*step)+100);
+  //ctx.lineTo(150,100)
+  ctx.closePath();
+  ctx.stroke();
+  moveX = (parseInt(x)*step)+100;
+  moveY = -(parseInt(y)*step)+100;
+}
+  else if(x !=0 || y!= 0){
+  ctx.beginPath();
+  ctx.fillStyle = "#000000";
+  ctx.moveTo(moveX,moveY);
+  ctx.lineTo((parseInt(x)*step)+100,-(parseInt(y)*step)+100);
+  //ctx.lineTo(150,100)
+  ctx.closePath();
+  ctx.stroke();
+  moveX = (parseInt(x)*step)+100;
+  moveY = -(parseInt(y)*step)+100;
+}
+}
diff --git a/index.html b/index.html
index e966521..7ad5090 100644
--- a/index.html
+++ b/index.html
@@ -35,8 +35,10 @@
                         <option value="hitachi">hitachi</option>
                       </select>
                       </p>
-                      <p>electron microscope name : <input type ="text" id = "electronMicroscopeName" size = "40" name = "sendElectronMicroscopeName"></p>
-                      <p><input type = "submit" value = "access" onclick = "UserSetting()" class="btn btn-default"></p>
+                      <p>electron microscope name :
+                        <input type ="text" id = "electronMicroscopeName" size = "40" name = "sendElectronMicroscopeName"></p>
+                      <p>
+                        <input type = "submit" value = "access" onclick = "UserSetting()" class="btn btn-default"></p>
                     </form>
 
                       <p>em condition save</p>
diff --git a/simplePhoto.html b/simplePhoto.html
index 16ff4be..abd1c52 100644
--- a/simplePhoto.html
+++ b/simplePhoto.html
@@ -37,22 +37,42 @@
         </div>
         <div class="row">
           <div class="col-md-6">
-            <div id="viewArea">
+            <div id="viewArea"  style="position: relative; height:600px;">
               <br>
               <br>
-              <canvas id="canvasSimplePhoto" width="512" height="512"></canvas>
+              <div style="position: absolute">
+              <canvas id="canvasSimplePhoto" width="512" height="512" style="z-index:0; position: absolute"></canvas>
+              <canvas id="canvasGuide" width="512" height="512" style="z-index:1; position: absolute"></canvas>
             </div>
           </div>
+
+            <div class="CLEM" style="position: static;">
+              <p>
+                <label>CLEM</label>
+              </p>
+              <canvas height="512" width="512" id="canvasCLEM" style="position: relative;"></canvas>
+              <p id="CLEMcoordinate">X:  ,  Y:</p>
+            <p>
+              <label>Upload image file for CLEM</label>
+            </p>
+          <!--  <form action="simplePhoto.html" method="post" enctype="multipart/form-data">  -->
+            <p> <input type="file" name="uploading"  accept="image/*" id="CLEMimg"/></p>
+          <!--  <p> <button type = "submit" name = "decideimg" onclick = "CLEMmap()" value="Upload">Upload</button></p>
+          </form>  -->
+                        </div>
+
+
+          </div>
           <div class="col-md-6">
             <h2>Control Electron Microscopy</h2>
+              <div style="float:left">
             <p>
               <label>map</label>
             </p>
-            <div>
               <canvas height="200" width="200" id="canvasMap"></canvas>
             </div>
 
-            <p>
+            <p style="clear:both">
               <label>Settings</label>
             </p>
             <div id="SimplePhotoPrams">
@@ -147,7 +167,7 @@
                   &nbsp;&nbsp;&nbsp;<button id="logsave" class="btn btn-default">Save</button>
                 </div>
 
-              <div id="condition" style="width:340px; height:250; padding:10px; border:6px outset">
+              <div id="condition" style="width:340px; height:250; padding:10px; margin:5px; border:6px outset">
                 TEM:<span id="tem"></span>
                 Position:<span id="Position"></span>x=<span id="currentx"></span>,y=<span id="currenty"></span>,z=<span id="currentz"></span>,a=<span id="currenta"></span><br>
                 SpotSizeIndex:<span id="SpotSizeIndex"></span>
@@ -158,6 +178,29 @@
                 Speed:<span id="Speed"></span>
               </div>
               <button class="btn btn-default" onclick="nowCondition()">currentConditon</button>
+              <button class="btn btn-default" id="dispGuideButton">Display guide</button>
+              <button class="btn btn-default" id="setClemButton">Rotate LE image</button>
+
+              <div   style="border:6px outset; padding:10px; margin:5px">
+                <p> Saved Coordinates</p>
+                <table>
+                  <thead>
+                    <tr>
+                      <th width="70px">LM:</th>
+                      <th width="100px">X</th>
+                      <th width="100px">Y</th>
+                      <th width="70px">EM:</th>
+                      <th width="100px">X</th>
+                      <th width="100px">Y</th>
+                      <th width="100px"></th>
+                      <th width="100px"><input type="button" value="Add" id="addList"/></th>
+
+                    </tr>
+                  </thead>
+                  <tbody id="listCoord">
+                  </tbody>
+              </div>
+
           </div>
         </div>
       </div>
@@ -167,10 +210,11 @@
 <!--script-->
 <script type="text/javascript" src= "JS/userSetting.js"></script>
 <script src="JS/jquery-1.7.2.min.js"></script>
+<script type="text/javascript" src= "JS/log.js"></script>
 <script type="text/javascript" src= "JS/em.js"></script>
 <script type="text/javascript" src= "JS/realtimeCamera.js"></script>
 <script type="text/javascript" src= "JS/drawImage.js"></script>
-<script type="text/javascript" src= "JS/log.js"></script>
 <script type="text/javascript" src= "JS/map.js"></script>
+<script type="text/javascript" src= "JS/CLEM.js"></script>
 </body>
 </html>
diff --git a/test.bat b/test.bat
new file mode 100644
index 0000000..9daeafb
--- /dev/null
+++ b/test.bat
@@ -0,0 +1 @@
+test
-- 
2.11.0