Creating Custom Interfaces

A brief tutorial for communicating with the Handy using a custom interface.

Overview

In this tutorial, we’ll put together a basic interface to send commands to a Handy that has connected to your webpage through the Handy UI.

Invoke the Handy UI

As the first step, we’ll invoke the Handy UI on our page using the code from our previous tutorial:

Adding buttons

Next we will add some basic <button> elements to our page to serve as points of interaction.

Our code for the buttons is simple:

<button>Play</button>
<button>Stop</button>

When rendered, they will look like this:

Interacting with the Handy

Next, we’ll need to give the buttons a function. For this tutorial, we’ll make the Play button start the Handy’s oscillating movement, and the Stop button to stop the movement.

We’ll use two functions from the SDK to achieve this:

  • hampPlay()
  • hampStop()

As such, we’ll modify our buttons to execute each of the functions when clicked, as follows:

<button onClick='HANDY.hampPlay();'>Play</button>
<button onClick='HANDY.hampStop();'>Stop</button>

Now, with your Handy connected to the Handy UI above, you can click the Play button to tell your Handy to move. When you’ve had enough, you can press the Stop button to stop the motion.

Adding Complexity

With our basic functionality in place, we can begin to leverage other parts of the Handy SDK to create more complex interactions with the Handy.

We will add a slider input element that will allow us to change the speed of the Handy’s stroking motion in real time. To achieve this, we’ll use the setHampVelocity() function, which takes as input a value between 1 and 100 — representing the speed of the Handy as a percentage.

We’ll combine the setHampVelocity() function with the onChange event to change the speed of the Handy every time the slider is moved.

Our code will look like the following:

<button onClick='HANDY.hampPlay();'>Play</button>
<button onClick='HANDY.hampStop();'>Stop</button>
<input type="range" min="1" max="100" value="1" onChange='HANDY.setHampVelocity(value)'>

The above script will render as the elements below:

Again, with your Handy connected, you can press the Play button and move the slider around to change the speed of the Handy’s stroker arm in real time.

Next Steps

Now we’re really starting to get somewhere!

The Handy is a versatile device and in many ways the limit to the pleasure it can provide is limited to your imagination.

In the next tutorial, we’ll explore how to send CSV and FunScript files to the Handy, as well as how to synchronize these script files with videos.