[PermanentStorage] done + minmod

This commit is contained in:
xdrm-brackets 2016-11-03 10:36:23 +01:00
parent d514f7080d
commit 21a153b02c
8 changed files with 254 additions and 200 deletions

View File

@ -11,6 +11,7 @@
* http://seekdasky.ovh/ *
**************************/
{ /* [0] Initialisation
=========================================================*/
@ -21,9 +22,6 @@
imageLoader: $('#image-loader')
};
/* (2) dat.GUI initialization */
var Controller = new dat.GUI();
/* (3) Canvas initialisation */
var _CAN = DOM.canvas;
_CAN.width = _CAN.height = 1000;
@ -39,36 +37,52 @@
var trackerTask;
var trackerTask;
var Controller,
init,
zones,
track,
tracker,
initialized = false;
}
var ControllerRememberer = new PermanentStorage();
ControllerRememberer.fetch(function(loaded_data){
log('Preset loaded.', '[PermanentStorage]')
{ /* [1] Initialisation du process
=========================================================*/
/* (1) dat.GUI initialization */
Controller = new dat.GUI({ load: JSON.parse(loaded_data), preset: 'default' });
var init = function(){
init = function(){
/* (1) Image par défaut */
this.src = 'front/male/1.jpg';
/* (2) Attachement de dat.GUI */
Controller.addFolder('Source Picture');
Controller.remember(this);
Controller.add(this, 'src', this._images).listen();
last = this.src;
initialized = true;
};
/* (2) Gestion de tracking.js */
var zones;
zones;
/* (3) Gestion du track de l'image */
var track = {
track = {
track: function(){
zones = [];
trackerTask = tracking.track(_CAN, tracker);
}
};
var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
tracker.setStepSize(1.9);
@ -103,7 +117,7 @@
=========================================================*/
process = function(){
// Si erreur de `bind()`, on quitte
if( !(this instanceof HTMLImageElement) )
if( !initialized || !(this instanceof HTMLImageElement) )
return;
console.time('PROCESS');
@ -206,44 +220,47 @@ process = function(){
filterManager.add('gaussian', reactiveGaussianBlur);
filterManager.add('canny', reactiveCanny);
/* (3) On attache tout à dat.GUI */
Controller.addFolder('Image Resolution');
Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1).listen();
Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1).listen();
Controller.addFolder('Basic Image Processing');
Controller.add(filterManager.get('contrast'), 'contrast', 0, 100).listen();
Controller.addFolder('Gaussian Blur');
Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5).listen();
Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1).listen();
Controller.addFolder('Convolution Filters');
Controller.add(filterManager.get('sobel'), 'sobelActive').listen();
Controller.add(filterManager.get('canny'), 'canny_radius').listen();
/* (4) Gestion des backups */
/* (3) Gestion des backups */
Controller.remember(filterManager.get('resolution'));
Controller.remember(filterManager.get('contrast'));
Controller.remember(filterManager.get('sobel'));
Controller.remember(filterManager.get('canny'));
Controller.remember(filterManager.get('gaussian'));
/* (4) On attache tout à dat.GUI */
Controller.addFolder('Image Resolution');
Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1);//listen();
Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);//listen();
Controller.addFolder('Basic Image Processing');
Controller.add(filterManager.get('contrast'), 'contrast', 0, 100);//listen();
Controller.addFolder('Gaussian Blur');
Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5);//listen();
Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1);//listen();
Controller.addFolder('Convolution Filters');
Controller.add(filterManager.get('sobel'), 'sobelActive');//listen();
Controller.add(filterManager.get('canny'), 'canny_radius');//listen();
/* (5) Gestion du @PermanentStorage */
Controller.__save_row.children[2].addEventListener('click', function(e){
Controller.__save_row.children[2].addEventListener('click', function(){
/* (1) Update properties */
Controller.save();
/* (2) Get stored data */
try{
var stored = JSON.stringify( Controller.load.remembered );
var stored = JSON.stringify( Controller.getSaveObject() );
ControllerRememberer.store(stored, function(){ log('dat.GUI preset stored.', '[PermanentStorage]'); return true; });
}catch(e){ log('Error parsing/storing data.', '[PermanentStorage]'); }
}catch(e){ log('Corrupted data.', '[PermanentStorage]'); }
}, false);
}
/* [x] Chargement image
=========================================================*/
iL = new ImageLoader( DOM.imageLoader, init, process );
return true;
});

View File

@ -1,3 +1,3 @@
var PermanentStorage=function(){};
PermanentStorage.prototype={store:function(a,c){var d,b;a=a||null;a="string"===typeof a?a:null;if(!(a&&c instanceof Function))return!1;d=new FormData;d.append("data",a);b=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHttpRequest");b.addEventListener("readystatechange",function(a){b.readyState-4||!~[0,200].indexOf(b.status)||c.bind(b.responseText)},!1);b.open("POST","./permanent-storage/",!0);b.send(d)},fetch:function(){var a;if(!(callback instanceof Function))return!1;a=
window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHttpRequest");a.addEventListener("readystatechange",function(c){a.readyState-4||!~[0,200].indexOf(a.status)||callback.bind(a.responseText)},!1);a.open("POST","./permanent-storage/",!0);a.send(null)}};
PermanentStorage.prototype={store:function(a,b){var c,d;a=a||null;a="string"===typeof a?a:null;if(!(a&&b instanceof Function))return!1;c=new FormData;c.append("command","store");c.append("data",a);d=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHttpRequest");d.addEventListener("readystatechange",function(a){d.readyState-4||!~[0,200].indexOf(d.status)||"success"==d.responseText&&b()||console.warn("[PermanentStorage] storeError")},!1);d.open("POST","./permanent-storage/",
!0);d.send(c);return!0},fetch:function(a){var b,c;if(!(a instanceof Function))return!1;c=new FormData;c.append("command","fetch");b=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHttpRequest");b.addEventListener("readystatechange",function(c){b.readyState-4||!~[0,200].indexOf(b.status)||"error"!=b.responseText&&a(b.responseText)||console.warn("[PermanentStorage] fetchError")},!1);b.open("POST","./permanent-storage/",!0);b.send(c)}};

View File

@ -44,6 +44,7 @@ PermanentStorage.prototype = {
{ /* (3) Format data and wrap it into FormData */
fd = new FormData();
fd.append('command', 'store');
fd.append('data', raw_data);
}
@ -51,13 +52,14 @@ PermanentStorage.prototype = {
xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttpRequest');
xhr.addEventListener('readystatechange', function(e){
!(xhr.readyState-4) && !!~[0,200].indexOf(xhr.status) && callback.bind(xhr.responseText);
!(xhr.readyState-4) && !!~[0,200].indexOf(xhr.status) && ( xhr.responseText == 'success' && callback() || console.warn('[PermanentStorage] storeError') );
}, false);
xhr.open( 'POST', './permanent-storage/', true );
xhr.send( fd );
}
return true;
},
/* FETCHES DATA FROM REMOTE STORAGE
@ -65,27 +67,31 @@ PermanentStorage.prototype = {
* @callback<Function> Callback function that'll take the @fetched_data as result
*
* @return raw_data<String> Fetched data
* | error<null> NULL is returned if an error occured
*
*/
fetch: function(){
fetch: function(callback){
/* (0) Initialization */
var xhr;
var xhr, fd;
{ /* (1) Checks @callback argument */
if( !(callback instanceof Function) )
return false;
}
{ /* (2) Set FormData */
fd = new FormData();
fd.append('command', 'fetch');
}
{ /* (2) Sends data to server */
xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttpRequest');
xhr.addEventListener('readystatechange', function(e){
!(xhr.readyState-4) && !!~[0,200].indexOf(xhr.status) && callback.bind(xhr.responseText);
!(xhr.readyState-4) && !!~[0,200].indexOf(xhr.status) && ( xhr.responseText != 'error' && callback(xhr.responseText) || console.warn('[PermanentStorage] fetchError') );
}, false);
xhr.open( 'POST', './permanent-storage/', true );
xhr.send( null );
xhr.send( fd );
}
}

View File

@ -42,8 +42,6 @@ var ReactiveFilter = function(attr){
this.apply = function(){};
};
/* CONSTRUCTEUR -> Gestionnaire des ReactiveFilter
*
* @pImageTarget<HTMLImageElement> Image cible

View File

@ -1,8 +1,8 @@
var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},Controller=new dat.GUI,_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;
var _CON=_CAN.getContext("2d"),iL,filterManager,process=function(){},exec=!1,last,trackerTask,init=function(){this.src="front/male/1.jpg";Controller.addFolder("Source Picture");Controller.add(this,"src",this._images).listen();last=this.src},zones,track={track:function(){zones=[];trackerTask=tracking.track(_CAN,tracker)}},tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.9);Controller.addFolder("Tracking.js");Controller.add(track,"track");
tracker.on("track",function(b){b.data.forEach(function(a){zones.push({x:a.x/_CAN.width,y:a.y/_CAN.height,w:a.width/_CAN.width,h:a.height/_CAN.height})});log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()});
process=function(){if(this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(zones=[],exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),exec=!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("resolution").apply();filterManager.get("contrast").apply();filterManager.get("sobel").apply();filterManager.get("gaussian").apply();filterManager.get("canny").apply();for(var b in zones){var a=zones[b].x*
_CAN.width,c=zones[b].y*_CAN.height,d=zones[b].w*_CAN.width,e=zones[b].h*_CAN.height;_CON.beginPath();_CON.moveTo(a,c);_CON.lineTo(a,c+e);_CON.lineTo(a+d,c+e);_CON.lineTo(a+d,c);_CON.lineTo(a,c);_CON.lineWidth=5;_CON.strokeStyle="#f00";_CON.stroke()}console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast);filterManager.add("sobel",reactiveSobel);
filterManager.add("gaussian",reactiveGaussianBlur);filterManager.add("canny",reactiveCanny);Controller.addFolder("Image Resolution");Controller.add(filterManager.get("resolution"),"width",0,2).step(.1).listen();Controller.add(filterManager.get("resolution"),"height",0,2).step(.1).listen();Controller.addFolder("Basic Image Processing");Controller.add(filterManager.get("contrast"),"contrast",0,100).listen();Controller.addFolder("Gaussian Blur");
Controller.add(filterManager.get("gaussian"),"sigma",0,10).step(.5).listen();Controller.add(filterManager.get("gaussian"),"radius",1,11).step(1).listen();Controller.addFolder("Convolution Filters");Controller.add(filterManager.get("sobel"),"sobelActive").listen();Controller.add(filterManager.get("canny"),"canny_radius").listen();Controller.remember(filterManager.get("resolution"));Controller.remember(filterManager.get("contrast"));Controller.remember(filterManager.get("sobel"));Controller.remember(filterManager.get("canny"));
Controller.remember(filterManager.get("gaussian"));Controller.__save_row.children[2].addEventListener("click",function(b){Controller.save();try{JSON.stringify(Controller.load.remembered)}catch(a){log("Error parsing/storing data.","[PermanentStorage]")}},!1);iL=new ImageLoader(DOM.imageLoader,init,process);
var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;var _CON=_CAN.getContext("2d"),iL,filterManager,process=function(){},exec=!1,last,trackerTask,Controller,init,zones,track,tracker,initialized=!1,ControllerRememberer=new PermanentStorage;
ControllerRememberer.fetch(function(f){log("Preset loaded.","[PermanentStorage]");Controller=new dat.GUI({load:JSON.parse(f),preset:"default"});init=function(){this.src="front/male/1.jpg";Controller.addFolder("Source Picture");Controller.remember(this);Controller.add(this,"src",this._images).listen();last=this.src;initialized=!0};zones;track={track:function(){zones=[];trackerTask=tracking.track(_CAN,tracker)}};tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.9);Controller.addFolder("Tracking.js");
Controller.add(track,"track");tracker.on("track",function(b){b.data.forEach(function(a){zones.push({x:a.x/_CAN.width,y:a.y/_CAN.height,w:a.width/_CAN.width,h:a.height/_CAN.height})});log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()});process=function(){if(initialized&&this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(zones=[],exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),exec=
!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("resolution").apply();filterManager.get("contrast").apply();filterManager.get("sobel").apply();filterManager.get("gaussian").apply();filterManager.get("canny").apply();for(var b in zones){var a=zones[b].x*_CAN.width,c=zones[b].y*_CAN.height,d=zones[b].w*_CAN.width,e=zones[b].h*_CAN.height;_CON.beginPath();_CON.moveTo(a,c);_CON.lineTo(a,c+e);_CON.lineTo(a+d,c+e);_CON.lineTo(a+d,c);_CON.lineTo(a,c);_CON.lineWidth=5;_CON.strokeStyle="#f00";
_CON.stroke()}console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast);filterManager.add("sobel",reactiveSobel);filterManager.add("gaussian",reactiveGaussianBlur);filterManager.add("canny",reactiveCanny);Controller.remember(filterManager.get("resolution"));Controller.remember(filterManager.get("contrast"));Controller.remember(filterManager.get("sobel"));Controller.remember(filterManager.get("canny"));
Controller.remember(filterManager.get("gaussian"));Controller.addFolder("Image Resolution");Controller.add(filterManager.get("resolution"),"width",0,2).step(.1);Controller.add(filterManager.get("resolution"),"height",0,2).step(.1);Controller.addFolder("Basic Image Processing");Controller.add(filterManager.get("contrast"),"contrast",0,100);Controller.addFolder("Gaussian Blur");Controller.add(filterManager.get("gaussian"),"sigma",0,10).step(.5);Controller.add(filterManager.get("gaussian"),"radius",
1,11).step(1);Controller.addFolder("Convolution Filters");Controller.add(filterManager.get("sobel"),"sobelActive");Controller.add(filterManager.get("canny"),"canny_radius");Controller.__save_row.children[2].addEventListener("click",function(){Controller.save();try{var b=JSON.stringify(Controller.getSaveObject());ControllerRememberer.store(b,function(){log("dat.GUI preset stored.","[PermanentStorage]");return!0})}catch(a){log("Corrupted data.","[PermanentStorage]")}},!1);iL=new ImageLoader(DOM.imageLoader,
init,process);return!0});

View File

@ -0,0 +1,36 @@
<?php
/* [1] Initialization
=========================================================*/
/* (1) Header */
header('Content-Type: plain/text');
/* (2) Checks arguments */
if( empty($_POST) || !isset($_POST['command']) )
die('error');
/* [2] Data storage
=========================================================*/
/* (1) If have to store data */
if( $_POST['command'] === 'store' && !empty($_POST['data']) ){
/* (2) Stores data */
file_put_contents( dirname(__FILE__).'/storage.json', $_POST['data']);
/* (3) Close connection */
die('success');
/* [3] Data fetch
=========================================================*/
/* (1) Checks command */
}elseif( $_POST['command'] === 'fetch' ){
/* (2) Returns data */
die( file_get_contents( dirname(__FILE__).'/storage.json') );
}
/* [4] If nothing happened -> error
=========================================================*/
die('error');

View File

@ -1,3 +0,0 @@
<?php

View File

@ -1 +1 @@
{}
{"preset":"test1","remembered":{"default":{"0":{"width":1.8,"height":0.5},"1":{"contrast":0},"2":{"sobelActive":false},"3":{"canny_radius":3},"4":{"sigma":0,"radius":3},"5":{"src":"front/male/1.jpg"}},"test1":{"0":{"width":1.8,"height":0.5},"1":{"contrast":55.27520549370516},"2":{"sobelActive":false},"3":{"canny_radius":3},"4":{"sigma":0,"radius":3},"5":{"src":"front/male/1.jpg"}}},"closed":false,"folders":{"Tracking.js":{"preset":"Default","closed":true,"folders":{}},"Image Resolution":{"preset":"Default","closed":true,"folders":{}},"Basic Image Processing":{"preset":"Default","closed":true,"folders":{}},"Gaussian Blur":{"preset":"Default","closed":true,"folders":{}},"Convolution Filters":{"preset":"Default","closed":true,"folders":{}},"Source Picture":{"preset":"Default","closed":true,"folders":{}}}}