469 lines
17 KiB
HTML
469 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 invoked 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 Color' -> '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.jpg"></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 Value (same as Brightness)
|
||
|
entry fields, a color wheel, a color swatch to indicate the old or
|
||
|
current color (bottom left corner), a color swatch to reflect the selected color, an "OK" button
|
||
|
and a "Cancel" button. The old color swatch (left) indicates the current
|
||
|
contour color until the 'OK' or 'Cancel' button is selected.</p>
|
||
|
</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.</p>
|
||
|
<p>For advanced users, in A2,
|
||
|
an option to select color values numerically is also available as entry fields to the right
|
||
|
of the Hue/Saturation/Value entry fields and Color Name entry field that accepts color
|
||
|
names in hex. Also new in A2, the user now has the option of
|
||
|
selecting the general color family from the Palette row of colors along the bottom of the
|
||
|
dialog display. Lastly, the pipette icon allows the user to set the color by sampling it from
|
||
|
anywhere on the screen.</p>
|
||
|
<p>If you want to change your graphical-feature, a.k.a. 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
|
||
|
Value entry fields.
|
||
|
</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 Entry Field</td>
|
||
|
<td>Using MB1 or MB2, the Hue up/down arrows can be moved from 0 to 360
|
||
|
degrees. Alternately, the new value can be manually typed into the field followed by Return.
|
||
|
When the Hue value is modified, the circle marker on the color wheel will
|
||
|
correspond to the Hue value in.
|
||
|
Simultaneously, the new color will be indicated in the new color
|
||
|
swatch.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Saturation Entry Field</td>
|
||
|
<td>Using MB1 or MB2, the Saturation up/down arrows can be moved from 0
|
||
|
to 100 percent. Alternately, the new value can be manually typed into the field followed
|
||
|
by Return. When the Saturation value is modified, 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>Value Entry Field</td>
|
||
|
<td>Using MB1 or MB2, the Brightness up/down arrows can be moved from 0
|
||
|
to 100 percent. Alternately, the new value can be manually typed into the field followed
|
||
|
by Return. When the Brightness value is modified, 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>Red</td>
|
||
|
<td>Represents numeric value for the amount of red within the color.
|
||
|
Can be either manually
|
||
|
typed in, or selected using MB1 or MB2 to move up/down arrows. The color wheel
|
||
|
and the new swatch will be modified simultaneously. Accepts values between 0 and
|
||
|
255.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Green</td>
|
||
|
<td>Represents numeric value for the amount of green within the color.
|
||
|
Can be either manually
|
||
|
typed in, or selected using MB1 or MB2 to move up/down arrows. The color wheel
|
||
|
and the new swatch will be modified simultaneously. Accepts values between 0 and
|
||
|
255.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Blue</td>
|
||
|
<td>Represents numeric value for the amount of blue within the color.
|
||
|
Can be either manually
|
||
|
typed in, or selected using MB1 or MB2 to move up/down arrows. The color wheel
|
||
|
and the new swatch will be modified simultaneously. Accepts values between 0 and
|
||
|
255.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Color Name</td>
|
||
|
<td>Represents the hex value for the selected the color.
|
||
|
This field is typed in manually and must be a valid color value.
|
||
|
The color wheel
|
||
|
and the new swatch will be modified simultaneously.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Palette</td>
|
||
|
<td>Allows the selection of the color family, i.e. shade.
|
||
|
MB1 on the selected swatch to select the shade.
|
||
|
The color wheel
|
||
|
and the new swatch will be modified simultaneously.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Pipette Icon</td>
|
||
|
<td>Allows color sampling from the screen.
|
||
|
MB1 on the pipette icon, then anywhere on the screen to select the color.
|
||
|
The color wheel
|
||
|
and the new swatch will be modified simultaneously.</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 (current 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 invoked from the GFE when you MB3 over
|
||
|
the color bar spectrum. Select the following sequence from the
|
||
|
pop-up
|
||
|
menus: 'Change Color Table to'->'Edit Color
|
||
|
Table'. The dialog
|
||
|
can also be opened by clicking MB3 on the contour map of an element
|
||
|
and selecting Edit Colors...
|
||
|
<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"></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 old color swatch area). A color spectrum
|
||
|
appears
|
||
|
in the middle section of the dialog. The left and right
|
||
|
triangular
|
||
|
pointers are labeled with minimum and maximum numerical values
|
||
|
corresponding
|
||
|
to the weather product. The '>>' and '<<' buttons enable
|
||
|
the user
|
||
|
to move the pointers in an increment defined by the two entry
|
||
|
fields.
|
||
|
The top row of the dialog allows the user to select RGB or HSB color model.
|
||
|
The bottom half of the dialog contains several buttons that control the
|
||
|
operations performed on the spectrum: 'Interpolate', 'Undo',
|
||
|
'Revert', 'Save...', 'Delete...' and 'Office Save As' buttons.
|
||
|
The 'Fill' and 'Set' buttons appear to the right of the top and bottom
|
||
|
spectrum selection areas. Please note in AWIPS2 any changes are applied
|
||
|
automatically. The user has to exit and re-enter GFE should they accidentally
|
||
|
exit the color chooser without reverting.
|
||
|
</p>
|
||
|
<p>After a color is selected using MB1 (i.e., MB1 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->Change Color Table To...'->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. Slide the top arrow to 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 1 degree F to the right. </p>
|
||
|
<p>8. Select the '<' button. The right and left
|
||
|
pointers
|
||
|
will decrease 1 degree F to the left. </p>
|
||
|
<p>9. MB1 over the desired color on the spectrum. The
|
||
|
color
|
||
|
chosen will be reflected in the color swatch. </p>
|
||
|
<p>10. MB1 on the right pointer. The right pointer will
|
||
|
now
|
||
|
assume the color in the color swatch.</p>
|
||
|
</blockquote>
|
||
|
After completing Exercise 1, you can modify
|
||
|
the
|
||
|
selected portion of the spectrum (eq., area between 40 and 90 degrees
|
||
|
Fahrenheit)
|
||
|
with the buttons located on the top half, bottom half, and right of the dialog: 'Fill',
|
||
|
'Set', 'Interpolate',
|
||
|
'Undo', 'Revert', 'Save...', 'Delete...' or 'Office Save As...'.
|
||
|
<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>
|
||
|
<tr>
|
||
|
<td>Set</td>
|
||
|
<td>The 'Set' button, will set the selected value of the
|
||
|
spectrum.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>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 interpolation will 'linearly' interpolate along the
|
||
|
shortest
|
||
|
angle of the color wheel indicated by the colors of the pointers.
|
||
|
The RGB interpolation 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>Undo</td>
|
||
|
<td>The 'Undo' button will restore the previous spectrum.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Redo</td>
|
||
|
<td>The 'Redo' button will restore the previously undone 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>Save</td>
|
||
|
<td>'Save' saves the changes to the currently loaded color table.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Save As...</td>
|
||
|
<td>'Save As' 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 EDEX.</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Office Save As...</td>
|
||
|
<td>'Office Save As' brings up a dialog from which the user may enter a
|
||
|
name of a
|
||
|
color table specifically for the office currently loaded.</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 the HSB color model, then click 'Interpolate'. The selected area of the
|
||
|
spectrum
|
||
|
will be linearly interpolated along the HSB color scheme.</p>
|
||
|
<p>3. Select the RGB color model, then click '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 pre-interpolation state. </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 previous spectrum. </p>
|
||
|
<p>7. Select 'Set'. The selected area of the
|
||
|
spectrum will
|
||
|
be set to the color you selected. </p>
|
||
|
<p>8. Select 'Undo'. The selected area of the spectrum
|
||
|
will
|
||
|
be restored.</p>
|
||
|
<p>9. Select 'Revert'. The original spectrum that you
|
||
|
began
|
||
|
with is restored. </p>
|
||
|
<p>10. Select the RGB color model and click 'Interpolate'. The selected area of the
|
||
|
spectrum
|
||
|
will again be linearly interpolated along the RGB color scheme.</p>
|
||
|
<p>12. Select 'Save'. The new spectrum will be saved to the currently
|
||
|
loaded color map.</p>
|
||
|
<p>13. Select 'Save As...'. 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>14. Select 'OK'. The new spectrum is now saved. </p>
|
||
|
<p>15. 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>16. Click the X mark in the top right corner. The dialog will
|
||
|
exit, however all changes are applied automatically.<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="" 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 old color swatch area).
|
||
|
A color spectrum appears in the middle section of the dialog. The
|
||
|
text label contains the selected weather product name and units.
|
||
|
In AWIPS2 all of the buttons on the Color Table Editor for Scalar/Vector are
|
||
|
available on the Discrete Color Table Editor.
|
||
|
</p>
|
||
|
<p>After a color is selected using MB1 click (i.e., MB1 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 EDEX
|
||
|
contain exactly the same number of entries as the possible entries in
|
||
|
the defined Discrete key. For example, if a KeyTest element
|
||
|
contains exactly 3 colors and 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>
|