Canvas 2D Web Apps/Static Buttons

This chapter discusses the most basic way to implement buttons with cui2d. It is certainly not the only way to implement buttons, but it is very flexible and the code to define the appearance and function of a button is a simple  statement that checks whether the user event has been occurred in the region of the button and specifies how to react to such events. In this chapter, the appearance of buttons is static; buttons that change their appearance based on user events (e.g., a hovering mouse pointer) are discussed in the chapter on responsive buttons.

An Example: Selecting a Color
The example of this chapter shows three buttons labeled “red,” “green” and “blue,” as well as a color patch, which changes its color according to the clicked button. The buttons are rendered with a bitmap image which allows for arbitrary button designs. The example is available online, and a version that can be downloaded to mobile devices is also available online. If you want to try out the example on your local computer, you should also download the files and the image  to the same directory as the HTML file.

Discussion
This discussion assumes that you are familiar with the code example discussed in Chapter Getting Started with the Framework.

The example uses a bitmap image to draw a button. The image is assigned to the global variable :

The image file is then specified in the  function:

By setting  to , we can make sure that the canvas is repainted in case it has been rendered before the image was completely loaded.

The example defines a global variable  to store the user-selected color:

Since the example uses clicks onto the background to set  to black, these “one-finger” events should not be processed by the page. Thus, the example deactivates one-finger dragging by only allowing two-finger gestures for this page:

For repainting the buttons and processing clicks on the buttons, the example uses three calls to :

The definition of  is discussed below. Here, it is only important that it works similarly to a process function:
 * If  is ,   writes a string ( ,  , or  ) in the specified rectangle and then draws   under it.
 * If  is not , it checks whether this user event is inside the specified rectangle and returns   if it is. In this case, the type of the event is checked, and in case of   and   events,   is changed to some color (depending on the button) and a repaint is requested with   to make sure that the new color is used for drawing. Also, the function returns with   to indicate that the event has been processed.

The following code checks whether there was a  or   anywhere else, and in this case it sets   to black:

Lastly, the function checks whether  is   and in that case it repaints a square rectangle with the color   and a grey background:

The code then returns  to indicate that the event hasn't been processed.

When you try out the example, you might realize that it feels very static even though you can change the color by clicking on the buttons and the background. The example in Chapter Responsive Buttons feels a lot more dynamic because the appearance of the buttons responds to user events.

Implementation of cuiIsInsideRectangle
The function  is defined in :

The implementation is very straightforward: if  is , the   is written at the center of the rectangle unless the   is. Similarly,  is drawn into the rectangle unless it is. On the other hand (if  is not  ), the function checks whether the coordinates   and   in event are inside the rectangle and returns the result.

Note that  and   are specific to cui2d: these coordinates are in the coordinate system of the page, which is different from any coordinate system that HTML is using and it changes if the user transforms the page with two-finger gestures.