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:

stylize [
    lab50: label [facets: [size: 50x10]]
]

view/options [
    cpan: panel 2 200.200.200.80 [
        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
        draw-face cbx
    ]
][
    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.

10 Comments