eXept Software AG Logo

Smalltalk/X Webserver

Documentation of class 'GradientBackground':
Home

Documentation
www.exept.de
Everywhere
for:
[back]

Class: GradientBackground

Inheritance:

   Object
   |
   +--AbstractBackground
      |
      +--GradientBackground
Package:
stx:libview
Category:
Graphics-Support
Version:
rev: 1.25 date: 2018/12/23 00:07:59
user: cg
file: GradientBackground.st directory: libview
module: stx stc-classLibrary: libview
Author:
Claus Gittinger

Description:


instances of me can be installed as a viewBackground, 
and will draw a gradient background.
I can be used as background of color-sliders (HUE, Light, saturation),
or for nice looking splashscreens (which was the original motivation for that).

More than 2 colors can be specified, all given colors will be visited
with a gradient in between each.

When a view's size changes, I can be configured to either re-adjust my gradient,
so that always all colors are visited (but which leads to flicker, because with every
resize, the full background needs a redraw),
or to always use the screens size as a reference.
In the later case, onle new exposed areas need to be redrawn, but only a partial range o colors
is drawn.

See the example, which demonstrates the resizing behavior.

Class protocol:

instance creation
o  horizontal: color1 to: color2
|bg v|

bg := GradientBackground horizontal:Color red to:Color yellow.
v := View new extent:300@300.
v viewBackground:bg.
v open.

o  vertical: color1 to: color2
|bg v|

bg := GradientBackground vertical:Color red to:Color yellow.
v := View new extent:300@300.
v viewBackground:bg.
v open.

queries
o  possibleDirections

Instance protocol:

accessing
o  averageColorIn: aRectangle
return the images average color in an area.
The implementation below is slow - so you may want to
create tuned versions for DepthXImage if you plan to do
heavy image processing ...
(also, creating tuned versions of the enumeration messages helps a lot)

usage example(s): 

     self new color1:(Color red) color2:(Color white)
     (self new color1:(Color red) color2:(Color white)) averageColorIn:nil

o  color1

o  color1: aColor

o  color1: aColor1 color2: aColor2

o  color1: aColor1 color2: aColor2 color3: aColor3

o  color2

o  color2: aColor

o  color3

o  color3: aColor

o  colors: aColorVector

o  direction
possible values:
#northSouth
#eastWest

others are not yet supported

o  direction: something
possible values:
#northSouth
#eastWest

others are not yet supported

o  usedLength

o  usedLength: nilOrSymbolOrNumber
specify:
nil: use the screen height and interpolate gradient along that
#view: use the view's height and interpolate gradient along that
<integer>: interpolate from 0..n, with color2 above that.
See examples on how each looks

converting
o  asFormOn: aDevice
usedLength == #view ifTrue:[

o  onDevice: device

drawing
o  fillRectangleX: x y: y width: w height: h in: aGC
fill a rectangular area in aGC with a color gradient through colors (yes, more than 2 are possible).
This is a first (very inefficient) try;
as it is (currently) only used for some splash-screens and in
expecco's demo mode, we don't really care for much performance (yet)

queries
o  needsFullRedrawOnChangeOfHeight

o  needsFullRedrawOnChangeOfWidth

Examples:


demonstrates the various options, which control gradient the effect: 
  |bg t c1 c2 c3 v1 v2 v3 v4 v5 v6 v7 v8 l1 l2 l3 l4 l5 l6 l7 l8|

  c1 := Color yellow.
  c2 := Color red.
  c3 := Color blue.
  
  t := TopView new.
  t width:800.
  t maxExtent:800@Display height.
  t minExtent:800@50.
  
  l1 := Label origin:0@0   extent:100@30 in:t.
  l2 := Label origin:100@0 extent:100@30 in:t.
  l3 := Label origin:200@0 extent:100@30 in:t.
  l4 := Label origin:300@0 extent:100@30 in:t.
  l5 := Label origin:400@0 extent:100@30 in:t.
  l6 := Label origin:500@0 extent:100@30 in:t.
  l7 := Label origin:600@0 extent:100@30 in:t.
  l8 := Label origin:700@0 extent:100@30 in:t.

  v1 := View origin:0@30 extent:100@1.0 in:t.
  v2 := View origin:100@30 extent:100@1.0 in:t.
  v3 := View origin:200@30 extent:100@1.0 in:t.
  v4 := View origin:300@30 extent:100@1.0 in:t.
  v5 := View origin:400@30 extent:100@1.0 in:t.
  v6 := View origin:500@30 extent:100@1.0 in:t.
  v7 := View origin:600@30 extent:100@1.0 in:t.
  v8 := View origin:700@30 extent:100@1.0 in:t.
  
  l1 label:'screen'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2.
  v1 viewBackground:bg.

  l2 label:'100'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2.
  bg usedLength:100.
  v2 viewBackground:bg.

  l3 label:'300'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2.
  bg usedLength:300.
  v3 viewBackground:bg.

  l4 label:'view'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2.
  bg usedLength:#view.
  v4 viewBackground:bg.

  l5 label:'screen'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2 color3:c3.
  v5 viewBackground:bg.

  l6 label:'100'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2 color3:c3.
  bg usedLength:100.
  v6 viewBackground:bg.

  l7 label:'300'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2 color3:c3.
  bg usedLength:300.
  v7 viewBackground:bg.

  l8 label:'view'; adjust:#center.
  bg := GradientBackground new color1:c1 color2:c2 color3:c3.
  bg usedLength:#view.
  v8 viewBackground:bg.

  t open.

  |bg v|

  bg := GradientBackground new colors:{ Color red . Color green . Color blue . Color red }.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

  |bg v|

  bg := GradientBackground new colors:{ Color red . Color green . Color blue . Color red }.
  bg usedLength:#view.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

  |bg v|

  bg := GradientBackground new color1:Color red color2:Color yellow.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

  |bg v|

  bg := GradientBackground new color1:Color red color2:Color yellow.
  bg usedLength:100.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

  |bg v|

  bg := GradientBackground new color1:Color red color2:Color yellow.
  bg usedLength:#view.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

  |bg v|

  bg := GradientBackground new color1:Color red color2:Color yellow.
  bg color3:Color green.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

  |bg v|

  bg := GradientBackground new color1:Color red color2:Color yellow.
  bg color3:Color green.
  bg usedLength:100.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

  |bg v|

  bg := GradientBackground new color1:Color red color2:Color yellow.
  bg color3:Color green.
  bg usedLength:#view.
  v := View new extent:300@300.
  v viewBackground:bg.
  v open.

ST/X 7.2.0.0; WebServer 1.670 at bd0aa1f87cdd.unknown:8081; Fri, 19 Apr 2024 05:58:58 GMT