We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpIntegration › Displaying several websites in a sketch
Pages: 1 2 
Displaying several websites in a sketch (Read 7285 times)
Displaying several websites in a sketch
Sep 4th, 2008, 9:05pm
 
Hello all,

I have been searching for a while but could not find the answers to my question.

I have a system that recognizes tags via a webcam and I am receiving, in Processing, the location, id and angle of the tags. Now for each tag I want to be able to grab a page from the web and show that inside my sketch.
I have found in the examples that it is possible to 'catch' HTML and print this in the output window (http://www.processing.org/learning/libraries/httpclient.html). But I cannot find a way to convert the caught HTML back to visual content again and show that in the sketch display window.

I have used Processing and reacTIVision before to create this: http://www.paulakassenaar.nl/group_exisono_video.html but I am not so experienced.

Any ideas?
Re: Displaying several websites in a sketch
Reply #1 - Sep 4th, 2008, 9:50pm
 
You need a Web browser component...
Java has a primitive one, a complete one might be quite big, depending on completeness (should it interpret CSS and JavaScript, for example?).
Far from obvious in any case.
Re: Displaying several websites in a sketch
Reply #2 - Sep 4th, 2008, 11:34pm
 
Thanks for the answer. Too bad it's complicated. For now I could also suffice by interpreting the webpage as a PDF (for instance using this: http://www.rustyparts.com/pdf.php), converting it to SVG (no idea how) and then displaying the SVG with the Candy library in Processing.

Do you think that that would make my work easier?

And is it überhaupt possible to use the PHP script from rustyparts in Processing?
Re: Displaying several websites in a sketch
Reply #3 - Sep 4th, 2008, 11:37pm
 
sorry PhiLho, I was a bit to quick there. I found this post on the forum:

[I've just posted on Code & Form about how to embed a web browser inside a Processing sketch, using the JDesktop Integration Components library (JDIC).

With JDIC you can embed Internet Explorer or Mozilla inside Java, giving you a full-fledged browser engine for rendering and browsing web pages. Content can be retrieved from a web server or fed into the browser programmatically. This gives a powerful way to present detailed visual information that would be hard to code in Processing or the Java AWT / Swing libraries.

I've posted screenshots on Flickr that show IE running in a AWT Frame along with a Processing sketch (top). ]

So maybe that is worth giving a try first before I bother you again with questions Smiley

Or is this the one you were talking about? The one that is hard to implement?
Re: Displaying several websites in a sketch
Reply #4 - Sep 5th, 2008, 9:54am
 
Ok, I have tried to implement the web browser described here: http://workshop.evolutionzone.com/2007/08/30/jdic-embedding-a-web-browser-in-java/ but I am just not experienced enough to get it to work.

Any suggestions?
Re: Displaying several websites in a sketch
Reply #5 - Sep 5th, 2008, 12:38pm
 
I was thinking of something like that, without precise idea in mind... Smiley
The last link seems promising (although probably works only on Windows, I suppose).
You don't tell what fails to work. Of course, you are aware that the displayed code uses typographic double quotes, that you have to replace with plain double quotes.
   println(c1+” “+c2);
must become
   println(c1+" "+c2);
for example.
Re: Displaying several websites in a sketch
Reply #6 - Sep 5th, 2008, 2:19pm
 
What happened was that I got scared when I needed to alter CLASSPATH stuff, I really don't have a programmers background.
Today I gave it another try and now I've got it. Thanks also for the heads up on the quotes, typical newby thing to not notice that.
Ok, I've got it running to some extend, but I am facing a syntax error that I just don't get. Well actually, I don't understand the code that's causing it, so understanding the error would be a bit weird then...

Whow, I just noticed that the entire code is altered... a normal & becomes & ... I'll first fix that.
Re: Displaying several websites in a sketch
Reply #7 - Sep 5th, 2008, 2:53pm
 
Ok, I am getting further and further... When I run the sample program two sketch windows open, one for the sketch itself I guess, and one that is created by the sketch in this line:
 public void initPanel(int w,int h) {
   frame=new Frame("JIDCsample.pde");
The sketch's basic window is empty, the new JIDCsample.pde window is a horizontal rectangle which says 'JDICsample.pde - embedded web browser' and indeed, when I scale that window bigger it displays the Processing website!

But I am not there yet. I would like the browser window to be really _in_ the sketch window, because I would like to load multiple at the same time, spreading them over the sketch's field. Load multiple at the same time will also be a future hurdle. And the size of the browser window should have a default of 400x300 or something like that.

Do you think that this is all possible?

Herewith I also post my current code. Anything that I have changed/cleaned I have commented, using my name.

// 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=false;
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);

//paula. cleaned up the following lines of the draw  
   str="<HTML><HEAD>"+"";
   str+="<DIV style=WIDTH: 760px>";
   for(int i=0; i<30; i++) {str+=""+getRandLine()+"";}
   str+="</DIV>";

   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.setSize(new Dimension(w, h));
//paula. the above method used to be panel.setPreferredSize,
//       but that was not recognized as a valid method    
   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;
   }
 }
}
Re: Displaying several websites in a sketch
Reply #8 - Sep 6th, 2008, 9:10pm
 
Hi Paula, I wrote the original JDIC code you've been trying to hack.

You can use my sample code to open multiple browser windows by creating different instances of the aBrowser class. But if you'd rather integrate the browsers into the main sketch window you'll have to use something like the code below.

In any case you're wandering into territory that requires more detailed knowledge of AWT, layout managers and Java GUI stuff. A normal Processing sketch is just a single component added to a AWT frame.

Code:

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;

void setup() {
size(800,600);
frame.setLayout(new GridLayout(2,2));

browser=new aBrowser[4];
for(int i=0; i<4; i++) {
browser[i]=new aBrowser();
browser[i].initPanel(400,300);

if(random(100)>50) browser[i].setURL("http://processing.org/");
else browser[i].setURL("http://unlekker.net/bio/");
frame.add(browser[i].panel);
}
}

void draw() {

}


public class aBrowser {
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) {
panel = new Panel();
panel.setLayout(new BorderLayout());
panel.setPreferredSize(new Dimension(w, h));
panel.add(webBrowser, BorderLayout.CENTER);
}

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

public void setURL(String url) {
try {
webBrowser.setURL(new URL(url));
webBrowser.setDebug(false);
}
catch (MalformedURLException e) {
System.out.println(e.getMessage());
return;
}
}
}




Re: Displaying several websites in a sketch
Reply #9 - Sep 6th, 2008, 9:53pm
 
I've just posted a blog post of the updated code, with a ZIP archive of the files required to run it: Multiple JDIC browsers in Processing sketch.
Re: Displaying several websites in a sketch
Reply #10 - Sep 6th, 2008, 11:47pm
 
Hello Watz,
great! thank you for your work and thinking along!
I am not so experienced, but I am learning while I work, reading literature on the matter.
I have tried out this new code, but I get a totally grey window with a flint of white at the top left corner.
It seems that the browsers load, but they just do not display. My guess is that it mixes up somewhere in the layouting.

I am discovering that you use the GridLayout for the frame (which seems logical) and the BorderLayout for the panel (which I do not completely understand since you're placing only one element in the panel, no?). In trying to learn more about the layouts I call upon println(frame) or println(panel). This returns some values (e.g.: java.awt.Panel[panel0,0,0,400x300,invalid,layout=java.awt.BorderLayout]) which might make sense to me if I would know what each value stands for. Where can I find an example of what should be returned when you print these elements?

One strange thing: in your last code and in this new code as well you use panel.setPreferredSize. When I run the program I get an error saying that this method could not be found in java.awt.panel. So I just went ahead and replaced it with panel.setSize. Still, this remains an itch for me: why doesn't your inital method work with me? It is a method inherited from Component, so I do not understand why it doesn't work...
Re: Displaying several websites in a sketch
Reply #11 - Sep 8th, 2008, 3:17pm
 
I used GridLayout for the frame to place the 2x2 grid of browser components, the BorderLayout for the panel is now redundant but was used in the original to add a status line. You might want to take a look at this tutorial on Layout Management from SUN.

I'm not sure why you get an error for setPreferredSize, but it's part of the Swing GUI library. Try replacing the "initPanel" method with the following:

Code:
public void initPanel(int w,int h) {
panel = new Panel();
panel.setLayout(new BorderLayout());
panel.setSize(w,h);
webBrowser.setSize(w, h);
panel.add(webBrowser, BorderLayout.CENTER);
}


It produces the same result when I run it, but avoids setPreferredSize. I hope that takes care of your problem.
Re: Displaying several websites in a sketch
Reply #12 - Sep 11th, 2008, 9:40am
 
Hi Watz,
thanks again for your help. I have taken some major steps since your last advice. Your method for initPanel worked well (the only thing I was missing was setting the webBrowser's size... *sigh*), but the program became terribly slow and crashed everytime I ran it. So I decided to dive a little deeper and start developing it in 'pure' java, using NetBeans. I now have a piece of software that uses Reactivision to recognize a tag and uses an altered version of your software to display a webbrowser at the location of the tag; pretty cool!
I am working on the multiple tags-multiple browsers thing, but that will be a hassle still. Nevertheless I am so excited about it that I keep digging in and hope that I will have it 'finished' soon.
Thanks again for your help!
Paula
Re: Displaying several websites in a sketch
Reply #13 - Sep 11th, 2008, 7:42pm
 
Building all of this in Java seems quite painful to me… Do you actually need real user interaction with those web sites or do you just want to DISPLAY the content at each possible URL? If so, I would suggest taking the much more painless route and use an external tool for capturing/rendering the website and simply display the resulting image in your sketch.

In any other case: on OS X I would rather build a simple Cocoa app with an embedded webview for the browser and your applet running side by side in a second webview. Then, your sketch just needs to tell the browser window to load the URL. And on Windows, erm… I would probably go hang myself. Wink

Edit: if your sketch is able to run in a browser, there is a second easy way: just use an iframe on the same HTML page and some javascript (called from your sketch) to load your web content into it.

Re: Displaying several websites in a sketch
Reply #14 - Jan 28th, 2009, 11:43pm
 
Hello.
I need just one browser, and it must be in the processing window (not in a new one because I want to manipulate it with processing code). I've been trying to replace the GridLayout but nothing works yet. Does some of you people have a clue?

Thanks!
Pages: 1 2