1. Graphics and Multimedia17
Graphics and Multimedia

2. One picture is worth ten thousand words.
Chinese proverb
Treat nature in terms of the cylinder, the sphere, the cone, all in perspective.
Paul Cezanne
Nothing ever becomes real till it is experienced—even a proverb is no proverb to you till your life has illustrated it.
John Keats
A picture shows me at a glance what it takes dozens of pages of a book to expound.
Ivan Sergeyevich

3. OBJECTIVES In this chapter you will learn:
To understand graphics contexts and graphics objects.
To manipulate colors and fonts.
To understand and use GDI+ Graphics methods to draw lines, rectangles, strings and images.
To use class Image to manipulate and display images.
To draw complex shapes from simple shapes with class GraphicsPath.
To use Windows Media Player to play audio or video in a C# application.
To use Microsoft Agent to add interactive animated characters to a C# application.

4. 17.1   Introduction
17.2   Drawing Classes and the Coordinate System
17.3   Graphics Contexts and Graphics Objects
17.4   Color Control
17.5   Font Control
17.6   Drawing Lines, Rectangles and Ovals
17.7   Drawing Arcs
17.8   Drawing Polygons and Polylines
17.9   Advanced Graphics Capabilities
17.10   Introduction to Multimedia
17.11   Loading, Displaying and Scaling Images
17.12   Animating a Series of Images
17.13   Windows Media Player
17.14   Microsoft Agent
17.15   Wrap-Up

5. 17.1 Introduction
Overview of C#’s tools for drawing 2-D shapes and for controlling colors and fonts
Namespace System.Drawing
Many sophisticated drawing capabilities that make up the .NET resource GDI+
GDI+ is an application programming interface (API)
For creating 2-D vector graphics, manipulating fonts and inserting images
Class Image
Store and manipulate images of various formats
Multimedia examples
Build an animation
Use the Windows Media Player control
Use Microsoft Agent
For adding interactive animated characters to applications or Web pages

6. 17.2 Drawing Classes and the Coordinate System
System.Drawing
Class Graphics
Methods used for drawing strings, lines, rectangles and etc.
Class Pen and/or Brush
Render a specified shape
Color structure
Set colors of various graphical components
Allow to create new colors
Class Font
Contains properties that define unique fonts
Class FontFamily
Contains methods for obtaining font information

7. Fig. 17.1 | System.Drawing namespace’s classes and structures.

8. 17.2 Drawing Classes and the Coordinate System (Cont.)
GDI’s coordinate system
By default, the upper-left corner of a GUI component has the coordinates (0, 0)
A coordinate pair
x-coordinate
The horizontal distance from the upper-left corner
y-coordinate
The vertical distance from the upper-left corner
Coordinate units are measured in pixels
The smallest units of resolution on a display monitor
Point structure
Represents the x-y coordinates of a point on a two 2-D plane
Size structure
Represents width and height of a shape

9. Portability Tip 17.1
Different display monitors have different resolutions, so the density of pixels on such monitors will vary. This might cause the sizes of graphics to appear different on different monitors.

10. Fig. 17.2 | GDI+ coordinate system. Units are measured in pixels.

11. 17.3 Graphics Contexts and Graphical Objects
Graphical context represents drawing surface
Graphics objects contain methods for graphics-related actions
Derived classes of System.Windows.Forms.Form inherits virtual OnPaint method
OnPaint method’s argument includes a PaintEventArgs object to obtain a Graphics object for the Form
Programmers seldom call the OnPaint method directly
Drawing graphics is an event-driven process
Control’s Invalidate method forces a call to OnPaint
By default, controls do not have their own graphics contexts

12. Performance Tip 17.1
Calling the Invalidate method to refresh the Control can be inefficient if only a small portion of a Control needs refreshing. Calling Invalidate with a Rectangle parameter refreshes only the area designated by the rectangle. This improves program performance.

13. 17.4 Color Control
Colors
Are created from a combination of alpha, red, green and blue components (called ARGB values)
All four ARGB components are bytes that represent integer values in the range 0 to 255
The alpha value determines the opacity of the color
Method FromArgb
Allows you to set these values
Some methods/classes related to color control
Derived classes from abstract class Brush
Define the color of interiors of graphical shapes
Graphics has several overloaded DrawString methods
Color’s static method FromName
Create new Color defined by user
ColorDialog GUI component
A dialog box that allows users to select from a palette of available colors or to create custom colors

14. Fig. 17.3 | Color structure static constants and their RGB values.

15. Fig. 17.4 | Color structure members.

16. Fig. 17.5 | Classes that derive from class Brush.

17. Outline private instance variable to store the back rectangle's color
ShowColors.cs
(1 of 4)
private instance variable to store the front rectangle's color
Override OnPaint to customize the graphics operations that are performed
Retrieve the Graphics object
Create SolidBrush object to for drawing solid shape

18. Outline Create SolidBrush object for drawing solid shape (2 of 4)
ShowColors.cs
(2 of 4)
Give the retrieved Graphics object a white background using brush
Output the background color by drawing to the Graphics object
Draw the back rectangle to Graphics object
Output the Argb value of front rectangle by drawing to the Graphics object
Draw the front rectangle to Graphics object

19. Outline Allow user to change background color (3 of 4)
ShowColors.cs
(3 of 4)
Call OnPaint to redraw
Allow user to change the front rectangle’s color
Call OnPaint to redraw

20. Outline
ShowColors.cs
(4 of 4)

21. Outline (1 of 3) Create a ColorDialog object
ShowColors Complex.cs
(1 of 3)
Create a ColorDialog object
Allow user to choose from a variety of colors
Check to see if the user pressed “Cancel”

22. Outline Change color to user’s selection (2 of 3)
ShowColors Complex.cs
(2 of 3)
Allow user to choose from a variety of colors
Change color to user’s selection

23. Outline
ShowColors Complex.cs
(3 of 3)

24. 17.5 Font Control Font FontFamily
Properties of Font objects cannot be modified
If you need a different Font, must create a new Font object
Size property
Returns the font size as measured in design units
SizeInPoints property
Returns the font size as measured in points
GraphicsUnit enumeration
Unit of measurement that describes the font size
FontFamily
Defines characteristics common to a group of related fonts
Provides several methods to determine the font metrics that are shared by members of a particular family

25. Fig. 17.8 | Font class read-only properties.

26. Common Programming Error 17.1
Specifying a font that is not available on a system is a logic error. If this occurs, C# will substitute that system’s default font.

27. Outline (1 of 3) Change font style to bold Arial
UsingFonts.cs
(1 of 3)
Change font style to bold Arial
Change font style to Times New Roman

28. Outline Change font style to italic Courier New (2 of 3)
UsingFonts.cs
(2 of 3)
Change font style to strikeout Tahoma
Output font styles to screen by drawing to graphicsObject

29. Output font styles to screen by drawing to graphicsObject
Outline
Output font styles to screen by drawing to graphicsObject
UsingFonts.cs
(3 of 3)

30. Fig. 17.10 | Font metrics illustration.

31. Fig. 17.11 | FontFamily methods that return font-metric information.

32. Create a FontFamily object to determine the front metrics of Arial
Outline
UsingFont Metrics.cs
(1 of 3)
Create a FontFamily object to determine the front metrics of Arial

33. Outline Output font style’s ascent (2 of 3)
UsingFont Metrics.cs
(2 of 3)
Output font style’s descent
Output font style’s height
Output font style’s spacing
Change the FontFamily object to determine the front metrics of Sans Serif
Output font style’s ascent

34. Outline Output font style’s descent (3 of 3)
UsingFont Metrics.cs
(3 of 3)
Output font style’s height
Output font style’s spacing

35. 17.6 Drawing Lines, Rectangles and Ovals
Each of the drawing methods has several overloaded versions
Methods that draw hollow shapes
Typically require as arguments a Pen and four ints
Methods that draw solid shapes
Typically require as arguments a Brush and four ints
The first two int arguments represent the coordinates of the upper-left corner of the shape
The last two ints indicate the shape’s width and height
Methods FillRectangle and DrawRectangle
Draw rectangles on the screen
Methods FillEllipse and DrawEllipse
Draw ellipses on the screen

36. Fig. 17. 13 | Graphics methods that draw lines, rectangles and ovals
Fig | Graphics methods that draw lines, rectangles and ovals. (Part 1 of 2.)

37. Fig. 17. 13 | Graphics methods that draw lines, rectangles and ovals
Fig | Graphics methods that draw lines, rectangles and ovals. (Part 2 of 2.)

38. Draw the back rectangle filled in with blue
Outline
LinesRectangles Ovals.cs
(1 of 3)
Draw the back rectangle filled in with blue

39. Outline Draw lines to connect the rectangle to make a box (2 of 3)
LinesRectangles Ovals.cs
(2 of 3)
Draw the front rectangle
Draw the bottom ellipse filled in with red
Draw lines to connect the ellipses to make a cylinder

40. Outline
Draw the top ellipse
LinesRectangles Ovals.cs
(3 of 3)

41. 17.7 Drawing Arcs
Arcs
Portions of ellipses and are measured in degrees
Begin at a starting angle
Continue for a specified number of degrees (the arc angle)
An arc is said to sweep its arc angle
Begin from its starting angle
Clockwise direction is measured in + degree
Counterclockwise direction is measured in - degree
The Graphics methods used to draw arcs:
DrawArc
DrawPie
FillPie

42. Fig. 17.15 | Ellipse bounded by a rectangle.

43. Fig. 17.16 | Positive and negative arc angles.

44. Fig. 17.17 | Graphics methods for drawing arcs.

45. Outline
DrawingArcs.cs
(1 of 3)
Draws a circle

46. Outline Draws an arc from 0 to 110 degrees (2 of 3)
DrawingArcs.cs
(2 of 3)
Draws an arc from 0 to -270 degrees
Draws filled circle
Draws a filled arc from 270 to -90 degrees
Draws a filled arc from 0 to -270 degrees

47. Outline
DrawingArcs.cs
(3 of 3)

48. 17.8 Drawing Polygons and Polylines
Multisided shapes
Several Graphics methods used to draw polygons:
DrawLines
Draws a series of connected lines
DrawPolygon
Draws a closed polygon
FillPolygon
Draws a solid polygon

49. Fig. 17.19 | Graphics methods for drawing polygons.

50. Outline
DrawPolygons.cs
(1 of 5)
Declare a dynamic array to store the vertices of the polygon
Store the polygon’s vertices determined by the mouse position

51. Outline (2 of 5) Make sure there is more than one point
DrawPolygons.cs
(2 of 5)
Make sure there is more than one point
Extract an array from an ArrayList
Determine which option(s) are checked and draw its corresponding shape
Clear the points store in the ArrayList

52. Outline
DrawPolygons.cs
(3 of 5)
Refresh and redraw

53. Outline Check to see if user pressed “Cancel” (4 of 5)
DrawPolygons.cs
(4 of 5)
Change to the appropriate color

54. Outline
DrawPolygons.cs
(5 of 5)

55. 17.9 Advanced Graphics Capabilities
Class LinearGradientBrush
Enables users to draw with a color gradient
LinearGradientMode enumeration
Specifies the gradient’s direction
Class Bitmap
Produce images in color and gray scale
Graphic’s static method FromImage
Retrieves the Graphics object associated with an Image
Class GraphicsPath
Enables the creation of complex shapes from vector-based primitive graphics objects
Method CloseFigure
Attaches the final vector-graphic object end point to the initial starting point for the current figure by a straight line
Then starts a new figure
Method StartFigure
Begins a new figure within the path without closing the previous figure
Method AddLine
Append a line to the shape

56. Outline (1 of 4) Create a Rectangle object
DrawShapes.cs
(1 of 4)
Create a Rectangle object
Enable user to draw with a color gradient

57. Outline Draw a filled gradient ellipse (2 of 4)
DrawShapes.cs
(2 of 4)
Draw a red outlined rectangle
Create a new Bitmap image
Retrieves Graphics object associate with an Image
Fill Bitmap

58. Outline Fill Bitmap (3 of 4) Draw rectangle with Bitmap image
DrawShapes.cs
(3 of 4)
Draw rectangle with Bitmap image
Draw white pie arc
Draw a green line
Draw a yellow dashed line

59. Outline
DrawShapes.cs
(4 of 4)

60. Create two arrays of x and y points where stars will be drawn
Outline
DrawStarsForm.cs
(1 of 3)
Create two arrays of x and y points where stars will be drawn

61. Outline Create a GraphicsPath object for a star (2 of 3) Create a star
DrawStarsForm.cs
(2 of 3)
Create a star
Translate to a new origin
Move to the next position on the form
The rotation angle in degrees
Draw rectangle with random color

62. Outline
DrawStarsForm.cs
(3 of 3)

63. 17.10 Introduction to Multimedia
Multimedia applications demand extraordinary computing power
Today’s ultrafast processors make multimedia-based applications commonplace

64. 17.11 Loading, Displaying and Scaling Images
Image’s static method FromFile
Loads an image from a file on the disk
Graphics
Form’s CreateGraphics method
Creates a Graphics object for drawing on the Form
Graphic’s Clear method
Paint the entire Form in the current background color
Graphic’s DrawImage method
If the width and height do not correspond to the image’s original dimensions, the image is scaled to fit the new width and height

65. Load image from specified location
Outline
DisplayLogoForm.cs
(1 of 3)
Load image from specified location

66. Outline
DisplayLogoForm.cs
(2 of 3)
Retrieve the height and width the image should be scaled to
Draw image with the specified width and height

67. Outline
DisplayLogoForm.cs
(3 of 3)

68. 17.12 Animating a Series of Images
2-D collision detection
Enables a program to detect whether two shapes overlap or if a point is contained within a shape
Rectangle’s method Contains
Useful for determining whether a point is inside a rectangular area
Artifacts
Unintended visual abnormality in a graphical program

69. Outline (1 of 2) Store and load the images that will be displayed
LogoAnimator.cs
(1 of 2)
Store and load the images that will be displayed
Start by displaying the first image

70. For every Tick event, display the next image
Outline
LogoAnimator.cs
(2 of 2)
For every Tick event, display the next image

71. Performance Tip 17.2
It is more efficient to load an animation’s frames as one image than to load each image separately. (A painting program, such as Adobe Photoshop®, or Jasc® Paint Shop Pro™, can be used to combine the animation’s frames into one image.) If the images are being loaded separately from the Web, each loaded image requires a separate connection to the site on which the images are stored; this process can result in poor performance.

72. Outline (1 of 2) Enumeration for chess pieces
ChessPiece.cs
(1 of 2)
Enumeration for chess pieces
Define the image location on the chessboard

73. Outline
ChessPiece.cs
(2 of 2)
Extract a sub-image that contains only the current piece’s bitmap data
Draws the chess piece
Change the chess piece location

74. private instance variables representing the chessboard and pieces
Outline
ChessGame.cs
(1 of 11)
private instance variables representing the chessboard and pieces

75. Outline
ChessGame.cs
(2 of 11)
Load the chess board tile images from a specified location
Load the images for the white chess pieces

76. Load the images for the black chess pieces
Outline
ChessGame.cs
(3 of 11)
Load the images for the black chess pieces
Put the chess pieces in the appropriate position using a switch statement

77. Add the pawns to its appropriate positions
Outline
ChessGame.cs
(4 of 11)
Add the pawns to its appropriate positions

78. Shift the origin of the form by 24 pixels
Outline
ChessGame.cs
(5 of 11)
Shift the origin of the form by 24 pixels

79. Outline (6 of 11) Draw the chessboard tiles
ChessGame.cs
(6 of 11)
Draw the chessboard tiles
Retrieve the piece’s rectangle
Determine if the specified point is contained in the rectangles

80. Outline (7 of 11) Draw every chess piece
ChessGame.cs
(7 of 11)
Draw every chess piece
Determine if user selected a piece
Create a region of 2 tiles from every direction of the mouse cursor

81. Outline
Set and center the selected piece location to the mouse-cursor position
ChessGame.cs
(8 of 11)
Refresh only the specified region
Determine is there is a collision
Align the current piece to the closest square and deselect it

82. Remove the selected piece
Outline
Remove the selected piece
ChessGame.cs
(9 of 11)
Refresh chessboard

83. Outline
ChessGame.cs
(10 of 11)

84. Outline
ChessGame.cs
(11 of 11)

85. 17.13 Window Media Player Windows Media Player control
Type AxMediaPlayer
Enables an application to play video and sound in many multimedia formats
URL property
Specifies the file that Windows Media Player is currently using

86. Outline (1 of 2) Allow the user to select a file
MediaPlayer Test.cs
(1 of 2)
Allow the user to select a file
Specifies the file that Windows Media Player is using

87. Outline
MediaPlayer Test.cs
(2 of 2)

88. 17.14 Microsoft Agent Microsoft Agent
Add interactive animated characters to Windows applications or Web pages
Characters can speak and respond to user input
Via speech recognition and synthesis
The control uses a speech recognition engine
Translates vocal sound input from a microphone to language that the computer understands
Programmers can even create their own animated characters, with the help from:
Microsoft Agent Character Editor
Microsoft Linguistic Sound Editing Tool

89. Fig. 17.28 | Peedy introducing himself when the window opens.
Bubble contains text equivalent to words Peedy speaks
Fig | Peedy introducing himself when the window opens.

90. Look-and-Feel Observation 17.1
Agent characters remain on top of all active windows while a Microsoft Agent application is running. Their motions are not limited by the boundaries of the browser or application window.

91. Fig. 17.29 | Peedy’s Pleased animation.

92. Fig. 17.30 | Peedy’s reaction when he is clicked.
Pointer clicking Peedy
Fig | Peedy’s reaction when he is clicked.

93. Fig. 17.31 | Peedy flying animation.

94. Fig. 17.32 | Peedy waiting for speech input.
Pizza style options
Tool tip indicates that Peedy is waiting for user input
Fig | Peedy waiting for speech input.

95. Fig. 17.33 | Peedy repeating a request for Seattle-style pizza.
Tool tip indicates recognized speech
Fig | Peedy repeating a request for Seattle-style pizza.

96. Fig. 17.34 | Peedy repeating a request for anchovies as an additional topping.

97. Fig. 17.35 | Peedy recounting the order.

98. Fig. 17.36 | Peedy calculating the total.

99. Outline
Agent.cs
(1 of 8)
Load Microsoft agents

100. Outline Show and set default agent to Genie (2 of 8)
Agent.cs
(2 of 8)
Prompt user for an input for what he/she wants the agent to say
Agent will speak the user’s input

101. Outline Stop current animation and plays specified animation (3 of 8)
Agent.cs
(3 of 8)
Switch Microsoft agent

102. Add a new command to the current character
Outline
Agent.cs
(4 of 8)
Create an IEnumerator object to iterate through the characters’ animations
Clear existing items
Add a new command to the current character

103. Outline Add the “MoveToMouse” command to the agent (5 of 8)
Agent.cs
(5 of 8)
Stop current animation and play specified animation
Assign the userInput object to an IAgentCtlUserInput object to identify command

104. Outline (6 of 8) Moves the agent to the specified screen position
Agent.cs
(6 of 8)
Moves the agent to the specified screen position
Stop current animation and play specified animation

105. Outline (7 of 8) Agent.cs Genie performing Writing animation
Drop-down list from which you can choose a character animation
Writing animation selected
Tool tip indicating that Merlin is listening for a voice command
Merlin responding to user spoken animation command.
Tool tip shows the words that the speech recognition engine translated to the application
Outline
Agent.cs
(7 of 8)

106. Outline (8 of 8) Agent.cs Text input
Peedy repeating the words entered by the user. Peedy’s speech can be heard through your computer’s speakers.
Robby responding to being clicked with the mouse pointer.
The commands pop-up window
Agent.cs
(8 of 8)

107. 17.14 Microsoft Agent (Cont.)
IAgentCtlCharacter
Represents the current character
Method Play
Plays an animation
Accepts a string representing one of the predefined animations for the character
Method Speak
Receives a string that the character should speak
Method MoveTo
Moves the character to the specified position on the screen

108. 17.14 Microsoft Agent (Cont.)
Commands
Method Add
Adds a new command to the command list
Property Commands
List of valid commands that is contained in the IAgentCtlCharacter
Commands can be viewed in the Commands pop-up window
Displays when the user right-clicks an Agent character
Triggered when the user selects the command from the Commands pop- up window or speaks the voice input into a microphone
Command logic is handled in the Command event handler of the AxAgent control
When a user clicks a character, the AxAgent control’s ClickEvent event handler executes