a. Creating Simple Touch Buttons

<< Click to Display Table of Contents >>

Navigation:  Tutorials > Tutorial 13 - Touch Primitives >

a. Creating Simple Touch Buttons

This section shows how to create simple touch buttons using the lines and points.

 

 

Code

 

 

void setup()

{

/* Initialize CleO */

 CleO.begin();

 CleO.SetBackgroundcolor(BLUE);

}

 

void display()

{

 /* Start drawing screen frame */

 CleO.Start();

 CleO.StringExt(FONT_MEDIUM, 400, 150, LIGHT_GREEN, MM, 0, 0, "Press Button");

 CleO.LineWidth(20);

 

 if (!penDownOnLine)

 {

   CleO.LineColor(BLACK);

   CleO.Line(400 - (line_len/2) -3, 228, 400 + (line_len/2) - 3, 228);

   CleO.LineColor(WHITE);

   CleO.Line(400 - (line_len/2) + 3, 231, 400 + (line_len/2) - 3, 231);

 }

 

 if (!penDownOnPoint)

  {

  CleO.PointExt(400 - 2, 328, 30, BLACK, 0, 0);

   CleO.PointExt(400 + 1, 331, 30, WHITE, 0, 0);

 }

 

 CleO.Tag(1);

 CleO.LineColor(RED);

CleO.Line(400 - (line_len/2), 230, 400 + (line_len/2), 230);

 

 CleO.Tag(2);

 CleO.PointExt(400, 330, 30, RED, 0, 0);

 

 /* Display the completed screen frame */

 CleO.Show();

}

 

void loop()

{

 display();

 control();

}

 

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)

     penDownOnLine = true;

   else if (tag == 2)

     penDownOnPoint = true;

 }

 /* pen up */

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

 {

   previousDur = 0;

   if (previousTag == 1)

     penDownOnLine = false;

   else if (previousTag == 2)

     penDownOnPoint = 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 a touch on the item.

The display() function draws a line with tag 1 and a point with tag 2.

It checks whether these elements are affected and if so, it creates an effect of a button press.

The control() routine checks for the presence of a touch using the TouchCoordinates() command. It then checks the tag value to determine if one of the objects were touched. The main drawing function uses this information when drawing the line and point to decide whether to draw only the flat shape or the shadow around to give the effect of being pressed in.

 

 

Output

 

Here is the output displayed upon executing the above code snippet -

 

Tutorials13A-CreatingTouchButton