b. Creating Touch with Images

<< Click to Display Table of Contents >>

Navigation:  Tutorials > Tutorial 13 - Touch Primitives >

b. Creating Touch with Images

This section shows how to create a touch button using the Images.

 

 

Code

 

 

void setup()

{

 /* Initialize CleO */

 CleO.begin();

 centerX = 320 / 2, centerY = 480 / 2;

 

/* Get the handle by loading bitmap */

 handle = CleO.LoadImageFile("@Pictures/ctg.jpg", 0);

 CleO.SetBackgroundcolor(BLUE);

}

 

void display()

{

/* Start building a screen frame */

 CleO.Start();

 CleO.BitmapJustification(MM);

 CleO.RectangleJustification(MM);

 CleO.StringExt(FONT_MEDIUM, centerX, 0, LIGHT_GREEN, TM, 0, 0, "Press Image");

 

 /* Draw background rectangles only when image is not touched */

 if (!penDown)

 {

   CleO.RectangleColor(BLACK);

   CleO.RectangleXY(centerX - 1, centerY - 1, 200, 246);

   CleO.RectangleColor(WHITE);

   CleO.RectangleXY(centerX + 1, centerY + 1, 196, 247);

 }

 

 CleO.Tag(1);

/* Display original bitmap */

 CleO.Bitmap(handle, centerX, centerY);

 

/* Display the completed screen frame */

 CleO.Show();

}

 

void loop()

{

 display();

 control();

}

 

int16_t previousDur = 0;

int16_t previousTag = 0;

 

void control()

{

 int16_t x, y, dur, tag;

 CleO.TouchCoordinates(x, y, dur, tag);

 

/* pen down */

if (previousDur == 0 && dur != 0)

 {

   previousTag = tag;

   previousDur = 1;

 

   if (tag == 1)

     penDown = true;

 }

 /* pen up */

 else if (previousDur == 1 && dur == 0)

 {

   previousDur = 0;

 

   if (previousTag == 1)

     penDown = false;

 }

}

 

 

Description

 

Using the Tag(int tag_no) routine, you can draw the CleO primitives which get assigned a tag.

This tag is used to identify touch on drawing.

In the above code snippet, the display() function draws an image with tag 1.

It checks whether it is touched and if so, it creates an effect of image button press.

Use the @ symbol only when performing the file operation from the eFlash and not from the SD Card.

 

 

Output

 

Here is the output displayed upon executing the code snippet -

 

2-CreatingTouchWithImages