Class: GradientBackground

• Inheritance
• Description
• Class protocol
  • instance creation
  • queries
• Instance protocol
  • accessing
  • converting
  • drawing
  • queries
• Examples

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:

 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.

 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.

 possibleDirections

Instance protocol:

 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

 color1

 color1: aColor

 color1: aColor1 color2: aColor2

 color1: aColor1 color2: aColor2 color3: aColor3

 color2

 color2: aColor

 color3

 color3: aColor

 colors: aColorVector

 direction

possible values:
#northSouth
#eastWest

others are not yet supported

 direction: something

possible values:
#northSouth
#eastWest

others are not yet supported

 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

 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

 asFormOn: aDevice

usedLength == #view ifTrue:[

 onDevice: device

 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)

 needsFullRedrawOnChangeOfHeight

 needsFullRedrawOnChangeOfWidth

Examples:

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