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.
xmlns:gauges="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"

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" 
    MaxValue="100"
    MinValue="0"
    LabelStep="10"
    TickStep="10" 
    TickTemplate="{StaticResource EmptyTickTemplate}"			
            >
    <gauges:SegmentedRadialGaugeIndicator Value="0" IsAnimated="True" AnimationDuration="0:0:0.5" >
        <gauges:SegmentedRadialGaugeIndicator.AnimationEasing>
        	<SineEase EasingMode="EaseIn"/>
        </gauges:SegmentedRadialGaugeIndicator.AnimationEasing>
        <gauges:BarIndicatorSegment  Stroke="Blue" Length="70" RenderTransformOrigin="0.2,0" Thickness="5" />
        <gauges:BarIndicatorSegment  Length="30" Stroke="Green" Thickness="5" />
    </gauges:SegmentedRadialGaugeIndicator>
	<gauges:MarkerGaugeIndicator Value="70" Margin="14,-50,0,1" MarkerTemplate="{StaticResource MarkerTemplate}" />
</gauges:RadialGaugeRange>

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"/>
    <LineBreak/>
    <Run Text="* Count back from 100"/>
    <LineBreak/>
    <Run Text="* Sing a song silently"/>
    <LineBreak/>
    <Run Text="* Stare at a specific object"/>
</TextBlock>

We should now have a well designed page with a gauge for each eSense and instructions on how to use it.
2012-09-25_14-58-14.png

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)
        {
            Mindwave.Current.Start();
        }

        if (Mindwave.Current.IsDataValid)
        {
            SetGaguesValueTo(Mindwave.Current.CurrentValue);
        }

        Mindwave.Current.CurrentValueChanged += Current_CurrentValueChanged;

        base.OnNavigatedTo(e);
    }

    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)
        {
            SetGaguesValueTo(e.SensorReading);
        }
    }

    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.
Lumia920Yellow_Gauges_small.png

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

Comments

No comments yet.