adds code to sort images by main color. see: #18 (comment)

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>

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);
+}