diff --git a/html/main.js b/html/main.js
index 233feaa..0d4fbc9 100644
--- a/html/main.js
+++ b/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`;
+ }
}
}
diff --git a/imgs.ini b/imgs.ini
index 8e05c86..cc13886 100644
--- a/imgs.ini
+++ b/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
diff --git a/tags.ini b/tags.ini
index 997b78f..ae0d5d2 100644
--- a/tags.ini
+++ b/tags.ini
@@ -84,6 +84,9 @@ icon=usd
[selfdrawn]
name=Selfdrawn
icon=usd
+[ych]
+name=Your Character Here
+icon=usd
[winged]