Table of Contents
This chapter gives a brief introduction to the use of colors in OpenLaszlo applications. It explains the various syntaxes that are used to specify color, and gives general guidelines for using color effectively.
OpenLaszlo uses the standard web color definitions, three hexadecimal values in a row, representing red, green, and blue components of a color (all colors can be created by mixing these three primary colors). Computer monitors are comprised of thousands of red, green, and blue dots grouped so closely by threes that our eyes see them as one blended color.
Each red, blue, or green dot can have a value from 0 to 255. If the red dot is fully "on" at 255, while blue and green are fully "off" at 0, we see red. The RBG color code for red is 255,0,0. Blue is 0,255,0; green is 0,0,255. (Some graphics systems combine an RGB triplet with an 8-bit alpha value, and get a 32-bit color word; in those systems, we think of colors as RGBA.)
Example 20.1. RGB color values
<canvas height="125">
<simplelayout axis="x" spacing="10"/>
<class name="gView">
<view height="100" width="100"/>
</class>
<gView id="red" bgcolor="rgb(255,0,0)"/>
<gView id="blue" bgcolor="rgb(0,255,0)"/>
<gView id="green" bgcolor="rgb(0,0,255)"/>
</canvas>
Some web applications require that RGB be expresssed in hexadecimal (base 16 instead of base 10) values. OpenLaszlo much prefers hex values; for one thing, using hexadecimal values enables the use of stylesheets (see Cascading Style Sheets):
Example 20.2. Using Hex for Colors with Sytlesheet
<canvas height="125">
<stylesheet>
#red {
bgcolor: "0xFF0000";
}
#blue {
bgcolor: "0x00FF00";
}
#green {
bgcolor: "0x0000FF";
}
</stylesheet>
<simplelayout axis="x" spacing="10"/>
<class name="gView">
<view height="100" width="100" bgcolor="$style{'bgcolor'}"/>
</class>
<gView id="red" />
<gView id="blue" />
<gView id="green"/>
</canvas>
OpenLaszlo enables coloring in four ways: 0x000000, #000000, rgb(0,0,0), and "black". For now, the best reason to prefer to use the hex style 0x000000 is that it always works, whether the color is assigned explicitly within the view, or by stylesheet. Color assignment by stylesheet fails by name, #hex, or rgb(). Explicit color assignment by rgb() fails unless the RGB values are all numerals -- that is, rgb(0,0,0) produces black, but rgb(FF,FF,FF), which should produce white, comes back at compile time as an invalid color.
Coloring of text with fgcolor="foo" is enabled in the same fashions, but with the same limitations.
Example 20.3. coloring text using CSS
<canvas width="860" debug="true">
<stylesheet>
#vName {
bgcolorName : "blue";
}
#tName {
fgcolorName : "blue";
}
#vRGB {
bgcolorRGB : "#0000FF";
}
#tRGB {
fgcolorRGB : "#0000FF";
}
#vHex {
bgcolorHex : "0x0000FF";
}
#tHex {
fgcolorHex : "0x0000FF";
}
#vParens {
bgcolorParens : "rgb(0,0,255)";
}
#tParens {
fgcolorParens : "rgb(0,0,255)";
}
</stylesheet>
<wrappinglayout axis="x" spacing="10"/>
<view id="vName" height="100" width="100" bgcolor="$style{'bgcolorName'}"/>
<text id="tName" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorName'}">Blue1</text>
<view id="vRGB" height="100" width="100" bgcolor="$style{'bgcolorRGB'}"/>
<text id="tRGB" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorRGB'}">Blue2</text>
<view id="vHex" height="100" width="100" bgcolor="$style{'bgcolorHex'}"/>
<text id="tHex" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorHex'}">Blue3</text>
<view id="vParens" height="100" width="100" bgcolor="$style{'bgcolorParens'}"/>
<text id="tParens" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorParens'}">Blue4</text>
<view id="explicitVName" height="100" width="100" bgcolor="blue"/>
<text id="explicitTName" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="blue">Blue5</text>
<view id="explicitVRGB" height="100" width="100" bgcolor="#0000FF"/>
<text id="explicitTRGB" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="#0000FF">Blue6</text>
<view id="explicitVHex" height="100" width="100" bgcolor="0x0000FF"/>
<text id="explicitTHex" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="0x0000FF">Blue7</text>
<view id="explicitVParens" height="100" width="100" bgcolor="rgb(0,0,255)"/>
<text id="explicitTParens" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="rgb(0,0,255)">Blue8</text>
<script>
Debug.write("1=styled by blue");
Debug.write("2=styled by #0000FF");
Debug.write("3=styled by 0x0000FF");
Debug.write("4=styled by rgb(0,0,255)");
Debug.write("5=explicitly named blue");
Debug.write("6=explicitly colored #0000FF");
Debug.write("7=explicitly colored 0x0000FF");
Debug.write("8=explicitly colored rgb(0,0,255)");
</script>
</canvas>
To blend a color, combine the RGB values. Red (FF0000) plus blue (0000FF) equals fuchsia (FF00FF):
Example 20.4. Blending Colors
<canvas height="850">
<window name="raptor" x="25" y="50" height="200" width="200" resizable="true" title="Resize this window">
<view name="red" height="${raptor.height*.5}" width="${raptor.height*.5}" bgcolor="0xFF0000"/>
<view name="blue" height="${raptor.red.height}" width="${raptor.red.width}" bgcolor="0x0000FF" x="${raptor.red.width-(raptor.red.width*.5)}" y="${raptor.red.height-(raptor.red.height*.5)}"/>
<view name="fuchsia" height="${raptor.red.height*.5}" width="${raptor.red.width*.5}" bgcolor="0xFF00FF" x="${raptor.red.width-(raptor.red.width*.5)}" y="${raptor.red.height-(raptor.red.height*.5)}" />
</window>
</canvas>
The 16 basic web colors can be employed by name:
Example 20.5. Named Colors
<canvas height="250" width="250">
<wrappinglayout axis="y" spacing="10"/>
<class name="swatch" width="50" height="50" />
<swatch bgcolor="black">
<text fgcolor="white" text="Black"/>
</swatch>
<swatch bgcolor="silver">
<text text="Silver"/>
</swatch>
<swatch bgcolor="gray">
<text text="Gray"/>
</swatch>
<swatch bgcolor="white">
<view name="inner" width="50" height="50" bgcolor="black">
<view name="furtherinner" width="46" height="46" bgcolor="white" x="2" y="2"/>
</view>
<text text="White"/>
</swatch>
<swatch bgcolor="maroon">
<text fgcolor="white" text="Maroon"/>
</swatch>
<swatch bgcolor="red">
<text text="Red"/>
</swatch>
<swatch bgcolor="purple">
<text fgcolor="white" text="Purple"/>
</swatch>
<swatch bgcolor="fuchsia">
<text text="Fuchsia"/>
</swatch>
<swatch bgcolor="green">
<text text="Green"/>
</swatch>
<swatch bgcolor="lime">
<text text="Lime"/>
</swatch>
<swatch bgcolor="olive">
<text text="Olive"/>
</swatch>
<swatch bgcolor="yellow">
<text text="Yellow"/>
</swatch>
<swatch bgcolor="navy">
<text fgcolor="white" text="Navy"/>
</swatch>
<swatch bgcolor="blue">
<text fgcolor="white" text="Blue"/>
</swatch>
<swatch bgcolor="teal">
<text fgcolor="white" text="Teal"/>
</swatch>
<swatch bgcolor="aqua">
<text text="Aqua"/>
</swatch>
</canvas>
To specify any color but the 16 which are usable by name, use 0xFFFFFF hex codes. Alternatively, the non-standard colors named
in lps/components/base/colors.lzx were added to OpenLaszlo's global namespace. Those colors can also be employed by name, but note the ${constraint} syntax
around the bgcolor specification. There are two ways to make the constraint: bgcolor="${global['iceblue1']}" is the same as bgcolor="${iceblue1}".
Example 20.6. Non-standard colors
<canvas debug="true">
<simplelayout axis="x" spacing="10"/>
<class name="box1" width="100" height="100" bgcolor="${global['gold4']}" />
<class name="box2" width="100" height="100" bgcolor="${iceblue1}" />
<box1 id="sun">
<text text="Sun"/>
</box1>
<box2 id="mystic">
<text fgcolor="0xFFFFFF" text="Mystic"/>
</box2>
</canvas>
In OpenLaszlo, a view has a color and an opacity which are handled separately. The opacity attribute ranges from 0 (transparent) to 1 (opaque).
Example 20.7. Color and Opacity
<canvas height="300" width="300" debug="true">
<simplelayout axis="x"/>
<class name="fader">
<view height="100" width="100">
<handler name="onclick">
immediateparent.animate('opacity', -.20, 25, true);
</handler>
<handler name="onmouseout" >
immediateparent.animate('opacity', 1, 2500, false);
</handler>
</view>
</class>
<fader name="houston" bgcolor="0xFF0000">
<text text="Comet"/>
</fader>
<fader name="sacramento" bgcolor="0x800080">
<text fgcolor="0xFFFFFF" text="Monarch"/>
</fader>
<fader name="seattle" bgcolor="0x008000">
<text text="Storm"/>
</fader>
<script>
Debug.write("Click on a view to reduce its opacity. Mouse out to restore 100% opacity.");
</script>
</canvas>
When a view's opacity=0, the 'visible' attribute of that view turns to false.
The print world paid careful attention to color matching: the color the client saw on the comprehensives in the conference room turned out the same as the color the customer saw on the cereal boxes. That involved synchronizing colors between a computer monitor and a laser printer (used to print the comprehensives), then the physical film separation into cyan, magenta, yellow, and black for the printer, and finally the finished product.
Web publishers had to let go of all that. Color specifications look different on different platforms and workstations —Macintosh or Windows, normal backlit LCD screens or aging CRTs, projectors in a conference room or high fidelity cinema displays. Web designers pretend that "0x6C6BA2" is always the same color, and hope it looks right other places.
The best you can do is look at your application on several different kinds of monitors and operating systems, and tweak the application until it looks decent on each platform.
W3C aims to mitigate this problem with support for the color model SRBG: Standard Default Color Space for the Internet.
For more about this topic, look up "color gamut", "color space", "color matching", "display gamma", and the ActionScript function setColorTransform.