Home › Forums › Software Development › UWP Community Toolkit Gaze Animation
- This topic has 2 replies, 2 voices, and was last updated 5 years, 11 months ago by Miles Bardon.
- AuthorPosts
- 14/11/2018 at 22:20 #9020Miles BardonParticipant
I am trying to write a UWP app that takes Gaze data from my Tobii 4C and allows me to interact with a Windows 10 UWP app using the Microsoft.Toolkit.Uwp.Input.GazeInteraction library. According to their own docs, I can override the current dwell animation from a shrinking rectangle by overriding the
DwellProgressFeedback
event handler withe.Handled = true;
.Has anyone had any experience changing this? If possible I’d like to have a circle fill up around the user’s gaze during a dwell, and change colour on a click.
If you want to look more at my code, it is all freely accessible at https://github.com/Tohaker/UWP-EyeControl/tree/development 🙂
24/11/2018 at 10:41 #9044Denny [Tobii]MemberHi @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.
24/11/2018 at 12:47 #9045Miles BardonParticipantHi Denny,
Thanks for getting back to me, this is a brilliant solution! Now I can get back to actually implementing the core functionality 😉
Many thanks,
Miles
- AuthorPosts
- You must be logged in to reply to this topic.