Thursday, November 10, 2016

Using a Surface Dial to scroll through a playing track

So, I'm very impressed with the new Surface Dial. It's smaller than I was expecting but feels really nice to use. Plus it's easy to program!

Official links are here. Or see the sample I put together below.
Instructions on pairing: https://www.microsoft.com/surface/en-us/support/getting-started/meet-surface-studio-surface-dial
Coding instructions: https://msdn.microsoft.com/en-us/windows/uwp/input-and-devices/windows-wheel-interactions
Official sample: https://github.com/Microsoft/Windows-universal-samples/tree/b78d95134ce2d57c848e0a8dc339fc362748fb9c/Samples/RadialController

Yes, it's an ugly app but I wanted to see how easy it would be to use it to skip back and forwards through a playing track. I'll often be listening to podcasts and skip back a little bit to have something repeated. I thought this would be a suitable tool for such a task.

It's a simple app.

  • Pick a track and it starts playing.
  • Tap the dial to toggle pause and playback.
  • Scroll the dial to move forwards and backward through the track.
  • There's also a button to toggle playback and a visualization of how far through the track it is.
Point of note:

  • It's possible to automatically select the (radial) menu item but I couldn't get it to set in the page constructor, OnNavigatedTo event, or the Loaded event. Because it's tied to the window (so different apps can have different menu items selected) I can understand why it needs a window available but I would have thought this possible in the Loaded event. Instead, I set this when a track is picked in my code.

There's lots more that can be done with the dial. Including:

  • Handling velocity of scrolling
  • Haptic feedback
  • Placement on screen (but I'll need a Surface Studio for that)


Code embedded below and at https://gist.github.com/mrlacey/892d178f01e622b82bfb901c836f116b#file-mediadial-xaml



Other SurfaceDial projects to check out:
https://github.com/LanceMcCarthy/DialInVideoEffects

0 comments:

Post a Comment