Welcome Guest, you are in: <root>Elements • Login

Page History: GUI Panel Element

Compare Page Revisions

14 13 12 11 10 9 8 7 6 5 4 3 2 1 0 Current 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0

« Older Revision - Back to Page History - Newer Revision »

Page Revision: 2016/05/16 17:42

GUI Panel element allows creating interactive GUI components on the presentation screen of an experiment.

Table of Contents [Hide/Show] Synchronized Internal Actions Properties     Generic Properties Description Snapshots Practical Use     Creating a simple response form Notes

Description ¶

The GUI layout element allows to lodge a user-defined layout of interactive GUI components (textboxes, buttons, sliders, checkboxes, etc.) into a selected zone on the event surface. The GUI layout is created with the XAML markup language and can host any number of GUI components, for example a custom questionnaire form. Properties of the GUI components can be bound to the global and proxy variables.

This is particularly useful, if you need feedback from the user that is more elaborate than pressing a button on the keyboard. E.g select an option that is presented on screen.

Some example templates are provided by right-clicking on the code plane & selecting "Insert code template". (See screenshot 3)

Snapshots ¶

Example response form made from xaml code	Code can be accessed by clicking on the "XAML Content snippet in the bottom plane
Right clicking in the code plane brings up a menue from which one can select "Insert Code Template"	A list of Example templates

Practical Use ¶

Creating a simple response form ¶

1. Add a new event. Then click on "Add Element" -> "BEHAVIOURAL INPUT" -> 'GUI Layout'.
2. Click on the "XAML Content" Snippet in the bottom plane as shown in the following screenshot:
   
   

   Code can be accessed by
   clicking on the "XAML Content
   snippet in the bottom plane

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

1. Paste in the following code:
   

   
   
   <StackPanel Orientation="Vertical">   
   
   <TextBlock Text="Select the letter shown in white:"  Foreground="LightGray" FontFamily="Verdana" Margin="0,20,0,5"/>
   
   <ListBox SelectedIndex="{Binding ResponseTarget}">
   
   <ListBoxItem Content="A"/>			
   
   <ListBoxItem Content="B"/>
   
   <ListBoxItem Content="C"/>			
   
   <ListBox.ItemsPanel>
   
   <ItemsPanelTemplate>
   
   <UniformGrid Columns="3" Rows="1"/>
   
   </ItemsPanelTemplate>
   
   </ListBox.ItemsPanel>
   
   </ListBox>
   
   
   <TextBlock Text="Was 'X' presented?" Foreground="LightGray" FontFamily="Verdana" Margin="0,40,0,5"  HorizontalAlignment="Center"/>
   
   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
   
   <RadioButton Content="Yes" IsChecked="{Binding ResponseXPresent}" GroupName="1" Margin="0,0,30,0"/>
   
   <RadioButton Content="No" IsChecked="{Binding ResponseXNotPresent}" GroupName="1"/>	
   
   </StackPanel></StackPanel>
   
   

2. Note that the GUI elements are bound to certain variables: {Binding ResponseTarget} , {Binding ResponseXPresent} , {Binding ResponseXNotPresent}.
3. Open the header snippet from the bottom plane. Paste in the following:
   

   
   
   bool ResponseXPresent;
   
   bool ResponseXNotPresent;
   
   int ResponseTarget=-1;
   
   

4. These are the variables that will hold the values of the user input.
5. In addition, you may want to add some code to the 'Control Loop' snippet next to "Response & Feedback", so the program will know when to move on.
   

   
   
   if ((ResponseTarget!=-1)&&((ResponseXPresent)||(ResponseXNotPresent)) {
   
   ... //record output, compare to expected output etc.. 
   
   }
   
   

   
   Demo experiment showing the GUI Layout element in action are available in the Demo Gallery within EventIDE: Demos -> Classical Paradigms -> 'Attentional Blink in RSVP' and Demos ->Questionnaires.
   

Notes ¶

XAML will automatically scale the graphic to match the canvas.