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:
- Boolean values
- Floating-point values
- Integer values
The control had to support the following:
- Different data types
- Multidirectionality
- Multitouch manipulations, at least for translation and rotation
- Multiple simultaneous instances of the control
- 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.
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.
Figure 2. Radial control for float settings
Navigation
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.
Comments
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.
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