Commit b8642216 authored by Julian Frosch's avatar Julian Frosch
Browse files

Copied inital test-code from old repo

parents
/node_modules
# SVG-test-app for node.js and electron
This is a test-application written with node.js and electron as a possible alternative to the Java-approach for "BezLinApp".
## How to start
Before starting, npm is required.
In order to test the program, clone the repo, cd into it's directory and run
```
npm install
```
This will download the dependencies and create a folder *node_modules/* with their data.
Next you can run
```
npm start
```
or
```
electron .
```
to start the application!
## Using the test-app
You will see the window with a *Hello World!*-Greeting and some text on the left and the developer-tools on the right.
You can just drag an SVG-File (example-file is in the res/-folder) directly onto the "Drag your SVG-File here!"-Text on the left side. Once done, the program will read the data of the 2nd path in your file (may get an error warning if there is no such data... duh) and show the parsed data in the "console" on the right side :)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</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="svgHolder" class="holder">
Drag your svg-file here!
</div>
<p class="output"></p>
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/script.js"></script>
</body>
</html>
This diff is collapsed.
var method = SVGParser.prototype;
// empty constructor
function SVGParser() {
}
/**
This function takes a path and a callback-function as parameters.
It then tries to open the file and parse it as an SVG file in order to extract
all paths and their "d"-attribute and then parse it into an array of commands.
It will call the callback with an array of all paths with the following structure:
result = [path1, path2, path3, ...];
where the paths are themselves arrays of commands:
path1 = [command1,command2, ...];
and the commands are arrays with their respective values:
command1 = [command, value, value, ...];
An example could look like this:
[[["m", 96, 363], ["C", 407, 189, 587, 328, 587, 328]], [...], ...]
*/
method.getSVGPaths = function(path, callback) {
var fs = require('fs'),
xml2js = require('xml2js'),
parse = require('parse-svg-path');
var parser = new xml2js.Parser();
fs.readFile(path, function(err, data) {
if (err) {
callback(err, null);
} else {
parser.parseString(data, function (err, result) {
if (err) {
callback(err, null);
} else {
var data = [];
var paths = result.svg.g[0].path;
for (var i = 0; i < paths.length; i++) {
var pathData = paths[i].$.d;
//console.dir(pathData);
var parsedPath = parse(pathData);
data.push(parsedPath);
//console.dir(parsedPath);
//console.log('Done');
}
callback(null, data);
}
});
}
});
}
module.exports = SVGParser;
$(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);
}
});
};
});
const electron = require('electron');
const app = electron.app; // Module to control application life.
const BrowserWindow = electron.BrowserWindow; // Module to create native browser window.
// Report crashes to our server.
electron.crashReporter.start();
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform != 'darwin') {
app.quit();
}
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.html');
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});
{
"name" : "BezLinApp",
"version" : "0.1.0",
"main" : "main.js",
"dependencies": {
"xml2js" : "^0.4.15",
"parse-svg-path" : "^0.1.1"
},
"devDependencies": {
"electron-prebuilt": "^0.36.3"
},
"scripts": {
"start" : "electron main.js"
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="744.09448819"
height="1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="test_plain.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="332.16833"
inkscape:cy="340.28752"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="873"
inkscape:window-x="1920"
inkscape:window-y="300"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 96.974644,363.43815 C 407.09148,189.69191 587.90878,328.08281 587.90878,328.08281"
id="path3805"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 58.588848,588.70216 C 333.35034,443.2402 364.66507,384.65135 538.41131,478.59554 c 173.74623,93.94418 173.74623,93.94418 173.74623,93.94418"
id="path3807"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 40.406102,887.70732 c 0,0 23.233508,-203.04066 275.771648,-219.2031 252.53813,-16.16245 211.12188,-8.08122 295.97469,104.04571 84.85282,112.12693 -215.16249,203.04066 -215.16249,203.04066"
id="path3809"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 345.47217,599.81384 c 42.42641,-31.31473 153.54319,-115.15739 117.1777,-42.4264 -36.3655,72.73098 -117.1777,42.4264 -117.1777,42.4264 z"
id="path3811"
inkscape:connector-curvature="0" />
</g>
</svg>
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