The MView applet

MView is an applet bundled with Montage that allows you to create Interactive Illustrations.

MView intreprets Montage Zones as links that determine the behavior of the illustration.

What is an Interactive Illustration?

An Interactive Illustration is a set of pictures with links between them or to other web pages.

There are many ways to use Interactive Illustrations. You can see some examples by starting any Java enabled browser and loading index.html from Montage's demos/MView directory.

Before you can run any of these demos you'll probably have to install the MView applet and Montage's API classes in the directory for each of the demos. You can do this by typing GetMView at your operating system's command prompt in each demo's directory.
The Map demo allows you to zoom in anywhere on the map by just clicking on it. You can zoom out by clicking with the CONTROL key held down.

The Presentation demo allows you to step through the slides one by one. Just click anywhere over it to see the next slide. You can go back to the previous one with a Control-click.

The Popup Captions demo shows an image of Montage's Main Window. When you click over any of its elements a caption pops up with the element's name and a short description.

The Shakespeare Plays demo (available at our Web site), shows you a hierarchical menu where you can select a play, then an act, then a scene and your browser will take you to a web page with the scene you selected.


How do they work?

An Interactive Illustration works as a stack of pictures placed on top of each other; what you see is the top of the stack. It starts with just one picture, called the first picture, and you add or remove pictures as you interact with it.

Areas of a picture have links to other pictures. When you click on an area, you place on top of the stack a copy of the picture that is linked to it. Instead of adding a picture you can remove the topmost one by clicking on it with the CONTROL key held down. The picture at the bottom of the stack, the first picture, can't be removed.

In the Map demo, the map of North America is the first picture. If you "zoom in" by clicking on Mexico, a picture with a more detailed map of Mexico is placed on top of it. The stack now contains two pictures which are, from bottom to top, a map of North America and a map of Mexico. With a Control-click you discard the map of Mexico and "zoom out" to the map of North America. There, you can "zoom in" to another country by clicking on it.

In the Presentation demo, the title slide is the first picture and each slide is linked to the next one: the first is linked to the second, the second to the third, the third to the fourth, and so on. At any point during the presentation the slides you already saw are stacked with the first one at the bottom and the last one on top. A mouse click places the next slide on top of the stack. A Control-click discards the top picture and you go back to the previous slide.

In the Popup Captions demo, the image of Montage's Main Window is the first picture and each element is linked to a caption with its name on it. These links are marked as pop up and they have a slightly different behavior: the caption, when placed on top of the stack, has a transparent background and the image can be seen behind it. And, although it has another picture on top of it, you can still click on the image to see another caption.

In the Shakespeare Plays demo, the first picture is a list of plays by William Shakespeare. Each play has a pop up link to a list of acts, and each act has a pop up link to a list of scenes. Each scene has a link, marked as web, that associates it with a web page instead of a picture. Clicking on a web link makes the browser display the corresponding web page, in this case a scene from a play.


MView Reference

MView is the Java applet that displays interactive illustrations inside a web page and lets the viewer interact with them.

Display an interactive illustration inside a web Page

To display an interactive illustration inside a web Page, insert this HTML code into the .html file at the line where you want the illustration to be:
<APPLET CODE=MView.class WIDTH=width HEIGHT=height>
<PARAM NAME=picture VALUE=picture.teq>
<APPLET>
Replacing picture.teq, width and height with the name, width and height of the first picture in your illustration. If width or height are different from the width or height of the picture, then the picture will automatically be scaled to the new dimensions.

You can use the GenHtml command to create a file with the HTML code you need to place your illustration in a web page. To use it you just need to type, at you operating system's command prompt, GenHtml followed by the name of the .html file you want to create and the name of the .teq file which will be the first picture in the illustration.

The directory in the web server where you place the .html file should also contain the .teq file for each picture, all the .gif and .jpg images used in the pictures, and all the .class files of the Painters used in the pictures. You should also have the MView.class file and a com directory with all of Montage's API class files in their respective subdirectories.

The directory where you used Montage to save the pictures will automatically have all the .teq, .gif, .jpg and Painter .class files. You can type GetMView at your operating system's command prompt to fetch a copy of MView.class and to create a com directory that contains all of Montage's API .class files in their respective subdirectories.

By default MView does not prefetch any picture, even if you used prefetched links. To enable prefetching you must add a prefetch parameter with value on So the HTML code would be:

<APPLET CODE=MView.class WIDTH=width HEIGHT=height>
<PARAM NAME=picture VALUE=picture.teq>
<PARAM NAME=prefetch VALUE=on>
<APPLET>
You can also specify to MView that you want to use a specific picture as the background for all the other pictures by using the background parameter:
<APPLET CODE=MView.class WIDTH=width HEIGHT=height>
<PARAM NAME=picture VALUE=picture.teq>
<PARAM NAME=background VALUE=background.teq>
<APPLET>

MView's interaction behavior

MView interprets Montage Zone's as links. If no flag is turned on then the Zone is a standard link.

If the C flag is turned on then the Zone is a prefetched link.

If the C flag is turned off and the B flag is turned on then the Zone is a Web link.

If both the C and the B flags are turned off and the A flag is turned on then the Zone is a popup link.

When MView starts it loads and displays the picture specified in the picture parameter of the HTML code. Next, if the picture contains a prefetched link and the HTML code indicates that prefetching is turned on, MView will fetch the corresponding picture. There should be at most one prefetched link in each picture, if there are many, MView will only prefetch one of them.

When the mouse passes over a link, MView displays the link's type and target in the browser's lower left corner. When the user clicks on a link, MView first discards all the pictures overlaid on top of the one containing the selected link. Then its behavior depends on the type of link:

If the link is a standard link or a prefetched link, MView interprets the link target as the name of a Montage picture, fetches and places it on top of the previous picture. The previous picture is no longer visible and its links are not active.

If the link is a popup link, MView interprets the link target as the name of a Montage picture, fetches it and places it on top of the previous picture. The previous picture is visible under the overlay and its links are active unless they are covered by links in the new picture.

If the link is a web link, MView interprets the link target as an URL and instructs the browser to display the corresponding web page.


Copyright © Ludens, SA de CV 1996, 1997 All Rights Reserved.
Sun, Java, and Solaris are Trademarks of Sun Microsystems.
Windows 95 and Windows NT are Trademarks of Microsoft.