So thank you. Seat studio also stick to the end of the video to see how this chip performance compared to the Arduino Uno and Arduino Mega, and I think you will be surprised. At least I was, you can also use other displays, for example, its fancy, transparent OLED display, which uses the very same driving chip and has the very same resolution so its just a matter of connecting it to the iscari interface of the shell board. Someone asked me if you can see the image from the other side of the display, and the answer is yes, its just slightly dimmed and not shining as much anyway lets get started. We will start by looking at the documentation and its worth, noting that there are multiple versions of the shower board and there is this table down here which shows the comparison so Im using this one. The seats Studio, shell with the Chip And RF 52840. There is a second board which uses the same chip, but it has more sensors, which is the sense board, and there is also the board which uses the rp2040, which is Raspberry Pi chip. The great thing is that all those boards supports Arduino micro python as well as circus python for programming, and I will be using Arduino today, just because I like it, the most. If you scroll down, there is a section called getting started which shows the individual steps. So you will connect the board to be using the USBC cable to your PC, download the Arduino ID.

If you dont have it already, and then you have to install the additional board so Ill copy. This URL into my clipboard jump to Arduino IDE, select file preferences click here to open the additional boards manage, URLs and paste it in here. You can see, I already have it in here, so this is the one, but if you dont have it, you have to paste it and then click the OK button. Ok button one more time then go to tools, board and sideboard manager, type in seat. Nrf52 press enter key and install this one, so seat nrf52 board, so will click install? I have a rainbow because I already have this installed: click the close button, select tools board and make sure select the seat and rf52 board, either the sense or the normal one, which is the one that I have so Ill click this one and then the next Thing of course, once I have this board connected this select the right port and its nicely labeled. So I can see that this is its this one. But of course, for your case it will be a different com Port. Once we have everything set up its time to test the simplest possible sketch and that is blinking the onboard LED. So I will select file examples, Basics and that will be the blink one. I dont have to change anything. I will just press the upload button and if everything goes smooth, you should see a blinking on board LED on the board itself like this.

If you have problems uploading, the sketch try pressing the reset button once or twice there is this small, almost invisible reset button on the board itself or if you are using the expansion board, there is a slightly bigger reset button in here, so once we know that The microcontroller is working its time to test the expansion board and again I will open the documentation and if you scroll down theres a nice little image, which shows all the things that are included on this board but are mostly interested on the OLED display. So I will scroll down even a little bit more to find the OLED display section, and there is a small example on how to use it. So we have to place the microcontroller on the expansion board, then install the u8 G2 library to the Arduino IDE and then copy this sample piece of code. So lets do that back in Arduino IDE, I will select tools manage libraries, and here I will search for u8 G2 Library scroll down to find the right one, which is this one and make sure its installed. I already have this installed, so I have just installed button: disabled click, the close and paste the sample code from the seats to the website. Then click the upload button and see what happens. It takes some time so Ive made the playback little bit faster and you can see it shows an error message: couldnt find a board on the selected Port, so I will try to press erase the button and do this one more time and hopefully it will work.

Now and actually I had to press the reset button two times, but it fixed the problem. So now we should see a message displayed on the OLED display, saying hello world and I think its a great progress, because in just few minutes we were able to get the board up and running and use it together with the older display. Now lets talk about the UA digital library and how it works. There are three different modes that could be used together: the library there is a page mode, which is the same as the original UA Digi Library. There is a text mode, which is the one that we are using right now and in this model the display is split into 8×8 pixel pieces and you can only bring the text and then there is the third mode, which is a full screen buffer mode, which Is the one used for growing graphics and thats? The one which well be using today lets open some examples from the uad G2 Library using the full screen buffer. So I will open a file examples: uh G2 Library select the full buffer and, for example, this uh G2 logo. Now the important part is set to the correct initialization for the display, and you can see we have quite a lot of displays to choose from. So. If I open a previous example, which was working, you can see that they have all a display that is using the SSD 1306 chip in the size of 120 by 64 pixels, and we are using the hardware, its currency connection, without the reset pin so lets see.

If we can find something similar in this example, so we are looking for SSD 1306 in the 128 by 64 pixel resolution, using the hardware, its core c without the reset pin, and I think that this one looks like the one we are looking for. So I will uncomment this one and try to upload it on the board. Again, I will speed up the section A little bit so once this is up and running, we should see the uadg2 logo displayed on the OLED screen and it might look something like this. Nothing is moving or changing, but its a great first step for our own design, and I know that you know what we are trying to achieve because youve already seen the final product, but when I was thinking about this project to show I was thinking well, this Microcontroller should be faster than the Arduino Uno, so what about showing some kind of particles, for example? So Ive searched 4 pixel particle FX and I found this pixel FX designer application, which is kind of cool and shows a lot of nice examples. But unfortunately, all of those are using colors and I wasnt quite sure of how nicely they will look when converted to grayscale or actually black and white, but this one I kind of like. So I tried to recreate this one, except in the opposite direction of the animation so going from inside to outside anyway back to our code.

So for the next part, I will be using walkway, which is a free online, Arduino emulator, and I will scroll down and create a new project using the Arduino Uno. I, of course, want to add a new display so Ill click, this plus button and type in SSD 1306 Ola display, which I will connect to the ice course. Interface. A4 is SDA, so SDA is A4 and A5 with STL. Then the 5 volt for the VCC and the ground for the ground. I want to install the UAG delivery, so Ill jump to library, manager and click. This pause button and type in u8g2 and install this library then go back to sketch, and in here I will copy the u8 G2 logo example and press the Run button, and hopefully I should see the logo displayed on the display. You can see that there is quite a lot of code which we dont really need, so I will get rid of most of those, and this is probably the minimum required code to get the u8 G2 Library up and running. We are not growing anything at this point, so if I restart the simulation there will be nothing on the display displayed, but you can start adding our elements. Just to summarize the code in the setup function, we call the UA the G2 begin to initialize the uadg2 growing and then in the loop before the clear buffer. Then we will draw something and then well send the buffer to the display.

Now lets start by something simple, and it is, for example, by drawing the filled Circle, which is called the draw disk. So if I open a documentation, Ill just copy this piece into our code paste it in here of course copy the u8 G2 prefix and you want to set the x position to Y position and the radius. This is optional. So we can have this one. So lets just say that it will be in the middle of the screen, so 64 pixels for the X 42 pixels for y and their ideas might be. For example, 10 lets restart our simulation and hopefully well see the circle, which is exactly the case. So you can see now we have a nice looking Circle in the middle of the screen. Lets try to turn that into a floating particle, and for that we need few more variables. So we will need the position of the particle it lakes in y position. We also need some kind of velocity for the X and Y, so speed, X and speed y and lets just say. We also in some kind of size in the setup function lets initialize those values. So it will start in the middle of screen, so the X will be 64 and the Y will be 32 for the middle of the screen for the size lets say this could be, for example, 8 in diameter and lets add some random values for the X And Y speed and the equation I used was a random between 5 and 6.

. The reason for using different numbers is because the minus 5 is included in the random function, but the 6 is actually not so it will go from 5 to 5 and what I did is Ive multiplied this by 3, but at the same time, divided by 10 And adjust the trial and error and Ive used the very same equation for the Y as well, so inside a loop. We want to update those values. We want to change X and Y position by adding the speed, so particle x equals particle X, plus speed X, and we want to do the very same thing for the Y position. So particle y equals particle y plus speed Y, and you want to draw the circle on the position particle X and particle Y and, of course the radius will be particle size. If I restart the simulation, we should see the circle going to some direction and then disappearing completely, because we are not testing if it goes outside of the screen. So lets just do that. I will create a new if statement and test if the X and Y position is outside of the display. So I will say that if the particle X is bigger than 128 or if the particle X is smaller than zero or if the particle Y is bigger than 64 or smaller than 0, in that case, we want to reset the values so just copy it from The beginning from the setup function, without changing anything and lets restart the simulation.

So now, when the circle goes outside of the screen, it will reappear in the Middle with a different direction of any different speed. Also, as the particle goes further away from the center or closer to the edge lets, just make this a little smaller, so I will say that the particle size equals particle size times some coefficient and I found out that 0.95 works just fine. I want to also update my if statement and I will add one more check which, where I will say that if the particle size is more than some value, for example, 0.5, I will also create this particle one more time. So lets rear the simulation and hopefully when the circle goes away from the center, it will get some more to the point that it will disappear and then reappear again back in the middle of the screen, which is exactly the case. So you can see it starts big, but it gets smaller and you can play with the value. If you want the particle to stay bigger for a longer time, you can just use a value closer to one Speaking of number one. It would be nice to have more than one particle flying around in the screen for that we will Define a new constant. That will be the number of particles and lets just call this non particles and say, for example, to 24 now, and we want to change all our variables to be array so Ill just put in the array with the size of number of particles.

And then obviously we need to change all the setting the particles and drawing the particles to be inside a loop. So I will say that for integer I equals 0. While I is smaller than the number of particles, I will increase the I and change the individual variables to be referencing the element y in the array, and I will copy this for Loop into our main loop as well so inside. Here I will paste the very same loop. I will go over only particles again, I need to add this y element so particle x, y and pretty much all the other variables which are now errors should be created as arrays, and you can see its just a matter of adding square brackets with the index Of Y – and hopefully that should be it, but they will find out soon. Once I already start the simulation and well see if we see 20 different particles flying around – and that seems to be the case, so we have a nice looking particle effect coming from the center to the edge of the screen, changing size and changing the direction and Speed – and it looks even better running on the display – also just a little bit faster compared to the emulator lets, draw this big circle in the middle and show some kind of value. The big circle will be super simple, well just copy. This uh G2 Rolex function and well paste it below our Loop and for the X and Y position.

We will actually use the center of the screenshot, 64 and 32, and the radius might be, for example, 20 restart a simulation, and now we have a big circle in the middle for drawing the text. We need to set the color to Black, using the static draw, color function and setting it to zero will turn the color to Black. And, of course, we need to say to White before drawing the individual particles. So maybe here I will say to White and as for actual text, I will use the drawstring function and that one expects the X and Y position so, for example, 46 and 40 will change later on and lets set the string to 50 and see how it Looks like, and we dont see anything and I believe its because we havent set the font. Thankfully, there are quite so many fonts available for the uh G2 library, and I kind of like this one, which is called cards and 92 so Ill, make sure to sell it to the right name in my initialization. So in the setup function I will change the font by calling set fund from the uhg library Lets Race, our assimilation. Hopefully now we will see the string. So really, the only thing left to do is to make sure that the string is actually Dynamic and is somehow changing. For that lets, create a new variable and call it charge value and, while were creating new variables.

Lets also create a new C style string, which will simply called charge value buffer with the size of, for example, 10. It should be more than enough – and we will use this buffer later on – to convert this integer value into the system, character, string and display it on the display. But before we do so inside the loop function, I will just increase the charge value. So I will say the charge value is the charge Value Plus 1 and of course, if the charge value is bigger than 100, I will set it back to zero. Now, for converting this charge value into the C style string, we will use the S printf function and that one expects the buffer first so well copy the buffer name in here and then going to format the string using some attributes and well type in percentage D. For the integer, which will, of course insert which will be the charge value, but it wont also include the percentage sign, and to do that, we have to actually type in two percentage signs like this. So now we will connect this integer, which is the charge value together with the percentage time. So now, instead of printing 50, we can actually print charge value buffer instead, restart simulation make sure that are not missing any stomach islands, and you see the value rapidly changing from zero up to 100 percent lets make the big circle slightly bigger. So, for example, instead of 20 pixel in radius, I will say to 24 and lets just try to draw the string Center aligned for this.

We need to know the string width and we can get it by using the get string with function so Ill, create a new variable, called string, vict and call the u8g2 function, which is called get the string with. It requires only one parameter as it is our buffer, so Ill copy, the buffer in there, and now we know how the string is wide before even drawing it. So we can use it to our advantage and draw it in the center of the screen, which is 64 minus the string width divided by 2.. Now, if I restart the simulation, hopefully the small numbers will be also Center aligned, as well as the big numbers. So it looks a little bit better now, so you can see now it jumps to numbers below then its also Center aligned looks, looks much better and it looks even better running on the actual OLED display same as the last time you can see it runs much Faster on this microcontrol compared to the emulator inside the browser, the last touch will be growing a logo in the corner of the screen and the u8 G2 Library requires the images to be in the xbm format and then calling the draw xbm function but effectively. I found this online xbm editor, which is kind of cool. You can create simple images with this editor, so just change the size of the canvas to be 16×4 pixels, clear, the pixels and then try to draw my logo by the way.

If this is quite small, you can of course use Ctrl and scrobial to zoom the page a little bit more, and then we have bigger pixels to work with okay, so something like that should work for me, so Ill copy this area into our code somewhere around Here and then we will use this draw xbm function from the UI G2 Library, so Ill just copy this one paste it down here and fill in the right values also keep in mind that we have to first change color to be white, because before we change It to Black for our text so Ill change, it back to White, so value of one. Then we want to insert the exposition, which will be 128 minus the width of this image, which is 16. The Y Position will be the height of the screen, which is 64 minus the height of the image, which is 4. The width of the image is 16 and the height of the image is 4 and our bitmap is named with some random name, which is called image bits so Ill, rename this to bitmap peer logo and use the very same name in our drawing function, which is This parameter lets just add the semicolon and, of course, the UA, the G2 prefix tool function and restart the simulation to see how it looks like, and you can see that. Indeed, we have a small logo in the corner of the display being displayed.

Now an important detail about drawing the images. So if you define image like this, it will be initially in the flash memory, but once you start the sketch it will be copied in into REM. The thing is, RAM is usually smaller and we dont have to put stuff into RAM. That is not changing, and it will definitely not change the content of this image. So what we can do is we can tell the application to not copy this variable into the RAM memory and keep it in the flash all the time, and we do it by adding this program memory vort in here, and we also have to make this a Constant, so constant unsigned character variable, but the thing is: if you define an image like this, you have to use a different function to draw the image. So, instead of drawing draw xbm, we will say draw xbmp and the P stands for the program memory. So if I open the uad G2 documentation, you can see the herald. Xbmp version of this procedure expects a bitmap to be in the program memory. If I restart the simulation, it will look absolutely the same, except now the image is not being copied into random memory. It stays in the flash memory all the time, so we are saving our M this way. Okay, so Ive made three more changes so theres this FPS indicator, which shows how fast this is being animated. The circle in the middle is changing the size.

So there is this equation which calculates the sine function of the time value and its just making the circle bigger and smaller, and Im also placing the particles on the right the center, but with some kind of spread around so its more Dynamic. However, what you might notice as well is theres some kind of blinking around the text and its just you know not looking nice and it might be hard to tell from the walkway emulator whats going on, but it will be immediately clear when you switch to the Arduino IDE, so here I have the very same code and if I switch the board to be the Arduino Uno and compile the code, you will see whats going on and thats this one. We are using 96 percent of the RAM memory, which might be a problem, and it seems to be the problem why we see the blinking and the main reason for using so much memory is, of course, using the uid G2 library in the full screen mode, which Means that we need a buffer in the size of 128 by 64 pixels, which means that we are already using all half of the memory for just for the buffer itself. So as a quick fix, Ive changed the particle speed from flows to integer and then inside. The calculations Im just dividing by 10 instead of having the floating point value for the speed, and that seems to fix the blinking issue – and here is the final project running on the seat.

Shallow board. You can see it runs at 27 or 28 FPS, which is quite a reasonable speed, so lets see how it compares to the other microcontrollers, namely Arduino, Uno and Arduino Mega. So here is the arena Uno board that doesnt look like the Arduino Uno board, but thats the C3 version of Arduino ulo board, and what I like about it is this little switch which you can use to switch between 3.3 watt or 5 volt logic, which is Kind of convenient, so I will place this shield with two over the displays and upload the sketch, and you can see that FPS number is around 15 so like to have the speed of the seed shower board and its kind of matching the speed that we were Seeing in the walkway online emulator for Arduino Omega its kind of surprising to see that the FPS is only around 14 FPS, so its even lower than the Arduino Uno, I was actually thinking it will be a little bit faster. I mean the microcontroller frequency is the same: its 16 megahertz, but the audio Mega is 32 bit and the Arduino Uno is only 8 bit. Please. Let me know in the comments, if you think you know why its this happening, why the Arduino Mega is actually slower than the Arduino Uno and thats it for todays video.

https://www.youtube.com/watch?v=4GfPQoIRqW8