If you wanted to copy these words, would you tap them with your finger?

For around half of readers, the answer is yes. Touchscreens have become the de facto standard for consumer electronic interfaces, with nearly all of us owning at least one device that we gently caress throughout the day.

Touchscreens are not limited to phones and tablets. A rising number of applications—spanning automotive, medical, industrial and beyond—are incorporating touch interfaces. Users expect it; they’re familiar with it. But there are drawbacks to touchscreens, as well. For quick, no-look adjustments, tactile interfaces are still the best option.

But why choose between touch and tactile? Grayhill, a manufacturer of “human interface solutions,” offers what it considers the best of both words: the Grayhill Touch Encoder. This interface device features a round touchscreen display atop a rotary encoder, finished with a knurled stainless-steel knob.

Intuitive Human Interface

According to Grayhill, the Touch Encoder is a versatile and intuitive interface for applications in aerospace, robotics, medical devices, off-highway vehicles—anywhere that can benefit from a smaller interface footprint. It can replace a sprawl of switches with a compact, user-friendly device that is programmable for any situation.

How? The 33mm diameter, 330ppi color touchscreen display can store hundreds of screens called widgets, each with programmable touch and rotary functions. In this way, the Touch Encoder can be configured to control a variety of functions though taps, swipes or rotations, via USB or CAN bus. It allows designers to reduce the size of an interface and easily add support for different product configurations, such as for multiple languages.

To get a better idea of how the Touch Encoder works and how it can be configured, Grayhill sent us their Touch Encoder development kit for a hands-on look.

The Touch Encoder Development Kit

The Touch Encoder development module consists of a Touch Encoder mounted on a base with a Micro-USB and power port. The development kit comes with a power supply and socket adaptors for plug types A (North America), C (Europe), G (UK), and I (Australia). It also includes a programming cable (male Micro-USB to female USB-A), a Micro-USB to USB-A adaptor, a CAN Bus interface cable, and a double-sided Lighting/USB-A thumb drive.

The development kit can optionally include an iPad, which is necessary as the Touch Encoder can only be programmed through an iPad app. However, according to Grayhill, Android and Windows applications are in development and will be available soon.

In order to program the Touch Encoder, users will need to download the Grayhill app. There are two Grayhill apps currently on the App Store—make sure you download the one called “GH TE-MX”.

Once you open GH TE-MX, it will prompt you to register your email address and then send you an access code to use the app. If you don’t see it, check your spam folder—that’s where ours ended up.

Programming the Touch Encoder

One of the Touch Encoder’s selling points is that it’s easy to program—you shouldn’t have to be a software developer to get it up and running. The first screen of the app gives you no choice but to start a New Project:

We’ll give ours the name “engineering.com”. It opens on a blank, round screen representing the Touch Encoder. There’s little we can do besides toggle a grid on the screen (to help align visuals) or add a widget, which is what we’ll do. The app comes with nearly 30 widget templates, such as static text, remotes, rings and gauges, menus and more. There’s also an option to define custom templates.

We’ll go with the very first option, a static image of the Grayhill logo. Nice as it is, let’s replace it. We can choose from a large library of symbols (fans, lightbulbs, volume, etc.), but let’s go custom with the engineering.com logo.

Though it’s easy to upload your own images, either locally or from Google Drive, the touch interface of the iPad makes it a bit tricky to size and position them precisely. You can input exact x, y, width, and height values, but a keyboard and mouse would do the trick better, so it will be nice when the Windows application goes live. You can also adjust the color of the image uniformly, which is fine for monochromatic icons, but washes out our black-on-white logo entirely. So, you’ll probably want to use PNGs.

Before we can do anything interesting with this widget, we’ll need to add another. This time we’ll choose a 3-icon menu widget. By default, it looks like this:

By turning the knob, users rotate through each of the three icons to switch to a different widget. As before, each of the icons, their colors, and their backgrounds can be customized. We’ll change one of the icons to our logo and set its target as the first widget we created.

We have two more menu items, so let’s add two more widgets. Since we already have a fan icon in the menu, let’s create a fan control widget. This is a pre-defined ring gauge that responds to the rotary encoder by default, though users can switch it to host control. We can define the range of values and step sizes the gauge represents, along with colors, icons and styles, but we’ll leave the defaults in place.

For our last widget, we’ll select the bar graph template, which shows us three values at a glance. As before, we can change each of the values to be host-controlled or encoder-controlled (though only one value can be encoder-controlled at a time) and define their min, max, default and step size. We can also adjust the individual icons and colors.

Now that we have all our widgets, we’ll go back to our menu widget, swap the final icon, and define each of the targets. We’ll also set the menu as the default widget, which means we can always return to it by pressing the home button on the bottom of the screen.

Finally, we can define swipes, taps and rotations on each widget. Even though we can access all our widgets through the menu, we’ll define swipes to slide between them as well. We’ll also add taps on the icons in the bar graph widget to set their values to 0.

Exporting the Project

With our project fully defined, it’s time to export it to the Touch Encoder development module. Exporting is easy, but it can be a bit finnicky. There’s two ways to do it: with Wi-Fi, or with the thumb drive and programming cable. To use the thumb drive, you’ll have to download the drive manufacturer’s free app (called Verbatim Store ‘n’ Go), save your project file to the app (Export Project -> Save File -> Store ‘n’ Go), transfer the file to the thumb drive, plug the thumb drive into the development module and then boot up the Touch Encoder.

We prefer the wireless option. For this to work, you’ll have to connect your iPad to the Wi-Fi network named after the Touch Encoder development kit (in our case, the network was called TE-M321-SDK-02254). The password is the serial number on the bottom of the module. It often took us a few tries to connect to the network. You’ll also have to configure the same network settings in the Grayhill app from the Export Project panel.

Once all is said and done, you can export the project by tapping “Send to TE” and then “Reboot TE” when prompted. It takes about 30 seconds. We consistently got alerts about being unable to connect to the network, but we just dismissed them to continue the process.

With that, our project is up and running:

The Final Touch

With a user interface defined for the Touch Encoder, the next step for developers is to use the provided CAN bus interface or USB adaptor to test the UI with the target application. For production units of the Touch Encoder, Grayhill provides a programming harness with an M12 mating connector.

We found the Grayhill Touch Encoder generally lives up to its claims of intuitive development. Though we encountered a few frustrations with the iPad app, we managed to create a simple interface within a few minutes of toying around (and a couple hints from the programming guide).

Overall, the Grayhill Touch Encoder delivers as a versatile user interface that pairs the intuition of a touchscreen with the tactile feedback of a rotary encoder. To learn more about the Touch Encoder, visit the product landing page.