Knobs are ubiquitous in technology user interfaces, but touchscreens are increasingly replacing them for interface controls. The latest project from [upir] combines a rotating knob with a touchscreen for a stunning result. The knob-over-display design features a touchscreen where you can place and remove a spinning knob, creating an interface reminiscent of Microsoft’s Surface Dial but at a fraction of the cost.
The core functionality of this device relies on the MT6701 magnetic encoder, which precisely tracks the orientation of the surrounding magnetic field. This encoder is held in place with a 3D-printed jig behind the small touchscreen, hiding the encoder without blocking the magnetic field generated by the magnet above the display. Most circular magnets are axially magnetized, meaning their larger face is one pole. However, diametrically magnetized magnets, where opposite sides of the smaller face are the poles, are used here.
To avoid scratching the screen and ensure smooth turning, [upir] designed a knob that holds the diametrically magnetized magnet slightly above the screen, with a ball bearing connecting the outside of the knob to the center resting on the screen. All the design files needed to recreate this are available on [upir]’s GitHub page; be sure to check them out. Also, browse through our back catalog for other knob-related projects.
Even though it fell into obscurity pretty quickly, I always thought the Microsoft Surface Dial was a neat idea.
Absolutely! That thing was silly, but so dang cool. This very much reminds me of it, and makes me wonder about the feasibility of making something similar. Maybe even just a suction cup with a stylus tip to adjust dials in audio or SDR programs.
Oh that would be easy is well documented
FYI, the 3D printed bearings, shown for a second, do not work. They’ll bind and grind and are the worst possible shape for what is expected of them.
See “Stable Rollers”
https://www.youtube.com/watch?v=Ku8BOBwD4hc
The possibility that isn’t being explored here is that of conversion from “coarse” to “fine” adjustment or even multi-turn functionality with the same hardware.
At 2:39 in the video, we see a shot of an earlier project of his that has the encoder off the edge of the display, but showing the arc of a dial centered where that knob is. This looks and acts like a multi-turn tuning knob from a radio, displaying the calibrated scale and above that a digital value. So clearly he had this in mind.
I really like the example where the knob is offset from the display. This makes it look like a tuning dial from an old radio, like a Collins or Heathkit ham transceiver from the 1960s.
I’m still not sold on the magnetic sensors, though. I think I would do this with capacitance.
How, exactly, are you going to do this with capacitance? Which off-the-shelf component will you use? What will you use in place of a simple magnet? It’s ok. I’ll wait.
Conductive fabric for a small pad under the knob, offset to the side, and a wire connecting it to a conductive collar around the knob where the fingers touch, i.e. PLA filament with conductive filler.
I worked with the guys at Microchip who built the knob-on-display demo shown in the first few seconds of the video, and that’s exactly how they prototyped it. Printed on a standard Prusa Mk4 in the design lab in the C4 building in Chandler, AZ.
Just because something sounds complicated to you doesn’t mean educated people haven’t already solved it.
Ok. What about the sensor?
Presumably the capacitive touchscreen itself. I don’t know if this particular project uses a touchscreen, but it could.
Ok. But I’m waiting for BrightBlueJim to say how he would do this capacitively. Given that the screen here is not capacitive, and the chosen sensor, MT6701, is easy to use.
As I said, I’ll wait.
You had my respect and attention until you said “educated people” which seems to be making negative assumptions towards the person you are replying to.
The off-the-shelf component I had in mind is whatever modern microcontroller you have on hand. It’s pretty well-charted territory at this point, with several dev boards from STMicro and TI (for example) demonstrating how to do touch buttons and sliders using shaped PCB pads connected directly to MCU pins. It’s only a minor variation to measure shaft rotation this way.
If you’ve seen a digital caliper, they make very precsise measurements this way, but I’m not talking about that kind of precision. What I have in mind it two concentric patterns of sector pads, placed 1/4 cycle off from each other, from which the angle can be accurately interpolated. Some Hackaday articles have been published about this (https://hackaday.com/blog/?s=digital+caliper).
I lost four versions of that answer to the Internet dogs (who don’t just eat homework), but I see I didn’t include the crucial part in this one: the capacitors themselves are printed on two PCBs separated by a thin polyester sheet. Which really doesn’t need to be all that thin. One PCB is fixed, and has sector-shaped pads in a ring, something like 6 to 24 repetitions overall, grouped as A, B, and C plates sequentially around the circle, connected to three pins on the MCU, and a solid ring inside of that connected to ground. The other PCB, which just has spokes the same width as the sectors on the stator, and a ring corresponding to the inner ring on the stator, attaches to the shaft on which the knob is mounted, and is fixed to a bearing on the back side of the stationary PCB. At any point in the rotation, the spokes will be partially covering two of the stator plates, with the capacitance ratio indicating the exact position. Since the rotor plate is floating, what you measure is the series capacitance from pin A to ground, pin B to ground, and pin C to ground, so only three MCU pins are needed. No resistive noise, no credit-card-erasing magnet, no special sensor.
Also, Andrew, thanks for the reminder that for every measurement you might think about making, the hobby electronics community expects there to be a cheap off-the-shelf I2C sensor. Sometimes that isn’t the only answer.
Great. Thanks for the description. Yes, I knew it could be done, and how to do it, but I’m surprised that you said you were “still not sold on the magnetic sensors” and “would do this with capacitance” when your own description shows it’s not really worthwhile, especially when compared with the practical example using a magnetic sensor.
So which part of what I described do you find impractical? I went into great detail, not because there are so many details, but to show how simple and how within the standard technologies this lies. As I said, microcontroller manufacturers use use capacitive sensors to demosnstrate how EASY this is.
BTW, Andrew, I’m calling BS on you: “Yes, I knew it could be done, and how to do it”. So why did you also say, “But I’m waiting for BrightBlueJim to say how he would do this capacitively. Given that the screen here is not capacitive.” Clearly you had no idea. And how is a sensor and a magnet simpler than PCB patterns you just connect directly to the microcontroller? If you actually knew how to do it, you wouldn’t have had to wait for my answer. You called BS on me, so I’m calling right back, smart guy.
I’ve used the AS5600 magnetic encoders and they work very well as long as the magnet is centered over the sensor.
Magnetic encoders were commonly used in arcade machines during CPS2 era. See YouTube for more details. Technology Connections is an absolute gem in the vast world of YouTube! This channel brilliantly combines education and entertainment, making complex technological concepts accessible and engaging for everyone. The host, with their warm and personable demeanor, has a unique ability to break down intricate topics into digestible pieces, often infused with humor and relatable anecdotes. One of the standout features of Technology Connections is its meticulous research. Each video is packed with fascinating facts and insights that not only inform but also spark curiosity. Whether it’s exploring the history of household appliances or delving into the mechanics of everyday technology, the content is always well-structured and thoroughly engaging. The visuals are another highlight. The channel employs clear graphics and animations that enhance understanding, making it easy to follow along. The production quality is top-notch, showcasing a commitment to excellence that is often hard to find on YouTube. Moreover, the community around Technology Connections is incredibly supportive and enthusiastic. The comment sections are filled with thoughtful discussions, and the host often engages with viewers, creating a sense of belonging and shared interest.
Thanks, ChatGPT.
Thanks troll.
Agreed.
Sure, it feels a bit spammy, but it’s not ChatGPT.
Get used to it. In the near to far future, all sensible text found on forums will be accused of being AI-produced. Thanks, Sven.
It looked like AI, so I ran into it through an AI detector, which claimed it was 87% AI. It also looks like cloying, vapid, advertising copy. I’d rather Sven wrote his own opinion, as it would be authentic. Assuming he is real.
If English is not his first language it would be even more authentic to write something shorter and more direct. Furthermore, if English is not his first language he now has no idea if what was written is what he intended.
Finally, there is no link to a video related to this current topic (and nothing about CPS2 or rotary encoders on the channel). It’s just a gushing suggestion to watch some guy’s channel. The channel is good, I don’t disagree, but what is the point of writing about it here in this way? It is AI slop.
In 2021, the Ford Mach-E ev came out with a knob mounted on the touch screen. It’s glued to the top of the screen and has a brush that emulates a finger on the touch screen.
I like this. It could provide the feel of a classic analog control while still allowing for remote control and/or automation.
Is this not the same as Microchip’s KnobzOn-Display then?
So the bearing is just glued to the face of the LCD? What could go wrong?!!