l3
/
face-recognition.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Gestion des folders et sub-folders de dat.GUI + face_trackingjs est un reactiveFilter.

This commit is contained in:
xdrm-brackets 2016-11-04 18:44:29 +01:00
parent dd430d4686
commit 39af644026
14 changed files with 304 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public_html/css/expanded/layout.css
View File

@ -4,6 +4,21 @@ body {
font-size: 12px; font-size: 12px;
} }
#loader {
display: block;
position: absolute;
width: 500px;
height: 500px;
margin-left: 20px;
background: url("../../src/loader.svg") center center no-repeat;
background-size: 0 0;
z-index: 1;
}
#loader.active {
background-size: 4em 4em;
}
#image-loader { #image-loader {
display: none; display: none;
} }
@ -46,4 +61,4 @@ body {
text-shadow: none !important; text-shadow: none !important;
} }
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cblxuXG4jaW1hZ2UtbG9hZGVye1xuXHRkaXNwbGF5OiBub25lO1xufVxuXG4jY2FudmFze1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cdFx0aGVpZ2h0OiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cblx0bWFyZ2luOiAyMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICMwMDA7XG59XG5cblxuI2xvZ3tcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHR3aWR0aDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCAtIDIqMTBweCApO1xuXG5cdG1hcmdpbjogMTBweCAyMHB4O1xuXHRwYWRkaW5nOiAxMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICM1NTU7XG5cblx0c3Bhbntcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuXG59XG5cblxuLy8gQURERUQgVE8gREFULkdVSVxuLmRnLmEgLnNhdmUtcm93eyBiYWNrZ3JvdW5kLWNvbG9yOiAjMWExYTFhICFpbXBvcnRhbnQ7IH1cblxuLmRnIGxpLnNhdmUtcm93ID4gc2VsZWN0e1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjN2Q3ZDdkICFpbXBvcnRhbnQ7XG5cdGNvbG9yOiAjZmZmICFpbXBvcnRhbnQ7XG5cdGJvcmRlcjogMCAhaW1wb3J0YW50O1xufVxuXG4uZGcgbGkuc2F2ZS1yb3cgPiBzcGFue1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjMzAzMDMwICFpbXBvcnRhbnQ7XG5cdGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcblx0dGV4dC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFHQSxBQUFBLElBQUksQ0FBQTtFQUNILGdCQUFnQixFQUFFLElBQUs7RUFFdkIsV0FBVyxFQUFFLFNBQVU7RUFDdkIsU0FBUyxFQUFFLElBQUs7Q0FDaEI7O0FBSUQsQUFBQSxhQUFhLENBQUE7RUFDWixPQUFPLEVBQUUsSUFBSztDQUNkOztBQUVELEFBQUEsT0FBTyxDQUFBO0VBQ04sT0FBTyxFQUFFLEtBQU07RUFDZixRQUFRLEVBQUUsUUFBUztFQUNsQixLQUFLLEVBQUUsb0JBQUk7RUFDWCxNQUFNLEVBQUUsb0JBQUk7RUFFYixNQUFNLEVBQUUsSUFBSztFQUViLE1BQU0sRUFBRSxjQUFlO0NBQ3ZCOztBQUdELEFBQUEsSUFBSSxDQUFBO0VBQ0gsT0FBTyxFQUFFLEtBQU07RUFDZixRQUFRLEVBQUUsUUFBUztFQUNsQixLQUFLLEVBQUUsNkJBQUk7RUFFWixNQUFNLEVBQUUsU0FBVTtFQUNsQixPQUFPLEVBQUUsSUFBSztFQUVkLE1BQU0sRUFBRSxjQUFlO0NBTXZCOztBQWRELEFBVUMsSUFWRyxDQVVILElBQUksQ0FBQTtFQUNILE9BQU8sRUFBRSxLQUFNO0NBQ2Y7O0FBTUYsQUFBTSxHQUFILEFBQUEsRUFBRSxDQUFDLFNBQVMsQ0FBQTtFQUFFLGdCQUFnQixFQUFFLGtCQUFtQjtDQUFJOztBQUUxRCxBQUFrQixHQUFmLENBQUMsRUFBRSxBQUFBLFNBQVMsR0FBRyxNQUFNLENBQUE7RUFDdkIsZ0JBQWdCLEVBQUUsa0JBQW1CO0VBQ3JDLEtBQUssRUFBRSxlQUFnQjtFQUN2QixNQUFNLEVBQUUsWUFBYTtDQUNyQjs7QUFFRCxBQUFrQixHQUFmLENBQUMsRUFBRSxBQUFBLFNBQVMsR0FBRyxJQUFJLENBQUE7RUFDckIsZ0JBQWdCLEVBQUUsa0JBQW1CO0VBQ3JDLFVBQVUsRUFBRSxlQUFnQjtFQUM1QixXQUFXLEVBQUUsZUFBZ0I7Q0FDN0IiLAoJIm5hbWVzIjogW10KfQ== */ /*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cbiNsb2FkZXJ7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHdpZHRoOiA1MDBweDtcblx0aGVpZ2h0OiA1MDBweDtcblx0bWFyZ2luLWxlZnQ6IDIwcHg7XG5cdGJhY2tncm91bmQ6IHVybCgnLi4vLi4vc3JjL2xvYWRlci5zdmcnKSBjZW50ZXIgY2VudGVyIG5vLXJlcGVhdDtcblx0YmFja2dyb3VuZC1zaXplOiAwIDA7XG5cdHotaW5kZXg6IDE7XG59XG5cbiNsb2FkZXIuYWN0aXZle1xuXHRiYWNrZ3JvdW5kLXNpemU6IDRlbSA0ZW07XG59XG5cbiNpbWFnZS1sb2FkZXJ7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbiNjYW52YXN7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0d2lkdGg6IGNhbGMoICN7JGltYWdlLXNpemV9IC0gMioycHggKTtcblx0XHRoZWlnaHQ6IGNhbGMoICN7JGltYWdlLXNpemV9IC0gMioycHggKTtcblxuXHRtYXJnaW46IDIwcHg7XG5cblx0Ym9yZGVyOiAycHggc29saWQgIzAwMDtcbn1cblxuXG4jbG9ne1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4IC0gMioxMHB4ICk7XG5cblx0bWFyZ2luOiAxMHB4IDIwcHg7XG5cdHBhZGRpbmc6IDEwcHg7XG5cblx0Ym9yZGVyOiAycHggc29saWQgIzU1NTtcblxuXHRzcGFue1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHR9XG5cbn1cblxuXG4vLyBBRERFRCBUTyBEQVQuR1VJXG4uZGcuYSAuc2F2ZS1yb3d7IGJhY2tncm91bmQtY29sb3I6ICMxYTFhMWEgIWltcG9ydGFudDsgfVxuXG4uZGcgbGkuc2F2ZS1yb3cgPiBzZWxlY3R7XG5cdGJhY2tncm91bmQtY29sb3I6ICM3ZDdkN2QgIWltcG9ydGFudDtcblx0Y29sb3I6ICNmZmYgIWltcG9ydGFudDtcblx0Ym9yZGVyOiAwICFpbXBvcnRhbnQ7XG59XG5cbi5kZyBsaS5zYXZlLXJvdyA+IHNwYW57XG5cdGJhY2tncm91bmQtY29sb3I6ICMzMDMwMzAgIWltcG9ydGFudDtcblx0Ym94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xuXHR0ZXh0LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xufVxuIgoJXSwKCSJtYXBwaW5ncyI6ICJBQUdBLEFBQUEsSUFBSSxDQUFBO0VBQ0gsZ0JBQWdCLEVBQUUsSUFBSztFQUV2QixXQUFXLEVBQUUsU0FBVTtFQUN2QixTQUFTLEVBQUUsSUFBSztDQUNoQjs7QUFFRCxBQUFBLE9BQU8sQ0FBQTtFQUNOLE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDbkIsS0FBSyxFQUFFLEtBQU07RUFDYixNQUFNLEVBQUUsS0FBTTtFQUNkLFdBQVcsRUFBRSxJQUFLO0VBQ2xCLFVBQVUsRUFBRSwyQkFBRyxDQUF5QixNQUFNLENBQUMsTUFBTSxDQUFDLFNBQVM7RUFDL0QsZUFBZSxFQUFFLEdBQUk7RUFDckIsT0FBTyxFQUFFLENBQUU7Q0FDWDs7QUFFRCxBQUFPLE9BQUEsQUFBQSxPQUFPLENBQUE7RUFDYixlQUFlLEVBQUUsT0FBUTtDQUN6Qjs7QUFFRCxBQUFBLGFBQWEsQ0FBQTtFQUNaLE9BQU8sRUFBRSxJQUFLO0NBQ2Q7O0FBRUQsQUFBQSxPQUFPLENBQUE7RUFDTixPQUFPLEVBQUUsS0FBTTtFQUNmLFFBQVEsRUFBRSxRQUFTO0VBQ2xCLEtBQUssRUFBRSxvQkFBSTtFQUNYLE1BQU0sRUFBRSxvQkFBSTtFQUViLE1BQU0sRUFBRSxJQUFLO0VBRWIsTUFBTSxFQUFFLGNBQWU7Q0FDdkI7O0FBR0QsQUFBQSxJQUFJLENBQUE7RUFDSCxPQUFPLEVBQUUsS0FBTTtFQUNmLFFBQVEsRUFBRSxRQUFTO0VBQ2xCLEtBQUssRUFBRSw2QkFBSTtFQUVaLE1BQU0sRUFBRSxTQUFVO0VBQ2xCLE9BQU8sRUFBRSxJQUFLO0VBRWQsTUFBTSxFQUFFLGNBQWU7Q0FNdkI7O0FBZEQsQUFVQyxJQVZHLENBVUgsSUFBSSxDQUFBO0VBQ0gsT0FBTyxFQUFFLEtBQU07Q0FDZjs7QUFNRixBQUFNLEdBQUgsQUFBQSxFQUFFLENBQUMsU0FBUyxDQUFBO0VBQUUsZ0JBQWdCLEVBQUUsa0JBQW1CO0NBQUk7O0FBRTFELEFBQWtCLEdBQWYsQ0FBQyxFQUFFLEFBQUEsU0FBUyxHQUFHLE1BQU0sQ0FBQTtFQUN2QixnQkFBZ0IsRUFBRSxrQkFBbUI7RUFDckMsS0FBSyxFQUFFLGVBQWdCO0VBQ3ZCLE1BQU0sRUFBRSxZQUFhO0NBQ3JCOztBQUVELEFBQWtCLEdBQWYsQ0FBQyxFQUFFLEFBQUEsU0FBUyxHQUFHLElBQUksQ0FBQTtFQUNyQixnQkFBZ0IsRUFBRSxrQkFBbUI7RUFDckMsVUFBVSxFQUFFLGVBQWdCO0VBQzVCLFdBQVcsRUFBRSxlQUFnQjtDQUM3QiIsCgkibmFtZXMiOiBbXQp9 */

4
public_html/css/expanded/layout.css.map
View File

@ -5,8 +5,8 @@
"../layout.scss" "../layout.scss"
], ],
"sourcesContent": [ "sourcesContent": [
"$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n\n\n// ADDED TO DAT.GUI\n.dg.a .save-row{ background-color: #1a1a1a !important; }\n\n.dg li.save-row > select{\n\tbackground-color: #7d7d7d !important;\n\tcolor: #fff !important;\n\tborder: 0 !important;\n}\n\n.dg li.save-row > span{\n\tbackground-color: #303030 !important;\n\tbox-shadow: none !important;\n\ttext-shadow: none !important;\n}\n" "$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n#loader{\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 500px;\n\theight: 500px;\n\tmargin-left: 20px;\n\tbackground: url('../../src/loader.svg') center center no-repeat;\n\tbackground-size: 0 0;\n\tz-index: 1;\n}\n\n#loader.active{\n\tbackground-size: 4em 4em;\n}\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n\n\n// ADDED TO DAT.GUI\n.dg.a .save-row{ background-color: #1a1a1a !important; }\n\n.dg li.save-row > select{\n\tbackground-color: #7d7d7d !important;\n\tcolor: #fff !important;\n\tborder: 0 !important;\n}\n\n.dg li.save-row > span{\n\tbackground-color: #303030 !important;\n\tbox-shadow: none !important;\n\ttext-shadow: none !important;\n}\n"
], ],
"mappings": "AAGA,AAAA,IAAI,CAAA;EACH,gBAAgB,EAAE,IAAK;EAEvB,WAAW,EAAE,SAAU;EACvB,SAAS,EAAE,IAAK;CAChB;;AAID,AAAA,aAAa,CAAA;EACZ,OAAO,EAAE,IAAK;CACd;;AAED,AAAA,OAAO,CAAA;EACN,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,oBAAI;EACX,MAAM,EAAE,oBAAI;EAEb,MAAM,EAAE,IAAK;EAEb,MAAM,EAAE,cAAe;CACvB;;AAGD,AAAA,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,6BAAI;EAEZ,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,IAAK;EAEd,MAAM,EAAE,cAAe;CAMvB;;AAdD,AAUC,IAVG,CAUH,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;CACf;;AAMF,AAAM,GAAH,AAAA,EAAE,CAAC,SAAS,CAAA;EAAE,gBAAgB,EAAE,kBAAmB;CAAI;;AAE1D,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,GAAG,MAAM,CAAA;EACvB,gBAAgB,EAAE,kBAAmB;EACrC,KAAK,EAAE,eAAgB;EACvB,MAAM,EAAE,YAAa;CACrB;;AAED,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,GAAG,IAAI,CAAA;EACrB,gBAAgB,EAAE,kBAAmB;EACrC,UAAU,EAAE,eAAgB;EAC5B,WAAW,EAAE,eAAgB;CAC7B", "mappings": "AAGA,AAAA,IAAI,CAAA;EACH,gBAAgB,EAAE,IAAK;EAEvB,WAAW,EAAE,SAAU;EACvB,SAAS,EAAE,IAAK;CAChB;;AAED,AAAA,OAAO,CAAA;EACN,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EACnB,KAAK,EAAE,KAAM;EACb,MAAM,EAAE,KAAM;EACd,WAAW,EAAE,IAAK;EAClB,UAAU,EAAE,2BAAG,CAAyB,MAAM,CAAC,MAAM,CAAC,SAAS;EAC/D,eAAe,EAAE,GAAI;EACrB,OAAO,EAAE,CAAE;CACX;;AAED,AAAO,OAAA,AAAA,OAAO,CAAA;EACb,eAAe,EAAE,OAAQ;CACzB;;AAED,AAAA,aAAa,CAAA;EACZ,OAAO,EAAE,IAAK;CACd;;AAED,AAAA,OAAO,CAAA;EACN,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,oBAAI;EACX,MAAM,EAAE,oBAAI;EAEb,MAAM,EAAE,IAAK;EAEb,MAAM,EAAE,cAAe;CACvB;;AAGD,AAAA,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,6BAAI;EAEZ,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,IAAK;EAEd,MAAM,EAAE,cAAe;CAMvB;;AAdD,AAUC,IAVG,CAUH,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;CACf;;AAMF,AAAM,GAAH,AAAA,EAAE,CAAC,SAAS,CAAA;EAAE,gBAAgB,EAAE,kBAAmB;CAAI;;AAE1D,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,GAAG,MAAM,CAAA;EACvB,gBAAgB,EAAE,kBAAmB;EACrC,KAAK,EAAE,eAAgB;EACvB,MAAM,EAAE,YAAa;CACrB;;AAED,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,GAAG,IAAI,CAAA;EACrB,gBAAgB,EAAE,kBAAmB;EACrC,UAAU,EAAE,eAAgB;EAC5B,WAAW,EAAE,eAAgB;CAC7B",
"names": [] "names": []
} }

13
public_html/css/layout.scss
View File

@ -8,7 +8,20 @@ body{
font-size: 12px; font-size: 12px;
} }
#loader{
display: block;
position: absolute;
width: 500px;
height: 500px;
margin-left: 20px;
background: url('../../src/loader.svg') center center no-repeat;
background-size: 0 0;
z-index: 1;
}
#loader.active{
background-size: 4em 4em;
}
#image-loader{ #image-loader{
display: none; display: none;

4
public_html/css/min/layout.css
View File

@ -1,3 +1,3 @@
body{background-color:#ccc;font-family:'Courier';font-size:12px}#image-loader{display:none}#canvas{display:block;position:relative;width:calc( 500px - 2*2px);height:calc( 500px - 2*2px);margin:20px;border:2px solid #000}#log{display:block;position:relative;width:calc( 500px - 2*2px - 2*10px);margin:10px 20px;padding:10px;border:2px solid #555}#log span{display:block}.dg.a .save-row{background-color:#1a1a1a !important}.dg li.save-row>select{background-color:#7d7d7d !important;color:#fff !important;border:0 !important}.dg li.save-row>span{background-color:#303030 !important;box-shadow:none !important;text-shadow:none !important} body{background-color:#ccc;font-family:'Courier';font-size:12px}#loader{display:block;position:absolute;width:500px;height:500px;margin-left:20px;background:url("../../src/loader.svg") center center no-repeat;background-size:0 0;z-index:1}#loader.active{background-size:4em 4em}#image-loader{display:none}#canvas{display:block;position:relative;width:calc( 500px - 2*2px);height:calc( 500px - 2*2px);margin:20px;border:2px solid #000}#log{display:block;position:relative;width:calc( 500px - 2*2px - 2*10px);margin:10px 20px;padding:10px;border:2px solid #555}#log span{display:block}.dg.a .save-row{background-color:#1a1a1a !important}.dg li.save-row>select{background-color:#7d7d7d !important;color:#fff !important;border:0 !important}.dg li.save-row>span{background-color:#303030 !important;box-shadow:none !important;text-shadow:none !important}
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cblxuXG4jaW1hZ2UtbG9hZGVye1xuXHRkaXNwbGF5OiBub25lO1xufVxuXG4jY2FudmFze1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cdFx0aGVpZ2h0OiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cblx0bWFyZ2luOiAyMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICMwMDA7XG59XG5cblxuI2xvZ3tcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHR3aWR0aDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCAtIDIqMTBweCApO1xuXG5cdG1hcmdpbjogMTBweCAyMHB4O1xuXHRwYWRkaW5nOiAxMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICM1NTU7XG5cblx0c3Bhbntcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuXG59XG5cblxuLy8gQURERUQgVE8gREFULkdVSVxuLmRnLmEgLnNhdmUtcm93eyBiYWNrZ3JvdW5kLWNvbG9yOiAjMWExYTFhICFpbXBvcnRhbnQ7IH1cblxuLmRnIGxpLnNhdmUtcm93ID4gc2VsZWN0e1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjN2Q3ZDdkICFpbXBvcnRhbnQ7XG5cdGNvbG9yOiAjZmZmICFpbXBvcnRhbnQ7XG5cdGJvcmRlcjogMCAhaW1wb3J0YW50O1xufVxuXG4uZGcgbGkuc2F2ZS1yb3cgPiBzcGFue1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjMzAzMDMwICFpbXBvcnRhbnQ7XG5cdGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcblx0dGV4dC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFHQSxBQUFBLElBQUksQUFBQSxDQUNILGdCQUFnQixDQUFFLElBQUssQ0FFdkIsV0FBVyxDQUFFLFNBQVUsQ0FDdkIsU0FBUyxDQUFFLElBQUssQ0FDaEIsQUFJRCxBQUFBLGFBQWEsQUFBQSxDQUNaLE9BQU8sQ0FBRSxJQUFLLENBQ2QsQUFFRCxBQUFBLE9BQU8sQUFBQSxDQUNOLE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLFFBQVMsQ0FDbEIsS0FBSyxDQUFFLG9CQUFJLENBQ1gsTUFBTSxDQUFFLG9CQUFJLENBRWIsTUFBTSxDQUFFLElBQUssQ0FFYixNQUFNLENBQUUsY0FBZSxDQUN2QixBQUdELEFBQUEsSUFBSSxBQUFBLENBQ0gsT0FBTyxDQUFFLEtBQU0sQ0FDZixRQUFRLENBQUUsUUFBUyxDQUNsQixLQUFLLENBQUUsNkJBQUksQ0FFWixNQUFNLENBQUUsU0FBVSxDQUNsQixPQUFPLENBQUUsSUFBSyxDQUVkLE1BQU0sQ0FBRSxjQUFlLENBTXZCLEFBZEQsQUFVQyxJQVZHLENBVUgsSUFBSSxBQUFBLENBQ0gsT0FBTyxDQUFFLEtBQU0sQ0FDZixBQU1GLEFBQU0sR0FBSCxBQUFBLEVBQUUsQ0FBQyxTQUFTLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxrQkFBbUIsQ0FBSSxBQUUxRCxBQUFrQixHQUFmLENBQUMsRUFBRSxBQUFBLFNBQVMsQ0FBRyxNQUFNLEFBQUEsQ0FDdkIsZ0JBQWdCLENBQUUsa0JBQW1CLENBQ3JDLEtBQUssQ0FBRSxlQUFnQixDQUN2QixNQUFNLENBQUUsWUFBYSxDQUNyQixBQUVELEFBQWtCLEdBQWYsQ0FBQyxFQUFFLEFBQUEsU0FBUyxDQUFHLElBQUksQUFBQSxDQUNyQixnQkFBZ0IsQ0FBRSxrQkFBbUIsQ0FDckMsVUFBVSxDQUFFLGVBQWdCLENBQzVCLFdBQVcsQ0FBRSxlQUFnQixDQUM3QiIsCgkibmFtZXMiOiBbXQp9 */ /*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cbiNsb2FkZXJ7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHdpZHRoOiA1MDBweDtcblx0aGVpZ2h0OiA1MDBweDtcblx0bWFyZ2luLWxlZnQ6IDIwcHg7XG5cdGJhY2tncm91bmQ6IHVybCgnLi4vLi4vc3JjL2xvYWRlci5zdmcnKSBjZW50ZXIgY2VudGVyIG5vLXJlcGVhdDtcblx0YmFja2dyb3VuZC1zaXplOiAwIDA7XG5cdHotaW5kZXg6IDE7XG59XG5cbiNsb2FkZXIuYWN0aXZle1xuXHRiYWNrZ3JvdW5kLXNpemU6IDRlbSA0ZW07XG59XG5cbiNpbWFnZS1sb2FkZXJ7XG5cdGRpc3BsYXk6IG5vbmU7XG59XG5cbiNjYW52YXN7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0d2lkdGg6IGNhbGMoICN7JGltYWdlLXNpemV9IC0gMioycHggKTtcblx0XHRoZWlnaHQ6IGNhbGMoICN7JGltYWdlLXNpemV9IC0gMioycHggKTtcblxuXHRtYXJnaW46IDIwcHg7XG5cblx0Ym9yZGVyOiAycHggc29saWQgIzAwMDtcbn1cblxuXG4jbG9ne1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4IC0gMioxMHB4ICk7XG5cblx0bWFyZ2luOiAxMHB4IDIwcHg7XG5cdHBhZGRpbmc6IDEwcHg7XG5cblx0Ym9yZGVyOiAycHggc29saWQgIzU1NTtcblxuXHRzcGFue1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHR9XG5cbn1cblxuXG4vLyBBRERFRCBUTyBEQVQuR1VJXG4uZGcuYSAuc2F2ZS1yb3d7IGJhY2tncm91bmQtY29sb3I6ICMxYTFhMWEgIWltcG9ydGFudDsgfVxuXG4uZGcgbGkuc2F2ZS1yb3cgPiBzZWxlY3R7XG5cdGJhY2tncm91bmQtY29sb3I6ICM3ZDdkN2QgIWltcG9ydGFudDtcblx0Y29sb3I6ICNmZmYgIWltcG9ydGFudDtcblx0Ym9yZGVyOiAwICFpbXBvcnRhbnQ7XG59XG5cbi5kZyBsaS5zYXZlLXJvdyA+IHNwYW57XG5cdGJhY2tncm91bmQtY29sb3I6ICMzMDMwMzAgIWltcG9ydGFudDtcblx0Ym94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xuXHR0ZXh0LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xufVxuIgoJXSwKCSJtYXBwaW5ncyI6ICJBQUdBLEFBQUEsSUFBSSxBQUFBLENBQ0gsZ0JBQWdCLENBQUUsSUFBSyxDQUV2QixXQUFXLENBQUUsU0FBVSxDQUN2QixTQUFTLENBQUUsSUFBSyxDQUNoQixBQUVELEFBQUEsT0FBTyxBQUFBLENBQ04sT0FBTyxDQUFFLEtBQU0sQ0FDZixRQUFRLENBQUUsUUFBUyxDQUNuQixLQUFLLENBQUUsS0FBTSxDQUNiLE1BQU0sQ0FBRSxLQUFNLENBQ2QsV0FBVyxDQUFFLElBQUssQ0FDbEIsVUFBVSxDQUFFLDJCQUFHLENBQXlCLE1BQU0sQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUMvRCxlQUFlLENBQUUsR0FBSSxDQUNyQixPQUFPLENBQUUsQ0FBRSxDQUNYLEFBRUQsQUFBTyxPQUFBLEFBQUEsT0FBTyxBQUFBLENBQ2IsZUFBZSxDQUFFLE9BQVEsQ0FDekIsQUFFRCxBQUFBLGFBQWEsQUFBQSxDQUNaLE9BQU8sQ0FBRSxJQUFLLENBQ2QsQUFFRCxBQUFBLE9BQU8sQUFBQSxDQUNOLE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLFFBQVMsQ0FDbEIsS0FBSyxDQUFFLG9CQUFJLENBQ1gsTUFBTSxDQUFFLG9CQUFJLENBRWIsTUFBTSxDQUFFLElBQUssQ0FFYixNQUFNLENBQUUsY0FBZSxDQUN2QixBQUdELEFBQUEsSUFBSSxBQUFBLENBQ0gsT0FBTyxDQUFFLEtBQU0sQ0FDZixRQUFRLENBQUUsUUFBUyxDQUNsQixLQUFLLENBQUUsNkJBQUksQ0FFWixNQUFNLENBQUUsU0FBVSxDQUNsQixPQUFPLENBQUUsSUFBSyxDQUVkLE1BQU0sQ0FBRSxjQUFlLENBTXZCLEFBZEQsQUFVQyxJQVZHLENBVUgsSUFBSSxBQUFBLENBQ0gsT0FBTyxDQUFFLEtBQU0sQ0FDZixBQU1GLEFBQU0sR0FBSCxBQUFBLEVBQUUsQ0FBQyxTQUFTLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxrQkFBbUIsQ0FBSSxBQUUxRCxBQUFrQixHQUFmLENBQUMsRUFBRSxBQUFBLFNBQVMsQ0FBRyxNQUFNLEFBQUEsQ0FDdkIsZ0JBQWdCLENBQUUsa0JBQW1CLENBQ3JDLEtBQUssQ0FBRSxlQUFnQixDQUN2QixNQUFNLENBQUUsWUFBYSxDQUNyQixBQUVELEFBQWtCLEdBQWYsQ0FBQyxFQUFFLEFBQUEsU0FBUyxDQUFHLElBQUksQUFBQSxDQUNyQixnQkFBZ0IsQ0FBRSxrQkFBbUIsQ0FDckMsVUFBVSxDQUFFLGVBQWdCLENBQzVCLFdBQVcsQ0FBRSxlQUFnQixDQUM3QiIsCgkibmFtZXMiOiBbXQp9 */

4
public_html/css/min/layout.css.map
View File

@ -5,8 +5,8 @@
"../layout.scss" "../layout.scss"
], ],
"sourcesContent": [ "sourcesContent": [
"$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n\n\n// ADDED TO DAT.GUI\n.dg.a .save-row{ background-color: #1a1a1a !important; }\n\n.dg li.save-row > select{\n\tbackground-color: #7d7d7d !important;\n\tcolor: #fff !important;\n\tborder: 0 !important;\n}\n\n.dg li.save-row > span{\n\tbackground-color: #303030 !important;\n\tbox-shadow: none !important;\n\ttext-shadow: none !important;\n}\n" "$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n#loader{\n\tdisplay: block;\n\tposition: absolute;\n\twidth: 500px;\n\theight: 500px;\n\tmargin-left: 20px;\n\tbackground: url('../../src/loader.svg') center center no-repeat;\n\tbackground-size: 0 0;\n\tz-index: 1;\n}\n\n#loader.active{\n\tbackground-size: 4em 4em;\n}\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n\n\n// ADDED TO DAT.GUI\n.dg.a .save-row{ background-color: #1a1a1a !important; }\n\n.dg li.save-row > select{\n\tbackground-color: #7d7d7d !important;\n\tcolor: #fff !important;\n\tborder: 0 !important;\n}\n\n.dg li.save-row > span{\n\tbackground-color: #303030 !important;\n\tbox-shadow: none !important;\n\ttext-shadow: none !important;\n}\n"
], ],
"mappings": "AAGA,AAAA,IAAI,AAAA,CACH,gBAAgB,CAAE,IAAK,CAEvB,WAAW,CAAE,SAAU,CACvB,SAAS,CAAE,IAAK,CAChB,AAID,AAAA,aAAa,AAAA,CACZ,OAAO,CAAE,IAAK,CACd,AAED,AAAA,OAAO,AAAA,CACN,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,oBAAI,CACX,MAAM,CAAE,oBAAI,CAEb,MAAM,CAAE,IAAK,CAEb,MAAM,CAAE,cAAe,CACvB,AAGD,AAAA,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,6BAAI,CAEZ,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,IAAK,CAEd,MAAM,CAAE,cAAe,CAMvB,AAdD,AAUC,IAVG,CAUH,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf,AAMF,AAAM,GAAH,AAAA,EAAE,CAAC,SAAS,AAAA,CAAE,gBAAgB,CAAE,kBAAmB,CAAI,AAE1D,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,CAAG,MAAM,AAAA,CACvB,gBAAgB,CAAE,kBAAmB,CACrC,KAAK,CAAE,eAAgB,CACvB,MAAM,CAAE,YAAa,CACrB,AAED,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,CAAG,IAAI,AAAA,CACrB,gBAAgB,CAAE,kBAAmB,CACrC,UAAU,CAAE,eAAgB,CAC5B,WAAW,CAAE,eAAgB,CAC7B", "mappings": "AAGA,AAAA,IAAI,AAAA,CACH,gBAAgB,CAAE,IAAK,CAEvB,WAAW,CAAE,SAAU,CACvB,SAAS,CAAE,IAAK,CAChB,AAED,AAAA,OAAO,AAAA,CACN,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CACnB,KAAK,CAAE,KAAM,CACb,MAAM,CAAE,KAAM,CACd,WAAW,CAAE,IAAK,CAClB,UAAU,CAAE,2BAAG,CAAyB,MAAM,CAAC,MAAM,CAAC,SAAS,CAC/D,eAAe,CAAE,GAAI,CACrB,OAAO,CAAE,CAAE,CACX,AAED,AAAO,OAAA,AAAA,OAAO,AAAA,CACb,eAAe,CAAE,OAAQ,CACzB,AAED,AAAA,aAAa,AAAA,CACZ,OAAO,CAAE,IAAK,CACd,AAED,AAAA,OAAO,AAAA,CACN,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,oBAAI,CACX,MAAM,CAAE,oBAAI,CAEb,MAAM,CAAE,IAAK,CAEb,MAAM,CAAE,cAAe,CACvB,AAGD,AAAA,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,6BAAI,CAEZ,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,IAAK,CAEd,MAAM,CAAE,cAAe,CAMvB,AAdD,AAUC,IAVG,CAUH,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf,AAMF,AAAM,GAAH,AAAA,EAAE,CAAC,SAAS,AAAA,CAAE,gBAAgB,CAAE,kBAAmB,CAAI,AAE1D,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,CAAG,MAAM,AAAA,CACvB,gBAAgB,CAAE,kBAAmB,CACrC,KAAK,CAAE,eAAgB,CACvB,MAAM,CAAE,YAAa,CACrB,AAED,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,CAAG,IAAI,AAAA,CACrB,gBAAgB,CAAE,kBAAmB,CACrC,UAAU,CAAE,eAAgB,CAC5B,WAAW,CAAE,eAAgB,CAC7B",
"names": [] "names": []
} }

5
public_html/index.php
View File

@ -32,7 +32,6 @@
<script type='text/javascript' src='./js/lib/ajax.js' ></script> <!-- Gestion des requetes ajax --> <script type='text/javascript' src='./js/lib/ajax.js' ></script> <!-- Gestion des requetes ajax -->
<script type='text/javascript' src='./js/lib/local.js' ></script> <!-- Lib locale --> <script type='text/javascript' src='./js/lib/local.js' ></script> <!-- Lib locale -->
<script type='text/javascript' src='./js/lib/image-loader.js' ></script> <!-- Gestion du chargement d'image --> <script type='text/javascript' src='./js/lib/image-loader.js' ></script> <!-- Gestion du chargement d'image -->
<script type='text/javascript' src='./js/lib/reactive-filter.js' ></script> <!-- Gestion du des filtres dynamiques -->
<script type='text/javascript' src='./js/lib/permanent-storage.js' ></script> <!-- Gestion du storage permanent (php) --> <script type='text/javascript' src='./js/lib/permanent-storage.js' ></script> <!-- Gestion du storage permanent (php) -->
<!-- dat.GUI --> <!-- dat.GUI -->
@ -51,9 +50,13 @@
<script type='text/javascript' src='./js/tracking.js/build/data/eye-min.js' ></script> <!-- Eye Lib --> <script type='text/javascript' src='./js/tracking.js/build/data/eye-min.js' ></script> <!-- Eye Lib -->
<script type='text/javascript' src='./js/tracking.js/build/data/mouth-min.js' ></script> <!-- Mouth Lib --> <script type='text/javascript' src='./js/tracking.js/build/data/mouth-min.js' ></script> <!-- Mouth Lib -->
<!-- Dependencies (prerequisite of external lib) -->
<script type='text/javascript' src='./js/lib/reactive-filter.js' ></script> <!-- Gestion du des filtres dynamiques -->
</head> </head>
<body> <body>
<div id='loader'></div>
<img id='image-loader'/> <img id='image-loader'/>
<canvas id='canvas'></canvas> <canvas id='canvas'></canvas>

134
public_html/js/action-script.js
View File

@ -17,9 +17,9 @@
/* (1) Elements du DOM */ /* (1) Elements du DOM */
var DOM = { var DOM = {
body: $('body'), body: $('body'),
canvas: $('canvas'), canvas: $('canvas'),
imageLoader: $('#image-loader') imageLoader: $('#image-loader')
}; };
/* (3) Canvas initialisation */ /* (3) Canvas initialisation */
@ -35,15 +35,13 @@
var exec = false; var exec = false;
var last; var last;
var featureTrackerTask; var featureTrackerTask;
var faceTrackerTask;
var trackerCallback; var trackerCallback;
var Controller, var Controller, CFolder = {},
init, init,
zones = {feature: [], face: []}, zones = {feature: []},
track, track,
featureTracker, featureTracker,
faceTracker,
initialized = false; initialized = false;
} }
@ -68,37 +66,30 @@ ControllerRememberer.fetch(function(loaded_data){
initialized = true; initialized = true;
/* (3) Attachment to dat.GUI */ /* (3) Attachment to dat.GUI */
Controller.addFolder('Source Picture'); CFolder.src = Controller.addFolder('Source Picture');
Controller.remember(this); Controller.remember(this);
Controller.add(this, 'src', this._images).listen(); CFolder.src.add(this, 'src', this._images).listen();
}; };
/* (2) Gestion de tracking.js */ /* (2) Gestion de tracking.js */
zones.feature = []; zones.feature = [];
zones.face = [];
/* (3) Gestion du track de l'image */ /* (3) Gestion du track de l'image */
track = { track = {
trackFeatures: function(){ trackFeatures: function(){
LOADER.start();
zones.feature = []; zones.feature = [];
featureTrackerTask = tracking.track(_CAN, featureTracker); featureTrackerTask = tracking.track(_CAN, featureTracker);
}, LOADER.stop();
trackFace: function(){
zones.face = [];
faceTrackerTask = tracking.track(_CAN, faceTracker);
} }
}; };
/* (4) Initializing `Tracking.js` */ /* (4) Initializing `Tracking.js` */
faceTracker = new tracking.ObjectTracker(['face']);
featureTracker = new tracking.ObjectTracker(['eye', 'mouth']); featureTracker = new tracking.ObjectTracker(['eye', 'mouth']);
faceTracker.setInitialScale(1.0);
featureTracker.setInitialScale(1.0); featureTracker.setInitialScale(1.0);
faceTracker.setStepSize(1.2);
featureTracker.setStepSize(1.2); featureTracker.setStepSize(1.2);
faceTracker.setEdgesDensity(0.1);
featureTracker.setEdgesDensity(0.1); featureTracker.setEdgesDensity(0.1);
trackerCallback = function(z, e){ trackerCallback = function(z, e){
@ -124,7 +115,6 @@ ControllerRememberer.fetch(function(loaded_data){
process.apply(DOM.imageLoader); process.apply(DOM.imageLoader);
} }
faceTracker.on('track', function(e){ return trackerCallback.apply(this, ['face', e]); });
featureTracker.on('track', function(e){ return trackerCallback.apply(this, ['feature', e]); }); featureTracker.on('track', function(e){ return trackerCallback.apply(this, ['feature', e]); });
} }
@ -132,18 +122,22 @@ ControllerRememberer.fetch(function(loaded_data){
/* [2] Routine principale /* [2] Routine principale
=========================================================*/ =========================================================*/
LOADER.init();
process = function(){ process = function(){
// Si erreur de `bind()`, on quitte // Si erreur de `bind()`, on quitte
if( !initialized || !(this instanceof HTMLImageElement) ) if( !initialized || !(this instanceof HTMLImageElement) )
return; return;
console.time('PROCESS'); console.time('PROCESS');
LOADER.start();
/* [0.0] Gestion du changement d'image /* [0.0] Gestion du changement d'image
=========================================================*/ =========================================================*/
if( this.src != last ){ if( this.src != last ){
zones.face = []; reactiveFaceTracking.zones = [];
zones.feature = []; zones.feature = [];
exec = false; exec = false;
last = this.src; last = this.src;
} }
@ -193,9 +187,6 @@ ControllerRememberer.fetch(function(loaded_data){
/* (5) Canny Filter */ /* (5) Canny Filter */
filterManager.get('canny').apply(); filterManager.get('canny').apply();
/* (6) Haar Face Detection */
filterManager.get('haar_face').apply();
} }
@ -216,11 +207,11 @@ ControllerRememberer.fetch(function(loaded_data){
_CON.strokeRect(x, y, w, h); _CON.strokeRect(x, y, w, h);
} }
for( i in zones.face ){ for( i in reactiveFaceTracking.zones ){
x = zones.face[i].x * _CAN.width; x = reactiveFaceTracking.zones[i].x * _CAN.width;
y = zones.face[i].y * _CAN.height; y = reactiveFaceTracking.zones[i].y * _CAN.height;
w = zones.face[i].w * _CAN.width; w = reactiveFaceTracking.zones[i].w * _CAN.width;
h = zones.face[i].h * _CAN.height; h = reactiveFaceTracking.zones[i].h * _CAN.height;
_CON.lineWidth = 5; _CON.lineWidth = 5;
_CON.strokeStyle = '#ff0'; _CON.strokeStyle = '#ff0';
@ -236,6 +227,7 @@ ControllerRememberer.fetch(function(loaded_data){
} }
console.timeEnd('PROCESS'); console.timeEnd('PROCESS');
LOADER.stop();
}; };
@ -246,15 +238,17 @@ ControllerRememberer.fetch(function(loaded_data){
filterManager = new ReactiveFilterManager(DOM.imageLoader, _CAN, process); filterManager = new ReactiveFilterManager(DOM.imageLoader, _CAN, process);
/* (2) Ajout des filtres */ /* (2) Ajout des filtres */
filterManager.add('resolution', reactiveResolution); filterManager.add('face_tracking', reactiveFaceTracking);
filterManager.add('contrast', reactiveContrast); filterManager.add('resolution', reactiveResolution);
filterManager.add('grayscale', reactiveGrayscale); filterManager.add('contrast', reactiveContrast);
filterManager.add('sobel', reactiveSobel); filterManager.add('grayscale', reactiveGrayscale);
filterManager.add('gaussian', reactiveGaussianBlur); filterManager.add('sobel', reactiveSobel);
filterManager.add('canny', reactiveCanny); filterManager.add('gaussian', reactiveGaussianBlur);
filterManager.add('haar_face', reactiveHaarFace); filterManager.add('canny', reactiveCanny);
filterManager.add('haar_face', reactiveHaarFace);
/* (3) Gestion des backups */ /* (3) Gestion des backups */
Controller.remember(filterManager.get('face_tracking'));
Controller.remember(filterManager.get('resolution')); Controller.remember(filterManager.get('resolution'));
Controller.remember(filterManager.get('contrast')); Controller.remember(filterManager.get('contrast'));
Controller.remember(filterManager.get('grayscale')); Controller.remember(filterManager.get('grayscale'));
@ -264,35 +258,43 @@ ControllerRememberer.fetch(function(loaded_data){
Controller.remember(filterManager.get('haar_face')); Controller.remember(filterManager.get('haar_face'));
/* (4) On attache tout à dat.GUI */ /* (4) On attache tout à dat.GUI */
Controller.addFolder('Tracking.js'); CFolder.custom = Controller.addFolder('custom');
Controller.add(track, 'trackFace'); CFolder.resolution = CFolder.custom.addFolder('Image Resolution');
Controller.add(track, 'trackFeatures'); CFolder.resolution.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1);
Controller.addFolder('Haar Face Detection'); CFolder.resolution.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);
Controller.add(filterManager.get('haar_face'), 'active'); CFolder.basic = CFolder.custom.addFolder('Basic Image Processing');
Controller.add(filterManager.get('haar_face'), 'min_scale', 1, 4).step(0.1); CFolder.basic.add(filterManager.get('contrast'), 'contrast', 0, 100);
Controller.add(filterManager.get('haar_face'), 'scale_factor', 1.1, 2).step(0.025); CFolder.basic.add(filterManager.get('grayscale'), 'grayscale');
Controller.add(filterManager.get('haar_face'), 'equalize_histogram');
Controller.add(filterManager.get('haar_face'), 'use_canny'); CFolder.tracking = Controller.addFolder('Tracking.js');
Controller.add(filterManager.get('haar_face'), 'edges_density', 0.01, 1.0).step(0.005); CFolder.face_tracking = CFolder.tracking.addFolder('Face tracking');
Controller.addFolder('Image Resolution'); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'apply');
Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'initial_scale', 1, 10).step(0.5);
Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'step_size', 1, 5).step(0.5);
Controller.addFolder('Basic Image Processing'); CFolder.face_tracking.add(filterManager.get('face_tracking'), 'edges_density', 0.1, 0.5).step(0.01);
Controller.add(filterManager.get('contrast'), 'contrast', 0, 100);
Controller.add(filterManager.get('grayscale'), 'grayscale'); CFolder.jsfeat = Controller.addFolder('jsfeat');
Controller.addFolder('Gaussian Blur'); CFolder.haar_face = CFolder.jsfeat.addFolder('Haar Face Detection');
Controller.add(filterManager.get('gaussian'), 'active'); CFolder.haar_face.add(filterManager.get('haar_face'), 'apply');
Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5); CFolder.haar_face.add(filterManager.get('haar_face'), 'min_scale', 1, 4).step(0.1);
Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1); CFolder.haar_face.add(filterManager.get('haar_face'), 'scale_factor', 1.1, 2).step(0.025);
Controller.addFolder('Sobel Filter'); CFolder.haar_face.add(filterManager.get('haar_face'), 'equalize_histogram');
Controller.add(filterManager.get('sobel'), 'sobelActive'); CFolder.haar_face.add(filterManager.get('haar_face'), 'use_canny');
Controller.addFolder('Canny Filter'); CFolder.haar_face.add(filterManager.get('haar_face'), 'edges_density', 0.01, 1.0).step(0.005);
Controller.add(filterManager.get('canny'), 'active'); CFolder.gaussian = CFolder.jsfeat.addFolder('Gaussian Blur');
Controller.add(filterManager.get('canny'), 'radius', 0, 4).step(1); CFolder.gaussian.add(filterManager.get('gaussian'), 'active');
Controller.add(filterManager.get('canny'), 'low_threshold', 1, 127).step(1); CFolder.gaussian.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5);
Controller.add(filterManager.get('canny'), 'high_threshold', 1, 127).step(1); CFolder.gaussian.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1);
Controller.addFolder('Process'); CFolder.sobel = CFolder.jsfeat.addFolder('Sobel Filter');
Controller.add({render: process}, 'render'); CFolder.sobel.add(filterManager.get('sobel'), 'sobelActive');
CFolder.canny = CFolder.jsfeat.addFolder('Canny Filter');
CFolder.canny.add(filterManager.get('canny'), 'active');
CFolder.canny.add(filterManager.get('canny'), 'radius', 0, 4).step(1);
CFolder.canny.add(filterManager.get('canny'), 'low_threshold', 1, 127).step(1);
CFolder.canny.add(filterManager.get('canny'), 'high_threshold', 1, 127).step(1);
CFolder.process = Controller.addFolder('Process');
CFolder.process.add({render: process}, 'render');
/* (5) Gestion du @PermanentStorage */ /* (5) Gestion du @PermanentStorage */

40
public_html/js/lib/min/reactive-filter.js
View File

@ -1,20 +1,22 @@
var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var d in this._attr)this.__defineGetter__(d,function(a){return this._attr[a]}.bind(this,d)),this.__defineSetter__(d,function(a,b){return function(c){a._attr[b]=c;a._manager.process()}}(this,d));this.apply=function(){}},ReactiveFilterManager=function(a,d,e){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (<img>), but "+ var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var e in this._attr)this.__defineGetter__(e,function(a){return this._attr[a]}.bind(this,e)),this.__defineSetter__(e,function(a,c){return function(b){a._attr[c]=b;a._manager.process()}}(this,e));this.apply=function(){}},ReactiveFilterManager=function(a,e,d){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (<img>), but "+
a.constructor.name+" received");this._canvas=d instanceof HTMLCanvasElement?d:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (<canvas>), but "+d.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=e instanceof Function?e:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+e.constructor.name+" received");this._filter={}}; a.constructor.name+" received");this._canvas=e instanceof HTMLCanvasElement?e:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (<canvas>), but "+e.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=d instanceof Function?d:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+d.constructor.name+" received");this._filter={}};
ReactiveFilterManager.prototype.add=function(a,d){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");d=d instanceof ReactiveFilter?d:null;if(!d)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+d.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=d;d._manager=this}; ReactiveFilterManager.prototype.add=function(a,e){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");e=e instanceof ReactiveFilter?e:null;if(!e)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+e.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=e;e._manager=this};
ReactiveFilterManager.prototype.get=function(a){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");return null!=this._filter[a]?this._filter[a]:!1};ReactiveFilterManager.prototype.process=function(){this._process.bind(this._target)()}; ReactiveFilterManager.prototype.get=function(a){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");return null!=this._filter[a]?this._filter[a]:!1};ReactiveFilterManager.prototype.process=function(){this._process.bind(this._target)()};
ConvolutionFilter=function(a,d,e,b){var c,f,g,k,r=parseInt(b.length/2),q=parseInt(b[0].length/2),m=e.slice(0),l,p,n,t,u,v;for(p=r;p<d;p++)for(l=q;l<a;l++){k=g=f=c=0;for(t=-r;t<=r;t++)for(n=-q;n<=q;n++)u=b[r+t][q+n],v=4*((p+t)*a+(l+n)),c+=m[v+0]*u,f+=m[v+1]*u,g+=m[v+2]*u,k+=m[v+3]*u;n=4*(p*a+l);e[n+0]=c;e[n+1]=f;e[n+2]=g;e[n+3]=k}}; ConvolutionFilter=function(a,e,d,c){var b,f,g,k,r=parseInt(c.length/2),q=parseInt(c[0].length/2),m=d.slice(0),l,p,n,t,u,v;for(p=r;p<e;p++)for(l=q;l<a;l++){k=g=f=b=0;for(t=-r;t<=r;t++)for(n=-q;n<=q;n++)u=c[r+t][q+n],v=4*((p+t)*a+(l+n)),b+=m[v+0]*u,f+=m[v+1]*u,g+=m[v+2]*u,k+=m[v+3]*u;n=4*(p*a+l);d[n+0]=b;d[n+1]=f;d[n+2]=g;d[n+3]=k}};
SobelFilter=function(a,d,e){var b=[[-1,0,1],[-2,0,2],[-1,0,1]],c=[[1,2,1],[0,0,0],[-1,-2,-1]],f=parseInt(b.length/2),g=parseInt(b[0].length/2),k=e.slice(0),r,q,m,l,p,n;for(q=f;q<d;q++)for(r=g;r<a;r++){p=0;for(l=-f;l<=f;l++)for(m=-g;m<=g;m++)n=4*((q+l)*a+(r+m)),p+=k[n+0]*(b[f+l][g+m]+c[f+l][g+m])/2;m=q*a+r;p=Math.abs(p);e[m]=(p<<32)+(p<<16)+(p<<8)|4278190080}};var reactiveResolution=new ReactiveFilter({width:1,height:1}); SobelFilter=function(a,e,d){var c=[[-1,0,1],[-2,0,2],[-1,0,1]],b=[[1,2,1],[0,0,0],[-1,-2,-1]],f=parseInt(c.length/2),g=parseInt(c[0].length/2),k=d.slice(0),r,q,m,l,p,n;for(q=f;q<e;q++)for(r=g;r<a;r++){p=0;for(l=-f;l<=f;l++)for(m=-g;m<=g;m++)n=4*((q+l)*a+(r+m)),p+=k[n+0]*(c[f+l][g+m]+b[f+l][g+m])/2;m=q*a+r;p=Math.abs(p);d[m]=(p<<32)+(p<<16)+(p<<8)|4278190080}};var reactiveFaceTracking=new ReactiveFilter({initial_scale:1.9,step_size:.9,edges_density:.1});
reactiveResolution.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,d=this._manager._canvas,e=this._manager._context;d.width=a.width*this.width;d.height=a.height*this.height;e.drawImage(a,0,0,d.width,d.height)}};var reactiveContrast=new ReactiveFilter({contrast:0}); reactiveFaceTracking.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._canvas;void 0===this.zones&&(this.zones=[]);void 0===this.tracker&&(this.tracker=new tracking.ObjectTracker(["face"]),this.tracker.on("track",function(e){this.zones.length=0;e.data.forEach(function(d){this.push({x:d.x/a.width,y:d.y/a.height,w:d.width/a.width,h:d.height/a.height})}.bind(this.zones));LOADER.stop();this.zones?log("Face recognition done","[Tracking.js]"):log("Face recognition failed",
reactiveContrast.apply=function(){if(this._manager instanceof ReactiveFilterManager){for(var a=this._manager._canvas,d=this._manager._context,a=d.getImageData(0,0,a.width,a.height),e=a.data,b=this.contrast;1<b;)b/=100;for(var b=127*(1-b),c=0,f=e.length;c<f;c++)0!=c%3&&(e[c]>=127+b&&(e[c]=255),e[c]<=127-b&&(e[c]=0));d.putImageData(a,0,0)}};var reactiveGrayscale=new ReactiveFilter({grayscale:!1}); "[Tracking.js]");this._manager.process()}.bind(this)));this.tracker.setInitialScale(this.initial_scale);this.tracker.setStepSize(this.step_size);this.tracker.setEdgesDensity(this.edges_density);this.zones=[];LOADER.start();this.task=tracking.track(a,this.tracker)}};var reactiveResolution=new ReactiveFilter({width:1,height:1});
reactiveGrayscale.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.grayscale){for(var a=this._manager._canvas,d=this._manager._context,a=d.getImageData(0,0,a.width,a.height),e=a.data,b=this.contrast;1<b;)b/=100;for(var c=0,f=e.length;c<f;c++)0<c%4||(b=Math.round(.298*e[c]+.586*e[c+1]+.114*e[c+2]),e[c]=e[c+1]=e[c+2]=b);d.putImageData(a,0,0)}};var reactiveSobel=new ReactiveFilter({sobelActive:!1}); reactiveResolution.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,e=this._manager._canvas,d=this._manager._context;e.width=a.width*this.width;e.height=a.height*this.height;d.drawImage(a,0,0,e.width,e.height)}};var reactiveContrast=new ReactiveFilter({contrast:0});
reactiveSobel.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.sobelActive){var a=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C2_t),f=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C1_t),g,k,r,q,m,l,p,n,t;jsfeat.imgproc.grayscale(e.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,3);jsfeat.imgproc.sobel_derivatives(b,c);a= reactiveContrast.apply=function(){if(this._manager instanceof ReactiveFilterManager){for(var a=this._manager._canvas,e=this._manager._context,a=e.getImageData(0,0,a.width,a.height),d=a.data,c=this.contrast;1<c;)c/=100;for(var c=127*(1-c),b=0,f=d.length;b<f;b++)0!=b%3&&(d[b]>=127+c&&(d[b]=255),d[b]<=127-c&&(d[b]=0));e.putImageData(a,0,0)}};var reactiveGrayscale=new ReactiveFilter({grayscale:!1});
b.cols*b.rows;q=m=agx=agy=0;c=c.data;l=f.data;for(p=b.data;0<=--a;)g=c[a<<1],k=c[(a<<1)+1],l[a]=g*g+k*k;for(r=1;r<b.rows-1;++r)for(a=r*b.cols+1|0,f=1;f<b.cols-1;++f,++a)g=c[a<<1],k=c[(a<<1)+1],agx=(g^g>>31)-(g>>31)|0,agy=(k^k>>31)-(k>>31)|0,0<g&&(q=1)||(q=-1),0<k&&(m=b.cols)||(m=-b.cols),agx>agy?(n=l[a+q],t=l[a+q+-m],g=l[a-q],k=l[a-q+m],n=(agx-agy)*n+agy*t,g=(agx-agy)*g+agy*k,k=l[a]*agx,p[a]=k>=n&&k>g?agx&255:0):(n=l[a+-m],t=l[a+q+-m],g=l[a+m],k=l[a-q+m],n=(agy-agx)*n+agx*t,g=(agy-agx)*g+agx*k,k= reactiveGrayscale.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.grayscale){for(var a=this._manager._canvas,e=this._manager._context,a=e.getImageData(0,0,a.width,a.height),d=a.data,c=this.contrast;1<c;)c/=100;for(var b=0,f=d.length;b<f;b++)0<b%4||(c=Math.round(.298*d[b]+.586*d[b+1]+.114*d[b+2]),d[b]=d[b+1]=d[b+2]=c);e.putImageData(a,0,0)}};var reactiveSobel=new ReactiveFilter({sobelActive:!1});
l[a]*agy,p[a]=k>=n&&k>g?agy&255:0);data_u32=new Uint32Array(e.data.buffer);for(a=b.cols*b.rows;0<=--a;)data_u32[a]=-16777216|p[a]<<16|p[a]<<8|p[a];d.putImageData(e,0,0)}};var reactiveGaussianBlur=new ReactiveFilter({active:!1,sigma:0,radius:3}); reactiveSobel.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.sobelActive){var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height),c=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C2_t),f=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C1_t),g,k,r,q,m,l,p,n,t;jsfeat.imgproc.grayscale(d.data,a.width,a.height,c);jsfeat.imgproc.gaussian_blur(c,c,3);jsfeat.imgproc.sobel_derivatives(c,b);a=
reactiveGaussianBlur.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,a.width,a.height);new Uint32Array(e.buffer);var b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(e.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,this.sigma);a=new Uint32Array(e.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c],a[c]=-16777216|f<<16|f<< c.cols*c.rows;q=m=agx=agy=0;b=b.data;l=f.data;for(p=c.data;0<=--a;)g=b[a<<1],k=b[(a<<1)+1],l[a]=g*g+k*k;for(r=1;r<c.rows-1;++r)for(a=r*c.cols+1|0,f=1;f<c.cols-1;++f,++a)g=b[a<<1],k=b[(a<<1)+1],agx=(g^g>>31)-(g>>31)|0,agy=(k^k>>31)-(k>>31)|0,0<g&&(q=1)||(q=-1),0<k&&(m=c.cols)||(m=-c.cols),agx>agy?(n=l[a+q],t=l[a+q+-m],g=l[a-q],k=l[a-q+m],n=(agx-agy)*n+agy*t,g=(agx-agy)*g+agy*k,k=l[a]*agx,p[a]=k>=n&&k>g?agx&255:0):(n=l[a+-m],t=l[a+q+-m],g=l[a+m],k=l[a-q+m],n=(agy-agx)*n+agx*t,g=(agy-agx)*g+agx*k,k=
8|f;d.putImageData(e,0,0)}};var reactiveCanny=new ReactiveFilter({active:!1,low_threshold:1,high_threshold:1,radius:3}); l[a]*agy,p[a]=k>=n&&k>g?agy&255:0);data_u32=new Uint32Array(d.data.buffer);for(a=c.cols*c.rows;0<=--a;)data_u32[a]=-16777216|p[a]<<16|p[a]<<8|p[a];e.putImageData(d,0,0)}};var reactiveGaussianBlur=new ReactiveFilter({active:!1,sigma:0,radius:3});
reactiveCanny.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(e.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,0);jsfeat.imgproc.canny(b,b,this.low_threshold|0,this.high_threshold|0);a=new Uint32Array(e.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c], reactiveGaussianBlur.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height);new Uint32Array(d.buffer);var c=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),b,f;jsfeat.imgproc.grayscale(d.data,a.width,a.height,c);jsfeat.imgproc.gaussian_blur(c,c,(this.radius|0)+1<<1,this.sigma);a=new Uint32Array(d.data.buffer);b=c.cols*c.rows;for(pix=0;0<=--b;)f=c.data[b],a[b]=-16777216|f<<16|f<<
a[c]=-16777216|f<<16|f<<8|f;d.putImageData(e,0,0)}};var reactiveHaarFace=new ReactiveFilter({active:!1,equalize_histogram:!0,use_canny:!1,edges_density:.13,scale_factor:1.15,min_scale:2}); 8|f;e.putImageData(d,0,0)}};var reactiveCanny=new ReactiveFilter({active:!1,low_threshold:1,high_threshold:1,radius:3});
reactiveHaarFace.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c=new function(){var c=Math.min(160/a.width,160/a.height),b=a.width*c|0;h=a.height*c|0;this.timg_u8=new jsfeat.matrix_t(b,h,jsfeat.U8_t|jsfeat.C1_t);this.edg=new jsfeat.matrix_t(b,h,jsfeat.U8_t|jsfeat.C1_t);this.canvas=document.createElement("canvas");this.canvas.width= reactiveCanny.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height),c=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),b,f;jsfeat.imgproc.grayscale(d.data,a.width,a.height,c);jsfeat.imgproc.gaussian_blur(c,c,(this.radius|0)+1<<1,0);jsfeat.imgproc.canny(c,c,this.low_threshold|0,this.high_threshold|0);a=new Uint32Array(d.data.buffer);b=c.cols*c.rows;for(pix=0;0<=--b;)f=c.data[b],
b;this.canvas.height=h;this.context=this.canvas.getContext("2d");this.sum=new Int32Array((b+1)*(h+1));this.sqsum=new Int32Array((b+1)*(h+1));this.tilted=new Int32Array((b+1)*(h+1));this.canny=new Int32Array((b+1)*(h+1));this.classifier=jsfeat.haar.frontalface},f;jsfeat.imgproc.grayscale(e.data,a.width,a.height,b);this.equalize_histogram&&jsfeat.imgproc.equalize_histogram(b,b);jsfeat.imgproc.compute_integral_image(b,c.sum,c.sqsum,c.classifier.tilted?c.tilted:null);this.use_canny&&(jsfeat.imgproc.canny(b, a[b]=-16777216|f<<16|f<<8|f;e.putImageData(d,0,0)}};var reactiveHaarFace=new ReactiveFilter({equalize_histogram:!0,use_canny:!1,edges_density:.13,scale_factor:1.15,min_scale:1.1});
c.edg,10,50),jsfeat.imgproc.compute_integral_image(c.edg,c.canny,null,null));jsfeat.haar.edges_density=this.edges_density;console.time("[Haar] detect_single_scale");c=jsfeat.haar.detect_single_scale(c.sum,c.sqsum,c.tilted,this.use_canny?c.canny:null,b.cols,b.rows,c.classifier,this.scale_factor,this.min_scale);console.warn(c);console.timeEnd("[Haar] detect_single_scale");c=jsfeat.haar.group_rectangles(c,1);console.log("zones",c.length);f=c.length;b=a.width/b.cols;f&&jsfeat.math.qsort(c,0,f-1,function(a, reactiveHaarFace.apply=function(){void 0===this.classifier&&(this.classifier=jsfeat.haar.frontalface);if(this._manager instanceof ReactiveFilterManager){LOADER.start();console.log($("#loader").className);var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height),c=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),b=new function(){var c=Math.min(160/a.width,160/a.height),b=a.width*c|0;h=a.height*c|0;this.timg_u8=new jsfeat.matrix_t(b,h,jsfeat.U8_t|jsfeat.C1_t);this.edg=
b){return b.confidence<a.confidence});0<c.length&&d.strokeRect(c[0].x*b|0,c[0].y*b|0,c[0].width*b|0,c[0].height*b|0);d.putImageData(e,0,0)}}; new jsfeat.matrix_t(b,h,jsfeat.U8_t|jsfeat.C1_t);this.canvas=document.createElement("canvas");this.canvas.width=b;this.canvas.height=h;this.context=this.canvas.getContext("2d");this.sum=new Int32Array((b+1)*(h+1));this.sqsum=new Int32Array((b+1)*(h+1));this.tilted=new Int32Array((b+1)*(h+1));this.canny=new Int32Array((b+1)*(h+1))},f;jsfeat.imgproc.grayscale(d.data,a.width,a.height,c);this.equalize_histogram&&jsfeat.imgproc.equalize_histogram(c,c);jsfeat.imgproc.compute_integral_image(c,b.sum,b.sqsum,
this.classifier.tilted?b.tilted:null);this.use_canny&&(jsfeat.imgproc.canny(c,b.edg,10,50),jsfeat.imgproc.compute_integral_image(b.edg,b.canny,null,null));jsfeat.haar.edges_density=this.edges_density;console.time("[Haar] detect_single_scale");b=jsfeat.haar.detect_multi_scale(b.sum,b.sqsum,b.tilted,this.use_canny?b.canny:null,c.cols,c.rows,this.classifier,this.scale_factor,this.min_scale);b=jsfeat.haar.group_rectangles(b,1);console.timeEnd("[Haar] detect_single_scale");f=b.length;c=a.width/c.cols;
console.warn("zones",b.length);f&&(e.lineWidth=5,e.strokeStyle="rgb(0,255,0)",e.strokeRect(b[0].x*c|0,b[0].y*c|0,b[0].width*c|0,b[0].height*c|0));e.putImageData(d,0,0);LOADER.stop();console.log($("#loader").className)}};

5
public_html/js/lib/min/reset.js
View File

@ -1,2 +1,3 @@
var $=function(a){return document.querySelector(a)},$$=function(a){return document.querySelectorAll(a)};Element.prototype.getData=function(a){return"undefined"==typeof this.dataset?!1:this.dataset.hasOwnProperty(a)?this.dataset[a]:!1};Element.prototype.addClass=function(a){var b=this.className.split(" ");-1<b.indexOf(a)||(b.push(a),this.className=b.join(" ").trim())}; var $=function(a){return document.querySelector(a)},$$=function(a){return document.querySelectorAll(a)};Element.prototype.getData=function(a){return"undefined"==typeof this.dataset?!1:this.dataset.hasOwnProperty(a)?this.dataset[a]:!1};Element.prototype.addClass=function(a){var b=this.className.split(" ");if(-1<b.indexOf(a))return!1;b.push(a);this.className=b.join(" ").trim();return!0};
Element.prototype.remClass=function(a){var b=this.className.split(" ");a=b.indexOf(a);-1!=a&&(b=b.slice(0,a).concat(b.slice(a+1)),this.className=b.join(" ").trim())};NodeList.prototype.indexOf=HTMLCollection.prototype.indexOf=function(a){for(var b=0;b<this.length;b++)if(this[b]==a)return b;return-1};Element.prototype.anim=function(a,b){var c=this;c.addClass(a);setTimeout(function(){c.remClass(a)},b)}; Element.prototype.remClass=function(a){var b=this.className.split(" ");a=b.indexOf(a);if(-1==a)return!1;b=b.slice(0,a).concat(b.slice(a+1));this.className=b.join(" ").trim();return!0};NodeList.prototype.indexOf=HTMLCollection.prototype.indexOf=function(a){for(var b=0;b<this.length;b++)if(this[b]==a)return b;return-1};Element.prototype.anim=function(a,b){var c=this;c.addClass(a);setTimeout(function(){c.remClass(a)},b)};
var LOADER=new function(){var a=null;this.init=function(){a=$("#loader")};this.start=function(){a&&(a.className="active")};this.stop=function(){a&&(a.className="")}};

114
public_html/js/lib/reactive-filter.js
View File

@ -266,6 +266,73 @@ SobelFilter = function(width, height, buff32){
}; };
/************************************************
**** Gestion de Tracking.js ****
************************************************/
var reactiveFaceTracking = new ReactiveFilter({ initial_scale: 1.9, step_size: 0.9, edges_density: 0.1 });
reactiveFaceTracking.apply = function(){
/* [1] Si pas de manager, on exit
=========================================================*/
if( !(this._manager instanceof ReactiveFilterManager) )
return;
/* [2] On effectue notre modification
=========================================================*/
/* (1) Get manager's context */
var o = {
image: this._manager._target,
canvas: this._manager._canvas,
context: this._manager._context
};
/* (2) Manage `zones` attributes if not already done */
if( this['zones'] === undefined )
this.zones = [];
/* (3) Manage `tracker` if not already done */
if( this['tracker'] === undefined ){
this.tracker = new tracking.ObjectTracker(['face']);
// Manage `track` event
this.tracker.on('track', function(e){
this.zones.length = 0;
e.data.forEach(function(rect){
this.push({
x: rect.x / o.canvas.width,
y: rect.y / o.canvas.height,
w: rect.width / o.canvas.width,
h: rect.height / o.canvas.height
});
}.bind(this.zones));
// On enregistre dans `zones.feature` les zones.feature trackées
LOADER.stop();
this.zones ? log('Face recognition done', '[Tracking.js]') : log('Face recognition failed', '[Tracking.js]');
// On met à jour le rendu (affichage des zones.feature)
this._manager.process();
}.bind(this) );
}
/* (4) Set parameters */
this.tracker.setInitialScale(this.initial_scale);
this.tracker.setStepSize(this.step_size);
this.tracker.setEdgesDensity(this.edges_density);
/* (5) Launch track */
this.zones = [];
LOADER.start();
this.task = tracking.track(o.canvas, this.tracker);
};
/************************************************ /************************************************
**** Gestion de la resolution de l'image **** **** Gestion de la resolution de l'image ****
************************************************/ ************************************************/
@ -603,16 +670,20 @@ reactiveCanny.apply = function(){
/************************************************ /************************************************
**** Gestion du Harr Face Detection **** **** Gestion du Harr Face Detection ****
************************************************/ ************************************************/
var reactiveHaarFace = new ReactiveFilter({ active: false, equalize_histogram: true, use_canny: false, edges_density: 0.13, scale_factor: 1.15, min_scale: 2 }); var reactiveHaarFace = new ReactiveFilter({ equalize_histogram: true, use_canny: false, edges_density: 0.13, scale_factor: 1.15, min_scale: 1.1 });
reactiveHaarFace.apply = function(){ reactiveHaarFace.apply = function(){
if( this['classifier'] === undefined )
this.classifier = jsfeat.haar.frontalface;
/* [1] Si pas de manager, on exit /* [1] Si pas de manager, on exit
=========================================================*/ =========================================================*/
if( !(this._manager instanceof ReactiveFilterManager) ) if( !(this._manager instanceof ReactiveFilterManager) )
return; return;
if( !this.active ) LOADER.start();
return; console.log($('#loader').className);
/* [2] On recupère notre back-buffer (8Uint) /* [2] On recupère notre back-buffer (8Uint)
=========================================================*/ =========================================================*/
@ -644,7 +715,6 @@ reactiveHaarFace.apply = function(){
this.sqsum = new Int32Array( (w+1) * (h+1) ); this.sqsum = new Int32Array( (w+1) * (h+1) );
this.tilted = new Int32Array( (w+1) * (h+1) ); this.tilted = new Int32Array( (w+1) * (h+1) );
this.canny = new Int32Array( (w+1) * (h+1) ); this.canny = new Int32Array( (w+1) * (h+1) );
this.classifier = jsfeat.haar.frontalface;
}); });
@ -657,7 +727,7 @@ reactiveHaarFace.apply = function(){
this.equalize_histogram && jsfeat.imgproc.equalize_histogram(img_u8, img_u8); this.equalize_histogram && jsfeat.imgproc.equalize_histogram(img_u8, img_u8);
//jsfeat.imgproc.gaussian_blur(img_u8, img_u8, 3); //jsfeat.imgproc.gaussian_blur(img_u8, img_u8, 3);
jsfeat.imgproc.compute_integral_image(img_u8, work.sum, work.sqsum, work.classifier.tilted ? work.tilted : null); jsfeat.imgproc.compute_integral_image(img_u8, work.sum, work.sqsum, this.classifier.tilted ? work.tilted : null);
if( this.use_canny ){ if( this.use_canny ){
jsfeat.imgproc.canny(img_u8, work.edg, 10, 50); jsfeat.imgproc.canny(img_u8, work.edg, 10, 50);
@ -666,33 +736,39 @@ reactiveHaarFace.apply = function(){
jsfeat.haar.edges_density = this.edges_density; jsfeat.haar.edges_density = this.edges_density;
console.time('[Haar] detect_single_scale'); console.time('[Haar] detect_single_scale');
// FIXME: manage `detect_single_scale` instead of `detect_multi_scale` zones = jsfeat.haar.detect_multi_scale(work.sum, work.sqsum, work.tilted, this.use_canny ? work.canny : null, img_u8.cols, img_u8.rows, this.classifier, this.scale_factor, this.min_scale);
zones = jsfeat.haar.detect_single_scale(work.sum, work.sqsum, work.tilted, this.use_canny ? work.canny : null, img_u8.cols, img_u8.rows, work.classifier, this.scale_factor, this.min_scale);
console.warn(zones);
// zones = jsfeat.haar.detect_multi_scale(work.sum, work.sqsum, work.tilted, this.use_canny ? work.canny : null, img_u8.cols, img_u8.rows, work.classifier, this.scale_factor, this.min_scale);
console.timeEnd('[Haar] detect_single_scale');
zones = jsfeat.haar.group_rectangles(zones, 1); zones = jsfeat.haar.group_rectangles(zones, 1);
console.log('zones', zones.length); console.timeEnd('[Haar] detect_single_scale');
// draw only most confident one // draw only most confident one
on = zones.length; on = zones.length;
sc = o.canvas.width/img_u8.cols; sc = o.canvas.width / img_u8.cols;
/* (x) Sort zones by confidence to have the best at index `0` */ /* (x) Sort zones by confidence to have the best at index `0` */
if( on ) // if( on )
jsfeat.math.qsort(zones, 0, on-1, function(a,b){ return b.confidence < a.confidence; }); // jsfeat.math.qsort(zones, 0, on-1, function(a,b){ return b.confidence < a.confidence; });
/* (x) If at least 1 zone found -> draw it */ /* (x) If at least 1 zone found -> draw it */
if( zones.length > 0 ) console.warn('zones', zones.length);
if( on ){
o.context.lineWidth = 5;
o.context.strokeStyle = "rgb(0,255,0)";
o.context.strokeRect( o.context.strokeRect(
(zones[0].x*sc) | 0, (zones[0].x * sc) | 0,
(zones[0].y*sc) | 0, (zones[0].y * sc) | 0,
(zones[0].width*sc) | 0, (zones[0].width * sc) | 0,
(zones[0].height*sc) | 0 (zones[0].height * sc) | 0
); );
}
/* (2) Copie le résultat sur le `<canvas>` */ /* (2) Copie le résultat sur le `<canvas>` */
o.context.putImageData(imageData, 0, 0); o.context.putImageData(imageData, 0, 0);
LOADER.stop();
console.log($('#loader').className);
}; };

22
public_html/js/lib/reset.js
View File

@ -1,6 +1,6 @@
/* SELECTEUR CSS UNIQUE/MULTIPLE /* SELECTEUR CSS UNIQUE/MULTIPLE
*/ */
var $ = function(selector){ return document.querySelector(selector ); }; var $ = function(selector){ return document.querySelector(selector ); };
var $$ = function(selector){ return document.querySelectorAll(selector); }; var $$ = function(selector){ return document.querySelectorAll(selector); };
@ -22,7 +22,6 @@ Element.prototype.getData = function(attribute){
}; };
/* Ajout de classe pour un element (surcharge de l'ELEMENT natif) /* Ajout de classe pour un element (surcharge de l'ELEMENT natif)
* *
* @className<String> Classe a ajouter a l'element * @className<String> Classe a ajouter a l'element
@ -35,13 +34,15 @@ Element.prototype.addClass = function(className){
/* [2] On ajoute la classe si elle n'y est pas deja /* [2] On ajoute la classe si elle n'y est pas deja
====================================================*/ ====================================================*/
if( classArray.indexOf(className) > -1 ) return; // La classe y est deja if( classArray.indexOf(className) > -1 ) return false; // La classe y est deja
classArray.push(className); classArray.push(className);
/* [3] On reformatte tout /* [3] On reformatte tout
====================================================*/ ====================================================*/
this.className = classArray.join(' ').trim(); this.className = classArray.join(' ').trim();
return true;
}; };
@ -59,13 +60,15 @@ Element.prototype.remClass = function(className){
====================================================*/ ====================================================*/
var index = classArray.indexOf(className); var index = classArray.indexOf(className);
if( index == -1 ) return; // La classe n'y est pas if( index == -1 ) return false; // La classe n'y est pas
classArray = classArray.slice(0,index).concat( classArray.slice(index+1) ); classArray = classArray.slice(0,index).concat( classArray.slice(index+1) );
/* [3] On reformatte tout /* [3] On reformatte tout
====================================================*/ ====================================================*/
this.className = classArray.join(' ').trim(); this.className = classArray.join(' ').trim();
return true;
}; };
@ -80,7 +83,6 @@ NodeList.prototype.indexOf = HTMLCollection.prototype.indexOf = function(searche
}; };
// GESTION DES ANIMATIONS (CLASSE PENDANT TEMPS IMPARTI) // GESTION DES ANIMATIONS (CLASSE PENDANT TEMPS IMPARTI)
Element.prototype.anim = function(className, timeout){ Element.prototype.anim = function(className, timeout){
@ -92,3 +94,13 @@ Element.prototype.anim = function(className, timeout){
setTimeout(function(){ pointer.remClass(className); }, timeout); setTimeout(function(){ pointer.remClass(className); }, timeout);
}; };
var LOADER = new (function(){
var loader = null;
this.init = function(){ loader = $('#loader'); };
this.start = function(){ loader && (loader.className = 'active'); };
this.stop = function(){ loader && (loader.className = ''); };
})();

24
public_html/js/min/action-script.js
View File

@ -1,11 +1,13 @@
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,featureTrackerTask,faceTrackerTask,trackerCallback,Controller,init,zones={feature:[],face:[]},track,featureTracker,faceTracker,initialized=!1,ControllerRememberer=new PermanentStorage; 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,featureTrackerTask,trackerCallback,Controller,CFolder={},init,zones={feature:[]},track,featureTracker,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(){last=this.src="front/male/1.jpg";initialized=!0;Controller.addFolder("Source Picture");Controller.remember(this);Controller.add(this,"src",this._images).listen()};zones.feature=[];zones.face=[];track={trackFeatures:function(){zones.feature=[];featureTrackerTask=tracking.track(_CAN,featureTracker)},trackFace:function(){zones.face=[];faceTrackerTask= ControllerRememberer.fetch(function(f){log("Preset loaded.","[PermanentStorage]");Controller=new dat.GUI({load:JSON.parse(f),preset:"default"});init=function(){last=this.src="front/male/1.jpg";initialized=!0;CFolder.src=Controller.addFolder("Source Picture");Controller.remember(this);CFolder.src.add(this,"src",this._images).listen()};zones.feature=[];track={trackFeatures:function(){LOADER.start();zones.feature=[];featureTrackerTask=tracking.track(_CAN,featureTracker);LOADER.stop()}};featureTracker=
tracking.track(_CAN,faceTracker)}};faceTracker=new tracking.ObjectTracker(["face"]);featureTracker=new tracking.ObjectTracker(["eye","mouth"]);faceTracker.setInitialScale(1);featureTracker.setInitialScale(1);faceTracker.setStepSize(1.2);featureTracker.setStepSize(1.2);faceTracker.setEdgesDensity(.1);featureTracker.setEdgesDensity(.1);trackerCallback=function(a,c){zones[a].length=0;c.data.forEach(function(b){zones[a].push({x:b.x/_CAN.width,y:b.y/_CAN.height,w:b.width/_CAN.width,h:b.height/_CAN.height})}); new tracking.ObjectTracker(["eye","mouth"]);featureTracker.setInitialScale(1);featureTracker.setStepSize(1.2);featureTracker.setEdgesDensity(.1);trackerCallback=function(a,c){zones[a].length=0;c.data.forEach(function(b){zones[a].push({x:b.x/_CAN.width,y:b.y/_CAN.height,w:b.width/_CAN.width,h:b.height/_CAN.height})});0<zones[a].length?log(a+" recognition done","[Tracking.js]"):log(a+" recognition failed","[Tracking.js]");process.apply(DOM.imageLoader)};featureTracker.on("track",function(a){return trackerCallback.apply(this,
0<zones[a].length?log(a+" recognition done","[Tracking.js]"):log(a+" recognition failed","[Tracking.js]");process.apply(DOM.imageLoader)};faceTracker.on("track",function(a){return trackerCallback.apply(this,["face",a])});featureTracker.on("track",function(a){return trackerCallback.apply(this,["feature",a])});process=function(){if(initialized&&this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(zones.face=[],zones.feature=[],exec=!1,last=this.src);exec||(this.defaultWidth=this.width, ["feature",a])});LOADER.init();process=function(){if(initialized&&this instanceof HTMLImageElement){console.time("PROCESS");LOADER.start();this.src!=last&&(reactiveFaceTracking.zones=[],zones.feature=[],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("grayscale").apply();filterManager.get("sobel").apply();
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("grayscale").apply();filterManager.get("sobel").apply();filterManager.get("gaussian").apply();filterManager.get("canny").apply();filterManager.get("haar_face").apply();var a,c,b,d,e;for(a in zones.feature)c=zones.feature[a].x*_CAN.width,b=zones.feature[a].y*_CAN.height,d=zones.feature[a].w* filterManager.get("gaussian").apply();filterManager.get("canny").apply();var a,c,b,d,e;for(a in zones.feature)c=zones.feature[a].x*_CAN.width,b=zones.feature[a].y*_CAN.height,d=zones.feature[a].w*_CAN.width,e=zones.feature[a].h*_CAN.height,_CON.lineWidth=5,_CON.strokeStyle="#f00",_CON.strokeRect(c,b,d,e);for(a in reactiveFaceTracking.zones)c=reactiveFaceTracking.zones[a].x*_CAN.width,b=reactiveFaceTracking.zones[a].y*_CAN.height,d=reactiveFaceTracking.zones[a].w*_CAN.width,e=reactiveFaceTracking.zones[a].h*
_CAN.width,e=zones.feature[a].h*_CAN.height,_CON.lineWidth=5,_CON.strokeStyle="#f00",_CON.strokeRect(c,b,d,e);for(a in zones.face)c=zones.face[a].x*_CAN.width,b=zones.face[a].y*_CAN.height,d=zones.face[a].w*_CAN.width,e=zones.face[a].h*_CAN.height,_CON.lineWidth=5,_CON.strokeStyle="#ff0",_CON.strokeRect(c,b,d,e);console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast); _CAN.height,_CON.lineWidth=5,_CON.strokeStyle="#ff0",_CON.strokeRect(c,b,d,e);console.timeEnd("PROCESS");LOADER.stop()}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("face_tracking",reactiveFaceTracking);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast);filterManager.add("grayscale",reactiveGrayscale);filterManager.add("sobel",reactiveSobel);filterManager.add("gaussian",reactiveGaussianBlur);filterManager.add("canny",
filterManager.add("grayscale",reactiveGrayscale);filterManager.add("sobel",reactiveSobel);filterManager.add("gaussian",reactiveGaussianBlur);filterManager.add("canny",reactiveCanny);filterManager.add("haar_face",reactiveHaarFace);Controller.remember(filterManager.get("resolution"));Controller.remember(filterManager.get("contrast"));Controller.remember(filterManager.get("grayscale"));Controller.remember(filterManager.get("sobel"));Controller.remember(filterManager.get("canny"));Controller.remember(filterManager.get("gaussian")); reactiveCanny);filterManager.add("haar_face",reactiveHaarFace);Controller.remember(filterManager.get("face_tracking"));Controller.remember(filterManager.get("resolution"));Controller.remember(filterManager.get("contrast"));Controller.remember(filterManager.get("grayscale"));Controller.remember(filterManager.get("sobel"));Controller.remember(filterManager.get("canny"));Controller.remember(filterManager.get("gaussian"));Controller.remember(filterManager.get("haar_face"));CFolder.custom=Controller.addFolder("custom");
Controller.remember(filterManager.get("haar_face"));Controller.addFolder("Tracking.js");Controller.add(track,"trackFace");Controller.add(track,"trackFeatures");Controller.addFolder("Haar Face Detection");Controller.add(filterManager.get("haar_face"),"active");Controller.add(filterManager.get("haar_face"),"min_scale",1,4).step(.1);Controller.add(filterManager.get("haar_face"),"scale_factor",1.1,2).step(.025);Controller.add(filterManager.get("haar_face"),"equalize_histogram");Controller.add(filterManager.get("haar_face"), CFolder.resolution=CFolder.custom.addFolder("Image Resolution");CFolder.resolution.add(filterManager.get("resolution"),"width",0,2).step(.1);CFolder.resolution.add(filterManager.get("resolution"),"height",0,2).step(.1);CFolder.basic=CFolder.custom.addFolder("Basic Image Processing");CFolder.basic.add(filterManager.get("contrast"),"contrast",0,100);CFolder.basic.add(filterManager.get("grayscale"),"grayscale");CFolder.tracking=Controller.addFolder("Tracking.js");CFolder.face_tracking=CFolder.tracking.addFolder("Face tracking");
"use_canny");Controller.add(filterManager.get("haar_face"),"edges_density",.01,1).step(.005);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.add(filterManager.get("grayscale"),"grayscale");Controller.addFolder("Gaussian Blur");Controller.add(filterManager.get("gaussian"), CFolder.face_tracking.add(filterManager.get("face_tracking"),"apply");CFolder.face_tracking.add(filterManager.get("face_tracking"),"initial_scale",1,10).step(.5);CFolder.face_tracking.add(filterManager.get("face_tracking"),"step_size",1,5).step(.5);CFolder.face_tracking.add(filterManager.get("face_tracking"),"edges_density",.1,.5).step(.01);CFolder.jsfeat=Controller.addFolder("jsfeat");CFolder.haar_face=CFolder.jsfeat.addFolder("Haar Face Detection");CFolder.haar_face.add(filterManager.get("haar_face"),
"active");Controller.add(filterManager.get("gaussian"),"sigma",0,10).step(.5);Controller.add(filterManager.get("gaussian"),"radius",1,11).step(1);Controller.addFolder("Sobel Filter");Controller.add(filterManager.get("sobel"),"sobelActive");Controller.addFolder("Canny Filter");Controller.add(filterManager.get("canny"),"active");Controller.add(filterManager.get("canny"),"radius",0,4).step(1);Controller.add(filterManager.get("canny"),"low_threshold",1,127).step(1);Controller.add(filterManager.get("canny"), "apply");CFolder.haar_face.add(filterManager.get("haar_face"),"min_scale",1,4).step(.1);CFolder.haar_face.add(filterManager.get("haar_face"),"scale_factor",1.1,2).step(.025);CFolder.haar_face.add(filterManager.get("haar_face"),"equalize_histogram");CFolder.haar_face.add(filterManager.get("haar_face"),"use_canny");CFolder.haar_face.add(filterManager.get("haar_face"),"edges_density",.01,1).step(.005);CFolder.gaussian=CFolder.jsfeat.addFolder("Gaussian Blur");CFolder.gaussian.add(filterManager.get("gaussian"),
"high_threshold",1,127).step(1);Controller.addFolder("Process");Controller.add({render:process},"render");Controller.__save_row.children[2].addEventListener("click",function(){Controller.save();try{var a=JSON.stringify(Controller.getSaveObject());ControllerRememberer.store(a,function(){log("dat.GUI preset stored.","[PermanentStorage]");return!0})}catch(c){log("Corrupted data.","[PermanentStorage]")}},!1);iL=new ImageLoader(DOM.imageLoader,init,process);return!0}); "active");CFolder.gaussian.add(filterManager.get("gaussian"),"sigma",0,10).step(.5);CFolder.gaussian.add(filterManager.get("gaussian"),"radius",1,11).step(1);CFolder.sobel=CFolder.jsfeat.addFolder("Sobel Filter");CFolder.sobel.add(filterManager.get("sobel"),"sobelActive");CFolder.canny=CFolder.jsfeat.addFolder("Canny Filter");CFolder.canny.add(filterManager.get("canny"),"active");CFolder.canny.add(filterManager.get("canny"),"radius",0,4).step(1);CFolder.canny.add(filterManager.get("canny"),"low_threshold",
1,127).step(1);CFolder.canny.add(filterManager.get("canny"),"high_threshold",1,127).step(1);CFolder.process=Controller.addFolder("Process");CFolder.process.add({render:process},"render");Controller.__save_row.children[2].addEventListener("click",function(){Controller.save();try{var a=JSON.stringify(Controller.getSaveObject());ControllerRememberer.store(a,function(){log("dat.GUI preset stored.","[PermanentStorage]");return!0})}catch(c){log("Corrupted data.","[PermanentStorage]")}},!1);iL=new ImageLoader(DOM.imageLoader,
init,process);return!0});

2
public_html/permanent-storage/storage.json
View File

@ -1 +1 @@
{"preset":"default","remembered":{"default":{"0":{"width":0.7000000000000001,"height":0.7000000000000001},"1":{"contrast":0},"2":{"grayscale":false},"3":{"sobelActive":false},"4":{"canny_radius":3},"5":{"sigma":9,"radius":3},"6":{"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":{}},"Process":{"preset":"Default","closed":true,"folders":{}},"Source Picture":{"preset":"Default","closed":true,"folders":{}}}} {"preset":"default","remembered":{"default":{"0":{"initial_scale":1.9,"step_size":1,"edges_density":0.1},"1":{"width":1,"height":1},"2":{"contrast":0},"3":{"grayscale":false},"4":{"sobelActive":false},"5":{"active":false,"radius":3,"low_threshold":1,"high_threshold":1},"6":{"active":false,"sigma":0,"radius":3},"7":{"min_scale":1.1,"scale_factor":1.15,"equalize_histogram":true,"use_canny":false,"edges_density":0.13},"8":{"src":"front/male/3.png"}}},"closed":false,"folders":{"Face Tracking":{"preset":"Default","closed":true,"folders":{}},"Haar Face Detection":{"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":{}},"Sobel Filter":{"preset":"Default","closed":true,"folders":{}},"Canny Filter":{"preset":"Default","closed":true,"folders":{}},"Process":{"preset":"Default","closed":true,"folders":{}},"Source Picture":{"preset":"Default","closed":false,"folders":{}}}}

47
public_html/src/loader.svg Normal file
View File

@ -0,0 +1,47 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<!-- Todo: add easing -->
<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle cx="5" cy="50" r="5">
<animate attributeName="cy"
begin="0s" dur="2.2s"
values="50;5;50;50"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="cx"
begin="0s" dur="2.2s"
values="5;27;49;5"
calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="5" r="5">
<animate attributeName="cy"
begin="0s" dur="2.2s"
from="5" to="5"
values="5;50;50;5"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="cx"
begin="0s" dur="2.2s"
from="27" to="27"
values="27;49;5;27"
calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="49" cy="50" r="5">
<animate attributeName="cy"
begin="0s" dur="2.2s"
values="50;50;5;50"
calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="cx"
from="49" to="49"
begin="0s" dur="2.2s"
values="49;5;27;49"
calcMode="linear"
repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB