Color Sampler, Magnifier and Desktop Sampler Toolbar
By Sandip Chitale (
)
Senior Staff Engineer, Sun Java Studio Creator, Sun Microsystems,
Inc. August 26, 2005
Summary
This article shows how to add custom tools as toolbar to the NetBeans Platform.
We will use
java.awt.Robot
APIs to implement two example tools, the Color Sampler and the Magnifier.
The Color Sampler lets you sample the color of any pixel on the desktop;
whereas the Magnifier lets you magnify an area of the desktop and
view it at various levels of magnification.
You will learn how to combine the Color Sampler and the Magnifier tools to build a
customcolor
chooser panel using the
JColorChooser API.
Based on this, we will create a custom toolbar
making the handy Color Chooser functionality available from the
NetBeans Platform.
The toolbar can be used in NetBeans IDE, Sun Java Studio Enterprise,
Sun Java Studio Creator, and any J2EE standards-based tool.
The getPixel() API returns the color of a pixel at the given screen coordinates.
Use this API to build a Color Sampler
that can pick up the color from any pixel on the desktop.
Color sampling tools are found on the tool palettes of
most modern painting programs such as Adobe Photoshop(TM).
This tool comes in very handy everytime you need to
specify a color by providing the Hex, RGB or HSB color value.
The createScreenCapture() API creates an image containing pixels read from the screen.
Use this API to build a Magnifier that selects any area
of the desktop and views it at various magnification levels.
Such a Magnifier tool can for instance increase readability and therefor
accessibility for vision impaired users.
Applications of a Color Chooser
We will use the Magnifier in conjunction with the Color Sampler
to create a new tool for very precise color sampling: This
customcolor
chooser panel for javax.swing.JColorChooser
will be added to the NetBeans Platform.
The NetBeans IDE is a
powerful open-source IDE. It provides a visual form editor
for building Java Desktop GUIs using Java AWT/Swing components.
The IDE also supports creating Web GUIs using HTML/CSS/JSP and Java Beans.
All of these development activities involve defining color settings
and require you to provide a precise Hex, RGB or HSB color value.
In these various contexts, color values have to be formatted in different ways:
In HTML files, you define color as hex RGB values in the #hhhhhh format;
in CSS files, you use either hex #hhhhhh or rgb(r,g,b);
in JSP files, colors are specified in the #hhhhhh format;
in Property sheets, you specify the color typed property values as [r,g,b];
whereas Java initialization strings in the JavaBeans property editor
require new Color(r,g,b).
The Color Sampler can help you quickly enter the appropiate color format
because the value of the color sampled can be output in different ways.
The NetBeans IDE
benefits greatly from the functionality of the Color Sampler
and the Magnifier tool in this domain.
Steps
To add the Color Chooser functionality to the
NetBeans IDE,
we will create a toolbar. The toolbar will also work in other IDEs such as
Sun
Java Studio Enterprise and
Sun
Java Studio Creator,
which are based on NetBeans.
In fact, the toolbar is not dependent on any
of the IDE features and thus can be used in any application based on the
NetBeans
Platform!
The tool also registers a mouse listener and a mouse motion listener on the label.
In the mousePressed, mouseDragged and mouseReleased callbacks,
it samples the color of the pixel under the mouse cursor
using the getPixelColor() API.
Then it sets the background color of the Color Preview label
to the sampled color, and sets the content of the Color Value text field
to the sampled color value in the selected format.
The Color Value text field also supports
dragging&dropping of the color value string.
You select the color format to be used with the Color Format dialog.
you invoke the Color Format dialog by clicking on the button with the pencil icon
[].
The following formats are supported:
#XXXXXX - for HTML/CSS
rgb(r,g,b) - For CSS
new Color(r,g,,b) - for JavaBeans - Java initialization string
The Magnifier tool makes use of public BufferedImage createScreenCapture(Rectangle screenRect)
API from java.awt.Robot.
The tool creates a Magnifier label with a size of 256x256 pixels.
It also creates a slider with a range of integer values from 1 to 16.
The slider is initialliy set to 16, as you can see in the following screenshot.
The Magnifier tool registers a mouse listener and mouse motion listener on the
Magnifier label.
In the mousePressed,
mouseDragged and mouseReleased callbacks,
the square area at the mouse coordinates on the desktop is sampled
using the createScreenCapture() API.
The user can magnify any area of the desktop by dragging the mouse on the
Magnifier label.
The size of the sampled area depends on the current setting of the slider.
If the slider is set to 16, the tool samples a 16x16 square pixel area
and scales the sampled image to 256x256 square pixels
corresponding to a 1:16 magnification.
If the slider is set to 8, the tool samples a 128x128 square pixel area
and scales the sampled image to 256x256 square pixels
corresponding to a 1:2 magnification.
The following screenshot shows the Desktop Sampler toolbar in action in the
NetBeans 4.1 IDE.
Click to view it in full size.
The Desktop Sampler Toolbar Module
The DesktopSampler
is a NBM module for a NetBeans Platform-based
application. By installing the module, you add the Desktop Sampler toolbar to the application.
To install the module, download the
DesktopSampler NBM file,
choose Tools > Update Center > Install Manually Downloaded Module from the menu.
Select the NBM module you want to install and follow the instructions in the Wizard.
The module has been tested with
NetBeans IDE 4.1
and latest
NetBeans IDE 5.0.
This is how it works:
After installation, the Desktop Sampler will appear as a new item in the NetBeans IDE toolbar.
Click the dropper icon , keep the mouse button pressed and move the mouse around
to sample the color of pixels on your desktop.
If you need more acurate sampling, show the Magnifier tool
by clicking the button
on the right hand side of the Color Value field. A preview box appears.
Click into the preview box, keep the mouse button pressed
and move the mouse around to display the desired section of your desktop
in the preview box, then release the mouse button.
Click the dropper icon ,
keep the mouse button pressed and move the mouse around
to sample the color of pixels in the preview box.
If the pixels in the preview box are too small for you to pinpoint,
use the slider to increase the magnification and try again.
If you need the result in different format, click the pencil icon
and select another.
The Desktop Sampler Toolbar Module Project
The module projects needed to build the module in NetBeans IDE are
available in the Resources section below.
The Bundle.properties file provides a way to support
internationalization and localization of module information.
OpenIDE-Module-Display-Category=Tools
OpenIDE-Module-Long-Description=\
Desktop Sampler provides a toolbar for sampling colors from Desktop. \
It also supports zooming of any parts of Desktop.
OpenIDE-Module-Name=Desktop Sampler
OpenIDE-Module-Short-Description=Desktop Sampler
nbproject/project.xml
The following listings show the project.xml files for NetBeans 4.1 and 5.0.
As you can tell from the <dependency> tag, the openide APIs
have been split from a single org.openide module in 4.1
to several modules (org.openide.actions, org.openide.util, org.openide.windows) in 5.0.
Again the differences are highlighted.
build.xml (for NetBeans IDE 5.0 development version)
This uses the standard module project suopport.
<?xml version="1.0" encoding="UTF-8"?>
<!-- You may freely edit this file. See harness/README in the NetBeans platform -->
<!-- for some information on what you could do (e.g. targets to override). -->
<!-- If you delete this file and reopen the project it will be recreated. -->
<project name="org.netbeans.modules.desktopsampler" default="netbeans" basedir=".">
<description>Builds, tests, and runs the project org.netbeans.modules.desktopsampler.</description><import file="nbproject/build-impl.xml"/>
</project>
Desktop Sampler Action
The DesktopSamplerAction is declared in the layer.xml file
and provides the mechanism to install the Desktop Sampler toolbar.
The Action returns an instance of DesktopSampler
from the getToolbarPresenter() API.
The Desktop Sampler combines the Color Sampler tool and the Magnifier tool.
It adds the ChangeListener to the ColorSampler and
stores the color value of the sampled pixel in the clipboard.
It also registers a mouse listener on the Color Preview label of the Color Sampler.
When the user double-clicks the Color Preview label,
it launches a JColorChoooser which makes use of the
customColorSamplerColorChooser panel.
On the right hand side of the Color Value field, the tool provides a toggle button to show
[]
and hide
[]
the Magnifier tool.
To build the project, use the pop-up menu on the DesktopSampler module project node in the Projects window
and choose the Build menu item.
To test the project, use the pop-up menu on the DesktopSampler module project node in Projects window
and choose the Install and Reload menu item.
To create your own NBM file from the project, choose the Create NBM menu item and install
the created NBM file by choosing the Tools > Update Center >
Install Manually Downloaded Module from the menu.
Conclusion
In this article, we have shown the details of
how to build the Color Sampler and the Magnifier tool.
You learned to combine them to a handy Color Chooser - a
customcolor
chooser panel for javax.swing.JColorChooser,
and how to build a toolbar for NetBeans Platform
providing the tool's functionality.
] as shown in the following screen shot.
].
button
on the right hand side of the Color Value field. A preview box appears.
Click into the preview box, keep the mouse button pressed
and move the mouse around to display the desired section of your desktop
in the preview box, then release the mouse button.
Click the dropper icon 
]
the Magnifier tool.
