The example from this image is a section of a street map of individual lots. It will highlight the lot when clicked and display information about the lot in the other panel.

We do several simple tasks with our ImagePanel class. First we listen for the mouse events and fire a PropertyChange for the the main application. Below we loop through the Vector of Polygons to see if the mouse point is contained in any of the Polygons. If so, the index is sent to the main application. The index is used by the main application to retrieve additional data.

    public void mouseReleased(MouseEvent e) {

        for(int i=0; i<polys.size();i++){
            if(polys.get(i).contains(e.getX(), e.getY())){
                this.firePropertyChange("CurrentMap", currentMap, i);
                currentMap = i;
                repaint();
                break; // no need to keep checking
            }
        }
    }

Also we override the paint() function to highlight the selected area.

    public void paint(java.awt.Graphics g) {
        Graphics2D g2 = (Graphics2D) g;
        g2.drawImage(this.img, 0, 0, this);

        g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, this.alpha));
        g2.setColor(this.fill);
        if(this.currentMap > -1)
            g2.fillPolygon(this.polys.get(this.currentMap));
    }

And we respond to the property change in the main application. The index tells us which data to present.

    public void propertyChange(PropertyChangeEvent arg0) {
        if(arg0.getSource().equals(imagepanel)){
            int index = (Integer)arg0.getNewValue();
            if(index> -1){
                lot.setText(lots.get(index));
                rent.setText(prices.get(index));
                status.setText(statuses.get(index));
            }
        }
    }

The Polygons are passed to the ImageMap class through its member function setPolygons(Vector polygons) which takes a Vector of Polygons. Also the fill color is set with setFill(Color color) or to change from the default opacity with setFill(Color color, float alpha).

Here is the entire class:

import java.awt.AlphaComposite;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Polygon;
import java.awt.Stroke;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.util.Vector;

import javax.swing.JPanel;

public class ImagePanel extends JPanel implements MouseListener{
    private Image img;
    private Vector<Polygon> polys;
    private int currentMap;
    private Color fill;
    private float alpha;

    public ImagePanel(Image image){
        this.img = image;
        currentMap = -1;
        addMouseListener(this);
        alpha = 0.1f;
        fill = Color.BLUE;
    }

    public void setPolygons(Vector<Polygon> polygons){
        this.polys = polygons;
    }

    public void setFill(Color color){
        this.fill = color;
    }

    public void setFill(Color color, float alpha){
        this.fill = color;
        this.alpha = alpha;
    }

    public void paint(java.awt.Graphics g) {
        Graphics2D g2 = (Graphics2D) g;
        g2.drawImage(this.img, 0, 0, this);

        g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, this.alpha));
        g2.setColor(this.fill);
        if(this.currentMap > -1)
            g2.fillPolygon(this.polys.get(this.currentMap));
    }

    public void mouseReleased(MouseEvent e) {

        for(int i=0; i<polys.size();i++){
            if(polys.get(i).contains(e.getX(), e.getY())){
                this.firePropertyChange("CurrentMap", currentMap, i);
                currentMap = i;
                repaint();
                break; // no need to keep checking
            }
        }
    }

    // unused mouse
    public void mouseClicked(MouseEvent arg0) {}

    public void mouseEntered(MouseEvent arg0) {}

    public void mouseExited(MouseEvent arg0) {}

    public void mousePressed(MouseEvent arg0) {}

}

Download source.

Let’s look at an example. Take the simple form below for illustration.

 <head><title>Regular Expression Example Page</title></head>
 <body>
  <form action="nowhere.php" method="post">
   Last <input type="text" name="Last"><br />
   First <input type="text" name="first"><br />
   Address <input type="text" name="address"><br />
   Address 2 <input type="text" name="address2"><br />
   City <input type="text" name="city"><br />
   State <input type="text" name="state"><br />
   Zip <input type="text" name="zip"><br />
   <input type="submit" />
  </form>
 </body>
</html>

Now let’s say we want to validate the form. To do this we need the id attribute for each input tag. In jEdit you can select the lines for the inputs in question. Pull up the search dialog by hitting ctl-f or from the menu. Since you selected only the lines you want, the dialog will appear with the option to search the selection.

Be sure to have the Regular Expressions box checked. We can add the id to our form with the following:

Search:

name="([0-9A-Za-z_]*)"

Replace:

name="$1" id="$1"

Now we should have the following:

 <head><title>Regular Expression Example Page</title></head>
 <body>
  <form action="nowhere.php" method="post">
   Last <input type="text" name="Last" id="Last"><br />
   First <input type="text" name="first" id="first"><br />
   Address <input type="text" name="address" id="address"><br />
   Address 2 <input type="text" name="address2" id="address2"><br />
   City <input type="text" name="city" id="city"><br />
   State <input type="text" name="state" id="state"><br />
   Zip <input type="text" name="zip" id="zip"><br />
   <input type="submit" />
  </form>
 </body>
</html>

Now we get to the good stuff. jEdit has a console plugin that is a must have. From the console plugin you can execute commands from the system shell without leaving the editor. You can output the results to a new buffer in the editor by pressing the following from the console window:

Save your file at this point. From the command window you can change to the directory of the current buffer by typing cd $d. Once in the directory run grep name= index.html(assuming) on unix systems or findstr name= index.htm on Windows and press the button to run to a new buffer. This will give you:

   Last <input type="text" name="Last" id="Last"><br />
   First <input type="text" name="first" id="first"><br />
   Address <input type="text" name="address" id="address"><br />
   Address 2 <input type="text" name="address2" id="address2"><br />
   City <input type="text" name="city" id="city"><br />
   State <input type="text" name="state" id="state"><br />
   Zip <input type="text" name="zip" id="zip"><br />

in a new buffer. Now we can search and replace. Note: if this seems intimidating, you could just copy and paste the lines you want into a new buffer. However the console method is preferred because typically in the real world it is not as simple as the example. Not all inputs will be one line after another.

Search for:

^.*name="([0-9A-Za-z_]*)".*\n

Replace with:

element=document.getElementById('$1');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

Note: to enter the above use ctl-Enter at the end of each line. This will allow you to replace with multiple lines. Also if you are using findstr in Windows you need to replace the \n with \r\n in the search.

The result form validation script body:

element=document.getElementById('Last');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

element=document.getElementById('first');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

element=document.getElementById('address');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

element=document.getElementById('address_2');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

element=document.getElementById('city');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

element=document.getElementById('state');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

element=document.getElementById('zip');
if(element.value==''){
  alert('Please complete all required fields');
  element.focus();
  element.select();
  return false;
}

For the php server end:

Search:

^.*name="([0-9A-Za-z_]*)".*\n

Replace:

\$$1 = \$_POST["$1"];\n

Result:

$Last = $_POST["Last"];
$first = $_POST["first"];
$address = $_POST["address"];
$address_2 = $_POST["address_2"];
$city = $_POST["city"];
$state = $_POST["state"];
$zip = $_POST["zip"];

I hope you have found this useful or at least it has stimulated you with ideas of other ways you can save time and carpal tunnel with this technique.

This is the type of chart typically used for disk allocation in programs similar to Overdisk. They however are not limited to this application. This class will dynamically size to the maximum amount of its container. Also, the thickness is dynamic and will set itself based on the number of rings added. The rings can start and end at any angle. The segments of each ring are divided proportionally based on the segments value and drawn to the proper arc length based on the start and end angle.

The ArcSegment Class.

First we need to be able to draw the individual segments. We will create our own custom shape. To accomplish this we will use Java’s GeneralPath class which uses the Shape interface. The GeneralPath will create our ArcSegment by combining arcs from the Arc2D.Double class and connecting them with the GeneralPath’s lineTo() member function.

By creating our own Shape in this way, we can treat it as any other Shape in Java. This is useful for displaying tooltips as we do in this example. We do this by using the contains() method of the Shape interface.

public class ArcSegment {
    public ArcSegment(){

    }

    public Shape Create(
            double centerx,
            double centery,
            double radius,
            double width,
            double start,
            double extent
        )
    {
        GeneralPath gp = new GeneralPath();
        GeneralPath dummy = new GeneralPath(); // used to find arc endpoints

        double left, top;
        left = centerx - radius;
        top = centery - radius;

        Shape outer = new Arc2D.Double(left, top, 2 * radius, 2 * radius, start, extent, Arc2D.OPEN);
        Shape inner = new Arc2D.Double(left + width, top + width, 2 * radius - 2 * width
                        , 2 * radius - 2 * width, start+extent, -extent, Arc2D.OPEN);
        gp.append(outer, false);

        dummy.append(new Arc2D.Double(left + width, top + width, 2 * radius - 2 * width
                , 2 * radius - 2 * width, start, extent, Arc2D.OPEN),false);

        Point2D point = dummy.getCurrentPoint();

        if(point!=null)gp.lineTo(point.getX(), point.getY());
        gp.append(inner, false);

        dummy.append(new Arc2D.Double(left, top, 2 * radius, 2 * radius, start+extent, -extent, Arc2D.OPEN),false);

        point = dummy.getCurrentPoint();
        gp.lineTo(point.getX(), point.getY());
        return gp;
    }
}

The dummy GeneralPath above is used to find the endpoint of the next arc. We first draw the outer arc clockwise and end by drawing the inner arc counterclockwise. The dummy GeneralPath is not rendered but it is a handy way to find the endpoint of the other arc. So we draw the outer arc clockwise, the use the dummy arc also clockwise for the inner arc. This will end the stroke at the point we need to connect from the outer arc and also the starting point of rendering the counterclockwise inner arc. Now we have the building blocks in place for drawing the rings.

The Ring Class

This class will create a ring based on the start and end points. It will take a value, a label and a color for each segment of the ring and divide them accordingly based on the values. The Value, Label and Color Vectors are set in the Ring class and the ring is created by creating the segments.

public class Ring {
    private Vector<String> Labels;
    private Vector<Double> Values;
    private Vector<Color> Colors;
    private double x;
    private double y;
    private double radius;
    private double ringwidth;
    private double start;
    private double end;
    private Shape[] segments;

    public Ring(){
        Labels = new Vector<String>();
        Values = new Vector<Double>();
        Colors = new Vector<Color>();
        this.start = 0;
        this.end = 360;
        segments = null;
    }

    public void setStart(double start){
        this.start = start;
    }

    public void setEnd(double end){
        this.end = end;
    }

    public double getValue(int i){
    if(this.segments==null){
        this.createSegments();
    }
    return Values.get(i);
    }

    public int count(){
        if(this.segments==null){
            this.createSegments();
        }
        return Values.size();
    }

    public String getLabel(int index){
        return Labels.get(index);
    }

    public Color getColor(int index){
        return Colors.get(index);
    }

    public void setCenter(double x, double y){
        this.x = x;
        this.y = y;
    }

    public void setRadius(double radius){
        this.radius = radius;
    }

    public void setRingWidth(double width){
        this.ringwidth = width;
    }

    public void addItem(String label, double val, Color color){
        Labels.add(label);
        Values.add(val);
        Colors.add(color);
    }

    public Shape getSegment(int index){
        if(this.segments==null){
            this.createSegments();
        }

        return segments[index];
    }

    public void createSegments(){
        Shape[] shapes = new Shape[Values.size()];
        double sum = 0;
        double span = this.end - this.start;
        for(int i=0; i<Values.size(); i++){
            sum += Values.get(i);
        }

        double strt = this.start;
        for(int i=0; i<Values.size(); i++){
            double extent = (Values.get(i) / sum) *span;
            ArcSegment arc = new ArcSegment();
            shapes[i] = arc.Create(this.x,this.y,this.radius,this.ringwidth,strt,extent);
            strt += extent;
        }

        this.segments = shapes;

    }
}

Now we put it all together in the RingChart class.

The RingChart Class

This is the class that will be called from the application. It takes a Vector of type Ring and does all the rendering from the information provided by the Vector. Each Ring will contain the start angle, end angle and the values. The work is done in the paintComponent() method. In this method we loop through each Ring and for each Ring we loop through drawing each segment. Tooltip functionality is accomplished by looping through the Rings/Segments and checking to see if the mouse position is contained in the segment.

public class RingChart extends JPanel implements ComponentListener{
    Vector<Ring> rings;

    public RingChart() {
        setOpaque(false);
        addComponentListener(this);
        rings = new Vector<Ring>();

        ToolTipManager.sharedInstance().registerComponent(this);
    }

    protected void paintComponent(Graphics g) {
        Graphics2D g2 = (Graphics2D)g;
        g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.4f));
        Stroke s = new BasicStroke(1.25f);
        g2.setColor(Color.WHITE);
        g2.fillRect(0, 0, getWidth(), getHeight());
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setStroke(s);

        Insets insets = this.getInsets();
        int h = this.getHeight() - insets.top - insets.bottom;
        int w = this.getWidth() - insets.left - insets.right;
        int m = Math.min(h, w);

        for(int r = 0; r < rings.size(); r++){
            Ring ring = rings.get(r);
            double rw = ((double)m / ((double)rings.size()+1))/2;
            ring.setRingWidth(rw);
            ring.setRadius(2*rw +rw*(double)r);
            ring.setCenter((double)this.getWidth()/2.0, (double)this.getHeight()/2.0);
            ring.createSegments();            

            for (int index = 0; index < ring.count(); index++) {
                g2.setColor(ring.getColor(index));
                g2.fill(ring.getSegment(index));
                g2.setColor(Color.BLACK);
                g2.draw(ring.getSegment(index));
            }
        }

    }

    public JToolTip createToolTip(){
        JToolTip tooltip = super.createToolTip();
        tooltip.setBackground(new Color(255,255,140,128));
        this.repaint(); // TODO: will this bog us down?
        return tooltip;
    }

    public String getToolTipText(java.awt.event.MouseEvent e) {

        for(int r = 0; r < rings.size(); r++){
            Ring ring = rings.get(r);
            for (int index = 0; index < ring.count(); index++) {
                if (ring.getSegment(index).contains(e.getPoint())) {
                    return ring.getLabel(index)+": "+ring.getValue(index);
                }
            }
        }
        return super.getToolTipText(e);
    }

    public void setRings(Vector<Ring> rings){
        this.rings = rings;
    }

    @Override
    public void componentHidden(ComponentEvent arg0) {    }

    @Override
    public void componentMoved(ComponentEvent arg0) {    }

    @Override
    public void componentResized(ComponentEvent arg0) {
        repaint();
    }

    @Override
    public void componentShown(ComponentEvent arg0) {    }

}

Download source code and example here..