cosmic.html

<!--START of STYLE-->
<style>
    #canvas {
        margin: auto;
        display: block;
    }
    .selection-buttons {
      text-align:center;
      margin-top:20px;
    }
    .get-info{
      text-align:center;
      margin-top:20px;
    }
</style>
<!--END of STYLE-->

<!--START of HTML-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<br>
<h1 class="display-2" style="text-align:center">Cryo-EM <span class="text-info"><b>COSMIC<sup>2</sup></b></span></h1>
<p class="lead" style="text-align:center;font-size:36px">
    Open Source Multiplatform Infrastructure for Cloud Computing
</p>
<div class="container">
    <h1 class="display-4"><span class="text-info">Images</span></h1><p class="lead" style="font-size:24px">
        Click on a button to display an image
    </p>
    <div class = "image-btn" id="image-btn">
        <button type="button" class="btn btn-light btn-md">1</button>
        <button type="button" class="btn btn-light btn-md">2</button>    
        <button type="button" class="btn btn-light btn-md">3</button>
        <button type="button" class="btn btn-light btn-md">4</button>
        <button type="button" class="btn btn-light btn-md ">5</button>
        <button type="button" class="btn btn-light btn-md">6</button>    
        <button type="button" class="btn btn-light btn-md">7</button>
        <button type="button" class="btn btn-light btn-md">8</button>
        <button type="button" class="btn btn-light btn-md ">9</button>
        <button type="button" class="btn btn-light btn-md">10</button>    
        <button type="button" class="btn btn-light btn-md">11</button>
        <button type="button" class="btn btn-light btn-md">12</button>
        <button type="button" class="btn btn-light btn-md">13</button>
        <button type="button" class="btn btn-light btn-md">14</button>    
        <button type="button" class="btn btn-light btn-md">15</button>
        <button type="button" class="btn btn-light btn-md">16</button>
        <button type="button" class="btn btn-light btn-md">17</button>
        <button type="button" class="btn btn-light btn-md">18</button>    
        <button type="button" class="btn btn-light btn-md">19</button>
        <button type="button" class="btn btn-light btn-md">20</button>
    </div>
</div>
<br>
	<canvas id="canvas" width="550" height="550" style="cursor:crosshair;background:img/May08_03.05.02.bin_1_0.png"></canvas>
  <div class="get-info">
    <button type="button" class="btn btn-secondary btn-sm" onclick="getInfo()">Image Information</button>
  </div>
  <div class="selection-buttons">
      <button type="button" id = "delete-image" class="btn btn-info btn-md" onclick="prevImage()">Previous</button>
      <button type="button" id = "delete-image" class="btn btn-danger btn-lg" onclick="disableImage()">Ignore Image</button>
      <button type="button" id = "delete-image" class="btn btn-success btn-lg" onclick="restoreImage()">Restore Image</button>
      <button type="button" id = "delete-image" class="btn btn-info btn-md" onclick="nextImage()">Next</button>
    </div>
  <br>
	<div id="slideContainer"></div>
<!--END of HTML-->

<!--START of SCRIPTING-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>

var images = [
		"img/May08_03.05.02.bin_1_0.png",	"img/May08_05.53.51.bin_11_0.png",
		"img/May08_03.13.02.bin_2_0.png",	"img/May08_05.55.31.bin_12_0.png",
		"img/May08_03.15.02.bin_3_0.png",	"img/May08_05.57.01.bin_13_0.png",
		"img/May08_03.43.44.bin_4_0.png",	"img/May08_05.59.52.bin_14_0.png",
		"img/May08_04.32.27.bin_5_0.png",	"img/May08_06.09.02.bin_15_0.png",
		"img/May08_04.33.57.bin_6_0.png",	"img/May08_06.30.43.bin_16_0.png",
		"img/May08_04.36.57.bin_7_0.png",	"img/May08_07.08.55.bin_17_0.png",
		"img/May08_05.24.39.bin_8_0.png",	"img/May08_07.10.35.bin_18_0.png",
		"img/May08_05.31.00.bin_9_0.png",	"img/May08_07.13.35.bin_19_0.png",
		"img/May08_05.35.20.bin_10_0.png",	"img/May08_07.30.46.bin_20_0.png"
	];  
var photos = [];
var imageData = {};
var coordinates = [];
var parent = document.querySelector('.image-btn');
var children = parent.children;
console.log(children);
make_base(images[0], 0);


$('#image-btn button').click(function(){
  $("div").removeClass("marker");
  var index = $(this).index();
  make_base(images[index], index);
  currentIndex = index;
  console.log(index);
});

for (var i = 0; i < children.length; i++){
  children[i].value = images[i];
  var image_name = children[i].value;
  imageData[image_name] = {coordinates:[]};
}

function Photo(name) {
  this.name = name;
  this.points = [];
  this.alive = true;
  this.htmlText = "";
  this.addPoint = function(x, y){
    this.points.push([x,y]);
    this.htmlText += '<li>'+ x +", " + y + '</li>'
  };
  this.removePoint = function(x, y){
    this.points.pop([x,y]);
  };
  this.ignoreImage = function(){
    this.alive = false;
  };
  this.restoreImage = function(){
    this.alive = true;
  };
  this.JSON = function(){
    //TO DO:
  };
  this.getHtml = function(){
    return "<p>"+this.name+" ("+(currentIndex+1)+")"+": </p>"+"<ul>"+this.htmlText+"</ul>";
  }
}

for(var i = 0; i<images.length; i++)
{
	var temp = new Photo(images[i]);
	photos.unshift(temp);
}
console.log(photos);
console.log(photos.points);
var pointSize = 5;
var coordPoints = [];
var currentIndex = 0;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var g = document.getElementById('image-btn');
//set up a default picture :)
/*
make_base(images[currentIndex], currentIndex);
str = photos[currentIndex].getHtml();
document.getElementById("slideContainer").innerHTML = str;
*/
//Gets index of the button click -> correlates to image displayed
for (var i = 0, len = g.children.length; i < len; i++)
{
  (function(index){
    g.children[i].onclick = function(){
      make_base(images[index], index);
	    currentIndex = index;
	    str = photos[currentIndex].getHtml();
      document.getElementById("slideContainer").innerHTML = str;
    }    
  })(i);
}
//
$("#canvas").click(function(e){
  getPosition(e); 
  /*
  var str = '<ul>'
  coordPoints.forEach(function(coordPoints) {
  str += '<li>'+ coordPoints[0] +", " + coordPoints[1] + '</li>';
  }); 
  
  str += '</ul>';
  */
  str = photos[currentIndex].getHtml();
  document.getElementById("slideContainer").innerHTML = str;
  
});

//Gets the coordinates of where the user clicked within the canvas
/*
  Calls drawCoordinates()
  Calls createObject(image_name, posX, posY)
  Pushes coordinates to coordPoints and photos
*/
function getPosition(event){
     var rect = canvas.getBoundingClientRect();
     var x = event.clientX - rect.left;
     var y = event.clientY - rect.top;
    
     createObject(images[currentIndex], x, y);
     drawCoordinates(x,y);
     coordPoints.push([x,y]);
     photos[currentIndex].addPoint(x,y);
}

//Draws coordinates 
function drawCoordinates(x,y){	
  	var ctx = document.getElementById("canvas").getContext("2d");
  	ctx.fillStyle = "#F3F414"; // Red color
    ctx.beginPath();
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
    ctx.fill();
}

//Creates dynamic object storing coordinate points associated to its image name
function createObject(image_name, posX, posY){
  imageData[image_name].coordinates.push([posX, posY]);
}

//Canvas has background image of corresponding index
function make_base(file_path, index)
{
  base_image = new Image();
  base_image.src = file_path;
  base_image.onload = function(){
    ctx.drawImage(base_image, 0, 0);
    tempPoints = photos[currentIndex].points;
    for(var i = 0; i<tempPoints.length; i++){
      tempPoint = tempPoints[i];
	var x = parseInt(tempPoint[0]);
	var y = parseInt(tempPoint[1]);
      drawCoordinates(x, y);
    }
  }
}

//Key board function to navigate through images
document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            prevImage();
            break;
        case 39:
            nextImage();
            break;
    }
};

//Takes user to previous image
function prevImage(){
  document.getElementById("slideContainer").innerHTML = "";
  var finished = false;
  while(!finished){
    if (currentIndex >= 1){
      if(photos[currentIndex-1].alive){
        children[currentIndex-1].click();
        finished = true;
      }else{
currentIndex--;
}
    }
    else{
      alert("There are no live images before this point.");
      finished = true;
    }
  }
}

//Takes user to following image
function nextImage(){
  document.getElementById("slideContainer").innerHTML = "";
var finished = false;
while(!finished){
  if (currentIndex < photos.length){
    if(photos[currentIndex+1].alive){
      children[currentIndex+1].click();
      finished = true;
    }else{
currentIndex++;
}
  }
  else{
    alert("There are no more live images beyond this point.");
	finished = true;
  }
}
}

function getInfo(){
  var imageName = images[currentIndex];
  var xCoords = [];
  var yCoords = [];

  console.log(imageData[imageName].coordinates.length);

  for(var i = 0; i < imageData[imageName].coordinates.length; i++){
    xCoords.push(imageData[imageName].coordinates[i][0]);
    yCoords.push(imageData[imageName].coordinates[i][1]);
  }
  console.log(xCoords);
  console.log(yCoords);

 var tableHeaders = ["Image Name", "X-Coordinates", "Y-Coordinates"];
  var dataTable = new Array();
  var imageCol = [];

  dataTable.push(tableHeaders);

  imageCol[0] = imageName;

  for (var i = 1; i < xCoords.length; i++){
    imageCol[i] = '';
  }

  for(var i = 0; i < xCoords.length; i++){
    dataTable.push([imageCol[i],xCoords[i],yCoords[i]]);
  }

  let csvContent ="data:text/csv;charset=utf-8,";
    dataTable.forEach(function(rowArray){
      let row = rowArray.join(",");
      csvContent += row + "\r\n";
    })
  
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.style.display = "none";
  link.setAttribute("download", imageName + ".csv");
  link.innerHTML = "Click Here to Download";
  document.body.appendChild(link);
  link.click();
  link.remove();
}

//Allows user to disable image
function disableImage(){
  photos[currentIndex].ignoreImage();
  console.log("sad: "+photos[currentIndex].alive);
}

function restoreImage(){
  photos[currentIndex].restoreImage();
}
</script>
<!--END of SCRIPTING-->