The analysis of the requirements for this chapter also includes the F:photo_editor requirement key. The reason is that to access the functionality described in the two keys just described, the selection must be made from within the photo editor application. Therefore, the GUI must be adapted to reflect these additional buttons.
As with all the requirements gathering and analysis, this update of the GUI should be done in close collaboration with the customer. Defining the GUI is probably the most important task because the GUI is what the customer and users will experience first. In addition, developing a solid GUI definition will eliminate a lot of possible ambiguity regarding the functionality of the business logic (or, in our case, the image-processing part). This is because the GUI defines the possible ways a user can access the business logic. For example, consider the rotation feature implemented in Chapter 5. The buttons allow the user to rotate the image only in 90 degree steps clockwise or counterclockwise. This in turn enables the developer to use the system-provided RotateFlipType instead of implementing a customized rotate feature that would allow for arbitrary rotation angles.
6.2.1 The photo_editor Requirement
Figure 6.1 shows the changes to the GUI. To access the new functionality, we add a new tab to the existing tab control. The layout of the new tab is shown in the lower part of the figure.
Figure 6.1. The Photo Editor GUI
6.2.2 The image_graphics_annotations Requirement
Users can add a graphics overlay element to the image by selecting one of the buttons for the shapes. If a shape is selected, a left mouse click within the image will put the start point of the shape at the selected position. The start point for a line is simply the first point of the line, whereas the start point for a rectangle is the upper-left corner, and for a circle it is the upper-left point of the enclosing rectangle. By moving the mouse while pressing down on the left mouse button, users can resize the shape. The new mouse location relative to the start point will define the new size of the shape. When the mouse button is released, the shape is drawn on top of the image.
The shapes are drawn in black, with a default line thickness of 2. The application will be able to call one draw method to draw all the primitives without having to distinguish between them. Users can erase any drawn primitive by using the erase tool and clicking the mouse button within a ±5-pixel area of the start or end point. To make the changes to the bitmap permanent, users use the Apply button to "burn" the graphics onto the bitmap. In addition, a Reset button is provided to enable the user to revert to the originally loaded image.
6.2.3 The image_text_annotations Requirement
Users will add text overlays to the image by selecting the Text button. After selecting the text overlay, users add text to the image by clicking within the image to open a dialog box. The dialog box displays a field where the user can enter text, which is drawn after the OK button is applied. The position selected with the mouse corresponds to the upper-left corner of the first letter of the text to be inserted. The text uses the default font and size, and its color is black.
Introducing Software Engineering
A .NET Prototype
The Photo Editor Application
GDI+ Graphics Extensions
Advanced GDI+ Operations
Dynamic Loading of Components
Accessing System Resources
Performance Optimization, Multithreading, and Profiling
Building the Web Application with ASP.NET
Security and Database Access