a. Color Picker

<< Click to Display Table of Contents >>

Navigation:  Tutorials > Tutorial 14 - CleO Utility Widgets >

a. Color Picker

This section shows how to utilize the color picker widget using the Utility widget command ColorPicker().

 

 

Command Prototype

 

uint16_t ColorPicker(const char* Prompt, uint32_t &argb);

 

Parameters

Description

Prompt

text displayed on top of the widget screen

argb

to store selected color value

 

 

Code

 

 

void setup()

{

/* Initialize CleO - needs to be done only once */

 CleO.begin();

}

 

uint32_t color1 = ORANGE;

uint32_t color2 = CYAN;

 

void loop()

{

/* Start building a screen frame */

 CleO.Start();

 

 CleO.Tag(1);

 CleO.StringExt(FONT_MEDIUM, 160, 200, color1, MM, 0, 0, "Change color 1");

 CleO.Tag(2);

 CleO.StringExt(FONT_MEDIUM, 160, 250, color2, MM, 0, 0, "Change color 2");

 

/* Display completed screen frame */

 CleO.Show();

 

 int16_t x, y, dur, tag;

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

 if (tag == 1)

   CleO.ColorPicker("Changing color 1", color1);

 if (tag == 2)

   CleO.ColorPicker("Changing color 2", color2);

}

 

 

Description

 

The above code snippet displays "Change color 1" and "Change color 2" text on the screen and upon pressing any of this text, the ColorPicker() widget is called which allows users to pick any color.

 

Note: Make sure to perform the screen calibration. For details, refer to Tutorial 19 - Miscellaneous Commands > a. Screen Calibration.

 

 

Output

 

Here is the output displayed upon executing the code snippet -

 

Color Picker

 

Color Widget