Skip to content

F
face
Commit a403f608 by Иван Кубота
Options

config thresh

parent 6ac370f0
Showing with 151 additions and 86 deletions
examples/examples-browser/public/js/extract-colors.js
......@@ -212,6 +212,7 @@ function rgbToHex(r, g, b) {
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
var binds = [];
var extractor = function(partName, ctx, from, k, debug) {
extracting++;
var colors = extractColors(ctx, from, k, debug)
......@@ -219,8 +220,11 @@ var extractor = function(partName, ctx, from, k, debug) {
return {color: hsvToRgb.apply(null, m.color).map(function(a){return a|0}), hsv: m.color, distance: m.distance};
});
binds.forEach(function(b) {
b();
});
binds = [];
return D.div({cls: 'colors'},
colors.map(function(m){
return D.span({style: 'background:rgb('+m.color.join(',')+');', cls: 'color-preview'},
......@@ -230,92 +234,103 @@ var extractor = function(partName, ctx, from, k, debug) {
);
}),
function(draw) {
getData(partName, function(res) {
var list = [];
res.products.forEach(function(product) {
product.variants.forEach(function(variant) {
var color = variant.option2.substr(1),
r = parseInt(color[0]+color[1], 16),
g = parseInt(color[2]+color[3], 16),
b = parseInt(color[4]+color[4], 16);
list.push({
pid: product.id,
vid: variant.id,
description: product.body_html,
title: product.title,
color: variant.option2,
colorName: variant.option1,
img: variant.featured_image && variant.featured_image.src || (product.images[0] || {}).src,
sku: variant.option3,
hsv: rgbToHsv(r,g,b)
});
});
});
var used = {};
var all = [].concat.apply([],
colors.map(function(clr) {
var epsilon = 0.033;
var matched = list.map(function(i) {
return {i: i, d: hsvDistance(i.hsv, clr.hsv), c: clr};
})
.filter(function(i) {
return i.d<epsilon;
})
.sort(function(a,b) {
return a.d-b.d;
});
var lastMatched = matched;
while(matched.length > 5){
epsilon = epsilon/3*2;
matched = matched.filter(function(i) {
return i.d<epsilon;
});
if(matched.length===0){
matched = lastMatched;
break;
getData(partName, function(res){
var b = store.sub( [ 'threshold', 'maxCount' ], function( threshold, maxCount ){
var list = [];
res.products.forEach( function( product ){
product.variants.forEach( function( variant ){
var color = variant.option2.substr( 1 ),
r = parseInt( color[ 0 ] + color[ 1 ], 16 ),
g = parseInt( color[ 2 ] + color[ 3 ], 16 ),
b = parseInt( color[ 4 ] + color[ 4 ], 16 );
list.push( {
pid: product.id,
vid: variant.id,
description: product.body_html,
title: product.title,
color: variant.option2,
colorName: variant.option1,
img: variant.featured_image && variant.featured_image.src || ( product.images[ 0 ] || {} ).src,
sku: variant.option3,
hsv: rgbToHsv( r, g, b )
} );
} );
} );
var used = {};
var all = [].concat.apply( [],
colors.map( function( clr ){
var epsilon = threshold;
var matched = list.map( function( i ){
return { i: i, d: hsvDistance( i.hsv, clr.hsv ), c: clr };
} )
.filter( function( i ){
return Math.max( 0, Math.min( 100, ( 1 - i.d*3 ) * 100 ) ) >= threshold;
} )
.sort( function( a, b ){
return a.d - b.d;
} );
if(maxCount === 0)
return matched;
var lastMatched = matched;
while( matched.length > maxCount ){
epsilon = 100-(100-epsilon) / 3 * 2;
matched = matched.filter( function( i ){
return Math.max( 0, Math.min( 100, ( 1 - i.d*3 ) * 100 ) ) >= epsilon;
} );
if( matched.length === 0 ){
matched = lastMatched.slice(0,maxCount);
break;
}
lastMatched = matched;
}
lastMatched = matched;
}
/*if(!matched.length>3){
matched = matched.f;
/*if(!matched.length>3){
matched = matched.f;
return matched;
}*/
/*if(matched[0].d<0.02){
return matched.slice( 0, 1 )
}else{
return matched.slice(0, 2);
}*/
return matched;
}*/
/*if(matched[0].d<0.02){
return matched.slice( 0, 1 )
}else{
return matched.slice(0, 2);
}*/
return matched;
})).filter(function(item) {
if(!(item.i.vid in used)){
used[item.i.vid] = true;
return true;
}
return false;
});
var count = all.length;
draw(D.div({cls: 'matched'},
D.span({cls:'action', onClick: function() {
this.parentNode.classList.toggle('opened');
}}, 'Matched: '+count+' '+(count===1?'item':'items')),
D.div({cls: 'collapsed'},
all.map(function(item) {
return D.div({cls: 'row'},
D.div({cls: 'cp1', style: {background: 'rgb('+item.c.color+')'}}),
D.div({cls: 'cp2', style: {background: item.i.color}}),
D.h('img', {cls: 'preview-img', src: item.i.img}),
D.div({cls: 'name'}, item.i.title),
D.div({cls: 'accuracy'}, (Math.max(0,Math.min(100,(1-item.d*8)*100))).toFixed(2)+'%')
)
})
)
));
} ) ).filter( function( item ){
if( !( item.i.vid in used ) ){
used[ item.i.vid ] = true;
return true;
}
return false;
} );
var count = all.length;
draw( D.div( { cls: 'matched opened' },
D.span( {
cls: 'action', onClick: function(){
this.parentNode.classList.toggle( 'opened' );
}
}, 'Matched: ' + count + ' ' + ( count === 1 ? 'item' : 'items' ) ),
D.div( { cls: 'collapsed' },
all.map( function( item ){
return D.div( { cls: 'row' },
D.div( { cls: 'cp1', style: { background: 'rgb(' + item.c.color + ')' } } ),
D.div( { cls: 'cp2', style: { background: item.i.color } } ),
D.h( 'img', { cls: 'preview-img', src: item.i.img } ),
D.div( { cls: 'name' }, item.i.title ),
D.div( { cls: 'accuracy' }, ( Math.max( 0, Math.min( 100, ( 1 - item.d * 3 ) * 100 ) ) ).toFixed( 2 ) + '%' )
)
} )
)
) );
} );
console.log(b)
binds.push(b);
});
......
examples/examples-browser/views/demo.html
......@@ -10,7 +10,26 @@
<script src="js/facemarks.js"></script>
<script src="js/extract-colors.js"></script>
<script src="js/data.js"></script>
<script src="js/Observer.js"></script>
<script src="js/Store.js"></script>
<style>
#settings {
position: absolute;
top: 16px;
right: 128px;
}
label {
display: block;
height:32px;
}
input.field__input {
position: absolute;
left: 96px;
width: 4em;
border: 0;
border-bottom: 1px solid #999;
text-align: center;
}
.color-preview {
display: inline-block;
font-family: monospace;
......@@ -81,6 +100,11 @@
vertical-align: super;
margin: 0 16px;
}
.block {
display: inline-block;
width: 46%;
vertical-align: top;
}
</style>
<script src="js/DOM.js"></script>
......@@ -89,9 +113,10 @@
<video onloadedmetadata="" id="inputVideo" style="opacity: 0;height:480px" autoplay muted playsinline></video>
<div id="settings"></div>
<canvas id="playback" style="position: absolute;left:0"></canvas>
<canvas id="overlay" style="position: absolute;left:0"></canvas>
<canvas id="ccolors" style="position: absolute;left:700px" width="100" height="480"></canvas>
<canvas id="ccolors" style="position: absolute;left:550px" width="100" height="480"></canvas>
<div id="colors"></div>
<div>
......@@ -102,7 +127,10 @@
<input type="file" id="input"/>
</div>
<script>
var store = new Store({
threshold: 60,
maxCount: 5
});
......@@ -427,6 +455,28 @@ var videoEl = inputVideo;
f()
}
f0();
var Input = function(cfg){
var dom = D.h('input', {cls:"field__input", attr: {type: 'number'}});
if(cfg.bind){
cfg.bind.sub(function (val) {
dom.value = val;
});
dom.addEventListener('input', function () {
cfg.bind.set(dom.value);
})
}
return dom;
};
D.div({cls: 'settings', renderTo: document.getElementById('settings')},
D.h('label', {},
'Max count: ', D.h(Input, {bind: store.bind('maxCount')})
),
D.h('label', {},
'Threshold: ', D.h(Input, {bind: store.bind('threshold')})
)
);
</script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment