new features - Githubissues

audioscavenger commented 2 years ago

hi, awesome little plugin, love it, exactly what should be the default in any serious picture managers!

now, i see you are still active on it so can i ask for features and send pull requests?

ability to show the PALETTE_WEIGHTS in admin menu as a grid, so we can see it, re-weight it and decrease its size with a slider. Too many colors, results in many shades of the same color and does not help in searching.
add an info somewhere on how colors are related to each other when we search? how far do you go, is it the next 1, 2 or 3 closest colors? is it by luminance or rgb?
how can we improve the colors weighting? i can never find the obvious, eye catching colors in the pictures using less then 8 color palettes. ideally i would like 4 colors per picture, it's sufficient, but all i get is shades of dark.

aNNiMON commented 2 years ago

Hi, @audioscavenger

Nice idea, but I'd like to keep plugin as easy as posible for users. It would be great to add this setting and hide it by default with the toggle. So, the user need to toggle "Expert mode" or something, to see this weights settings.
The search is based on the RGB distance
It depends on which result you want to get. I think, some post-processing can be applied to the palette in order to get more noticeable colors. But currently I get acceptable result, at least for my images. 🤷

audioscavenger commented 2 years ago

i had to dig into php egain after 1 year, and can answer #2:

function getClosestColor does that, with distance between the $PALETTE_WEIGHTS and each color checked, then only the top $ColorPalette.colors highest values are kept based off their statistical occurence or smth like that so yes it's RGB distance but there is also a statistical occurrence that i need to understand

for #1 i can agree, and that would unlock a slider that will redraw a canvas of the 73 colors in PALETTE_WEIGHTS down to a minimum of 8 or 6. working on that already

i need to define what is a color and what is eye catching. once i understand better what i'm talking about i will get back to you :) thanks for the feedback, do you have a discord or irc of some kind? or can we keep talking here?

audioscavenger commented 2 years ago

i could build a quick palette canvas off of the $PALETTE_WEIGHTS, passing is as an Array with smarty. now as i suspected, lots of colors look alike. below is what i see as the same, ie redundant. can you tell the difference between the colors is marked?? i know i am not color blind lol what i'm trying to understand is you choice for those 73 colors. first, why 73? then, why not using web-safe colors? i plan on simply bringing them down to 16 or 24 thoughts?

audioscavenger commented 2 years ago

oh look no more. how about using the 24 colors from the standard color checker? i have such one. and they are all 99% the same whatever the brand. more info here: https://en.wikipedia.org/wiki/ColorChecker

Also can you please explain the weight system? EDIT: i had to add 6 more colors and replace one of the 24, they actually look dull on screen. they are meant to be printed out and since all we care is the rgb distance, what we want are colors that are clearly different and identifiable on screen :)

aNNiMON commented 2 years ago

@audioscavenger, let me answer your question about weight system first. With the weight system, you can control the frequency of color appearance in the palette. For example, you can set higher values for the bright colors of the palette so that they appear more often. And lower values for gray colors to reduce the number of occurences.

You can try to remove all gray colors with the weight <= 0.80, 0x000000 => 1.00, 0x7f7f7f => 0.90, 0xffffff => 1.00, then set the palette size in extension settings to 8 colors and simply upload grayscale image. As a result, in addition to gray colors, you'll also get some other colors that aren't present in the photo.

Then add some extra colors with the weight of 0.1 or 0.05:

0x000000 => 1.00, 0x7f7f7f => 0.90, 0xffffff => 1.00,
0x151515 => 0.05, 0x3f3f3f => 0.05, 0x6a6a6a => 0.05, 0x959595 => 0.05, 0xbfbfbf => 0.05, 0xeaeaa => 0.05

and regenerate the palette for previous greyscale image. You'll get normal grayscale 8 colors palette.

Regarding reducing the palette size. As you can see, some extra colors with less weight are needed to make the palette accurate. Same, the user wants to generate palette with 8 colors, uploads the picture of blue sky. If PALETTE_WEIGHTS will contain only 24 colors, the user will get an inaccurate palette. So we definitely need more than 50 colors.

This palette was generated mathematically, based on HSV color model. I even found a tool that I wrote to do this https://jsfiddle.net/aNNiMON/o01u3gyf/3/ 😄
Maybe it's possible to build this palette with some algorithm, that takes into account perceptual colors. Do you know such algorithms or color models?

audioscavenger commented 2 years ago

Makes total sense, i noticed unwanted colors not present in the picture too because we force the number to be 8 for instance To keep things simple, how about we redefine paletteColors to be actually a MAX of 8 instead of fixed number? this way you won't get wrong colors if you upload a purge 1 single color picture :) I guess only Palette/php and some inc functions needs to be adjusted, easy enough.

I am by no means expert in colorimetry, but i got a Spyder2 device and a checker board (see https://en.wikipedia.org/wiki/ColorChecker#cite_note-sRGB-7), and played with screen calibration with DisplayCAL-3.8.9.3 The onscreen output I get with the rgb values from the MacBeth checker are not looking good onscreen, as they are meant to be printed out:

I wish mathematics would help here, but unfortunately our perception of colors is based of imperfect eyes with higher number of green cones vs red cones, and we don;t even have blue cones... color charts for piwigo cannot be mathematical, they have to be perceptual. MacBeth is a good starting point i believe, people invented it in the 70's and they are also part of the Pantone universe Perceptual is the option you choose to export in Darktable and LightRoom, it's everywhere

okay 24 colors is not enough, maybe 30-40? i feel like i miss some green and blue in this 30 colors chart, also some fades of white, which will be closer to light gray as demonstrated below: https://tomekdev.com/posts/sorting-colors-in-js

audioscavenger commented 2 years ago

hey i just understood how you get the color palette: you don't resize the pics as i thought, you actually scan the whole pictures by steps! that's why the color palettes generated seems so random to me... i was looking for spots of blue shirt here and there but if the stepping misses them then that explains that. I suppose you did not choose to shrink pictures because of the CPU toll?

I updated Palette.php with $this->resource->resizeImage(10, 0, Imagick::FILTER_POINT, 1); and removed the stepping
monitored the VM with htop (Linode 1 cpu 2GB) and guess what?
resizing the full picture down to 10-20px width does not take that much of cpu!! it even looks faster then your method can you believe it
2000% improvements if you help me count the pixels from the small thumbnails that already exist, instead of resizing the full image

Here are some quick results i would love to discuss moving forward:

The way we count colors impacts the color ordering and detection by leaps.

Now, what i was talking about on my first post by "eye catching colors" and stuff is the green you see on those images: it's less then 5% of the original picture (it's picnic plates) but they are bright green compared to the rest, and i absolutely want to see this green in the top 8 colors of the palette. Not there yet but almost! smallest size of 10x7 = 70 pixels, gives the best results so far :) it over-represent the most luminous/saturated colors, which i want. we can adjust this in the settings once we understand what we are doing lol i would remove the "sample size" slider and change it to perceptual results or smth.

talk to you soon, this project gets more and more exciting

audioscavenger commented 2 years ago

please let me know if you are willing to spend time again on this project, i understand that you moved on with your life and i too had many project like this one that i just abandoned. just about to fork it, there's too many changes i already did on too many files. credits will come to you as always but just to be clear happy thanksgiving!

aNNiMON commented 2 years ago

@audioscavenger hi! Yes, you're right, I use original image to create the palette. It worked well, at least on my servers 3 years ago. The reason for that is to reduce the number of read operatons. To scale down an image you need W*H read operations of the original image, and then (W/N)*(H/N) to create the palette from the scaled image. Also, I had troubles in reading thumbnail image generated by Piwigo. Maybe in latest versions this problem solved, I'll need to check.

audioscavenger commented 2 years ago

spent 12h reading all over the place. found this reference of interest: https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/ and also a uniquely, humanely distinct colors generator: https://mokole.com/palette.html and finally, modifying this one just a bit, you can generate a palette visually appealing (using 900 x 300 x 60 for instance) https://bl.ocks.org/mbostock/1345853

aNNiMON / Piwigo-Color-Palette

new features #12