Arduino OLED Menu Tutorial (for beginners - Arduino UNO, 128x64px SSD1306 OLED screen, u8g)

okay so in this video I'm gonna show you how to create this nice looking menu heavily inspired by the menu from The Flipper 0 but we will be using Arduino Uno which is hidden behind this Shield together with the 138 by 64 pixel OLED screen and three buttons and as you can see as I scroll through the menu items those menu items are actually my older projects and as I click the OK button there is a screenshot and there is also the QR code so you can open it and watch the video before I show you more screenshots let me talk about a sponsor for today's video which is PCB way and if you use the link down in the description you can get 10 pcbs for free only paying for shipping but you can also get some nice discounts for other services like 3D printing and CNC Machining which is something that I would like to try soon stay tuned for next video but for now let's jump to our project so here's the 3D cube it looks kind of boring without the rotation here is the better charging indicator for that I've used a different board but it was Arduino compatible board here is a dashboard one of my very first OLED projects but unfortunately I haven't got time to record the full tutorial yet the fireworks was a simple project to celebrate 100 subscribers and GPS speed gauge was actually getting very real data from GPS sensor as the name suggests the big knob was used to carry the big knob overlaid over the OLED display parking sensor is one of the newest projects and I really like how it turned out and finally there is a turbo gauge which was the first project okay so let's take a closer look at the menu itself flipper 0 is not using the OLED screen but I believe it uses the same resolution of 128 by 64 pixels it always displays three items at the same time and the middle one is the one that is currently being selected that one has also the border around the animated icon and bold font the other two items also have icons and there's also a scroll bar displayed on the right side of the screen so we'll try to do the same except we will not animate the selected icon so before even touching Arduino it might be a good idea to create a screenshot of how this menu should look like and for that we will be using the online editing tool called photopia for photopia photo P yeah call it any way you like let's start by creating a new file in the size of 128 by 64 pixels and send the background color to be black hit the create button and here you have our new image now 64 which is the height of the screen is unfortunately not divisible by 3 so we will choose another number and it might be for example 20 so I will select the rectangle selection and select a new selection in the size of 128 by 20 pixels and then create a new layer clicking this icon and select edit fill and fill it for example with white color so I'll select white and click the OK button I will deselect by clicking anywhere else and maybe lower opacity by dragging the slider down to maybe I don't know 20 or so so this will be a place for our first item I will duplicate this layer either by selecting Ctrl J or maybe just moving it with the ALT key pressed and with down and do it one more time like so so now you can see that we have three places for free items with two pixels in between each of those items let's create in the very same way a place for the icon so again I will create a new layer and the icon might be for example 16 by 16 pixels so I'll create a new selection 16 by 16 pixels and use the same trick of having edit fill and file with the white color deselecting and lowering the opacity to again maybe 20 or so and then duplicating this layer two more times so we have a place where we will later on place or actually draw the icons so once we have this layout we can add some text and for this we of course need some kind of font and for today's design I'm using font called pixel operator so on daf on website you just click the download button download it to your PC and then inside of photopia click the text tool and in here open the drop down menu and click the load font and select the zip file or actually the ttf file from your PC since I've already done this I can see the pixel operator font in here so I'll select the pixel operator set the size to be 16 pixels and of course the color should be white like so and then I will click somewhere and type in for example dashboard and for this unselected item I want to set the font to be irregular I will move it to the place where it should be create a copy Again by dragging the layer together with the ALT key pressed and double click this icon to change the text this one should be for example parking sensor so type in park sensor and for this selected item I will set the text to be bold so I'll open this drop down menu and set this to be bold and I will duplicate it one more time and say to for example text to be turbo gauge again this unselected item should not be both so I'll say to be either let's create the outline for the selected layer so we'll create a new layer and I will select the pencil tool which is hidden behind this brush tool so right click and select the pencil tool set the size to be only one pixel make sure that the color is set to White so the foreground color should be white and then I will maybe zoom in a little bit more and create something that resembles around the corner which means that I will just click here and here and here maybe move it to the right side like so so this is one rounded corner it will continue like this I'll continue down here where I will create a second rounded corner and I can click here press the shift key button and click here and it will fill it with the line so I'll do the same trick to fill the line to the right side of the screen so click for example here hold the shift key and click here and do the same thing on the bottom of the outline and then try to create those rounded corners on the right side as well so click here like so and finish it like this I would like to make the right side and bottom side limit Boulder like having double line in here and it's the same way it's done for the original menu but you can see that now the outline is touching the icons so the icon will be all the way to the bottom it will be touching the outline which probably wouldn't look good so I'll select the selection tool and actually select the bottom of the outline and move it one pixel down and then deselect select the pencil tool and fill in those gaps so there is always one Gap around the icon we can probably go more to the right side but let's wait until we created the scroll bar which is exactly what we are doing right now so I'll create a new layer and just create a few dots which will be the scroll bar background so again save a pencil tool and start drawing those individual dots like so and once we have three of those you can of course select the arrow and then drag it with the ALT key press to create a copy so this way you can create this scroll bar looking piece quite easily so we have the scroll bar on the right side of the screen I will select all the scroll bar layers which are those five and hit Ctrl e or select layer merge layer to merge all the selected layers into one so this is the scroll bar background create a new layer and I'll create a scroll bar handle and for this I might just select the selection and create a rectangular selection and fully with the white color so edit fill with the white car and that will be the scroll bar handle and since we know the size of the score bar we can resize the outline for the selected item so again I will create a selection select the arrow key and move it to the right side to the point where it's not touching the handle so there's a one pixel gap between the handle and the Outline deselect by clicking anywhere and use the pencil tool to fill in those gaps again you can click together the shift key that will create a line so we have a score bar we have the outline for the select item all that's missing is some kind of icons and for that I will again use a pencil tool so I'll zoom in as much as possible and for this parking sensor I just try to draw some kind of shape of the car together with some ways coming outside of the back of the car so I'll try by no draw for example some kind of a wheel of the car like so and then the back of the car with for example like this and from the back of the car maybe there are some waves coming out like so there is only a limited number of details that you can put inside 16x16 icons and again most of the time I'm just using the pencil icon with the exception for update icons so for example for the dashboard I will start with the circle so for it I can select the LF selection make sure it's not being empty laced and set it to the size of 16 by 16 pixels then select edit stroke and stroke it inside S1 pixel with white color so click the OK button and unfortunately this is not 100 pixelated so I start to delete those summer transparent pixels so select the Eraser tool mode should be pencil tool in the size of one pixel and just get rid of those semi-transparent pixels it will still be a great start for this one gauge then continue with the middle piece I'll create something that looks like a middle piece of the gauge maybe like this and maybe delete this middle part and from this let's create some kind of needle something like looks like a label on the bottom and those individual dots around yeah something like this I have used a very similar approach to the turbogage icon that is starting with the ellipse selection and filling it inside with one pixel stroke and of course getting rid of those semi-transparent pixels after deleting the right top part of the circle I've created error Circle in the middle being a little bit smaller and then I put few pixels here and there to look more like a Turbocharger there is already a dedicated video where this is described in more details so our initial preview is done but we only need to use black and white colors and for that we will add a new Effect called threshold and that will do exactly what we are looking for that is resulting only in black or white color at any time you can still hide it to see the layout better if you want to move stuff around but for now let's keep it visible and let's export our document as a PNG image let's select file export as PNG image all the settings should be left to default except for I like to click the don't use palette sometimes this causes some troubles and click the save button before we move to real Arduino Let's test our sketch in a walkway which is a free online Arduino emulator and there is this sketch called progress bar which is showing the progress bar on the outlet screen and I think that this will be a great starting point except we don't actually need any kind of progress bar so I'll delete this progress integer value I will do it increasing it and of course drawing it so we are left with very basic scheme for using the OLED display together the Arduino Uno together with the u8g library and for the uh Library this is required because it's drawing by individual Pages if you want to know more I will put the link down in the description which describes this more in the detail but currently we are most interested in growing our image and for this we need two things we need the function to draw this image so if I open the documentation the function is called the draw bitmap B so I'll copy this example of draw with math B function into our code so inside here I will paste it so uidg drop with my P but we also need this image if I look the documentation the image is simply zeros and ones but they are stored as hexadecimal numbers so in order to convert this PNG image into the C code into the array we need to use the tool called image to CPP which is this one so I'll drag our exported PNG image into choose files and there will be a preview down here looks fine so I'll just click Arduino code and generate code and copy this code into our sketch maybe above the setup like so and there's this array being created which we don't really need so we only need the array of those individual zeros and ones which in this case is called epd bitmap OLED menu That's based on image name so that's the name we will use inside the draw bitmap P function and we need to set the current position which will be 0 0 and the size which is 128 by 64 pixels but the third parameter is actually not the width but a bit divided by 8 so you have to divide it by 8. so if I restart a simulation I should see our screenshot being displayed on this OLED display and that's exactly the case I mean it's a static screenshot but it looks nice so let's try to do the same with the real Arduino for that let's copy the sketch from the walkway website into the Arduino IDE paste it in here if you've never used the uidg library before jump through tools manage libraries in here type in uadg and press the enter key and install this u8g Library which you can see I already have installed so I'll close this about to have the Arduino Uno connected make sure that the right board is selected again that's Arduino for my case and make sure the right Port is selected which will most likely be different in your case after that hit the upload button and hopefully it will be successfully compiled and uploaded to Arduino which is the case you can see we are not using too much of the memory which is great because we will be using much more memory for all the additional screenshots but for now we only have one full screen image displayed on the OLED screen and this is how it looks like on the real Arduino we haven't talked about the physical connection of the OLED display and the Arduino but it's really the same as on the walkway website so you connect the ground to ground and VCC to 5 volts and then you connect the icecrc connection so SDA cellular data and scl serial clock 2D pins A4 and A5 or they are also dedicated SDA and scl pins on the Arduino board and unlike the A4 and A5 pins they are actually labeled properly so you can see which is which and that's great because I always have to open the pinout diagram to find out if A5 is clock and A4 is data or vice versa anyway we can Now display a static screenshot but I think it's time to make it more Dynamic and for that let's jump back to photopia we need to slice our image into individual pieces meaning that the icons will be separate images the outline will be a separate image also the background for the score bar will be a separate image as well in photo pi you export the individual layers by going to file export layers and if you unclick this you will export all the layers but probably the better idea is to just use this name so Dash e Dash inside the layer name and only export some of those layers there's also the requirement that the image width should be divisible by 16 and in the best case the image will be black and white with black background which is certainly not the case for the icons which are transparent as well as the outline so let's just fix this first and then use the right names for the icons let's just create the new layer sized 16 by 16 pixels so let's create a selection of 16 by 16 pixels and fill it with black color so edit fill with the black color deselect and move it below the icon and actually create a copy for this icon that's the parking sensor and this icon which is the dashboard and I will group the icon together with the background layer using the Ctrl G for all those three icons and rename those properly so this one is icon Park sensor but of course I have to use the dash e Dash in order to be exported and I will call this icon Park sensor without any spaces continue with this one again Dash e Dash icon dashboard and the last one is Dash icon turbo gauge or just turbo so the icons are covered let's move to the outline which is this layer selected outline and you can see that a bit of this layer is probably not divisible by 16 it's 123 so in this case I will just create the background layer of the size of 128 by the height of this layer which is 120 by 21 again create a new layer thread with black color deselect move it below the selected outline group it together and name this properly Dash e-dash item selected background I probably would like to move this below so I can still see the text the last piece that you need to export is the scroll bar background again this one is only one pixel wide but we need to have it 8 pixels wide so I will create a new selection 8 pixels by 64 pixels create a new layer fill the black color move it below the scroll bar group it together and name this Dash e Dash scroll bar background now you see that now the scroll bar background is actually covering the outline but for the uh Library the black color is actually not affecting the image in any way it's only the white card that is being drawn and you can simulate it by setting the blending mode to screen and this way you can see how it will look like inside the uh Library while still this layer being 8 pixels wide and it doesn't affect the exporting so it's fine so our image still looks the same but now we have five layers that will be exported so three icons one background for the score bar and one background for the selected item so if I select file export layers and make sure that this checkbox is selected you can see we have five exportable layers I will click don't use palettes and click export layers and you can see we have those five PNG files in there I will actually do one more step edit this into the Photoshop file I will import my older icon so I have more of those not just three of those and that's because menu with just three icons might be a little bit confusing so now with five more icons I have 8 different icons and I will use the same trick of exporting the layers jumping to file export layers clicking the export layers and now the asset should include all those individual icons so all those eight icons select the background and the scroll bar Background by the way there's a link in description where you can download this Photoshop file and we'll talk about how to open it in photopia at the end of this video with the images exported they can convert those into Cris using the image to CPP website but they will do this in two steps first we will only select those 8 icons because when we click this jury button there is an array on the bottom of the code and we can later on use this array to reference individual icons or actually to draw icon based on this array value so I'll just copy everything and paste it in our sketch and I will paste it after a screenshot although we don't need a screenshot anymore and I will keep this error in here and as the next step I will also generate a c code also for the other two images which are the outline and the background for the scroll bar again you can see the preview of those images in here I will click the generate code and again copy this into our workplace sketch but this time we don't actually need this array and we cannot keep it in here because it's using the same name as this one so I'll just delete this one and for the first array that includes the I can let's just give it a little bit of meaningful name for example bitmap icons and we don't need this integer value so we can delete it so we now have the array that references all those eight individual icons and we also have images for the selected background item and the background of the scroll bar so I just try to grow those instead of one big full screen image for that we need the size of the image and also the position of the image but thankfully in photopia we can check this distances checkbox and that will show us the distances as well as the dimensions of the selected layer so we can just use those values inside our code so let's draw the first icon and you can see that the X position is 4 while the Y position is 2 and the size is of course 16 by 16 but a bit has to be divided by 8 and for the image name we can either use this image name or we can use this array which will be a better way to do this and just use some kind of index and for now let's just make it hardcoded so we are looking for the icon that has this gauge and if I count this this image is the third one so the index will be two so I will draw this bitmap icons of index 2 and I will also draw the second icon so this is this one parking sensor the only difference is that the Y position is 24 and I want to draw the image of 4 parking sensor which is the index of 6 so the index will be 6 for the parking sensor and the last icon is this turbo icon in this case the Y position is 46 and the index for the turbo icon is the last one so it is index number seven let's use the very same approach for the selected item background which in this case is exposition number 0 and y22 so just copy this one and the X will be zero the Y is 22 and the size is 128 by 21 and the image name is this one so it's item selected background and the last image is the scroll bar background so I will select this layer and in this case the explosion is 120 the Y position is 0 and the size is 8 by 64. the image name is bitmap scroll bar background let's hide the photopia window and a ring around the simulation and we indeed have three icons the selected item background and the background for the scroll bar now the order of those items is not that important because again we are only drawing white pixels and we are not doing anything the black pixels from the images and I think it's time to draw some text for that I'll open the documentation and we want to use the function called drawstring and we of course want to set some font so I'll copy both lines from the documentation into our sketch and put it for example in here now as for the fun you can create a custom one based on the one used in photopia file but we can also look at the built-in files and maybe find some which looks suitable I believe I went with this 7x14 bolt and an unbolt version so 7x14 non-bolt and bold version the b stands for bold version the r stands for reduced you can see it has less characters so it takes less memory but since memory is not a concern at this point I will use this u8g fund 7x14 and UAG fan 7x14b for the selected item so for the non-selected item it's UAG fund 7x14 and let's just draw our first string which I believe was dashboard the second string is spark sensor and the last one is Turbo gauge and again the middle one should be bold now as for the positions we can use the same trick as for the icons however by default for the UAG Library the Y position is taken from the Baseline of the fan so it's six plus nine in this first case for the Y position so it's 15 and the X position was 26 that will most likely be the same for all the items the UI position for a parking sensor is 28 plus 9 so it's 37 and the last which is a turbo gauge the Y position is 50 plus 9. it's reporting 11 as the height because one of the characters goes below the Baseline but really the Baseline is where the T sits on so it's 59. if I already run the simulation we have something that looks like a menu but of course it's full aesthetic we cannot change the selected item and the items are pretty much hard coded so I just fixed it and make it more Dynamic for that we need to create a new array of all the label names and since we are using the C style string we will Define one item as the character for example named menu item and we will set this as array and the size of the array is actually the number of maximum number of characters for this I menu item so if you want to have multiple items we need to create a 2d array so we'll have another index in here that will set how many items do we have in the array and I think it makes sense to create a new constant and collect for example number items and since we have eight icons it kind of makes sense to have 8 items in the list as well the menu items will be an array sized menu items times 20 20 being the maximum number of characters and we will set the individual entries now we already have the array for the individual icons and it kind of makes sense to keep those two in syncs so what I will do is I will copy those individual icon names inside our array turn those into Strings and now give those some more meaningful names so now instead of getting those hardcoding names we can actually reference the names from these menu items array and that's what we will do right now so instead of dashboard we can say menu items and the dashboard was the iron number two make sure it will be the same as the icon index so for the parking sensor it should be item 6 and for the turbo gauge it will be item 7. let's restart the simulation and hopefully it will look exactly the same but the nice thing is now we can change the index based on the selected item but before we do so let me move some stuff around so it makes more sense and by that I mean grouping the code which relates to the same item to the same place let's add a few more variables and the first one will be to find out which item is currently selected so we can for example call it item selected and we also need to know which item is previous and which item is next let's calculate the item previous and item next values in the loop function so the item previous is of course the item selected minus one but when we get to the point where the item previous is smaller than zero we of course need to jump to the last item which in this case is the value of number items -1 in the very similar way the item next will be the item selected plus one if the selected item is the last item which means it's equal or bigger than the number of items in that case we need to set it to the first item which is number zero so item selection next will be zero now we can use those variables as indexes when drawing the items so the items like the previous will be used as index for the previous item for both the string and the icon the item selected will be used for the select item for both the string and the icon and items selected next will be used for the next item for both the string and the icon so now when I restart the simulation I should see a slightly different screen so the middle item the selected one is number 0 which is the first item so 3D cube the next one is the next one which is battery and the previous one you know before the three couples of course the last one which is a turbo gauge so it seems to be working but let's add few more buttons so we can actually move inside the menu so let's stop the simulation make it a little bit bigger click this add button and edit the push button now the push button works in the way that the top two pins and pattern two pins are always connected and if you push it you will connect the top with the bottom so knowing this we can connect one of the pins to some of the digital pin and one of the bottom pins to ground and for my previous example I've used pins 4 8 and 12 because it was easier for me to put it in the breadboard this way but you can already use any of those Philippines I would not use pin zero and one because those are also used for the serial communication but you can use any airplane from two up to 30. I will most likely use the same pins in here though so I will connect one of the top part of the button to pin 4 and the down pin I will connect to ground so maybe I'll choose this ground which is not being used yet now if I push the button the state of the pin 4 will be actually low because it's being connected to the ground but if I don't push the button the state of the pin 4 is actually unknownly it's undefined because it could be high it could be low but thankfully there is a way in Arduino to set the pin State when it's not being connected to anything and you do this by setting the mode to input pull up which means that if nothing is being connected it's internally connected to 5 volts so so it's reporting the state of 5 volts which means it's supporting one or or high state so the pin 4 will be high if the button is not being pressed and it will be low when the button is pressed so in the very similar way let me add two more push buttons so this one will be for selection and other one will be for moving menu item down and I will also connect those to digital pins again I will use the same pins as previously 8 and 12 and the downpins will be connected to the same ground and when you select the wire you can change the color which I think is quite handy because it makes much sense to set the ground to black color also for the push buttons you can click it and Define the keyboard key that is being associated with the button so it makes sense for example to set it to Arrow up for the up arrow down for the down button and the enter key for the middle one and just to know which button is which we can jump to the diagram and add the label property so for the first one we can edit the label property that will say up for the middle one it will be select and for the last one it will be down so now you can see those labels in here and I just realized that I've used the different pins in my previous example so the down was connected to pin 4 the select was connected to pin 8 and the app was connected to pin 12 but never mind it will still set those definitions in here so you can change it if you like to any other PIN number so we'll Define a new PIN value and let's call it button of pin which is pin 12. the next one is button select pen that's the pin 8 and the last one is button down pin which is pin 4. we need to set the modes for those pins using the pin mode in the setup function so I will call the pin mode function inside the setup function for all those individual pins so button up pin will be set to input pull up as well as all the R2 buttons so button select pin and button down pin now let's read the states of those pins using the digital read function in the loop function so inside the loop we'll just read the states of those buttons so I will say if the digital read of our button up pin is low that means that the up button is clicked actually pressed and in that case we will set the item selected to be the item selected -1 but of course if the item selected is smaller than zero we need to jump to the last item which is the number of items -1 in the very similar way we will read the state of the down button so we'll say that if the digital read of the button down pin is low the down button is pressed and in that case the item selected will be item selected plus one but if the item selected is bigger or equal to number of items that means that we are going outside of the range we need to set it to the first item which is item number zero let's restart the simulation and try clicking those buttons so if I press the down button I should jump to the next item and if I press the F button I should jump to the previous item and here it is the same sketch running on the real Arduino if you look closely to the wiring I think it's obvious why I've used the pins that I've used for the buttons because it just makes it easier to put it down on the breadboard which was kind of challenged with those big push buttons however the advantage of those big buttons is that you can get different caps like for example this round one or maybe the square one or like in this case of this project you can get this one which is actually made from two different pieces that you can disassemble and then put something in between those two pieces like maybe a printed icon or so so then you can know which button is which which is kind of Handy now when I press and hold the button it will Scrolls very fast in the menu and sometimes it even jumps by two items so that's probably the next thing that will be nice to fix and I've actually done this in my previous version of this OLED menu so if I open this sketch I have variables named button up clicked and bottom done clicked and I only decrease or increase the selected item by once if I click this button so no matter how long I do press this button I still only get one increase or one decrease I've also added the variable which is called selected screen or current screen and I can jump between screens which zero is menu one is screenshot and two is QR code so so if I press the select button I will jump to the screenshot if I press it again I will jump to the QR code screen and if I press it one more time I will jump back to the menu screen the last change compared to our version is adding this demo button or demo switch and in here it's a switch but in my breadboard it's just the wire so if I connect pins 13 to the ground I activate the demo mode and this one is jumping over every single screen and I can see it without touching the buttons which is kind of Handy if I don't have the buttons connected which is for example the case in here where I don't have any buttons but I do have four different OLED screens with different colors being the white yellow blue and the combination of yellow and blue and that's all for today's video if you have any questions please put those out in the comment section thank you very much for watching and I hope to see you next time thanks and bye

Channel: upir

Views: 431,465

Keywords: arduino, microbit, ui, gui, ui design, arduino display, oled lcd, gauges, gauge, digital gauge, dashboard, car cluster, digital car cluster, digital dashboard, esp32, raspberry pi, round display, animation, tutorial, diy, cluster design, pixel, microbit makecode, arduino ui, custom display, custom car cluster

Id: HVHVkKt-ldc

Length: 27min 57sec (1677 seconds)

Published: Fri Jan 06 2023