The Color-Picker Widget
CreatiCode last edited by info-creaticode
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.
- 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.
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.
You can read the color value of a color-picker using this block:
- 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.
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).
You can listen to the change event of a color-picker with this block:
- Widget Name: You need to select the name of the color-picker to watch for value change events.
This screencast shows how to change the color of a label whenever the user picks a different color with the color-picker.
In this program, whenever the color-picker is changed, we read its color value, and use that value to set the background color of the label.