GUI: Example: Color Picker

Carl Sassenrath, CTO
REBOL Technologies
21-Oct-2008 18:07 GMT

Article #0153
Main page || Index || Prior Article [0152] || Next Article [0154] || 10 Comments || Send feedback

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 [
        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 ""
        button "Ok" close ; for now
        button "Cancel" close

    set-clr: when [enter] do [
        vals: get-face cpan
        color: add add add
   * vals/1
   * vals/2
   * vals/3
   * 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.


Updated 12-Jun-2024 - Edit - Copyright REBOL Technologies -