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.29 date: 2023/11/15 15:51:40
user: cg
file: GradientBackground.st directory: libview
module: stx stc-classLibrary: libview

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 of colors
is drawn.

I can also draw a gradient inside a given rectangle (to fill a rectangle inside a view);
there as well, it can be specified if the gradient is to be based on:
- the full screen
  this allows for multiple smaller rectangles to be placed alongside, all using the same gradient
  and thus show the same colors in rows or columns. Independent of where the view is positioned on
  the screen. I.e. when a view containing this kind of gradient rectangles is moved, the inside color
  changes as well.

- the containing view
  similar to the above; however, rectangles inside a view keep their color, if the view is moved

- the drawn rectangle's bounds; 
  the gradient is fitted to span the whole gradient range along the rectangle's bounds

- a given fixed length; 
  the gradient is fitted to span the given range along the rectangle's bounds

See the example, which demonstrates the resizing behavior.


copyright
COPYRIGHT (c) 2009 by Claus Gittinger / eXept Software AG
             All Rights Reserved

This software is furnished under a license and may be used
only in accordance with the terms of that license and with the
inclusion of the above copyright notice.   This software may not
be provided or otherwise made available to, or used by, any
other person.  No title to or ownership of the software is
hereby transferred.

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.

Usage example(s): 

     |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
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

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.7.0.0; WebServer 1.702 at 20f6060372b9.unknown:8081; Mon, 18 Nov 2024 06:48:07 GMT