Skip to content

Instantly share code, notes, and snippets.

@lesolorzanov

lesolorzanov/iwild.html

Last active May 27, 2019 16:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lesolorzanov/b3be3e0e392b8244953848ad988d9bae to your computer and use it in GitHub Desktop.
Save lesolorzanov/b3be3e0e392b8244953848ad988d9bae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
iwild.html
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/home/leslie/Downloads/iWildCam_2019_iNat_Idaho.json"></script>
<script src="/home/leslie/Downloads/iWildCam_2019_CCT_Bboxes.json"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
<script>
</script>
<script>
var dataUtils = {};
dataUtils["rawdata"] = {};
dataUtils["nested"] = {};
dataUtils.readCSV = function (thecsv) {
var answer; //I want to store the parsed csv here
var promise = new Promise(function (resolve, reject) {
var request = d3.csv(
thecsv,
function (d) {
return d;
},
function (rows) {
//console.log("rows", rows);
resolve(rows);
}
);
});
return promise;
}
dataUtils.categoryNames=["empty","deer","moose","squirrel","rodent","small_mammal","elk","pronghorn_antelope","rabbit",
"bighorn_sheep","fox","coyote","black_bear","raccoon","skunk","wolf","bobcat","cat","dog",
"opossum","bison","mountain_goat","mountain_lion"];
dataUtils.nestEm = function (data) {
dataUtils["rawdata"] = data;
dataUtils["images"]={};
d3.nest().key(function (d) { return d["id"]; }).entries(dataUtils["rawdata"]).forEach(im => dataUtils["images"][im.key]=im.values);
dataUtils["nested"] = d3.nest().key(function (d) { return d["category_id"]; }).entries(dataUtils["rawdata"]);
dataUtils["nested"].forEach(c => {
var cat = c.key;
annotationUtils.annoData.push({ key: cat, values: [] });
});
htmlUtils.printCategoryButtons();
}
dataUtils.nestTestData= function(data){
dataUtils["rawtestdata"] = data;
dataUtils["testdata"]=d3.nest().key(function (d) { return d["id"]; }).entries(dataUtils["rawtestdata"]);
htmlUtils.tableForTest();
}
dataUtils.imlocation = "train_images/";
dataUtils.testimlocation = "test_images/";
dataUtils.saveJSON= function(){
if (window.Blob) {
var jsonse = JSON.stringify(annotatedHash);
var blob = new Blob([jsonse], {type: "application/json"});
var url = URL.createObjectURL(blob);
var a=document.getElementById("invisibleRegionJSON");
var name="annotations"+sketchUtils.currC+".json";
a.href = url;
a.download = name;
a.textContent = "Download backup.json";
a.click();
// Great success! The Blob API is supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
/*---------------------------------------------------------------------------------------------------------------------------------*/
htmlUtils = {};
htmlUtils.printCategoryButtons = function () {
var buttsHTML = "";
var stats=document.getElementById("stats");
var statsin="<table>";
var count=1;
dataUtils["nested"].forEach(c => {
var cat = c.key;
buttsHTML += '<button class="btn btn-default" onclick="htmlUtils.tableForC(' + String(cat) + ')" >' + cat + '</button>'
if(count%6==0)
buttsHTML +="<br/>"
count+=1;
statsin+='<td style="padding:10px;"><strong>'+cat+'-'+dataUtils.categoryNames[cat]+': </strong>'+c.values.length+'<td>';
});
document.getElementById("butts").innerHTML = buttsHTML;
statsin+="</table>"
stats.innerHTML = statsin;
}
htmlUtils.tableForC = function (category) {
sketchUtils.currC = category;
annotatedHash={};
document.getElementById("thetbody").innerHTML = "";
var tbodyHTML = "";
dataUtils["nested"].forEach(cn => {
//console.log("looking for " + cn.key + ",searching " + category.valueOf());
if (cn.key.valueOf() == category.valueOf()) {
var inhtml = "";
var count=1;
console.log(cn.values.length);
cn.values.forEach(imval => {
inhtml += '<tr> <td>'+count+'</td> <td ><a onclick="sketchUtils.setVals(\'' + dataUtils.imlocation + imval.file_name + '\',\'' + imval.id + '\')">' + imval.id + '</a></td></tr>';
count+=1;
});
document.getElementById("thetbody").innerHTML = inhtml;
document.getElementById("cat_id").innerHTML="c_id "+category;
}
});
}
htmlUtils.tableForTest = function () {
document.getElementById("thetestbody").innerHTML = "";
var tbodyHTML = "";
var count=1;
dataUtils["testdata"].forEach(testd => {
tbodyHTML += '<tr> <td>'+count+'</td> <td ><a onclick="sketchUtils.loadImg(\'' + dataUtils.testimlocation + testd.values[0].file_name + '\')">' + testd.key + '</a></td></tr>';
count+=1;
document.getElementById("thetestbody").innerHTML = tbodyHTML;
});
}
/*---------------------------------------------------------------------------------------------------------------------------------*/
annotationUtils = { annoData: [] };
annotatedHash={};
annotationUtils.saveAnnot = function (sx,sy,ex,ey) {
console.log("Annotated so far:"+Object.keys(annotatedHash).length);
annotatedHash[sketchUtils.currId]={category_id:sketchUtils.currC,x:Math.min(sx,ex),y:Math.min(sy,ey),width:Math.abs(sx-ex),height:Math.abs(sy-ey)};
}
/*---------------------------------------------------------------------------------------------------------------------------------*/
var sketchUtils = { imurl: "", currId: "", currC: "" };
sketchUtils.setVals = function (imurl, currId) {
sketchUtils.imurl = imurl;
sketchUtils.currId = currId;
sketchUtils.loadImg(sketchUtils.imurl);
}
sketchUtils.loadImg = function (impath) {
if (impath == undefined) {
impath = sketchUtils.imurl;
}
document.getElementById("p5sketch").innerHTML = '';
sketchUtils.imurl = impath;
new p5(sketchUtils.sketch, 'p5sketch');
}
sketchUtils.sketch = function (p) {
var sx = 0, sy = 0, ex = 0, ey = 0, d = false;
var img;
p.preload = function () {
img = p.loadImage(sketchUtils.imurl);
}
p.setup = function () {
p.createCanvas(img.width, img.height);
p.image(img, 0, 0);
}
p.draw = function () {
p.noFill();
if (d) {
p.image(img, 0, 0);
}
if(sx>0 && sy >0 && ex>0 && ey >0)
p.rect(sx, sy, ex - sx, ey - sy);
}
p.mouseDragged = function () {
if (p.mouseX <= img.width && p.mouseX >= 0 && p.mouseY <= img.height && p.mouseY >= 0){
ex = p.mouseX;
ey = p.mouseY;
}
}
p.mousePressed = function () {
if (p.mouseX <= img.width && p.mouseX >= 0 && p.mouseY <= img.height && p.mouseY >= 0){
sx = p.mouseX;
sy = p.mouseY;
d = true;
}
}
p.mouseReleased = function () {
if (p.mouseX <= img.width && p.mouseX >= 0 && p.mouseY <= img.height && p.mouseY >= 0){
annotationUtils.saveAnnot(sx,sy,ex,ey);
sx = 0, sy = 0, ex = 0, ey = 0, d = false;
}
}
};
/*---------------------------------------------------------------------------------------------------------------------------------*/
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<label for="iwild_csv">Choose a CSV:</label>
<input type="file" id="iwild_csv" name="iwild_csv" accept=".csv,.tsv,.txt">
<script type="text/javascript">
d3.select("#iwild_csv")
.on("change", function () {
var file = d3.event.target.files[0];
if (file) {
var reader = new FileReader();
reader.onloadend = function (evt) {
var dataUrl = evt.target.result;
dataUtils.readCSV(dataUrl).then(
dataUtils.nestEm
);
};
reader.readAsDataURL(file);
}
});
</script>
</div>
</form>
</div>
<div class="col-md-3">
<form>
<div class="form-group">
<label for="iwild_test_csv">Choose a test CSV:</label>
<input type="file" id="iwild_test_csv" name="iwild_test_csv" accept=".csv,.tsv,.txt">
<script type="text/javascript">
d3.select("#iwild_test_csv")
.on("change", function () {
var file = d3.event.target.files[0];
if (file) {
var reader = new FileReader();
reader.onloadend = function (evt) {
var dataUrl = evt.target.result;
dataUtils.readCSV(dataUrl).then(
dataUtils.nestTestData
);
};
reader.readAsDataURL(file);
}
});
</script>
</div>
</form>
</div>
<div class="col-md-3" style="padding-top:20px">
<div class="form-group">
<label for="savebtn">save json annotation:</label>
<button class="btn btn-default" id="savebtn" onclick="dataUtils.saveJSON()">Save</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div style="height:750px; min-width: 1044px; width:1044px;float:left">
<div id="p5sketch">
</div>
</div>
<div style="float:left">
<div class="row">
<div class="col-md-12" id="butts">
</div>
</div>
<div class="row" style="max-height:727px; overflow-y: scroll">
<div class="col-md-6">
<table class="table table-condensed table-hover" id="thetable">
<thead>
<tr>
<th scope="col" id="cat_id"></th>
<th scope="col">id</th>
</tr>
</thead>
<tbody id="thetbody">
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table table-condensed table-hover" id="testtable">
<thead>
<tr>
<th scope="col" id="cat_id"></th>
<th scope="col">id</th>
</tr>
</thead>
<tbody id="thetestbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="stats">
</div>
<a id="invisibleRegionJSON" hidden style="visibility: none">
</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment