Let's get started using a PiicoDev OLED module and a Raspberry Pi. We'll connect these two together and get some example code working to generate shapes like lines, rectangles, we'll even do some text and numbers and some fancy animations. Let's get started.

To follow along you'll need a Raspberry Pi Single-Board Computer set up to run like a desktop computer. Today I'm using a Raspberry Pi 4B. If you need help getting started with Raspberry Pi we have a beginner's workshop for that. You'll also need a PiicoDev adapter for Raspberry Pi and an OLED module, and finally a cable to connect everything together.

100mm PiicoDev cables work best for Raspberry Pi projects. Start by mounting the adapter to your Raspberry Pi on the GPIO header. On a Raspberry Pi 4 the Ethernet label will face the Ethernet port. On a Raspberry Pi 3B this will be where the USB connector is. Connect your PiicoDev cable to one of the adapter ports and connect the other end to your OLED module. And I've just mounted everything to this PiicoDev platform to keep it nice and stable for the rest of the tutorial.

Power up your Pi, connect to a network, and we'll make sure that we have I2C enabled by going to Preferences, Raspberry Pi Configuration, go to the Interfaces tab and just make sure that I2C is enabled. Next open up Thonny and we'll install or upgrade PiicoDev as necessary.

Go to Tools, Manage Packages, and search for PiicoDev with two I's. There it is. And just upgrade or install as necessary. Let's run some code. In the article for this tutorial find the example to draw some lines, copy that code and paste it into Thonny. And press Ctrl R to run.

We'll be prompted to save. I'll call this line.py. And immediately we can see a horizontal line, a vertical line, and then a diagonal line appearing on our OLED module. These OLEDs are tricky to film so you might seeIn this video, my screen is flickering. That's just how the camera is filming the OLED. Yours won't do this.

We first import the driver for the OLED module and a sleep function to create a delay. Then, we initialize the OLED as a display. We call display.hline which will draw a horizontal line starting at the coordinates 10, 10. The line is 80 pixels long and has a color 1 for white. (0 would be black)

The PiicoDev OLED module is a 128 by 64 pixel display. Pixels are addressed by x, y coordinates starting in the top left with x increasing to the left and y increasing downwards. That means our top left pixel is 0, 0 and our bottom right pixel is 127, 63. We then draw the v line, the vertical line which goes down the side that starts at the same point 10, 10 and has a length of 35 with color 1.

Finally, we draw a two-point line. This will join the coordinates 10, 45 which is the end of the vertical line with 90, 10 which is the end of the horizontal line and that gives us the hypotenuse of this right angle triangle. That means that if I change the ending y coordinate here I'll make that say 30 and we should see the end of this line jump off and open the triangle. And there we go, nice.

Back in the article for the tutorial find the next example for rectangles and we'll copy that into a new script. So I'll create a new script, paste that, press Ctrl+R to run and we'll call this rect.

Immediately, you can see we have a tall skinny rectangle on the left and this kind of picture frame on the right. Looking at the code we have the regular setup we import and we create the OLED instance called display. This time we draw an unfilled rectangle at 10, 10, which is the top left corner of the rectangle (the same point that we started with last time). We have a width of 20 pixels and a height of 50 pixels.break it down to its textual representation. Finally we're printing a floating point number as well, 98.6, which we're rounding to two decimal points and wrapping in the same string function. And that's about it, you can mix and match those to print whatever text you like on your OLED display.Convert it to a string that can be printed.

And finally to get this truncated string or this rounded string we use a formatted print statement. So this syntax is just the syntax to print a floating point number with two decimal places of precision. So now 123.46 you can see we've rounded that second decimal place up.

We can create some pretty fancy plots using the graph function. Scroll down to the graph example and we'll copy that into another new file. And press ctrl r to run. I'll save this as graph. And now we have two lines being plotted as the screen scrolls across. It looks like we have these two like sine waves coming across the screen.

Very cool. Let's take a look at the code. After the usual setup we create two graph objects. Here we have graph1 and graph2 being set up as graph2d objects. And these take a min value and max value argument. Min value is the value that will be at the bottom of the screen and max value will be the value that will be at the top of the screen. And max value will be the value that is plotted to the top of the screen. So if we update graph1 with the value 1 that will appear at the top of the screen, the max value. Likewise for graph2 we initialize it with a min value and max value of negative 4 and 4.

Next up in a loop we update some variables with some kind of scary looking trigonometric functions. But that's not important that's just to make some nice shapes. We blank the display. It's important to blank the display anytime you're doing animations. And then we update graph2d. We update graph1 with the value we calculated for y. And we update graph2 with the value that we calculated for z. That allows us to plot these two lines independently and with different scalings. Finally I just draw a zero axis across the display kind of as a zero reference point.

Now this smaller faster frequency waveOkay, so let's start with the first part about the graphs. Graph z has a larger amplitude than graph y. However, both graphs have different min and max values. Graph z is being plotted to graph 2 with a min value of negative 4 and a max value of 4. This explains why graph z appears smaller than graph y, even though it has a larger amplitude. Scaling can be adjusted to match the amplitude of the data being plotted.

When plotting data from a sensor, it's important to adjust the min and max values to fit the context of the data. For example, if plotting temperature data, a min value of 0-degrees and a max of 100-degrees may be appropriate.

Next, there is an example of a PiicoDev motion sensor being used to create an animation on the display. The sensor measures tilt in the x and y axis, and a rectangle is drawn on the OLED display to represent the tilt angle. The animation responds in real-time to changes in tilt angle, allowing the square to move in any direction, including into the corners or in a circular motion.

To achieve this animation, the driver for the motion sensor is imported and objects for both the display and motion sensor are created. The setup includes a fill 0 to avoid smearing shapes across the screen when redrawing them. The tilt angle is obtained using motion.readAngle() and used to redraw the rectangle and update its position on the display.

Overall, the examples demonstrate how the min and max values can be adjusted to properly represent data and how the PiicoDev motion sensor can be used to create dynamic animations on the display.Take those angles and we convert them into an XY coordinate to draw our rectangle on the screen. Finally, we just draw a rectangle at that X and Y location on the screen.

We have this tuning parameter sensitivity so we could change that to, I don't know, let's go for half the sensitivity, 25. And now I have to move the motion sensor a lot further to move that square around.

So there you have it, a bunch of starter examples for using the PiicoDev OLED module with a Raspberry Pi. If you make something cool from these examples or if you just need a little bit of help, let us know on our forums. We're full-time makers and here to help.

Until next time, thanks for watching.