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:

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
}

PDQI
	Wize / Gradient	Search Print Login