Screenshot of IE running integrated with Processing and other AWT components.

For a while I’ve been wondering if it couldn’t be useful to be able to render proper HTML from inside Processing. While Processing is excellent for realtime graphics, the typographic support is a little basic when faced with the task of designing a more complex layout. Rather than write a new library, why not just use a fast HTML engine?

While there are quite a few HTML rendering engines out there, not all are very complete or indeed very fast. This might be one of the cases where using native code makes sense. Both Internet Explorer and Mozilla offer ways of embedding their rendering engines through native bindings, and after a little googling I was able to find JDIC - the JDesktop Integration Components project.

JDIC aims to bring Java applications closer to feeling like “real” desktop apps. I’m not sure if that’s a battle I would have taken on myself, but in any case they have exactly what I needed: A simplified web browser ready for embedding, able to use either IE or Mozilla as engines. A little coding later and I had a hybrid Processing / AWT application running a web browser. It will even support Flash and Java content, provided that you’ve installed the proper plugins.

The WebBrowser.setContent() function is perfect for loading your own machine-generated content, and events can be captured and processed appropriately. It would even be possible to have a hybrid application, with part of the interface being straight Processing and the rest AWT. I’m keen to try using this to create more complex on-screen layouts. HTML and CSS will always look much better than anything one could create using Swing.

See Flickr for some screenshots.

To compile the following example, download the JDIC binary distribution for your platform. Create a “code” subfolder in your sketch folder. Copy all the native files (jdic.jar, .dll files etc) into the code folder, and Processing should understand how to load the appropriate code. I’ve only tested it on PC, and it was fairly painless.

// JDICsample.pde
// Marius Watz - http://workshop.evolutionzone.com

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

import java.net.URL;
import java.net.MalformedURLException;
import org.jdesktop.jdic.browser.*;

aBrowser browser;
long last;

// Set to true to demonstrate setContent instead of
// loading URLs.
boolean doRandomHTML=true;
String rndWords[];
int rndWordNum=0;

void setup() {
  size(200,200);
  browser=new aBrowser();
  browser.initPanel(1024,768);
  if(!doRandomHTML) browser.setURL("http://processing.org/");
  else initRandomText();
}

////////////////////////////////////////////
// Random HTML

void draw() {
  if(doRandomHTML && (millis()-last>3000)) {
    String c1,c2,str;
    c1=colorToHex(random(200,255),random(150,200),0);
    c2=colorToHex(random(50,100),random(50,100),0);

    println(c1+" "+c2);
    str=""+
      "";
    str+="
";
    for(int i=0; i< 30; i++) str+="

"+getRandLine()+"

";
    str+="

";

    browser.setContent(str);
    last=millis();
  }
}

String getRandLine() {
  String s="";

  int num=(int)random(30,50);
  for(int i=0; i< num; i++) s+=rndWords[(int)random(rndWordNum)]+" ";

  return s;
}

void initRandomText() {
  String lorem="Lorem ipsum dolor sit amet, pellentesque dolor"+
   "a vestibulum, hendrerit augue lectus in libero dictumst et,"+
   "condimentum gravida vestibulum litora semper. Lectus donec "+
   "neque nunc cras molestie est, vel et. Pede inventore vestibulum "+
   "justo est non nulla, lacus reiciendis rutrum phasellus nunc leo"+
   "natoque. Urna ac id justo luctus lorem, ante viverra nam nam "+
   "accusamus, aliquam metus vitae etiam sollicitudin erat ligula. "+
   "Sodales tortor amet felis, sit risus mus vel sodales, cursus "+
   "auctor, augue semper nam, diam eget. Vulputate ac viverra ante "+
   "ipsum tristique ullamcorper, lacus nostra pharetra libero provident.";

  rndWords=splitTokens(lorem);
  rndWordNum=rndWords.length;
}

public static String colorToHex(float r,float g,float b) {
  String s="";
  if(r<16) s+="0"+Integer.toHexString((int)r);
  else s+=Integer.toHexString((int)r);
  if(g<16) s+="0"+Integer.toHexString((int)g);
  else s+=Integer.toHexString((int)g);
  if(b<16) s+="0"+Integer.toHexString((int)b);
  else s+=Integer.toHexString((int)b);
  s=s.toUpperCase();
  return s;
}

////////////////////////////////////////////
// Convenience class for dealing with
// the embedded browser engine.

public class aBrowser {
  Frame frame;
  Panel panel;
  WebBrowser webBrowser;

  public aBrowser() {
    // Set engine to IE
    BrowserEngineManager mng=BrowserEngineManager.instance();
    mng.setActiveEngine(BrowserEngineManager.IE);
    webBrowser = new WebBrowser();
  }

  public void initPanel(int w,int h) {
    frame=new Frame("JIDCsample.pde");
    frame.setLocation(50,50);
    frame.setLayout(new BorderLayout());
    //frame.setUndecorated(true);

    //	 Handle window close requests
    frame.addWindowListener(new WindowAdapter( ) {
      public void windowClosing(WindowEvent e) {System.exit(0);}
    });

    panel = new Panel();
    panel.setLayout(new BorderLayout());
    panel.setPreferredSize(new Dimension(w, h));
    panel.add(webBrowser, BorderLayout.CENTER);
    frame.add(panel,BorderLayout.CENTER);

    Label status=new Label(
      "JDICsample.pde - embedded web browser.");
    status.setBackground(new Color(100,100,100));
    status.setForeground(new Color(255,255,255));
    status.setFont(new Font("Arial",Font.PLAIN,15));
    status.setSize(600, 20);

    frame.add(status,BorderLayout.SOUTH);
    frame.pack();
    frame.setVisible(true);
  }

  public void setContent(String htmlContent) {
    webBrowser.setContent(htmlContent);
  }

  public void setURL(String url) {
    try {
      webBrowser.setURL(new URL(url));
      // Print out debug messages in the command line.
      webBrowser.setDebug(false);
    }
    catch (MalformedURLException e) {
      System.out.println(e.getMessage());
      return;
    }
  }
}