The Color-Picker Widget

[info-creaticode]

 

Prerequisite

• The Label Widget

 

Description

You can use a color-picker to allow the user select a color (including transparency value), then you can use this color value in other blocks.

 

Adding a Color-Picker

 

Parameters

• Center Position: The x and y positions of the center point of the color-picker.
• Color-Picker Name: A unique name to refer to this color-picker later.

 

Using the Color-Picker

You can open or close the color-picker by clicking the round button. You can also close the color-picker by clicking anywhere outside the color picker window.

You can pick a color by clicking on the color palette directly, and check the preview window on the bottom right.

You can also read or set the color values using the textboxes at the bottom. The Hex value is always shown on the left (more about that format below), and the other fields are for the RGBA or HSL format.

 

Reading from a Color-Picker

You can read the color value of a color-picker using this block:

 

Parameters

• Widget Name: You need to select the widget to read the value from. For a color-picker, its value is the color selected by the user.

 

Value Format

The format of the color value is 8-digit hex value “#RRGGBBAA”, such as “#3366ccff”. For example, the first 2 hex digits “RR” represent the red color component, between 0 and 255. Similarly, the “GG” digits represent the green color component, the “BB” digits represent the blue color component, and the “AA” digits represent the alpha component (ff means fully opaque and 00 means fully transparent).

 

Handle the Change Event of a Color-Picker

You can listen to the change event of a color-picker with this block:

 

Parameters

• Widget Name: You need to select the name of the color-picker to watch for value change events.

 

Demo

This example program draws some random lines whenever the color picker’s value changes. It uses the value of the color picker to set the color of the pen.