Let's experiment with the PiicoDev OLED Module! We'll connect our OLED to a Micro:bit and run some examples for drawing shapes, text, fancy graphs and we'll even bring in a motion sensor for a fun remix at the end.

Transcript

Let's get started using a PiicoDev OLED module with a micro bit. We'll get these two connected and run some example code to create lines, shapes. We'll print some text and numbers, and we'll even create some fancy plots. Let's do it.

To follow along, you'll need a Micro:bit V2, the PiicoDev OLED module and adapter for Micro:Bit, and a PiicoDev cable to connect everything together. Start by plugging your Micro:bit into the adapter, making sure the buttons are facing up. Connect your PiicoDev cable to the adapter and connect the other end to your OLED module.

I've mounted everything to a PiicoDev platform to keep it nice and stable for the rest of the tutorial. And then connect to your computer with a USB cable. In the download section for this tutorial, find the two links. We'll need to download some drivers for this OLED module. Right click each link and select save link as. And I'm saving my files to a PiicoDev directory in my documents.

We're going to be using Thonny for this tutorial. If you've never programmed a Micro:bit in Thonny before, check out our guide for that. And if you prefer to use a programming environment that doesn't require installing, we have a guide for python.MicroBit.org.

Open Thonny, navigate to where you saved your files, select run, make sure that we're connecting to a Micro:bit and connect to your micro bit. We'll upload both these files to the micro bit. So click the first, hold shift, click the second, right click and upload to micro bit. And there's our files on our micro bit.

Returning to the guide, let's copy the first example, which is for drawing some lines. I'll copy that code and paste it into the new script window. Click save and we'll save this to our Micro:bit as main.py. The script is ready to run.

Press control D to restart and we can see on the OLED, we get a horizontal line, a vertical line, a diagonal line and a rectangle. The OLED module is working, and we can now start programming our own designs. Great work!In this video, I am demonstrating how to draw a right angle triangle on the PiicoDev OLED module. The first step is to import the driver for the OLED module and a sleep function to create a delay. Then we set up our OLED and call it display. We use the display.hline function to draw the first horizontal line of our triangle. The first two arguments are the XY coordinates for the start of the line. The third argument is the length of the line, and the fourth argument is the color. In this case, the color is white.

The PiicoDev OLED module is a 128 by 64 pixel display, and pixels are addressed by XY coordinates, starting in the top left with X increasing to the left and Y increasing downwards. Our top left pixel is 0,0, and the bottom right pixel is 127,63. Using these coordinates, we draw the first H line 10 pixels in from the left side and 10 pixels down from the top.

We call display.show to actually show that line and create a small delay to see the lines coming in sequentially. Next, there's a call to V line, which is just the same as H line, except this draws a vertical line. We use the same start point, 10,10, and give it a length of 35 pixels.

Finally, we call display.line, which is a general two-point line that draws from one XY coordinate to another. In this case, we draw from the end of the V line to the end of the H line to close our triangle. If we change the angle of our triangle, we can see the diagonal line move accordingly.

Let's draw some rectangles now. You can find examples in the documentation on our website. Remember, if you have any questions or need further assistance, our friendly and knowledgeable customer support team is here to help at any time.Code for rectangles, copy that code. And we'll just paste it over main. Save the script and run with control D.

After a short delay, there's some shapes appearing on the screen. We have this tall, skinny rectangle and a white rectangle with a black rectangle drawn over it to create this kind of picture frame on the right.

Let's take a look at the code. We do our usual import and setup, and then we create an unfilled rectangle with display.rect. Just like lines, we have a starting coordinate. We're using the same point, 10,10 for our first rectangle, followed by a width in pixels and a height in pixels. And of course, one is the color of the outline.

It takes a little bit longer to process, but we can create filled rectangles as well. Here we create a filled rectangle with coordinates 50,10. This is the top left corner of our white rectangle. We have a width of 50 and a height of 40, and the fill color is white as well. Then we can draw a black rectangle over it to subtract some of that white. We call fill rect again, and we start at 60,20, which is a little bit inside the first rectangle with a width of 30 and a height of 20. This time the fill color is black, zero.

Filled rectangles take a little while to color in using the micro bit. So if you want your script to run faster, just use rectangles that are unfilled instead of filled rectangles. Now, if I move the inner rectangle 10 pixels to the right, so I'll change that 60 to a 70, and press Control R to run and save. Now the black rectangle has shifted to the right, and we've created a C shape instead of that picture frame from before.

To print text, we'll need to download a font data file. Find the link to the data file in the article, right-click the link, and save it to your working directory as before. Copy the example for text from the article, paste it into main, and"Upload that font data file to your micro bit. Now when we run the script, we get text on our OLED. Let's take a look.

The first line says, hello world. The second line says, this is me. And then the next two lines are some numbers, 123.4567 and 123.46. Let's take a look at what's going on.

Our first call to display.text just includes the string, hello world. So we can print literal strings. The next two arguments are the top left coordinates for that string. So this H is starting in the top left corner of our OLED. And of course, one is the color of the text. We can also print variable strings. So here we're printing the variable, my string. And we've defined that earlier in the script as this is me. For the coordinates, we've incremented the Y coordinate to 15. So it brings it down to a new line. Our third line, we are printing a number, my number, which is defined here as 123.4567. And to make that show up on the OLED, we need to convert it to a string. And finally, we print the same variable again, but this time we use a formatted print statement. This is the syntax to print a number with two decimal places precision. And so we can see we actually have some rounding there. 4567 gets rounded to 46.

Our final example today is for some fancy graphs. Find the graph example, copy the code and paste it into main. Run with control R, and you'll see we have some graphs forming on the OLED.

Taking a look again at the code, we do the regular setup. We import some math functions to generate some functions to plot. And we initialize two graph 2D objects, graph one and graph two. And these are initialized with a min value and max value. What that means is the min value is whatever value will be at the bottom of the graph. And the max value is whatever value will be at the top of the graph. So we can see graph one is only capable of plotting."In this video, we're going to look at some 2D graphing on the micro bit. So we have a new example here. It's called 2D graphing, and we'll take a look at the code in just a moment. But first, let's take a look at what we're going to do. So we've got a 64 by 64 OLED display here, and we're going to use it to plot some graph data. So graph one can plot between negative one and one. Graph two, however, can plot between negative four and four in a loop.

We have two variables, Y and Z, that we assign some trigonometric wave functions. Y has an amplitude of one, and Z has an amplitude of two. So we update the values Y and Z, and then we call display.fill to blank the display. We don't want to plot the graph over the top of an old graph. That would just smear it across the screen. We call update graph 2D, and we want to update graph one with the Y value. We do the same again with graph two for the Z value.

And finally, I just draw a horizontal line across the whole screen to work like a zero axis. And so even though Z has twice the amplitude of Y, it shows up as a smaller waveform on the graph because graph two has been initialized with a larger range. So these min value and max values are the really useful tuning parameters for if you want to plot different variables. And so these min and max values are the really useful tuning parameters to change how your graph looks to work for the sensor that you're using. If you're plotting temperature, you may want that to be from say zero to 100-degrees.

Just to give you an idea of what's possible, I've connected a PiicoDev motion sensor, and I'm mapping the tilt angle from the motion sensor to XY coordinates on the OLED display. And so you can see I'm able to move this rectangle around the screen just by tilting the motion sensor. If I go too far, it will wrap to the other side. How cool is that?

If you want to run this example yourself, copy the remix code into main.py. You'll also need to download another device driver, this time for the motion sensor. So right click that link and save link as, upload to the Micro:bit as usual and have fun with it.

And a brief dive through the code. We do our regular PiicoDev setup. This time we import.The functionality for the motion sensor.

We initialize our display and our motion sensor.

We call motion.readAngle to read the tilt in the XY plane. And we save those as AX for angle X and AY for angle Y.

We then map those angles to XY coordinates on the OLED. And finally, we draw a rectangle at those XY coordinates to show the tilt.

And so there you have it, a bunch of useful functions to use with the PiicoDev OLED module.

If you make something cool from these little examples, or if you just have some questions, let us know on our forums.

We're full-time makers and here to help.

Until next time, thanks for watching.

Comments


Loading...
Feedback

Please continue if you would like to leave feedback for any of these topics:

  • Website features/issues
  • Content errors/improvements
  • Missing products/categories
  • Product assignments to categories
  • Search results relevance

For all other inquiries (orders status, stock levels, etc), please contact our support team for quick assistance.

Note: click continue and a draft email will be opened to edit. If you don't have an email client on your device, then send a message via the chat icon on the bottom left of our website.

Makers love reviews as much as you do, please follow this link to review the products you have purchased.