This discussion is archived
6 Replies Latest reply: Jun 22, 2011 9:56 AM by 801540 RSS

Dynamic generation of web graphics using Java2D

801540 Newbie
Currently Being Moderated
Does anyone have some thoughts on using Java2D to generate web graphics, like buttons?

I want to be able to create my buttons programmatically. The challenge is getting them
to look as nicely as they can be done in Photoshop. Is there some examples, or some
libraries I can use to generate various effects like gloss, emboss, shadow, etc?

Edited by: user10816810 on Jun 20, 2011 12:48 PM
  • 1. Re: Dynamic generation of web graphics using Java2D
    801313 Explorer
    Currently Being Moderated
    Unless you're talking about Applets, you can't really use Java SE to create buttons that appear in a web browser.

    You may want to check out a JavaScript tutorial about handling events on images.
  • 2. Re: Dynamic generation of web graphics using Java2D
    801540 Newbie
    Currently Being Moderated
    That's not what I am trying to do.

    I want to create .gif files. Its a little bit tedious to create new .gif files every time the button text has to change, or when a new button needs to be added. I was just hoping to automate this with Java2D.

    I want something where I can feed it the text, and then it will figure out how big to make the image, apply various effects, then output it as a .gif file.

    Thanks.
  • 3. Re: Dynamic generation of web graphics using Java2D
    801313 Explorer
    Currently Being Moderated
    user10816810 wrote:
    That's not what I am trying to do.

    I want to create .gif files. Its a little bit tedious to create new .gif files every time the button text has to change, or when a new button needs to be added. I was just hoping to automate this with Java2D.

    I want something where I can feed it the text, and then it will figure out how big to make the image, apply various effects, then output it as a .gif file.

    Thanks.
    My thought is that this is a waste of time. I don't think it would be that hard to do, but I don't see the point. Rather, I'd recommend spending your time looking at capacities that match what you are trying to do in Flash and HTML 5. But if you really want the Metal buttons (I assume we're talking about the Metal L&F, correct) then you gotta do what you gotta do.
  • 4. Re: Dynamic generation of web graphics using Java2D
    801540 Newbie
    Currently Being Moderated
    I am not talking about Swing, AWT, Flash, or HTML 5. I am just talking about using a BufferedImage object to create .gif files so that I can automate the creation of button graphics to use in html files. For instance, if I need a button, i.e. <img src="something.gif" />, I don't want to have to open Photoshop to do it. I just want to generate a script using a BufferedImage object and graphics2d.

    This has nothing to do with applets, JFrames, JButtons, etc. Again, I just want the ability to create GIF formatted files to use for buttons in web pages. For example, I need three graphics files to represent the pressed, rollover and normal states. It tedious to constantly update these files.

    MetalUI has nothing to do with my question. I am not talking about look and feels. Metal is an example of an effect I would like to achieve using Java 2D. Photoshop has styles to reresent Metal, plastic, gradients, etc. I am talking about effects like that, not Look and Feel. I am not talking about Swing. You can make a web graphic in Photoshop to represent a button in Photoshop, but that is task driven. Is there a way to do the same thing in Java2D to automate the process? Are there examples somewhere? Is anyone good with creating these kind of graphics that could whip up some examples?

    Is HTML 5 mainstream? Is Flash mainstream? I just want basic every day generic GIF files. I am dealing with a commercial web site, I can not consider something that isn't mainstream yet.

    If this is not possible, then I will just keep using Photoshop. However, I think this type of automation would save a lot of time.

    Thank you.
  • 5. Re: Dynamic generation of web graphics using Java2D
    StanislavL Pro
    Currently Being Moderated
    I think the BufferedImage based approach is ok.

    All you need is a JButton with proper text created. Then set size to getPreferredSize() and call paint() passing the Graphics instance from the BufferedImage. Or you can create a JFrame add the JButton there and paint desired portion of the JFrame.

    I have implemented something like this painted book pages pair as .png images.

    You server should have some Windows system support to let you render fonts.
  • 6. Re: Dynamic generation of web graphics using Java2D
    801540 Newbie
    Currently Being Moderated
    Hi. I put together an example of what I am trying to do:

    here it is:

    <pre>
    import java.awt.BasicStroke;
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics2D;
    import java.awt.LinearGradientPaint;
    import java.awt.MultipleGradientPaint;
    import java.awt.Paint;
    import java.awt.RenderingHints;
    import java.awt.Shape;
    import java.awt.Stroke;
    import java.awt.geom.AffineTransform;
    import java.awt.geom.GeneralPath;
    import java.awt.geom.Point2D;
    import java.awt.geom.RoundRectangle2D;
    import java.awt.image.BufferedImage;
    import java.io.File;
    import java.util.Iterator;

    import javax.imageio.ImageIO;
    import javax.imageio.ImageWriter;
    import javax.imageio.stream.ImageOutputStream;

    public class ButtonExample{
    static public void main(String args[]) throws Exception {
    int width = 200, height = 50;
    BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);

    Graphics2D g = bi.createGraphics();
    g.fillRect(0, 0, width - 1, height - 1);

    //////////////////////////////////////////////////////////////////
    g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    Shape shape = null;
    Paint paint = null;
    Stroke stroke = null;
    //int width = getWidth();
    //int height = getHeight();
    paint = new Color(0, 0, 0, 255);
    shape = new RoundRectangle2D.Double(0, 0, width, height, 26, 26);
    g.setPaint(paint);
    g.fill(shape);
    paint = new Color(0, 0, 0, 255);
    shape = new RoundRectangle2D.Double(1, 1, width - 2, height - 2, 15.0, 15.0);
    g.setPaint(paint);
    paint = new Color(136, 136, 136, 136);
    stroke = new BasicStroke(1.0f, 0, 0, 4.0f, null, 0.0f);
    shape = new RoundRectangle2D.Double(1, 1, width - 2, height - 2, 15.0, 15.0);
    g.setPaint(paint);
    g.setStroke(stroke);
    g.draw(shape);
    paint = new LinearGradientPaint(new Point2D.Double(321.125, 205.1853790283203), new Point2D.Double(321.125, 300.3125), new float[]{0.0f, 1.0f}, new Color[]{new Color(255, 255, 255, 255), new Color(0, 0, 0, 0)}, MultipleGradientPaint.CycleMethod.NO_CYCLE, MultipleGradientPaint.ColorSpaceType.SRGB, new AffineTransform(1.0f, 0.0f, 0.0f, 1.0f, -189.4317169189453f, -220.40145874023438f));
    shape = new GeneralPath();
    ((GeneralPath) shape).moveTo(15.1308, 1.8172914);
    ((GeneralPath) shape).curveTo(9.820799, 1.8172914, 2.1307993, 4.507291, 2.1307993, 13.817291);
    ((GeneralPath) shape).lineTo(2.1307993, 31.78604);
    ((GeneralPath) shape).curveTo(39.09004, 37.30802, 86.78241, 40.69229, width / 2, 40.69229);
    ((GeneralPath) shape).curveTo(width / 2, 40.69229, width / 2 + 30, 38.130333, width - 1, 33.84854);
    ((GeneralPath) shape).lineTo(width - 1, 11.817291);
    ((GeneralPath) shape).curveTo(width - 1, 6.507291, width - 5, 2.8172914, width - 13, 1.8172914);
    ((GeneralPath) shape).lineTo(18.1308, 1.8172914);
    ((GeneralPath) shape).closePath();

    g.setPaint(paint);
    g.fill(shape);
    g.setFont(new Font("Microsoft Sanserif", Font.BOLD, 20));
    g.setColor(new Color(0, 0, 0));
    g.drawString("testing", width / 4 + 1, 31);
    g.setColor(new Color(0, 255, 0));
    g.drawString("testing", width / 4, 30);

    Iterator imageWriters = ImageIO.getImageWritersByFormatName("GIF");
    ImageWriter imageWriter = (ImageWriter) imageWriters.next();
    File file = new File("c:\\button.gif");
    ImageOutputStream ios = ImageIO.createImageOutputStream(file);
    imageWriter.setOutput(ios);
    imageWriter.write(bi);
    }
    }
    </pre>

    This outputs "button.gif". The graphics quality isn't that great, because I am not that good with visuals/graphics. This is the part I need help with. I need to come up with good effects, like plastic (gel), gradients, metal, etc. (Just like in Photoshop).

    This is also useful for creating rounded rectangles/outlines for web page sections. That is another thing that is tedious to do in Photoshop, because you have to deal with slicing up the image.

    Thanks.

    Edited by: user10816810 on Jun 22, 2011 9:54 AM

    Edited by: user10816810 on Jun 22, 2011 9:55 AM

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points