Arduino & OLED: No Coding Needed (Arduino UNO, SSD1306 OLED IIC, Lopaka, Photopea, u8g2)

okay so in this video I'm gonna show you how to create this design on this OLED screen using the OLED screen and the Arduino Uno and you already know it from the title of the video this time it will be different because this time I will not be writing any code this video is sponsored by PCB way but more about them later in the video so what does it mean not writing any code let me explain usually when I do a project like this I would start in Photoshop or in photop which is a free online editor similar to photoshop and I will draw rectangulars and the outlines and add some labels maybe some lines but for the most part I will be using the pencil tool and fill the individual pixels to create some nice looking images and icons and actually as I talk you can see me trying to recreate this screen in the photo P tool and once I'm happy with the design I want to pull this on the OLED screen but that takes few more steps I need to export the individual icons as images and then convert those to C style arrays using for example the image to CPP website then I can copy those arrays into my Arduino sketch and I can draw those images using the draw xbmp function however this function requires a position so I need to go back to photo p and find out what's the position of the icon and while it takes only a few clicks I need to do it for every single icon and not just icons but also all the labels and other elements for example if I want this progress bar failed to be drawn as a rectangle I need to click this distance it's checkbox and divide down the X and Y values as well as the width and height so I think that you can already tell that it takes some time to turn this design into the Arduino code so let me show you how to make this process much simpler and faster but before I do so let me talk about the sponsor of today's video which is a PCB way and not only you can get pcbs but also 3D printing and CNC Machining and other types of manufacturing also if you use the link down in the description you can get 10 pcbs for free only paying for shipping so thank you PCB way and let's get back to our video so yes you can skip a lot of steps in the process and that's by using a free online editor called lopaka so this editor started as a tool for creating custom screens for flipper 0 but the location recently decided to add support for more devices and more libraries and one of the library is uh G2 that you can use with Arduino Uno and over the displays so let me show you how to use this tool so as a first step we need to change the library to you adg2 and set the correct display resolution which in my case is 128 by 64 pixels now we have access to all the different tools in the middle of the screen so if I want I can for example draw a frame by clicking this Frame button and then drawing the frame in this display area and if I switch to the code tab you can see that we have a new line saying draw frame with some parameters those being the X and Y position and the width and height of the frame and as I change the values in here on the right side of the window for example the X position you can see it's also changing in the code so just like this we can draw a frame see how the frame looks like but at the same time we have a code that we can use for our Arduino sketch so we don't have to remember those numbers and we can just use this code and that of course speeds up the process a lot so we can draw frames which are outline rectangles we can also draw boxes which are field rectangles we can draw lines we can draw dots which are individual pixels we can draw circles which are outline circles and disks which are field circles we can also add some labels and we can select the selection tool and move stuff around so we can select for example this piece and wait around and also this rectangle could be moved around you can also select any object by clicking the item in the list on the left side and you can change the parameters on the right side of the screen you can also add predefined icons by clicking this icons Tab and then dragging any image over the display so for example this battery icon or maybe this Arrow you can import your own image or if you want you can actually draw the image and just by clicking this draw button and then drawing the individual pixels you can fill the pixels with the left Mouse button and delete the pixels with the right Mouse button if you want you can also delete stuff and that's by clicking this x icon next to the item so I will delete a few of the stuff or if you want you can delete everything by clicking this reset button and that's what I will do right now because I want to start with the blank screen and let's create something that looks like a progress bar screen I will start by drawing the frame in around this size for example and then a box which will be the fill of the progress bar so for example something like this and of course move it more to the left side so there is only one pixel Gap and the frame by clicking this string and clicking somewhere and changing the string to for example progress and some value I don't know 60 percent then I can add some screen title for example adding new string on the top of the screen this one might be for example progress bar screen and change your font to someone's more for example this one move it all the way to the left side and draw a new line that will be the divider between the top of the screen and the middle of the screen and since we have a lot of icons to choose from maybe we can add few of those for example the lock icon I will move it to the right side I can add the Bluetooth icon again move it to the right side and finally maybe the volume icon again all the way to the right side like so at any time I can select the previous icons and also move those around if I want but I think that I will add one more icon that is this warning icon and I will move it next to the label so I'll move it down here and then select the label it's self and move it more to the right side if I want I can also use the arrow keys on my keyboard to move it with one pixel increments at this point I like how it looks like so I think it's time to try it on the real Arduino actually let's try it on walkway which is a free online Arduino emulator and as a starting point I will use a sketch for my previous video called image to OLED in 60 seconds so I'll open this walkway project and you can see that I have the Arduino Uno connected to the OLED screen and if I run the simulation we are just showing some image so I want to do is I want to delete this image so I will delete this array from the code and it's quite big and I also don't need this draw xbmv function in here so all that's left is the initialization of the library of the display then in the setup I have the begin function and in the main loop I am clearing the buffer and then sending the buffer and whatever is in between will be drawn to the display and as the place where we'll paste the code from the lopaka editor so I will jump back to the low Packer and click this copy code that will copy this piece of code in the clipboard then go back to walk the emulator and paste it in here now the only thing that I need to do is to move those images all those array is outside of the loop so I will move it outside here but other than that we don't need to do anything else you can see that we are drawing frames boxes strings lines and images and hopefully when I click this restart simulation button I should see the very same design as we are seeing in the lopaka editor and that seems to be the case actually let me show both windows at the same time so this is the walkway editor and this is our design in lopaka and you can see that we were able to create this design in a very short time so the only thing that remains is running this only real Arduino so let's do it right now for that you will need the Arduino unon and the SSD 1306 128 by 64 pixel resolution its color C version of the Ola display I have three different versions ranging from the smallest 0.9 inch size the middle one is around 1.5 inch and the biggest one is around 2.4 inches the physical Size Doesn't Matter and they should all work you will also need some jumper wires to connect the display to the Arduino the connection is the same as on the walkway website which means that the ground goes to ground though VCC goes to 5 volts then the scl the serial clock goes to pin A5 and the SDA serial data goes to pin A4 if you don't want to remember those pins the Arduino board will oftentimes have a dedicated SDA and STL pins those are the same pins as pins A4 and A5 just properly labeled so once you have everything connected we can jump to the Arduino IDE and here you can paste the code from the walkway sketch if you have never used the u8 G2 library before you need to go to libraries type in u8 G2 and click the install button or in my case there's the update button because I already have this Library installed then you select the correct board and click the upload button and hopefully after a few seconds you should see the very same sketch running on the real Arduino board it's kind of boring because nothing is moving nothing is animating but we can easily fix that and that's one of the advantage of using the uadg2 functions to draw stuff instead of using for example full screen image so I can set the fill of the progress bar to be for example 100 to fill it all the way to the right side and I can also change the label to say progress hundred percent and if I restart the simulation now it should look differently but obviously I would like those to be animated on their own so let's create a new integer variable called progress and set it to 0 and use this progress variable to set the width of the rectangle of the fill of the progress and once we do everything I want to increase the progress I will say the progress equals progress plus one and of course if the progress is bigger than 100 I will set it back to zero and so if I restart the simulation now I should see the fill of the gauge being animated but it's going very slow because I have this delay of one second in between every frame I guess I can just remove it and see how fast it goes without any delay at all and it's not super fast so I guess I will keep it this way that is without any delay in between frames we also want to change the value inside this string and for that we will also need a new variable that will be the C style string which is just an array of characters so it will be character and let's call it buffer and we need to have enough characters to hold all the individual characters so I guess in this case let's just make it for example 32 to have some space around and before we show the content of the buffer I want to set it to be the progress then the value the value will be the progress and then the percentage sign and I can do it using the S print F function and that function could be used to put all the different stuff into our buffer so let's just use our buffer and we want to add the string progress and we also want to get the value of the variable progress and to do that we have to type in percentage sign D that stands for number and as a third parameter I will say the progress variable name so for our drawstring function we will be now drawing the content of the buffer instead let's restart the simulation and see what we get so the value is changing but we are missing the percentage sign and we can add this inside the string as well but there is one catch and that's because the percentage sign is used to get the value of the variable so if we want to print the percentage sign we have to actually put two percentage signs like this and that should fix it so now the progress bar is filling and the value is reflecting the change let's quickly try it on the real Arduino and as you can see it's also animating nicely on this OLED display so in no time we were able to get this design up and running thanks to the low pack application let me actually show you one more feature of the lopaka application that is quite helpful and that I might be using for my future projects as well as mentioned already I start most of my projects in Photoshop or photo Peak and then when I'm happy with the result I export those individual layers by going to file export layers and it could look something like this now even at this point the yellow pack application could be helped plot in speeding up the workflow but I need to also export the full screen image by going to file export as PNG image and then exporting this inside lopaka you can import this image by clicking import image and selecting this full screen image then placing it on the canvas and clicking this overlay ignore checkbox which means that it will be not part of the code but it can still be used as a reference to position other elements so now what I can do is I can import our images unfortunately I have to do this one by one and then I can start placing those images over my canvas and position those based on this reference image so again I don't have to carry about the positions because those positions will be set automatically in the code I just drag and drop stuff and make sure it's on the right positions and as a bonus I don't need to convert those images into the arrays because that will be done automatically for me in the low pack application so I have this resulted code that I can test on the Arduino and that is done by copying the code in the clipboard going into my sample sketch and paste it in here and just moving those individual images outside of the main Loop like so and then restarting the simulation and what would previously take me a few minutes could be now done in just a few seconds so again using this reference image by clicking this ignore overlay checkbox could be a nice helper for positioning already exported images and here is also this design running on the Arduino and I have to say that being able to focus on the UI design and not worrying about the positions and sizes was quite nice the yellow pack application is quite simple and has some limited functionality but even at this point it's very helpful I can already see how it can help me save some time especially for complex designs and I'm very excited to see how the project will evolve and that's all for today's video if you have any questions or comments please put those on in the comment section thank you very much for watching and I hope to see soon thanks and bye

Channel: upir

Views: 32,916

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: Eyvzw_ujcS0

Length: 12min 31sec (751 seconds)

Published: Tue Aug 08 2023