A Matter of Controls

19 May 2010 23:46
Last Modified
13 Jan 2013 17:45

Up to this point, I've had numerous settings which I can control using a keyboard-driven menu. One of the key things I've been looking at recently is to "touch-enable" these settings, so that a keyboard is not necessary. This will enable interaction via touchscreen, Microsoft Surface etc.

There are several different types of settings, including:

  1. Boolean values
  2. Floating-point values
  3. Integer values

The control had to support the following:

  1. Different data types
  2. Multidirectionality
  3. Multitouch manipulations, at least for translation and rotation
  4. Multiple simultaneous instances of the control
  5. Keyboard support with "tab stops"

Boolean Values

For boolean values, I've used a "radial" control which renders an arbitrary number of segments which can be selected/deselected. An early version is shown below in Figure 1.

Boolean settings

Figure 1. Radial control for boolean settings

Floating-Point Values

When floating-point values are selected, I add a radial scale and a dial which can be rotated to set the appropriate value. An early version is shown below in Figure 2.

Float settings

Figure 2. Radial control for float settings


In order to navigate a "tree-view" of settings, the current "category" is displayed, along with a "Back" button to navigate back to the parent category. Child categories are shown as segments on the menu, along with settings for the current category. The currently-selected setting is indicated by a "focus" arc, and "pressed" buttons can be highlighted using different colors and opacities.


Mike Goatly
20 May 2010 15:37
That looks inspired, Dave! I totally get the boolean example, each of the panels is on or off, but from looking at the second example, I don't see how you know which of the values you're currently editing (distance rate or distance) - maybe it makes more sense when you're playing with it though.
20 May 2010 22:13
Thanks Mike.

The intention was to use the "focus arc" (shown around the right-hand segment in Figure 2 above) to indicate the current property segment which has focus. I could also have a "focus state" for the property segment but was going to try and limit the states to "on", "off", and "pressed". Hence in Figure 1, if I pressed a given property segment, it would change to a pressed state and the focus arc would appear alongside it, then flip to the opposite (on/off) value when released.

Similarly, I could "navigagte" around the property segments with the keyboard which would simply move the "focus arc". A further key-press would be required to flip a focussed boolean property value, or increase/decrease a focussed floating point property value.
Austin Rutherford
17 May 2012 16:32
These controls look amazing. May I ask how you created them? I would like to create something similar for an arcGIS app that I'm currently working on for a Surface device. Source code would be helpful ;)
22 May 2012 20:45
Thanks Austin :)
The controls are all drawn from first-principles using simple shaders. The meshes are created algorithmically, and appropriate texture coordinates allow me to use color gradients. For these early versions, I used XNA's SpriteBatch to render text.

Add Comment