Hsv color slider

Online experiments
1

Description of the problem:
Hi everyone,
I hope someone can help me.
I created an experiment about Grapheme-Color-Synesthesia in PsychoPy. The Experiment runs in rgb color space but for my colorslider component I needed the hsv color space. Offline everything works perfectly fine but when I uploaded it to Pavlovia my color slider didn’t work anymore. It is colored red (normally light grey) and there is no marker anymore. I can click on it but nothing happens and the color of my picture component is not changing anymore.
As I said offline in PsychoPy everything works fine…
It seems as if there is no translation of the color space in JS.
This is the Python code component that works offline:

Hue = visual.Slider(win=win, name='Hue',
    startValue=None, size=(0.8, 0.05), pos=(0, -0.15), units=None,
    labels=['Farbton', 'Farbton'], ticks=(0, 1), granularity=0.0,
    style='slider', styleTweaks=(), opacity=None,
    color=[0,0,0.5], fillColor='Red', borderColor=[0,0,0.5], colorSpace='hsv',
    font='Open Sans', labelHeight=0.015,
    flip=False, depth=-1, readOnly=False)

and this is what PsychoPy translates when in JS:

  Hue = new visual.Slider({
    win: psychoJS.window, name: 'Hue',
    size: [0.8, 0.05], pos: [0, (- 0.15)], units: 'height',
    labels: ["Farbton", "Farbton"], ticks: [0, 1],
    granularity: 0.0, style: ["SLIDER"],
    color: new util.Color([0, 0, 0.5]), markerColor: new util.Color('Red'), lineColor: new util.Color([0, 0, 0.5]), 
    fontFamily: 'Open Sans', bold: true, italic: false, depth: -1, 
    flip: false,
  });

Is there an easy solution for this problem?

Thank you in advance!

2

Hi There,

There are a couple of differences with slides for online use at the moment that means they need some tweaks through code.

For example they don’t allow a start value (as you identified).

Here is a demo that might help get started with what you need: marker_color [PsychoPy]

If it looks helpful you can access the files here Rebecca Hirst / color_slider_demo · GitLab

Hope this helps,
Becca

1 Like
3

Hi Becca,

please allow me to slide into this discussion as Hanna’s supervisor.
First, thanks a lot for the example, I think I managed to hack together a working minimal slider demo based on your code (GitLab).
It works as expected in RGB space, but I noticed that the util.Color-function only supports RGB. Do you know if there are plans to extend this to HSV?

Best,
Julian

4

Hi Julian,

Thanks for sliding in - hopefully this solution scales up to your expectations!

According to the comments in the PsychoJS lib it looks like HSV is on the To Do list but it isn’t in place yet.

What you could do though is convert the desired hsv values to rgb values to give the desired color in hsv. Sadly, psychopys hsv2rgb doesn’t yet exist in PsychoJs, but thankfully this question prompted a demo and think we might have a function to use now! Here is the demo of that with the code here (please note I am not a JavaScript programmer - but I cross checked the output of this function with the hsv2rgb function in psychopy and the output seemed to correspond!).

Hopefully this allows you to create what you need!
Becca