1. Object Oriented Programming
Graphics and Multimedia
Dr. Mike Spann

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

3. Introduction C# has extensive support for graphics and multimedia
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
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
They set the graphics context
Colours
Fonts
Linestyles
They also contain methods for drawing graphics
Simple shapes
Text
Rendering images

5. Drawing simple graphics
Its important to realise that drawing graphics is an event driven process
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
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
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
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. Drawing simple graphics
We can easily change the type and style of the font and add new shapes
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

11. Drawing simple graphics

12. 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);
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. Drawing simple graphics
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
We can initialize our vertices in a MouseDown() event handler
Such an application could be the basis of an interactive drawing application

15. Drawing simple graphics

17. Drawing simple graphics
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
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
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
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
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); }

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

23. Colour control and colour palettes
Colour is handled using a class Color
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. Colour control and colour palettes
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
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. Colour control and colour palettes
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;
if (result == DialogResult.Cancel)
this.BackColor = colorChooser.Color;

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

30. Displaying and processing images
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
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

31. Displaying and processing images
Objects of class Bitmap hold images and allow the image pixels to be accessed
Most Image methods apply to Bitmaps
FromFile(), Save() etc
In addition there are getPixel() and setPixel() methods for image access
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
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, rgb.B);
bitmap.SetPixel(x, y, invrgb);
Invalidate();

34. Displaying and processing images
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
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 Bitmap.LockBits() and corresponding Bitmap.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
LockBits() returns a BitmapData object that describes the layout and position of the data in the locked array

37. Displaying and processing images
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
Unused
Width
Scan0
Height
Stride

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)( (*imgPtr++)); //R
(*imgPtr) = (byte) (255 - (*imgPtr++)); //G
(*imgPtr) =(byte)( (*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
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

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 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
We can also get the normal media player GUI by calling the openPlayer() method
Demos\Media Player\MediaPlayer.exe

44. Summary
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 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 embed the Windows Media Player into an application to display multimedia objects such as video