Issue #423 Solved -> Dynamically generating colors of all the lables…

[aashu0148]

… in /zindex plugin are now maintain their legibility contrast and are easily visible

[google-cla[bot]]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

:memo: Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[aashu0148]

@googlebot I signed it!

[argyleink]

it is significantly improved! great work 👍

there are still 1/15 or so that fail, any thoughts on why or if you could tweak it to be even more conservative?

maybe switch to hsl to rotate the hue for randomization? or create a "safe palette" of like 50 colors and randomly pick one?

[aashu0148]

it is significantly improved! great work 👍

there are still 1/15 or so that fail, any thoughts on why or if you could tweak it to be even more conservative?

maybe switch to hsl to rotate the hue for randomization? or create a "safe palette" of like 50 colors and randomly pick one?

okay @argyleink I'll modify the colors to be more darker.

[aashu0148]

hey @argyleink please review it. Now I have made all the colors little bit darker.

[argyleink]

Gave it a nice look and review today!

I was able to find labels quickly that didn't pass the contrast ratio scores.. I tried tweaking your numbers in the code here and there to see if a healthy value showed up, but it felt like it was ruining the value of the different colors, like they were merging towards middle ranges.

I think we need to stop "randomly" making colors, hoping they pass. Here's 2 ideas forward:

1. create ~25 colors we think provide enough differentiation and will contrast well with white, then pick randomly from that set.
2. import the tiny color library that visbug uses to modify and inspect colors. use this library to create random colors and test them for passing ratios. run this in a loop so it always returns a random, valid contrast passing label background color.

1 is simpler and static. 2 would be trickier but more dynamic. thoughts?

[aashu0148]

Gave it a nice look and review today!

I was able to find labels quickly that didn't pass the contrast ratio scores.. I tried tweaking your numbers in the code here and there to see if a healthy value showed up, but it felt like it was ruining the value of the different colors, like they were merging towards middle ranges.

I think we need to stop "randomly" making colors, hoping they pass. Here's 2 ideas forward:

1. create ~25 colors we think provide enough differentiation and will contrast well with white, then pick randomly from that set.
2. import the tiny color library that visbug uses to modify and inspect colors. use this library to create random colors and test them for passing ratios. run this in a loop so it always returns a random, valid contrast passing label background color.

1 is simpler and static. 2 would be trickier but more dynamic. thoughts?

okay @argyleink I will try both ways and update you with suitable one.

[aashu0148]

hey @argyleink where do i find tiny color library ??

[aashu0148]

Gave it a nice look and review today!

I was able to find labels quickly that didn't pass the contrast ratio scores.. I tried tweaking your numbers in the code here and there to see if a healthy value showed up, but it felt like it was ruining the value of the different colors, like they were merging towards middle ranges.

I think we need to stop "randomly" making colors, hoping they pass. Here's 2 ideas forward:

1. create ~25 colors we think provide enough differentiation and will contrast well with white, then pick randomly from that set.
2. import the tiny color library that visbug uses to modify and inspect colors. use this library to create random colors and test them for passing ratios. run this in a loop so it always returns a random, valid contrast passing label background color.

1 is simpler and static. 2 would be trickier but more dynamic. thoughts?

hey @argyleink I have applied method 1 to it. Added a array of 25 colors and then randomly choosing a color from it. Please check this :)

[argyleink]

fixes #423

[argyleink]

nice work, thank you @aashu0148 💯

[aashu0148]

nice work, thank you @aashu0148 💯

Please tell me if anything more to do.... I will love to contribute to visbug😊

[argyleink]

Here's a list of good first issues if you're looking for low hanging fruit!

There's also this one which could be nice and swift to work on https://github.com/GoogleChromeLabs/ProjectVisBug/issues/389, which the code is pretty straight forward but testing it may be difficult if you dont have windows/linux readily available.

There's also room for writing more tests. So if you're interested in unit or e2e tests, you could write some of those for practice/learning/helping.

🙂