Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<!--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-->