OLED Graphics Library : PART ONE
For this tutorial, we’re gonna take a look at the OLED Graphics Library, there’s quite a bit going on so for PART 1; we’re only going to cover the section on drawing primitives, accessing colours available, and exploring the different font sizes.
What you would need:
Hardware
- BlazingCore100
- 2.83” OLED w/ Touch Screen Interface Board
- Serial Comm.Key
- Power Supply (6V – 12V DC)
Software
Introduction
PART 1
We show you how to get the most basic of things done with the OLED screen; drawing shapes, writing text, displaying colours, just about right for getting up simple U.I (User Interface) for your projects.
For full details on the hardware and software used in this tutorial, head over to the download page and grab a copy of the datasheets and reference materials.
Hardware Setup
Follow the Hardware Setup as illustrated here.
Connect the power supply and the Serial Comm.Key (refer to this if you're not sure) and that’s all the hardware we will be using.
Initialising the OLED
Before we can use the OLED, we need to initialise it and define some basic settings.
 Code:
Public Sub Main()
'INIT THE OLED
OLED.Init(Const.Colour.Black)
OLED.Background.Colour = Const.Colour.Black
OLED.Foreground.Colour= Const.COLOUR.White
End Sub
What the above code does is to initialize the OLED with a black background, set the property of the background colour to black, and the foreground colour property to white. All text and drawings from the graphics library will use the foreground colour property.
COLOUR
Colours on the OLED are represented by a 16bit 5/6/5 RGB format. Meaning there are 5bits for the Red channel, 6bits for the Green Channel and 5bits for the Blue channel, making up a total of 16bits representing a single colour.
To change the colours of text and/or drawings on the screen, we change the setting of the foreground.colour property. To change the background colour, we change the background.colour property. An example would be the code we just typed to initialize the background and foreground.
BCore has a list of constant values that represent the 16 most common colours used in the web. These can be found under BCore Constants (Const) where the syntax helper will show a list of 16 colours that may be used without worrying about the exact value that represents these colours.
To get the syntax helper to show the list of colours, type “Const.Colour.” (or Color. Both spellings are accepted)
TEXT
Now that that’s done, let’s start printing some text to the screen.
Type the following after the initialization commands and hit the F4 button to compile, there should not be any errors. If there are, check for any syntax/typo/spelling errors. Press F5 to download the program.
Code:
OLED.Print “This is a test.”
The above command should print the text within the inverted commas at the top left hand corner (0,0) of the screen. If you are familiar with the Debug.Print command, well, OLED.Print works the same way as Debug.Print, only on different screens.
By default, the font size used is 8x8 pixels; Available font sizes are small (8x8), medium (10x12), and large (16x16) pixels.
To change the size of the font, we make use of the command OLED.FontType
Code:
OLED.FontType= Const.Font.Small 'DEFAULT
OLED.Print "ABCDEFGHIJKLMNOPQRSTUVWXYZ."
OLED.FontType = Cont.Font.Medium
OLED.Print "abcdefghijklmnopqrstuvwxyz."
OLED.FontType= Const.Font.Large
OLED.Print "1234567890."
Try the above code to see a simple demo of the different font sizes.
Again, we make use of the BCore constants to set the font sizes.
Note: Const a.k.a BCore constants, are constants that hold values meant to be used in conjunction with a certain method and property types within the BCore command set.
To change the position of the text, we change the cursor position before we start printing the text to screen. To do so, we need to provide the cursor the x & y coordinates of where we wish to start printing text to the screen. In the example below, we’re asking the BCore to write the text somewhat near the center of the y-axis of the screen.
Code:
OLED.Cursor.X = 5
OLED.Cursor.Y = 120
OLED.FontType= Const.Font.Large
OLED.PRINT "1234567890."
PRIMITIVES
Next, I’ll show you how to use the OLED.Draw commands to draw on the screen.
The BCore comes with a basic drawing library that makes drawing primitives really easy. We’re going to go through the different types here.
Let’s start with drawing a single point on the screen (1 pixel).
As the above would probably suggest, drawing a point on the screen requires only 1 point/ a single coordinate.
A point is a structure that represents 2 integer variables; x & y.
Let’s declare a variable of type “point”, and assign it with the coordinates of 10,10.
Code:
DIM P1 As POINT
'========================================================
Public Sub Main()
OLED.Init(Const.Colour.Black)
OLED.Background.Colour = Const.Colour.Black
OLED.Foreground.Colour= Const.COLOUR.White
'Assign x & y point coordinates[x,y]
P1 = [10,10]
'Draw a single point on the screen
OLED.Draw.Point(P1)
End Sub
We use the OLED.Draw.Point(point) command to draw a point to the screen at the given coordinates.
Drawing a line and a rectangle on the screen requires 2 points however, the starting point and the ending point.
We’ll use the command OLED.DRAW.LINE(starting point, ending point) and OLED.DRAW.RECTANGLE(starting point, ending point) respectively.
Code:
DIM P1,P2 As POINT
'========================================================
Public Sub Main()
OLED.Init(Const.Colour.Black)
OLED.Background.Colour = Const.Colour.Black
OLED.Foreground.Colour= Const.Colour.Lime
P1 = [30,30]
P2 = [100,50]
OLED.Draw.Rectangle(P1,P2)
OLED.Foreground.Colour= Const.Colour.Blue
OLED.Draw.Line(P1,P2)
End Sub
The above code should get the drawing on your screen looking something like this;
Next! Drawing a circle requires 2 parameters; the center-point coordinates, and the radius.
The command would be OLED.Draw.Circle (center-point, radius)
Code:
DIM P1 As POINT
'========================================================
Public Sub Main()
OLED.Init(Const.Colour.Black)
OLED.Background.Colour = Const.Colour.Black
OLED.Foreground.Colour= Const.Colour.Red
P1 = [30,30]
OLED.Draw.Circle(P1,50)
End Sub
And that’s it for the first part!
We’ll be covering the graphic library in parts; subsequent parts will be up soon enough!
|
Resources