Better support for hotcue colors on controllers

[ferranlala]

Remove Teal color: It was a darkish color that I felt It didn't work very well on a controller.
Replace Gray with white: Same as above. White makes more sense.
Change default color representations: I've changed the default rgba of the predefined colors to their pure primary or secondary shade. It's the most opinionated shade of the color and so the one that should be the default. I think it's also the most useful for a controller script in case it needs to be manipulated.
If this new defaults are not suitable for display on a screen we should address this by setting custom skin colors.

TODO

• Tune colors
• Add palette svg template

[ferranlala]

@daschuer @Swiftb0y

[Swiftb0y]

I feel a bit limited by only having 8 colors. Can we add all the pure tertiary colors + white? Similar to the outer ring of this

[daschuer]

I think, now we have an issue if we consider to get matching colours on two different devices and on the GUI. I expect the RGB LEDs used in controllers quite bad. So if we pass the pure colore 1 by 1, the result defers without the chance for the other device to pick a matching colour, just because it is outside of its own RGB triangle.

[daschuer]

So I think it is time to define the absolute values of our colours in a xyL model.
The reference colour school be bit to much saturated in a way that even a weak a Weak RGB led is able to reproduce it.

This can be done by defining a standard PC monitor as reference. I expect that an that monitor is able to reproduce s colour way better than a RGB button in the controller.

The change here to the fully saturated colours create the situation that we define a colour that is only repridycable on some devices, because it is on the outline of the colour triangle.

[daschuer]

https://www.eizo.be/knowledge/monitor-expertise/understanding-color-gamut/

So let's say we go for sRGB, we must not pick a colour on the sRGB triangle birders, because it is most likely not repridycable on cheap RGB LEDs.

[daschuer]

If you for instance pass 255,255,255 to the controller button, you will getba white value value that might be yellowish or bluish, dependent on the hardware.
If we want to have the same white on all devices, we need to pick a sRGB value of let's say 240 240 240. This hopeful offers enough headrym to adust a bueish white to the blue white we desire

[Swiftb0y]

But the color gamut of a controllers RGB LEDs can differ vastly. I think there will always be differences. Many controllers also don't support every color (even though they have RGB Leds, you can only let the controller display colors from a built-in palette who's color would get picked via the midi velocity). Serato gets around this by making sure compatible/certified controllers support all available hotcue-colors guaranteed. We would either have to adapt Serato's colors to support most controllers or let the mapper specify a conversion table (I'm in favor of the latter).

you will getba white value value that might be yellowish or bluish, dependent on the hardware.

If Serato makes sure the colors on the screen and the colors on the controller match, they would probably make sure that controllers also produce visually accurate colors.

If you for instance pass 255,255,255 to the controller button,

Something I noticed while working on #2030: You can only send 7-bit values via SysEx messages. So it would make sense to rshift the color components by one while creating the js color object.

[Be-ing]

But the color gamut of a controllers RGB LEDs can differ vastly. I think there will always be differences.

Yes, I think trying to get LEDs on different controllers to look exactly the same is futile.

[Swiftb0y]

IMO, its sufficient if the mapper just makes sure the hue of the color on his screen matches the hue of the color on his controller. And if the color is a bit dimmer, so be it. Pretty much nobody has a calibrated display anyways, so they will never really match exactly and I don't think you could exactly spot the difference by eye either (provided the mapper was rigorous enough while creating the conversion table).

[daschuer]

Yes, I think trying to get LEDs on different controllers to look exactly the same is futile.

I agree in general, but I also think we must not make it impossible if one likes to do it.
I think almost all screens are much better "calibrated" than any RGB led. So we might consider to add a color calibration mode that shows the desired in a resizable window.
The most subtitle difference will be a gamma 2.2 vs a linear PWM value of the LEDs.

I had just a look to the

• ASMB-TTF0-0A20B3735 Tricolor PLCC-6 LED
  It is a cheap ~0.1 € LED
  https://www.mouser.de/datasheet/2/678/SMB-TTF0-0A20B-DS101_2017-10-23-1314452.pdf
  The green LED for instance has sRGB of -143, 326, 94, far outside of the sRGB range.

[daschuer]

So is sRGB actually a minimum compatible color sub set? Dos anyone know some insights?

[ferranlala]

We don’t need acurate colors. Colors are just a way to categorize hotcues. As long as the user understands that a hotcue is red, it doesn’t matter if the red we display on screen is not the same red that their controller can render. It’s the responsibility of the controller mapping to drive its leds to achieve a color that the user can identify as red, even though it’s a different red than the one we display on screen. Controllers have cheap and uncalibrated rgb leds. Our color set needs to be small enough so users can identify each color without mixing them up. I’m afraid adding the ternary colors is not helping in this aspect. Maybe we can add some extra color, like we did with pink, but let’s be extra careful.

…

On Sat, 16 Feb 2019 at 19:31, Daniel Schürmann ***@***.***> wrote: So is sRGB actually a minimum compatible color sub set? Dos anyone know some insights? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2031 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGIcTxvR2RHrO81P4SBUDnMka0-CKJFUks5vOE5lgaJpZM4a-oip> .

[daschuer]

I have diggd through some LED datasheets and it turns out that almost all LEDs cover the full sRGB triangle. This means we can choose any sRGB colour and we can expect that the controller is able to display it.

However, we have to give some hints how to reproduce the color the best on the controller. Just pass the RGB fractional as midi message to the controller work for the first instance, but it most likely will not reproduce the desired color shown on the monitor.

This means each mapping need to pick own RGB midi values for each colors. We should put a reference picture to the mapping guide that can be used to show it on the monitor and adjust the controller colors to it. If we make this process easy, hopefully we achieve a good result even if we combine two devices in a single setup. Even if it is a poor monitor it should close enough to the sRGB colour space, the reference for photos on the web.

What do you think?

[daschuer]

Is it OK, that the controller color buttons have different lightness, violet button is darker than a yellow one.

[ferranlala]

I find this article to be very useful: https://programmingdesignsystems.com/color/color-models-and-color-spaces/index.html

What we send to the controllers is the RGB values without specifying any color space. I think it's safe to just assume that the color space to use is sRGB because:

• Both controller leds and computer screens work well with the sRGB space
• sRGB is the default space in other software when no space is specified

So I think we only need to:

• Document that the RGB values are in sRGB color space
• Document best practices on how to treat color on controllers, covering different situations such as a controller with a limited amount of predefined colors (like the MidiFighter).
• Make sure that sRGB is used when rendering the RGB values on the screen.

Since we won't offer alternative color space now, we don't need to code anything to explicitly say that we are using sRGB.

Does it work for you?

Thanks for the discussion guys, it's been instructive :)

[ferranlala]

Second part is also very interesting:https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html#perceptually-uniform-color-spaces-e7zMSWy

[Swiftb0y]

Document best practices on how to treat color on controllers, covering different situations such as a controller with a limited amount of predefined colors (like the MidiFighter).

Would my current proposal in #2030 work for that?

[ferranlala]

Document best practices on how to treat color on controllers, covering different situations such as a controller with a limited amount of predefined colors (like the MidiFighter).

Would my current proposal in #2030 work for that?

Yes!

[daschuer]

What we send to the controllers is the RGB values without specifying any color space. I think it's safe to just assume that the color space to use is sRGB because ...

If this is really the case, it would be nice. However I wouldn't be surprised if we find devices where the 127 midi rang is linear mapped to a PWM ratio.

I just had a look to DMX color flood lights, the high price range has a calibrated mode and a full saturated mode.

[dszakallas]

Will this make the sampler pads customizable too?

[daschuer]

[daschuer]

This is the compassion of the proposed colors first row, the Serato colors, and the https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/

In the first row (this PR), green yellow and white are almost dazzling. Serato uses the hue colors of equal lightness which are not distinguishable for color blind people.
Looking at this I like the lower row the most. I would probably adjust red a bit darker though, towards the serato red.

[daschuer]

Does this black background picture suite as a controller model?

[ferranlala]

I've reverted the defaultRGBA of the colors.

I'm a little bit lost on the conversation. What else is left to do?

[daschuer]

[ferranlala]

I like this last one. But maybe I prefer the old pink

[daschuer]

According to Wikipedia they are two different colors

Yes Turquoise is more greenish, but that matters only if you have both side by side.

[ferranlala]

But maybe I prefer the old pink

Or a mix between the new one and the old one would probably work too.

[Swiftb0y]

I think this new purple is too dark for led lights.

I agree, my controller can't even reproduce dark purple (only light purple, which is very vibrant and can is easily distinguishable from the pure blue; pictures will follow tomorrow). So I think as long as we can create enough contrast in the UI, we should keep purple as pretty much any controller is able to display it (in some variation).

[daschuer]

according to Wikipedia we have a "sky blue"

[daschuer]

Final Draft:

red #c50a08ff
yellow #f8d200
green #32be44
sky blue #42d4f4
blue #0044ff
purple #af00cc
pink #fca6d7
white #c9c9ff

[ferranlala]

A(lmost)LGTM

I would just make white a little less bluish. What about:

white #F2F2FF

[daschuer]

Ok, I don't really mind.
My original idea was to make it a non dazzling xenon white. But it is anyway up to the controller mapper.

[daschuer]

red #c50a08
yellow #f8d200
green #32be44
sky blue #42d4f4
blue #0044ff
purple #af00cc
pink #fca6d7
white #f2f2ff

[ferranlala]

Shall we rename SkyBlue to Cyan? Right now is the only color with two words name. On the skin xml files, you specify the color with , so it would be . I think it's easier.

What do you think?

I don't have strong feelings for this so please feel free to keep SkyBlue.

[daschuer]

In German the term cyan is only used for printer ink. So I prefer at least not to expose it to the user.
Sky blue is also "Celeste". Google has many hits but just because a video game has the same name.
https://en.wikipedia.org/wiki/Sky_blue

[ferranlala]

I like Celeste. I'll make the changes ASAP

[daschuer]

https://en.wikipedia.org/wiki/Celeste:
"Celeste (color), a turquoise-blue commonly called sky blue in English"

[Swiftb0y]

red #c50a08
yellow #f8d200
green #32be44
sky blue #42d4f4
blue #0044ff
purple #af00cc
pink #fca6d7
white #f2f2ff

If that is gonna be the final graphic, can we change the Colors IDs sequence to line up with the graphic (like that yellow has ID 2 instead of 4), or are they fixed?

Yes I think that is the best solution. I can post some pictures of the lights on the controller tomorrow.

I was too busy yesterday, here are the pictures. I just took the with my phone camera so the exposure and the color balance are not quite right. The Bottom lights are from my NS6II and can only be set via MIDI (predefined palette). The top lights are from my launchpad mk2 and are set via SysEx to represent the proposed color palette as accurate as possible, so each color has a resolution of 18-bit (6-bit per channel).

Dark room:

Lit room:

[daschuer]

Are you satisfied withe the real results? Judged from the probably shifted photos by your camera and my monitor, the mk2 looks quite good. Pink and Red looks a bit off on the NS6II. I did not find a reference palette of it. Do you have a link to it?

[Swiftb0y]

I love Numark for their good price to performance ratio and their build quality but they keep everything apart from the basic manual closed source. So I just tried out all colors by hand and tried to categorize them roughly. So unfortunately there is no reference palette available. The Pink on the NS6II looks IRL more like #ff7f4c and the red is pure red #FF0000. So you can differentiate them in person, just not on in the picture.
Something I also have to add is that the colors on the MK2 are not as bright and vibrant as they could be (as I used the proposed hex values instead of more appropriate pure controller colors; eg #c50a08 instead of #ff0000).

[daschuer]

OK, I did not expect that you pass the RGB codes 1:1. It was intended that the mapper can pick the best color that mandatory matches the color name and may match the color palette above, to achieve a good usability and looking. So If you like brighter Buttons on the MK2, go ahead.

[Swiftb0y]

Ok this is a daylight picture again but with manually tweaked colors:

All the obvious colors are made of their components maxed out (red: FF000, yellow: FFFF00, Pink, FF00FF etc). For future reference, I used #FF7093 for pink.

[ferranlala]

@daschuer Colors updated and color svg template added. Shall we merge this?

[daschuer]

Yes, sorry for the delay. LGTM and thank you!