VESPR Demo Interactive Slider

[wakecarter]

I’ve just added a new demo to my online demos post.

Interactive Slider code | try it

This shows a PsychoPy slider object which can be moved using the left and right arrow keys or hovering over the slider with the mouse. Responses are submitted with a mouse click or the return key. The position of the slider is also recorded every 3 frames and presented on the screen in addition to being saved to the console and the data file.

However, I still need some help with a couple of points.

I have tried unsuccessfully to change the colour of the marker and the wrap width of the labels online using the following code:

Python

for label in slider.labelObjs:
    label.height = .03  # Or whatever size you want
    label.wrapWidth = .2
    label.text=slider_labels.pop(0)
slider.marker.color=blue

JavaScript

slider.setLabels(slider_labels);
slider.setLabelHeight(.03);
//slider.setLabelWrapWidth(.2); 
slider._markerColor = blue;
slider._markerSize = (.1,.1);
//slider._onChange(true)();
//slider._setupSlider();

This seemed to work offline, but not online

Refining scale markers

That’s good, to change the label size requires a bit more code. I think label size will be implemented in the Builder component in the future, but for now you have to change the size of each label object using a loop. In the “Begin Routine” tab: for label in slider.labelObjs: label.height = .01 # Or whatever size you want

Suggestions welcome remembering that I want it to work in the same way both offline and online.

Links I’ve looked at:
Changing the slider marker size in Javascript - #9 by arkadiy requires making the changes on creation of the slider. I am trying to use a slider component.

[Becca]

Hi There,

Hope this might help! https://run.pavlovia.org/lpxrh6/color_slider_demo

Note that for other reasons, I wrote in JS for this project, but the code is so small/simple you will easily be able to implement that locally!

I also hit a few snags when I was working on this project. As you pointed out, the attributes of the marker in slider are not simple to interact with online (color being one of them), I’ve added some methods to help interacting with them add getMarkerPos for sliders by RebeccaHirst · Pull Request #324 · psychopy/psychojs · GitHub and flagged some of the reasons it’s hard to manipulate color BUG: slider.setFillColor is not a function · Issue #322 · psychopy/psychojs · GitHub to the team - they are on it

Because of the current bug with color I actually use a polygon overlaying the marker (the color of that is easy to change), and set the marker alpha to 0.

Hope this helps!
Becca

[wakecarter]

With a polygon for mouse interaction and a polygon for marker colour and having to save marker pos because get slider doesn’t work and having experimentInit to realign the labels which can’t be changed in number I feel like at the moment it would be easier for me to write a customisable slider from scratch

[Becca]

Fair play if that is your preference!

But there is already a pull request in place to getMarkerPos, an issue raised to fit setFillColor (both linked above) and a demo there to provide a work around until those are fixed.

Perhaps if you have any recommendations for bug fixes/issues you can ensure quickest development by flagging the team or making pull requests at the psychoJS github. Being quite new to JS myself I can say it is quite fun to help directly fix those bugs!

Becca

[wakecarter]

Over the summer when I have more time I should definitely to to learn how to make pull requests.

For now, I’ve updated my interactive slider demo with a custom slider that looks and behaves nearly identical to the standard slider offline and doesn’t change appearance online.

[Becca]

Fab! Had a little play and it’s looking good! might need to double check to poll for mouse up events to make it more “drag and drop” like

[wakecarter]

Thanks. These slider are intended to submit on a mousedown, so it’s hover and click rather than drag and drop.

[mengsili]

Hi, I find this code changed your interactive slider marker color online successfully if add to the each frame tab for JS, but somehow when I use it to change the color of the default slider without any code, the marker just becomes invisible.

// Each Frame
slider._skin.STANDARD.MARKER_COLOR = new util.Color([1, 1, 1]);

[trishabhugra]

@wakecarter i am using the interactive slider for one of my projects. How do i change the nametags/markers on the scale? i am a newbie at psychopy who is using the builder view and your help would be appreciated

[jasbisch]

Hey there,

thank you very much for that nice demonstration of a an interactive slider!
When trying the demo online it works smoothly and as expected.

Unfortunately however, when downloading the source code and trying it, the marker doesn’t stop moving, even though I am releasing the key, which is a problem that occured to me as well, when I was implementing my own interactive slider implementation. Would you have any idea, what could be the problem, when keys[-1].duration keep the value None, even though I am lifting the key?

Thank you very much for your time!

Best
Jasper

[jasbisch]

Hey again,

I found the problem! I had to adjust the experiment settings and switch Keyboard Backend under Input to PsychToolbox (from ioHub):

Best regards
Jasper

[JAQuent]

Can you confirm that setting the marker size changes anything online? Following your demo, I’ve set my marker to

slider._markerColor = new util.Color("blue");
slider._markerSize = (.001,.001);

with this result:

While the colour is indeed blue, the size of the triangle is not height * .001. The corresponding python code works as expected.