Skip to content
GitLab
Commit e63c20e8 authored by Julian Frosch's avatar Julian Frosch
Browse files

Merge branch 'precision-map' into 'master' 

Precision map

The precision map is good to go for now... also some needed changes in the UI are included in this branch

See merge request !1
parents c8add2b2 b17b5eb0
Hide whitespace changes
Inline Side-by-side
css/stylesheet.css 0 → 100644
View file @ e63c20e8
body {
width: 100%;
height: 100%;
background: url("../res/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
background-attachment: fixed;
margin: 0px;
}
.content {
width: 90%;
height: 90%;
margin: 3em auto;
background-color: rgba(255, 255, 255, 0.1);
padding: 15px;
color: #FFF;
}
.intro {
margin-bottom: 20px;
}
.holder {
width: 85%;
height: 50%;
/*background-color: rgba(255,255,255,0.2);*/
border: solid white 1px;
margin-left: auto;
margin-right: auto;
}
.holder:hover {
background-color: rgba(255,255,255,0.2);
}
.text {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
index.html
View file @ e63c20e8
......@@ -3,19 +3,28 @@
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css">
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<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!
</div>
<div id="svgHolder" class="holder">
Drag your svg-file here!
</div>
<div id="filedrop" class="holder">
<p class="text">Drag your files here!</p>
</div>
<p class="output"></p>
<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>
<label for="pMin">Length of line segments at minimum precision:</label><br>
<input id="pMin" type="number" value="1.0" step="0.1"/><br>
<button id="runButton" type="button">Run the approximation!</button>
</div>
</div>
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/script.js"></script>
</body>
......
js/approximation/precisionMap.js 0 → 100644
View file @ e63c20e8
var method = PrecisionMap.prototype;
// constructor
function PrecisionMap(data, min, max) {
this._data = data;
/*
FYI - NDArray Format: ((x),(y),(r,g,b,a))
Access pixel with ....get(x,y,c)
e.g.:
console.log("Red", pixels.get(0,0,0), pixels.get(0,0,1), pixels.get(0,0,2), pixels.get(0,0,3));
console.log("Blue", pixels.get(1,0,0), pixels.get(1,0,1), pixels.get(1,0,2), pixels.get(1,0,3));
console.log("Black", pixels.get(2,0,0), pixels.get(2,0,1), pixels.get(2,0,2), pixels.get(2,0,3));
*/
// get the dimensions
var shape = this._data.shape.slice();
this._w = shape[0];
this._h = shape[1];
this._c = shape[2];
this._min = min;
this._max = max;
this._diff = max-min;
}
/**
Calculates the "precision value", i.e. the maximum allowed length of a line segment starting in point (x,y).
x and y are floored in the method.
*/
method.getPrecision = function(x, y) {
var value = this._data.get(Math.floor(x), Math.floor(y), 0);
var p = this._max + this._diff * (x/255);
return p;
};
module.exports = PrecisionMap;
js/script.js
View file @ e63c20e8
$(function(){
// We have a portion in our GUI where the user can drop the SVG-file
var svgHolder = document.getElementById('svgHolder');
svgHolder.ondragover = 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 Approximator = require('./js/approximation/approximator.js');
filedrop.ondragover = function () {
return false;
};
svgHolder.ondragleave = svgHolder.ondragend = function () {
filedrop.ondragleave = filedrop.ondragend = function () {
return false;
};
// When the user drops the file
svgHolder.ondrop = function (e) {
filedrop.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
// TODO: check for filetype (maybe via regex)
// TODO: remove
console.log('File you dragged here is', file.path);
var SVGParser = require("./js/parser/svg-parser.js");
var svgParser = new SVGParser();
var data = svgParser.getSVGPaths(file.path, function(err, result) {
if (err) {
console.log(err);
} else {
// Do something with the result
console.log("Data fetched, printing:");
console.dir(result);
var approximator = new Approximator(result, null);
// do something more :)
}
});
var files = e.dataTransfer.files;
// search for SVGs and PNGs
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type == "image/png") {
if (heatmap != null) {
alert("Multiple Heatmaps submitted!\nLast one will be used!");
}
heatmap = file.path;
}
if (file.type == "image/svg+xml") {
if (svg != null) {
alert("Multiple SVGs submitted\nLast one will be used!");
}
svg = file.path;
}
};
};
runButton.onclick = function(e) {
if (svg == null) {
alert("No SVG submitted!");
} else {
var SVGParser = require("./js/parser/svg-parser.js");
var svgParser = new SVGParser();
var data = svgParser.getSVGPaths(svg, function(err, result) {
if (err) {
console.log(err);
} else {
// Do something with the result
// TODO: Remove
console.log("Data fetched, printing:");
console.dir(result);
if (heatmap != null) {
// 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);
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;
var PrecisionMap = require('./js/approximation/precisionMap.js');
var map = new PrecisionMap(pixels, pMin, pMax);
console.log(map.getPrecision(0,0));
// start the approximator with SVG-data and the precisionMap
var approximator = new Approximator(result, map);
// do something more :)
});
} else {
// the user did not provide a heatmap, so just start the approximator
var approximator = new Approximator(result, null);
// do something more :)
}
}
});
}
}
});
package.json
View file @ e63c20e8
......@@ -4,7 +4,8 @@
"main" : "main.js",
"dependencies": {
"xml2js" : "^0.4.15",
"parse-svg-path" : "^0.1.1"
"parse-svg-path" : "^0.1.1",
"get-pixels" : "^3.2.3"
},
"scripts": {
"start" : "electron main.js"
......
res/bg.jpg 0 → 100644
View file @ e63c20e8
res/bg.jpg

78.4 KB

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