Tuesday, July 31, 2012

Custom Shape Buttons

Buttons of Irregular Shape

In previous post, I have demonstrated how to detect mouse click in a triangular region. That made implementation of a triangular button possible. In this post I will move one step forward. I am going to implement a button with arbitrary shape.


Transparent Image

First you will need a transparent image file to act as the button. It is not difficult to make one yourself. I have prepared one for you:




Download it and save it as "a.png". Place it at the same folder as ImageButton.java.


ImageButton.java

The actual code is simple, we will simulate a button using a JLabel. We will attach a image to the JLabel, then capture the mouse event, and ignore the mouse click if it click on a transparent pixel.

Sunday, July 8, 2012

Mouse Click in a Triangular Region

Introduction

It is relatively easy to test whether a mouse click occurs inside a rectangular region. However, testing mouse click in triangular region is less obvious. In this article, we will draw a cross inside a window to separate the screen into four triangular regions, and then we will write a mouse click handler so that it will report which region is clicked.


Drawing a cross


We will first write a program to draw a cross as shown below:





The drawing code should be simple enough to be understood. To test the code, copy and paste it to a file named RegionClicker.java, then issue:


javac RegionClicker.java
java RegionClicker



Handling Mouse Click with a MouseAdapter


We are now going to handle the mouse click event. First we need to define a event handler. Right now it will just pop up a message box when mouse click occurs.



Then we need to tell Java we are listening to the mouse event of the label by adding the following line in main()



Recognizing the Triangular Region


The next thing we are going to do is let the program report which triangle is clicked. It will say "up","down","left" or "right" according to the region clicked. It seems to be complex at first, but the code is actually simple.



Two Points Form

To derive the above code, we will first find out the equations of the two diagonal. Looking at the line drawing code, we are actually drawing two lines:
line A: (0,0) to (300,300)
line B: (300,0) to (0,300)

Line A is joining the upper left corner to the lower right corner, whereas line B is joining the lower left corner to the upper right corner. The equations of both lines can be determined by the two points form.
line A : (y-0)/(x-0) = (300-0)/(300-0)
line B : (y-0)/(x-300) = (300-0)/(0-300)

Simplification:
line A : y = x
line B : y = 300-x

We know that all points lying in line A satisfy equation A, that is, it satisfy the following condition :
y=x
With a simple observation, all points lying above line A must satisfy :
y<x
and all points lying below line A must satisfy :
y>x
Similarly, we would make the same conclusion to line B:
if (y=300-x), then the point lies on line B
if (y<300-x), then the point is above line B
if (y>300-x), then the point is below line B


Combining the above, we have:

If (y<x) and (y<300-x) then the point is lying above line A and also line B, hence it is in the upper triangular region.

If (y<x) and (y>300-x) then the point is lying above line A but below line B, 
hence it is in the right triangular region,


Generalization


The above code just handle window of 300x300. We can easily generalize the above code to a window of any size. The following program make dimension constants stored in W and H. And this is the completed version for this article.

Friday, July 6, 2012

Displaying Local Image in a JTextPane with HTML

Introduction

This is a question from a member in programmingforums.org. I have posted a quick reply there. I am going to write a step by step guide here.


Preparing a image

To display a image stored in local drive, you should first prepare a image file. We would expect "a.png" to be stored in the same folder as the demonstration program. It is easy to download or create a PNG image. For your convenience, I have prepared one here. Right click the image below and save it as "a.png"


Adding HTML in JTextPane

The following code would display a remote image in a JTextPane


Obtaining a local URL

Displaying remote image is not always desirable. To display a local image, we need a URL pointing to the local hard disk. If you place "a.png" at the same folder as the main program, you would obtain the image URL with the following portable way.


Full source