Raspberry Pi Pico & SSD1306 Display with MicroPython

hey robot makers how you doing hope you're having a good day so far so do you want to know how to use the ssd 1306 display with a raspberry pi pico then this is the show for you i've also got some news to share with you try that again i've got some news to share with you at the end as well so let's dive straight in shall we my name's kevin come with me as we build robots bring them to life with code and have a whole load of fun along the way so the ssd 1306 so yeah the session goals today we want to get to know what this device is how to use it how to use it with raspberry pi pico and then do some cool things with it like displaying graphics text and maybe a bit of animation as well and i'll show you how to convert images and convert them so that you can display them on these displays as well nice and simple all free too so how does this display actually work so that is any display is made up of an array of pixels so pixels are pitch cells you might not have known that you might well know that and the pixels themselves can be color grayscale or black and white and the number of pixels that you have on a display defines the resolution and the more pixel you have the higher the resolution will be so these are displays are pretty low resolution it has to be said and they're very small as well uh the pixels are certainly packed into there but they're either on or off on these they're black and white so these actual displays are 128 pixels wide by 64 pixels tall they are black and white now you can get different varieties of these i've got a mixture i've got some ones that are white and black you can get blue and black yellow and black red and black you can get ones that have got a mixture where they've got a top band bit which is sort of yellow colored and then the bottom is blue and there's different variations of that so you'll you'll see these when you go to purchase them um and what that essentially is is it's still a black and white display but they put like a color gel over the top of it like the old arcade machines back in the day when they were still just like a black and white tv underneath with just um coloured tape over the top to make it look um more colourful so they're an ice i squared c display as well um and we'll get on to that so i squared c it's just four pins to uh to get this up and working and as you can see on here we have the four little pins at the top there oops let's just try and get that into focus we've got the ground we've got voltage we've got uh clock and we've got data and you can see on the uh the graphic on screen there that's the order the square one is usually ground that's how you can usually tell it's the same on the raspberry pi pico if you've ever looked at them they have i've got one of these out of this new little packet that they come in i just grab one of these and i show you close up so on the little cascellated edges on the on the very edge of the board um you may only may not be able to see but some of them have got square bits on them it's not very easy to see actually put the third pin down on the right it's got a square um edge to it and that means that's one of the grounds so there's several grounds on the pile yeah on the pico and now the other thing to note on these displays as well is where the the sort of coordinate system starts from so it's the top right top left top left so zero zero is top left on these um so that's just bearing in mind when we start positioning things on the display itself so to get these wired up to the pico is pretty simple we just need to connect the the data and the clock to the data and the clock on one of the i squared c buses so i usually use the first one which is just these two pins here pin zero and pin one so we'll have a look at that wired up on the overhead in a minute so frame buffers so to understand how displays work and how we can work with them um when we're writing programs we need to understand frame buffers so a frame buffer is just an area of memory and it's been optimized to work with displays so typically you have an active frame and you have a frame buffer somewhere else just off off to the side in memory that you can work on and when you're finished writing and doing all your updates you can then just make that the live frame and that stops any kind of flickering or weird glitches because that display may have to be refreshed and if you do something midway through refresh you'll get kind of an artifact display in there so we tend to work on frame buffers in a different area of memory and then just switch them in we have some kind of show or display command so every frame buffer has three different dimensions to it as a width as a height and this doesn't need to be the same as the actual display you could have this larger or even smaller so if you was working on like um an icon you could have a much smaller frame buffer just for that particular icon and then you can write that to anywhere on the display but we're going to create a buffer that's the exact same exact same dimensions as the display so it's 128 pixels by 64 high and the bit depth is is what we talked about before about the color so because this is just a monochrome display just black and white it has one bit to display each pixel so let's have a look at um bit depth a bit further a bit more in depth so it defense essentially defines a number of colors that are available to us so if it's black and white it's said to have a bit depth of one so the pixel is either on or off now you can then the next one up is four bits so you can have um shades of gray you can have 16 shades of grey not 50. the next level up from that is eight bit color and what they've done now is they've taken a byte which is eight bits and they've said the first three bits of that are going to be representing the red so there's three bits for red three bits for green and then only two for the blue and that's because our eyes see a lot of blue in nature and we don't need as much definition on that so the choice was taken to do that now there are some color systems where instead of doing that kind of map in there they have a color table and the 8-bit value just references a particular value in that table and that's what's then displayed on the display and if you if as old as i am when there was a display was it called mga and um that one had color tables uh 256 colors but you can actually change the colors and you could cycle the colors and do some crazy things without actually changing the buffer on screen the next one up from that is 16-bit color so we're getting into some really good color depths now so we've got 65 000 colors that we can display again like the 8-bit one it's sliced up into five bits to red six bits for green and then five for blue and again that's because our eyes can actually differentiate lots of greens because of nature and we see around us and then finally true color so 16 bit was called high color actually um 8-bit is vga and 24-bit is true color so that has 16 million colors um and we have a full byte for each of the red green and blue so we've got the full definition there now the thing with bit depth is that's great if you want to have a very very high resolution screen with a really good graphic but the memory usage will be affected so typically on our raspberry pi's these have you know quite low memory um the actual sram is quite small on this says on screen there's 264 kilobytes of storage that we can use and some of that's been taken up by python running itself um so we need to think about that when we work with displays we can't have a massive 4k display on running on a raspberry pi peak or just wouldn't work there isn't enough bits in this memory so if we've got 128 by 64 times by the one bit for our bit depth that means we need 8 192 bits to store that in memory which is 1k 1 kilobyte of memory that's not a lot at all if you think we've got the 264 to work with it's not even a percentage is it so not even half a percent it's just slightly less than that if we actually had a display that was 128 by 64 times 8 bits so it had the um 256 colors that would take up eight times the amount so um because we're using eight bits instead of one so that would be eight kilobytes so that would be um more than a percentage of the memory available just about um if we then had 16 bits you can see there it was 16 kilobytes and again if it was 24 bits we would need 24 kilobytes of memory just to store that very small area of memory and we might want to have many buffers as well so if we're working with animation each frame would need that exact amount of memory so you can see that the difference between having true color 24 bits versus one bit monochrome display which uses hardly any memory at all so that's really going to work well for us in our projects with robotics because we want to keep as much memory as we can available to us so that's memory usage and what we need to think about there so if you like these videos i always welcome you to a like comment and subscribe you can like this video if you're watching on youtube if you're watching on facebook you can also give it a like on there as well that does actually help the youtube algorithm which is the main place where these videos get stored and discovered by people but i am broadcasting this using restreams so you'll see on facebook inside the smiles community inside the small roblox community on my personal page and also on youtube and twitch as well i think it did used to go out to twitter and periscope i believe that's been uh cancelled now so uh yeah can help me out if you uh if you leave any of those things or if you want to watch a different video at the end of this um from my library of videos that's growing every day that also helps out so frame buffers so we talked about frame buffers just a moment ago and python has a really useful um library for us this is called frame buffer and it's even included in the micro python which is fantastic for us and it's just a couple of commands there that we've actually got available to us so filling an area so if we want to just fill the entire frame buffer with zeros just blank it out we can say fill brackets zero if we want to set an individual pixel we can do that using the pixel command we just give it an x and y and again the value that the color that we want to put in there which is going to be either one or zero for us and then because this is um because we're working with rectangular displays there are optimized uh commands for drawing lines so you can either have a horizontal line a vertical line or a diagonal line a diagonal line will take a little bit more work for the computer because horizontal and vertical lines you can do some tricks behind the scenes to set them because they're going to be in consecutive memory areas then we have the rectangle command so that's essentially just drawing four um two horizontal and two vertical lines connected some coordinates so that's uh useful for putting things in a bit of bow going on there we can fill a rectangle so we could have that filled with whatever color we want on our black and white displays we might set something to be like a white background with some black text on it for example we can draw text this is really cool so we don't even have to use we don't have to bring fonts or anything we can just go straight to the text command and write some text to our display so we'll have a play with that in a minute it works so simply and then we can scroll we can actually move the text in a direction of our choice as well and again what it's really doing is just picking that up and moving across in memory so it's kind of doing a memory map function on that then we can do something called blit which is a way of writing um to the display very very quickly so bit blasting or blit which is what it is the command here writes the uh consecutive number of bytes to memory very very rapidly so that means instead of having to turn on pixels one at a time we can basically just set something in a buffer and then just blast that buffer into memory and it just does a mem copy straight into the uh to the live display so that's frame buffers we'll be using that for sure and then how does a display cycle work so i talked about this um a couple of minutes ago so when we make a change to a frame buffer we're actually making changes to an area of memory and that isn't displayed until we tell it to be displayed on the live display so these little displays have an area of memory on the chip and we need to move whichever buffer we've got into this little chip by just squirting those bits down the i squared c bus and that only happens when we tell it to so sometimes if you're working on these programs and you think why is nothing changing you might not have done the show command the display command just to move it from the frame buffer into your live display and that prevents the flickering that we talked about on some of the very early computers they didn't have this frame buffering they just had one area of memory and you wrote directly to that and whatever was in that memory got displayed on the screen and one of the issues with that is if you caught that midway through it doing its um its scan cycle you get kind of half a graphic or you get a graphic that seems to flicker in a weird kind of pattern some people use that in arcade machines to make the uh the sprite the little character flicker on the screen um so they intentionally did that but they understood you know the scan sequence and how to wait for that but we're not going to do that we're going to actually have a special area of memory a frame buffer we're going to then write that to our live display so we just need to bear that in mind and then animating the display so this is where it gets really cool now if you remember back um let's see if i've got one of these to hunt get one of my many smiles robots we've actually built um an animated display for our smart robot before now we've got this um eight by eight display so it's 64 pixels there not massive resolution but um we made this animated what we did is we just drew a face a smile we had a blink we had a sequence of these and we could make it sort of all these different um animations in fact if i just put some power to that you might just be able to see there looks like it's flickering but that's just the uh the camera refresh rate as well as this uh display refreshing um but yeah you can see there he's got his little face and if um if i hook that up using the bluetooth there to my phone i could get it to change which face it's got and we can animate them by just having a sequence of frames with a small delay in between each of them so we can do that with that with bitmaps with our frame buffers we just need to have um a frame buffer for each of the frames and then we just need to swap them out using some kind of loop so we will build that and we will get a little animation going on the display so i have one um just ready to go over here in fact i'll just uh plug that in so that we're ready to go and let's see if that comes on i'm just going to get my uh visual studio ready and i'm just going to click on run there to see yep it's running a little test program and you can see there what's going on is we have i just do that you can see the little face there i've got some eyes that are sort of just going to the side like that so that's just three frames um and we'll look how to build that um in a demo in a second so i can't wait to show you this okay so that's all that an animation is it's just a sequence of frames with delay in between each of them so if you were to go and grab the code um i had to find a version of code that would work with the the latest release the official release of micropython um there are some libraries hanging around from adafruit that don't work anymore so the version i put on the the link there does work with raspberry pi pico and all these displays which have got myriad of these so as long as it's a ssd 1306 it'll work fine so created by adafruit thank you adafruit for creating that nice piece of code and i've just made that work for us okay so one of the things we want to be able to do is we want to be able to work on a graphic ourselves and then convert that to whatever format works best to display on this little display so there's a couple of tools that we need to use for this we need something to create the original graphic then we need a conversion tool and then we need to upload that converted file into our raspberry pi pico and have a routine that can read from it and these things are actually quite trivial to do to be honest i was able to do this um lunchtime today so if i can do it so can you so the tools i'm currently using if i just go to this one here i've got adobe illustrator and i'll just shrink my screen down there so you can see what's going on and i've just created a small graphic as you can see there now this is actually a full um 1080p graphic and these are vectors so there's no actual pixels on this this is just you know a very smooth vector and what i've done there is i've just grouped these these eyeballs together there so that we can do things like that so if i if i put these eyes to this sort of top there i can just save that out as a as a png file for now that'll do so if i go to save i'm going to save this as um frame four and it's going to be a png file so i'm just going to say okay the screen resolution is fine for that then what i'm going to do i'm going to load up which is the graphical um what does stand for let's have a look graphic image manipulation program very exciting so i'm going to open up that png that i've just created which is um frame4.png so if i open this up here you can see you've got this great big graphic and what i want to do is i want to convert this from being a full color into being um black and white so the way that we do this we'll go to image let me see if i can get that so that you can see the screen a bit better there we go so if i go to um image i then go to mode and at the moment this is rgb i'm going to drop it down to grayscale first of all now we don't see any difference because we didn't have any colors on there to begin with and then i'm actually going to move it to indexed and there's an option on this index here to use a black and white one bit palette so that's what i'm going to select there so it's going to do convert and then what i'm going to do is i'm going to scale the image down so there's an option there to scale image and then it asks me what's the width so it's 128 by 64. i'm just going to say scale now it will get a bit sort of crunchy the graphic but pixelated but that's the small display for us there's nothing really we can do about that then what i'm going to do is i'm going to go to file and i'm going to go to export as and then down here we have select file type and i'm going to go and find the portable bitmap file so it's called pbm file so i'll click on pbm click export and it'll say do you want raw or ascii and i want raw so i'm going to say export raw and what i've now got um is a file if i just go back to my visual studio if i just zoom in a bit here so you can see so we've now got frame four pbm and it says that let me just go back to open in the correct area frame four and let me just do that so you can see it's just saying do you want to open it anyway there's this file isn't supported and you can see there we've got four lines of text three of them we can read and the fourth one is just lots of question marks that's actually just data in a very specific format what we can see there it's converted our program to something that we can read with python so let me get back to the keynote and we'll we'll look at this a bit further so this image conversion i'm going to use to convert the file any file to the pbm format portable bitmap which is a black and white text based file format now is free completely free open source so you can go and grab that that works on linux macs and windows i'm not sure if there's a raspberry pi version of that um anyway um you can download that for free and you can just do the steps i've done there so we uh we open our file we change the mode from rgb to indexed we select one bit depth monochrome and then when we go to export it we choose pbm format and we make sure that it's raw not ascii as well so um let me go to the next slide i'm just gonna have a look at some of the comments because i can see some people are making some comments and i also want to make sure i'm not missing out on anything there so um good stuff so and someone was just saying he's watching from germany from nuremberg we've got adam as well on the stream and tom hey tom i promise not to show any of your personal details this week and um adam says you can use instead of illustrator yes you can you can use um inkscape as well which is a free open source alternative version to illustrator i wanted to to up my skills with graphics i do a lot of graphic design stuff as well as you can probably tell from the look and feel of this show and i wanted to sort of move from omnigraffle which is a mac only piece of software to use in illustrator because it's got a lot more stuff you can do there and those skills are transferable between inkscape and illustrator but i already paid for adobe creative cloud so why not um and uh yeah adam's saying you don't need to go to grayscale if you're using one bit index you could just jump to that um or just following a tutorial i read earlier just to make sure i did it correctly and you didn't know that mp supported um pbm mp micropython yes it does and we'll we'll see how it uh how it supports that and mac and rpi i did not know that awesome right so let's get back to the the keynote and we can then let's see what else we need to do so the contents of this pbm file let's have a read through this so what are these different things the first number is the magic number so you can see that it can either be p1 to p6 and depending on which format um we've chosen in when we've been exporting the file from defines which of these magic numbers so there was another format that we could have chosen which was the portable grayscale bitmap pgm or we can choose pbm which is the bitmap one so i've gone for um bitmap so i i'm going to be either a p1 or a p4 i didn't choose ascii i chose raw which is binary and that's why p4 shows up there then we get a user comment which is just the the graphic creation program that created this file so it says create a guide created by and then it has the image width and the image height and then line four is all the data so that's all the on you know the ones and zeroes that make up our our graphic that we just created which is those eyes looking up so that's what we we need to know just um we could just read in three lines and throw them away and essentially that's what we will do we just want to get to that raw data and put that into a frame buffer so um i also want to just make sure you're aware that i do create a new video every sunday um so typically it's around six or seven o'clock greenwich mean time it's always seven o'clock my local time but if it were in british summer time then that might be six o'clock gmt because we're in bst right now and as i always say if you're in the americas are canada you'll probably be in the uh left hand column if you're in the european zone india pakistan russia you'll be in the middle column there and also if you're in china australia and russia you're also in the right hand column if you've not checked out the website smartphone.com have a look over there last week i launched a new smart learning platform so um on there there was um robotics 101 which is a real introduction to robotics for people who've perhaps not touched the robotic arena before they want to sort of get started on that quickly there's a python 101 which is introductory course into python and there is how to build a smiles and a smiles quad robot as well so you can build one of these little robots for you for yourself so that's all on smilesfan.com also if you want to help out the channel as well you can head over to bimeyacoffee.com and that can help pay for all the equipment software hosting and so on and all that funky music that we had at the very beginning of the show as well which i have to then edit out so you don't get to benefit that if you're watching this on playback um but there's at least a five minute intro um so yeah if you want to help out the show and help out me that's how you can do that so let's get back to our keynote demo time my favorite time right so let me just bring up a visual studio so i'm just gonna plop over here in the corner and what i'm gonna do is i'm just gonna bring this divider line down here so what i've got going on i've got um this this one that says pico counter is a raspberry pi pico that's just wide into my mac and i have a little display which has just been plugged into the i squared c bus and i'm just using the pin 0 and pin 1 just on the raspberry pi that you can just see i've chosen to use some um header pins that can receive jumper wires or dupont cables rather than having it in a breadboard but i could use the one that's on the breadboard there i think that might be one of the ones i've blown i'm not sure i've got plenty of pies we can always uh there's always more pies so that's the wired up there i've got it to my display and this machine that i'm connected to is running visual studio and i've just got some code that i've created so let's have a look what we've got going on here so if i just go to first of all this ssd6 1306.pi so this is the library that adafruit wrote that enables us to do everything that we need to do so there's a couple of um constants there and what they essentially are is all the different commands that the display will receive um they have a very specific you know hexadecimal value and we just want to know what that's called and even then they don't look very friendly we don't need to worry about that we have some nice friendly commands so there's a class that's called sd ssd 1306 it's um inheriting the frame buffer frame buffer object which is that library that we talked about um earlier and it just initializes that even calls the initialization thing of that frame buffer then we have an initialization of the display so it just wipes all the memory values to zero sets it up and so on and then we've got some power and power off contrast i don't think we can do contrast on these displays i think they're either on or off but this library's written for um maybe maybe we can i've i've not played with that we have invert which um will flip the pixel value from you know if it's black it'll flip it to white and if it's the whole display it'll reverse the entire display which is quite useful you can use that to just make it flash as well which is quite cool and then the show command this is the most important one so once we've done some stuff in the frame buffer we want to show that on the actual display and the ole display then this is the command that we use so we don't need to worry about how that works we just need to know that it does work then there is a version of that library which is specific to the i squared c bus and then there's a version which is specific to spi so some of these displays i've got a slightly different display here this is 128 by 160. and this one is an spi display you can see that it's got a few more pins on it if i sort of hold that there you can see it's got six pins rather than the usual four that we have for i squared c and that's all even got a memory card holder in it so i think that's a color display as well but we're not looking at those today so that is for all intents and purposes that's what we're going to be using we're going to be using that class there which inherits all the things from above and just has some um specific things for i squared c so let's get over to our our demo program so what i will do i'm going to create a new file actually just so that we can do this from scratch so let's call this test.pi i might just have to refer back to the the other one so the first thing we need to do is import machine import from machine let's try that again from machine import and we need the i squared c we need pin i think that's everything we need we need to import sleep because we usually use sleep commands we certainly need to import um from the ssd 1306 import the ssd i squared c version and do we need anything else let's also import the frame buffer frame buff as well okay and visual studios doesn't recognize either the sleep or the machine or the frame buffer but it's fine it will work so the first thing we need to do is just set up our i squared c bus so um you've probably done this a couple of times if you've been following these videos so um raspberry pi's have several different buses on them for i squared c um there's a post that you can download from the buy me a coffee store if you want to have a your own version of oops that's not the right image i'll pull that camera out anyway on my wall that we saw earlier i have an array of posters and one of them is the raspberry pi pico so if you want to uh to know what the pin outs are you can just refer to that so the the sda is going to be pin one and the scl is going to be pin no it's the wrong way around isn't it pin zero and then that's going to be pin one okay and then our i squared c is going to be the i squared c class and then we just say id equals id scl equals scl and sda equals sda that's just going to set up the right pins so as long as we're using the right pins in the right sequence that will work fine what i usually do as well um i will do an i squared c dot scan let's just put that in a print command just so that i can see has it detected it so i'm just going to do run i'm going to stop that from running and i'm just going to say run so it can't find sleep and that's because sleep is actually in the time so if i say from time import sleep that will actually work let's try that again so oh expecting a pin of course so these need to be wrapped in the pin which we did bring in an import oops and that's just defining that that's actually a pin of the uh pico right is that going to work okay so there we go so it's detected a device and the value of that is 60. so that's that's the default value for all of these um these displays if we want to actually change the address of this on the back of the display if i can get that to focus there there are a number of um if i just get a pencil or something i might be able to show you this a bit better right so on this display there is a number of uh address select things just here and you just need to solder them depending on which address that you want to uh change that to so if you've got two displays if you've got two eyes for example uh you'll need to just apply a bit of solder onto that but the default value is always 60 in fact the library defaults to that value so if i have a quick look into that ssd 306 library and i just scroll to the top there see where it says zero x 3c if i load up the um the calculator and i just type in was it 60 in decimal and then i go to base 16 that's 3c so that's that's saying that it's going to default value to that so we don't even have to tell it what address this is on it already knows it already guesses that right so that's um that means we're detecting it our wiring is correct so what we're going to do next then um let me just have a quick peep over at our display um so we're going to set up this ole display so let's just borrow that text there and i'll just explain what this means sorry about that just went to the wrong button then um right so what i want to do is i want to go to um back to our test program and just paste this in yes oops i should have done the the be right back technical issues thing um there we go it just ran the wrong scene i've got scenes set up on my screen and i can just um i don't ever show you my um my toy for changing all the different scenes it's called a stream deck and uh you can just sort of change all the different scenes with this thing and uh they're essentially just a shortcut to a hot key and instead of pressing paste i must have pressed the key that made it change the scene so that's all that's going on there ignore that right so i'm calling this um display oled uh because that's what it is i'm bringing in the class there which is the the one from the library which is the i squared c1 um the width of it is 128 pixels the height is 64. and we're passing in that i squared c bus that we've just defined there so that's our display nice and set up we do need to initialize our display so we can do led dot init display just like so it doesn't need any parameters and let's type a little hello program so let's do text and let's make it say hello world i'm going to have that at um i think it's x equals zero and y equals zero i can't remember if you need those in there or not so i'm just going to run this and i'm going to show you on the overhead what happens when we do this so if i go to here and i click run nothing happens so i think what the problem is there is it just needs doesn't need the x and the y just needs the values right so we can't see anything on that display at the moment there's no text appearing and that's because if you remember before when i talked about we just made the changes to the um to the frame buffer but we haven't displayed it we haven't set it to the to the live display so what we need to do is just do the show command so just by adding that it will actually make the text display i don't know if you can see there but that actually says hello world i'll just hold that display a bit higher to the camera you can just about make that out because it's um a display it's a bit blurred because but you can make out that it says hello world there we go so that's great that's working the other thing we can try is just inverting the display so after um that show command there let's do oled dot invert like so and i'm just going to do run again oops what's it complaining about there oh we have to say um what do we want to invert we want it to be black or white so i'm going to say one which is white so if i do that run that again let's see if that's going to run yeah you can see the display has now gone to white but however the text that was previously white is now black you might not be able to see that there but the hello world is actually now black on a white background so it has inverted the entire display so that could be quite useful to use if you want to sort of flash the screen and bring things to people's attention so that's how we do text we can do rectangles we can do lines and all that kind of stuff but the thing that i find most fun is graphics so that graphic that we just created um which was those eyeballs so if i just go to that display there that's the png we then created um converted it to this pbm format which is that i do need to upload that to the pico so i'm just going to click on the upload button that's going to load it to the the flash area on the pico and now we can actually work with that within our within our program so let's let's do this so what we need to do is we need to create um a frame buffer so i'm going to call this fb and this is going to be type frame buffer dot frame buffer like so and then we need to say what the dimensions of this are let me just double check on my test program um so we need to say what the data is and what the x and the y and and then more importantly what type of frame buffer is because this frame buffer is a library that can do all kinds of frame buffers so i'm just going to grab that piece of code there bring it across into our test program and i'm going to show you what that does so just before we get into that so with open open is a file command and we're going to bring in a file so instead of it being test image we're going to bring in frame four like so so that's the converted file rb just means it's like a read-only and it's a binary file as f which is just a variable so we can just in this little loop here we can say f dot read line so those first three lines we're essentially going to read them and throw them away so the magic number we don't care about that we we know because we created this that um it's going to be a raw format and it's going to be monochrome so p4 we don't really care about who wrote the program that it's and we don't really care about the dimensions because we know that it's 128 by 64. the bit that we are interested in is the data so we're going to rate load in all the weird question about things which actually contain zeros and ones into um this data and we're going to read it in as a byte array which is just as you'd imagine an array of bytes so if we do that we could actually print out um that so if i just save this command um what i'm going to do is i'm going to upload this this test program and if i just go in this repel down here and i do um import or actually from test import star it will actually run that program and it's complaining because of that line 26 there let's just uh comment now upload it again and then run it again sorry so yes if we just do um from test import star it will run the entire thing so you can see there we've got that but you can see therefore we've got the white text the black text on the white background and it's finished running but all them variables that we just created and all those um values have actually been loaded in here so if i now go if i just say data we can have a look what's in there and we can see there's lots of f f's which are um values in memory um which are either gonna be zeros or they're going to be um ones and because each zero and one is within a byte those bytes are being interpreted as being um characters um because eight bits makes a bite and if we're just sort of saying ones and zeros and we don't really care about um we care about them being a frame rather than being characters and this is just how it's represented but that's what it looks like as a byte array and the b there means this big string and we can interpret that so that's what we're going to load into our our frame buffer we're going to load in data we're going to say that it's um 128 by 64. and then what we need to do is we need to say frame dot buff sorry frame buff dot now what this next thing is it looks a bit of a weird command but it's to do with the frame buffer library can work with any orientation of display so remember when i said that the orientation is top right is our zero zero it might be that on some other displays its bottom left is zero zero or it works instead of left to right or top to bottom it's got different orientation so essentially what we need to do here is just tell it that this is going to be um now have i got that correct is it hlsb let me just try that and see if that works if that doesn't work it means i've got it the wrong way around let me just go there and see what it says yep so it's not that it must be hs lb i'm sure you enjoy my live coding don't you what i'm going to do is i'm just going to check my display if i got them the wrong way around there we go let's just grab that okay so so what's happening there is we've created another frame buffer object that's called fb and that's what we're going to use to write to the display we're going to we're going to do that blitz command where we just copy it directly onto our display so let's try that let's say oled dot blitz and then we're going to pass in our frame buffer i'm going to say write this um overwrite completely um the the frame buffer the live one and when i say completely overwrite it we're oriented at the zero zero we could offset if we wanted to and have the uh the entire graphic move around but we want it to be um like so let me just run that and see what happens so if it all goes well we should see the the graphic of the eyes looking up um and i don't think that has worked so what's going on there um so yes so i've not done the display we need to do show that's the bit i'm missing let me try that again and we should see when it runs that there we go the eyes looking up it worked fantastic so if we want to animate this it's just a matter of reading in those files and then having some kind of pause so if i go back to our display program for real all i've done now is i've created um let's go over to here so you can see this all i've done is i created an images array and then i've said um for n in range one to four because i've got three um frames i'm not gonna include that one with the eyes looking up uh maybe i could do yeah in fact let's do that i'm going to make that five we always do like n plus one when we do these loops and then we say with open frame and then there's this little percentage s in the middle and what that's saying is all these are frame zero something because we're not in double digits um and the ending dot pbm and then what that's there means is that that is essentially our loop so when this goes around the first time it's going to be one so it'll say frame one dot pbm when it goes direct next time round it'll be frame two and so on again we're opening read-only binary as f we're throwing away those first three lines we're reading in the data as we did before and then we're adding this sorry to a frame buffer but then adding that appending that to our images array so at the very end of this loop we will have an images array that's got those four images in it and what i did is um i then created a while loop that says for i in images so loop iterate through all of the uh the items in the array in the the um the display just make sure that it's always the correct um we could actually take that out to be fair but just make sure that it's black and white black with white pixels blitz the um the value of i so whatever is in the frame buffer i um at the coordinate zero zero show it and then wait for 0.1 of a second and then what i did i didn't even know you could do this with these loops you can use reverse so i was figuring out how did you how do you do the opposite so it's like um like an animated gif that can loop so right the eyes look that way and then the eyes look back so it means i don't have to create another three frames i can just reverse the order of them frames to make it kind of reverse back so if i just run this i'm going to go back over to here so you can see this as i click run i can see the test program and then look it's going up and then it's going back so it's doing this animation so how cool is that that's how we can make an animated display with an ssd 1306 and a raspberry pi pico so what i'm thinking with this is we can get something like this and update this display to be a lot more high resolution we can show a lot more character in our in our display and it can look a bit more like the vector robot so um it can sort of frown it can be surprised it can you know cry it can do all those kinds of things with a lot more depth and character than just a 16 by 16 pixels um so i just need to 3d print um a holder for that i'm thinking about putting um a servo on there so we can actually move the head up and down maybe left and right if we have two servos but we certainly could do that and we can add that to our pico smiles because this is all pico powered of course and what i've got on here next to the um on screen camera is just um some more um tiny 20 40s i don't get that to focus in maybe a bit too close there so these are pymoroni 2040s so they're very small there's one with some header pins on these are what i'm using for the smart mini so i've got a couple of them and i've also just ordered in some lipo micro boards as well which means we can i think that's one there we can power this with a lipo battery so i've got some lipo batteries on order too so um i can start adding these to the project too so they've got some nice jst connectors and a micro usb on the other on the side there and that can help charge the battery when we're when we're not using it rather than having to swap out nine volt battery so that's that let me get back over to our keynote because i have got another thing to update you on and it's to do with community update so i had too much time on my hands to create this graphic clearly there's like a giant baby i don't know why that graphic um is so large compared to these other people it's not proportionate at all so there we go anyway um small robots group a man alive has that had a bit of a growth spurt so if you um are a member of facebook and you're not a member of small robots you certainly need to make yourself a member of that it's a group that i run i host it i moderate it and it's gone from 500 members back in february uh february this year 2021 to over five um 5.3 000 subs members um just today i think we might even be at 5.4 now so if you're not a member if you're not a member of this community certainly make yourself a member and we can talk robots we can share what we're working on um it doesn't have to be smart related it can be small robots any kind of small robots so i'm still working in the smiles community as well um but this is uh for other robots as well such as the otto diy for example or the open cat pico cat so i just wanted to share that extra piece with you as well and i think that is all my stuff for today so hope you enjoyed this and just kind of quick look through the comments and um see uh what people have been talking about so oh yes we've had quite a few comments going on here so so thomas say maybe use function set of bitmaps eg circles yes there is a circle command in there i believe um i remember learning about how to do a circle um you know using cost and sin back in the day when i did computer science and one of the challenges there is missing pixels because depending what size the circle is on your screen um how would you draw how do you make it so that it looks like there is a consecutive circle rather than missing pixels um so it's quite a complicated algorithm to uh to draw a circle um adam was saying trust me just been testing the mode conversions for e-ink displays on esp-32s i can only imagine um so you're saying i don't say problem comments and just make sure you use all the 7.3 naming conventions yep and tom was saying um with his smiles uh he built the eyes using rounded rectangles ah and they load faster than bitmaps and a more flexible yes absolutely changing the variable you can then make the motion um instead of creating several bitmaps absolutely so yeah it's definitely quicker to work on the frame buffer than sort of loading in having because i was thinking that the more frames you've got the more memory you're taking up that's not great great usage probably better to read them in as you go and then throw them away once you've worked with them rather than using all that memory up and um noah says he's been working on designing his own knockoff smiles but for some reason double isn't working any suggestions what to do i've not used dabble on micro python yet that is on my list of things to look at and it's going to load up double on here so double is an app that you can get for your mobile phone and there's a really nice gamepad option on that and you just need to connect and um for example this this robot that's got an arduino on it has the double library on there so it's waiting to receive commands and um i've set that particular one up so when it receives like an up command it knows how to roll the robot forward so i'm not sure what's going on there i do know that double works with micropython uh i'll have a look at that so yeah adam's saying what is double it's a really cool library um so not only can you do um the game pad let me just load that back up so not only can you have like a game pad like this um there are different options for if i go back there is um where is it or maybe it is on there but it's the different mode yeah there's there's a digital mode of joystick mode because the joystick then you've got kind of a wheel you can move around there or if you go to accelerometer mode when you tilt you can see that as you tilt this that control will move so you can actually use your phone to make the robot move very very cool as a library i did do a video on that um which was the bluetooth video so if you go and look at the arduino smiles bluetooth video you'll see me set up and use uh double uh so yeah no it's just saying that that it's an app you can connect a bluetooth model and um anyone can help i believe i'm just using the hcm10 so one of the weird quirks with bluetooth is if you're using an iphone iphone only works with bluetooth modules which are i'm going to say version 6 to 10. anything that's lower than that means it's not low power bluetooth it's not bluetooth 4.1 or up and it's because apple didn't want you to waste all your battery power on the not low power bluetooth because it is a real power beast so i was saying oops when i uh didn't get that working an ai because of our little animation which is still animating as we speak it'll carry on doing that forever there we go that must be my pizza's ready so um i'm gonna have to drop off now but hope you enjoyed that show and um i really enjoyed doing this one putting together the displays and now we can build a more high resolution face for our smiles robots and uh maybe for other robots too like they move make some eyes hope you enjoyed this let me know what you think in the comments and i shall see you on sunday for the next video bye for now [Music] [Music] [Music] [Music] so [Music]

Channel: Kevin McAleer

Views: 650

Keywords: ssd1306 pico micropython, ssd1306, micropython, pico, raspberry pi pico, pi pico, raspberry pico, oled, oled display, MicroPython, robot display, robotics, OLED, SSD1306, frame buffer, framebuf, bit depth, animation, how to animate a display in micropython, robot, kevin McAleer, micropython tutorial, micropython projects, micropython pico, micropython raspberry pi pico, micropython for beginners, micropython tutorial for beginners, oled display raspberry pi, oled display explained

Id: GX6NnQUZ_Js

Length: 55min 52sec (3352 seconds)

Published: Wed Apr 28 2021