GUI: Example: Color Picker
We're getting to the point in R3 where we want to start throwing micro-reblets at the GUI to see what they look like and help uncover any problem areas.
Here's an example of a simple color picker. It shows a few things:
- Basics of panel-in-panel layout (resizable)
- Transparent panel background overlay
- Face DO reactor (event action) reuse
- In-context computation of values
- Auto computation on view (entry)
- API access to panel elements
- Option override of natural size vs actual size (box)
- Automatic sizing and resizing
The code is:
lab50: label [facets: [size: 50x10]]
cpan: panel 2 126.96.36.199 [
lab50 "Red:" slider red do 'set-clr
lab50 "Green:" slider green do 'set-clr
lab50 "Blue:" slider blue do 'set-clr
lab50 "Alpha:" slider silver do 'set-clr
group 1 [
cbx: box options [size: 100x24]
cfd: field "0.0.0.0"
button "Ok" close ; for now
button "Cancel" close
set-clr: when [enter] do [
vals: get-face cpan
color: add add add
255.0.0.0 * vals/1
0.255.0.0 * vals/2
0.0.255.0 * vals/3
0.0.0.255 * vals/4
set-face cfd form color
set-facet cbx 'area-color color
title: "Pick a Color"
columns: 0 ; horizontal
The result is...
(Ignore the color-scheme/theme -- just a vibrant development scheme to keep awake.)
So, other than the "theme" what parts would like I like to improve?
It's kind of a small thing, but I don't like that stylize at the top for the lab50 style. We can remove it by fiddling with the sizing defaults for label itself. The same may be true for the box face that sets the size option.
All of this is a balancing act of course. It's impossible to generate every useful layout with just the default options, but we can at least strive for making it as simple a possible, and of course, no simpler.