KnobSlider

9,790

63

11

Published

Introduction: KnobSlider

About: Hi! I am Hyunyoung [hyuh-nyeong], a PhD student at Université Grenoble Alpes, France.

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

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

  1. (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.
  2. (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.
  3. (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

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

Step 4: Assemble Motors With the Motor Covers

  1. (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.

  2. (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.

  3. (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)

  4. (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.

  5. (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

  1. Pic 1) you should have the 6 pieces in the picture
  2. 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.
  3. Pic 5) Put a motor hand in 1-6
  4. Pic 6) Put the 1-6 on the bottom of 2-6 and 2-5.
  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

  1. 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
  2. Pic 2) Add sensor axis with teeth (potentiometer cover 2.stl)
  3. Pic 3) Add GT2 Timing Belt Pulley 20 Teeth Hole 5 mm. The teeth go lower.

Step 7: Add Gears and Timing Belt

  1. (optional) Use the pile the smoothen surfaces that the slider cursor will slide on. Add some silicon spray.
  2. 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.
  3. 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.
  4. Pic 3) Cover the gears with 4-N pieces.
  5. Pic 4) Add the upper cursor part (cursor 2.stl)

Step 8: Wiring/Software

  1. 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.
  2. Upload StandardFirmata to you Arduino (Arduino software > File > Examples > Firmata > StandardFirmata)
  3. Download USB Powermate manager on Griffin website. Choose a right software for your OS and install it.
  4. Map the button event of the device to mouse click event. Map rotating of the device to anything you want.
  5. 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.
  6. That's it! I hope you enjoy playing with it!

Share

    Recommendations

    • Creative Misuse Contest

      Creative Misuse Contest
    • Clocks Contest

      Clocks Contest
    • Oil Contest

      Oil Contest

    11 Discussions

    0
    user
    bob8898

    Tip 4 months ago

    This would be even cooler if you added some sort of high res digital potentiometer! First thing I thought of was the ESP 32, and its 12 bit DAC! Also, you could connect your knobslider to the internet! How cool would that be?

    this is incredible design and instruct-able, that said i cant really see this having any real world application apartf from having the weierd est ui possible, i could be mistaken though id be happy to be, really like the creativity.

    1 reply

    Hi stratos13pao,

    Thanks for the comment!
    Our hypothesis was that people already using knobs and sliders might benefit from the flexibility. For example sound engineers already change between banks of sliders on their console. We can imagine them having smaller consoles and change between banks of widgets or parts of the interface, like we do with tabs on graphical interfaces. The professionals who participated in our study were enthusiastic, while at the same time commented on further improvements. We truly hope for real application. Of course, future work is needed for this! :)

    Excellent idea! I am very into interfaces that do not need screens to see or touch! Also, a huge bravo to you for posting your research's construction steps and making it available to all of us! :)

    Hi jessyratfink, thanks for the comment! :)

    We're trying to improve the instruction to make it easier and clearer. When you have something to suggest, please let us know!

    While I have no idea what this is or what it is intended to do, I am amazed at the complexity of the project - it reminds me of hearing a symphony and imagining how anyone could sit down and write all those parts for the orchestra A mechanical Bach!

    0
    user
    Matlek

    4 months ago

    Great project and well-written instructable! I also worked in Grenoble a few years ago :) What institute do you work in?

    1 reply

    Hi Matlek! I'm a PhD student at Université Grenoble Alpes (previously Joseph Fourier University). computer science department (LIG).