Classic Application: Doodle Blackboard

Tutorial: This tutorial will go through a classic application on how you can make use of getting values from the touch screen, and displaying the coordinates on the screen. The end result? A mini chalkboard-like doodle program.

What you would need:

Hardware

• BlazingCore100
• 2.83” OLED w/ Touch Screen Interface Board
• Serial Comm.Key
• Power Supply (6V – 9V DC)

Software

• Sonata IDE

Introduction
This is one of the simplest (and fun!) examples of what you can do with a touch screen and a display.
If you don’t have a stylus you can make use of your finger.

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.
 

Pin Connections

The OLED Touch Screen is a 4 wire resistive touch screen.
However, since we will be using the library that is written natively in the BCore OS for the OLED interfacing board, no pin definitions are required.

If you haven’t already gone through the tutorial on how to get values from the touch screen, you may want to go and read up on it before coming right back, or you could just refer to the example code below. 

Getting the coordinates
Since we know that the screen is a resistive type (analog), we need to convert the values from analog to digital in order to make use of it. The 4 Touch Screen Pins are already connected to ADC (Analog to Digital Conversion) Pins on the BCore. When the command to get the X & Y coordinates is called, the BlazingCore would take care of reading the values from the 4 Pins, do any calculation across the - & + pins, and return the respective X & Y values corresponding to the OLED screen pixel resolution.

The following is a working example of obtaining the X & Y Coordinates from the touch screen, and displaying the values in the Debug Window. The reading is done 5 times per second (1000ms/200ms = 5).

Code:

Public X,Y as Integer
Public Sub Main()
 'READ ONCE TO INIT TOUCH SCREEN
   X = OLED.Touch.X()
   Y = OLED.Touch.Y()
   Do
     X = OLED.Touch.X()
     Y = OLED.Touch.Y()
     Debug.Print Cstr(X);" ";Cstr(Y)
     Delay(200)
   Loop
 End Sub
 

When nothing is touching the screen, the value should be (-1) for both axes.
When touching the 4 corners of the screen with a stylus or your finger, the values returned should be around those illustrated in the figure below.

Since the BCore OS returns the touch screen values scaled to match the OLED screen coordinates, all we need to do is to draw it at the same point. To do this, we’ll need to make use of the graphics library.

But first, we need to initialize the OLED screen.

Code:

Public Sub Main()
OLED.Init(BCK.COLOUR.BLACK)
OLED.Background.COLOUR = BCK.COLOUR.BLACK
OLED.Foreground.COLOUR = BCK.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 drawings from the graphics library will use the foreground colour property.

Now that we have initialized the OLED screen and have the code on hand to get the values from the touch screen, we will use the OLED.Draw.Point method to draw the coordinates. Since the method draws a pixel at a single specified point, we will have to provide the argument in its parameter as a data type of point. To do this, we make use of a point variable P1, set its X & Y value using the coordinates from the touch screen, and instruct the BCore to draw a pixel at point P1.
The following code illustrates this.

Code:

DIM TS_X, TS_Y As Integer
DIM P1 As POINT
'========================================================
Public Sub Main()
OLED.Init(BCK.COLOUR.BLACK)
OLED.Background.COLOUR = BCK.COLOUR.BLACK
OLED.Foreground.COLOUR = BCK.COLOUR.WHITE
'READ ONCE TO INIT TOUCH SCREEN
TS_X = OLED.Touch.X()
TS_Y = OLED.Touch.Y()
    
Do
        TS_X = OLED.Touch.X()
        TS_Y = OLED.Touch.Y()
        IF (TS_X > 0) AND (TS_Y > 0) THEN
        P1.X = TS_X
        P1.Y = TS_Y
        OLED.DRAW.POINT(P1)
        END IF
        DELAY(1)
Loop
End Sub

What the above code does is this; declare any variable to be used in the main program, initialize the OLED screen, set the colours to be used for the background and foreground, initialize the touch screen, have a do loop to constantly read the values from the touch screen, if a touch is detected (value would be more than 0), assign the values into point P1, and draw pixel on screen at point P1. Have a 1millisecond delay to allow the ADC to settle before reading it again, as well as to go easy on accessing the OLED GRAM during draw commands.

As a finishing touch, let’s put in some form of User Interface to make it a bit more user friendly, besides, it’ll make it look pretty. Everybody loves pretty things.

Code:

DIM TS_X, TS_Y As Integer
DIM P1, P2 As POINT
'========================================================
Public Sub Main()
DEBUG.PRINT "CHALK BOARD : DOODLE"

OLED.Init(BCK.COLOUR.BLACK)
OLED.Background.COLOUR = BCK.COLOUR.BLACK
OLED.Foreground.COLOUR = BCK.COLOUR.WHITE
P1 = [0, 0]
P2 = [319, 239]
OLED.DRAW.RECTANGLE(P1,P2)
OLED.CURSOR.Y = 5
OLED.CURSOR.X = 4
OLED.PRINT "CHALK BOARD : DOODLE ";
'READ ONCE TO INIT TOUCH SCREEN
TS_X = OLED.Touch.X()
TS_Y = OLED.Touch.Y()

Do
        TS_X = OLED.Touch.X()
        TS_Y = OLED.Touch.Y()
        IF (TS_X > 0) AND (TS_Y > 0) THEN
            P1.X = TS_X
            P1.Y = TS_Y
            OLED.DRAW.POINT(P1)
        END IF
        DELAY(1)
Loop
End Sub

And that’s it!

What’s next? Well, if you’re looking into making a mini paint program, you might wanna take a further look into the graphics library.

We’ll cover the basics of using the graphics library in another tutorial.

Full project source code (the pretty one) is available for download below.