Canvas 2D Web Apps/Overlays

This chapter extends the chapter on pages by adding a semitransparent overlay to the three pages and moving the buttons from the pages to that overlay.

An overlay in cui2d is just a page (i.e. a ), which is used as an overlay in another page (i.e. its   method is called in the process function of the other page). Apart from that, they are just ordinary pages with their own process function (which is called by ); thus, an overlay page can in fact be used just like any other page.

The Example
The example of this chapter (which is available online; also as downloadable version) adds another (overlay) page and its process function to the example of the chapter about pages. Two buttons are then called from the overlay page's process function. This chapter focuses on how to create an overlay page and how the other pages include the overlay page. See the chapters on pages and responsive buttons for other parts.

Creating Overlay Pages
Pages that should be used as overlay pages are created like other pages. However, overlays are often not transformable. In this example, the overlay can only be dragged vertically with one finger. If both the page and its overlay are not transformable, then they should have the same dimensions and should use the same layout. If, however, the page is transformable but the overlay is not transformable, things get a bit more complicated. Often, the overlay will be adjusted to either the width or the height of the screen and it will be aligned with one of the corresponding edges. In the example, the width is adjusted and the top edge of the overlay is aligned:

The process function of the overlay page includes two buttons (“previous” and “next”). Since the same overlay is used for all three pages, these buttons are also used for all three pages and, therefore, have to check the current value of  in order to set it to the correct new value:

Using Overlay Pages
In order to use a page as an overlay to another page, its  methods should be called from the process function of that other page. In the example:

As you might have expected,  returns   if it has processed the event, and   otherwise.

The other two pages work in exactly the same way.

Uses for Overlays
The main use of overlays are menus, icons, and buttons that always stay in the same place on the screen. However, they can also be used for draggable (or transformable) palettes and toolboxes. Moreover, they are useful for dialog boxes. They can even be used to implement a simple window system (however without scrollable content and without the possibility to change the aspect ratio of the “windows”).

Since they are so versatile, one should ask when not to use them? The main difference of overlays on the one hand and draggables or transformables on the other hand is that overlays are not affected by the transformation of their page. A specific example might be helpful: Imagine an application that presents a zoomable map where the user can click on certain points on the map to get info boxes with additional information about those points. Should these info boxes be overlays or transformables? If they are overlays, the user might quickly clutter the whole screen with info boxes. If they are transformables, the opened info boxes would just move out of sight as the user pans to other parts of the map. However, if the user zooms out, the content of a transformable quickly becomes unreadable while the overlay keeps its readable size. On the other hand, the position of an overlay doesn't tell the user much about the location of the clicked point on the map while a transformable stays close to the clicked point unless the user drags it away. But what if a user wants to compare the content of the info boxes of two points that are far apart? That's much easier with overlays.

Thus, there are multiple advantages and disadvantages of overlays compared to transformables and draggables depending on the specific application. Therefore, the decision for or against overlays has to be made for each specific case.

Implementation of Overlays
The implementation of  is relatively straightforward. The steps are: In code:
 * Transform the event coordinates since the overlay is usually using a different transformation than the page (for which the event coordinates have been transformed).
 * Set the geometric transformation for  (again because the page is usually using a different transformation).
 * Call the process function of the overlay page.
 * Process any unprocessed events by the transformable  member of the overlay page.