Description of the problem:
I am trying to create an experiment in the Builder to be run locally and on Pavlovia, where the fill color of some shapes are dynamically set using the conditions CSV file. I have four variables for four boxes (e.g. ‘source1_prac_color’, ‘source2_prac_color’) in the CSV file that specify the colors as an array (e.g. [1,0,0]). I am specifying the colors by simply writing $sourceX_prac_color into the fill color box in the Builder for each of these shapes…
When I try running the experiment locally in PsychoPy, I have no problem displaying these colors. However, when I push the experiment online and try piloting on Pavlovia, I get the following error:
Unfortunately we encountered the following error:
when defining a color
unknown named color: ,
Try to run the experiment again. If the error persists, contact the experiment designer.
I have also tried replacing the arrays with text like ‘red’ and ‘green’ — This gets past the error, but the boxes will only appear black rather than in the colors that I specified.
I’ve also tried including separate variables for each of the values in the array (i.e. three variables like source1R, source1G, source1B — and then setting the fill color in the builder to [$source1R, $source1G, $source1B]), but this returns an error saying that the colors need to be specified as an array of 3 numbers.
Any advice or ideas would be very much appreciated!
I tried your suggestion of taking out the dollar sign from the color variable, but end up with the following error when I try and run the experiment locally:
“PsychoPy can’t interpret the color string ‘%s’” % color)
AttributeError: PsychoPy can’t interpret the color string ‘source1_prac_color’
This also causes the experiment to crash in JS on Pavlovia with the following error:
when defining a color
unknown named color: source1_prac_color
I also tried defining the color in the same way as in your crib sheet. I have a bit of code that runs at the start of the routine that defines the color with separate code in JS and python (using ‘new util.Color’ in JS) and I still get the same JS error as above… I’ve also tried defining the color at the beginning of the experiment to have the same error come back. I also tried putting the dollar sign back on, as I thought maybe there was a problem parsing the string, and I got this error instead:
•TypeError: Cannot read property ‘0’ of undefined
To use .setFillColor, would I need to define the shape entirely in code?
Sure thing. Here is the relevant bit of code from my javascript file. I’m just showing the code for one of the four squares (‘source 1’) because I’ve set the colors of the other squares to a constant to make it easier to debug (I’ve confirmed that these colors do show up in the JS version if all colors are set to a constant) :
function PracBetInstrRoutineBegin(trials) {
return function () {
//------Prepare to start Routine ‘PracBetInstr’-------
t = 0;
PracBetInstrClock.reset(); // clock
frameN = -1;
// update component parameters for each repeat
source1color = new util.Color(source1_prac_color);
source1_instr.setFillColor(new util.Color(source1color));
Sure. So here is a bit more information. This is code for a screen that is meant to show instructions to participants. The colors of the squares are randomized for each participant ahead of time, hence why they are loaded from the CSV.
So, that seems to have worked in getting the JS version to pull up the right numbers. However, it doesn’t appear to be parsing them as RGB values for a color, as I am now getting this error in the online version instead:
I was able to figure out a solution to this problem at last…! PsychoJS doesn’t appear to like the numbers for the RGB values coming in as a single variable (i.e. where colorvar = [1,0,0]). Instead, it prefers that the CSV file give each value a separate variable. So, instead I now have three variables for R, G and B for each color in my CSV. In then load them in by setting the fillColor to [$colorvarR, $colorvarG, $colorvarB] in the builder. I had tried something like this earlier, but it wasn’t working when the selected rows was set to 0.
Hi arvaidya, I am having a very similar problem to yours (cannot set up the fill color of a polygon correctly). I have 3 columns in my csv corresponding to RGB, between -1 and 1. I then set fill color on my polygon (in the builder) to [$colorR, $colorG, $colorB], but I am still having the same problem. So I am wondering whether there was any additional step in your set up that made it work? E.g. did you have any code component too?
If you are setting a colour in a code component the you need to use new util.Color on the JS side. You can avoid this at the point of use if you set colour names as variables in a Both component as per my crib sheet
Yes, I had a line in my JS code component like this to actually fill in the color:
option_box_left.setFillColor(new util.Color([option_box_leftR, option_box_leftG, option_box_leftB]));
