Simulate the Surface Dial

The Surface Dial, and the RadialController API provide an interesting new input metaphor. You may have some ideas of how you could use it but don’t actually have the hardware. Since I tried creating an Etch-a-Sketch app using the dial I was thinking about how to implement a second dial.

Most of us already have a mouse with a central wheel. I decided that for the purposes of prototyping apps for the dial, or to implement a second dial-like device I could create an API around that wheel. There are a few limitations but the basic functionality is the same. The SimulatedRadialController class was born and after a few tweaks to adjust for the fact the mouse wheel reports movement in large steps (30 degrees in my testing) so I reduced this down to perform smaller movements.

The control is packaged up with NuGet. The code to use it is essentially the same as the code for the built in RadialController, the main difference being the lack of a Menu to support multiple tools. You hook up the events:-

c = SimulatedRadialController.CreateForCurrentView();
c.RotationChanged += C_RotationChanged;
c.ButtonClicked += C_ButtonClicked;

The rotation event just changes the angle of a RotateTransform on a UI element:-

private void C_RotationChanged(SimulatedRadialController sender, SimulatedRadialControllerRotationChangedEventArgs args)
{
        WheelTransform.Angle += args.RotationDeltaInDegrees;
}

I plan to add this to the previous Etch-a-Sketch sample app to provide both horizontal and vertical controls using the Dial and mouse wheel as left and right controls.

 

Advertisements