1. Object Oriented Programming Graphics and Multimedia Dr. Mike Spann m.spann@bham.ac.uk

2. Contents Introduction Introduction Drawing simple graphics Drawing simple graphics Colour control an colour palettes Colour control an colour palettes Displaying and processing images Displaying and processing images Windows Media Player Windows Media Player Summary Summary

3. Introduction C# has extensive support for graphics and multimedia C# has extensive support for graphics and multimedia The FCL has sophisticated drawing capabilities within the System.Drawing namespace The FCL has sophisticated drawing capabilities within the System.Drawing namespace  Selection of colours and fonts  Drawing shapes and text Also as we have seen, the FCL contains an Image class allowing image processing applications Also as we have seen, the FCL contains an Image class allowing image processing applications Multimedia capabilities are provided by the Windows Media Player control which allow applications to play video and audio Multimedia capabilities are provided by the Windows Media Player control which allow applications to play video and audio

4. Drawing simple graphics Object of class Graphics control the drawing of graphics in a C# application Object of class Graphics control the drawing of graphics in a C# application They set the graphics context They set the graphics context  Colours  Fonts  Linestyles They also contain methods for drawing graphics They also contain methods for drawing graphics  Simple shapes  Text  Rendering images

5. Drawing simple graphics It’s important to realise that drawing graphics is an event driven process It’s important to realise that drawing graphics is an event driven process All derived classes of the Form class inherit an OnPaint() method All derived classes of the Form class inherit an OnPaint() method  This method is called when a component must be redrawn in response to a paint event  The method is overrided in user classes to draw the required graphics protected override void OnPaint(PaintEventArgs e)

6. Drawing simple graphics Alternatively an event handler can be written to handle the paint event Alternatively an event handler can be written to handle the paint event These methods are normally called automatically when a form needs to be repainted, for example when the form is covered/uncovered or moved These methods are normally called automatically when a form needs to be repainted, for example when the form is covered/uncovered or moved It is also called when the form’s Invalidate() method is called which causes it to be refreshed It is also called when the form’s Invalidate() method is called which causes it to be refreshed protected void MyForm_Paint(object sender, PaintEventArgs e)

7. Drawing simple graphics Drawing simple graphics involves calling the relevant method of a Graphics object to draw the desired shape in the Paint event handler Drawing simple graphics involves calling the relevant method of a Graphics object to draw the desired shape in the Paint event handler  A SolidBrush object is created fill a region  Pen objects are used to draw lines  Other more sophisticated objects can fill regions with textured patterns

8. Drawing simple graphics public partial class ColourDemoForm : Form { public ColourDemoForm() { InitializeComponent(); } protected override void OnPaint(PaintEventArgs e) { Graphics graphics = e.Graphics; // Display rectangle SolidBrush brush = new SolidBrush(Color.Orange); graphics.FillRectangle(brush, 10, 10, 100, 100); // Display descriptive text SolidBrush textBrush = new SolidBrush(Color.BlueViolet); graphics.DrawString("Demonstrating simple graphics and colour", this.Font, textBrush, 10, 150); }

9. Drawing simple graphics

10. We can easily change the type and style of the font and add new shapes We can easily change the type and style of the font and add new shapes Fonts are creates with the Font class Fonts are creates with the Font class  The type, style and fontsize are passed to the constructor We can draw filled shapes with a SolidBrush object and open shapes with a Pen object We can draw filled shapes with a SolidBrush object and open shapes with a Pen object

11. Drawing simple graphics

12. public partial class ColourDemoForm : Form { public ColourDemoForm() { InitializeComponent(); } protected override void OnPaint(PaintEventArgs e) { Graphics graphics = e.Graphics; // Display rectangle SolidBrush brush = new SolidBrush(Color.Orange); graphics.FillRectangle(brush, 10, 10, 100, 100); Pen pen = new Pen(Color.DarkTurquoise,4); graphics.DrawEllipse(pen, new Rectangle(150, 150, 150, 100)); // Display descriptive text FontStyle style = FontStyle.Bold|FontStyle.Italic; Font arial = new Font( "Arial", 14, style ); SolidBrush textBrush = new SolidBrush(Color.BlueViolet); graphics.DrawString("Demonstrating simple graphics and colour", arial, textBrush, 10, 300); }

13. Drawing simple graphics

14. We can create more interactive graphical application which are under mouse control We can create more interactive graphical application which are under mouse control For example we can interactively specify the vertices of a polygon and use the Graphics.DrawPolygon() method to draw the polygon through the vertices For example we can interactively specify the vertices of a polygon and use the Graphics.DrawPolygon() method to draw the polygon through the vertices  We can initialize our vertices in a MouseDown() event handler Such an application could be the basis of an interactive drawing application Such an application could be the basis of an interactive drawing application

15. Drawing simple graphics

17. It is simple to create our GUI for our drawing application using design view It is simple to create our GUI for our drawing application using design view We have added 2 radio buttons to select either an open or closed polygon We have added 2 radio buttons to select either an open or closed polygon  Adding any number of radio buttons to a container enforces only one of them to be selected  Check boxes can have multiple selections

18. Drawing simple graphics public partial class PolygonForm : Form { public PolygonForm() { InitializeComponent(); } private void drawPanel_MouseDown(object sender, MouseEventArgs e) { } private void drawPanel_Paint(object sender, PaintEventArgs e) { } private void clearButton_Click(object sender, EventArgs e) { } private void openPolygonSelectButton_CheckedChanged(object sender, EventArgs e) { } private void closedPolygonSelectButton_CheckedChanged(object sender, EventArgs e) { }

19. Drawing simple graphics Writing the code for the event handlers is straightforward Writing the code for the event handlers is straightforward The Paint event handlers draws the polygon as points are added to an ArrayList structure The Paint event handlers draws the polygon as points are added to an ArrayList structure  We draw the polygons on a separate Panel object  The Paint event handler is called using the Invalidate() method

20. Drawing simple graphics public partial class PolygonForm : Form { private ArrayList vertices= new ArrayList(); private bool openPolygon = true; private Pen pen = new Pen(Color.Red); private SolidBrush brush = new SolidBrush(Color.Yellow); public PolygonForm() { InitializeComponent(); } private void drawPanel_MouseDown(object sender, MouseEventArgs e) { vertices.Add(new Point(e.X, e.Y)); drawPanel.Invalidate(); } private void drawPanel_Paint(object sender, PaintEventArgs e) { // Paint event handler } private void clearButton_Click(object sender, EventArgs e) { vertices.Clear(); drawPanel.Invalidate(); } private void openPolygonSelectButton_CheckedChanged(object sender, EventArgs e) { openPolygon = true; drawPanel.Invalidate(); } private void closedPolygonSelectButton_CheckedChanged(object sender, EventArgs e) { openPolygon = false; drawPanel.Invalidate(); }

21. Drawing simple graphics private void drawPanel_Paint(object sender, PaintEventArgs e) { Graphics graphics = e.Graphics; if (vertices.Count > 1) { Point[] verticesArray=(Point[])(vertices.ToArray(vertices[0].GetType())); if (openPolygon) graphics.DrawPolygon(pen, verticesArray); else graphics.FillPolygon(brush, verticesArray); } The Paint event handler calls the relevant method to draw an open or filled polygon The Paint event handler calls the relevant method to draw an open or filled polygon The main work involved is converting the ArrayList object to a Point array which can be done using the ArrayList.ToArray method The main work involved is converting the ArrayList object to a Point array which can be done using the ArrayList.ToArray method

22. Drawing simple graphics Demos\Draw Polygons\DrawPolygon.exe Demos\Draw Polygons\DrawPolygon.exe Demos\Draw Polygons\DrawPolygon.exe Demos\Draw Polygons\DrawPolygon.exe

23. Colour control and colour palettes Colour is handled using a class Color Colour is handled using a class Color An ARGB representation is used An ARGB representation is used  Each channel is 0-255  (A)lpha channel is the opacity  RGB channels are the red, blue and green components  The larger the value, the greater the amount of colour  Color defines a number of static constants for pre-defined colours

24. Colour control and colour palettes

25. The alpha channel in the ARGB representation represents the opacity of the colour The alpha channel in the ARGB representation represents the opacity of the colour  The 0 is transparant  255 is opaque  We can blend two colours using intermediate alpha values

26. Colour control and colour palettes The ColorDialog class is a powerful feature enabling interactive selection of colours from a palette The ColorDialog class is a powerful feature enabling interactive selection of colours from a palette  Can be used in many graphical applications  The user can create custom colours from the palette, not just pre-selected ones

27. Colour control and colour palettes

28. public partial class ColourPaletteDemoForm : Form { private static ColorDialog colorChooser = new ColorDialog(); public ColourPaletteDemoForm() { InitializeComponent(); } private void textColourButton_Click(object sender, EventArgs e) { DialogResult result = colorChooser.ShowDialog(); if (result==DialogResult.Cancel) return; messageLabel.ForeColor = colorChooser.Color; } private void BackgroundColourButton_Click(object sender, EventArgs e) { colorChooser.FullOpen = true; DialogResult result = colorChooser.ShowDialog(); if (result == DialogResult.Cancel) return; this.BackColor = colorChooser.Color; }

29. Colour control and colour palettes Demos\Colour Palette\ColourPaletteDemo.exe Demos\Colour Palette\ColourPaletteDemo.exe Demos\Colour Palette\ColourPaletteDemo.exe Demos\Colour Palette\ColourPaletteDemo.exe

30. Displaying and processing images C# contains extensive support for image manipulation C# contains extensive support for image manipulation We have already seen how we can develop a simple application to load and display an image from file We have already seen how we can develop a simple application to load and display an image from file This application used the Image class This application used the Image class  The Graphics.DrawImage() method displayed the image Often applications require access to the individual (RGB) pixels of an image in order to manipulate the image in some way Often applications require access to the individual (RGB) pixels of an image in order to manipulate the image in some way

31. Displaying and processing images Objects of class Bitmap hold images and allow the image pixels to be accessed Objects of class Bitmap hold images and allow the image pixels to be accessed Most Image methods apply to Bitmaps Most Image methods apply to Bitmaps  FromFile(), Save() etc In addition there are getPixel() and setPixel() methods for image access In addition there are getPixel() and setPixel() methods for image access A bitmap object can easily be created from an image object A bitmap object can easily be created from an image object Bitmap bitmap = new Bitmap(image);

32. Displaying and processing images For example, we can add an extra menu item to our image viewer tool to process images loaded from file For example, we can add an extra menu item to our image viewer tool to process images loaded from file  Sub-menu items can include inverting the colours in an image  red->255-red  green->255-green  blue->255-blue  We thus need to directly access rgb pixel values

33. public partial class ImageForm : Form { private Image image; private Bitmap bitmap; public ImageForm(Image im) { image = im; bitmap = new Bitmap(image); InitializeComponent(); } private void ImageForm_Paint(object sender, PaintEventArgs e) { Graphics graphics = e.Graphics; graphics.DrawImage(bitmap, new Point(20,20)); } public void invertImage() { for (int x = 0; x < bitmap.Width; x++) for (int y = 0; y < bitmap.Height; y++) { Color rgb=bitmap.GetPixel(x,y); Color invrgb = Color.FromArgb(255 - rgb.R, 255 - rgb.G, 255 - rgb.B); bitmap.SetPixel(x, y, invrgb); } Invalidate(); }

34. Displaying and processing images Demos\Image Processor\Image Viewer.exe Demos\Image Processor\Image Viewer.exe Demos\Image Processor\Image Viewer.exe Demos\Image Processor\Image Viewer.exe

35. Displaying and processing images For efficient image processing applications, including real time imaging applications, C# provides an unsafe mode allowing rapid image access For efficient image processing applications, including real time imaging applications, C# provides an unsafe mode allowing rapid image access  Code is run outside the normal managed block avoiding the overheads of CLR runtime safety checks  Allows the use of pointers!

36. Displaying and processing images The Bitmap class provides the LockBits() and corresponding UnlockBits() methods which enable you to fix a portion of the bitmap pixel data array in memory The Bitmap class provides the LockBits() and corresponding UnlockBits() methods which enable you to fix a portion of the bitmap pixel data array in memory Allows direct access to pixel data enabling the data to be modified and written back into the bitmap Allows direct access to pixel data enabling the data to be modified and written back into the bitmap LockBits() returns a BitmapData object that describes the layout and position of the data in the locked array LockBits() returns a BitmapData object that describes the layout and position of the data in the locked array There is a nice article at http://www.mfranc.com/programming/operacje-na- bitmapkach-net-1/ including some benchmarking to compare execution speeds There is a nice article at http://www.mfranc.com/programming/operacje-na- bitmapkach-net-1/ including some benchmarking to compare execution speeds http://www.mfranc.com/programming/operacje-na- bitmapkach-net-1/ http://www.mfranc.com/programming/operacje-na- bitmapkach-net-1/

37. Displaying and processing images The BitmapData class contains the following important properties The BitmapData class contains the following important properties  Scan0 - The address in memory of the fixed data array  Stride - The width, in bytes, of a single row of pixel data. Usually data is packed into rows that begin on a four byte boundary and are padded out to a multiple of four bytes so the stride doesn’t equal the image width  PixelFormat -The actual pixel format of the data. This is important for finding the right bytes  Width - The width of the locked image  Height - The height of the locked image

38. Displaying and processing images Stride Height Width Scan0 Unused

39. Displaying and processing images public void invertImage() { BitmapData data = bitmap.LockBits(new Rectangle(0, 0,bitmap.Width, bitmap.Height), ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb); unsafe { byte* imgPtr = (byte*)(data.Scan0); for (int i = 0; i < data.Height; i++) { for (int j = 0; j < data.Width; j++) { (*imgPtr) = (byte)( 255 - (*imgPtr++)); //R (*imgPtr) = (byte) (255 - (*imgPtr++)); //G (*imgPtr) =(byte)( 255 - (*imgPtr++)); //B } imgPtr += data.Stride - data.Width * 3; } bitmap.UnlockBits(data); Invalidate(); }

40. Windows Media Player The Windows Media Player control allows a user to create applications which can play video and audio The Windows Media Player control allows a user to create applications which can play video and audio It enables the use of many different types of media formats It enables the use of many different types of media formats  MPEG  AVI  WAV  MIDI The control has a user interface containing buttons to control the playing of the media object The control has a user interface containing buttons to control the playing of the media object

42. Windows Media Player public partial class MediaPlayerForm : Form { public MediaPlayerForm() { InitializeComponent(); } private void openToolStripMenuItem_Click(object sender, EventArgs e) { openMediaFileDialog.ShowDialog(); mediaPlayer.URL = openMediaFileDialog.FileName; // mediaPlayer.openPlayer(mediaPlayer.URL);// For normal GUI } private void exitToolStripMenuItem_Click(object sender, EventArgs e) { Application.Exit(); }

43. Windows Media Player The name of the media item to play is set using the URL property of the media player object (of class AxWindowsMediaPlayer) The name of the media item to play is set using the URL property of the media player object (of class AxWindowsMediaPlayer)  The media item (video) is played inside the bounds of the Form in which the media player control is embedded  Demos\Media Player Embedded\MediaPlayer.exe Demos\Media Player Embedded\MediaPlayer.exe Demos\Media Player Embedded\MediaPlayer.exe  We can also get the normal media player GUI by calling the openPlayer() method  Demos\Media Player\MediaPlayer.exe Demos\Media Player\MediaPlayer.exe Demos\Media Player\MediaPlayer.exe

44. Summary We have seen how we can draw simple graphics such as basic shapes and text We have seen how we can draw simple graphics such as basic shapes and text We have looked at how graphics is drawn in an event handler for the Paint event We have looked at how graphics is drawn in an event handler for the Paint event We have seen how colour is displayed using the alpha, red, green and blue channel and how we can select our own colour palette inside an application We have seen how colour is displayed using the alpha, red, green and blue channel and how we can select our own colour palette inside an application We have seen how we can display and process images We have seen how we can display and process images We have seen how we can embed the Windows Media Player into an application to display multimedia objects such as video We have seen how we can embed the Windows Media Player into an application to display multimedia objects such as video