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

Implemented the PrecisionMap, did some work on the UI

parent 134fbf31
Hide whitespace changes
Inline Side-by-side
css/stylesheet.css 0 → 100644
View file @ 618a5d36
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 @ 618a5d36
......@@ -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>
......
js/approximation/precisionMap.js 0 → 100644
View file @ 618a5d36
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 @ 618a5d36
$(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 0 → 100644
View file @ 618a5d36
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