Initial commit

 Changes to be committed:
	new file:   CSS/*
	new file:   File/log.txt
	new file:   JS/*
	new file:   cgi-bin/*
	new file:   images/*
	download.gif
	new file:   vem.html
	new file:   vemserver.rb

diff --git a/CSS/icon/TEM1icon.png b/CSS/icon/TEM1icon.png
new file mode 100755 (executable)
index 0000000..15c19a0
Binary files /dev/null and b/CSS/icon/TEM1icon.png differ

diff --git a/CSS/icon/TEM2icon.png b/CSS/icon/TEM2icon.png
new file mode 100755 (executable)
index 0000000..a309b72
Binary files /dev/null and b/CSS/icon/TEM2icon.png differ

diff --git a/CSS/icon/TEM3icon.png b/CSS/icon/TEM3icon.png
new file mode 100755 (executable)
index 0000000..7682343
Binary files /dev/null and b/CSS/icon/TEM3icon.png differ

diff --git a/CSS/vemclient.css b/CSS/vemclient.css
new file mode 100755 (executable)
index 0000000..becc73b
--- /dev/null
+++ b/CSS/vemclient.css
@@ -0,0 +1,65 @@
+body{
+  background-color:#F5FFFA;
+  margin-left:auto;
+  margin-right:auto;
+  text-align:center;
+  width:90%;
+}
+
+#HITACHI {
+  border:0px;
+  height:141px;
+  width:300px;
+  background:url(icon/TEM1icon.png) left top no-repeat;
+}
+
+#FEI {
+  border:0px;
+  height:141px;
+  width:300px;
+  background:url(icon/TEM2icon.png) left top no-repeat;
+}
+
+#JEOL {
+  border:0px;
+  height:141px;
+  width:300px;
+  background:url(icon/TEM3icon.png) left top no-repeat;
+}
+
+#container{
+  width:1000px;
+  margin-left:auto;
+  margin-right:auto;
+
+}
+
+#leftside{
+  width:580px;
+  float:left;
+  margin: 10px;
+}
+
+#rightside{
+  width:380px;
+  float:left;
+  margin: 10px;
+}
+
+div#left{
+  float:left;
+  position:absolute;
+  left:100px;
+}
+div#right{
+  position:relative;
+  left:80px;
+}
+.clearRight{
+  clear:left;
+}
+.box{
+  position:absolute;
+  text-align:left;
+  left:60px;
+}

diff --git a/File/log.txt b/File/log.txt
new file mode 100755 (executable)
index 0000000..9bca002
--- /dev/null
+++ b/File/log.txt
@@ -0,0 +1,165 @@
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Accepted!
+Connect HITACHI
+Connect FEI
+Connect HITACHI
+Connect FEI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect JEOL
+Connect FEI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect FEI
+Connect HITACHI
+Connect FEI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect FEI
+Connect FEI
+Connect JEOL
+Connect HITACHI
+Connect FEI
+Connect JEOL
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect FEI
+Connect FEI
+Connect FEI
+Connect FEI
+Connect FEI
+Connect FEI
+Connect FEI
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect FEI
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect FEI
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect HITACHI
+Connect FEI
+Connect JEOL
+Connect JEOL
+Connect FEI
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect HITACHI
+Connect FEI
+Connect JEOL
+Connect HITACHI
+Connect FEI
+Connect JEOL
+Connect HITACHI
+Connect FEI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect JEOL
+Connect JEOL
+Connect JEOL
+Connect HITACHI
+Connect HITACHI
+Connect FEI
+Connect FEI
+Connect JEOL

diff --git a/JS/TemControl.js b/JS/TemControl.js
new file mode 100755 (executable)
index 0000000..3f61145
--- /dev/null
+++ b/JS/TemControl.js
@@ -0,0 +1,49 @@
+function TemControl(command,parameter){
+
+  var ajax = getAjax();
+
+  if(command == "Connect"){
+    var result = document.getElementById("connection");
+  }else{
+    var result = document.getElementById("result");
+  }
+
+  if(ajax){
+    try{
+      ajax.onreadystatechange = getData;
+    }catch(e){
+      result.innerHTML = "onreadystate change error";
+    }
+
+    try{
+      ajax.open("GET","//localhost:8000/cgi-bin/vemclient.rb?command="+encodeURIComponent(command)+"&parameter="+encodeURIComponent(parameter),true);
+    }catch(e){
+      result.innerHTML = "ajax open error";
+    }
+
+    try{
+      ajax.send(null);
+    }catch(e){
+      result.innerHTML = "send error";
+    }
+  }else{
+    result.innerHTML = "you cannot use ajax...";
+  }
+
+  function getData(){
+    if(ajax.readyState == 4){
+      if(ajax.status == 200){
+       result.innerHTML = ajax.responseText;
+       if(ajax.responseText.match(/Control/i)){
+         a = ajax.responseText.split(" ");
+         alert(a[1]+a[2]);
+       }
+      }else{
+       result.innerHTML = "HTTP error";
+      }
+    }else{
+      result.innerHTML = "HTTP Transmission...";
+    }
+  }
+
+}

diff --git a/JS/ajax.js b/JS/ajax.js
new file mode 100755 (executable)
index 0000000..0843b4f
--- /dev/null
+++ b/JS/ajax.js
@@ -0,0 +1,17 @@
+function getAjax(){
+       var ajax = null;
+       try{
+               ajax = new XMLHttpRequest();
+       }catch(e){
+               try{
+                       ajax = new ActiveXObject("Msxml2.XMLHTTP");
+               }catch(e){
+                       try{
+                               ajax = new ActiveXObject("Microsoft.XMLHTTP");
+                       }catch(e){
+                               alert("Not Init");
+                       }
+               }
+       }
+       return ajax;
+}

diff --git a/JS/filecontrol.js b/JS/filecontrol.js
new file mode 100755 (executable)
index 0000000..fa62f37
--- /dev/null
+++ b/JS/filecontrol.js
@@ -0,0 +1,101 @@
+function fileListDialog(files){
+  var name = new Array();
+  var urn = new Array();
+  var type = new Array();
+  var size = new Array();
+  var latest = new Array();
+
+  
+    i=0
+    name[i] = files[i].name;
+    urn[i] = files[i].urn;
+    type[i] = files[i].type;
+    size[i] = files[i].size;
+    latest[i] = files[i].lastModifiedDate;
+
+  //display file status
+  var output = "<hr>The number of files is "+files.length+"<br><hr/>";
+    output+="Name:"+name[i]+"<br>"+"URN:"+urn[i]+"<br>"+"Type:"+type[i]+"<br>"+"Size:"+size[i]+"<br>"+"Date:"+latest[i]+"<br><hr>"
+  document.getElementById("filestatus").innerHTML = output;
+
+    document.getElementById("filecontent").innerHTML = "";
+  //get file contents
+  fileread(files,"filecontent","file");
+
+}
+
+function fileread(blob,place,variable){
+    var f = blob[i];
+    var reader = new FileReader();
+
+    if(f.type.match("text.*")){
+      reader.onload = function(e){
+       document.getElementById(place).innerHTML = reader.result;
+       document.getElementById(variable).value = reader.result;
+       document.getElementById("flag").value = "text";
+      }
+      reader.readAsText(f,"utf-8");
+    }
+    
+    if(f.type.match("image.*")){
+      reader.onload = function(e){
+       var img = document.createElement("img");
+       img.src = reader.result;
+       document.getElementById(place).appendChild(img);
+        document.getElementById(variable).value = reader.result;
+       document.getElementById("flag").value = "image";
+      }
+      reader.readAsDataURL(f);
+    }
+  
+}
+
+
+function onDrop(event){
+  var files = event.dataTransfer.files;
+  var disp = document.getElementById("disp");
+  disp.innerHTML = "";
+
+  for(i=0;i<files.length;i++){
+    var f = files[i];
+    var reader = new FileReader();
+
+    if(!f.type.match('image.*')&&!f.type.match('text.*')){
+      alert("Drag and Drop Image or Text file!");
+      continue;
+    }
+
+    reader.onerror = function(event){
+      disp.innerHTML = "read error!";
+    }
+    
+    if(f.type.match('text.*')){
+      reader.onload = function(event){
+       disp.innerHTML = event.target.result;
+       document.getElementById("file").value = reader.result;
+      }
+      reader.readAsText(f,"utf-8");
+    }
+
+    if(f.type.match('image.*')){
+      reader.onload = function(event){
+       var img = document.createElement("img");
+       img.src = event.target.result;
+       disp.appendChild(img);
+       document.getElementById("file").value = reader.result;
+      }
+      reader.readAsDataURL(f);
+    }
+  }
+
+  reader.addEventListener('progress',function(event){
+   document.getElementById("progress").innerHTML = Math.floor((event.loaded / event.total)*100);
+  },true);
+
+      event.preventDefault();
+}
+
+function onDragOver(event){
+  event.preventDefault();
+}
+

diff --git a/JS/filedownload.js b/JS/filedownload.js
new file mode 100755 (executable)
index 0000000..e468aee
--- /dev/null
+++ b/JS/filedownload.js
@@ -0,0 +1,43 @@
+function filewrite(){
+  var ajax = getAjax();
+  var result = document.getElementById("link");
+
+  if(ajax){
+    try{
+      ajax.onreadystatechange = getData;
+    }catch(e){
+      result.innerHTML = "onreadystatechange error!"
+    }
+
+    try{
+      ajax.open("GET","//localhost:8000/images/"+document.cameracontrol.input.value+".tif",true);
+      ajax.responseType = 'blob'
+    }catch(e){
+      result.innerHTML = "ajax open error!";
+    }
+
+    try{
+      ajax.send(null);
+    }catch(e){
+      result.innerHTML = "send error!";
+    }
+  }else{
+    result.innerHTML = "you cannot use ajax...";
+  }
+
+  function getData(){
+    if(ajax.readyState == 4){
+      if(ajax.status == 200){
+       var url = window.URL.createObjectURL(this.response)
+         dl_name = document.cameracontrol.dlname.value+"_"+document.cameracontrol.mode.value;
+       result.innerHTML = '<a href="'+url+'" download='+dl_name+'>download_link</a>';
+      }else{
+       result.innerHTML = "HTTP error!";
+      }
+    }else{
+      result.innerHTML = "HTTP Transmission!";
+    }
+  }
+
+}
+

diff --git a/cgi-bin/activetem.rb b/cgi-bin/activetem.rb
new file mode 100755 (executable)
index 0000000..0f652a7
--- /dev/null
+++ b/cgi-bin/activetem.rb
@@ -0,0 +1,2 @@
+$activehost = '192.168.4.114'
+$activeport = '33333'

diff --git a/cgi-bin/implementation.rb b/cgi-bin/implementation.rb
new file mode 100755 (executable)
index 0000000..be9b16c
--- /dev/null
+++ b/cgi-bin/implementation.rb
@@ -0,0 +1,19 @@
+#!/usr/bin/ruby
+
+$tem = Hash.new{|h,k| h[k]=Hash.new(&h.default_proc)}
+
+$tem = {
+  'HITACHI' => {
+    'host' => '192.168.4.114',
+    'port' => '11111'
+  },
+  'FEI' => {
+    'host' => '192.168.4.114',
+    'port' => '22222'
+  },
+  'JEOL' => {
+    'host' => '192.168.4.114',
+    'port' => '33333'
+  }
+}
+

diff --git a/cgi-bin/settem.rb b/cgi-bin/settem.rb
new file mode 100755 (executable)
index 0000000..41dccef
--- /dev/null
+++ b/cgi-bin/settem.rb
@@ -0,0 +1,41 @@
+#!/usr/bin/ruby
+
+require "socket"
+require "./cgi-bin/implementation"
+require "./cgi-bin/activetem"
+
+class SetTem
+
+  def initialize(activetem)
+    @@tem = activetem
+    #get TEM_Instrument info
+    @@host = $tem["#{activetem}"]["host"]
+    @@port = $tem["#{activetem}"]["port"]
+
+    #set TEM_instrument info
+    tem = File.open("./cgi-bin/activetem.rb","w")
+    tem.write "$activehost = '#{@@host}'\n$activeport = '#{@@port}'\n"
+    
+    tem.close
+
+  end
+
+  def connect
+    
+    log = File.open("./File/log.txt","a")
+    socket = TCPSocket.open($activehost,$activeport)
+    socket.puts "Connect:#{@@tem}"
+    socket.flush
+
+    output = socket.gets
+    log.write output
+
+    log.close
+    socket.close
+
+    return output
+
+  end
+  
+end
+

diff --git a/cgi-bin/vemclient.rb b/cgi-bin/vemclient.rb
new file mode 100755 (executable)
index 0000000..0abff7d
--- /dev/null
+++ b/cgi-bin/vemclient.rb
@@ -0,0 +1,62 @@
+#!/usr/bin/ruby
+
+require "cgi"
+require "socket"
+require "./cgi-bin/settem"
+require "./cgi-bin/activetem"
+require "systemu"
+
+cgi = CGI.new
+
+command = cgi['command']
+command = CGI.unescapeHTML(command)
+
+parameter = cgi['parameter']
+parameter = CGI.unescapeHTML(parameter)
+
+case command
+
+when "Connect" then
+  temset = SetTem.new(parameter)
+  result = temset.connect
+
+when "StageSet", "MagnificationSet", "ImageShift" then
+  socket = TCPSocket.open($activehost,$activeport)
+  socket.puts parameter
+
+  result = socket.gets.chomp
+  if result == "Accepted!" then
+    tiff2gif = "source Eos/env/Eos_env;tiff2mrc -i images/download.tif -o images/download.mrc;mrc2gif -i images/download.mrc -o images/download.gif"
+    systemu tiff2gif
+  end
+
+  result = "<img src = 'images/download.gif' height=200 width=400><br>"
+
+
+#when something then
+  #do_something
+  #
+  #
+when "Control" then
+  socket = TCPSocket.open($activehost,$activeport)
+  socket.puts "Control:#{parameter}"
+
+  result = socket.gets
+
+when "TakePhoto" then
+  filename = parameter.split(":")
+  tiff2gif = "source Eos/env/Eos_env;tiff2mrc -i images/#{filename[0]}.tif -o images/#{filename[0]}.mrc;mrc2gif -i images/#{filename[0]}.mrc -o images/#{filename[1]}.gif"
+  systemu tiff2gif
+
+  result = "<img src = 'images/#{filename[1]}.gif' height=400 width=400><br>"
+
+else
+  #do_something_other
+end
+
+
+#return ajax-engine::create HTML code
+puts "Content-type: text/html\n\n"
+puts ""
+
+puts result

diff --git a/images/download.gif b/images/download.gif
new file mode 100755 (executable)
index 0000000..a6513d5
Binary files /dev/null and b/images/download.gif differ

diff --git a/images/download.mrc b/images/download.mrc
new file mode 100755 (executable)
index 0000000..b610f56
Binary files /dev/null and b/images/download.mrc differ

diff --git a/images/download.tif b/images/download.tif
new file mode 100755 (executable)
index 0000000..cb1fb11
Binary files /dev/null and b/images/download.tif differ

diff --git a/images/leaf.gif b/images/leaf.gif
new file mode 100755 (executable)
index 0000000..eb9e7f4
Binary files /dev/null and b/images/leaf.gif differ

diff --git a/images/leaf.mrc b/images/leaf.mrc
new file mode 100755 (executable)
index 0000000..af0aa64
Binary files /dev/null and b/images/leaf.mrc differ

diff --git a/images/leaf.tif b/images/leaf.tif
new file mode 100755 (executable)
index 0000000..92ffc4a
Binary files /dev/null and b/images/leaf.tif differ

diff --git a/images/test.gif b/images/test.gif
new file mode 100755 (executable)
index 0000000..a6513d5
Binary files /dev/null and b/images/test.gif differ

diff --git a/images/test.mrc b/images/test.mrc
new file mode 100755 (executable)
index 0000000..b610f56
Binary files /dev/null and b/images/test.mrc differ

diff --git a/images/test.tif b/images/test.tif
new file mode 100755 (executable)
index 0000000..cb1fb11
Binary files /dev/null and b/images/test.tif differ

diff --git a/vem.html b/vem.html
new file mode 100755 (executable)
index 0000000..4725b53
--- /dev/null
+++ b/vem.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>VEM Control Interface</title>
+    <link rel="stylesheet" type="text/css" href="CSS/vemclient.css">
+    <script type ="text/javascript" src="JS/ajax.js"></script>
+    <script type ="text/javascript" src="JS/TemControl.js"></script>
+    <script type ="text/javascript" src="JS/filecontrol.js"></script>
+    <script type ="text/javascript" src="JS/filedownload.js"></script>
+  </head>
+  <body>
+
+    <b>V</b>irtual <b>E</b>lectron <b>M</b>icroscope Client
+
+    <form id="temselect" name="temselect" action="#" onsubmit="return false;">
+      <input type="hidden" id="teminfo" name="teminfo" value="none"></input>
+      <input type="button" name="submit" id="HITACHI" onclick="TemControl('Connect','HITACHI');"></input>
+      <input type="button" name="submit" id="FEI" onclick="TemControl('Connect','FEI');"></input>
+      <input type="button" name="submit" id="JEOL" onclick="TemControl('Connect','JEOL');"></input>
+    </form>
+    <br>
+    <div id="connection" style="width:600px; height:20px; border:3px inset; margin:0 auto">
+
+    </div>
+
+
+    <div id="container">
+
+      <div id="leftside">
+
+       <p>The EM Image</p>
+       <div id="result" style="margin:0 auto; width:400px; height:400px; padding:10px; border:3px solid">The EM-Image from instrument.</div>
+
+       <form id="cameracontrol" name="cameracontrol" action="#" onsubmit="return false;">
+         <input type="hidden" id="fileurl" name="fileurl" value="none"></input>
+
+         <br>
+         <input type="button" style="width:150px;" name="submit" value="Initialization" onclick="TemControl('Control','initialization');"></input>
+         <input type="button" style="width:150px;" name="submit" value="Finalization" onclick="TemControl('Control','finalization');"></input>
+         <br>
+
+         <div id="takephoto">
+           <div id="left">
+             <p>Input<input type="text" name="input" class="box" size="30"></input>
+             <br>
+             Output<input type="text" name="output" class="box" size="30"></input>
+             </p>
+           </div>
+           <br>
+           <div id="right">
+             <input type="button" style="width:150px;" name="submit" value="TakePhoto" onclick="TemControl('TakePhoto',document.cameracontrol.input.value+':'+document.cameracontrol.output.value);">
+           </div>
+           <p class ="clearRight" />
+         </div>
+
+         <div id="download">
+           <div id="left">
+             <p>Mode<input type="text" name="mode" class="box" size="30"></input>
+             <br>
+             DL<input type="text" name="dlname" class="box" size="30"></input>
+             </p>
+           </div>
+           <br>
+           <div id="right">
+             <input type="button" style="width:150px;" name="submit" value="Download" onclick="filewrite();">
+             <p id="link"></p>
+           </div>
+           <p class ="clearRight" />
+         </div>
+
+       </form>
+
+       <br>
+      </div>
+
+      <div id="rightside">
+
+       <p>TEM Control Command</p>
+       <div id="command" style="width:340px; height:570px; padding:10px; border:6px outset">The EM-control commandset.</div>
+
+      </div>
+
+    </div>
+
+  </body>
+</html>

diff --git a/vemserver.rb b/vemserver.rb
new file mode 100755 (executable)
index 0000000..c308ed3
--- /dev/null
+++ b/vemserver.rb
@@ -0,0 +1,35 @@
+#!/usr/bin/ruby
+
+require "socket"
+require "thread"
+
+class FEIControlServer
+  @@flag = true
+
+  def initialize()
+    @server = TCPServer.open("192.168.4.114",11111)
+    puts @server.to_s
+  end
+
+  def listener
+    while @@flag
+      Thread.start(@server.accept){|socket|
+       begin
+         line = socket.gets.chomp
+         puts line
+         socket.puts "Accepted!"
+         
+
+       ensure
+         socket.close
+       
+       end
+      }
+    end
+  end
+
+end
+
+fei = FEIControlServer.new
+fei.listener
+