BlocklyProp
BlocklyProp copied to clipboard
parallaxinc
Color chooser
I'm curious if we can we enhance the color chooser?
The color chooser looks great, but there's some problems I've found when working with RGB LEDs. Those colors work great on-screen (WYSIWYG), but on the RGB LEDs, not so much.
For example, the Red row is fine. The choices from the right (dark) cell to the third-leftmost cell (highlighted in this picture) give a nice even distribution of five color values for the red channel:
- Red: (51,0,0), (102,0,0), (153,0,0), (204,0,0), and (255,0,0)
However, for green and blue rows, there's no option for pure-color saturation from 51 to 255; instead, they end up mixing colors along the way.
- Green: (0,51,0), (0,102,0), (0,153,0), (51,204,0), and (51,255,51)
- Blue: (0,51,51), (51,102,102), (51,153,153), (0,204,204), and (102,204,204) To get a pure saturated green or blue, you have to use another block the enter the value numerically.
I've also noticed that the primary colors are not spaced evenly... Red to Green is 4 rows apart and Green to Blue is 0 rows apart. Is that intentional? Maybe we're trying to provide more pastels?
I wrote a little color grid program years ago and just used it to fashion this similar display (although with a few more hues than what we may want) for comparison. The color rows traverse the primary colors from dark (right) through bright saturation (middle) and then mix toward white (left). The numerical values can pretty easily be captured if this helps in any way.
Of course, not every color combination can be effectively attained on various RGB LEDs, so I don't expect that various off-primary hues will generate a recognizable color from screen to LED.
This is actually REALLY easy to change...I'm happy to use the expanded one you laid out. Any chance you have it in a table with 24-bit hex values handy somewhere?
Got it - totally doable! - and I found some nice code that would help with RGB<->HSL in the process:
JSFiddle example
Nice! Thanks! Looks like you captured the color values from my posted image.
The rightmost column looks all black in this post.
It really does, I think the grey frame tricks our eyes like that. I can try to shift the range a bit...but those dark colors are the most useful ones...
That's right, it does. A lot of color perception has to do with surrounding colors.
Wait... there really is something wrong with that image- either the colors were changed during screenshot, or they were off to begin with because when I inspect their color values comparatively. I'll generate and provide the color values in table form, with the rows arranged as you have them above.
Here's a spreadsheet that shows the RGB color values in hexadecimal in the orientation as shown by the image. The values in the cells are calculated based on a formula similar to what was used to generate the image.
https://docs.google.com/spreadsheets/d/1tnAqNS-SaXPj6fRNrEAOrfLbH_-1zOusgO_aE42CvGc/edit?usp=sharing
Ready to go. Once the branches are ready, I'll move this into Demo.
@MatzElectronics - the CDN repo is now at version 1.1 with is now feeding the Demo server. Go ahead with the PR into the cdn-1.1 branch.
cdn#69: https://github.com/parallaxinc/BlocklyProp-cdn/pull/69/files
Thanks for that update. @PropGit, can you take a look and verify that the changes meet your expectations?