Wize /
Gradient
Search:  

Table Of Contents (show)

  1. 1. Gradients
    1. 1.1 Options
    2. 1.2 User Interface
    3. 1.3 Gradients in Styles
    4. 1.4 More Examples

1.  Gradients

Gradient images are widely used within applications and web pages to enhance appearance. Wize has built-in capabilities to generate on-the-fly, complex gradient images. This feature (provided via the Blt sub-command winop image gradient) is particularly useful when used with Gui @defgradients.

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 / Gui/Gradient

1.3  Gradients in Styles

The easiest way to use gradient is with the Gui Styles @defgradients macro.

Note that @defgradients support options like -rotate, -tile and -gamma.

Here is a simple gui application using gradient styles.

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

When run, this looks like:

Note tiled image names containing a "!" will use a tile origin from the current window, rather than the toplevel.

Documentation is available in the gradient sub-command of the Winop manpage.

1.4  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) -type $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

Page last modified on September 27, 2010, at 08:07 PM