[open] Want to create colorful clickable buttons

Comments

• JoshuaBaker

  February 2016 edited 11:38PM

  Not exactly helpful but it might be possible to mod the touch_response item, which is used for touch screen devices. this superimposes a predefined grid, in which responses are allocated to each cell of the grid. So, you could create a grid which is 1 row by 12 columns. i just tried this on my PC but there is no visible mouse. As i say, maybe try modding it.
• temima

  February 2016 edited 11:38PM

  unfortunately i dont have a touch option. But if i did manage to find one - how would it work? does any tablet work? i program it on the computer and then move it to the tablet?

  thanks!
• JoshuaBaker

  February 2016 edited 11:38PM

  make sure you select 'droid' as the backend. I thought touch response came with the default version of opensesame?
• temima

  February 2016 edited 11:38PM

  I meant I don't have a touch computer (such as a tablet)

  A thought I just had - do you know if there is an option for clickable images? I could create the colors as images.

  Thanks!
• JoshuaBaker

  February 2016 edited 11:38PM

  Ah! do it is a form. create a form with 12 buttons on.
• Knante

  February 2016 edited 11:38PM

  Hi,

  I just wanted to add that you could use both options. As far as i know the touch_response item also works on your laptop, so you don't need a tablet or sorts. There is a checkbox to show the cursor within the item.

  If you create a sketchpad item and draw the colored rectangles on them. See below for an example. Then, set the duration of that sketchpad to 0 and insert your touch_response item directly after it. Then specify the amount of columns according to the amount of rectangles, like Joshua said. You'll now have a superimposed grid.

  The alternative would be the form_base with clickable images as buttons, but then you would need to create the different rectangles yourself and add them as .png into the experiment. Set the spacing to 0 to make the rectangles appear to overlap.

  However, if you need the participants to select more than one rectangle it will be a bit more challenging.

  set duration 0
  set description "Displays stimuli"
  draw rect color="rgb(0,255,0)" fill=1 h=64 penwidth=1 show_if=always w=64 x=-224 y=-32 z_index=0
  draw rect color="rgb(0,245,10)" fill=1 h=64 penwidth=1 show_if=always w=64 x=-160 y=-32 z_index=0
  draw rect color="rgb(0,235,20)" fill=1 h=64 penwidth=1 show_if=always w=64 x=-96 y=-32 z_index=0
  draw rect color="rgb(0,225,30)" fill=1 h=64 penwidth=1 show_if=always w=64 x=-32 y=-32 z_index=0
  draw rect color="rgb(0,215,40)" fill=1 h=64 penwidth=1 show_if=always w=64 x=32 y=-32 z_index=0
  

  Laurent
• GuidoCor

  February 2016 edited 11:38PM

  Hi! recently I made a clickable button with the sketchpad for a Likert scale response : )

  If you modify this code I think you can made the same for your experiment. If you need extra help, simply ask!

  # config values
  # separation of the button
  button_separation = 0 
  # Width and height of the desired buttons
  button_size = [200 , 100]
  # place the center of the button 
  button_centers_x = [-1.5*button_size[0], -button_size[0]/2., button_size[0]/2.,1.5*button_size[0] ]button_size[0]/2.,1.5*button_size[0] ]
  # y-axis centering of the buttons 
  button_alignment_y = 300
  
  # areas of interest on lcik
  y_range = [button_alignment_y - (button_size[1]/2.) , button_alignment_y + (button_size[1]/2.) ]
  
  # set the canvas
  my_canvas = canvas(exp)
  my_mouse = mouse(exp)
  my_canvas = canvas(exp)
  my_mouse.set_visible()
  
  # get a iamge from pool  image
  path = exp.pool[var.imagen]
  my_canvas.image(path)
  
  # TEXT of the buttons 
  # draw text my_canvas.text('Some text with <b>boldface</b> and <i>italics</i>')
  # y – The Y coordinate, or None to draw vertically centered text. 
  # x – The X coordinate, or None to draw horizontally centered text.     
  # Drawing the text of the buttons 
  my_canvas.text(var.resp_1, x = button_centers_x[0], y = button_alignment_y)
  my_canvas.text(var.resp_2, x = button_centers_x[1], y = button_alignment_y)
  my_canvas.text(var.resp_3, x = button_centers_x[2], y = button_alignment_y)
  my_canvas.text(var.resp_4, x = button_centers_x[3], y = button_alignment_y)
  
  # call all the buttons 
  # function canvas.rect(x, y, w, h, **style_args)
  my_canvas.rect(x = button_centers_x[0]- (button_size[0]/2.), y = button_alignment_y - (button_size[1]/2.), w = button_size[0], h =  button_size[1]) 
  my_canvas.rect(x = button_centers_x[1]- (button_size[0]/2.), y = button_alignment_y - (button_size[1]/2.), w = button_size[0], h =  button_size[1]) 
  my_canvas.rect(x = button_centers_x[2]- (button_size[0]/2.), y = button_alignment_y - (button_size[1]/2.), w = button_size[0], h =  button_size[1]) 
  my_canvas.rect(x = button_centers_x[3]- (button_size[0]/2.), y = button_alignment_y - (button_size[1]/2.), w = button_size[0], h =  button_size[1]) 
  
  # Make the canvas exist : ) 
  my_canvas.show()
  time_0 = self.time()
  number = 0 
  
  # This function checks where the click was made and returns the parameter number 
  # (was made for a likert type buttons)
  def check_button(pos):
      global number 
      a = pos[0] 
      if a >  button_centers_x[0]- (button_size[0]/2.) and a < button_centers_x[0] + (button_size[0]/2.): 
          number = 1
      if a >  button_centers_x[1]- (button_size[0]/2.) and a < button_centers_x[1] + (button_size[0]/2.): 
          number = 2
      if a >  button_centers_x[2]- (button_size[0]/2.) and a < button_centers_x[2] + (button_size[0]/2.): 
          number = 3
      if a >  button_centers_x[3]- (button_size[0]/2.) and a < button_centers_x[3] + (button_size[0]/2.): 
          number = 4
      return number
  
  
  
  # create a while that breaks when click was made
  while True:
          button, position, timestamp = my_mouse.get_click(timeout=20)
  
          if button != None:
  
              position_now = my_mouse.get_pos()
              pos, time = position_now
              # pos[0] is Y verticla axis 
  
              # check between y axis if the click is made in the horizontal area of interest 
              if pos[1] > y_range[0] and pos[1] < y_range[1]:
                  number = check_button(pos)
  
                  if number != 0:
                      time_rt = self.time() - time_0
                      #print "self", self.time()
                      #print "rt" ,time_rt
                      exp.set("likert", number)
                      exp.set("time_rt", time_rt)
                      exp.set("time_0", time_0)
  
                      print number
                      break
          #pos, time = my_mouse.get_pos()
  
• temima

  February 2016 edited 11:38PM

  Thank you for all the suggestions!
  Knante - I'll give using the touch response with a mouse a try (it sounds the simplest...).

  GuidoCor- thank you for the code. I might use it if I don't manage a simpler way
• Pascal

  February 2016 edited 11:38PM

  Hi,

  I am not sure whether it helps but:

  in case you want to use a sketchpad/canvas to draw your different response options, you could use the mousetrap_response plug-in to define buttons and collect the respones afterwards.

  We developed this plugin for mouse-tracking (https://github.com/pascalkieslich/mousetrap-os) but you can also disable the mouse-tracking option and simply use the mousetrap_response plug-in for making sketchpads interactive (https://github.com/PascalKieslich/mousetrap-os/blob/master/plugins/mousetrap_response/mousetrap_response.md). If you need more than four buttons, you can use the python class provided with the plug-in - see https://github.com/PascalKieslich/mousetrap-os/blob/master/examples/mousetrap_response_python.osexp for an example experiment.

  In case you want to use it, you need to install the plug-ins first (https://github.com/PascalKieslich/mousetrap-os/releases).

  Best,

  Pascal
• temima

  February 2016 edited 11:38PM

  Ok. I see there is a problem with getting multiple responses with the the touch screen.

  I guess I will just have to try programming. :-S I've never used python before so I hope I'll manage
• temima

  February 2016 edited 11:38PM

  Pascal-
  I'll be able to collect multiple clicks from the same frame?

  This sounds like a really good option for me. However, I need 12 clickable rectangles.
  From what I understood I can either use the mousetrap_form (but then I'll need to create the rectangles as images) or play with the python code itself in mousetrap_response to allow more than 4 buttons?

  Thank you!
• Pascal

  February 2016 edited 11:38PM

  Just to clarify: the task of the participants is to click on several buttons in the trial (and all clicks need to be collected)?
  How do participants indicate that they are finished?
• temima

  February 2016 edited 11:38PM

  Yes. Participants have to choose as many buttons as they want (0-12). I need to know how many (and which ones) they have chosen.
  Then they have to press "enter" or click an "ok" button on the bottom (that part is more flexible).
• Pascal

  February 2016 edited 11:38PM

  Ah, ok, that makes sense. In this case you cannot directly use the plugin. It continously registers clicks but ends tracking once a click was on a button (similar to the buttons in a form).

  However, there are several work-arounds:

  1) You could nest one trial (sketchpad and mousetrap_response) in another loop. This loop has some high number of repeats (e.g., 1000) and you specify the break if condition (e.g., if the button participants clicked on was labeled end/OK/etc.). The only downside this could have is that the timing between multiple calls of the same sequences is not as precise as within one sequence, so there could be some lags. But you could try it out and test it.

  2) It is also possible to modify the Python code of the PyMT_response class underlying the mousetrap_response plug-in (which uses a similar structure to detect clicks on buttons as described by GuidoCor above) to directly fit your needs (detect clicks on several buttons and exit once click on final button was made). This would get rid of the need for another loop and potential timing issues, but require some Python programming.

  3) Lastly, I have already implemented the option in the PyMT_response class to log all clicks that were made during a trial (along with the timestamps). I could extend this to also log the position where the click occured. Afterwards, you could go through all the positions and detect which of the clicks was on a button of interest.

  You could try out 1 on your own or implement 2. I could implement the tracking of the click positions for option 3 (I could do this some time next week) but you would have to write a short Python script to loop through the position of the clicks.
• Pascal

  February 2016 edited 11:38PM

  Just to point out another, completely different approach: you could use a standard form_base item (http://osdoc.cogsci.nl/forms/custom-forms/) with images corresponding to the different colored options. Beneath each image you could place a checkbox (or use a rating scale) and participants click on the checkboxes in case they want to select the image above. I guess this would be the easiest approach, but come with the downside that participants cannot directly click on the options.
• temima

  February 2016 edited 11:38PM

  That actually might be the best solution because participants could see which ones they have clicked. I'll give that a try first (and it definitely sounds like the simplest to implement).