September 16, 2008

Simple bar graph in java

Here's a simple program in Java that reads integer values from a file and graphs it. This program is written in three files. The code is shown below.

File: drawGraph.java


import java.awt.Color;
import java.awt.Graphics;
import javax.swing.*;
public class drawGraph
{
public static void main( String args[] )
{
JFrame frame = new JFrame( "Graph" );
frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

CreateGraph createGraph = new CreateGraph();
createGraph.setBackground( Color.WHITE );
frame.add( createGraph );
frame.setSize( 640, 480 );
frame.setVisible( true );
}
}


File: Create Graph.java


import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JPanel;

public class CreateGraph extends JPanel
{
public int x (int tx)
{
return (tx + 5);
}

public int y (int ty)
{
return (400 - ty + 5);
}

public void paintComponent( Graphics g )
{
super.paintComponent( g ); // call superclass's paint method
this.setBackground( Color.WHITE );

GraphComponents graphComponents = new GraphComponents();
graphComponents.openFile();
graphComponents.readRecords();
graphComponents.closeFile();

g.setColor( Color.BLACK );
g.drawLine( x(0), y(0), x(620), y(0) );
g.drawLine( x(0), y(0), x(0), y(460) );

g.setColor( Color.BLUE );
for (int i = 0; i < graphComponents.getMaxYCount(); i ++)
{
g.fillRect( x(i*50+10), y(graphComponents.getYValues(i)*20),
40, graphComponents.getYValues(i)*20 );
}


File: GraphComponents.java


import java.io.File;
import java.io.FileNotFoundException;
import java.lang.IllegalStateException;
import java.util.NoSuchElementException;
import java.util.Scanner;

public class GraphComponents
{
private Scanner input;
private int yValues [];
private int yCounter;

public GraphComponents ()
{
yValues = new int [10];
yCounter = 0;
}

public void storeYValues (int val)
{
yValues [yCounter++] = val;
}

public int getYValues (int index)
{
return yValues[index];
}

public int getMaxYCount ()
{
return yCounter;
}

public void openFile()
{
try
{
input = new Scanner( new File( ".\\graphvalues.txt" ) );
yCounter = 0;
}
catch ( FileNotFoundException fileNotFoundException )
{
System.err.println( "Error opening file." );
System.exit( 1 );
}
}

public void readRecords()
{
try
{
while ( input.hasNext() )
{
storeYValues (input.nextInt());
System.out.println (yValues[yCounter - 1]);
}
}
catch ( NoSuchElementException elementException )
{
System.err.println( "ERROR: Unable to read file (No such element)" );
input.close();
System.exit( 1 );
}
catch ( IllegalStateException stateException )
{
System.err.println( "ERROR: Unable to read file (State exception)" );
System.exit( 1 );
}
}

public void closeFile()
{
if ( input != null )
input.close();
}
}


Peace ..V,

September 13, 2008

Creating round corners using CSS

In a website, menus and small rectangular regions with round corners look impressive. It can be seen in several sites. But as a web designer I found that creating round corners are not as easy as it looks. Here is one method I found to make things easy:

First a preview of that you're gonna read about:



The HTML code:

<div class="windowFrame">
<div class="windowTopBar">
<img src="Images/cTL.png" class="imgL" />
<img src="Images/cTR.png" class="imgR" />
</div>

<div class="windowContentFrame">
Lorem ipsum... and other similar crap!
</div>

<img src="Images/cBL.png" class="imgL" />
<img src="Images/cBR.png" class="imgR" />
</div>


The CSS used along with this is:

.windowFrame {
width: 100%;
background-color: #BBBBFF;
margin-bottom: 10px;
text-align: center;
}
.windowTopBar {
width: 100%;
background-color: #0000FF;
height: 25px;
}
.windowContentFrame {
padding: 10px;
text-align: left;
}
.imgL {
float: left;
}
.imgR {
float: right;
}




The images cBL, cBR, tTL, cTR refer to the four corners. The size of these should be atleast 15px X 15px. Otherwise there will some strange vertical alignment problems. They are images that are rounded at the corners that will be placed at each corner. Here's a sample:






I've used .png images as they allow transparency. The above corners are perfect for a white background. Oh yes, the images must match the background. Should be careful about that. You can save those images and use it if you need them. They're not copyrighted... ;)

The above method can also be modified to include all the images in the CSS and not have any img tag at all. The advantage of doin this is the images will be at the background. When you try to select contents of the page, the corners will not get selected. In better words, the corners will look more merged with the background. But another disadvantage of this is you'll have to have 4 div tags and 4 classes. But the final output is the same.

CSS rocks!