Commit 7efd97f6 authored by Julian Frosch's avatar Julian Frosch
Browse files

Working approximation, app writes file, work on UI; references Issue #7

parent c0ac78d4
......@@ -40,3 +40,19 @@ body {
margin-right: auto;
display: inline-block;
}
.output {
margin-top: 1em;
padding: 5px;
overflow: scroll;
background-color: rgba(0, 0, 0, 0.7);
height: 200px;
}
.output p {
margin: 0;
}
.output p.error {
color: red;
}
......@@ -8,15 +8,9 @@
<body>
<div id="content" class="content">
<div id="intro" class="intro">
Just drag'n'drop your SVG and PNG file(s) into the container below and click the button!
Just drag'n'drop your SVG and PNG file(s) into the app and click the button!
</div>
<div id="filedrop" class="holder">
<p class="text">Drag your files here!</p>
</div>
<p class="output"></p>
<div id="controls" class="controls">
<label for="pMax">Length of line segments at maximum precision:</label><br>
<input id="pMax" type="number" value="0.5" step="0.1"/><br>
......@@ -24,6 +18,8 @@
<input id="pMin" type="number" value="1.0" step="0.1"/><br>
<button id="runButton" type="button">Run the approximation!</button>
</div>
<div id="output" class="output"></div>
</div>
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/script.js"></script>
......
......@@ -2,8 +2,46 @@ $(function(){
var svg = null, heatmap = null;
var runButton = document.getElementById('runButton');
// filedrop is the portion in our GUI where the User can drop his files
var filedrop = document.getElementById('filedrop');
var filedrop = document.body;
var Approximator = require('./js/approximation/approximator.js');
var output = document.getElementById('output');
var dateformat = require('dateformat');
var printOut = function(text) {
var d = new Date();
output.insertAdjacentHTML('beforeend', "<p>" + dateformat(d, "HH:MM:ss") + " - " + text + "</p>");
}
var printErr = function(text) {
var d = new Date();
output.insertAdjacentHTML('beforeend', "<p class='error'>" + dateformat(d, "HH:MM:ss") + " - " + text + "</p>");
}
var writePathsToFile = function(paths) {
var fs = require('fs');
var path = require('path');
var parsed = path.parse(svg);
var filename = parsed.dir + path.sep + parsed.name + "_approximation.txt";
var stream = fs.createWriteStream(filename);
stream.once('open', function(fd) {
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
for (var j = 0; j < path.length; j++) {
if (j > 0) {
stream.write(",");
}
if (path[j][0] == "M") {
stream.write(path[j][1]+","+path[j][2]);
} else {
stream.write(path[j][3]+","+path[j][4]);
}
}
stream.write("\n");
}
stream.end();
printOut("Wrote to file " + filename);
});
}
filedrop.ondragover = function () {
return false;
......@@ -21,60 +59,66 @@ $(function(){
var file = files[i];
if (file.type == "image/png") {
if (heatmap != null) {
alert("Multiple Heatmaps submitted!\nLast one will be used!");
printOut("Multiple Heatmaps submitted! Last one will be used!");
}
heatmap = file.path;
printOut("PNG loaded: " + file.path);
}
if (file.type == "image/svg+xml") {
if (svg != null) {
alert("Multiple SVGs submitted\nLast one will be used!");
printOut("Multiple SVGs submitted! Last one will be used!");
}
svg = file.path;
printOut("SVG loaded: " + file.path);
}
};
};
runButton.onclick = function(e) {
if (svg == null) {
printErr("No SVG submitted!");
alert("No SVG submitted!");
} else {
var SVGParser = require("./js/parser/svg-parser.js");
printOut("Reading SVG...");
var svgParser = new SVGParser();
var data = svgParser.getSVGPaths(svg, function(err, result) {
if (err) {
console.log(err);
printErr(err);
} else {
// Do something with the result
// TODO: Remove
console.log("Data fetched, printing:");
printOut("Parsed SVG-Paths: " + result.length + " paths.")
console.dir(result);
var PrecisionMap = require('./js/approximation/precisionMap.js');
if (heatmap != null) {
printOut("Reading PNG...");
// the user has provided a heatmap, so we need to consider the precision-values from it:
// first, parse the file:
var getPixels = require("get-pixels");
getPixels(heatmap, function(err, pixels) {
if (err) {
console.log(err);
printErr(err);
return;
}
// now, get the specified min/max values and create the precisionMap!
var pMax = document.getElementById('pMax').value;
console.log(pMax);
var pMin = document.getElementById('pMin').value;
printOut("Creating precisionmap...");
var map = new PrecisionMap(pixels, pMin, pMax);
console.log(map.getPrecision(0,0));
// start the approximator with SVG-data and the precisionMap
printOut("Approximating paths with heatmap...");
var approximator = new Approximator(result, map);
approximator.approximateData(function(err, nPaths) {
// do something more :)
if (err) {
printErr(err);
return;
}
writePathsToFile(nPaths);
console.dir(nPaths);
});
});
......@@ -84,9 +128,14 @@ $(function(){
var pMax = document.getElementById('pMax').value;
var map = new PrecisionMap(pMax);
printOut("Approximating paths without heatmap...");
var approximator = new Approximator(result, map);
approximator.approximateData(function(err, nPaths) {
// do something more :)
if (err) {
printErr(err);
return;
}
writePathsToFile(nPaths);
console.dir(nPaths);
});
}
......
......@@ -5,7 +5,8 @@
"dependencies": {
"xml2js" : "^0.4.15",
"parse-svg-path" : "^0.1.1",
"get-pixels" : "^3.2.3"
"get-pixels" : "^3.2.3",
"dateformat" : "^1.0.12"
},
"scripts": {
"start" : "electron main.js"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment