1.  2006 Pearson Education, Inc. All rights reserved. 1 17 Graphics and Multimedia

2.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 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, string s 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.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 6 17.2 Drawing Classes and the Coordinate System System.Drawing – Class Graphics Methods used for drawing string s, 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.  2006 Pearson Education, Inc. All rights reserved. 7 Fig. 17.1 | System.Drawing namespace’s classes and structures.

8.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 10 Fig. 17.2 | GDI+ coordinate system. Units are measured in pixels.

11.  2006 Pearson Education, Inc. All rights reserved. 11 17.3 Graphics Contexts and Graphical Objects Graphics – 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.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 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 byte s 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.  2006 Pearson Education, Inc. All rights reserved. 14 Fig. 17.3 | Color structure static constants and their RGB values.

15.  2006 Pearson Education, Inc. All rights reserved. 15 Fig. 17.4 | Color structure members.

16.  2006 Pearson Education, Inc. All rights reserved. 16 Fig. 17.5 | Classes that derive from class Brush.

17.  2006 Pearson Education, Inc. All rights reserved. 17 Outline ShowColors.cs (1 of 4) private instance variable to store the back rectangle's color 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.  2006 Pearson Education, Inc. All rights reserved. 18 Outline ShowColors.cs (2 of 4) Create SolidBrush object for drawing solid shape 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 Draw the front rectangle to Graphics object Output the Argb value of front rectangle by drawing to the Graphics object

19.  2006 Pearson Education, Inc. All rights reserved. 19 Outline ShowColors.cs (3 of 4) Allow user to change background color Call OnPaint to redraw Allow user to change the front rectangle’s color Call OnPaint to redraw

20.  2006 Pearson Education, Inc. All rights reserved. 20 Outline ShowColors.cs (4 of 4)

21.  2006 Pearson Education, Inc. All rights reserved. 21 Outline 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.  2006 Pearson Education, Inc. All rights reserved. 22 Outline ShowColors Complex.cs (2 of 3) Change color to user’s selection Allow user to choose from a variety of colors

23.  2006 Pearson Education, Inc. All rights reserved. 23 Outline ShowColors Complex.cs (3 of 3)

24.  2006 Pearson Education, Inc. All rights reserved. 24 17.5 Font Control Font – 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.  2006 Pearson Education, Inc. All rights reserved. 25 Fig. 17.8 | Font class read-only properties.

26.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 27 Outline UsingFonts.cs (1 of 3) Change font style to bold Arial Change font style to Times New Roman

28.  2006 Pearson Education, Inc. All rights reserved. 28 Outline UsingFonts.cs (2 of 3) Change font style to italic Courier New Change font style to strikeout Tahoma Output font styles to screen by drawing to graphicsObject

29.  2006 Pearson Education, Inc. All rights reserved. 29 Outline UsingFonts.cs (3 of 3) Output font styles to screen by drawing to graphicsObject

30.  2006 Pearson Education, Inc. All rights reserved. 30 Fig. 17.10 | Font metrics illustration.

31.  2006 Pearson Education, Inc. All rights reserved. 31 Fig. 17.11 | FontFamily methods that return font-metric information.

32.  2006 Pearson Education, Inc. All rights reserved. 32 Outline UsingFont Metrics.cs (1 of 3) Create a FontFamily object to determine the front metrics of Arial

33.  2006 Pearson Education, Inc. All rights reserved. 33 Outline UsingFont Metrics.cs (2 of 3) Output font style’s ascent 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.  2006 Pearson Education, Inc. All rights reserved. 34 Outline UsingFont Metrics.cs (3 of 3) Output font style’s descent Output font style’s height Output font style’s spacing

35.  2006 Pearson Education, Inc. All rights reserved. 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 int s – Methods that draw solid shapes Typically require as arguments a Brush and four int s – The first two int arguments represent the coordinates of the upper- left corner of the shape – The last two int s 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.  2006 Pearson Education, Inc. All rights reserved. 36 Fig. 17.13 | Graphics methods that draw lines, rectangles and ovals. (Part 1 of 2.)

37.  2006 Pearson Education, Inc. All rights reserved. 37 Fig. 17.13 | Graphics methods that draw lines, rectangles and ovals. (Part 2 of 2.)

38.  2006 Pearson Education, Inc. All rights reserved. 38 Outline LinesRectangles Ovals.cs (1 of 3) Draw the back rectangle filled in with blue

39.  2006 Pearson Education, Inc. All rights reserved. 39 Outline LinesRectangles Ovals.cs (2 of 3) Draw lines to connect the rectangle to make a box Draw the front rectangle Draw the bottom ellipse filled in with red Draw lines to connect the ellipses to make a cylinder

40.  2006 Pearson Education, Inc. All rights reserved. 40 Outline LinesRectangles Ovals.cs (3 of 3) Draw the top ellipse

41.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 42 Fig. 17.15 | Ellipse bounded by a rectangle.

43.  2006 Pearson Education, Inc. All rights reserved. 43 Fig. 17.16 | Positive and negative arc angles.

44.  2006 Pearson Education, Inc. All rights reserved. 44 Fig. 17.17 | Graphics methods for drawing arcs.

45.  2006 Pearson Education, Inc. All rights reserved. 45 Outline DrawingArcs.cs (1 of 3) Draws a circle

46.  2006 Pearson Education, Inc. All rights reserved. 46 Outline DrawingArcs.cs (2 of 3) Draws an arc from 0 to 110 degrees 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.  2006 Pearson Education, Inc. All rights reserved. 47 Outline DrawingArcs.cs (3 of 3)

48.  2006 Pearson Education, Inc. All rights reserved. 48 17.8 Drawing Polygons and Polylines Polygons – 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.  2006 Pearson Education, Inc. All rights reserved. 49 Fig. 17.19 | Graphics methods for drawing polygons.

50.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 51 Outline 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.  2006 Pearson Education, Inc. All rights reserved. 52 Outline DrawPolygons.cs (3 of 5) Refresh and redraw

53.  2006 Pearson Education, Inc. All rights reserved. 53 Outline DrawPolygons.cs (4 of 5) Check to see if user pressed “Cancel” Change to the appropriate color

54.  2006 Pearson Education, Inc. All rights reserved. 54 Outline DrawPolygons.cs (5 of 5)

55.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 56 Outline DrawShapes.cs (1 of 4) Create a Rectangle object Enable user to draw with a color gradient

57.  2006 Pearson Education, Inc. All rights reserved. 57 Outline DrawShapes.cs (2 of 4) Draw a filled gradient ellipse Draw a red outlined rectangle Create a new Bitmap image Fill Bitmap Retrieves Graphics object associate with an Image

58.  2006 Pearson Education, Inc. All rights reserved. 58 Outline DrawShapes.cs (3 of 4) Fill Bitmap Draw rectangle with Bitmap image Draw white pie arc Draw a green line Draw a yellow dashed line

59.  2006 Pearson Education, Inc. All rights reserved. 59 Outline DrawShapes.cs (4 of 4)

60.  2006 Pearson Education, Inc. All rights reserved. 60 Outline DrawStarsForm.cs (1 of 3) Create two arrays of x and y points where stars will be drawn

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

62.  2006 Pearson Education, Inc. All rights reserved. 62 Outline DrawStarsForm.cs (3 of 3)

63.  2006 Pearson Education, Inc. All rights reserved. 63 17.10 Introduction to Multimedia Multimedia applications demand extraordinary computing power – Today’s ultrafast processors make multimedia-based applications commonplace

64.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 65 Outline DisplayLogoForm.cs (1 of 3) Load image from specified location

66.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 67 Outline DisplayLogoForm.cs (3 of 3)

68.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 69 Outline LogoAnimator.cs (1 of 2) Store and load the images that will be displayed Start by displaying the first image

70.  2006 Pearson Education, Inc. All rights reserved. 70 Outline LogoAnimator.cs (2 of 2) For every Tick event, display the next image

71.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 72 Outline ChessPiece.cs (1 of 2) Enumeration for chess pieces Define the image location on the chessboard

73.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 74 Outline ChessGame.cs (1 of 11) private instance variables representing the chessboard and pieces

75.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 76 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.  2006 Pearson Education, Inc. All rights reserved. 77 Outline ChessGame.cs (4 of 11) Add the pawns to its appropriate positions

78.  2006 Pearson Education, Inc. All rights reserved. 78 Outline ChessGame.cs (5 of 11) Shift the origin of the form by 24 pixels

79.  2006 Pearson Education, Inc. All rights reserved. 79 Outline ChessGame.cs (6 of 11) Draw the chessboard tiles Determine if the specified point is contained in the rectangles Retrieve the piece’s rectangle

80.  2006 Pearson Education, Inc. All rights reserved. 80 Outline 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.  2006 Pearson Education, Inc. All rights reserved. 81 Outline ChessGame.cs (8 of 11) Set and center the selected piece location to the mouse- cursor position Refresh only the specified region Determine is there is a collision Align the current piece to the closest square and deselect it

82.  2006 Pearson Education, Inc. All rights reserved. 82 Outline ChessGame.cs (9 of 11) Refresh chessboard Remove the selected piece

83.  2006 Pearson Education, Inc. All rights reserved. 83 Outline ChessGame.cs (10 of 11)

84.  2006 Pearson Education, Inc. All rights reserved. 84 Outline ChessGame.cs (11 of 11)

85.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 86 Outline MediaPlayer Test.cs (1 of 2) Allow the user to select a file Specifies the file that Windows Media Player is using

87.  2006 Pearson Education, Inc. All rights reserved. 87 Outline MediaPlayer Test.cs (2 of 2)

88.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 89 Fig. 17.28 | Peedy introducing himself when the window opens. Bubble contains text equivalent to words Peedy speaks

90.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 91 Fig. 17.29 | Peedy’s Pleased animation.

92.  2006 Pearson Education, Inc. All rights reserved. 92 Fig. 17.30 | Peedy’s reaction when he is clicked. Pointer clicking Peedy

93.  2006 Pearson Education, Inc. All rights reserved. 93 Fig. 17.31 | Peedy flying animation.

94.  2006 Pearson Education, Inc. All rights reserved. 94 Fig. 17.32 | Peedy waiting for speech input. Pizza style optionsTool tip indicates that Peedy is waiting for user input

95.  2006 Pearson Education, Inc. All rights reserved. 95 Fig. 17.33 | Peedy repeating a request for Seattle-style pizza. Tool tip indicates recognized speech

96.  2006 Pearson Education, Inc. All rights reserved. 96 Fig. 17.34 | Peedy repeating a request for anchovies as an additional topping.

97.  2006 Pearson Education, Inc. All rights reserved. 97 Fig. 17.35 | Peedy recounting the order.

98.  2006 Pearson Education, Inc. All rights reserved. 98 Fig. 17.36 | Peedy calculating the total.

99.  2006 Pearson Education, Inc. All rights reserved. 99 Outline Agent.cs (1 of 8) Load Microsoft agents

100.  2006 Pearson Education, Inc. All rights reserved. 100 Outline Agent.cs (2 of 8) Show and set default agent to Genie Prompt user for an input for what he/she wants the agent to say Agent will speak the user’s input

101.  2006 Pearson Education, Inc. All rights reserved. 101 Outline Agent.cs (3 of 8) Stop current animation and plays specified animation Switch Microsoft agent

102.  2006 Pearson Education, Inc. All rights reserved. 102 Outline Agent.cs (4 of 8) Create an IEnumerator object to iterate through the characters’ animations Add a new command to the current character Clear existing items

103.  2006 Pearson Education, Inc. All rights reserved. 103 Outline Agent.cs (5 of 8) Stop current animation and play specified animation Assign the userInput object to an IAgentCtlUserInput object to identify command Add the “MoveToMouse” command to the agent

104.  2006 Pearson Education, Inc. All rights reserved. 104 Outline Agent.cs (6 of 8) Moves the agent to the specified screen position Stop current animation and play specified animation

105.  2006 Pearson Education, Inc. All rights reserved. 105 Outline Agent.cs (7 of 8) 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

106.  2006 Pearson Education, Inc. All rights reserved. 106 Outline Agent.cs (8 of 8) 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

107.  2006 Pearson Education, Inc. All rights reserved. 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.  2006 Pearson Education, Inc. All rights reserved. 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