update

html/main.js

@@ -101,7 +101,6 @@ function filterArtist(artist){
     for(var key in images){
         image = images[key];
         var hideable_row = document.getElementById('row_'+key);
-        console.log(hideable_row, 'row_'+key)
         if(image.artist == artist){
             document.getElementById('list-'+key).classList.remove('nodisplay');
             if(hideable_row!==null) hideable_row.classList.remove('nodisplay');
@@ -154,11 +153,12 @@ function resetAppState(skipScroll){
 var clearFilters = ()=>{resetAppState(); window.history.back();};
 var closeGallery = ()=>{resetAppState(true); closingGallery=true; window.history.back();};
 
-var parseHexColor = x=>/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/.exec(x).slice(1).map(i=>parseInt(i, 16));
-var toHexColor = l=>'#'+(l.map(i=>('0'+i.toString(16)).slice(-2)));
+var parseHexColor = x=>(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/).exec(x).slice(1).map(i=>parseInt(i, 16));
+var toHexColor = l=>'#'+(l.map(i=>('0'+Math.round(i).toString(16)).slice(-2)).join('')).toUpperCase();
 var zip = (...rows) => [...rows[0]].map((_,c) => rows.map(row => row[c]));
 var euclideanDistance2 = (a1, a2) => zip(a1, a2).map(x=>x[0]-x[1]).map(x=>x*x).reduce((a,v)=>a+v, 0);
 var euclideanDistance = (a1, a2) => Math.sqrt(euclideanDistance2(a1, a2));
+var avg = (...values) => [...values].reduce((acc, val) => acc+val)/values.length
 
 function inflateFontAwesome(icon){
     var fa = document.createElement('i');
@@ -179,6 +179,34 @@ function colorSimilarity(color1, color2){
     return 1-(euclideanDistance(c1, c2)/Math.sqrt(3));
 }
 
+function colorAverage(...colors){
+    if(colors.length==0)
+    return null
+    else
+        return toHexColor(
+            zip(
+                ...colors.map(parseHexColor)
+            ).map(ch=>avg(...ch))
+        );
+}
+
+function determineLightOrDark(color){  // True: light, False: dark
+    // https://en.wikipedia.org/wiki/Grayscale#Luma_coding_in_video_systems
+    y = [0.2126, 0.7152, 0.0722];
+    c = parseHexColor(color);
+    hsp = Math.sqrt(
+        zip(
+            y,
+            c.map(x=>x*x)
+        ).map(
+            v => v[0]*v[1]
+        ).reduce(
+            (a,v)=>a+v
+        )
+    );
+    return hsp > 127
+}
+
 function updateColorPaletteAverage(){
     var fields = Array.from(document.querySelectorAll('#row_avg td'));
     for(var fld of fields){
@@ -188,9 +216,33 @@ function updateColorPaletteAverage(){
         while(fld.firstChild) fld.firstChild.remove();
     }
     var relevantColors = new Object();
-    for(var idx in images){
-        var image = images[idx];
-
+    for(var color of color_list){
+        if(relevantColors[color]===undefined)
+            relevantColors[color] = new Array();
+        for(var idx in images){
+            var hideable_row = document.getElementById('row_'+idx);
+            var image = images[idx];
+            var colorUsed = ((image.color || {})[color] || {}).colorUsed;
+            if(colorUsed!==null && colorUsed!==undefined && !hideable_row.classList.contains('nodisplay')){
+                relevantColors[color].push(colorUsed);
+            }
+        }
+    }
+    for(var idx in relevantColors){
+        var colorsShown = relevantColors[idx];
+        var cell = document.querySelector('#row_avg td.clr_'+idx);
+        var canonical = canonical_colors[idx].color;
+        var avgColor = colorAverage(...colorsShown);
+        if(avgColor!==null){
+            cell.style.background = avgColor;
+            var isLight = determineLightOrDark(avgColor);
+            var similarity = round(colorSimilarity(avgColor, canonical)*100, 2);
+            cell.classList.add(isLight ? 'blackText' : 'whiteText');
+            cell.appendChild(document.createTextNode(avgColor));
+            cell.appendChild(document.createElement('br'));
+            cell.appendChild(document.createTextNode(`(${similarity}%)`));
+            cell.title = `${similarity}% similar to the ideal value`;
+        }
     }
 }
 

imgs.ini

@@ -231,14 +231,14 @@ color.horns@sclera=#f5f3c2
 [image_2019-03-17_22-15-10.png]
 partof=image_2019-04-11_22-59-43.png
 name=solo
-tags=charactermashup,wallpaper,commission,solo,winged,tail,outdated,angry
+tags=charactermashup,wallpaper,ych,solo,winged,tail,outdated,angry
 date=2019-03-17
 
 [image_2019-04-11_22-59-43.png]
 name=Avenger''s Special Composition
 artist=Lobodongo
 date=2019-04-14
-tags=charactermashup,wallpaper,commission,group,winged,tail,outdated,angry
+tags=charactermashup,wallpaper,ych,group,winged,tail,outdated,angry
 technology=digital
 color.body=#6aa73d
 color.belly=#c7db5e

tags.ini

@@ -84,6 +84,9 @@ icon=usd
 [selfdrawn]
 name=Selfdrawn
 icon=usd
+[ych]
+name=Your Character Here
+icon=usd
 
 
 [winged]