[solved] mouseover to highlight image buttons

Jan-Maarten

Hello All,

I am working on an experiment that involves users choosing between a large number of image buttons. To help the user orienting, it would be useful to highlight the image button at mouseover. I was wondering, does anyone have experience implementing this? Any pointers would be greatly appreciated!

sebastiaan

Hi Jan-Maarten,

Welcome (finally!) to the forum. The short answer is that forms do not provide mouse-over functionality. However, if you really want this functionality, you could implement your own form programmatically. This may be more trouble than it's worth though, but here's a quick script to get you started.

Cheers!
Sebastiaan

from openexp.canvas import canvas
from openexp.mouse import mouse

# A list of button texts
buttons = [
    'Click me!',
    'No click me!',
    'Leave me alone',
    'Avoid me'
    ]

# Specify the geometry
cols = 2
button_width = 300
button_height = 100
margin = 50

# Create a canvas and a mouse object. We set the timeout to 0 so that we can
# poll the mouse continuously
my_canvas = canvas(exp)
my_mouse = mouse(exp, timeout=0, visible=True)

# Loop until a mouse button was clicked.
button_clicked = None
while button_clicked == None:
    # Get a mouse click
    mouse_button = my_mouse.get_click()[0]
    # Get cursor position
    cx, cy = my_mouse.get_pos()[0]
    my_canvas.clear()
    # Loop through all the buttons. `enumerate()` is a built-in Python function
    # that also returns indices for the list that you walk through.
    for i, button in enumerate(buttons):
        # Determine the column and row of a button, based om the buttons index.
        col = i % cols
        row = i / cols
        # From there, determine the x and y coordinates of the button's top
        # left corner.
        x = margin + col * (margin+button_width)
        y = margin + row * (margin+button_height)
        # If the cursor was over this button, choose a color to highlight the
        # button.
        if cx > x and cx < x+button_width and cy > y and cy < y+button_height:
            color = 'blue'
            # ... and if this button was clicked, take note of this
            if mouse_button != None:
                button_clicked = button 
        # Otherwise stick to white.
        else:
            color = 'white'
        # Draw the button!
        my_canvas.rect(x, y, button_width, button_height, color=color)
        my_canvas.text(button, x=x+button_width/2, y=y+button_height/2)
    my_canvas.show()
# Set button_clicked as an experimental variable, so that you can log it etc.
exp.set('button_clicked', button_clicked)

Jan-Maarten

Thank you! I'll have to see whether I can do this within the time frame for our current study, but it will be great for future reference!

Cheers, Jan-Maarten