Drawing HTML with JOGL Part 2: JComponent

Ok, so now that we are able to use a BufferedImage and create a texture from it, as I showed in the last part, lets move on to showing HTML. Java provides basic HTML rendering, complete with stylesheets so that you can render a majority of webpages, provided they don't require javascript. You'll have to work out all the nuances of using HTML in java yourself.

So on to the code you'll need a JEditorPane or JTextPane, and a container JPanel.

private final JEditorPane editor = new JEditorPane();

private final JPanel container = new JPanel(new BorderLayout());

You can set them to load a particular URL and make sure the editable is set to false.

// setup our HTML render capable component
editor.setEditable(false);
try {
//get the resource using the classloader which requires
//the file to be in a directory on the classpath.
editor.setPage(this.getClass().getResource("example.html"));
} catch (IOException e1) {
e1.printStackTrace();
}
container.add(editor);

Or you can hard code the HTML yourself but make sure you've set the editors setContentType to "text/html" or the html will not be recognized.

Now here is the tricky part, as in the last example the texture will be created from the BufferedImage but now you will have to draw the swing component and update the texture data every frame in case you wish to change the contents of the editor pane dynamically.

// paint the html component to a buffered image.
Graphics g = image.getGraphics();

// rerender the editor to capture any changes
SwingUtilities.paintComponent(g, editor, container, 0, 0,
image.getWidth(), image.getHeight());

//need to update the texture itself
texture.updateImage(new TextureData(GL.GL_RGBA,
image.getType(), false, image));

Here is the example in full.

• JoglHtmlDemo.java
  

This example uses JOGL version 1.1.1a and should work with the NetBeans plugin you can obtain the version from JOGL's website go to the "Archived Builds" page from the navigation menu on the left. Then find the jsr-231-1.1.1a folder

Drawing HTML with JOGL Part 1: Textures

I recently decided to start working with JOGL to help a friend with an assignment. He needed to be able to render basic HTML with JOGL. My first order of business was to simply draw a texture after, of course, getting a basic jogl app compiling and running.

Here is what I came up with:

// enable 2D textures
gl.glEnable(GL.GL_TEXTURE_2D);

// select modulate to mix texture with color for shading
gl.glTexEnvf(GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE,
 GL.GL_MODULATE);

// create the texture, you may need to find an alternative
// if this method is not available for the jogl version
// you use.
texture = TextureIO.newTexture(image, false);

// set the texture parameters to allow for proper displaying
texture.setTexParameteri(GL.GL_TEXTURE_WRAP_S, GL.GL_REPEAT);
texture.setTexParameteri(GL.GL_TEXTURE_WRAP_T, GL.GL_REPEAT);
texture.setTexParameteri(GL.GL_TEXTURE_MAG_FILTER, GL.GL_LINEAR);
texture.setTexParameteri(GL.GL_TEXTURE_MIN_FILTER, GL.GL_LINEAR);

texture.bind(); // only after settings texture properties

I put the above in the GLEventListener init() method.

And then the following to render it in the display() method.

GL gl = drawable.getGL();

//variables for controlling the rendered geometry
float startX = 0.25f;
float startY = 0.25f;
float width = 0.50f;
float height = 0.50f;

//This is the good part.

//use the clear color we set
gl.glClear(GL.GL_COLOR_BUFFER_BIT);

//the gl draw mode
gl.glBegin(GL.GL_QUADS);

//set the texture coordinates for the next vertex
gl.glTexCoord2d(1.0, 1.0);

//add a two-dimensional vertex
gl.glVertex2f(startX + width, startY);

gl.glTexCoord2d(0.0, 1.0);
gl.glVertex2f(startX, startY);

gl.glTexCoord2d(0.0, 0.0);
gl.glVertex2f(startX, startY + height);

gl.glTexCoord2d(1.0, 0.0);
gl.glVertex2f(startX + width, startY + height);

gl.glEnd();

//show the back buffer if double buffering was set
gl.glFlush();

The image is a BufferedImage which was created within the program but you can use a file object in it's place to load textures directly from file.

Here is the full source code for the example:

• JoglTextureDemo.java

This example uses JOGL version 1.1.1a and should work with the NetBeans plugin you can obtain the version from JOGL's website go to the "Archived Builds" page from the navigation menu on the left. Then find the jsr-231-1.1.1a folder

Centering Java Windows & Dialogs

Centering Windows:
Thought I would share a quick little trick for those who haven't already found this out. Many times when you display an Application window or Dialog box you want it to appear centered either onscreen or centered within another window or component. Instead of figuring out the absolute position of the window or dialog on screen there is a much easier solution.

JFrame mainFrame = new JFrame("Test Center On Screen");
//must have this in order to porperly exit application when window closes
mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

//size must be set prior to setting location.
mainFrame.setSize(600, 400);

//this is on way to center the frame
mainFrame.setLocationRelativeTo(null);

//show the window.
mainFrame.setVisible(true);

Alternatives to setting the size with absolute values is using the pack(); function which will use the preffered size and layout managers to determine the window size.

Another way to center the frame is by calling the same setLocationRelativeTo(); function as follows.

//same as above
mainFrame.setLocationRelativeTo(mainFrame);

There is no advantage to using either method, as far as I know, so it's whichever you believe makes the most sense to read.

Centering Dialogs:
Similarily you can center Dialogs or even Windows on any component. This is useful for modal dialogs that need to be closed before the user can continue working in the main application.

   //create a new modal dialog
   JDialog dlg = new JDialog(mainFrame, true);
   
   //simply dispose of the dialog
   dlg.setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE);
   
   //set the size prior to setting location
   dlg.setSize(300, 200);
   
   //center the dialog in the application window
   dlg.setLocationRelativeTo(mainFrame);
   
   //display the modal dialog
   dlg.setVisible(true);

So as you can see it's quite simple to center windows and dialogs in Java. You can also center a Dialog or Window to any Component using the same setLocationRelativeTo function thus when setVisible(true); is called the Window will appear centered over that component on screen.

It's Been a while!

It's been a while since I have had time to post, and pretty much a general lack of interesting things to post. But I just thought I would post something and try to get back into the blogsphere, even though I was never really in it from the beginning.

I am still working hard on Java Game Programming. My most recent project is a Game Editor Tool for the purpose of creating games without needing to be a programmer. Hopefully I can get some screens out soon.

I also have many ideas for new posts here, they may be a bit longer than pervious ones and contain more complex code. I've wanted to handle a couple topics that are needed for creating games for a long time now. Some upcoming posts will include:

• Abstract Collision Detection: Using Visitor Pattern
• Particle Systems: Using the Flyweight Pattern

Eventually I hope to make a post on how to bring all the snippets I have posted together to make games. Any feedback as to your specific needs will help tremendously!

Thanks for reading!