vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 01:07:56 +01:00
Code Issues Releases Wiki Activity

finished viewer

Browse Source
This commit is contained in:
Rick Companje 2014-12-10 15:21:17 +01:00
parent 18d1aacc71
commit 31b16b2a3f
3 changed files with 240 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
www/viewer/css/style.css
View File

@ -1,5 +1,6 @@
body { body {
font-family: Abel, Arial; font-family: Helvetica, Abel, Arial;
font-size: 1em;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */ -moz-user-select: none; /* mozilla browsers */
@ -7,9 +8,13 @@ body {
-ms-user-select: none; /* IE10+ */ -ms-user-select: none; /* IE10+ */
} }
button {
font-size: 1em;
}
div.item { div.item {
width:300px; width:150px;
height:260px; height:130px;
border:1px solid black; border:1px solid black;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
@ -24,3 +29,17 @@ div.item.selected {
div.item input[type='checkbox'] { div.item input[type='checkbox'] {
position: absolute; position: absolute;
} }
#frmUpload {
display: inline;
}
input[type='file'] {
width: 1px;
opacity:0
}
#txtInfo {
float: right;
/*display: inline-block;*/
}

16
www/viewer/index.html
View File

@ -6,10 +6,17 @@
</head> </head>
<body> <body>
Actions: <a href="?"><img src="../img/logo/doodle3d.png" height="25"></a><br>
<button onclick="selectAll()">Select all</button> <hr>
<button onclick="deselectAll()">Deselect all</button> <button id="btnSelectAll">Select all</button>
<button onclick="deleteSelectedSketches()">Delete</button> <button id="btnDeselectAll">Deselect all</button>
<button id="btnDelete">Delete</button>
<button id="btnDownload">Download</button> <!-- <a id="link" href="#">Download</a> -->
<form id="frmUpload" action="#"><button id="btnUpload">Upload</button><input id="uploads" type="file" accept="image/svg+xml" multiple/></form>
<span id="txtInfo"></span>
<hr> <hr>
<form> <form>
<div id="svgContainer"></div> <div id="svgContainer"></div>
@ -18,5 +25,6 @@ Actions:
<script src="../js/libs/jquery-1-9-1.min.js"></script> <script src="../js/libs/jquery-1-9-1.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

249
www/viewer/js/main.js
View File

@ -1,104 +1,251 @@
var api = 'http://10.0.0.40/d3dapi/sketch/'; var api = 'http://10.0.0.40/d3dapi/sketch/';
$("#btnDelete").click(deleteSelectedSketches);
$("#btnSelectAll").click(selectAll);
$("#btnDeselectAll").click(deselectAll);
// $("#btnUpload").click(upload);
$("#uploads").change(upload);
$("#btnDownload").click(download);
$("#btnUpload").click(function() {
console.log('trigger')
$("#uploads").trigger('click');
});
// $("a").on("click", function () {
// var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
// $(this).attr("href", "data:application/octet-stream;"+encodeURIComponent("test")).attr("download", "file-" + d + ".svg");
// });
var isBusy = true;
// var statusMessage = "";
// updateFreeSpace();
updateButtonStates();
$.get(api+'list', function(data) { //?id=00003 $.get(api+'list', function(data) { //?id=00003
if (data.status=='success') { if (data.status=='success') {
var list = data.data.list; var list = data.data.list;
// list.reverse();
isBusy = true;
updateButtonStates();
updateStatusMessage('loading '+list.length+' sketches...');
loadSketch(list, function() { loadSketch(list, function() {
console.log('done'); console.log('done');
isBusy = false;
updateFreeSpace();
//updateStatusMessage('loading '+list.length+' sketches...');
updateButtonStates();
}); });
} else {
console.log('failure',data)
} }
// numSketches = data.data.number_of_sketches;
// loadSketch(1,function() {
// console.log('done');
// });
}); });
function loadSketch(list,cb) { function loadSketch(list,cb) {
var id = list.pop();
// console.log('loadSketch',list.length); $.get(api+'?id='+id, function(data) {
var item = list.pop();
console.log(item); if (data.status=='success') {
addItem(id,data.data.data);
}
updateStatusMessage('loading '+list.length+' sketches...');
if (list.length>0) { if (list.length>0) {
loadSketch(list,function() { loadSketch(list,function() {
cb(); cb();
}) })
} else {
cb();
}
});
} }
// if (num<=numSketches) { function addItem(id,svgData,doPrepend) {
var path;
// $.get(api+'?id='+num, function(data) { if (!svgData) path = "";
else if (typeof(svgData)!='string') path = "";
else if (svgData.indexOf("CDATA")==-1) path = "";
else path = svgData.split('d="')[1].split('"')[0];
// if (data.status=='success') { var item = $('<div class="item" data="'+id+'">');
// console.log('loaded',num) var svg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 540"><path fill="none" stroke="black" stroke-width="2" d="'+path+'"></path></svg>';
// addItem(num,data.data.data);
// } else {
// console.log('failed to load',num)
// }
// loadSketch(num+1,function() {
// cb();
// });
// });
// // cb();
// } else {
// cb();
// }
// } else {
// console.log('test')
// cb();
// }
}
function addItem(num,svgData) {
var path = svgData.split('d="')[1].split('"')[0];
var item = $('<div class="item" data="'+num+'">');
var svg = '<svg viewBox="0 0 640 540"><path fill="none" stroke="black" stroke-width="2" d="'+path+'"></path></svg>';
item.click(function() { item.click(function() {
$(this).toggleClass('selected'); $(this).toggleClass('selected');
console.log($(this).attr("data"));
updateButtonStates();
}) })
item.append(svg); item.append(svg);
$('#svgContainer').append(item); if (doPrepend) $('#svgContainer').prepend(item);
else $('#svgContainer').append(item);
item.hide().fadeIn();
//''+num+'</div>'); updateButtonStates();
} }
function deleteSketches(list,cb) {
var id = list.pop();
$.post(api+'delete', {id:id}, function(data) {
$('.item[data='+id+']').fadeOut('slow',function() {
$(this).remove(); //remove when effect is finished
});
updateStatusMessage("Deleting " + list.length + ' sketches...');
if (list.length>0) {
deleteSketches(list,cb);
} else {
cb();
}
});
}
function deleteSelectedSketches() { function deleteSelectedSketches() {
if (confirm('Do you want to delete '+$('.item.selected').length+' drawings?')) { if (confirm('Do you want to delete '+$('.item.selected').length+' drawings?')) {
$('.item.selected').each(function() {
var id = $(this).attr('data');
$.post(api+'delete'+id, {id:id}, function(data) { var ids = [];
console.log(data); $('.item.selected').map(function(){
ids.push($(this).attr('data'));
}); });
}) isBusy = true;
$('.item.selected').fadeOut(); updateButtonStates();
}
}
function deleteSketch(num) { deleteSketches(ids,function() {
console.log('done deleting sketches');
isBusy = false;
updateButtonStates();
updateFreeSpace();
});
//var selectedItems = $("input[type=checkbox]:checked"); deselectAll();
// console.log('deleteSketch',num) updateButtonStates();
//confirm('Are you sure?'+selectedItems.length); }
} }
function selectAll() { function selectAll() {
$('.item').addClass('selected'); $('.item').addClass('selected');
updateButtonStates();
} }
function deselectAll() { function deselectAll() {
$('.item').removeClass('selected'); $('.item').removeClass('selected');
updateButtonStates();
} }
function updateButtonStates() {
var numItems = $('.item').length;
var numSelected = $('.item.selected').length;
var noSelection = numSelected==0;
$("#btnDelete").attr("disabled",isBusy || noSelection);
$("#btnDownload").attr("disabled",isBusy || noSelection);
$("#btnDeselectAll").attr("disabled",isBusy || noSelection);
$("#btnSelectAll").attr("disabled",isBusy || numItems==0);
$("#btnUpload").attr("disabled",isBusy || !noSelection);
$("#btnDelete").text("Delete" + (noSelection ? "" : " ("+numSelected+")"));
$("#btnDownload").text("Download" + (noSelection ? "" : " ("+numSelected+")"));
}
function uploadFile(files, index, next) {
var reader = new FileReader();
reader.readAsText(files[index], "UTF-8");
reader.onload = function (evt) {
console.log("onload",index); //,files[index],evt.target);
//process file
var svg = convertSvg(evt.target.result);
// setTimeout(function() {
$.post(api, {data:svg}, function(data) {
if (data.status=='success') {
var id = data.data.id;
addItem(id,svg,true);
updateStatusMessage('uploading '+(files.length-index)+' sketches...');
if (index<files.length-1) {
uploadFile(files, index+1, next);
} else {
next(); //no more files, call back
}
}
});
// },500);
}
reader.onerror = function (evt) {
console.log("onerror");
next(); //stop processing file(s), call back/
}
}
function upload() {
var files = $("#uploads")[0].files
var reader = new FileReader();
var cur = 0;
isBusy = true;
updateButtonStates();
updateStatusMessage("Uploading " + files.length + " files");
uploadFile(files, cur, function() {
console.log("done");
isBusy = false;
updateButtonStates();
updateFreeSpace();
$("#frmUpload")[0].reset();
})
}
function updateFreeSpace() {
$.get(api+'status', function(data) { //?id=00003
if (data.status=='success') {
var numSketches = data.data.number_of_sketches;
var freeKb = Math.round(data.data.available/1024);
updateStatusMessage(numSketches+" sketches, "+freeKb+"k bytes free");
}
});
}
function updateStatusMessage(msg) {
$("#txtInfo").text(msg);
}
function convertSvg(svg) {
if (!svg) return "";
if (typeof(svg)!='string') return "";
if (svg.indexOf("CDATA")>-1) return svg; //assume this SVG is already ok
//this fixes SVG's created by the kunstcentraal app
var re = /([a-zA-Z])\s?([0-9]{1,}) ([0-9]{1,})/g;
svg = svg.replace(re,"$1$2,$3");
re = /<\/svg>/g;
return svg.replace(re,"<!--<![CDATA[d3d-keys {\"height\":5,\"outlineShape\":\"none\",\"twist\":0}]]>-->\n</svg>");
}
function download() {
$('.item.selected').each(function() {
var id = $(this).attr('data');
var svgData = $(this).html();
console.log('downloading',id);
$('<a target="_blank" href="data:image/svg+xml,'+encodeURIComponent(svgData)+'" download="'+id+'.svg">')[0].click();
});
}