[solved] Slider and touch screen

toma

Hi everyone
I currently try to make a slider work with a touch screen. I have found a lot of ideas in this forum, only one misses me.
I want to save the slider position by the click on a button below the slider. My problem is to close the loop of the slider when the mouse (or the finger) is outside the slider.
If anyone has this idea, or the solution (even better), I would be very interested.
Thanks
Tom

sebastiaan

Hi Tom,

I'm guessing you use the code from this post:

• http://forum.cogsci.nl/index.php?p=/discussion/40/solved-implementing-a-slider/

Is that right?

My problem is to close the loop of the slider when the mouse (or the finger) is outside the slider.

To do this, you need to break the while loop when the coordinates of the mouse are outside of the slider boundaries. For example like so (this checks only the vertical position):

if (y < slider_y - slider_h/2) or (y > slider_y + slider_h/2):
    break

In the context of the entire script that would look something like this:

from openexp.canvas import canvas
from openexp.mouse import mouse
my_canvas = canvas(self.experiment)
my_mouse = mouse(self.experiment, timeout=20)

# Set slider dimensions
slider_w = 500
slider_h = 100
slider_x = self.get("width")/2-slider_w/2
slider_y = self.get("height")/2-slider_h/2

while True:

    # Determine the slider fill based on the mouse position
    pos, time = my_mouse.get_pos()
    x, y = pos

    # Break when the mouse leaves the slider area
    if (y < slider_y - slider_h/2) or (y > slider_y + slider_h/2):
        break

    slider_fill = min(slider_w, max(0, x-slider_x))

    my_canvas.clear()
    # Draw some text (this can be anything)
    my_canvas.text("Question goes here", y=slider_y-100) 
    my_canvas.text("Click to accept ...", y=slider_y+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(timeout = 20)
    if button != None:
        break

slider_percent = 100.0*slider_fill/slider_w     
self.experiment.set("slider_percent", slider_percent)

Does that help at all?

Cheers,
Sebastiaan

toma

Hi Sebastiaan,
thank you for your answer. Yes, this is the script I try to use, and yes also, this is the idea.
If I understand well, the break you add "breaks" completely the loop, ie with a mouse, as soon as you move, you switch to the next slide and saving the position.

My idea was a loop in which you could come and go on the slider both with finger or mouse and then validate with a button outside the slider, thefore put the mouse clic within the button and not on the while loop of the slider. Am I clear enough?

I'm sorry to be so poor with python but I'm working on it

I had yesterday a seminar with Lotje van der Linden, after sending my question on this forum, and she also agree to help me (a little) in case you don't have much time...

Best
Tom

and thanks again for this help!

eduard

Hi Tom,

My idea was a loop in which you could come and go on the slider both with finger or mouse and then validate with a button outside the slider

If I understand correctly, it should be enough if nest the slider while loop into another while loop that waits for a mouse/finger click on the button. So, you have to rewrite Sebastiaan's code somehow like this:

from openexp.canvas import canvas
from openexp.mouse import mouse
my_canvas = canvas(self.experiment)
my_mouse = mouse(self.experiment, timeout=20)

# Set slider dimensions
slider_w = 500
slider_h = 100
slider_x = self.get("width")/2-slider_w/2
slider_y = self.get("height")/2-slider_h/2

while True:
        # Determine the slider fill based on the mouse position
        pos, time = my_mouse.get_pos()
        x, y = pos
        # If you want to re-enter the slider loop, you need a variable that can be True
        # or False. Initialized as being False. Only if mouse on slider, it becomes True
        enter = False
        if not (y < slider_y - slider_h/2) or (y > slider_y + slider_h/2):
              enter = True

        while enter:

            # Determine the slider fill based on the mouse position
             pos, time = my_mouse.get_pos()
             x, y = pos

             # Break when the mouse leaves the slider area
             if (y < slider_y - slider_h/2) or (y > slider_y + slider_h/2):
                  break

             slider_fill = min(slider_w, max(0, x-slider_x))

             my_canvas.clear()
             # Draw some text (this can be anything)
             my_canvas.text("Question goes here", y=slider_y-100)   
             my_canvas.text("Click to accept ...", y=slider_y+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(timeout = 20)
       if button != None:
             break

slider_percent = 100.0*slider_fill/slider_w     
self.experiment.set("slider_percent", slider_percent)

Is this what you meant?

Best,

Eduard

toma

Hi
Thank you very much for your time and valuable help.
The loop inside the loop was exactly what I was trying to do.
I tested you script and it works perfectly on desktop but not on the Surface pro I use for experiment. It gives an error on the slider_fill variable not declared. any idea? (same installation, same version and all)

And by the way, I do not want to abuse, but how can I dissociate the slider movement (one loop) and the click in a "validate" separate button on the screen (second loop).
As this is for children, I prefere that no ambiguity remains.
I suppose I should change the last part of the loop saying button != none to include it in a rectangle canvas?
Thanks again
Best
Tom

eduard

HI,

I don't understand why this works on one version, but not on the other. Anyway, I suppose the error arises, if the inner while loop is not entered, because slider_fill is only defined there. A solution can be initializing slider_fillearlier one, even before the outer while loop is entered, to 0, or some sensible starting value.

I'm not sure whether I understand your second request right, but if you want to separate the loops, you can do so rather easily, you just have to watch out, that all the variables belonging to one of the operations are also going there. Then, you can start the script with a single conditional that defines which whileloop is entered,e.g. if pos=='coordinates_of_button: enter_button = True, else: enter_button = False and accordingly for the slider. Later you just check whether enter_slider or enter_button and enter where you wanna go.

Does this help?

Eduard

toma

Hi
thanks, I begin to understand the logic of Python (more used to vb in eprime). I will try with the idea you gave by enter a similar loop as the slider loop when the mouse is outside the slider but goes into a button.
the - if button != None: break - should be then is this loop so no more clicking by mistake.
the result should be something like this



Thanks
And yes this does help!
tom