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

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

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

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

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)

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)

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

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);

Drawing simple graphics

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

Drawing simple graphics

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);

Drawing simple graphics

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

Drawing simple graphics

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

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)

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

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();

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); }

Drawing simple graphics Demos\Draw Polygons\DrawPolygon.exe

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

Colour control and colour palettes

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

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

Colour control and colour palettes

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;

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

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

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);

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

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();

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

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!

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

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

Displaying and processing images Unused Width Scan0 Height Stride

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();

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

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();

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

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