Skip to content

Commit

Permalink
improve web app process
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinevening
jinevening committed Oct 11, 2017
1 parent 016bc9d commit 1320f92
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 49 deletions.
6 changes: 4 additions & 2 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var generate = require('./routes/generate');
//var generate = require('./routes/generate');

var app = express();

Expand All @@ -21,9 +21,11 @@ app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true, parameterLimit:50000}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'neural-fonts')));


app.use('/', index);
app.use('/generate', generate);
//app.use('/generate', generate);


// catch 404 and forward to error handler
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
"debug": "~2.6.3",
"ejs": "~2.5.6",
"express": "~4.15.2",
"fabric": "^2.0.0-beta.4",
"morgan": "~1.8.1",
"multer": "1.1.0",
"pngjs": "^3.3.0",
"serve-favicon": "~2.4.2",
"svg2ttf": "4.1.0"
},
Expand Down
2 changes: 1 addition & 1 deletion public/javascripts/imagetracer_v1.2.1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -897,7 +897,7 @@ function ImageTracer(){

// Convert color object to SVG color string
this.tosvgcolorstr = function(c, options){
if(c.r >= 250 && c.g >= 250 && c.b >= 250)
if(c.r >= 150 && c.g >= 150 && c.b >= 150)
return null
else {
return 'fill="rgb('+c.r+','+c.g+','+c.b+')" stroke="rgb('+c.r+','+c.g+','+c.b+')" stroke-width="'+options.strokewidth+'" opacity="'+c.a/255.0+'" ';
Expand Down
122 changes: 84 additions & 38 deletions public/javascripts/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
var svgstring = [];
var send_option = {};
function make_svg_font (){

function make_svg_font (svgstring){

$("#generate_button").click(function(){
$("#convert_button").click(function(){
$.ajax({
type: 'POST',
url:'/generate',
dataType:"json",
async:true,
data:{
'svgstring':svgstring,
'sources':sources_uni
// 'root_dir':<%= root_dir %>,
'options':send_option,
// 'svgstring':svgstring,
// 'sources':sources_uni
},
success:function(data){
$('#download_button').css('display','');
$('#convert_button').hide();
}
});
});
}
Expand All @@ -24,22 +31,21 @@ function log_to_DOM (str) {
function trace_image(){

var svgstring;
let canvas = document.getElementById('img');
var canvas_vector = document.getElementById('canvas_vector');
if (!canvas_vector) {
let preimg_canvas = document.getElementById('img');
// var canvas_vector = document.getElementById('canvas_vector');
// if (!canvas_vector) {
canvas_vector = document.createElement('canvas');
canvas_vector.id = 'canvas_vector';
canvas_vector.width = 128*3;
canvas_vector.height = 128*3;
document.getElementById('post_image').appendChild(canvas_vector);
}
var context = canvas_vector.getContext('2d');
// document.getElementById('post_image').appendChild(canvas_vector);
// }
// let img = document.getElementById('img');
// let canvas = document.createElement('canvas');

// canvas.width = img.width*4;
// canvas.height = img.height*4;
// var context = canvas.getContext('2d');
var v_context = canvas_vector.getContext('2d');
// context.drawImage(img,0,0, img.width, img.height, // source rectangle
// 0, 0, canvas.width, canvas.height);

Expand All @@ -54,19 +60,35 @@ function trace_image(){
}
option.pal = [{r:0,g:0,b:0,a:255},{r:255,g:255,b:255,a:255}];
option.linefilter=true;

send_option = option;
console.log(send_option);
let start_t = new Date();

// Getting ImageData from canvas with the helper function getImgdata().
// let imgd = ImageTracer.getImgdata( canvas );

let svg_string = [];
var scale_canvas = document.createElement('canvas');
scale_canvas.width = 128*3*4;
scale_canvas.height = 128*3*4;
var s_context = scale_canvas.getContext('2d');

loadImages(sources, function(images) {
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
s_context.drawImage(images[3*i + j], 128*j*4, 128*i*4, 128*4, 128*4);
}
}
});


svg_string = [];

for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let imgd = ImageTracer.getPartialImgdata( canvas, j*128, i*128, 128, 128 );
let imgd = ImageTracer.getPartialImgdata( preimg_canvas, j*128, i*128, 128, 128 );
// Synchronous tracing to SVG string
option.dstring = "";
// option.scale = 1/4;
//option.scale = 1/4;
var svgstr = ImageTracer.imagedataToSVG( imgd, option);
var dstring = option.dstring;
svgstring = dstring;
Expand All @@ -75,12 +97,18 @@ function trace_image(){
svg_string.push(svgstr);
let img = new Image();
img.onload = function() {
context.drawImage(img, j*128, i*128, 128, 128);
v_context.drawImage(img, j*128, i*128, 128, 128);
}
img.src = "data:image/svg+xml," + svgstr;
}
}
}
var postimg_list = document.getElementById('post_image')
if(postimg_list.hasChildNodes()){
postimg_list.removeChild(postimg_list.childNodes[0]);
}
make_svg_font(svg_string);
postimg_list.appendChild(canvas_vector);
// make_svg_font();
console.log(svg_string);
}

function create_option(name, min, max, step, value) {
Expand All @@ -95,15 +123,15 @@ function create_option(name, min, max, step, value) {
optionSetting_input.addEventListener("change", trace_image);
}

var sources = ['/demo/inferred_C307.png',
'/demo/inferred_AE5C.png',
'/demo/inferred_AE7C.png',
'/demo/inferred_AE9A.png',
'/demo/inferred_AE85.png',
'/demo/inferred_AECB.png',
'/demo/inferred_B0A2.png',
'/demo/inferred_B2ED.png',
'/demo/inferred_B3C8.png'];
/* var sources = [ '/Tue10Oct201702_27_53GMT/result/inferred_AD3E.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png',
'/Tue10Oct201702_27_53GMT/result/inferred_D774.png'];
var sources_uni = [
'\uC307',
'\uAE5C',
Expand All @@ -113,12 +141,30 @@ function create_option(name, min, max, step, value) {
'\uAECB',
'\uB0A2',
'\uB2ED',
'\uB3C8'];
'\uB3C8'];*/
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = sources.length;
// get num of sources
for(var i = 0; i < numImages; i++) {
images[i] = new Image();
images[i].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[i].src = sources[i];
}
}

function onload_init() {

create_option('ltres', 0, 10, 0.1, 5);


create_option('ltres', 0, 5, 0.1, 1);
create_option('qtres', 0, 10, 0.1, 1);
create_option('strokewidth', 0, 5, 0.1, 0.15);
create_option('strokewidth', 0, 0.5, 0.01, 0.1);
create_option('pathomit', 0, 10, 1, 8);
create_option('blurradius',1, 5, 1, 0);
create_option('blurdelta', -100, 100, 10, 10);
Expand Down Expand Up @@ -146,12 +192,11 @@ function onload_init() {
images[i].src = sources[i];
}
}

var canvas = document.createElement("canvas");
canvas.width = 128*3;
canvas.height = 128*3;
canvas.id = 'img';
var context = canvas.getContext('2d');
var canvas = document.createElement("canvas");
canvas.width = 128*3;
canvas.height = 128*3;
canvas.id = 'img';
var context = canvas.getContext('2d');

// console.log(response.sample_img_paths);
// var sources = response.sample_img_paths;
Expand All @@ -165,6 +210,7 @@ function onload_init() {
trace_image();
});
document.getElementById("pre_image").appendChild(canvas);
make_svg_font();
// }
// });

Expand All @@ -176,7 +222,7 @@ function onload_init() {
default_but.addEventListener('click', function(){
$('#ltres').val(1);
$('#qtres').val(1);
$('#strokewidth').val(0.2);
$('#strokewidth').val(0.1);
$('#pathomit').val(8);
$('#blurradius').val(0);
$('#blurdelta').val(10);
Expand Down
92 changes: 89 additions & 3 deletions routes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,89 @@ var router = express.Router();
const { exec, execSync, spawn } = require('child_process');
var multer = require('multer');
var fs = require('fs');
var svg2ttf = require('svg2ttf');
var svgicons2svgfont = require('svgicons2svgfont');
var fontStream = svgicons2svgfont({
fontName: 'myfont'
});
var ImageTracer = require('../public/javascripts/imagetracer_v1.2.1');
var PNGReader = require('../public/javascripts/PNGReader');
var PNG = require('pngjs').PNG;

var files;

// root_dir = 'Wed11Oct201702_19_32GMT';
// files = fs.readdirSync(__dirname + '/../neural-fonts/Wed11Oct201702_19_32GMT/result/');


router.post("/generate", function(req, res){

//var root_dir = req.body.root_dir;
var option = req.body.options;
var svgstring = [];
var sources=[];
var fileName=[];
var syncCheck = 0;
console.log(root_dir);




for(var i=0; i<files.length; i++) {
sources[i] = '0x' + files[i].substring(9,13);
fileName[i] = files[i].substring(9,13);
//console.log('\u0000'.substring(0,2));

}

for(var i=0; i<files.length; i++) {
let j = i;

var data = fs.readFileSync(__dirname + '/../neural-fonts/'+root_dir+'/result/inferred_'+fileName[j]+'.png');

var png = PNG.sync.read(data);

var myImageData = {width:128, height:128, data:png.data};
var options = {ltres:option.ltres, strokewidth:option.strokewidth, qtres:option.qtres, pathomit:option.pathomit, blurradius:option.blurradius, blurdelta:option.blurdelta };

options.pal = [{r:0,g:0,b:0,a:255},{r:255,g:255,b:255,a:255}];
options.linefilter=true;
svgstring[j] = ImageTracer.imagedataToSVG( myImageData, options);
fs.writeFileSync('./svg/' + fileName[j] + '.svg',svgstring[j]);
syncCheck++;

}

fontStream.pipe(fs.createWriteStream( './svg_fonts/font_ss.svg'))
.on('finish',function() {

var ttf = svg2ttf(fs.readFileSync( './svg_fonts/font_ss.svg', 'utf8'), {});
fs.writeFileSync('./ttf_fonts/myfont2.ttf', new Buffer(ttf.buffer));

res.send({result:'success'});

// var file = __dirname + '/../ttf_fonts/myfont2.ttf';
// res.download(file);

})
.on('error',function(err) {
console.log(err);
});

for (var i=0; i < sources.length; i++) {
// Writing glyphs
let glyph1 = fs.createReadStream('./svg/' + fileName[i] + '.svg');
glyph1.metadata = {
unicode: [String.fromCharCode((sources[i]).toString(10))],
name: 'glyph' + sources[i]
};
fontStream.write(glyph1);
}
fontStream.end();



});


/* GET home page. */
Expand Down Expand Up @@ -30,6 +113,7 @@ var image_dir;
var logs_dir;
var result_dir;


router.post('/train',function(req,res){

if (doing_training) {
Expand Down Expand Up @@ -108,11 +192,12 @@ router.post('/train',function(req,res){
});
});
console.log('doing_training: ' + doing_training);
res.json({'doing_training':doing_training});
res.json({'doing_training':doing_training });
});

router.get('/adjust', function(req, res, next){
res.render('adjust');
var samples = [ files[100], files[200], files[300], files[400], files[500], files[600], files[700], files[800], files[900] ];
res.render('adjust',{'root_dir':root_dir, 'files':samples });
});

router.get('/download_template', function(req, res){
Expand All @@ -121,7 +206,7 @@ router.get('/download_template', function(req, res){
});

router.get('/download_ttf', function(req, res){
var file = __dirname + '/../ttf_fonts/myfont.ttf';
var file = __dirname + '/../ttf_fonts/myfont2.ttf';
res.download(file);
});

Expand Down Expand Up @@ -155,6 +240,7 @@ router.post('/progress',function(req,res){
training_progress.push("secondPhaseTrained");
}
if (count == 3) {
files = fs.readdirSync(__dirname + '/../neural-fonts/'+root_dir+'/result/');
training_count = 0; // reset
doing_training = false;
training_progress.push("Inferenced");
Expand Down
Loading

0 comments on commit 1320f92

Please sign in to comment.