CurrentValueChanged<\/code> event handler is fired every 20ms and jitters within the error margin for the hardware. Our task is to smooth out these data readings for a more pleasant user interface. And to make it fun, we’ll be using Reactive Extensions.<\/p>\nIt’s quite easy to calculate a periodic average of a data stream with Reactive Extensions, and we’ll tackle it in three stages:<\/p>\n
\n- Create the
Observable<\/code><\/li>\n- Segment the compass readings into chunks, and get an average<\/li>\n
- Capture the result and make something happen<\/li>\n<\/ol>\n
Step 1: Create the Observable<\/code><\/h2>\nStarting with the Compass’s CurrentValueChanging<\/a> event, we need to convert it into an Observable. After creating a new Compass object (hereafter simply called “compass<\/code>“), we can write this with any overload of Observable.FromEvent<\/a>, either by manually providing delegates to add\/remove event subscriptions (as commonly listed on RxWiki<\/a>), or by providing the event name as a string:<\/p>\n[embedGist source=”https:\/\/gist.github.com\/2607208″]<\/p>\n
For succinctness, I’ll use the latter in this post.<\/p>\n
If we stop right here for a moment, we can confirm that our compass is working and that we can get readings by subscribing to the Observable<\/code>‘s stream of SensorReadingEventArgs<\/code> events by tapping in with the Subscribe<\/code> method and printing out the raw heading readings:<\/p>\n[embedGist source=”https:\/\/gist.github.com\/2607213″]<\/p>\n
Running this sample will spit out an endless series of raw readings in the debug output window:<\/p>\n
![\"\"](\"https:\/\/i.imgur.com\/TQ2zM.png\" "\\"Raw")
<\/p>\n
So far, so good. But, we could’ve done this all with a standard event handler, so let’s kick it up an notch…<\/p>\n
Step 2: Break into chunks and average<\/h2>\n
We want to avoid jitter in our compass readings, and a simple way to do that is to average all the individual readings over a small time period, of say, two seconds. Without Rx, you’d need to declare a period reset timer, and then keep track of a running average over the two second period, then clear it when the timer fires and so forth.<\/p>\n
With Rx, it’s chillingly simple; we can do it by chaining just two methods: BufferWithTime<\/code> followed by a standard Linq SelectMany<\/code> (well, and a Select<\/code>). And it’s all in a single statement.<\/p>\n[embedGist source=”https:\/\/gist.github.com\/2608813″]<\/p>\n
Running this will spit out readings just like before, except now, they’re clumped every two seconds, with a pause in between.<\/p>\n
![\"\"](\"https:\/\/i.imgur.com\/v2dnZ.png\" "\\"Buffered")
<\/p>\n
Let’s break it down:<\/p>\n
Picking up after creating the Observable<\/code>, we chain a call to BufferWithTime<\/code><\/a>. For the specified period (two seconds, passed in with TimeSpan.FromSeconds(2)<\/code>, BufferWithTime<\/code> takes events and stuffs them into an IList<\/code> of events. Then, we use Select<\/code> to project that list of events into a list of compass headings (pulled out of the event args, e.EventArgs.SensorReading.TrueHeading<\/code>). The Subscribe<\/code> method, as before, allows us to debug print the compass headings to confirm.<\/p>\nHere’s the full application so far:<\/p>\n
[embedGist source=”https:\/\/gist.github.com\/2608127″]<\/p>\n
Our raw compass readings are broken into two-second lists, but they’re still individually jittery. However, we can instead take each list and aggregate it into a single heading value. By replacing the SelectMany<\/code>, which gave us a list of headings, with a Select<\/code>, we can do the averaging right inline:<\/p>\n[embedGist source=”https:\/\/gist.github.com\/2609744″]<\/p>\n
And this gives us one average compass heading every two seconds, minus the jitter, just like we wanted:<\/p>\n
![\"\"](\"https:\/\/i.imgur.com\/cUa70.png\" "\\"Average")
<\/p>\n
Complete program listing so far:<\/p>\n
[embedGist source=”https:\/\/gist.github.com\/2609858″]<\/p>\n
Step 3: Making something happen<\/h2>\n
We now have de-jittered compass readings coming in every two seconds. Let’s hook this data up to the UI and build an actual application.<\/p>\n
Taking this empty Windows Phone project, I’ve added the following Image<\/code> into the default content Grid<\/code>:<\/p>\n[embedGist source=”https:\/\/gist.github.com\/2613124″]<\/p>\n
There’s nothing special here, it’s just an image with a default RenderTransform<\/code> that sets the rotational center of the image element to the middle.<\/p>\n
![\"\"](\"https:\/\/factormystic.net\/blog\/wp-content\/uploads\/2012\/05\/screenshot-180x300.png\" "\\"running")
<\/a><\/p>\n