![Hardware with Arduino & JavaScript](https://static.frontendmasters.com/assets/courses/2023-09-26-arduino-javascript/thumb.webp)
Check out a free preview of the full Hardware with Arduino & JavaScript course
The "Potentiometer" Lesson is part of the full, Hardware with Arduino & JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Steve introduces the potentiometer sensor, which emits values as a knob is turned. By default, the values are between 0 and 1023. The potentiometer is added to the breadboard with the other examples. The diagram linked below displays the individual wiring for the potentiometer.
Transcript from the "Potentiometer" Lesson
[00:00:00]
>> Let's talk a little bit about sensors. We've got basically kind of two major things we've played around with so far. And like a lot of things, we're gonna do fall into one or two classes, sensors and actuators. The button I guess is technically a sensor. But sensors are outside world in, right, get stuff and kinda pull it into our world.
[00:00:24]
Actuators are things that from the board out. So the LED, we control the LED, the button more told us what were happening. So with sensors, we've got a whole bunch of different options available to us. Like I said before, in the kit that you have, there is, well, there's potentiometers, which are knobs, right, that you can turn, those are cool.
[00:00:46]
And really, a lot of the other sensors are a version of turning a knob, right? The potentiometer is simply something you can turn all the way down. No, in the same way the button is either on or off, so it's digital. Potentiometer, a lot of these sensors are the analog versions of that, right?
[00:01:02]
And so they're either turned all the way on or turned all the way off. And how much voltage makes through is how much happens, right? And so zero to one for the digital. Voltage, it's trickier cuz it's like how much? The Arduino does it at 10-bit resolution. You're like, what does that mean?
[00:01:23]
That just means 0 to 1023, also known as 1024 values, right? And so we'll break it down to somewhere in between. So at any given point, you can get a sense of how much room you have along there. And so basically, any of these sensors send some amount to the ground and some amount back to the board by turning the knob, which maybe we'll do that one first, right?
[00:01:44]
We'll have that in place, and then once we've got that basic idea and setup in place, we'll grab a sensor that speaks to us and we'll use it. There's one slight deviation for this diagram, mostly because there are only so many potentiometers in Fritzing. But yours, if you look, it's split on two sides, right?
[00:02:05]
And so the three here are all three of them on the same side, ours are two, the two ground and hot, and then the one that we're gonna read from in the middle. It doesn't actually change the diagram, it's just they look like they're all three in a line, yours look split up, it's okay.
[00:02:21]
It's the same theoretically in so far that the rows are the same, nothing really changes, unless you go over, you bridge that gap, you just gotta wire it from the other side. But it is the same, it's just that one wasn't inside the software. So I picked the next best one.
[00:02:37]
I'm not gonna unwire anything of mine. I'm just gonna keep adding to this until I regret it. So I'm gonna keep everything here. Someone asked what's the assembly? You take thing and you shove it in there. And now it should turn, look mostly like that, except for the fact that one of the pins is slightly different than the other two.
[00:02:58]
And so if you look at this, there's three pins. And the red and the black, the red is going to the 5 volt on the other side where we've got the power. The black is the ground. So if you look at it, power goes in one side and the full circuit kind of goes to ground on the other side.
[00:03:17]
It's that middle part, which is how much is not going to ground, right? And that is the part we're gonna read from, and then we should be able to kind of see that as well. So what we can do now is I've got a little bit of, Again, I'm bridging from the other side just cuz it's already hard to see from this angle for me to begin with.
[00:03:41]
And so that yellow one is gonna go any of those analog ports A0 through what have you, whichever one makes you happiest. I'm gonna use A0 for now because that is easiest for me to find from this angle. And then at that point, really, we just have the power going to and from the boards.
[00:04:03]
I'm gonna actually use slightly smaller ones in this case. So whether or not, cuz we got the five, actually, let's see, we've got, The power going. Let's actually put the power. If you're not using the button, you can literally just take that same power cord, but if you wanna share it, I'm gonna put it in that plus sign rail.
[00:04:30]
But as long as you got power going from that 5 volt to your potentiometer, you should be good. As I both stay out of the way the camera, also try to get in the right hole simultaneously.
>> So the signal is the yellow wire?
>> Yes.
>> And that's the middle prong on the thing?
[00:04:58]
>> Yes, yours just happens to be on the other side, but it's the same circuit regardless. And because those pins line up, the columns on the breadboard doesn't really matter if it just looks slightly different, that's why. All right, so I should have that all in place now, famous last words.
[00:05:34]
With the wiring, the feedback loop is not as [LAUGH] quick as we might want. So we've got to wire it up, and then I'm gonna just plug this back in. And think about some of the code. Like I said before, for almost everything, there is a folder in the public directory diagrams for almost all combinations of what we may do.
[00:06:01]
Or all combinations I could predict that I was going to do in advance of this, depending on how our spirit moves us and the questions that you ask. I have done this enough times in my life to know that somebody's going to ask me a question. Or we will go on some thought exercise that might deviate slightly.
[00:06:19]
But for the most part, and I tried to predict all of those in advance. We'll see how my prediction skills went. Okay, so now, again, that diagram, I can put it back up, but it's also in that directory. Before I talk too much, I do want to get some of the initial dopamine of whether or not I did anything right.
[00:06:51]
That seems really dark. I do lots of things right [LAUGH] whether or not I did this in particular, right? I'm just gonna keep in the same file. The other is a web server in here, everything's fine. In fact, I'm already set up to send sockets to the browser if I really wanted to.
[00:07:11]
So let's keep this code. Let's not switch directories. There is a folder for just a potentiometer as well. Again, there's way more than we ever intend on doing in our workshop together, but they are ways for you to kind of extend and play around with stuff and have fun after the workshop or with other things that come to mind.
[00:07:33]
So for here, we've got the potentiometer, which I plugged into A0. That's analog 0. Again, it doesn't really matter. There's A0 through what, 6, 5? A0 through 5, right? There are six of them, but we zero index everything in computers cuz why make anything easy. Except CSS, which is one indexed just to throw you off, right?
[00:07:57]
And I did a workshop on CSS yesterday where everything's one indexed, too. So now I live in chaos. So we've got the potentiometer in this case that is rocking and rolling. And let's start out with potentiometer.on change, and we should get the value in that case. Let me just quickly refresh myself.
[00:08:23]
And so we get that on. Anytime it changes, we wanna know. And actually, I don't really particularly care. And we'll talk about some of the other things in a second. Let's just do, it's already trying to give me the console log. Let's do potentiometer. Just if you use the regular people functions, not the fancy ones that I'm used to using all the time, you can use this.value in this case.
[00:08:55]
But arrow functions are better in a lot of ways, except in this one use case. So you type potentiometer. If you use a regular function declaration, you can just type this. But generally speaking, I'm gonna do this cuz it makes me happier, and I deserve to be happy.
[00:09:15]
Cool, so right now, I'm just gonna switch over to my console because it's got the bigger font, and now it does. Source, this one was in button and sockets. There's also a space you can do this just for a potentiometer. But for those of us following along live, it feels rude to keep switching folders on you.
[00:09:36]
And so I'm gonna do node index. And we're not doing it from there. We're gonna do it in here. All right, so now, as this changes, I can turn it all the way down to 0, I can turn it all the way up to 1023. I can turn it all the way down to 0, I can turn it all the way up to 1023.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops