![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 "Detecting Light with the Photoresistor" 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 uses the photoresistor to detect ambient light values from the room. The client code is refactored to adjust the browser's brightness based on the room's brightness.
Transcript from the "Detecting Light with the Photoresistor" Lesson
[00:00:01]
>> It sounds maybe it's time for the photoresistor, okay, so I will warn you, once again, there's a lot of things I like about this kit. The photoresistor does not look like the normal photo resistors that you've seen. If I pull up the schematic real quick, that's what a photoresistor looks normally, ours do not, ours look like there's a whole thing with a little clear plastic head.
[00:00:29]
As I go shuffle around my side table over here, I will find it, but it looks almost like a flat-topped LED. All right, so this is our photoresistor, now that you'll notice this one also has the long pin and the short pins. The long pin is what we put in first and it's not dissimilar from the LED with the addition of the fact that we also then read somewhere in the middle there.
[00:00:57]
So I can go plug that one in, I'm gonna try to just use two, cuz I'm gonna be a little bit careful with spacing, cuz I have not taken a lot out yet, which is intentional, so that should be good. Let's focus on the ground part first, kind of do it backwards.
[00:01:29]
That's the ground, then there is a 10k resistor kinda in the middle here. I usually in this point had the wires between the power rail and the component, because I couldn't figure out how to make Fritzing make them long enough. So you can either jump over and have an extra step, or you can go directly with the resistor over, let's see if I regret.
[00:02:03]
And then, I'm gonna plug it into A1 here, So insofar, that it's called a photoresistor, you can guess that it is a resistor in and of itself. So it's basically the more light we have, the more the electricity really can't go and so we get to read it.
[00:02:36]
All right, let's kind of verify that any of this works, because, again, before I talk too much about it, between live coding and live wiring, the opportunity for me to make boo-boos is high, right? So one thing about the light sensor is that there are lots of models, but I think in this point we should be fine, I plugged mine into pin 1.
[00:03:05]
And so I'm gonna do here is, [SOUND] that's the wrong, That's the client code, yes, it is the wrong file, cuz I'm in the client code. With any of this, we can go ahead and say, Five, .Light, And here, I'm just gonna start with just saying pin: 'A1', now, I could just put the A1 in there, I'm gonna show you why I'm gonna do this in a second.
[00:03:47]
But first I wanna make sure that I have not somehow totally messed this up. So I'll get that kind of in place, I have that saved, I'll put the code right here for now, it's way of help. Say value and raw, Actually, let's pull it in from the light sensor itself.
[00:04:36]
All right, so now, we're gonna see did I wire this up correctly? Okay, I've got some light sensor in here, there's apparently no raw on this one, but we've got a value, which is pretty high presently and ideally, Interestingly, I think I might have it or we're reading it slightly backwards.
[00:05:03]
So covering it when the value go higher, but I am getting a reading from the sensor at the very least. I don't know that bottle cap is as effective as we want it to be. Okay, so I've got to figure out for a second, why my value seems slightly in the wrong direction.
[00:05:21]
But as I do that, I also wanna point out something, there's a lot of data coming from here right now, right? One of the things you can do with some of the options in here is you've got two other options you can give this, which is frequency, which is how many milliseconds, how often should we read this?
[00:05:38]
So hypothetically, as I go to look at what I need to change here, If I change this to 500, you'll notice, The values are coming in at a lot less rapid of a rate. And so we've got that, and then also, I can also give it a threshold.
[00:06:06]
And so I'm gonna go with 5, don't emit another change unless it's changed more than 5. So if you're getting too much data, you can kind of throttle it a little bit between the frequency and the threshold. Right, we're pulling this in a lot more infrequently, so it's going to find it every 200 or also if it changes.
[00:06:38]
Right, but mine, theoretically, not the worst thing in the world that's going in the wrong direction, but let me take a look at it and see if I can triage it. For everyone, I had two adjustment circuits slightly, unclear where the operator error was. It wasn't me staring when I wired it up previously and making the diagram?
[00:06:56]
We don't know, and so I had a suspicion when I was explaining, I was like, something seems off. And then faced with reality, it became a lot clearer, which is power goes in, goes through the photoresistor, right? It's very much like the potentiometer in a sense, right? Before we had the knob, now, we are just in the same way with the button by stabilizing it with the resistor.
[00:07:20]
But power goes in, a certain amount gets through and what we read as the result, it's kinda like the middle pin of the potentiometer basically. So I did have to adjust this slightly to kind of have the power, go directly into the positive of the LED, and then I read right before it goes to the ground, and that spiritually makes more sense.
[00:07:40]
So now if I go back, we'll start that back up, And I've got, other than the server starting up, some ambient light hand over, it drops to almost nothing. Let's do the ultimate scientific result of grabbing my phone and turning on the flashlight, And watching it go up to nearly 1,000, and pulling it back down.
[00:08:13]
I don't think there is a scale on this one out of the box, so we might have to write a little bit of our own code. Let's see what the methods on a light are, so we'll say on change, I'm just gonna curious light., It does seem to know a lot what's going on here, it just got everything involved here.
[00:08:45]
So let's see, we'll say, we're hovering around 50 normally, right, let's say that that is our medium, and we'll say that 100 is, right? So along those lines, let's pull this into where we had, This other code, and I guess, we're gonna get rid of letting the potentiometer change.
[00:09:15]
And we're gonna go with the light in this case, but we will steal this code right here. But not the potentiometer, let's change this to ('light', and we'll do, In this case, we'll omit that as we go through, we'll start with that and tweaking the grade exactly how we want it is probably an exercise for the reader, because that's just me being very particular.
[00:09:55]
So say light, we've got the value coming in, let's just go for it all the way, let's just live our best lives and we'll do it live as I say. We got a collapse, and we'll start back up again now. All right, So go back over, cover it up, a page gets dark, take my hand off, it gets lighter, point my phone at it, We're all the way on, so depending on the light in the room and, yes, you could adjust those values somewhere between 1024, or 1023 and 0, it's something a little bit more, light goes on, light goes off, cover it up.
[00:10:57]
Now, my web page is less about what the user wants and more about what I want, cuz that doesn't have enough in my day-to-day job. And so we've got this idea that the sensor can now control things in the DOM based on everything we have in place. There are some other sensors in here, I will warn you, there's a temperature sensor, there's a tilt sensor.
[00:11:21]
Do you know the difference between what I just did with the light sensor is and what we would do with any of those other sensors are? Nothing.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops