Use the Gradient() function to apply a smooth gradient to a string

The Gradient( text, colors ) custom function paints the specified text with colors, applying a smooth gradient if more than one color is specified.

It may be not be terrible useful but looks nice and is fun to study as an example of a recursive function.

Technorati tags: FileMaker, FileMaker 7, FileMaker 8, custom function, gradient.

The syntax is:

Gradient( text, colors )

where colors is a list of numbers that represent colors in FileMaker (if you're not sure what they are, read about the RGB() function in FileMaker Pro Help) separated by carriage returns. The function body is:

/* Cradient( text, colors ).   Paints <text> in specified <colors>, applying   a smooth gradient if more than one color is specified.   Mikhail Edoshin, m.edoshin@onegasoft.com */ Let( number of colors = ValueCount( colors );   Case(     number of colors = 0;       text;     number of colors = 1;       TextColor ( text; colors );     number of colors = 2;       Let( current color = GetAsNumber( LeftValues( colors; 1 ) );         TextColor( Left( text; 1 ); current color )         & Case( Length( text ) > 1;           Let( [             end color = GetAsNumber( RightValues( colors; 1 ) );             ratio = 1 / ( Length( text ) - 1 );             R1 = Mod( Div(  current color; 256^2 ); 256 );             G1 = Mod( Div( current color; 256 ); 256 );             B1 = Mod( current color; 256 );             R2 = Mod( Div(  end color; 256^2 ); 256 );             G2 = Mod( Div( end color; 256 ); 256 );             B2 = Mod( end color; 256 );             R = Round( R1 + ( R2 - R1 ) * ratio; 0);             G = Round( G1 + ( G2 - G1 ) * ratio; 0);             B = Round( B1 + ( B2 - B1 ) * ratio; 0);             next color = RGB( R; G; B ) ];             Gradient(  Right( text; Length( text ) - 1 );               next color & "¶" & end color ) ) ) );   number of colors > 2;     Let( chunk = Length( text ) / ( number of colors - 1 );       Left( Gradient( Left( text; Ceiling( chunk ) ); LeftValues( colors; 2 ) );         Floor( chunk ) )       & Gradient( Right( text; Length( text ) - Floor( chunk ) );         RightValues( colors; number of colors - 1 ) ) ) ) )

Test unit test

What is a test unit?

Let( [   R = RGB( 255, 0, 0 );   G = RGB( 0, 255, 0 );   B = RGB( 0, 0, 255 );   RG = RGB( 128, 128, 0 );   GB = RGB( 0, 128, 128 );   BR = RGB( 128, 0, 128 );   R char = TextColor( "x", R ),   G char = TextColor( "x", G ),   B char = TextColor( "x", B ),   RG char = TextColor( "x", RG ),   GB char = TextColor( "x", GB ),   BR char = TextColor( "x", BR ) ];   Assert Equals(     GetAsCSS( Gradient( NULL, R ) ),     GetAsCSS( NULL ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxx", NULL ) ),     GetAsCSS( "xxx" ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxx", R ) ),     GetAsCSS( TextColor( "xxx", R ) ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxx", G ) ),     GetAsCSS( TextColor( "xxx", G ) ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxx", B ) ),     GetAsCSS( TextColor( "xxx", B ) ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxx", R & "¶" & G ) ),     GetAsCSS( R char & RG char & G char ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxx", G & "¶" & B ) ),     GetAsCSS( G char & GB char & B char ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxx", B & "¶" & R ) ),     GetAsCSS( B char & BR char & R char ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxxxx", R & "¶" & G & "¶" & B ) ),     GetAsCSS( R char & RG char & G char & GB char & B char ) ) &   Assert Equals(     GetAsCSS( Gradient( "xxxxxx", R & "¶" & G & "¶" & B ) ),     GetAsCSS( R char & RG char & G char       & G char & GB char & B char ) ) )

By the way, I actually had written the function some time ago, when I wasn't using tests as I do now. It appeared as working, i.e. it applied gradients to strings just “fine”. Guess what? Having written a test for this post, I found 2 errors in this “working” function!

Showcase

Let( [ bar = TextFont( "███████████████" & "███████████████" & "███████████████"; "Arial" ); A = RGB( 123, 82, 193 ); B = RGB( 140, 141, 237 ); C = RGB( 151, 223, 102 ); D = RGB( 241, 202, 128 ) ]; Gradient( bar, A & "¶" & B & "¶" & C & "¶" & D ) & "¶" )

The █ character in the formula above is the Unicode symbol “Full block”; see “Tips” below about how to enter it. The result should look like this:

Tips

• The best-looking things are gradient stripes. Since version 7 FileMaker is Unicode in heart, so you can use special “block” letters that can make good stripes. To enter this character under Mac OS X you can use the character palette available under the “Input” menu.

  

  If you don't have input menu, you can turn it on in “System Preferences > International > Input Menu”.

  The section you need is “Block Elements”; it has a number of various blocks. Unfortunately, only few fonts such as Arial or Times New Roman have these characters.

  

• If you're going to use a gradient to represent some value, be careful with colors. Remember, that difference in hue is not enough: “big” side should also differ from “small” in saturation and brightness. Some gradients (for example, temperature scale) may be equally saturated, but they are exceptions.

Comments

[Nick Stockbridge]

Hi Mikhail

Excuse me - I saw a reference to you on a FileMaker Forum while I was searching for a tutorial about the Send Event command in FileMaker. I have had a quick look at the blog here but couldn't see such a thing - can I ask whether you have ever written anything about this subject?

Regards

Nick

[Thomas Seidler]

i guess this is how folk do nice graphs too…

the unicode block and automated colouring of text elements has made me plot on automating colour schemes… Since it handles transparent PNGs well now, you could have nice 3d shaded boxes, with automated variable colour backgrounds. Mmmm... not sure how useful… and a bit of a nasty design fudge.

Blessings, t