Change opacity of image continuously with slider position

Builder
#1

Hello,

I’m new to PsychoPy and am currently trying change the opacity of an image depending on the current slider position.

What have I tried so far?
lightbulb_slider.psyexp (10.5 KB)
I created a slider, and put two versions of two images (a lightbulb) at the same coordinates. Lightbulb off on top of lightbulb on. With a code component, I am trying to adjust the opacity of the lightbulb off depending on the position of the slider:
opac = aha_slider.getRating() or 0 # rating from 0 to 100
insight.opacity = opac/100 ‘’‘in theory, this is unnecessary, because this is under every_frame tab and within the GUI for the lightbulb off image the opacity is set to every_frame’’’

I can see the slider, the lightbulb on. The slider works, but the opacity of the lightbulb off does not change, no matter how much I move the slider.

grafik
grafik1797×732 21.8 KB

1 Like
PsychoPy Online Demos
#2

Instead of using slider.getRating(), try using slider.markerPos. The getRating call only provides the marker position after the choice has been made, whereas markerPos will give the current position of the marker

1 Like
#3

Thank you for the suggestion! I also tried this under Each Frame:
opac = aha_slider.markerPos() or 0 # rating from 0 to 100 insight.opacity = opac
But it did not work. I thought it may be important to set a marker position at the beginning of the routine, because by then the participant will not have moved the mouse yet. Therefore, I also added under Begin Routine:

aha_slider.markerPos = 0

But maybe the position needs to be some other value? My slider is in principle (if I did it correctly) from 0 to 100 in 10-point steps:

aha_slider = visual.Slider(win=win, name='aha_slider',
    size=(1.0, 0.1), pos=(0, 0), units=None,
    labels=['kein Aha', 'schwaches Aha', 'mittleres Aha', 'starkes Aha'], ticks=[0,10,20,30,40,50,60,70,80,90,100,], granularity=1.0,
    style='slider', styleTweaks=('triangleMarker',), opacity=None,
    color='LightGray', fillColor='Red', borderColor='White', colorSpace='rgb',
    font='Open Sans', labelHeight=0.04,
    flip=False, depth=0, readOnly=False)
#4

What kind of value does markerPos normally contain? An integer? A list of two values [0,0]? It is a pity I cannot find it in the PsychoPy documentation.

#5

I use markerPos in my interactive slider demo. You could take a look there.

#6

It should work, although in your code you called it as a function, but it is a property. So, try without the function call.

opac = aha_slider.markerPos or 0
1 Like
#7

You’re right! The code runs now, but the lightbulb only changes from one state into the other without gradual change in transparency… I hope I find this probably more logical error.

Do I need to use the “mask” feature of an image for transparency? Or could my way of laying two identical images with just a color difference on top of each other, and changing the opacity of the one on top, in principle work?

#8

Either set the opacity as opac/100 every frame or set it in code, not both.

1 Like
#9

Having layered images and changing the opacity should work. Just to confirm, might be worth printing the opacity just to make sure the range of values is between 0 and 1 as a float, and not a 0 or 1 as an integer.

# Each Frame
print(opac, aha_slider.markerPos)
#10

It works! Thank you for pointing this out! Of course, when I reset the value of opac every frame via those attributes entered via GUI and then also by changing them every frame via code, they overwrite each other all the time. I never thought about it. This code/GUI hybrid is a bit confusing.

Here is the working version for anyone who ever attempts something similar and also experiences trouble:
lightbulb_slider.psyexp (10.6 KB)

#11

Cool. If it works online, perhaps you’d like to add it as a demo to this thread.

#12

Yes! During all the editing of those few lines, at some point I must have tried without the /100 and forgot it ever since. Have re-added it:

opac = 100 - aha_slider.markerPos or 0 # rating from 0 to 100
insight.opacity = opac/100
#13

Hi! Could you share your bulbs images, please?

#14

I’ll try… As I have never ever run a PsychoPy study online (or in general), more instructions would be nice. I think I have a version ready that has a final routine that never ends. I just copied one of your’s (the slider demo) and changed a few things (hope that was okay). So now I just push it online and then link the URL in your thread?

#15

Something like that. When you push it online then you need to set it to active and add a few credits so the links work.

#16

It’s up. If/when I figure out how to use GitLab, a link to the code will follow.

#17

Here you are.

lightbulb_white
lightbulb_white557×979 13.5 KB

lightbulb_yellow
lightbulb_yellow557×979 17.2 KB

The original is from here: Free Rainbow Of Light Bulbs Clipart - Light Bulb Clip Art - (600x800) Png Clipart Download but it is free for use.

#18

Thanks a lot!

#19

I’ve edited your post to add links to the code and this discussion thread.

Trying it out, the difficulty I had was realising that I had to click on the marker’s original position to start dragging it, as opposed to being able to click anywhere on the slider.