From 0d6b554d8a4745a827143644aabab8ca6d3d0fdc Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 18 Jun 2017 15:27:41 +0100
Subject: [PATCH] adds code to sort images by main color. see:
 https://github.com/dwyl/stars/issues/18#issuecomment-309280763

---
 index.html   |   8 +++-
 lib/faces.js | 108 ++++++++++++++++++++++++++++++++-------------------
 2 files changed, 74 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index df24133..ce33055 100644
--- a/index.html
+++ b/index.html
@@ -22,11 +22,15 @@ <h2 class="content-head is-center">People Learning with dwyl</h2>
       margin: 0;
       padding: 0;
     }
-    .color {
+    .palette {
       width: 100px;
-      height: 100px;
+      height: 450px;
       float: left;
     }
+
+    .color {
+      height: 50px;
+    }
   </style>
 </body>
 </html>
diff --git a/lib/faces.js b/lib/faces.js
index 980ab84..7ae373d 100644
--- a/lib/faces.js
+++ b/lib/faces.js
@@ -17,56 +17,84 @@ window.onload = function() {
   var colorThief = new ColorThief();
   var img_base = '/data/img/'
   var faces = document.getElementById('faces');
+  var people = {};
 
   var url = 'data/username_id_map.json';
   GET(url, function(json) {
-    console.log(Object.keys(json).length);
+    // console.log(Object.keys(json).length);
 
     var k = Object.keys(json)
-    for (var i = 11; i < 21; i++) {
+    for (var i = 0; i < 4000; i++) {
       console.log(i, k[i], json[k[i]]);
       var uid = json[k[i]];
-      // console.log(uid);
-      var src = img_base + uid + '.jpg';
-      append_image(src, uid);
-      // make_image(src);
+      people[uid] = {
+        uid: uid,
+        u: k[i],
+        index: i // used for sorting later
+      }
+      append_image(uid);
     }
+  })
 
-    function append_image(src, id) {
-      var img = new Image();
-      img.onload = function() {
-        console.log("Height: " + this.height);
-        var i = document.getElementById(id)
+  setTimeout(function(){
+    var sorted = Object.keys(people).map(function (p) {
+      return people[p];
+    })
+    .sort(function (p1, p2) {
+      if(!p1 || !p1.hsl) {
+        return p2;
+      }
+      if(!p2 || !p2.hsl) {
+        return p1;
+      }
+      return p2.hsl[0] - p1.hsl[0];
+    })
+    var myNode = document.getElementById("faces");
+    while (myNode.firstChild) {
+      myNode.removeChild(myNode.firstChild);
+    } // https://stackoverflow.com/a/3955238/1148249
+    sorted.forEach(function (p) {
+      append_image(p.uid); // a "Virtual DOM" *could* be useful here...
+    });
+  }, 60000)
+
+  function append_image(uid) {
+    var src = img_base + uid + '.jpg';
+    var img = new Image();
+    img.onload = function() {
+      try{
         var c = colorThief.getColor(img)
-        // document.body.style.backgroundColor = 'rgb(' + c.join(',') + ')';
-        console.log(c);
-        var div = document.createElement('div');
-        div.style.backgroundColor = 'rgb(' + c.join(',') + ')';
-        div.className = 'color';
-        document.getElementById('colors').appendChild(div);
-        // var div = document.createElement('div');
+        people[uid]['rgb'] = c;
+        people[uid].hsl = rgbToHsl(c);
+      } catch (e) {
+        console.log(e);
       }
-      img.src = src;
-      img.setAttribute('height', '100');
-      img.setAttribute('width', '100');
-      img.setAttribute('title', id);
-      faces.appendChild(img);
-      // var elem = document.createElement('img');
-      // elem.setAttribute('src', src);
-      // elem.setAttribute('height', '100');
-      // elem.setAttribute('width', '100');
-      // elem.setAttribute('title', id);
-      // elem.id = id;
-      //
-      // var img = document.getElementById(id)
-      // img.on('load', function() {
-      //   console.log(colorThief.getColor(img));
-      // });
-      //
+      // console.log(people[uid]);
     }
-
-    // Object.keys(json).forEach(function (u) {
-    //   console.log(colorThief.getColor(src))
-    // })
-  })
+    img.src = src;
+    img.setAttribute('height', '30');
+    img.setAttribute('width', '30');
+    img.setAttribute('title', uid);
+    faces.appendChild(img);
+  }
 };
+
+function rgbToHsl(c) { // https://stackoverflow.com/a/11923973/1148249
+  var r = c[0]/255, g = c[1]/255, b = c[2]/255;
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, l = (max + min) / 2;
+
+  if(max == min) {
+    h = s = 0; // achromatic
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch(max){
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
+  }
+  return new Array(h * 360, s * 100, l * 100);
+}