470 lines
17 KiB
HTML
470 lines
17 KiB
HTML
<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type"
|
|
content="text/html; charset=iso-8859-1">
|
|
<meta name="GENERATOR"
|
|
content="Mozilla/4.79 [en] (X11; U; Linux 2.4.9-34smp i686) [Netscape]">
|
|
<meta name="Author" content="Deb Miller">
|
|
<title>Color Chooser and Color Table Editor</title>
|
|
</head>
|
|
<body bgcolor="#ffffff">
|
|
<h1>
|
|
Color Chooser and Color Table Editor Dialogs</h1>
|
|
The <a href="#ColorChooser">color chooser</a> and <a
|
|
href="#ColorTableEditor">color
|
|
table editor</a> dialogs are used to define custom colors and color
|
|
tables
|
|
for the GFE.
|
|
<p></p>
|
|
<hr width="100%">
|
|
<h2><a name="ColorDialog"></a><a name="ColorChooser"></a>Color Chooser
|
|
Dialog</h2>
|
|
<p><br>
|
|
The Color Chooser Dialog is involked from the GFE when you depress
|
|
MB3 over the graphic contour label in the spatial editor.
|
|
When
|
|
you MB3 graphic contour label, select the following sequence from
|
|
the pop-up menus: 'Change Graphic Color to' -> 'Choose Color' .<b><font
|
|
size="+1"></font></b>
|
|
</p>
|
|
<center>
|
|
<p><a name="Figure1a.ColorChooserDialog"></a><b><font size="+1"> Color
|
|
Chooser
|
|
Dialog</font></b></p>
|
|
</center>
|
|
<center>
|
|
<h1><img src="images/ColorChooser.gif" height="273" width="384"></h1>
|
|
</center>
|
|
<p><br>
|
|
The Color Chooser Dialog can be used to change a
|
|
single-colored
|
|
graphical feature (i.e., a contour).
|
|
</p>
|
|
<p>The Color Chooser Dialog consists of Hue, Saturation and Brightness
|
|
slider bars, a color wheel, a color swatch to indicate the old or
|
|
current
|
|
color, a color swatch to reflect the selected color , an "OK" button
|
|
and
|
|
a "Cancel" button. The 'OLD' color swatch indicates the current
|
|
contour
|
|
color until the 'OK' or 'Cancel' button is selected.
|
|
</p>
|
|
<p>If you MB1 over the color wheel to the desired color , the circle
|
|
marker
|
|
is updated to the cursor location. The selected color is echoed
|
|
in
|
|
the 'NEW' color swatch and the Hue, Saturation and Brightness sliders
|
|
move
|
|
to the appropriate values corresponding to your selected color.
|
|
If
|
|
you want to change your graphical-feature, aka contour, to the new
|
|
color,
|
|
select the 'OK' button. Otherwise the 'Cancel' button dismisses
|
|
the
|
|
Color Chooser without change to your graphical contour.
|
|
</p>
|
|
<p>A new color can also be selected using the Hue, Saturation or
|
|
Brightness
|
|
sliders.
|
|
</p>
|
|
<p>The various components of the ColorChooser are shown in the
|
|
following
|
|
table:
|
|
<br>
|
|
|
|
<table nosave="" border="1" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td><b>Component</b></td>
|
|
<td><b>Description</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Hue Slider</td>
|
|
<td>Using MB1 or MB2, the Hue slider can be moved from 0 to 359
|
|
degrees.
|
|
When the Hue slider is moved, the circle marker on the color wheel will
|
|
correspond to the Hue slider in the counter-clockwise
|
|
direction.
|
|
Simultaneously, the new color will be indicated in the 'NEW' color
|
|
swatch.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Saturation Slider</td>
|
|
<td>Using MB1 or MB2, the Saturation slider can be moved from 0
|
|
to 100
|
|
percent. When the Saturation slider is moved, the circle marker
|
|
on
|
|
the color wheel will move along the radius indicating the appropriate
|
|
color
|
|
with 0 percent saturation representing white.
|
|
Simultaneously,
|
|
the new color will be indicated in the 'NEW' color swatch.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Brightness Slider</td>
|
|
<td>Using MB1 or MB2, the Brightness slider can be moved from 0
|
|
to 100
|
|
percent. When the Brightness slider is moved, the color wheel and
|
|
the 'NEW" color swatch reflects the brightness selection with 0 percent
|
|
brightness representing black. Please note that there may be a
|
|
short
|
|
delay in updating the color wheel.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ColorWheel</td>
|
|
<td>Contains a small circle showing the current value specified
|
|
by the
|
|
sliders. The color wheel will dim and brighten as the Brightness
|
|
slider is changed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>OLD Swatch</td>
|
|
<td>The previous color (currrent color when the dialog is first
|
|
presented)
|
|
is shown.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>NEW Swatch</td>
|
|
<td>The new chosen color is shown.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
|
|
</p>
|
|
<p></p>
|
|
<hr width="100%">
|
|
<h2><a name="ColorTableEditorDialog"></a><a name="ColorTableEditor"></a>ColorTableEditorDialog</h2>
|
|
The ColorTableEditor Dialog is involked from the GFE when you MB3 over
|
|
the 'E' toolbar button, color bar spectrum or an image label. If you
|
|
MB3
|
|
over the 'E' toolbar button, select the following sequence from the
|
|
pop-up
|
|
menus: 'PickUp Value...'->MB3 on the vertical spectrum-> 'Edit
|
|
Color Table...'.
|
|
If you MB3 over the color bar spectrum or an image label, select the
|
|
following
|
|
sequence from the pop-up menus: 'Change Color Table to'->'Edit Color
|
|
Table'.
|
|
<p>The ColorTableEditor is used for Scalar and Vector data types.
|
|
There is no editor currently available for the Weather data type; the
|
|
Weather
|
|
data type is configured through the <a href="gfeConfig_WECol.html">gfe
|
|
configuration file weather color table definitions</a>. The
|
|
ColorTableEditor
|
|
for Discrete data types use the same data source as Scalar/Vector, but
|
|
its operations are different. Generally it is a good idea to
|
|
separate
|
|
out color tables for Scalar and Vector, from color tables for Discrete.
|
|
<br>
|
|
|
|
</p>
|
|
<h3>Scalar/Vector Color Table Editing</h3>
|
|
|
|
<p><br>
|
|
</p>
|
|
<center>
|
|
<p><a name="Figure2a.ColorTableEditorDialog"></a><b><font size="+1">ColorTableEditor
|
|
Dialog (Scalar/Vector)</font></b></p>
|
|
</center>
|
|
<center>
|
|
<h1><img src="images/ColorTableEditor.jpg" height="425" width="533"></h1>
|
|
</center>
|
|
The Color Table Editor Dialog can be used to create a new color
|
|
spectrum
|
|
for a multi-colored graphical feature (i.e., an image).
|
|
<p>The Color Table Editor contains a <a href="#ColorChooser">Color
|
|
Chooser</a>
|
|
(without the color swatch area labeled 'OLD'). A color spectrum
|
|
appears
|
|
in the middle section of the dialog. The text label contains the
|
|
selected weather product name and units. The left and right
|
|
triangular
|
|
pointers are labeled with minimum and maximum numerical values
|
|
corresponding
|
|
to the weather product. Entry labels are located on either side
|
|
of
|
|
the spectrum. The current left and right pointer values are
|
|
echoed
|
|
in the entry fields. The '>>' and '<<' buttons enable
|
|
the user
|
|
to move the pointers in an increment defined by the two entry
|
|
fields.
|
|
The bottom half of the dialog contains several buttons that control the
|
|
operations performed on the spectrum: 'Fill', 'RGB Interpolate',
|
|
'HSB Interpolate', 'Fade ->', 'Dim ->', '<- Fade', '<-Dim',
|
|
'Undo',
|
|
'Revert', 'Apply', 'Save...', 'Delete...' and 'Dismiss' buttons.
|
|
</p>
|
|
<p>After a color is selected using MB2 (i.e., MB2 somewhere within the
|
|
spectrum) or the <a href="#ColorChooser">Color Chooser</a>
|
|
,
|
|
it is reflected in the rectangular color swatch. To modify
|
|
the spectrum with the selected color, MB1 over either the left or
|
|
right pointer. The triangular area will assume the color of the
|
|
color
|
|
swatch. With the MB1, the left or right pointer can be moved to
|
|
the
|
|
desired weather product value.
|
|
</p>
|
|
<blockquote><a name="Exercise1"></a><b><i><font size="+1">Exercise 1</font></i></b>
|
|
<p>1. Make Temperature an image on the GFE. </p>
|
|
<p>2. From the color bar, MB3->'Edit Color Table...' </p>
|
|
<p>3. Select a color using the <a href="#ColorChooser">Color
|
|
Chooser</a>
|
|
portion of the Color Table Editor. </p>
|
|
<p>4. MB1 over the left pointer and move the pointer to
|
|
50
|
|
degrees Fahrenheit. The left triangular pointer will assume the
|
|
color
|
|
of the selected color and the color swatch will assume the new color. </p>
|
|
<p>5. Type 40 in the left entry field and 'Enter'. The
|
|
left
|
|
triangular pointer will move to the 40 degree F location of the
|
|
spectrum. </p>
|
|
<p>6. MB1 over the right pointer and move the pointer to
|
|
50
|
|
degrees Fahrenheit. The right pointer will now assume the color
|
|
of
|
|
the color swatch. </p>
|
|
<p>7. Select the '>>' button. The left and right
|
|
pointers will
|
|
advance 10 degrees F to the right. </p>
|
|
<p>8. Select the '<<' button. The right and left
|
|
pointers
|
|
will decrease 10 degrees F to the left. </p>
|
|
<p>9. Type 90 in the right entry field and 'Enter'. The
|
|
right
|
|
triangular pointer will move to the 90 degree F location of the
|
|
spectrum. </p>
|
|
<p>10. MB2 over the desired color on the spectrum. The
|
|
color
|
|
chosen will be reflected in the color swatch. </p>
|
|
<p>11. MB1 on the right pointer. The right pointer will
|
|
now
|
|
assume the color in the color swatch.</p>
|
|
</blockquote>
|
|
After completing Exercise 1<i>, </i> you can modify
|
|
the
|
|
selected portion of the spectrum (eq., area between 40 and 90 degrees
|
|
Fahrenheit)
|
|
with the buttons located on the bottom half of the dialog: 'Fill', 'RGB
|
|
Interpolate', 'HSB Interpolate', 'Fade ->', 'Dim ->', '<-
|
|
Fade', '<-Dim',
|
|
'Undo', 'Revert', 'Apply', 'Save...', 'Delete...' or 'Dismiss'.
|
|
<p>The various controls are described in the following table:
|
|
<br>
|
|
|
|
<table nosave="" border="1" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td><b>Control</b></td>
|
|
<td><b>Description</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fill</td>
|
|
<td>The 'Fill' button, will fill the selected portion of the
|
|
spectrum.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>RGB Interpolate and HSB Interpolate</td>
|
|
<td>You can linearly interpolate the area selected between the
|
|
pointers
|
|
with one of two linear interpolation methods: Red-Green-Blue
|
|
interpolation
|
|
(i.e., 'RGB Interpolation' button) or Hue-Saturation-Brightness
|
|
interpolation
|
|
(i.e., 'HSB Interpolation' button).
|
|
<p>The 'HSB Interpolate' will 'linearly' interpolate along the
|
|
shortest
|
|
angle of the colorwheel indicated by the colors of the pointers.
|
|
The 'RGB Interpolate' will linearly interpolate along the 0-255
|
|
color
|
|
intensity scale of red, green and blue between the colors of the
|
|
pointers.</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fade-> and <-Fade</td>
|
|
<td>The 'Fade ->' button will linearly interpolate from the
|
|
left pointer
|
|
color to white. The '<- Fade' button will linearly interpolate
|
|
from the right pointer button to white.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dim-> and <-Dim</td>
|
|
<td>The 'Dim ->' button will linearly interpolate from the
|
|
left pointer
|
|
color to black. The '<- Dim' button will linearly interpolate
|
|
from the right pointer button to black.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Undo</td>
|
|
<td>The 'Undo' button will restore the previous spectrum.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Revert</td>
|
|
<td>The 'Revert' button will restore the original spectrum with
|
|
which the
|
|
Color Table Editor Dialog started.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Apply</td>
|
|
<td>When you 'Apply' the spectrum to a weather element the first
|
|
time,
|
|
a temporary color table is created with the name of Transient <i>X, </i>where
|
|
<i>X</i>
|
|
is a number. This temporary color table will exist for the
|
|
lifetime
|
|
of the GFE. You can edit the same color table later if you
|
|
wish.
|
|
When you'Apply' the spectrum to the weather element during subsequent
|
|
sessions,
|
|
the same Transient color table is used.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Save...</td>
|
|
<td>'Save' brings up a dialog from which the user may enter a
|
|
name of a
|
|
color table. The color table is stored under this name and the
|
|
Transient
|
|
color table in use is removed. 'Save' has an implicit
|
|
'Apply'.
|
|
You cannot save a Transient color table to the ifpServer.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Delete...</td>
|
|
<td>You can 'Delete' an existing color table and it doesn't need
|
|
to be
|
|
the one that is displayed. A dialog will be displayed showing a
|
|
list
|
|
of names. Highlight or type in an identifier and enter
|
|
'Okay'.
|
|
You can delete Transient color tables that exist in you GFE and other
|
|
color
|
|
tables that are stored on the server. <font color="#ff0000">CAUTION:
|
|
If you delete a spectrum that is being used by another user, their
|
|
spectrum
|
|
will revert to the default spectrum. Please consider carefully
|
|
before
|
|
using the 'Delete' button.</font></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</p>
|
|
<blockquote><b><i><font size="+1">Exercise 2</font></i></b>
|
|
<p>1. Do <i><a href="#Exercise1">Exercise 1</a>.</i> </p>
|
|
<p>2. Select 'HSB Interpolate'. The selected area of the
|
|
spectrum
|
|
will be linearly interpolated along the HSB color scheme. </p>
|
|
<p>3. Select 'RGB Interpolate'. The selected area of the
|
|
spectrum
|
|
will be linearly interpolated along the RGB color scheme. </p>
|
|
<p>4. Select 'Undo'. The selected area of the spectrum
|
|
will
|
|
be restored to the HSB interpolation. </p>
|
|
<p>5. Select 'Fill'. The selected area of the spectrum
|
|
will
|
|
be filled with the color in the color swatch. </p>
|
|
<p>6. Select 'Undo'. The selected area of the spectrum
|
|
will
|
|
be restored to RGB interpolation. </p>
|
|
<p>7. Select 'Fade ->'. The selected area of the
|
|
spectrum will
|
|
fade from the left pointer color to white (right pointer). </p>
|
|
<p>8. Select 'Undo'. The selected area of the spectrum
|
|
will
|
|
be restored to RGB interpolation. </p>
|
|
<p>9. Select '<-Fade'. The selected area of the
|
|
spectrum
|
|
will fade from the right pointer to white (left pointer). </p>
|
|
<p>10. Repeat steps 6 - 9 for 'Dim ->' and '<- Dim' and
|
|
notice
|
|
the respective area dimming to black at both pointer locations. </p>
|
|
<p>11. Select 'Revert'. The original spectrum that you
|
|
began
|
|
with is restored. </p>
|
|
<p>12. Select 'RGB Interpolate'. The selected area of the
|
|
spectrum
|
|
will again be linearly interpolated along the RGB color scheme. </p>
|
|
<p>13. Select 'Apply'. The new spectrum will be applied
|
|
to
|
|
the graphic and the color bar will reflect the new spectrum. </p>
|
|
<p>14. Select 'Save...'. The 'Save Color
|
|
Table'
|
|
dialog is brought up and you are prompted for a name (i.e., identifier)
|
|
for the spectrum that you've just created. </p>
|
|
<p>15 Select 'OK'. The new spectrum is now saved. </p>
|
|
<p>16. Select 'Delete'. The 'Delete Color Table'
|
|
dialog
|
|
allows you to highlight the spectrum to be deleted or type in the
|
|
identifier. <font color="#ff0000">CAUTION:
|
|
If you delete a spectrum that is being used by another user, their
|
|
spectrum
|
|
will revert to the default spectrum. Please consider carefully
|
|
before
|
|
using the 'Delete' button..</font> </p>
|
|
<p>17. Select 'Dismiss'. The 'Dismiss' button cancels the
|
|
Color
|
|
Table Editor dialog. <br>
|
|
<br>
|
|
</p>
|
|
</blockquote>
|
|
<h3>
|
|
Discrete Color Table Editing</h3>
|
|
|
|
<p><br>
|
|
</p>
|
|
<center>
|
|
<p><a name="Figure2aColorTableEditorDialogDiscrete"></a><b><font
|
|
size="+1">ColorTableEditor
|
|
Dialog (Discrete)</font></b></p>
|
|
</center>
|
|
<center>
|
|
<h1><img src="images/DialogColorTableDiscrete.jpg" nosave=""
|
|
style="height: 402px; width: 414px;" title=""
|
|
alt="DialogDiscreteColorTable"></h1>
|
|
</center>
|
|
The Discrete Color Table Editor Dialog can be used to create a new
|
|
color
|
|
spectrum for a multi-colored graphical feature (i.e., an image).
|
|
<p>The Discrete ColorTable Editor contains a <a href="#ColorChooser">Color
|
|
Chooser</a> (without the color swatch area labeled 'OLD').
|
|
A color spectrum appears in the middle section of the dialog. The
|
|
text label contains the selected weather product name and units.
|
|
Many of the buttons on the Color Table Editor for Scalar/Vector are not
|
|
available on the Discrete Color Table Editor. The controls that are
|
|
available
|
|
include: 'Undo', 'Revert', 'Apply', 'Save...', 'Delete...' and
|
|
'Dismiss'
|
|
buttons.
|
|
</p>
|
|
<p>After a color is selected using MB2 click (i.e., MB2 somewhere
|
|
within
|
|
the spectrum) or the <a href="#ColorChooser">Color Chooser</a>
|
|
,
|
|
it is reflected in the rectangular color swatch. To modify
|
|
the spectrum with the selected color, MB1 click over the desired
|
|
discrete key. When you move the mouse over a "block" in the spectrum,
|
|
the value of that "block", i.e., the discrete key, will be
|
|
displayed. <br>
|
|
</p>
|
|
<p>Note that Discrete color tables and Scalar color tables should not
|
|
be shared. Discrete color tables that are saved to the ifpServer
|
|
contain exactly the same number of entries as the possible entries in
|
|
the defined Discrete key. For example, the KeyTest element in the
|
|
picture above contains exactly 3 colors. If you reuse that color
|
|
spectrum for a scalar/vector weather element, then there will only be
|
|
three colors in that color table.<br>
|
|
</p>
|
|
<p>If a discrete color table has
|
|
been saved to disk, then the definition for the discrete weather
|
|
element is expanded, then the new entries will be assigned to "black"
|
|
until the color table editor is used to define these colors. The
|
|
original colors for the original set of discrete keys will remain
|
|
assigned. <br>
|
|
|
|
</p>
|
|
</body>
|
|
</html>
|