Reply To: UWP Community Toolkit Gaze Animation

[Denny [Tobii]]

Hi @milesb

Great to hear you are using the toolkit to accelerate your UWP development.

I would suggest to create a popup layer to render the circle in, and implement a handler for the dwell state provided by the Gaze Interaction Library.

First create the popup layer with an ellipse in your XAML:

<Popup x:Name="_gazeMarker" Grid.Column="0" Grid.Row="0" 
         HorizontalAlignment="Left" VerticalAlignment="Top" 
         IsOpen="True" IsHitTestVisible="False">
    <Ellipse x:Name="_dwell" Opacity="0.3">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="_dwellScale" />
                <TranslateTransform x:Name="_dwellPosition" />
            </TransformGroup>
        </Ellipse.RenderTransform>
    </Ellipse>
</Popup>

... tell the Gaze Interaction Library that you handle the dwell progress feedback (on a button for instance):

<Button VerticalAlignment="Center" HorizontalAlignment="Center" 
    Click="Button_Click"
    Content="Click me please">
    <gaze:GazeInput.GazeElement>
        <gaze:GazeElement DwellProgressFeedback="GazeElement_DwellProgressFeedback"/>
    </gaze:GazeInput.GazeElement>
</Button>

... and then change the rendering of the circle in the dwell progress handler in your codebehind:

private void GazeElement_DwellProgressFeedback(object sender, DwellProgressEventArgs e)
{
    var target = sender as FrameworkElement;
    if (target == null) return;

    // Find out where to render the dwell indicator
    var targetPosition = target.TransformToVisual(_gazeMarker).TransformPoint(new Point(0, 0));
    var targetWidth = target.ActualWidth;
    var targetHeight = target.ActualHeight;

    // Set the size 
    var maxRadius = Math.Min(targetWidth, targetHeight);
    var radius = Math.Min(maxRadius / 1.61803398875, 100);
    _dwell.Width = radius;
    _dwell.Height = radius;
    _dwellPosition.X = targetPosition.X + (targetWidth - _dwell.Width) / 2;
    _dwellPosition.Y = targetPosition.Y + (targetHeight - _dwell.Height) / 2;
    _dwellScale.CenterX = _dwell.Width / 2;
    _dwellScale.CenterY = _dwell.Height / 2;
    _dwellScale.ScaleX = 1.0f - e.Progress;
    _dwellScale.ScaleY = 1.0f - e.Progress;

    // Set the color and visibility of the indicator
    switch (e.State)
    {
        case DwellProgressState.Fixating:
            _dwell.Visibility = Visibility.Visible;
            _dwell.Fill = GazeInput.DwellFeedbackEnterBrush;
            break;
        case DwellProgressState.Progressing:
            _dwell.Visibility = Visibility.Visible;
            _dwell.Fill = GazeInput.DwellFeedbackProgressBrush;
            break;
        case DwellProgressState.Complete:
            _dwell.Visibility = Visibility.Visible;
            _dwell.Fill = GazeInput.DwellFeedbackCompleteBrush;
            break;
        case DwellProgressState.Idle:
            _dwell.Visibility = Visibility.Collapsed;
            break;
    }

    // And tell the interaction library that you handled the event
    e.Handled = true;
}

Let us know if you have and further questions/feedback on eye tracking in UWP or the gaze interaction library.