--- /dev/null
+$(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);
--- /dev/null
+//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);
+ });
+});
</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">
<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>
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>
<!--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>
OSDN Git Service
