fifonik / FFMetrics

Visualizes Video Quality Metrics (PSNR, SSIM & VMAF) calculated by ffmpeg.exe
570 stars 22 forks source link

[Enhancement] Not enough colors available #65

Closed fu-hsi closed 3 years ago

fu-hsi commented 3 years ago

I have 10 files in the list and only half available colors on the graph. Most of them are duplicated and hard to read without uncheck some files. If list is limited to 12 files, you can implement 12 basic colors without duplicate them: https://www.canva.com/colors/color-wheel/ ;)

fifonik commented 3 years ago

Not really sure what do you mean under "not enough colors available". There are 12 OxyColor colours defined in program that are used by graphs, here is the list:

            OxyColor.FromRgb(0x4E, 0x9A, 0x06),
            OxyColor.FromRgb(0xC8, 0x8D, 0x00),
            OxyColor.FromRgb(0xCC, 0x00, 0x00),
            OxyColor.FromRgb(0x20, 0x4A, 0x87),
            OxyColors.Red,
            OxyColors.Orange,
            OxyColors.Yellow,
            OxyColors.Green,
            OxyColors.Blue,
            OxyColors.Indigo,
            OxyColors.Violet,
            OxyColors.Black

image

I tried my best to find colours that not too alike. Unfortunately, it is a bit hard to distinguish colours when we are talking about 1.5px lines.

Until I separates graphs from main program windows I can only think of about slightly increasing lines' widths. May be additional option "Line width" with pre-defined values 1, 1,5, 2, 3 could help for someone.

Another possibility is to add file name into graph lines' hints. Currently there is only frame number and metric value there.

P.S. Feel free to provide full list of colours that you think would be better.

fu-hsi commented 3 years ago

Ohh. I checked the hex numbers. They are not the same but on LCD they looks like the same... I propose use square or rectangle 18x9px instead of line (see attachment). If it's simple labels, we can draw on it in C#. Another solution is change background of text color? ffmetrics-colors

fifonik commented 3 years ago

Such changes in legend will not help you to understand lines on graphs :-P

fifonik commented 3 years ago

I've checked what is available in OxyPlot and it is possible to use different line styles + markers on lines. So I will try to add something that help to distinguish one line from another in graph and in legend. Thanks for raising the issue.

fu-hsi commented 3 years ago

Graph is OK, I can uncheck what I want. Problem occurs when we uncheck most of the items, and colors is very close, but how to code this without changing colors each time we check/uncheck something. For now, ignore that issue, I need to think about it :D

fifonik commented 3 years ago

FYI: colours are based on position file on the list (un-ticked files are also taken into account). If you move file -- colour should change.

fu-hsi commented 3 years ago

If yes, then OK. I didn't know it was possible to move files. I am closing the ticket because the problem was originally only related to similar colors. 👍

fifonik commented 3 years ago

I think only 6 colours will be used in total (Red, Green, Blue, Orange, Black, Violet) and lines 1-6 will be solid, 7-12 -- dotted. It will look something like this: image

fu-hsi commented 3 years ago

Yellow hint is a nice feature. I don't have it in 9.9.9.1b. It's sufficient for me ;) Can it appear after hover, instead of click? But dotted lines are also worth considering. I have no opinion.

fifonik commented 3 years ago

I've made changes so it will be displayed on mouse hover. Also, I've adjusted colours as:

           new SerieStyle { Color = OxyColors.ForestGreen   },
            new SerieStyle { Color = OxyColors.Red           },
            new SerieStyle { Color = OxyColors.Blue          },

            new SerieStyle { Color = OxyColors.Orange        },
            new SerieStyle { Color = OxyColors.Magenta       },
            new SerieStyle { Color = OxyColors.DarkTurquoise },

            new SerieStyle { Color = OxyColors.Chocolate     },
            new SerieStyle { Color = OxyColors.DarkViolet    },
            new SerieStyle { Color = OxyColors.DodgerBlue    },
            new SerieStyle { Color = OxyColors.Lime          },

            new SerieStyle { Color = OxyColors.DarkGray      },
            new SerieStyle { Color = OxyColors.Black         },