Creating eSense Attention & Meditation Gauges

Using Telerik Windows Phone controls it's pretty easy to setup two gagues for each of the eSenses: Attention and Meditation.

1. Download Telerik Windows Phone controls and a reference to the following DLLs: Telerik.Windows.Controls.Chart.dll, Telerik.Windows.Controls.DataVisualization.dll, Telerik.Windows.Controls.Primitives.dll and Telerik.Windows.Core.dll.

2. Add the following XML namespace to your XAML.

3. Setup a gauge for each eSense. For example here's the gauge for Attention. The interesting thing about this gauge is that it has two segments: a blue segment with a length of "70" and a green segment with a length of "30". There's no databinding going on since we'll assign the values directly from code behind to the Indicator.
<gauges:RadialGaugeRange x:Name="gaugeAttention" 
    TickTemplate="{StaticResource EmptyTickTemplate}"			
    <gauges:SegmentedRadialGaugeIndicator Value="0" IsAnimated="True" AnimationDuration="0:0:0.5" >
        	<SineEase EasingMode="EaseIn"/>
        <gauges:BarIndicatorSegment  Stroke="Blue" Length="70" RenderTransformOrigin="0.2,0" Thickness="5" />
        <gauges:BarIndicatorSegment  Length="30" Stroke="Green" Thickness="5" />
	<gauges:MarkerGaugeIndicator Value="70" Margin="14,-50,0,1" MarkerTemplate="{StaticResource MarkerTemplate}" />

4. Add some nice UI around the gauge like a title, instructions for users on how to elevate the eSense, a Boolean indicator to show if the eSense is elevated or not, etc.
<TextBlock HorizontalAlignment="Left" Height="68" Margin="94,55,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" TextWrapping="Wrap" Text="Awareness:" VerticalAlignment="Top" Width="214"/>
<TextBlock x:Name="txtIsAware" HorizontalAlignment="Left" Height="68" Margin="308,55,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" TextWrapping="Wrap" VerticalAlignment="Top" Width="80"/>
<TextBlock HorizontalAlignment="Left" Height="111" Margin="94,112,0,0" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" VerticalAlignment="Top" Width="294">
    <Run Text="* Hold a single thought"/>
    <Run Text="* Count back from 100"/>
    <Run Text="* Sing a song silently"/>
    <Run Text="* Stare at a specific object"/>

We should now have a well designed page with a gauge for each eSense and instructions on how to use it.

5. Once the page has been navigated too, start the Mindwave Sensor and listen to new MindwaveReadings.
    protected override void OnNavigatedTo(NavigationEventArgs e)
        if (!Mindwave.Current.IsConnected)

        if (Mindwave.Current.IsDataValid)

        Mindwave.Current.CurrentValueChanged += Current_CurrentValueChanged;


    protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        Mindwave.Current.CurrentValueChanged -= Current_CurrentValueChanged;

6. Whenever a new MindwaveReading is available and it has reliable data, update the gauges to reflect it.
    private void Current_CurrentValueChanged(object sender, MindwaveReadingEventArgs e)
        if (e.SensorReading.IsDataReliable)

    private void SetGaguesValueTo(MindwaveReading mindwaveReading)
        ((SegmentedGaugeIndicator)gaugeAttention.Indicators[0]).Value = mindwaveReading.eSenseAttention;
        ((SegmentedGaugeIndicator)gaugeMeditation.Indicators[0]).Value = mindwaveReading.eSenseMeditation;

        txtIsAware.Text = mindwaveReading.eSenseAttention >= 70 ? "Yes" : "No";
        txtIsMeditative.Text = mindwaveReading.eSenseMeditation >= 70 ? "Yes" : "No";

When running this code sample we can see the gauges are changed to reflect the appropriate values.

Last edited Sep 25, 2012 at 10:05 PM by JustinJosefAngel, version 4


No comments yet.