Recreating the Microsoft Surface Dial using Makey Makey
Jay Silver, Founder and CEO of JoyLabz, has said if someone were to show him a switch that he could recreate it using a Makey Makey. My coworker (and rival), Andy, and I decided to impose that same challenge on ourselves and set out to create a Makey Makey switch which functionally mirrored the switch system seen in Microsoft Surface Dial.
Create a device which scrolls in one direction when rotated to the left, scrolls in the opposite direction when rotated to the right, and causes the mouse to click when pressed. All of which is powered by a Makey Makey.
Try the prompt out in your space! We created a simple version that uses cardboard, aluminum foil, and foam, and a more advanced version which uses 3D printed parts, copper tape, and springs. Hopefully, by creating both versions, we’ve shown you to show that materials should not be a barrier for anyone!
Below are our solutions.
We had two main phases to this project:
Phase 1: Create a low tech functional prototype of the design within a 30-minute time limit.
Phase 2: Using what we learned from phase 1, create a more polished product using any tools at our disposal by the end of the month.
Phase 1: Low Tech Prototype
We decided to make this phase of the project into a competition.
A key question of “demo or die” is: “What is the bare minimum I need to do for this to be functional?” In essence, the best chance of completing a project in time is to start with the simplest possible version. It’s always possible to add extra features and polished components to a project after creating a basic, functional prototype.
Initially, Andy and I had the same idea of creating a system similar to the Wheel of Fortune wheel where the dial would continuously click against pegs as it turned. As someone turned the dial, the page would scroll until someone stops turning the dial.
This is Andy’s prototype. Halfway through our allotted time, he realized that the Wheel of Fortune inspired system was too ambitious for the time limit and so he simplified the design. He made it so that if the dial was rotated until the stem protruding from the side was touching one tower, then it would scroll one way and the page would scroll the opposite if the stem was touching the other tower.
This is my prototype, I did not have the same realization as Andy. Because my project was too complex for the amount of time we had, I ended up with a nonfunctioning prototype and a sour disposition.
Phase 2: Digitally Fabricated Model
After the initial idea becomes a tangible creation, it is much easier to iterate upon the design. This is the primary reason why we removed the constraints in the second phase. We also decided to remove the competitive factor and work together so that we could really create something amazing.
Several of components of the final dial design were made in Autodesk Fusion 360.
3D Printed Components
There are holes in the top both to the right and left and the peg which allow for us to run wire through the dial to connect to each side of the ticker. The peg itself was also designed with notches along the side to give the wire clearance.
We designed a ledge on the inside of the mid-base which the dial top rests on. In an earlier 3D printed prototype we did not have the ledge and the dial did not rotate evenly.
Additionally, we were able to create a series of raised ledges for the ticker to run across. This system closely mirrors our original idea of a dial which could be constantly turned as opposed to one which has to be stationary while in contact with the ground connection.
The ring size was determined by the widest diameter for the springs.
We created a small socket in the middle of the ring in which a rod could be placed to secure the dial top in place even further. The socket is supported by a cross shape across the middle of the ring. The holes between the beams allow a pathway for the wires.
The hole for ticker was made bigger than the rod it sits on so that it can move freely across the raised edges.
We used springs from Ace Hardware to attach the mid-base to the bottom to allow the top of the dial to be pushable.
The raised ledges on the mid-base were lined with copper tape and in one area, the copper tape wraps around the bottom of the mid-base. We decided to make the mid-base ground because is the central component and it allowed us to minimize how many wires we were using in total.
Scroll up and down
Each side of the ticker is connected to one scrolling function. A piece of wire is fed through the slot next to the peg and attached to the side of the ticker with copper tape. Whenever one side of the ticker is touching the raised ledge the circuit completes and the page begins to scroll. If the dial is continuously rotated the circuit is repeatedly completed and the page continuously scrolls.
In addition to the four springs connecting the mid-base and the bottom pieces, we have a fifth spring which has been cut short placed right underneath the strip of copper tape the wraps around the bottom of the mid-base connected to the click function. We found that the springs we used required too much force to comfortably fully compress and so, adding a fifth, shorter spring as a contact point to complete the circuit allowed for a more natural feeling click.
Ultimately, we had a lot of fun trying out different solutions and we were able to learn a lot from the process. If we had to do it again, we’ve already brainstormed ways to further improve our design.
For example, we would use thinner springs because the springs we used in this version were too strong. Additionally, we have some iterations to the mid-base. The first change would be to make the raised ledges trapezoid shaped instead of triangle shaped. This would create a basin-like indentation across the top that can be filled with solder. We think that this would create a more effective and cleaner design.