G'day and welcome to the guide video for the Glowbit Matrix 8x8. To follow along this guide, you're going to need a Glowbit Matrix 8x8, a Raspberry Pi Pico or a Raspberry Pi, and a few wires. Let's get started.

Out of the box, the Glowbit Matrix 8x8 looks like this. There are no wires or pin headers soldered to it, so the first thing you're going to have to do is solder some connections to your Matrix.

In order to get started, we'll just cover some of the pinouts on this device. Every data in and data out pin is labelled with an appropriate label. Every VCC pin has a rounded internal edge. You'll see these VCC pins are labelled as VCC. And every ground pin has a square internal edge.

In order to get started with this device, you only need three connections. All of the other pads are there, so you can make large tiled displays. For today's video, I've got one here that has some jumper wires soldered to it.

We'll get started by looking at how to connect the Glowbit Matrix 8x8 to a Raspberry Pi picker. The three connections you're going to need to make are a ground connection, a power connection, and a data connection.

We'll start with a ground connection. We'll be using this black wire here and connecting it to a ground pin, which is the third pin down from the top left corner.

For a VCC connection, we're going to be taking the red wire and connecting that to the VBUS pin on the Raspberry Pi picker. These Glowbit Matrix 8x8 displays can draw up to 2 amps when every single LED is set to maximum brightness. This is possibly too much for a USB port, so you will need an external power supply connected to the VCC and ground pins on the back of the device.If you want to make a bright display, lastly, this green wire is connected to the data in. That's going to go to GPIO pin 18. GPIO 18 is the fourth pin from the bottom on the left side when viewed from this way.

Making the same connections on a Raspberry Pi, we'll start with our ground connection and connect that to a ground pin, which is three pins down from the upper right-hand corner. Next, we'll connect our VCC. This will be connected to the 5V pin on the upper right. Lastly, our data in pin is going to go to GPIO pin 18, which is pin 12, or six pins down from the upper right-hand corner.

When setting up the Glowbit library on a Raspberry Pi, the most crucial thing to know is that you must run Thonny as root. To do this, click the terminal icon, type in sudo thonny, and we now have Thonny running as root. If you don't have this menu up here, there'll be a little link on the right side here. You click that, restart Thonny, and the menu should appear.

To install the libraries, you click Tools, Manage Packages. Now there are two libraries we need to install. The first one is called rpi-ws281x. This one here is the userspace Raspberry Pi library for the ws281x LEDs. The Globits use ws2812b LEDs, so we need to install this library. Next, we need to install the Glowbit library. Type in Globit, click Search on PiPy, and there's the first result. We click Globit, click Install, and the library is now installed.

To make sure the Glowbit library has been installed correctly, we'll type in import Globit, press Enter, and if we don't get any error messages, we're good to go.

For the rest of this guide, we're going to be using the Raspberry Pi Pico. Now it'sTime to get our Raspberry Pi Pico, connect our USB cable, and we can open up Thonny and get our drivers installed. If you haven't used Thonny with the Raspberry Pi Pico before, you can check out our guide on that.

With Thonny open and your Raspberry Pi Pico plugged in, the first thing you're going to need to do is install the Glowbit library. To do this, with Thonny open, we'll click on Tools, and then Manage Packages, and do a search for Globit. Searching on PiPy, we'll find the Glowbit result there, click the link, click Install, and then wait for the Glowbit library to be copied onto the Raspberry Pi Pico.

Once the library has been successfully installed, you should see this lib folder with Globit.py and petme128.py inside it. We'll start by running some demonstration code just to make sure all the connections have been made correctly. Go to the guide and find the section that says Running a Test Demo, select the first block of example code, Ctrl C to copy it, and we'll go to Thonny and paste it into our main.py file, then press Ctrl R to run. While that code is running, you'll see a series of colorful test demonstration patterns.

Now that we know that all the wires are connected correctly, we're going to look at how to set the color of individual pixels on the 8x8 matrix. Looking at our guide, find the section that's called Lighting Up Individual Pixels, select the first example code, and copy that into Thonny. Pressing Ctrl R to run this example, you'll see two pixels on the 8x8 display light up.

Let's have a look at how this code works. The first thing you'll see at the top of the code is, of course, Import Glowbit to bring in the Glowbit driver.Then we declare a matrix object. The matrix object is a matrix 8x8 from the Glowbit library. Then we create a white color in our variable called color. The X and Y variables here are just choosing a location to draw that color. Then finally, our call to matrix.pixelSetXY sets the color at X coordinate X, Y coordinate Y with the color from color. This is the code that makes the pixel in the upper left-hand corner become white.

The next example below that just puts all of this information directly into the function call itself. We'll make the X location 1, the Y location 2, and the color comes from the matrix.rgbColor function. This function takes a red, a green, and a blue intensity value between 255.

The coordinates on this matrix 8x8 display start at 0, 0 in the upper left-hand corner. The X coordinate runs horizontally increasing to the right, and the Y coordinate runs vertically increasing down. What that means is that when we run pixelSet1, 2, we get column 1, X location 1. It starts at 0, so 1 is the second one. And then the Y coordinate of 2 is the third pixel down from the top.

Next, we're going to look at the color wheel function in the Glowbit library. Scroll down to the part of the guide that's entitled the color wheel. And again, copy the example code from that section into Thonny. Pressing Control-R to run that code and a very colorful display will appear on your 8x8 matrix.

A closer look at how this code works. The import Glowbit and declaration of our matrix 8x8 object is exactly the same as the first example. We then have a nested for loop that loops over every single X and every single Y coordinate on the 8x8 display. Each time.This loop goes through, and we get a new color from the color wheel. The exact color that we get is some function of the pixel coordinates, and that is what causes the gradient across the screen. Once we've got a color, the matrix.pixelSetXY function is used to set the X location and Y location to some given color. Lastly, we call the matrix.pixelsShow function because this is what actually copies an internal frame buffer to the physical display.

Next, we're going to look at how to do scrolling text on a single 8x8 matrix. In the guide, scroll down to the section that says Scrolling Text, and as before, copy the first example into Thonny. Hitting Control-R to run this example, you'll see some text scroll across the 8x8 display.

Having a look at how this code works, you'll see a couple of key differences with the previous examples. At the top, when we declare our matrix object, we pass it a keyword argument rateLimitCharactersPerCent. What this keyword argument does is intentionally limit the frame rate of the display so that the scrolling text goes at a reasonable speed.

The next thing we do is call matrix.addTextScroll. That is the first step in making some scrolling text appear on the 8x8 matrix. The second thing you need to do is call matrix.updateTextScroll followed by a matrix.pixelsShow and roll that inside a loop. What's happening here is every time matrix.updateTextScroll is called, it moves the text one pixel along the screen, and then calling pixelsShow displays that frame buffer information to the physical LEDs. This needs to be done as long as scrolling text is still there to be scrolled across the screen.

So this matrix.scrollingText variableStays true until the text has finished scrolling all the way across the screen. Going down in the guide a little bit, there's a second example which is a little bit simpler. So we'll copy and paste that into Thonny and then have a look at how it works.

As before, we're limiting the update rate to one character per second. So that's one character scrolling past each second. Then the addTextScroll function call now has, most crucially, the blocking equals true keyword argument. What this does is it automatically scrolls the text across the screen inside this function. As a result, this function doesn't return until all of the text has finished scrolling. The color argument here just makes the text a different color. This time it's being specified with a custom RGB value.

Pressing Control R to run this example, you'll see the scrolling text go across the screen in a green color. Heading back to the guide, we're going to scroll down to the section called filling all pixels with a single color. As before, we will copy and paste that example and then have a look at how it works.

In this example, we're using the rate limit FPS keyword argument to the global matrix API object, just so this example runs a little bit faster than before. Inside this loop, we run through all integers between zero and 511. These are used as the argument to the matrix.wheel function. In other words, we're going to run through the color rainbow twice. The matrix.pixelsFill function then fills the entire display with whatever color is being displayed at the time. Lastly, the matrix.pixelsShow function copies that data to the physical LEDs.

Pressing Control R, you'll see the entireDisplay cycle through the color rainbow twice.

Next, we're going to look at how to draw basic shapes on the 8x8 matrix. Scrolling down in the guide to the heading lines, rectangles, triangles, and circles, you'll see a large table that documents briefly how all of the graphics primitives work to draw basic shapes.

There's a line shape, a rectangle, a rectangle fill, which just draws a rectangle and then fills it in with a solid color. There's a way to draw circles, and you can also draw triangles.

For now, we'll copy and paste the example, and then we'll change it to draw a different shape later on. Taking a brief look at the code, you'll see it creates a matrix 8x8 object, just like all the other examples, and then it calls the matrix.drawRectangle function.

What we're doing here is drawing a rectangle with the top left corner at pixel 0, 0, and the bottom right corner at pixel 7, 7. The last argument, matrix.white, just specifies the color that the rectangle is going to be drawn with.

Pressing Control R, we'll see that a rectangle is drawn around the perimeter of the Glowbit display.

Let's remix this code slightly by, say, drawing a circle. To do this, we're going to replace matrix.drawRectangle with matrix.drawCircle. Now the circle function takes the first two arguments being the center of the circle in pixel coordinates, and the third argument is going to specify the radius of that circle.

So let's just say draw a circle at 3, 5. So that's x-coordinate 3, the fourth column, and y-coordinate 5, the sixth row down. And we'll just draw a radius of, say, 3 pixels. Lastly, we need to specify a color.

So let's say matrix.green. Pressing ControlR, we'll see the circle we've just specified on the screen. You'll notice that the bottom few pixels of that circle have been cut off. This is completely normal. Basically what happens is any pixels in any of these shapes that would fall outside the screen are simply not drawn.

Next we're going to look at how to use the graph1D object. In this library, a graph is basically just a line where some input value specifies how long that line will be. Scrolling through the guide, we'll look for the section on bar graphs. And as before with the basic shapes, you'll see a table that summarizes how these graph objects can be used.

For now, let's just copy and paste the first example, and then we'll look at how it works. There are several important keyword arguments that control how these graphs are going to be drawn. Firstly, we need to specify an origin. This is just an xy coordinate that specifies where the graph will start to be drawn. Next we have a length. This controls, like it says, how long the graph will be at maximum value. Then we can control the direction. The direction can be up, down, left, or right. So you can draw a graph line in any direction on the matrix display. And lastly, perhaps most importantly, we specify what the minimum and maximum values of that graph will be. If you plot the minimum value to the graph, that will be no pixels on, and plotting the maximum value will be the full length of the line.

These graph objects are really useful because you can plot eight physical values, such as a temperature plus something like a tilt from an accelerometer, or perhaps an ADC value.

Lastly, we're going to look at drawing plots. A plot differsFrom a graph, a plot plots the history of a particular value. In other words, it draws a function of time. In the guide, scrolling down to where it says plots, you'll see a summary of all of the different plot arguments. As with graphs, they take an origin. But unlike graphs, they take both a width and a height. These are a 2D plot.

You then get a minimum and maximum value. These effectively specify what the lowest and the highest value on this 2D plot is going to be. You can then specify the color of this graph. And you can also specify whether or not it draws bars. If bars is false, it draws a single dot per data point. And if bars is true, it draws a line per data point.

Scrolling down a little bit further, we can find the first example. And we'll copy and paste that into Thonny. This particular example uses the sine function in order to generate data to be displayed as an example. If you look at the code, we generate a graph 2D object and only specify the minimum and maximum values to be just over and under one. Next, we specify bars equals true, just so more of the plot area gets filled in for aesthetic reasons. Then we have a loop that calls matrix.updateGraph2D, followed by our graph object. And then we generate some test data with a call to assign function. Lastly, we call pixel show to actually update the LEDs.

Let's press Control R and see what that looks like. These graph 2D objects are really great if you want to plot the value of something you're measuring along with a history of that value. Hopefully the examples in this video have provided some amazing inspiration for your own projects. If you make something cool or justIf you have a question, please leave a comment on the article for this video.