![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 "Working with an LCD Screen" 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 asks students to wire an LCD screen to the Arduino. Once the LCD is wired and configured, the cursor method can move locations on the screen, and the print method will write a message at that location.
Transcript from the "Working with an LCD Screen" Lesson
[00:00:00]
>> We are gonna pull into possibly, the challenge mode now. Are you ready? Ready for the challenge mode? And it's like, I know that we're feeling a little high confidence after getting two out of three colors. We'll play around with that. So in our kit, we have an LCD screen.
[00:00:27]
This is an LCD screen. As you can see, there are a lot of pieces here, right, but let's kinda talk through it. Yeah, yeah, yeah, yeah, yeah, yeah, yeah. It is not as bad as it seems, right? Yeah, you don't look confident when I say that. [LAUGH] Right, let's talk through it.
[00:00:51]
We've got the black and the red going to the two power rail, the two rails, okay, great, killing it. This is just a potentiometer, right? We've done that before, all right, cool. And that's just going to adjust the screen brightness. Theoretically, if one wanted to, they could just go to one of these analog circuits and then try to control the brightness via code, that is totally an option.
[00:01:17]
In this case, I chose to do it with a potentiometer, all right? As well as effectively, the screen brightness. Over here, we've got screen brightness and the potentiometer, right? So we've got three of the wires already set for us. We've got, if you look, we've got seven. We're going one to the ground, eight, and then really, it's just four in a row, going to four in a row, and then power and ground for the LCD itself, right?
[00:01:48]
So we've got the ability to kind of adjust the colors, adjust the brightness rather, as well as program in the data itself. So really it's, if we think about it, the potentiometer, then brightness controls the for kind of resetting the various characters, more power. So it does feel like a lot of wires and we'll take it very slowly.
[00:02:10]
But I guess take a second, get that one out. I'm gonna kind of pull everything out or you will. As you can see, you will need most of the room on your breadboard, right, at this moment. So kind of take a second, we'll get ready for that and we'll wire it up and we'll see some things we can play around with there as well.
[00:02:32]
All right, friends, so we did skip the live wiring on that one for a few reasons. One, it takes a while, and two, I need to keep some amount of my pride. Two, most of us gave up on the color coding at some point. Did anyone fully stick with ground is dark colors?
[00:02:51]
Yeah, at a certain point, we went with, what wires do we have and what do we have in place? I have a second one here to show you that there are labels on the pins. When we look at some of the Johnny-Five code, you'll see that label. You can also see them on top, but I kind of just have a second one here kind of ready to go as well.
[00:03:07]
And so I've just sent a quick sketch here, which will kind of write together in a moment to show basically, for me before we went live to to make sure that it still works, cuz that would have been embarrassing. So we've got that kind of in place. There are a lot of pins that control the two rows, but it is kind of the first time that we can.
[00:03:27]
Previously, every time we have seen any data from our Arduino, it has been on our browser. So again, to show this kinda two-way connection here, we now have the ability to show some amount of information on our board itself, right? Again, I would go with the diagram. I know it is a little stressful, but you can get there versus trying to stare directly at this because there's a lot to look at on here.
[00:03:56]
But we will look at it to see the niceties of all of our hard work of slowly wiring this all together. With that, the Johnny-Five piece is at least that is very straightforward. And I think you can do some really interesting stuff here. So for instance, like most things, it is a great abstraction library that kind of keeps the detail.
[00:04:21]
I mean, Arduino is already a great abstraction library over this. Right, and then obviously, Firmata then brings it over to JavaScript, and then Johnny-Five puts another abstraction layer on top of that. So we can go ahead and instantiate our board. And like almost everything else, it's kind of just instantiating a different object off of Johnny-Five.
[00:04:41]
In this case, we give it a little bit of information, which is the pins. And the pins, if we look at the docks line up to different pins on the board, right? And so they are effectively, if you squint, and I have a neck cramp right now from looking very closely.
[00:05:03]
A pro tip that I forgot to throw on the slides, I might toss in the slide for those watching later, is you take your iPhone or your Android phone, it doesn't matter, whatever phone makes you happy. You've take a photograph of the little labels on those pins. And then you zoom it [LAUGH] right up real big, otherwise, you will go insane like I almost went.
[00:05:27]
But the array here lines up to these pins and what they have in the case. And so, we just went with the standard diagram in this case. That's why we took off literally everything else. So in this case, let's see what is, I went with the standard set, which is the 7, 8, 9, 10, 11, 12, so let's grab that.
[00:05:51]
Not the bespoke wiring diagram that I did earlier. Neat, so we've got that. And then you just have to give it a little more information. In this case, how many rows does it have? We don't need to look that up. And I believe columns, I think there's 16.
[00:06:07]
16 looks right, cool. And so we've given us some information about what it has to work with. Let's inject that lcd into the repl when we run it, I love it. But let's also say lcd.cursor, don't cheat. Lcd.cursor will start at, this is row 0, row 1 for those of us who are humans.
[00:06:28]
0, 0, so we can put the cursor somewhere along there, and we can print. I'm just gonna print hello, and you can see this. I'm gonna print something else that's not currently on when I was just making sure it worked. Goodbye, seems dark, howdy. And then we'll actually say lcd.cursor, and let's actually push it off of 3.
[00:06:55]
Actually no, second row, 3 in, and we'll say world, right? And we'll try to push this off to the board.
>> It's not 4 in?
>> Hm?
>> The 0, 0, is it zero indexed or?
>> Zero indexed, yep?
>> Okay. [LAUGH]
>> Yep, yep, it is not like CSS.
[00:07:16]
It is zero indexed in this case, so that will be the fourth one. And you can see, it now says Howdy World on there as well.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops