Welcome Guest, you are in: Login

EventIDE Wiki



Search the wiki

Element Icon GUI Panel
Category: Behavioural Input AddIn: Base Elements
Creator: OkazoLab Team Scope: Parent Event
Owns Snippets: XAML Content Usage:

Synchronized Internal Actions

Experiment StartParent Event OnsetStatus change between Onset/OffsetParent Event OffsetExperiment End
Is displayed on screen and starts accepting input. Turns off and disappears.


Generic Properties

NameDescriptionConstraintsValue TypeUpon Change
Open XAML EditorClicking the green arrow next to the property opens the code editor for the element, where you can define the GUI layout. The same can be achieved by clicking on the 'XAML Content' snippet.
Is Input EnabledDefines whether the user input is allowed into the GUI layout. If the value is false, the GUI layout is shown but its XAML elements are can not receive an user input (e.g. by the keyboard or mouse).Boolean
Visual ThemeDefines a visual theme for the element's GUI. (Metro Dark / Light / White)

+=== Properties inherited from clVisualElement ===
NameDescriptionConstraintsValue TypeUpon Runtime Change
Alpha MaskingDefines whether the visual content rendered by this element will be used as an opacity mask which is applied onto the given event surface. The active opacity mask allows one to expose pixels of the parent event surface through a solid background of the given event. If the value is true, the darker pixels of the content will make more transparent holes on the entire event surface.Boolean
AntiAliasingIf true, the rendered content will be anti-aliased for smoother visual appearance. If false, rendering will be authentic to its source, e.g. a bitmap. Boolean
PositionDefines the position of the element viewport on the screen. The position can be set in any of three coordinate systems: a) pixels, b) polar, c) central. clPoint
SizeDefines the size of the element viewport on the screen. The size can be set in any of three coordinate systems: a) pixels, b) visual degrees, c) 'relative-to-screen' size. clSize
Z OrderIndicates the current depth order of the element viewport on the surface of the parent event. The greatest number corresponds to the top position. The order can be changed by moving the element up and down in the element list.Int32
Pivot PointDefines the pivot point (coordinate and the rotation centers) within the element viewport. stAlignment or Int32
VisibleDefines whether the element is currently visible on the event surface. The property is convenient for switching visual content on and off. Boolean
RotationDefines the rotation angle (in degrees) of element viewport relative to the its pivot point. Double in the range 0..360
Transparent ColorThe color of the original pixels of rendered content that will be set as transparent. stColor
Transparency ToleranceTolerance ratio for choosing colors that become transparent. Zero means that effect is not applied, 1 denotes that all colors will become trasparent. Int32, range (0..100)
Color MaskProduces a multiplicative combination of the original pixels and the selected mask color (except the alpha channel). The effect emulates a look through a colored glass. White or transparent mask color doesn't change the original pixels. stColor
OpacityOpacity of the rendered content. Int32, range (0..100)
ContrastContrast of the rendered content. Int32, range (-100..100)
BrightnessDefines the brighness of the rendered content. Int32, range (-100..100)
SaturationSaturation of the rendered content. Double
PixelationDefines the pixel scale of the rendering. Int32, range (0..100)
BlurringThe radius used in the gaussian blur of rendered content, as a pixel-based factor. The default is 0 which means no blurring. Int32
Reset JitterSet to true at runtime to reset the current positional jitter.Boolean, set true for action
Current JitterJitter range, in pixels (non inclusive)..clSize
Jitter RangeJitter range, centered at the original position of the element.. clSize

+=== Properties inherited from clElement === Inherited properties of clElement
NameDescriptionConstraintsValue TypeUpon Change
Is EnabledIf set to false the element is completely omitted when the experiment is run.Boolean
TitleTitle of the element.String

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


The GUI Panel 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 panel 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)


Example response form made from xaml code

Example response form
made from xaml code

Code can be accessed by  clicking on the

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

Right clicking in the code plane brings up a menue
from which one can select "Insert Code Template"

 A list of Example templates

A list of Example templates

Practical Use

Creating a simple response form

  1. Add a new event. Then click on "Add Element" -> "USER INTERFACE" -> 'GUI Panel'.
  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

    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"/>
    <UniformGrid Columns="3" Rows="1"/>

    <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"/>
  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 Panel element in action are available in the Demo Gallery within EventIDE: Demos -> Classical Paradigms -> 'Attentional Blink in RSVP' and Demos ->Questionnaires.


XAML will automatically scale the graphic to match the canvas.

ScrewTurn Wiki version Some of the icons created by FamFamFam.