Software > FishEye Table
Description | Pros and Cons | Applications | Details | Usage Hints | References | Acknowledgments  Description |
A fish eye lens is used in photography to take pictures over a very wide field of view. A lens of this type has a large curvature that gives it a wider than normal angle of view and a short focal length. A picture taken with a fish eye lens is foreshortened in the middle and more and more distorted towards the periphery.
This Fish Eye Table program creates a focus length of rows large enough to be easily read, with a distortion area of increasingly smaller rows. Outside of the distortion area are rows in the minimum size possible needed to fit all rows into the display. The fish eye focus area shifts to center around the mouse cursor when the user moves the mouse over the Table. It also changes in response to scrolling the mouse wheel. All of the other rows change sizes accordingly.
This Fish Eye Table produces only a vertical effect. The code for a horizontal fish eye effect has yet to be written. Therefore if someone attempts to create a Table wider than his screen can hold, it will not display properly unless he adds a horizontal scrollbar. Without a horizontal scrollbar, the Fish Eye Table fills the entire width of the screen and fits all of its columns into the available space. Individual columns may be too narrow for users to properly view their contents.
To pause the Fish Eye effect, the user can click once anywhere in the table with the left mouse button. To resume the Fish Eye effect, the user can click the left mouse button again. To edit the information displayed in the Table, the user can double-click on a cell. A textbox will open in that cell, displaying its current contents. The user can type in new information, then press the Enter key or click somewhere else in the Table, and the Table cell will store the new value. Editing a cell automatically halts the Fish Eye effect, which resumes when the editing is complete.
The Table is designed to be as tall as possible, but no taller than necessary. If so few rows are loaded into the table that they can all be viewed at once, no Fish Eye effect is created and the Table height is only as high as needed. Screen resolution is not taken into account.
If too many rows for the Fish Eye Table to show at once are loaded into it, an error is generated and the Table will not display. On an 800 x 600 screen the Table can load up to 260 rows, although after 230 rows the Table becomes hard to read. For a 1024 x 768 screen the Fish Eye Table won't load over 350 rows, and after 320 rows it becomes hard to read. On an 1152 x 864 screen 390 rows can be loaded, although a Table with over 360 rows is hard to read.
Some of the source code for this table was adapted from Ben Bederson's FishEye Menu code. Bederson's FishEye Menu is used for displaying long lists of items. It was designed as an alternative to scrolling through lengthy drop-down lists.
| Pros & Cons |
The Fish Eye is a very natural method of direct manipulation. It is especially helpful for scanning through well-ordered information. The Fish Eye Table is valuable for viewing especially large tables of information. It is an alternative to using a table with scrollbars that requires less effort on the part of the user.
| Applications |
The Fish Eye Table has been integrated into the Information Visualization XML Toolkit. It is available both as part of the Toolkit and as a standalone program.
In the InfoVis Toolkit, the main method for the Fish Eye Table program is in the FishEyeGui.java file. In the standalone version, the FishEyeTest.java file takes the place of the FishEyeGui.java file. In all other ways the two versions are identical.
The FishEyeGui class creates the JFrame that will hold the Fish Eye Table. The constants BORDER_Y and START_MENU are estimations of what the borders between cells in the table will be and how much extra space is needed due to the presence of menu bars.
The FishEyeGui constructor creates a FishEyeTable and sets a few selection modes for it. This version of the program creates the FishEyeTable using a DemoTableModel to provide sample text. Users are allowed to select one row at a time. They are not allowed to select columns. The FishEyeTable's width and height are set, it is put into the JFrame, and the JFrame is set to be unresizable.
The FishEyeTable class is the heart of the program. The FishEyeTable constructor determines the maximum possible table height based on the window position and the screen size. It also creates a FishEyeAlgorithm object, which does the calculations that make sizing the FishEyeTable rows possible. The FishEyeAlgorithm object determines all the possible row sizes for all the different vertical mouse pointer positions, using the number of rows and the maximum FishEyeTable height.
The FishEyeTable overrides the paintComponent method. It utilizes doublebuffering for the sake of smooth display. First it paints in the background color. Then it draws the table cells as rectangles, using the FishEyeAlgorithm to determine the necessary heights, and adds the text, again using the FishEyeAlgorithm to determine the font needed.
The FishEyeTable uses the MouseMotionListener to receive mouse movements and MouseWheelListener to receive mouse wheel movements. When the mouse is moved or dragged over the table, or the user scrolls up or down with the mouse wheel, a new row is selected as the focus of the Fish Eye effect and the row heights are readjusted.
The FishEyeTable determines the table width based on its content. It sets the width of each table column to the width of its widest text String, with a little space to spare. The width will never be wider than the screen.
The DemoTableModel class creates the simplest possible TableModel for storing data with the minimum functionality for example purposes. This DemoTableModel is sufficient for users who want to load information from .xml files. Users who want to use their own TableModels can easily replace it.
The FishEyeAlgorithm class calculates the size of the Fish Eye effect, the row sizes, the font sizes, and the table height. Its constructor creates an array of all the possible font sizes. It has methods to return the values of the currently selected row of the table, the row for a given y position, the table height, the space needed for a given row minus the size of the font, the size of the font, the font for a given row, and the maximum possible size font.
The calculateSizes method determines all the possible row sizes for all the possible mouse cursor positions. It calculates the biggest minimum row size that can possibly be used and still visually fit all of the rows into the table with the help of the calculateWindowHeight method. The calculateWindowHeight method determines how tall the FishEyeTable needs to be. If the number of rows in the Fish Eye effect area is greater than the total number of rows, the Fish Eye effect area is shortened to the total number of rows.
The calculateSizes method also tests to see if all the tables' rows can be made visible in the maximum font. If they can, then there is no need for a Fish Eye effect, and it is canceled. The table is made only as large as it needs to be. Otherwise, the FishEyeTable program uses all of the vertical space available to it.
The calculateSizes method creates a pair of arrays which contain all the possible font sizes and all the possible row space sizes for the entire table when any given row is selected. The method also creates an array that contains the number of the row that should be selected for all the possible vertical mouse cursor positions. The error that occurs when a user tries to load too many rows into the Fish Eye Table happens when there are too many rows for each of them to be assigned a y position.
The SelectionReCalculate method determines what the new selected row needs to be every time the mouse cursor moves or drags, or the mouse wheel is scrolled.
The StandardCellEditor class implements CellEditor. When the user clicks on a cell in the Fish Eye Table display, the isCellEditable method determines whether a JTextfield will open for editing. If the user double-clicks, the JTextfield editor will open, displaying the contents of the cell. The user can type in a new value and press Enter or click elsewhere in the table and the new value will be stored. If the user single-clicks on a cell, the Fish Eye effect will be paused using the FishEyeTable class' paintSwitch method. Single-clicking again will cause the Fish Eye effect to resume. When the user starts editing a cell in the table the Fish Eye effect is paused by the editCellAt method in the FishEyeTable class. The FishEyeEditor class starts the effect again once editing is stopped or canceled. FishEyeEditor extends StandardCellEditor.
| Details |
Here is the list of action items for the Fish Eye Table.
|
Usage Hints |
The Fish Eye Table can be used as part of the IV Software repository. Simply open the repository and open the fisheye.xml file using the File menu. Then select Fish Eye from the Visualize menu.
The Fish Eye Table is also available as a separate standalone application. It can be implemented by running FishEyeTest.java, the file that contains the main method. FishEyeTest.java extends JFrame.
| References |
- R. Rao and Card, S. (1994) The table lens: merging graphical and symbolic representations in an interactive focus + context visualization for tabular information. In Proceedings of the CHI Conference on Human Factors in Computing Systems, 318-322.
- Bederson, B. (2000) Fish Eye Menus. In Proceedings of ACM Conference on User Interface Software and Technology, 217-226.
| Acknowledgments |
This package was developed as an independent study by Renee LeBeau (rdlebeau@indiana.edu) at SLIS in Fall 2003. Nathan James Deckard helped with the integration of the code into the XML Toolkit.
Information
Visualization Cyberinfrastructure @ SLIS,
Indiana University
Last Modified January
14, 2004