Changing Color with the Potentiometer

[00:00:00]
>> There are a few interesting things that you can do here, which is if you want values from 0 to 1023, you're in luck. Because you know what this emits? Values from 0 to 1023. That's good. What if you're building something else? What if you're building something where you want the volume to go from 0 to 11, right?

[00:00:29]
Or what if you're trying to, I don't know, you're trying two RGB colors that go from 0 to 255? You can write math, that's a thing that you can do. [LAUGH] I was like, no, I could write math. I didn't get into JavaScript to write math, right? There's a world of 1 plus 1 equals true, right?

[00:00:50]
I'm not [LAUGH] writing math. [LAUGH] With that, I'll just show you something real quick that you can do here. You can do potentiometer, .scaleTo. And we'll talk about some of the other options because, a lot of the other options. So 0 to 100, right, I can save this, restart the server, And turn the knob.

[00:01:23]
I wonder why I didn't get what I wanted. Let's try that. Just be scale. Now, I turn it, I go from 0 to 100. It basically takes the full range and just puts into whatever range that you want, right? So why don't we do this? I've got an idea, and this is why I warned you that I can go off script, and I'm going to.

[00:02:00]
So let's go ahead and let's hide my bigger terminal for a moment. Let's say, actually, I don't need the terminal. That big for a second. Let's say we're gonna go from 0 to 255, right? And I'm gonna move this code here where I have the socket in scope, And we'll emit, The potentiometer value.

[00:02:36]
One quick note is, just to show you, even if you use a scale, if you want the full one, there's also a .raw. That should be the raw value from 0 to 1023 regardless. So now we're also going to emit that the potentiometer changed. And if I go back into the client side code, we're gonna say socket.on, potentiometer.

[00:03:08]
We got the value and a raw. Let's just console.log them for a second so that I know that I didn't mess anything up. And I am gonna kill that server and restart it. Turn the knob, okay? You can see both the raw value and the regular one. So it's all the way up.

[00:03:36]
The value, cuz I scaled it, is 255, but the raw value is the original 1023, like we expected. I can turn the knob, and down it goes. So what I'm gonna do now is there's a lot of talk on, people apparently like dark mode. Which is, yeah, if I wanted a UI that was less thought out than light mode, I too would turn on dark mode.

[00:04:05]
I don't live in just dualities of light mode and dark mode, right? There's many shades. That's kinda force users. We know about the Sith and the Jedi, but there's also Gray users as well. So what we're gonna do is document.body.style.backgroundColor. And we're gonna change the background color of the body to where I have turned the knob, right?

[00:04:36]
And now, we can figure out why, yeah, I had to work on web pages, and I said that I tried all different values. Why am I doing that to myself when I could just turn a knob and try all the different values of colors on my page, right?

[00:04:49]
This is a next level web development that no one's talking about. [LAUGH] Now, hypothetically, I can turn down the lights [LAUGH] on this web page. [LAUGH] And I think what should really happen is that there's, you can imagine, we're gonna keep this code cuz I know what the next sensor we're gonna grab is.

[00:05:11]
And I give you a hint, it's gonna be the light sensor. And I think I need a webpage that is always the kind of light that's currently in my house, right? And that's what you see. It's not about whether you're in light mode or dark mode, it's whether or not I'm in light mode or dark mode is what you're gonna see.

[00:05:26]
So now we can reach over, we can turn the knob on our page and slowly. [LAUGH] Now, there's some contrast issues. I won't point to, I will leave it as an exercise to the reader to reverse the font color as well and get all that working. But generally speaking, and do I set the button code?

[00:05:49]
Yes, I've got both. [LAUGH] I got both press the button and turn the knob. Really, all I'm missing is some way to trigger the LED, and I think we started to tie it all together. So I can have all of that kinda in place, and we can see that now we've got this fun interaction between a lot of our different hardware.