How do I change color by listing the color choices in a JSON file?

Click the button to change the bg to a color from a list of values. I have it working fine when I populate an array by using the event sheet, but when I put the colors into a JSON file I can't get it to work.

Many thanks, any help is greatly appreciated.

dropbox.com/s/fp0h0jw2h5pb8ze/changeBgColor3.c3p

When you run in debug mode, you will see the array only has 1:

x: ,,,,,

y: all you rgb

You must edit your JSON file.

Got that (an oversight on my part), but I just deleted the first empty column, and it still does not work. I thought that this was telling to use the height and not width.

bgColorArrayEditor.At(0,randomY)

Thanks, I have reposted the project file

dropbox.com/s/cr6fxdwwcp9gur5/bgColorArrayTest.c3p

I updated a bit here:

https://drive.google.com/file/d/1VE2Yy2aApd2obzuJtWOpGKfgJURmvhPS/view?usp=sharing

Thanks so much for sharing your expertise. I see now that it was not as simple as I was imagining it to be. Can you help verify that I understand what's going on?

int(tokenat(bgColorArrayEditor.At(0,randomY), 0,","))

This is the part I'm not quite clear on, what each value is and what it's doing

(0,randomY), 0,","))

Thanks again!

It may be easier to store colors as hex-string, for example #00aaff

It's easy to convert them to RGB values with a bit of JS, see event 3 in this demo:

https://www.dropbox.com/s/87rss2d46mt13iy/ColorPickerTextbox.c3p?dl=0

Yes, hex would I think be easier since there is no delimiter. I was very surprised to see that C3 lacks hex support. It's so basic to HTML5. I hate working in RGB. As an aside the lack of color pickers in the C3 UI is a definite productivity hinderence. It would be like Photoshop not having a color picker.

I see the JS for this is short. I will try to figure it out. Thanks!

What I don't understand is why all this becomes necessary just because I have populated the array of color choices via a JSON files as opposed to using the event sheet. None of this splitting up the r,g,b values was necessary when using the event sheet. It's still the same array, I don't get it. This seems more trouble than its worth. Overall it's more complex.

In the end I've decided to just use choose, it's simpler, there's no array, and it's easy to add or change colors. The end result is the same.

rgb() expression takes three separate values, for r, g and b color channels.

In the event sheet you enter these values manually, for example - rgb(255, 154, 162)

When you import colors from an json/array, you also need to receive three separate values. However in your case you put all three numbers into one field, so it became one string value "255, 154, 162"

tokenat() allows to split this string into 3 numbers.

Another option is to add 3 columns into your array, to store each color channel (r, g, b) in its own column. Then you could use this expression:

rgb(bgColorArrayEditor.At(index,0), bgColorArrayEditor.At(index,1), bgColorArrayEditor.At(index,2))

So in the editor the comma is analogous to adding another x/width column? I see what's happening now, thanks for explaining it. Hmm, I'm happy to understand it, but it seems in this particular use case, that the choose route is probably the simplest. What do you think?

Some expressions take multiple parameters, separated by comma. In this case rgb() requires three numbers.

You can enter these numbers directly into the event (so called "hard-coding"), or you can use variables, or get them from the array etc.

But you can't feed to rgb() expression a single string containing three numbers, it won't accept it.

choose() expression is a perfectly good way to do it, however if you have lots of colors, it may become too long and difficult to edit in the future.