Skip to content

Quick Start

This step-by-step tutorial leads you through the creation of a simple app that uses the Kinemic Gesture SDK to provide gesture interaction.

We show you how to:

You can find more information about the Kinemic Gesture SDK in the Basic Usage Overview.

Prerequisites

This guide assumes you bought our Kinemic Band that comes with access to our Kinemic Gesture SDK.

Create a project

Create a project in Visual Studio using File > New Project... and selecting the Windows Universal > Blank App (Universal Windows).

Add the Gesture SDK

We provide access to our UWP SDK using an Artifactory NuGet repository.

To configure the NuGet Visual Studio Extension to use Artifactory, you need to add our repository as another Package Source under NuGet Package Manager.

  1. Go to the "Package Manager Settings" in your Visual Studio (Tools > NuGet Package Manager > Package Manager Settings > Package Sources) and add another Package Source.
  2. Name: Add a name for the package source (e.g. Kinemic Develop)
  3. Paste the snippet below in the URL field
    1
    https://kinemic.jfrog.io/kinemic/api/nuget/nuget-develop
    

To integrate our SDK into your UWP application, install our NuGet package (from the repository we just added).

  1. In Solution Explorer, right-click References and choose Manage NuGet Packages.
  2. Choose "Kinemic Develop" as the Package source, select the Browse tab, search for Kinemic.Gesture.UWP.UAP10, select that package in the list, and select Install.

Congratulations, you are now ready to use our SKD!

Add Bluetooth capabilities

In order to search for Bluetooth devices, your app has to declare the Bluetooth device capability:

  1. Double-click Package.appxmanifest and select Capabilities.
  2. Set a check mark on Bluetooth.

Get an Engine Instance

The central object you will communicate with is an instance of our Engine class. The Engine also holds the bluetooth connection to the Kinemic Band. In most apps you will use a single instance. We provide a static property Kinemic.Engine.Default to access a shared instance from anywhere in your application.

Add this code to your MainPage.xml.cs to get an instance of the shared Engine in the constructor of the Page.

All classes of the Kinemic Gesture SDK are located in the Kinemic.Gesture namespace.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
using Kinemic.Gesture;

...

// our handle to the shared engine
private Engine engine;

public MainPage()
{
    this.InitializeComponent();

    // Get the shared engine instance
    this.engine = Engine.Default;
}

Connect nearest Kinemic Band

There are two ways to search for and connect to Kinemic Bands, you can either search for Bands and let the user select one or let the Engine connect to the nearest Band. We will use the second approach here with a call to Engine.ConnectStrongest(). After calling this method, updates about the current chosen Band and the confidence of the choice are reported through the BandFound event.

Add this code to the Pages's OnNavigatedTo() to search for and connect to the nearest Band.

1
2
3
4
5
6
7
...

override protected void OnNavigatedTo(NavigationEventArgs e)
{
    // connect to the nearest Kinemic Band
    engine.ConnectStrongest();
}

To match the connect call, add the code to disconnect the Band to your Page's OnNavigatingFrom().

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
...

// the current band
private String band;

override protected void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    // disconnect our Kinemic Band
    if (band != null) engine.Disconnect(band);
}

Handle Connection State Changes

The Engine instance lets you register event handlers to be notified about state changes and events. Let's create a ConnectionStateChanged event handler to be notified about changes of the connection state to Kinemic Bands.

1
2
3
4
5
6
7
8
private void Engine_ConnectionStateChanged(Engine sender, ConnectionStateChangedEventArgs e)
{
    // remember the current band we interact with
    band = e.Band;

    // show a message on screen when connection state changes
    TextBlock.Text = e.Band.Substring(0, 5).ToUpper() + " - Connection state: " + e.State.ToString();
}

We register event handlers in the Page's constructor. They are automatically removed when the page is destroyed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
public MainPage()
{
    this.InitializeComponent();

    // get the shared engine instance
    this.engine = Engine.Default;

    // register event handlers
    this.engine.ConnectionStateChanged += Engine_ConnectionStateChanged;
    this.engine.GestureDetected += Engine_GestureDetected;
}

To display our messages, we add a TextBlock to our MainPage.xaml:

1
2
3
4
5
6
7
8
<Page>

...

    <Grid>
        <TextBlock x:Name="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
    </Grid>
</Page>

Handle Gesture Events

As with the ConnectionStateChanged event handler you register a GestureDetected event handler, to be notified about gesture events.

1
2
3
4
5
private void Engine_GestureDetected(Engine sender, GestureDetectedEventArgs e)
{
    // show a message on screen for each gesture event
    TextBlock.Text = e.Band.Substring(0, 5).ToUpper() + " - Detected gesture: " + e.Gesture.ToString();
}

Give Haptic Feedback

It is a good idea to give users feedback when they interact with your app via gestures. One way to do this is haptic feedback which uses the vibration motor in the Kinemic Band.

Let's add some haptic feedback for every gesture by calling Engine.Vibrate() in GestureDetected event handler.

1
2
3
4
5
6
7
8
private void Engine_GestureDetected(Engine sender, GestureDetectedEventArgs e)
{
    // show a message on screen for each gesture event
    TextBlock.Text = e.Band.Substring(0, 5).ToUpper() + " - Detected gesture: " + e.Gesture.ToString();

    // give haptic feedback for every gesture
    this.engine.Vibrate(e.Band, 300);
}

Next Steps

Congratulations! You wrote your first UWP app with gesture control using the Kinemic Gesture SDK!

Want more? Take a look at our other guides and samples.

Sources

If you missed something, here is the full code of your MainPage.xaml.cs:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

using Kinemic.Gesture;

namespace kinemic_quickstart_uwp_app
{

    public sealed partial class MainPage : Page
    {
        // our handle to the shared engine
        private Engine engine;

        // the current band
        private String band;

        public MainPage()
        {
            this.InitializeComponent();

            // get the shared engine instance
            this.engine = Engine.Default;

            // register event handlers
            this.engine.ConnectionStateChanged += Engine_ConnectionStateChanged;
            this.engine.GestureDetected += Engine_GestureDetected;
        }

        override protected void OnNavigatedTo(NavigationEventArgs e)
        {
            // connect to the nearest Kinemic Band
            engine.ConnectStrongest();
        }

        override protected void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            // disconnect our Kinemic Band
            if (band != null) engine.Disconnect(band);
        }

        private void Engine_ConnectionStateChanged(Engine sender, ConnectionStateChangedEventArgs e)
        {
            // remember the current band we interact with
            band = e.Band;

            // show a message on screen when connection state changes
            TextBlock.Text = e.Band.Substring(0, 5).ToUpper() + " - Connection state: " + e.State.ToString();
        }

        private void Engine_GestureDetected(Engine sender, GestureDetectedEventArgs e)
        {
            // show a message on screen for each gesture event
            TextBlock.Text = e.Band.Substring(0, 5).ToUpper() + " - Detected gesture: " + e.Gesture.ToString();

            // give haptic feedback for every gesture
            this.engine.Vibrate(e.Band, 300);
        }

    }
}

You can also checkout the complete project at GitHub.