KnobSlider is a shape-changing device that switches between a knob and slider. It enables three different interactions (sliding, clicking, and rotating) on one device. It is originally designed for professional users such as sound engineers who use lots of sliders and dials. KnobSlider aims to bring flexibility to the interface while keeping users’ dexterity with physical devices, rather than to use flat touch screens with poor haptic feedback. KnobSlider allows eyes-free, mobile control.

This device will be presented at CHI 2018 conference. You can read our study paper about the device. This work is done by Hyunyoung Kim, Céline Coutrix, and Anne Roudaut.

Step 1: Materials and Tools

Materials

3D printed KnobSlider pieces (downloadable at Thingiverse.com)
sg90 servo motors X 5
PowerMate USB
5 mm Bore 20 Teeth Idler Timing Belt Pulley X 2
3 mm 2 GT Idler Pulley X 2
GT2 Timing belt (longer than 30cm)
GT2 Timing Belt Pulley 20 Teeth Hole 5 mm X1
5V DC generator
Arduino UNO
(optional) 25x8x1mm neodymium Magnet X2~4

Tools

Cutter
Long-nose pliers (for opening & closing a nut)
Either a table vise and a hammer, or soldering tools (depending on what you choose to do. See Step 2 to make decision.)
Small cross screwdriver. Around Ø 3mm is good.
Instant glue
(optional) Silicon spray
(optional) Sandpaper and needle file

Step 2: Remove the PowerMate Case

(Picture 1) Open the cap of the PowerMate and remove the sponge. Open the nut that is holding the encoder sensor, using a long nose.
(Picture 2) Then remove the silicon bottom using a sharp cutter. The bottom and the metal body are glued, so that you need to cut the glue thoroughly.
(Picture 3) Take out the PCB board from the metal body. To do so, you have two alternative ways:
1. Fix the metal body upside down at the vise. The inner/upper metal body (that was holding the encoder with the nut) goes down, and the outer/lower body (that was connected to silicon bottom) is fixed to the vise.
  Carefully take out the PCB from the inner metal body, while not breaking the wire connections.Make sure that you won't hit the PCB when you hammer the inner metal body, e.g., fix PCB with scotch tape.
  Hit the inner body with a hammer to separate it from the outer body. You need to hit it with confidence. If you hit it weakly, they won't separate.
2. If you would rather use soldering tools, you can cut the USB wire close to the metal body and solder the wires to the PCB. Make sure that you wire them correctly (as in Picture 4).

Step 3: Assemble the Sensor PCB to the KnobSlider Sensor Case

(Picture 1) Put the sensor PCB into the KnobSlider sensor case (sensor_body_cover.stl).
(Picture 2) Close the case with the original silicon bottom. You don't need to glue it. It will stay there without glue.
(Picture 3) When the pin next to the encoder is properly positioned, put the washer and the nut, and fix the sensor.
(Picture 4) Put the sensor axis (sensor_axis_1.stl) on the encoder.

Step 4: Assemble Motors With the Motor Covers

(Picture 1,2) (Optional) Take 3-1 piece (The number is engraved on the case), put one or two magnets. dClose 3-1 with 2-1.
(Picture 3, ignore the motor in the picture) (Optional) Take 3-6 and Put one or two magnets in the hole. 3-6's and 3-1's flat faces will meet when the KnobSlider is closed. The magnets will help the device firmly close. Make sure the magnets in the two cases are attracting, not repelling.
(Picture 4,5,6) Put one motor screw to the partial hole of 3-6. It makes your assembly easier. Put the motor wires through the long narrow hole (convex side of the case)
(Picture 7) Put the motor body in the case. It might be tight depends on the motor and 3D printer you used. I recommend you to print one case first and test if your motor fits well. I removed the sticker to make a little more space.
(Picture 8) Use both motor screws, fix 3-6, motor, 2-6 together. Repeat assembling motors with cases. You'll use the rest four motors and case 3-2, 2-2, 3-3,2-3, 3-4,2-4, 3-5, 2-5. When you finished, you should have 6 parts.

Step 5: Connect the Motor Cases

Pic 1) you should have the 6 pieces in the picture
Pic 2,3,4) Take 3-6 and put the wire though 3-5. The convex of 3-6 of concave of 3-5 should meet.
Pic 5) Put a motor hand in 1-6
Pic 6) Put the 1-6 on the bottom of 2-6 and 2-5.
Pic 7) Repeat (2) - (4) until you put 1-2 Put 1-1 on 2-1, and all cables come out from 3-1 like the picture.

Step 6: Combining the Motor Bodies and Sensor Body

Pic 1) Put the ring of 3-3 on the sensor axis. The 3-N pieces go upper and 1-N pieces go lower like in the picture
Pic 2) Add sensor axis with teeth (potentiometer cover 2.stl)
Pic 3) Add GT2 Timing Belt Pulley 20 Teeth Hole 5 mm. The teeth go lower.

Step 7: Add Gears and Timing Belt

(optional) Use the pile the smoothen surfaces that the slider cursor will slide on. Add some silicon spray.
Pic 1) Put gear with teeth on the pin of 3-1 and 3-6. Put gear without teeth on the pin of 3-2 and 3-5.
Pic 2) Put timing belt around the gears. Timing belt's teeth touch gears with teeth, and timing belt's flat part touches gears without teeth. Add cursor's lower part (cursor 1.stl). Put one end of the timing belt in the cursor. Fill only half of it. Carefully measure the needed timing belt length by slightly tightening the belt. Cut the timing belt with a little margin and put the cut end in the cursor. Slide the cursor and make sure the length is good. Glue the timing belt to the cursor.
Pic 3) Cover the gears with 4-N pieces.
Pic 4) Add the upper cursor part (cursor 2.stl)

Step 8: Wiring/Software

Pic1) Connect motors, Arduino, and 5V DC power supply like in the picture. The motor in 3-2 should be connect to Arduino D3, motor in 3-3 is connected to Arduino D5, 3-4 to D6, 3-5 to D9, 3-6 to D10. They are PWM pins. I upload KnobSlider.fzz file in case you want to change the schematic.
Upload StandardFirmata to you Arduino (Arduino software > File > Examples > Firmata > StandardFirmata)
Download USB Powermate manager on Griffin website. Choose a right software for your OS and install it.
Map the button event of the device to mouse click event. Map rotating of the device to anything you want.
Download KnobSliderControl.zip and unzip it somewhere you like. Open the .pde file with Processing. As you can see in the code, the angles of servo motors are controlled in this code. You will need to change the angle values to make sure KnobSlider closes and opens properly, without making the motors worn out. You will probably need to open N-1 layers again and adjust the arm angles.
That's it! I hope you enjoy playing with it!