config thresh

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,50 +234,57 @@ var extractor = function(partName, ctx, from, k, debug) {
       );
     }),
     function(draw) {
-      getData(partName, function(res) {
+      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({
+          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,
+                img: variant.featured_image && variant.featured_image.src || ( product.images[ 0 ] || {} ).src,
                 sku: variant.option3,
-              hsv: rgbToHsv(r,g,b)
-            });
-          });
-        });
+                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 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 > 5){
-              epsilon = epsilon/3*2;
+              while( matched.length > maxCount ){
+                epsilon = 100-(100-epsilon) / 3 * 2;
 
-              matched = matched.filter(function(i) {
-                return i.d<epsilon;
-              });
-              if(matched.length===0){
-                matched = lastMatched;
+                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;
@@ -288,34 +299,38 @@ var extractor = function(partName, ctx, from, k, debug) {
                 return matched.slice(0, 2);
               }*/
               return matched;
-        })).filter(function(item) {
-          if(!(item.i.vid in used)){
-            used[item.i.vid] = true;
+            } ) ).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)+'%')
+          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>