JS/CLEM.js

   1 $(function() {
   2   var canvas = $('#canvasCLEM');
   3   var ctx = canvas[0].getContext("2d");
   4
   5   $('#CLEMimg').on('change', function CLEMmap() { //画像を選択時に呼び出される
   6
   7     if (window.File) { //FileAPIを未対応ブラウザではアラート
   8
   9       var files = $('#CLEMimg')[0].files[0];
  10       var reader = new FileReader();
  11       var img = new Image();
  12
  13       reader.onload = function(evt) {
  14         img.onload = function() {
  15           //  参考  https://qiita.com/PG0721/items/599ba2921b8339700fe3
  16           var imgAspect = img.width / img.height;
  17           ctx.clearRect(0, 0, 512, 512);
  18           if (imgAspect >= 1) { //画像が横長
  19             left = 0;
  20             width = ctx.canvas.width;
  21             height = ctx.canvas.height / imgAspect;
  22             to = (ctx.canvas.height - height) / 2;
  23           } else { //画像が縦長
  24             to = 0;
  25             width = ctx.canvas.width * imgAspect;
  26             height = ctx.canvas.height;
  27             left = (ctx.canvas.width - width) / 2;
  28           }
  29           ctx.drawImage(img, 0, 0, img.width, img.height, left, to, width, height); //画像をアスペクト比を維持して中心に表示
  30         }
  31         img.src = evt.target.result;
  32       }
  33       reader.readAsDataURL(files);
  34     } else {
  35       window.alert("本ブラウザではFile APIが使えません");
  36     }
  37   }); //END   CLEMmap()
  38
  39   $('#setClemButton').on('click', function setClem() {
  40     var tbody = document.getElementById("listCoord");
  41     var rowlen = tbody.rows.length; //行数
  42     //      LM X Y EM X Y Mov Del
  43     //cells 0 1 2  3 4 5  6   7
  44
  45     if (rowlen >= 2) {
  46
  47       var LmVec = new Array();
  48       var EmVec = new Array();
  49       var rad = 0;
  50       for (var i = 0; i < (rowlen - 1); i++) {
  51         LmVec[i] = new Object();
  52
  53         LmVec[i].x = tbody.rows[0].cells[1].innerText - tbody.rows[i + 1].cells[1].innerText;
  54         LmVec[i].y = tbody.rows[0].cells[2].innerText - tbody.rows[i + 1].cells[2].innerText;
  55         //  alert(LmVec[i].x+"  , "+LmVec[i].y);
  56         EmVec[i] = new Object();
  57         EmVec[i].x = tbody.rows[0].cells[4].innerText - tbody.rows[i + 1].cells[4].innerText;
  58         EmVec[i].y = tbody.rows[0].cells[5].innerText - tbody.rows[i + 1].cells[5].innerText;
  59         //  alert(EmVec[i].x+"  , "+EmVec[i].y);
  60         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);
  61         if (dist == 0) {
  62           alert("座標をセットし直して下さい");
  63         } else {
  64           var cos = (LmVec[i].x * EmVec[i].x + LmVec[i].y * EmVec[i].y) / dist;
  65           var sin = (LmVec[i].x * EmVec[i].y - LmVec[i].y * EmVec[i].x) / dist;
  66
  67           //alert("cos:"+cos+"   sin:"+sin);
  68           var rad1 = Math.acos(cos);
  69           var rad2 = Math.asin(sin);
  70
  71           //alert("rad1:"+rad1+"   rad2:"+rad2);
  72           if (cos >= 0 && sin >= 0) { //0<rad<pi/2
  73             rad += (-1) * rad1;
  74           } else if (cos >= 0 && sin < 0) { //-2/pi<rad<0
  75             rad += (-1) * rad2;
  76           } else if (cos < 0 && sin >= 0) { //pi/2<rad<pi
  77             rad += (-1) * rad1;
  78           } else { // -pi<rad<-pi/2
  79             rad += rad1;
  80           }
  81         }
  82       }
  83       rad = rad / (rowlen - 1);
  84       alert(rad * 180 / Math.PI + " 度");
  85
  86       ctx.clearRect(0, 0, 512, 512);
  87       ctx.translate(216, 216);
  88       ctx.rotate(-1 * rad);
  89       ctx.translate(-216, -216);
  90       $('#CLEMimg').change();
  91       /*for(i=0;i<rowlen;i++){
  92         var temp={x:0,y:0};
  93       temp.x=tbody.rows[i].cells[1].innerText*Math.cos(rad)-tbody.rows[i].cells[2].innerText*Math.sin(rad);
  94       temp.y=tbody.rows[i].cells[1].innerText*Math.sin(rad)+tbody.rows[i].cells[2].innerText*Math.cos(rad);
  95       temp.x=Math.round(temp.x);
  96       temp.y=Math.round(temp.y);
  97       tbody.rows[i].cells[1].innerHTML=temp.x;
  98       tbody.rows[i].cells[2].innerHTML=temp.y;
  99       alert(temp.x+"  ,  "+temp.y);
 100       }*/
 101
 102     }
 103   }); //END setClem()
 104
 105 }); //END $(function(){
 106
 107
 108 function calcClemCoord(event) { //CLEM画像のポインター位置の座標を返す
 109
 110   //参考  https://lab.syncer.jp/Web/JavaScript/Snippet/12/
 111   var clickX = event.pageX;
 112   var clickY = event.pageY;
 113
 114   // 要素の位置を取得
 115   var clientRect = document.getElementById("canvasCLEM").getBoundingClientRect();
 116   var positionX = clientRect.left + window.pageXOffset;
 117   var positionY = clientRect.top + window.pageYOffset;
 118
 119   // 要素内におけるクリック位置を計算
 120   // 要素の中心を0にする
 121   var cod = new Object();
 122   cod.x = clickX - positionX - 256;
 123   cod.y = clickY - positionY - 256;
 124   return cod;
 125 }
 126 /*
 127 document.getElementById("canvasSimplePhoto").addEventListener('mousemove', function( event ) {//EM画像にマウスオーバー時
 128   var coordinate=document.getElementById("EMcoordinate");
 129   var cod = calcEmCoord(event);
 130   coordinate.childNodes[0].data= "X:"+cod.x+"  ,  Y:"+cod.y;
 131  });
 132 */
 133 document.getElementById("canvasCLEM").addEventListener('mousemove', function(event) { //CLEM画像にマウスオーバー時
 134   var coordinate = document.getElementById("CLEMcoordinate");
 135   var cod = calcClemCoord(event);
 136   coordinate.childNodes[0].data = "X:" + cod.x + "  ,  Y:" + cod.y;
 137 });
 138
 139 function setLmCoordinate(innerTd) {
 140
 141   var tr = innerTd.parentNode.parentNode; //tr
 142   tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="cancelSetLmCoordinate(this)" style="background-color:red;" />'
 143   tr.cells[0].state = "on";
 144
 145   document.getElementById("canvasCLEM").addEventListener('click', function(event) {
 146     if (tr.cells[0].state == "on") {
 147       var cod = calcClemCoord(event);
 148       tr.cells[1].innerHTML = cod.x;
 149       tr.cells[2].innerHTML = cod.y;
 150       tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
 151       tr.cells[0].state = "off";
 152     }
 153   });
 154
 155
 156 }
 157
 158 function cancelSetLmCoordinate(innerTd) {
 159   var tr = innerTd.parentNode.parentNode; //tr
 160   tr.cells[0].innerHTML = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
 161   tr.cells[0].state = "off";
 162 }
 163
 164 document.getElementById("addList").addEventListener('click', function addList(event) {
 165
 166   // tbody要素に指定したIDを取得し、変数「tbody」に代入
 167   var tbody = document.getElementById("listCoord");
 168   var row = tbody.insertRow(-1); //tr
 169   var cellLM0 = row.insertCell(-1); //td0
 170   cellLM0.state = "off";
 171   var cellLMX = row.insertCell(-1); //td1
 172   var cellLMY = row.insertCell(-1); //td2
 173   var cellEM0 = row.insertCell(-1); //td3
 174   var cellEMX = row.insertCell(-1); //td4
 175   var cellEMY = row.insertCell(-1); //td5
 176   var cellMoveButton = row.insertCell(-1); //td6
 177   var cellDelButton = row.insertCell(-1); //td7
 178   var SetLmButton = '<input type="button" value="Set" onclick="setLmCoordinate(this)" />';
 179   var DelButton = '<input type="button" value="Delete" onclick="deleteList(this)" />';
 180   var SetButton = '<input type="button" value="Set" onclick="setEmCoordinate(this)" />';
 181   var MoveButton = '<input type="button" value="Move" onclick="moveEmCoordinate(this)" />';
 182   cellLM0.innerHTML = SetLmButton;
 183   cellDelButton.innerHTML = DelButton;
 184   cellEM0.innerHTML = SetButton;
 185   cellMoveButton.innerHTML = MoveButton;
 186   //      LM X Y EM X Y Mov Del
 187   //cells 0 1 2  3 4 5  6   7
 188 });
 189
 190 function deleteList(innerTd) {
 191   var tr = innerTd.parentNode.parentNode; //tr
 192   tr.parentNode.deleteRow(tr.sectionRowIndex);
 193 }
 194
 195 function setEmCoordinate(innerTd) {
 196   var movexr = $("#movex").val();
 197   var moveyr = $("#movey").val();
 198   var tr = innerTd.parentNode.parentNode; //tr
 199   cellEMX = tr.cells[4];
 200   cellEMY = tr.cells[5];
 201   cellEMX.innerHTML = parseInt(movexr);
 202   cellEMY.innerHTML = parseInt(moveyr);
 203 }
 204
 205 function moveEmCoordinate(innerTd) {
 206   var tbody = document.getElementById("listCoord");
 207   var rowlen = tbody.rows.length //行数
 208   var s = 0;
 209   var t = 0;
 210   //      LM X Y EM X Y Mov Del
 211   //cells 0 1 2  3 4 5  6   7
 212
 213   if (rowlen >= 3) {
 214     var target = {
 215       x: innerTd.parentNode.parentNode.cells[1].innerText,
 216       y: innerTd.parentNode.parentNode.cells[2].innerText
 217     };
 218     var goal = {
 219       x: 0,
 220       y: 0
 221     };
 222     var LmVec = new Array();
 223     var EmVec = new Array();
 224     var rad = 0;
 225
 226     alert("init  x:" + goal.x + "  ,y:" + goal.y);
 227     for (var i = 0; i < (rowlen - 1); i++) {
 228       LmVec[i] = new Object();
 229
 230       LmVec[i].x = tbody.rows[0].cells[1].innerText - tbody.rows[i + 1].cells[1].innerText;
 231       LmVec[i].y = tbody.rows[0].cells[2].innerText - tbody.rows[i + 1].cells[2].innerText;
 232       //  alert(LmVec[i].x+"  , "+LmVec[i].y);
 233       EmVec[i] = new Object();
 234       EmVec[i].x = tbody.rows[0].cells[4].innerText - tbody.rows[i + 1].cells[4].innerText;
 235       EmVec[i].y = tbody.rows[0].cells[5].innerText - tbody.rows[i + 1].cells[5].innerText;
 236     }
 237
 238     //target.x=LmVec.x*s+LmVec.y*t   p=ax+by
 239     //target.y=EmVec.x*s+EmVec.y*t   q=cx+dy
 240
 241     for (var i = 0; i < (rowlen - 2); i++) { //解法：クラメルの公式
 242       var Det = LmVec[0].x * LmVec[i + 1].y - LmVec[0].y + LmVec[i + 1].x; //ad-bc
 243       alert("det:" + Det);
 244       if (Det == 0) {
 245         //解が一位に定まらない
 246       } else {
 247         var s = (target.x * LmVec[i + 1].y - LmVec[0].y * target.x) / Det;
 248         var t = (LmVec[0].x * target.y - target.y + LmVec[i + 1].x) / Det;
 249         alert("s:" + s + "  ,t:" + t);
 250         goal.x += s * EmVec[0].x + t * EmVec[i + 1].x;
 251         goal.y += s * EmVec[0].y + t * EmVec[i + 1].y;
 252       }
 253     }
 254
 255     goal.x = goal.x / (rowlen - 2);
 256     goal.y = goal.y / (rowlen - 2);
 257     goal.x = Math.round(goal.x);
 258     goal.y = Math.round(goal.y);
 259     alert("x:" + goal.x + "  ,y:" + goal.y);
 260
 261     var movexr = $("#movex").val();
 262     var moveyr = $("#movey").val();
 263     var movezr = $("#movez").val();
 264     console.log("movex="+movexr);
 265     console.log("movey="+moveyr);
 266     movexr = goal.x;
 267     moveyr = goal.y;
 268     $("#movex").val(String(movexr));
 269     $("#movey").val(String(moveyr));
 270
 271     $.ajax({
 272       type:"GET",
 273       url:"http://" +UrlElement['sendIpAddress']+
 274       ":"+UrlElement['sendPortNumber']+"/"+UrlElement['sendManufacturer']+
 275       "/set/stagea?x="+encodeURIComponent(movexr)+
 276       "&y="+encodeURIComponent(moveyr)+
 277       "&z="+encodeURIComponent(movezr)+
 278       "&a="+encodeURIComponent(movezr),
 279       success: function(data){
 280         console.log(data);//string型
 281       }
 282     });
 283
 284
 285   } else {
 286     alert("LM座標を3つ、EM座標を2つ以上指定して下さい");
 287   }
 288 } // END moveEmCoordinate(innerTd);
 289
 290
 291 //var txt=document.createTextNode("X:"+cod.x+"  ,  Y:"+cod.y);
 292 //first.appendChild(txt);
 293 //coordinate.removeChild();
 294 //  var txt=document.createTextNode();
 295 //  coordinate.appendChild(txt);