Panorado 1.2.7 Applet

Panorado is a simple Java applet for fast viewing of panoramic images within HTML documents.

Unlike the Panorado 3.0 viewer it is not a standoalone application.

Panorado is a Java applet which enables you to view panoramic images within a HTML document. This applies to web based documents from remote servers as well as documents from local storage.

A variety of panoramic viewers are currently being offered - mostly on the Internet.
Unlike some other viewers, Panorado is...

• platform-independent and executable on all browsers supporting Java 1.1 .
• extremely simple and small (about 12 kB).
• fast when rendering images. No spherical distortion or anti-aliasing is performed which would be time-consuming in Java. This allows significantly smoother movements on larger pictures.
• scalable at runtime.
• designed for displaying JPEG files which is the usual format for photographic images on the Internet. It doesn't require any further parameter files (e.g. IVR) or splitting of image files (like Quicktime).
• suited for any image file on any accessible folder of your web server or local storage media.
• prepared for displaying an optional compass scale.
• customizable concerning its appearance while loading images.

Like most other viewers, Panorado supports...

• panning the field of view using keyboard or mouse input (click & drag). Panorado supports 2 different modes of mouse interaction.
• zooming (in & out) the field of view using keyboard or mouse input.
• passing parameters from the HTML environment.
• methods for controlling the applet from the HTML environment ("Dynamic HTML").

Fundamentally, a panoramic viewer can be implemented as an ActiveX control, a browser plugin or a Java applet. Each of these approaches has it's specific pros and cons.

• ActiveX control or browser plugin:
  Relatively easy to integrate with browser environments. High performance.
  platform- or browser-specific. Installation can be expensive. Not executable if security settings are set restrictively (which is normaly a good idea).
• Java applet:
  Very easy to integrate with browser environments. Relatively safe by means of Java VM restrictions (executes in a so-called sandbox). Fast development of simple applets.
  Java VM of appropriate version number has eventually to be installed. Relatively low performance. Problems when requiring large chunks of memory.

OK, this is a Java applet.

For performance reasons, graphic manipulations were implemented using functions from standard libraries instead of using direct pixel manipulations. This means: no spherical distortion, no anti-aliasing when scaling, resulting in significantly smoother movements when panning the image.

Security: The Java VM's sandbox principle restricts file access to reading files from the originating server (or the local file system when executing locally). Writing to files is not allowed. Thus even an applet from an unknown source can be safely executed (if the Java VM is set up accordingly).

As a picture source, you can use standard web picture formats - mostly JPEG. Panorado doesn't support non-web-standard formats (like Quicktime) - which are normally more difficult to create.

Test results: The Panorado version presented here has been tested on Microsoft Internet Explorer 6.0, Netscape 7.0, and Mozilla Firefox 1.0, using Java 1.1, 1.3, 1.4, and 1.5 runtime environments.
The Netscape browser was not able to interpret the applet's height=100% attribute correctly.
Furthermore, the Sun Java-Plugin v. 1.4.1 made it virtually impossible to track the image file download - on any browser. On the other hand, MSIE with it's built-in Java VM v. 1.1.4 behaved as expected (on platforms prior to Windows XP).

I cannot guarantee that the software works correctly under all circumstances. I am planning to extend the applet "on demand".

This is a screenshot of a HTML page with an integrated Panorado viewer applet.
The control symbols beneath the image are not part of the applet itself but independent HTML elements whose event handling routines are designed to call applet methods. Thus the visual appearance of these elements can be anything that HTML allows without any restrictions by Panorado!

You'll find some examples of panoramic pictures in my little Panorama Gallery.

The HTML code around the applet looks like this:
 

<applet name="Viewer" archive="Panorado.jar"  code="Panorado.class" width=100% height=100%>   <param name="img" value="xyz.jpg">   ...more parameters... </applet>

This code can virtually be placed anywhere within the <body> section of the HTML document. If you do it smart (e.g. defining a table element of 100% size) the applet is scalable by the user on runtime!
(height=100% does not work on Netscape or Firefox browsers. You should use absolute values like height=400px for these browsers.)
 

The applet element's attributes are listed below:
 

name	This name can be used to dynamically access the applet object (optional).
archive	Name of the archive file which contains the applet code.
code	Name of the applet class.
codebase	The applet's folder if it is not in the same folder as the HTML document (optional).
width	The applet's width (in HTML-style size units).
height	The applet's height (in HTML-style size units).

 

The applet can be passed the parameters listed below using the attribute syntax
<param name="ParamName" value="ParamValue"> :
 

img	Image source file path relative to the calling document's path (JPEG, GIF oder PNG). The Java VM insists on opening an image file only if it is in the same folder as the applet or in a subfolder - probably for security reasons. Mandatory!
startpanspeed	Initial horizontal speed, in degrees/second. > 0 means "clockwise". Default: -3.
starttiltspeed	Initial vertical speed, in degrees/second. > 0 means "up". Default: 0
horzangle	Total width of the source image, in degrees. 0 .. 360. Default: 360 (360: seamless). The height angle is calculated based on this value and the image aspect.
startpan	Initial horizontal angle (in degrees). 0 .. 360. Default: like horzangle.
starttilt	Initial vertical angle (in degrees). -90 .. +90. Default: 0
minscale	Smallest zoom scale allowed (1.0 = 100%). 0.125 .. 8.0. Default: 0.125
maxscale	Largest zoom scale allowed (1.0 = 100%). 0.125 .. 8.0. Default: 8.0
startscale	Initial zoom scale (1.0 = 100%). minscale..maxscale. Default: 1.0
compass	Show compass scale at the bottom margin. yes | no. Default: no
compassnorth	Compass north reference, relative to the (left) margin of the source image. 0 ..360. Default: 0
mousemodes	Click & drag moves viewport (pan) or image (grab). If 2 modes are available Panorado starts with the first one. Pressing the spacebar toggles between modes. 'pan grab', 'grab pan', 'pan', or 'grab'. Default: 'pan grab'
splashimg	Splash image source file path. See 'img' parameter for restrictions. Optional.
splashtext	'Loading' text (in the image + in the window's status bar). '$' will be replaced by percent value. Default: '$% loaded...'
splashtextposition	Position (left, top) of 'Loading' text (pixels). Default: 10, 20
splashtextfont	Font name, font size (point) of 'Loading' text, e. g. 'SansSerif, 15'. Font names: SansSerif, Serif, Monospaced, etc. Default: System font
splashtextcolor	'Loading' text color. Default: '#ffffff' (white)

 

These applet methods are provided for DHTML calls:
 

void pan(double pan, double tilt) void panTo(double pan, double tilt) void zoom(double scale) void zoomTo(double scale) void moveTo(double pan, double tilt, double scale) void setSpeed(double panSpeed, double tiltSpeed) void reset() void info()

The names of these methods are self-explaining. You can assign JavaScript code which calls these methods to onclick events. The Java applet should be provided a name attribute to make it programmatically accessible. Examples:
 

<button onclick="Viewer.pan(0, -5);">Down</button>   <a href="#" onclick="Viewer.setSpeed(2, 0);">Turn Right</a>

 

Ok, that was a lot of technical stuff. If you still like the idea to create your own page with panoramas, you'll have to perform the following steps:

• Take pictures.
  This is typically a sequence of about 12 overlapping pictures which are taken with a digital camera. I am using a Canon Digital Ixus camera. I recommend to use a tripod, but in some situations you can do without one. There is a lot of practical advice on the websites listed at the bottom of this page. Anyway, I recommend to save the original pictures before performing the next steps.
• Assemble single pictures to form a panoramic picture ("Stitching").
  There is special stitching software; I personally use MGI's Photovista Panorama 2.02 and PTGui 4.1. You'll find more details about software on some of the websites listed on the Links page.
• Retouch the panoramic picture.
  Normally it is necessary to retouch some minor errors that have passed the stitching process with some graphics software. You may also want to change some global parameters like gamma correction, brightness, contrast, color distribution, and size. Save the result as a JPEG image; Make a reasonable compromise between picture quality and file size.
• Download the Panorado applet.
  Simply click here and save the little Java archive (Panorado.jar) to your destination folder. The applet is license-free for any non-commercial use.
• Write the HTML frame.
  You can insert the Panorado viewer into any HTML document.
  You can decide to place the viewer applet
  - in a scalable popup window which also contains some control buttons (like in my own Gallery) or
  - in the middle of a document page (normally in a smaller rectangle).
  Check the preceding section for syntactical details.
• Distribute all components.
  Copy the HTML document, the image file, and the Panorado applet to their appropriate folder(s). Test them, upload them to your web server, test again. Your're done now!

First, Panorado is a free applet to be used on private websites.
Second, it is intended to be a demo for development services which I can offer in the commercial sector.

If you are interested in any commercial use of this product, in customization or any kind of cooperation, please don't hesitate to contact me!