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);





text displayed on top of the widget screen


to store selected color value






void setup()


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




uint32_t color1 = ORANGE;

uint32_t color2 = CYAN;


void loop()


/* Start building a screen frame */




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


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


/* Display completed screen frame */



 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);






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.





Here is the output displayed upon executing the code snippet -


Color Picker


Color Widget