Hey guys, its Sam here from Core Electronics and today we’re going to take a look at how we can get this data that is on our Particle Board be it a Photon or an Electron onto a display. We want to be able to visualise what is going on the insides. Today we’re going to be taking a look at using character displays, you’ve also got graphical displays but today we’re just going to be looking at the character one. So we’ve got 16 x 2 character displays so as you can guess displaying characters in a bit of a grid format rather than controlling each pixel there are set spaces for where your characters can go. It uses the standard ASC2 characters from the character library and the 16 x 2 means there are 16 spaces in a line and 2 lines. Now you can also get 20 x 2, 20 x 4 they’re the main sizes for character display and there’s a few other more niche ones but thats what we’ll be taking a look at. If you are after graphic displays take a look at our other tutorial on that - they actually go through and render the display pixel by pixel so working a bit differently there.

With our displays there are 2 main technologies. You've got LCD and OLED. Now with OLED it’s organic light emitting diode in case you are wondering and you’ve actually got this sort of material across the screen which is actually emitting light, so pixel by pixel you’re emitting that light which is a really crisp kind of contrast against the dark background. You can get a bunch of different colors we’re working with monochrome displays, so just single color, not multi coloured, it’s a little bit more complex. Whereas with the LCD there’s a back light which is emitting this LED light and then you’ve got whats called a liquid crystal matrix over the top which sort of distorts and refracts the light in different ways to give you the pixels. That’s great, it’s been the traditional flat screen technology for quite a number of years now but it does have the disadvantage, compared to the OLED of that really crisp contrast in great low light viewing conditions.

So we’ll take a look at how we can get set up now and we’re going to go through using both the LCD and the OLED varieties so don’t worry if you have one or the other. We’ll go through the circuit set ups, the code, and the code is actually really quite similar as the libraries are doing most of the heavy lifting work pretty much using them with the exact same line for line code.

We’ll take a look, now you’ll need a Particle Board, either a Photon or Electron - we’re using Photon it’s just a little bit simpler and let’s have a look at how we can set up out LCD circuit. The red one is our LCD and the green one is our OLED just in case you were wondering.  With our Particle Boards, they are 3.3 V Boards, they’ve got a 5 V display that we can tap on to but the input and output pins are only going to be outputting 3.3v and the input pins should really only be handling 3.3 V or you risk damaging your board.This LCD is a 5 V LCD which means we’re going to be powering the back light off the 5 V to get a much brighter backlight and we’re actually going to be using a bit of a trick where we can wire up the logic 25 V, so obviously working between 0 and 5 v logic and we’re still going to be using our standard 3.3 V output but it actually sits just above the threshold for whether a pin  detects a high or a low bit. So it's not ideal but it saves us having to get a logic level converter out and this way works perfectly fine and you don’t quite get as much brightness when you’re running the screen on the 3.3 V.  So  not entirely the best way to go for it but definitely the simplest way to get set up and it's going to work and you’re not going to damage anything by giving it 3.3 v instead of 5 V. But you definitely don’t want to be putting 5 V into 3.3 V devices.  So we’ll go ahead and I’m going to wire this up and we can go from there.

Something to note is that with these larger breadboards you can see there’s a bit of a space along here, if you can see that.  So that is not actually always connected on a  lot of breadboards and in fact for most it isn’t and it can get you caught out. You can be looking for this error in the circuit not realising that these 2 sides of your power rails aren’t connected along there. So I like to get some little white jumpers and put those in there and it just guarantees that the power rails are just going to be distributed across the board.  So I’ll go ahead and wire up these jumpers and now I’m going to break out the ground and 3.3 V pins on this side so this far power rail is going to be my 3.3 V and for all the Particle gear I pretty much just use this same breadboard layout because it gives you both 3.3 and 5V rails. Now we’re actually tapping into the V-in Pin which is directly connected to the USB 5V so that’s how we can power it off an external pin but when we’re powering it off the USB it does let us tap into that 5V line.  I’m just going to spin this around because the power supply is over this side, actually I’ll do that in a minute, first of all I’ll put the screen in. I’m going to be using the LCD Display and I’ll put it here so we’ve got a nice amount of room for our contrast potentiometer. I’m going to place this in now - keeping a bit of room on each pin. Now the first thing we’re going to want to do is wire up our backlight and we’ll do this before we plug it in and turn it on. So our ground pin is on the outside and the backlight is the far side here and as I mentioned we’re going to be wiring this up to the 5V because it gives a much brighter backlight and the screen whilst the backlight is going to work on 3.3V it's really designed for 5 V. 

Now I want to hook my logic up but before I do I’ll spin this around so we can actually plug it in to see that back light turning on.  Always double check your connections when you’re working with power before you plug anything in - yeah, so you can see that backlight lighting up and if you change the angle of the display you can see that backlight shining through. So that is another disadvantage of the LCD display is you can get colors inverting or the frame inverting depending on your viewing angle whereas the OLED is going to be a lot more consistent over different angles but it really just depends on what you prefer to use. All right so now we’re going to wire up our logic so this is telling our display what logic levels we’re going to run and we are using a bit of a cheat by using the 5V to get that bright display but then only sending it 3.3V signals. It’s up to you, you can use that logic level converter if you like and it’s probably the better way to do it if you’re getting a more permanent set up going. Now the last thing we need to do to get the power section wired up is get our contrast pot wired up so thats this little guy here and it’s controlling the contrast of the screen. So how brightly the letters are going to stand out against the backlit segments. We want to take the middle pin of this over to our contrast pin which I can see is right next to these pins. I’m actually just working in reverse to the diagram but if you flip it up side down you’ll be able to see. Then I’m just wiring up one outside pin to ground and the other to 5V and it doesn’t really matter which one is which. It’s just going to change the effect depending on which way you turn the potentiometer so it really doesn’t matter for this. Now, we turn this contrast pot when it’s, yeah there we go, so we can see that there are our squares that our characters are going to be displayed on, and I’ll turn it down and we’ll start losing some contrast - now it won’t have that really extreme effect until we actually start seeing some characters. It’s designed to be viewed from that angle there but for now I’ll just turn that down and we’re going to want to fire up the data pins now. So we’ve got 4 data pins on this end and, so i’m just going to go and wire those up. Now the pin closest to our backlight is going to be connected to D-0 on our Photon and again you can use the Electron for this, the code is going to work, the breadboard diagram is going to work, the Electron is just a bit bigger board so as long as you connect it up to the same pins, the D-0 to D-5 then it’s going to work exactly the same. I’ll connect these 4 up and I’m just working right to left in ascending order on the Photon. Alright, so they’re our 4 data pins so now we’ve got some read/write and enable pins here that we are going to wire up along the other side next to our contrast pin we’ve got a wire which goes to D-5 so we’re using 6 pins all up on the Photon. Next we’ve got, I believe this is the enable pin which in an LCD setup goes to ground, don’t need to connect that up. The last one goes in to D-4 there we go. Now you’ll know you’ve wired this up correctly if you’ve got a space, if you can see that there, there should be a space of 4 pins in between this side and this side. They’re extra data pins you can actually connect these displays up using 8 pins instead of 4, I’m not 100% sure of the benefits of it, I think it might give you a bit of extra read/write speed but it’s almost instantaneous as it is anyway  so we’re not going to worry about that. Because there is no code on this, it’s just going to be displaying some random gibberish so you can’t really see anything on the display and that is because our contrast is too far down. If we turn it up a bit we can see the lovely random gibberish displayed quite clearly and if we keep turning it up then it eventually kind of whites out the character segments versus the characters themselves. So that is probably a pretty sweet spot there.

Now let’s turn that random gibberish in to something more meaningful using some code. So we’ll scroll down to the LCD code. I’m just going to copy this for starters and open up the Particle IDE.  If you’ve never used the IDE before go check out some of our other tutorials which cover using the IDE, setting up your Photon, that kind of thing. So the build sub domain of Particle.Io is our IDE where we can access libraries and code and everything. Right, so I’m going to create a new app, I need to go through and clean up my apps at the moment!  Let’s name this app ‘LCD-DEMO’  If you are familiar with Arduino you’ll see the void setup and void loop sections here. Now I’m going to copy this code in, you’ll notice we’ve got the hash include liquid crystal library, that’s because we’re going to be using a Liquid Crystal library that’s been ported over from the Arduino Library because it makes working with this display super easy. All the functions can be just accessed using lcd.print so you can print your data, or lcd.clear or lcd.setCursor, everything else so it makes it incredibly simple for this whole code takes up 14 lines. So we’ve got this in but we actually need to when working with the Particle IDE go through and include the library in our menu tab as well, it’s not just enough to write that in the code. So we’re going to search in the libraries for liquid crystal and I’m going to be using that one. You can see the number of views next to the library - it’s going to tell you how many people using it and how popular it is so the ones with the higher views are likely to be really solid and work really reliably. So now we want to click include in app, find our app that we want to include it in, LCD-DEMO, add to this app, alright and there we go. Now it’s removed the previous code that we copied in so it probably didn’t need to do that but now I’m just going to replace that with the lines exactly the same.

Now we want to make sure our correct device is selected and we’ll be using Photon Guy, I like to name my Particle boards with the type of board they are and then a fantastic unique Australian name. Your naming convention is up to you. Now we’re going to hit flash and this will compile it first, check for compilation errors but there shouldn’t be any and then it’s going to upload it to our board over here. So we’ll wait for that to run through a compilation check, yeah, flash successful and you can see on the board that it is updating our new code and we’ll turn the contrast up a bit and we can see our program running. So this is just a simple kind of ‘hello world’ type program although it doesn’t actually print ‘hello world’. It just tells us the time since the last reset on the board using the millis function, dead easy, if we hit reset that time is obviously going to clear because it’s a different time since the last reset. So there we go, underway, and that is really all there is to using these character displays. This is the LCD one so now we’re going to take a look at using the OLED one. The code is almost identical, we’re just using a different library to account for a different data structure that needs to be sent to it. The wiring is almost identical as well, we’ve just got to change a few of our jumpers here. So we’ll go and get stuck in with that.

I’m going to unplug first, that is always best practice and swap out our LCD display for our OLED. Alright, we don’t need our backlight wiring, I have included it in the wiring diagram in the article just to make it as easy as possible to switch between the two, it’s not going to harm it at all, it’s also not really necessary so keep it in, or leave it out it doesn’t really matter. Now you notice we don’t need the contrast pot, this is because we don’t use a backlight, we don’t need to adjust that contrast because the OLED material in this is emitting its own light. So we can get rid of these 3 wires, they’re our power and contrast and now we’re actually going to be using 3.3V for the OLED because we don’t have the backlight to worry about we can just use it on 3.3V logic and it's going to work exactly as intended. I’m going to jump these back over to there and so if you look through we’re missing the contrast wire because it's not necessary and the only difference I’m making is this pin here, rather than going to ground it’s actually going to go to our board. So we’ll just unplug these for a minute and leaving our data pins exactly as they are and I’m just going to go through and rewire these. So starting from our right hand side this yellow wire goes into D-4 then our white wire which was plugged in to ground (it’s brown in the illustration) is going in to D-5 and this blue one is going in to D-6 so we’re using one extra pin on our Photon to do this but that’s not too bad. So we can get rid of those jumper wires, get rid of the contrast pilot and if you have a look - I’ll just jump back to the build section just for a minute, this line of code here is actually the pin out for the Liquid Crystal Display.

You can use any pins you like, it’s going to work identically as you’ll see in a minute with our OLED code. If you follow the pin out there it’s going to work with the wiring diagram and feel free to use different pins if you like but you’re just going to need to go in and change each of the pins corresponding there. Now lets turn this on and start working with it so wait for our Particle Photon to boot up and we’re going to go back down to our code and look at our OLED code. So again we’re going to copy all of that and before we paste it in to the IDE we’re going to go in to our code tab and we’re actually just going to get rid of the Liquid Crystal Display library. If we upload it to our board now it’s not going to work because the liquid crystal display library is different to the OLED library - well, it actually does work at a bit of pinch but the OLED requires a bit more of timing specific commands and you may run into issues using it for more complex  kind of things. Alright so I’m going to remove the liquid crystal library because it’s going to take up unnecessary room in our code. So that will go in a second, it’s beed removed from our app, and going to remove that line as well, and I’m going to search for OLED. OOPS no, that’s searching for apps so I’m going to go in to our libraries tab and search for OLED. Alright so now I want the Adafruit Character Library because it is an Adafruit display that we are using here. Alright so include in app, and I’m going to include it in our LCD-DEMO even though technically we’re not using an LCD. In fact let’s just go in and create a new app, I think that that is going to be a cleaner approach. So we’ll go create a new app just so we don’t get any code mixed up. So OLED-DEMO just for uniqueness sake - and now let’s go into libraries, include the Adafruit Character Library, include in app, OLED-DEMO, add to this app, fantastic so now it’s included that library for us. So we can go ahead and copy the code in from the tutorial. So pretty much the code is identical apart from the library inclusion and you can see our setup is just a little bit different so we’re using the extra pin and a slightly different naming convention for the OLED display but it’s still using the lcd.begin commands to make it as easy to get set up and you don’t have to change your code all that much. So yeah, we’ve still got Photon-guy there and let’s flash this code, over to our board. So again we’re just going through this compilation process and fantastic I can see that it's flashing successful and my Photon is rebooting with the new code and there we go, a ‘hello world’ kind of program, time since reset. It’s nothing original, nothing unique and is used by almost everyone who gets started with a character display but it’s an effective way to show some of the different functions. Now there is alot more functionality in these libraries than we’re using here, so we’re just using the ‘print’ and ‘setCursor’ commands along with the begin structure but there is alot more you can do with it including scrolling on auto scroll, set you cursor to different positions things like that. You can flash your display turn it off, turn it back on again without losing the data that you’ve written to it. Yeah, go into the library in there and check out some of those commands if you’re looking to go a bit further. But that is character display with Particle, awesome sauce!  We can write data to your screen, we can display variables, we can display strings like we are now, we can do all kinds of things and visualise what’s going on in the tiny brain of our microcontroller.

So have fun with that guys, create some awesome projects and I’ll see you next time :-)