Combining Semi-Transparent Window Borders with Opaque Content using CSS RGBa

Developing web applications that support multiple window-like panels in a single browser page is challenging. This blog post describes how I implemented semi-transparent window borders in Choosel to help with window resizing. I used CSS RGBa background colors to combine semi-transparent window borders with opaque window content.

Choosel is a GWT framework that aims at facilitating flexible visual data exploration. It supports multiple windows on the same page. The windows can be dynamically created, closed, moved, resized and brought to the front. Different window content types such as maps, charts & notes are available.

However, one of the findings from a usability study was that resizing the windows was difficult. The main reason was that the window borders were fairly thin (3 pixel). So I decided to increase the border thickness to 7 pixel. However, I found that increasing the thickness of opaque borders often occluded relevant content from underneath, e.g. from other windows. To solve this problem, I implemented semi-transparent borders using CSS. The two screenshots below illustrate the differences between the two designs:

Thin, opaque borders (click thumbnail to enlarge screenshot)


Thick, semi-transparent borders (click thumbnail to enlarge screenshot)


A window in Choosel is basically an HTML div element that contains an HTML table. The table contains cells for the borders, the header and the content. To allow for transparent boundaries and opaque window contents at the same time, I set the background color of the window div to be completely transparent using RGBa:

background-color: rgba(0, 0, 0, 0.0);

Using CSS opacity was not an option, because opacity is inherited and thus combining opaque window content with transparent border would not have been easily possible. The borders have semi-transparent background colors, again set using RGBa. The transparency of the window content depends on the implementation of the content type. For example, notes are slightly semi-transparent when inactive, but the visualization views are opaque.

The semi-transparent window borders were tested and work with Firefox 3.6, Chrome 6 and Safari 5. Choosel is not designed for Internet Explorer (up to version 8).

Controlling the Z-Index of Map Overlays using the Google Maps Library for GWT

Google Maps is a great way to show location-based data on a map. In Choosel, we implemented a generic map widget which leverages Google Maps. This can for example be used to visualize the locations of recent earthquakes. Choosel also supports multiple coordinated view with selections and highlighting of items across different views (see Video):



However, occlusion in the map becomes a problem when trying to highlight resources across views. For example, when highlighting a particular earthquake in the timeline, it might be hidden by other earthquake overlays which are displayed on top of it in the map. The z-index of the earthquake overlay in the map would need to be adjusted such that the earthquake is displayed on top while being highlighted, but this is not directly possible using the Google Maps API 1.0 for GWT.

I implemented a custom Overlay class that uses a GWT label to display a data item. Using a GWT widget in the custom overlay has several advantages: (1) we can change the CSS styling, including the z-index, (2) we can use standard GWT event handlers, and (3) we don’t need to load images.

Before, we used the MapIconMaker from the gmaps utility library. The CSS based approach has some cross-browser limitation, e.g. rounded corner on IE, but it is faster because no images are loaded any more. However, the z-index changes outlined here are possible with any GWT widget, so switching to an Image widget should be easy.

This are the main elements of the LabelOverlay implementation used in Choosel:

public class LabelOverlay extends Overlay {

    private Label label;

    private LatLng latLng;

    private MapWidget map;

    private Point offset;

    private MapPane pane;

    private Point locationPoint;

    public LabelOverlay(LatLng latLng, Point offset, 
            String text, String styleName) {

        this.latLng = latLng;
        this.offset = offset;
        this.label = new Label(text);
        this.label.setStyleName(styleName);
    }

    public HandlerRegistration addClickHandler(
            ClickHandler handler) {
            
        return label.addClickHandler(handler);
    }
    
    // ... other mouse handlers (down, move etc.)

    @Override
    protected final Overlay copy() {
        return new LabelOverlay(latLng, offset, 
                label.getText(), label.getStyleName());
    }

    @Override
    protected final void initialize(MapWidget map) {
        this.map = map;

        pane = map.getPane(MapPaneType.MARKER_PANE);
        pane.add(label);

        updatePosition(
            map.convertLatLngToDivPixel(latLng));
    }

    @Override
    protected final void redraw(boolean force) {
        /*
         * We check if the location has changed, because 
         * Google Maps allows infinite panning along the 
         * east-west-axis and requires an updated widget 
         * location in this case, although it will not 
         * force redrawing.
         */
        Point newLocationPoint = 
            map.convertLatLngToDivPixel(latLng);

        if (!force 
                && sameLocation(newLocationPoint)) {
            return;
        }

        updatePosition(newLocationPoint);
    }

    @Override
    protected final void remove() {
        label.removeFromParent();
    }

    private boolean sameLocation(Point newLocationPoint) {
        assert newLocationPoint != null;
        return locationPoint != null
                && locationPoint.getX() 
                    == newLocationPoint.getX()
                && locationPoint.getY() 
                    == newLocationPoint.getY();
    }

    public void setZIndex(int zIndex) {
        // CSS is a class in Choosel
        CSS.setZIndex(label, zIndex);
    }
    
    // ... other CSS attribute setters

    private void updatePosition(Point newLocationPoint) {
        assert newLocationPoint != null;
        locationPoint = newLocationPoint;
        pane.setWidgetPosition(label, 
                locationPoint.getX() + offset.getX(),
                locationPoint.getY() + offset.getY());
    }

}

The code uses some convenience methods from the Choosel CSS library class. The overlay are styled by default using this CSS class:

.resourceItemIcon {
 width: 16px;
 height: 16px;
 border: 1px solid darkgray;
 text-align:center;
 vertical-align:middle;
 font-weight:bold;
 font-size: 12px; 
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 padding: 0px; 
}

The rest is pretty straightforward, the overlays are created and added:

overlay = new LabelOverlay(point, Point.newInstance(-10, -10),
            label, CSS_RESOURCE_ITEM_ICON);
map.addOverlay(overlay);

In Choosel, this functionality is distributed in the MapItem and MapViewContentDisplay classes.

Using the approach outline in this blog post, you can use GWT widgets in map overlays and control CSS attributes such as the z-Index.

Choosel Poster at InfoVis 2010

I will present a poster on the Choosel Framework at IEEE InfoVis 2010. The main goal of the Choosel project is to enable software developers and researchers to easily create web-based visual data exploration environments for novices. The poster paper briefly summarizes some of the related work, the features of Choosel, and the results of a prelimary usability evaluation:

Since information visualization has become increasingly vital to experts, it is now important to enable information visualization novices to consume, construct, and coordinate visualizations as well. Choosel is a web-based environment that aims at facilitating flexible visual data exploration for information visualization novices. It supports the iterative construction of multiple coordinated views during the visual data analysis process. A preliminary user study with 8 participants indicated that multiple windows, enhanced drag and drop interaction, and highlighting of items and sets, in particular, support novices in the visual data exploration process in a useful and intuitive way.

Download Poster Abstract (2 pages)

Why Choosel is based on GWT

I presented Choosel to the Visual Interaction Design (VisID) research group at the University of Victoria. Choosel is an open-source framework for web-based information exploration environments aiming at information visualization novices.

The first part of my presentation focused on several design decision behind Choosel. The framework is targeting information visualization novices - those who are not familiar with information visualization and visual data analysis beyond the graphics encountered in everyday life. Two major design decision we made based on those constraints is choosing the web as the target platform and developing Choosel using GWT.

We assumed that those information visualization novices are more likely to look at smaller data sets (up to 5000 items), but are not willing to spent much time getting started with visual data analysis. This was the main driver behind the decision to develop a web-based environment, because this spares user the burden of installing software. We considered removing this entry barrier more important then scalability beyond several thousand data items. As our main goal was to a provide interactive information exploration environment, responsiveness was important and we decided to use primarily technology that runs on the user's computer and not on the server.

In Choosel, we leverage third party visualization components and toolkits such as the Simile Timeline, Protovis and FlexViz. In order to be able to integrate different technologies such as Flash and JavaScript in the browser, we decided to use a JavaScript based technologies. First, we developed a initial prototype using the dojo toolkit. However, it turned out that because of our software development skills and tool support for unit testing, refactoring, and debugging, we were able to develop the same prototype using GWT in about a quarter of the time. The current version of Choosel is based on GWT.

Here are the slides from my presentation:

How Information Visualization Novices Construct Visualizations

Visualization for the masses is a topic that has gained a lot of attraction in the InfoVis community in recent years, e.g. in projects such as IBM ManyEyes. The goal is to enable a wide user population to leverage information visualization technology to understand large amounts of data. This could potentially help them make more informed decisions, and is especially promising as more and more data becomes available (see open data). However, there are still many challenges that need to be addressed so that visualization for the masses can become a reality, ranging from limited visual literacy to insufficient tool support.

Together with Melanie Tory and Margaret-Anne Storey, I investigated how information visualization novices construct visualizations in a laboratory setting. Our research paper "How Information Visualization Novices Construct Visualizations" was accepted for presentation at IEEE InfoVis 2010.

Here is the abstract of our paper:

It remains challenging for information visualization novices to rapidly construct visualizations during exploratory data analysis. We conducted an exploratory laboratory study in which information visualization novices explored fictitious sales data by communicating visualization specifications to a human mediator, who rapidly constructed the visualizations using commercial visualization software.

We found that three activities were central to the iterative visualization construction process: data attribute selection, visual template selection, and visual mapping specification. The major barriers faced by the participants were translating questions into data attributes, designing visual mappings, and interpreting the visualizations. Partial specification was common, and the participants used simple heuristics and preferred visualizations they were already familiar with, such as bar, line and pie charts.

From our observations, we derived abstract models that describe barriers in the data exploration process and uncovered how information visualization novices think about visualization specifications. Our findings support the need for tools that suggest potential visualizations and support iterative refinement, that provide explanations and help with learning, and that are tightly integrated into tool support for the overall visual analytics process.

Download Technical Report