[solved] Change backgrounds colors and fonts in widgets

faedojury · July 2013

First of all thanks a lot guys for this amazing tool. I was a matlab user and at the moment I am trying to switch to Python. Looking for some package similar to Psychtoolbox I found OpenSesame and I am really amazed how simple and flexible is it. Thanks Again to the developers!

Now my question. As a newbie probably i am asking easy to solve question but so far I cant find a solution:
I need to set up some variables at the beginning of my experiment (screen size, distance to screen and so on) I am using the widgets tool for this in a inline script, like in the following example:

from libopensesame import widgets

form = widgets.form(self.experiment, cols=[1,1,1], rows=[1,1,1,1,1,1,1],
    margins=(200,200,50,100), spacing=50)

question_text = "Before starting this experiment please fill some variables:"
question_label = widgets.label(form, text=question_text)
input1 = widgets.text_input(form, return_accepts=True, var='Length_cm')
input2 = widgets.text_input(form, return_accepts=True, var='Length_px')
input3 = widgets.text_input(form, return_accepts=True, var='Width_px')
input4 = widgets.text_input(form, return_accepts=True, var='Distance_cm')
input5 = widgets.text_input(form, return_accepts=True, var='Size_dg')

question1 = widgets.label(form, text='Length Screen (in cm)', center=False)
question2 = widgets.label(form, text='Length Screen (in Pixels)', center=False)
question3 = widgets.label(form, text='Width Screen (in Pixels)', center=False)
question4 = widgets.label(form, text='Distance to Screen (in cm)', center=False)
question5 = widgets.label(form, text='Size of Stimulus (in deg)', center=False)

form.set_widget(question_label, (0,0), colspan=3)
form.set_widget(input1, (0,1))
form.set_widget(input2, (0,2))
form.set_widget(input3, (0,3))
form.set_widget(input4, (0,4))
form.set_widget(input5, (0,5))
form.set_widget(question1, (1,1))
form.set_widget(question2, (1,2))
form.set_widget(question3, (1,3))
form.set_widget(question4, (1,4))
form.set_widget(question5, (1,5))

Is there any way to change the fonts, size and colors of the sentences and the boxes colors in the code?
If it is possible: How could I do it?
Thanks a lot in advance!

And thanks again for this amazing tool!

Cheers,

Felipe

sebastiaan · July 2013

First of all thanks a lot guys for this amazing tool. I was a matlab user and at the moment I am trying to switch to Python. Looking for some package similar to Psychtoolbox I found OpenSesame and I am really amazed how simple and flexible is it. Thanks Again to the developers!

Thank you!

Is there any way to change the fonts, size and colors of the sentences and the boxes colors in the code? If it is possible: How could I do it? Thanks a lot in advance!

The easiest way is to simply change the font and color settings of your experiment, in the General tab. These settings will be used by the form as well. If you want to customize your text in more detail, you can use (a subset of) HTML tags:

http://osdoc.cogsci.nl/usage/text-formatting/

By default, the frames/ boxes will remain gray, regardless of the experiment colors. That's a property of the default theme, which is called gray. The plain theme will follow your colors more closely:

http://osdoc.cogsci.nl/forms/custom-forms/#themes

Good luck!

Sebastiaan

faedojury · July 2013

Hi Sebastian, Thanks a lot for your quick answer.

Nevertheless I still have 2 questions:

1- Like in me previous example:

form = widgets.form(self.experiment, cols=[1,1,1], rows=[1,1,1,1,1,1,1],
    margins=(200,200,50,100), spacing=50)

question_text = "Before starting this experiment please fill some variables:"
question_label = widgets.label(form, text=question_text)

How should I use the HTML? (I am totally naive with it)
Should I add the html tags inside the sentence ? (I never worked with HTML before), like:

 question_text = "<span color="red">Before starting this experiment please fill some variables:</span>"  .... because this way seems that doesnt work, at least on my script

2- I am having problems to use my variables, like in the previous example i put:

input1 = widgets.text_input(form, return_accepts=True, var='Length_cm')
question1 = widgets.label(form, text='Length Screen (in cm)', center=False)
form.set_widget(input1, (0,1))
form.set_widget(question1, (1,1))
input1.on_mouse_click((0,0))
Length_cm = [self.get('Length_cm')]

The if I fill the widget with 123 for example, when I try to use Length_cm as variable it tells me that is stored as list.
So if for example I want to divide it by 3 : Length_cm / 3
it doesn't allow me.

Is it that self.get stored the variable as [1,2,3] ?
How is the 'var' stored in the text_input widget ?
How Can I get the value I introduced as answer as a number?

Thanks again for the excellent work and support.

Felipe

sebastiaan · July 2013

How should I use the HTML? (I am totally naive with it) Should I add the html tags inside the sentence ? (I never worked with HTML before), like:

question_text = "<span color="red">Before starting this experiment please fill some variables:</span>"

Right, the reason that this doesn't work is that it's not valid Python syntax. The quotes are used to indicate that this is a string. If you want to use quotes as part of the string as well, you therefore need to either escape them, or use single quotes. To give some examples, the following is all valid Python:

# Escape the quotes in the string
question_text = "<span color=\"red\">Before starting this experiment please fill some variables:</span>"
# Or use single quotes in the string
question_text = "<span color='red'>Before starting this experiment please fill some variables:</span>"
# Or use double quotes to indicate the string
question_text ='<span color="red">Before starting this experiment please fill some variables:</span>'

I am having problems to use my variables, like in the previous example i put:

Length_cm = [self.get('Length_cm')]

The if I fill the widget with 123 for example, when I try to use Length_cm as variable it tells me that is stored as list.

The command self.get('Length_cm') will retrieve the variable as a string, integer, or float, depending on what you entered (see smart variable typing). By wrapping square brackets around this value, you tell Python that you want to create a list with that value as the only item. In OpenSesame script and in the user interface, the square-brackets indicates that something should be interpreted as a variable. But this is not Python syntax: In Python, you use self.get() instead of the square brackets.

In general, I would recommend walking through one of the basic Python tutorials. That will help you get a grip on the syntax. You don't need to know any Python wizardry, so don't worry, but you'll need to know the basics in order to use Python inline scripting in OpenSesame