This chapter shows how to setup a simple application that uses eye tracking. There is one example on how to setup a Console application and another for the WPF application.

Installation

No development for eye tracking can successfully be done without the eye tracking device itself. Please, make sure that the eye tracker and its corresponding software has been installed and setup properly before proceeding.

If you are on a laptop or using a monitor with built-in eye tracker you are most probably ready to start. However, if you possess a peripheral eye tracker you may need to carry out the instructions provided with your device to download and install the Tobii Core Software from tobiigaming.com before proceeding with the code examples.

Tobii Core SDK package

The Tobii Core SDK provides all tools needed to start exploring the eye tracking features. We have chosen to reference the software development kit from NuGet server via the solution explorer that hosts your project, both for the Console- and the WPF applications below. The NuGet package manager is a great and convenient way to add third party libraries to your application, such as the Tobii Core SDK.

We add the Tobii Core SDK package by:

  • Right click on the project's reference folder and choose Manage NuGet Packages... from the menu.

  • Browse for the Tobii Core SDK package and click install. The project shall now be referencing Tobii.Interaction.Model.dll and Tobii.Interaction.Net.dll. Also, notice that project.json has been added/updated in the project folder.

Configure the build architecture to x86 to prevent potential warnings and build errors.

Let's code

Now when all components have been installed we are ready to write and test some sample code.

Getting started with a Console application

This example shows how to use eye tracking by incorporating it with a simple Console application. The easiest way is probably to create a new Console application in C# by using Visual Studio. If you prefer to start from an already existing WPF application you may jump straight into the Getting started with a WPF application below.

We have chosen to output the coordinates of the user's gaze when looking at the screen. Please, add the following lines of code to the Main() function in Program.cs of your Console application:

using Tobii.EyeX;

// ...

public static void Main(string[] args)
{
    var host = new Host();
    var gazePointDataStream = host.Streams.CreateGazePointDataStream();
    gazePointDataStream.GazePoint((gazePointX, gazePointY, _) => Console.WriteLine("X: {0} Y:{1}", gazePointX, gazePointY));
}

// ...

When running this example you will see a constant stream of coordinates in the Console window.

  • First we have instantiated the Host which serves as entry point into the Tobii Core SDK. The host primarily provides us with various eye tracking features, but it also creates a connection between the application and the Interaction Engine. The Interaction Engine is part of the Tobii Eye Tracking Core Software and works as a back-end which provides connection to the eye tracker, keeps firmware up-to-date and makes development for eye tracking easier.

  • Next we have used host to instantiate the GazePointDataStream, as gazePointDataStream. It contains coordinates, GazePointData, of your gaze location plus the corresponding timestamps.

  • Finally, we have subscribed to the GazePointDataStream with the callback Console.WriteLine(), which will be invoked when data is pushed to the stream.

Getting started with a WPF application

In this example we are going to add gaze features into your WPF application in Visual Studio C#. We have chosen to let the window change color when the user is looking at it, which is called GazeAwareBehavior.

In order for your application to use the eye tracker it needs to be registered as an Interaction Engine client, for to communicate with the eye tracker.

Open the App.xaml.cs of your WPF application and add the following code:

// Inside App.xaml.cs

...
using Tobii.EyeX;
using Tobii.EyeX.Wpf;

...

public partial class App : Application
{
    private Host _host;
    private WpfInteractorAgent _wpfInteractorAgent;

    protected override void OnStartup(StartupEventArgs e)
    {
        _host = new Host();
        _wpfInteractorAgent = _host.InitializeWpfAgent();
    }

    protected override void OnExit(ExitEventArgs e)
    {
        _host.Dispose();
        base.OnExit(e);
    }
}

For now, we do not care about the precise meaning of the code. We will look into the details later in the Interactors chapter. The main thing here is to get the application up and running.

In order to figure out if the user is looking at the window we use the GazeAwareBehavior. So let's specify that the Grid shall become gaze aware by typing the following code:

<Window 
        ...
        xmlns:tobii="clr-namespace:Tobii.EyeX.Wpf;assembly=Tobii.EyeX.Net"
        ...
        >
    <Grid x:Name="LayoutRoot"
          tobii:Behaviors.IsGazeAware="True">
        <Grid.Style>
            <Style TargetType="Grid">
                <Setter Property="Background" Value="White" />

                <Style.Triggers>
                    <Trigger Property="tobii:Behaviors.HasGaze" Value="True">
                        <Setter Property="Background" Value="Magenta" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
    </Grid>
</Window>
  • We have added the attached property Behaviors.IsGazeAware = "True" to the Grid element.
  • Also we have created a style for the Grid control in which we put a trigger on another attached property, the Behaviors.HasGaze. It means that Grid will have white background when nobody is looking at the window and magenta when user is looking at the window.

Run the example to see that it works.

From here you can start reading about Interactors or jump directly into the WPF chapter to find out what other features based on gaze you can use in a WPF application.