The IAppli PicoBrowser

Henry Minsky (hqm@ai.mit.edu)

iMode Top : PicoBrowser Notes


The PicoBrowser is a tiny HTML browser and web server, which fits into 7.5 kbytes of Java, and runs on the NTT DoCoMo IAppli platform.

Note: I am working on a pure MIDP-compliant version of the Picobrowser, which will be free of many of the limitation imposed by the IAppli 10kbyte code-size limit. For more info, send me a note.

Why?

Q: Doesn't the phone already have a good browser in firmware?

A: Yes, but there's no way to talk to it from your Java applet! At least there doesn't appear to be from the published NTT platform specs. There is also no way to extend the features of the browser to take advantage of the phone's programmable capabilities.

The motivation for this is that the 503i phones seem to have no integration between their microbrowser and their Java engine. It is useful in many cases to be able to output HTML from your applet to present small documents or other data to users. Embedded hyperlinks in the document can be followed to retrieve other documents from the web, the JAR file, or as calls to tiny "servlets" in the application itself. And new custom features (such as the SMAP tag shown below) can be easily added which take advantage of the device's programmable UI capabilities.

The PicoBrowser currently eats up 7321 bytes its jar file (after class optimization via JOpt), when I remove some of the bells and whistles that are in there now for testing proof-of-concept, such as the Panel UI for entering new URLs. That only leaves 3000 bytes for the actual application, unfortunately. But for an application which needs to present small documents which the user browses and clicks in, this might be a very quick and easy way to get it up and running. And a little creative design factoring and optimization could probably reimplement the basic browser in under 5 kbytes, I believe.

Another approach

Another way to get this kind of dynamic page layout functionality would be to preparse the HTML on an external server, and send back a byte-coded PostScript or Flash like stream to lay out the text and graphics. Call this the "Postscript" approach. That interpreter would probably be very small, like under 1kbyte. So we can get nice page layout, but we still have the important ability to write custom Java GUI in our app, for responsive and customizable local interaction. It all goes back to wanting tight integration between the applet and a browser.

What I really want

I want the ability to do local I/O from the phone to peripherals, like a serial or IR port. Given that ability, you must have the ability to do some local processing of the data in Java, even if the bulk of your app runs on an external web server.

A Modest Proposal: Put a Web Server in every Embedded Device

Almost all embedded network devices will have some kind of browser in them. Why not a web server as well? Not necessarily to serve pages to the outside world (although that might be very useful), so much as to serve pages to the local browser. That way, we leverage the nice browser interface, and allow a richer set of applications to be written for the phone, without making the developer write a hardcoded window-system style UI each time.

For an opinion about why browser interfaces are good, see my flame at ua.com (written in 1996!).

Hopefully, in the future, NTT or Sun will make a standard interface between the CLDC/MIDP spec and a web browser running in the same device. It shouldn't be anything more complex than a special Connector address like "http://localhost" or "localhost://". If they did that, then it would be much easier and more efficient to write servlet type applications that use the existing microbrowser in a phone, instead of building the whole UI by hand each time.

Documentation

Screenshots

<center>Welcome to <br>

<b>PicoBrowser</b></center>
A very small browser and servlet engine!
<br>
° <a href="page2.html">Page 2</a><br>
° <a href="page3.html">Page 3</a><br>
° <a href="local://servlet?n2=0&n=1">A Servlet</a><br>
° <a href="http://202.221.249.3/">Tokyo-Q</a><br>
<img src="p32.gif"><br>
(C) Beartronics Inc. 2001
<br>
Henry Minsky
<br>
beartronics.weblogger.com

Homepage

<b>This is Page 2</b>
Colored Text:<br>
<font color="#ff0000"></font><br>
<img src="resource:///pics/j1.gif"><font color="#00ff00">Green TEXT</font><br>
<img src="resource:///pics/j2.gif"><font color="#0000ff">Blue TEXT</font><br>
<img src="resource:///pics/j3.gif"><font color="#ff00ff">Purple TEXT</font><p>
Supports inline images
and <a href="index.html">hyperlinks</a>
<br>Some more text and other things:
GHI<br>
XXX YYY<br>
BOO BEAR<br>
Spoo Bear<br>
JKLMN<br>

<img src="resource:///pics/j0.gif">
<img src="resource:///pics/j1.gif">
<br>
<img src="resource:///pics/j2.gif">
<img src="resource:///pics/j3.gif">
<img src="resource:///pics/j4.gif">
<img src="resource:///pics/j5.gif">
<img src="resource:///pics/j6.gif">
<img src="resource:///pics/j7.gif">
<img src="resource:///pics/j8.gif">
<img src="resource:///pics/j9.gif">
<img src="resource:///pics/j10.gif">
<img src="resource:///pics/j11.gif">
<img src="resource:///pics/j12.gif">
Say hello to Pookie Bear!
<br>
Another name for <a href="resource:///index.html">MIDP</a> applications is MIDlets.<p>
Like applets, <a href="resource:///index.html">MIDlets</a> are controlled by the software that runs them.<br>
 In the case of an applet, the underlying software is a browser or the appletviewer tool.<p>
 In the case of a MIDlet, the underlying software is the cell phone or two-way pager device implementation that supports the CLDC and MIDP.

<a href="resource:///index.html">Home</a>

Page 2 (shows FONT color, inline images, hyperlinks)

<center>PicoBrowser
<br>hqm@ai.mit.edu
<p>
<img src="p32.gif"><br>
</center>
Say Hello to<br>
Pookie Bear.
<p>
Pookie is the official mascot of the
PicoBrowser application.
<br>
<a href="index.html">Home</a>



Page 3 (shows inline images)

    String handleServlet(String url) {
        if (url.startsWith("servlet")) {
            Hashtable params = getQueryParams(url);
            int n = Integer.parseInt((String)params.get("n"));
            int n2 = Integer.parseInt((String)params.get("n2"));
            return "This is a servlet running on the phone!<br>n = " + n
                + "<br><a href=\"local://servlet?n2="+n+"&n="+(n+n2)+"\">Fibonacci</a>"
                + "<p><a href=\"resource:///index.html\"><img src=\"resource:///p32.gif\">"
                + "Home</a>";
        } else {
            return "Undefined servlet "+url;
        }
    }

Servlet which computes Fibonacci

Viewing a real iMode site via HTTP

The Panel UI for entering a URL. Use the '2' key to bring up this dialog.

This is a custom "scrolling map overlay" html widget that is implemented in the PicoBrowser. The SMAP tag displays this special type of graphic.

<b>Dynamic Maplet</b>
<smap src="server:maps/map.gif">
<font color="#ff0000"></font><br>
<img src="resource:///pics/j1.gif"><font color="#00ff00">Green TEXT</font><br>
<img src="resource:///pics/j2.gif"><font color="#0000ff">Blue TEXT</font><br>
<img src="resource:///pics/j1.gif"><font color="#ff00ff">Purple TEXT</font><br>
This is a scrollable map  which is overlaid with HTML content.
Use the 4,5,6 and 8 keys to scroll the map.

The SMAP tag will retrieve an image from the server, like a normal IMG tag, but places it "under" the displayed text on the page, and makes it independently scrollabe.

So for example, a map can be displayed and on top of it, HTML text and graphics information can be displayed, such as a map legend. The background map image can be scrolled independently of the HTML text using the 4,5,6 and 8 keys, and the display of the text and map can be toggled using the '7' key.