Commit 618a5d36 authored by Julian Frosch's avatar Julian Frosch
Browse files

Implemented the PrecisionMap, did some work on the UI

parent 134fbf31
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;
}
......@@ -3,23 +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="mapHolder" class="holder">
Drag your bmp-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>
......
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;
$(function(){
// We have a portion in our GUI where the user can drop the SVG-file
var svgHolder = document.getElementById('svgHolder');
svgHolder.ondragover = function () {
return false;
};
svgHolder.ondragleave = svgHolder.ondragend = function () {
return false;
};
// When the user drops the file
svgHolder.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 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');
};
// We also have a portion in our GUI where the user can drop the BMP-file
var mapHolder = document.getElementById('mapHolder');
mapHolder.ondragover = function () {
filedrop.ondragover = function () {
return false;
};
mapHolder.ondragleave = mapHolder.ondragend = function () {
filedrop.ondragleave = filedrop.ondragend = function () {
return false;
};
// When the user drops the file
mapHolder.ondrop = function (e) {
filedrop.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
// TODO: check for filetype (maybe via regex)
var getPixels = require("get-pixels");
getPixels(file.path, function(err, pixels) {
if (err) {
console.log(err);
return;
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;
}
// NDArray Format: ((x),(y),(r,g,b,a))
// Access pixel with ....get(x,y,c)
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));
})
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 :)
}
}
});
}
}
});
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