1.  Gradient

Gradient images are widely used within applications and web pages to enhance appearance. The gradient sub-command (of winop image) provides numerous options for generating complex, on-the-fly images tiles.

1.1  Options

The general form is:

winop image gradient image leftcolor rightcolor ?options...?

where options are:

-type halfsine|sine|linear|rectangular|radial|blank

Set the type of gradient. The default is sine.

-skew N

The skew determines the initial fraction of the image that the gradient occupies, after which only rightcolor is used. The skew must be > 0 and <= 1.0 and has a default value of 1.0 (ie. not skewed).

-slant N

Make the gradient slant where a value of 1.0 slants at 45 degrees. The value must be between -100.0 and 100.0.

-curve N

Curve the gradient by passing the Y position to a function (see -func) scaled with the given value. The value must be between -100.0 and 100.0 (typically 1.0).

-func X

Function to use with -curve. The default value is sin. The value must be one of: sin cos tan sinh cosh tanh asin acos atan log log10 exp sqrt rand circle.

-rand N

Add small random purturbations to gradient to avoid striation lines. The value must be between 0.0 and 0.1.

1.2  User Interface

There is a user interface for exploring the options of gradients:

  wize / Mod/Gradient

1.3  Gradients in Styles

The easiest way to use gradient is via Gui with a Styles @gradientdef macro.

Note that @gradientdefs supports some extra options like -rotate, -tile and -gamma.

Here is a simple gui application using gradient styles.

  # "gtest.gui"
  style {
     Toplevel {
        @gradientdefs {
           mybg {LightBlue White}
           butbg! {Green Yellow -rotate 90}
        }
        *tile ^mybg
     }
     Button { -tile ^butbg! }
  }
  {Toplevel +} {
     {Button} Quit
     {Button} Save
     {Text - -pos *} {}
     {Entry - -pos _} {}
  }

Note that by convention tiled image names ending in "!" indicate a tile origin from the window, rather than the default toplevel.

When run, this looks like:

1.4  Documentation

See the gradient sub-command in the Winop manpage.

1.5  More Examples

Here are a few gradient examples:

The following script can be used to generate the above images.

#!/usr/bin/env wize
# grad2.tcl:  demonstrates gradient tiled background generation, eg:
#
#   wize grad2.tcl -g sine -s DarkBlue -e LightBlue
#   wize grad2.tcl -g rectangular -s Orange -e  LightSlateGray
#   wize grad2.tcl -h 20

array set p { -h 200 -w 200 -s DarkGreen -e White -g radial}
array set p $argv
set img [image create photo -width $p(-w) -height $p(-h)]
winop image gradient $img $p(-s) $p(-e) $p(-g)

switch -- $p(-g) {
   sine - radial {}
   default {
     set img4 [image create photo]
     winop image mirror $img $img4 tile
     set img $img4
   }
}

# Create a couple of widgets with tiled background.
option add *font [eval font create [font actual {Helvetica -12 bold}]]
pack [treeview .t -tile $img -scrolltile 1] -fill both -expand y -side left
pack [treeview .t2 -tile $img] -fill both -expand y -side left
if {![file isdirectory [set dir /proc]]} { set dir "" }
foreach i [lsort -dictionary [glob -nocomplain $dir/*]] {
  set it [file tail $i]
  set isdir [file isdirectory $i]
  if {[string is integer $it]} {
     .t insert end $it -forcetree $isdir
  } else {
     .t2 insert end $it -forcetree $isdir
  }
}
foreach tt {.t .t2} {
  $tt conf -selectbackground GoldenRod
  $tt conf -nofocusselectbackground GoldenRod
  $tt conf -selectrelief raised
}

© 2008 Peter MacDonald