Add button to slider on canvas

mirix

Hi,

I added a slider to a canvas. Now i want to add a button in the center of my canvas just below the slider.

I want my participants to either set the slider to a specific position or press the button. The button should be labeled "no answer".

My inline script is as follows:

my_canvas = canvas()
my_mouse = mouse(timeout=20)

# Set slider dimensions. This assumes that 0,0 is the display center, which is
# the default in OpenSesame >= 3.
slider_w = 500
slider_h = 10
slider_x = -slider_w/2
slider_y = -slider_h/2

while True:

    # Determine the slider fill based on the mouse position
    pos, time = my_mouse.get_pos()
    x, y = pos
    slider_fill = min(slider_w, max(0, x-slider_x))

    my_canvas.clear()
    # Draw some text (this can be anything)
    my_canvas.text("angewidert", y=slider_y-100) 
    my_canvas.text("nicht verstanden", y=slider_y+100) 
    my_canvas.text("extrem intensiv", x=slider_x+600)
    my_canvas.text("überhaupt nicht intensiv", x=slider_x-100)
    # Draw the slider frame
    my_canvas.rect(slider_x, slider_y, slider_w, slider_h)
    # Draw the slider fill
    my_canvas.rect(slider_x, slider_y, slider_fill, slider_h, fill=True)                
    # Draw the mouse cursor
    my_canvas.arrow(x+5, y+10, x, y)
    my_canvas.show()

    # Poll the mouse for buttonclicks
    button, position, timestamp = my_mouse.get_click()
    if button is not None:
        break

# Set the slider response as an experimental variable
var.slider_percent = 100.0*slider_fill/slider_w   

Can you help? Thank youuuu

sebastiaan

Hi @mirix ,

Right now you're using a Canvas to draw a custom slider instead of a Form . That's a perfectly acceptable approach, but this means that you have to render everything using the Canvas , including the ok button. (You cannot use any of the predefined form widgets.) The script below is slightly modified from your own script and shows how you can do this. There are three major changes:

• The Canvas is not cleared before each update. Rather, the slider fill is given a name and then updated selectively while the other elements are left unchanged.
• A button-like rectangle with the name ok_button is added
• The loop exists whenever a mouse is clicked inside the ok_button element.

See also:

• https://osdoc.cogsci.nl/4.0/manual/javascript/canvas/

Do you see the logic?

— Sebastiaan

my_canvas = Canvas()
my_mouse = Mouse(timeout=20, visible=True)
my_mouse.show_cursor()

# Set slider dimensions. This assumes that 0,0 is the display center, which is
# the default in OpenSesame >= 3.
slider_w = 500
slider_h = 10
slider_x = -slider_w/2
slider_y = -slider_h/2

# Draw some text (this can be anything)
my_canvas.text("angewidert", y=slider_y-100) 
my_canvas.text("nicht verstanden", y=slider_y+100) 
my_canvas.text("extrem intensiv", x=slider_x+600)
my_canvas.text("überhaupt nicht intensiv", x=slider_x-100)
# Draw the ok button. We give the frame a name so that we can
# use this name later to check whether the button was clicked
my_canvas['ok_button'] = Rect(x=-100, y=200, w=200, h=50)
my_canvas.text(x=0, y=225, text='acceptieren')
# Draw the slider frame
my_canvas.rect(slider_x, slider_y, slider_w, slider_h)
# Draw the slider fill. We give the fill rectangle a name so
# that we can change its width later
my_canvas['slider'] = Rect(slider_x, slider_y, slider_w, slider_h, fill=True)                

while True:
    # Determine the slider fill based on the mouse position
    pos, time = my_mouse.get_pos()
    x, y = pos
    slider_fill = min(slider_w, max(0, x-slider_x))
    my_canvas['slider'].w = slider_fill
    my_canvas.show()
    # Poll the mouse for buttonclicks
    button, position, timestamp = my_mouse.get_click()
    if button is not None and position in my_canvas['ok_button']:
        break

# Set the slider response as an experimental variable
var.slider_percent = 100.0*slider_fill/slider_w