Object Oriented Programming Graphics and Multimedia Dr. Mike Spann [email protected]

Object Oriented Programming

Graphics and MultimediaGraphics and Multimedia

Dr. Mike SpannDr. Mike Spann

[email protected]@bham.ac.uk

Contents

IntroductionIntroduction Drawing simple graphicsDrawing simple graphics Colour control an colour palettesColour control an colour palettes Displaying and processing imagesDisplaying and processing images Windows Media PlayerWindows Media Player SummarySummary

Introduction C# has extensive support for graphics and multimediaC# has extensive support for graphics and multimedia The FCL has sophisticated drawing capabilities The FCL has sophisticated drawing capabilities

within the within the System.DrawingSystem.Drawing namespace namespace Selection of colours and fontsSelection of colours and fonts Drawing shapes and text Drawing shapes and text

Also as we have seen, the FCL contains an Also as we have seen, the FCL contains an ImageImage class allowing image processing applicationsclass allowing image processing applications

Multimedia capabilities are provided by the Multimedia capabilities are provided by the Windows Windows Media Player Media Player control which allow applications to control which allow applications to play video and audioplay video and audio

Drawing simple graphics Object of class Object of class GraphicsGraphics control the drawing of graphics in a control the drawing of graphics in a

C# applicationC# application They set the They set the graphics contextgraphics context

ColoursColours FontsFonts LinestylesLinestyles

They also contain methods for drawing graphicsThey also contain methods for drawing graphics Simple shapesSimple shapes TextText Rendering imagesRendering images

Drawing simple graphics

It’s important to realise that drawing graphics It’s important to realise that drawing graphics is an event driven processis an event driven process

All derived classes of the All derived classes of the FormForm class inherit an class inherit an OnPaint()OnPaint() method method This method is called when a component This method is called when a component

must be redrawn in response to a paint event must be redrawn in response to a paint event The method is overrided in user classes to The method is overrided in user classes to

draw the required graphicsdraw the required graphics

protected override void OnPaint(PaintEventArgs e)

Drawing simple graphics Alternatively an event handler can be written to Alternatively an event handler can be written to

handle the paint eventhandle the paint event

These methods are normally called automatically These methods are normally called automatically when a form needs to be repainted, for example when a form needs to be repainted, for example when the form is covered/uncovered or movedwhen the form is covered/uncovered or moved

It is also called when the form’s It is also called when the form’s Invalidate()Invalidate() method is called which causes it to be refreshedmethod is called which causes it to be refreshed

protected void MyForm_Paint(object sender, PaintEventArgs e)


Drawing simple graphics involves calling the Drawing simple graphics involves calling the relevant method of a relevant method of a Graphics Graphics object to draw object to draw the desired shape in the the desired shape in the PaintPaint event handler event handler A A SolidBrush SolidBrush object is created fill a regionobject is created fill a region PenPen objects are used to draw lines objects are used to draw lines Other more sophisticated objects can fill Other more sophisticated objects can fill

regions with textured patternsregions with textured patterns


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



We can easily change the type and style of We can easily change the type and style of the font and add new shapesthe font and add new shapes

Fonts are creates with the Fonts are creates with the FontFont class class The type, style and fontsize are passed to The type, style and fontsize are passed to

the constructorthe constructor We can draw filled shapes with a We can draw filled shapes with a SolidBrushSolidBrush

object and open shapes with a object and open shapes with a Pen Pen objectobject

Drawing simple graphicsGraphics Drawing Methods and Descriptions

DrawLine( Pen p, int x1, int y1, int x2, int y2 ) Draws a line from (x1, y1) to (x2, y2). The Pen determines the line’s color, style and width.

DrawRectangle( Pen p, int x, int y, int width, int height )

Draws a rectangle of the specified width and height. The top-left corner of the rectangle is at point (x, y). The Pen determines the rectangle’s color, style and border width.

FillRectangle( Brush b, int x, int y, int width, int height )

Draws a solid rectangle of the specified width and height. The top-left corner of the rectangle is at point (x, y). The Brush determines the fill pattern inside the rectangle.

DrawEllipse( Pen p, int x, int y, int width, int height )

Draws an ellipse inside a bounding rectangle of the specified width and height. The top-left corner of the bounding rectangle is located at (x, y). The Pen determines the color, style and border width of the ellipse.

FillEllipse( Brush b, int x, int y, int width, int height )

Draws a filled ellipse inside a bounding rectangle of the specified width and height. The top-left corner of the bounding rectangle is located at (x, y). The Brush determines the pattern inside the ellipse.


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 We can create more interactive graphical application We can create more interactive graphical application

which are under mouse controlwhich are under mouse control For example we can interactively specify the vertices For example we can interactively specify the vertices

of a polygon and use the of a polygon and use the Graphics.DrawPolygon()Graphics.DrawPolygon() method to draw the polygon through the verticesmethod to draw the polygon through the vertices We can initialize our vertices in a We can initialize our vertices in a MouseDown()MouseDown()

event handlerevent handler Such an application could be the basis of an Such an application could be the basis of an

interactive drawing applicationinteractive drawing application


Method Description

DrawLines Draws a series of connected lines. The coordinates of each point are specified in an array of Point objects. If the last point is different from the first point, the figure is not closed.

DrawPolygon Draws a polygon. The coordinates of each point are specified in an array of Point objects. If the last point is different from the first point, those two points are connected to close the polygon.

FillPolygon Draws a solid polygon. The coordinates of each point are specified in an array of Point objects. If the last point is different from the first point, those two points are connected to close the polygon.


It is simple to create our GUI for our drawing application It is simple to create our GUI for our drawing application using design viewusing design view

We have added 2 radio buttons to select either an open or We have added 2 radio buttons to select either an open or closed polygonclosed polygon Adding any number of radio buttons to a container Adding any number of radio buttons to a container

enforces only one of them to be selectedenforces only one of them to be selected Check boxes can have multiple selectionsCheck boxes can have multiple selections

Drawing simple graphicspublic 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) {

}

}


Writing the code for the event handlers is Writing the code for the event handlers is straightforwardstraightforward

The The PaintPaint event handlers draws the polygon event handlers draws the polygon as points are added to an as points are added to an ArrayList ArrayList structurestructure We draw the polygons on a separate We draw the polygons on a separate PanelPanel

object object The The PaintPaint event handler is called using the event handler is called using the

Invalidate() Invalidate() methodmethod

Drawing simple graphicspublic 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(); }

}


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 The Paint Paint event handler calls the relevant method event handler calls the relevant method to draw an open or filled polygonto draw an open or filled polygon

The main work involved is converting the The main work involved is converting the ArrayListArrayList object to a object to a PointPoint array which can be array which can be done using the done using the ArrayList.ToArrayArrayList.ToArray method method


Demos\Draw Polygons\DrawPolygon.exeDemos\Draw Polygons\DrawPolygon.exe

Colour control and colour palettes Colour is handled using a class Colour is handled using a class ColorColor An ARGB representation is usedAn ARGB representation is used

Each channel is 0-255Each channel is 0-255 (A)lpha channel is the opacity(A)lpha channel is the opacity RGB channels are the red, blue and green componentsRGB channels are the red, blue and green components

The larger the value, the greater the amount of The larger the value, the greater the amount of colourcolour

ColorColor defines a number of static constants for pre- defines a number of static constants for pre-defined coloursdefined colours

Colour control and colour palettes

Constants in structure Color RGB value

Constants in structure Color RGB value

Orange 255, 200, 0 White 255, 255, 255

Pink 255, 175, 175 Gray 128, 128, 128

Cyan 0, 255, 255 DarkGray 64, 64, 64

Magenta 255, 0, 255 Red 255, 0, 0

Yellow 255, 255, 0 Green 0, 255, 0

Black 0, 0, 0 Blue 0, 0, 255

Structure Color methods and properties Description

Common Methods

FromArgb A static method that creates a color based on red, green and blue values expressed as ints from 0 to 255. The overloaded version allows specification of alpha, red, green and blue values.

FromName A static method that creates a color from a name, passed as a string.

Common Properties

A A byte between 0 and 255, representing the alpha component.

R A byte between 0 and 255, representing the red component.

G A byte between 0 and 255, representing the green component.

B A byte between 0 and 255, representing the blue component.

Colour control and colour palettes The alpha channel in the ARGB representation represents The alpha channel in the ARGB representation represents

the opacity of the colourthe opacity of the colour The 0 is transparantThe 0 is transparant 255 is opaque255 is opaque We can blend two colours using intermediate alpha We can blend two colours using intermediate alpha

valuesvalues


The The ColorDialog ColorDialog class is a powerful feature class is a powerful feature enabling interactive selection of colours enabling interactive selection of colours from a palettefrom a palette Can be used in many graphical Can be used in many graphical

applicationsapplications The user can create custom colours from The user can create custom colours from

the palette, not just pre-selected onesthe palette, not just pre-selected ones



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

Colour control and colour palettes Demos\Colour Palette\Demos\Colour Palette\

ColourPaletteDemo.exeColourPaletteDemo.exe

Displaying and processing images C# contains extensive support for image manipulationC# contains extensive support for image manipulation We have already seen how we can develop a simple We have already seen how we can develop a simple

application to load and display an image from fileapplication to load and display an image from file This application used the This application used the ImageImage class class

The The Graphics.DrawImage() Graphics.DrawImage() method displayed the method displayed the imageimage

Often applications require access to the individual (RGB) Often applications require access to the individual (RGB) pixels of an image in order to manipulate the image in pixels of an image in order to manipulate the image in some waysome way

Displaying and processing images Objects of class Objects of class BitmapBitmap hold images and allow the hold images and allow the

image pixels to be accessedimage pixels to be accessed Most Most ImageImage methods apply to methods apply to BitmapsBitmaps

FromFile(), Save() etcFromFile(), Save() etc In addition there are In addition there are getPixel()getPixel() and and setPixel()setPixel()

methods for image accessmethods for image access A bitmap object can easily be created from an A bitmap object can easily be created from an

image objectimage object

Bitmap bitmap = new Bitmap(image);

Displaying and processing images

For example, we can add an extra menu item to our For example, we can add an extra menu item to our image viewer tool to process images loaded from image viewer tool to process images loaded from filefile Sub-menu items can include inverting the colours Sub-menu items can include inverting the colours

in an imagein an imagered->255-red red->255-red green->255-greengreen->255-greenblue->255-blueblue->255-blue

We thus need to directly access rgb pixel valuesWe 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(); }}


Demos\Image Processor\Image Viewer.exeDemos\Image Processor\Image Viewer.exe


For efficient image processing applications, For efficient image processing applications, including real time imaging applications, including real time imaging applications, C# provides an C# provides an unsafeunsafe mode allowing rapid mode allowing rapid image accessimage access Code is run outside the normal managed Code is run outside the normal managed

block avoiding the overheads of CLR block avoiding the overheads of CLR runtime safety checksruntime safety checks

Allows the use of pointers!Allows the use of pointers!

Displaying and processing images The The BitmapBitmap class provides the class provides the LockBits()LockBits() and corresponding and corresponding

UnlockBits()UnlockBits() methods which enable you to fix a portion of methods which enable you to fix a portion of the bitmap pixel data array in memory the bitmap pixel data array in memory

Allows direct access to pixel data enabling the data to be Allows direct access to pixel data enabling the data to be modified and written back into the bitmapmodified and written back into the bitmap

LockBits()LockBits() returns a returns a BitmapDataBitmapData object that describes the object that describes the layout and position of the data in the locked arraylayout and position of the data in the locked array

There is a nice article at There is a nice article at http://www.mfranc.com/programming/operacje-na-http://www.mfranc.com/programming/operacje-na-bitmapkach-net-1/ including some benchmarking to bitmapkach-net-1/ including some benchmarking to compare execution speedscompare execution speeds

Displaying and processing images The The BitmapDataBitmapData class contains the following important class contains the following important

propertiesproperties Scan0Scan0 - The address in memory of the fixed data array - The address in memory of the fixed data array StrideStride - The width, in bytes, of a single row of pixel data. - The width, in bytes, of a single row of pixel data.

Usually data is packed into rows that begin on a four byte Usually data is packed into rows that begin on a four byte boundary and are padded out to a multiple of four bytes so boundary and are padded out to a multiple of four bytes so the stride doesn’t equal the image widththe stride doesn’t equal the image width

PixelFormatPixelFormat -The actual pixel format of the data. This is -The actual pixel format of the data. This is important for finding the right bytes important for finding the right bytes

WidthWidth - The width of the locked image - The width of the locked image HeightHeight - The height of the locked image - The height of the locked image


Stride

Height

Width

Scan0

Unused


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 The Windows Media PlayerWindows Media Player control allows a user to create control allows a user to create

applications which can play video and audioapplications which can play video and audio It enables the use of many different types of media formatsIt enables the use of many different types of media formats

MPEGMPEG AVIAVI WAVWAV MIDIMIDI

The control has a user interface containing buttons to The control has a user interface containing buttons to control the playing of the media objectcontrol 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 The name of the media item to play is set using the URLURL property of the media player object (of class property of the media player object (of class AxWindowsMediaPlayer)AxWindowsMediaPlayer) The media item (video) is played inside the bounds of The media item (video) is played inside the bounds of

the the FormForm in which the media player control is in which the media player control is embeddedembedded

Demos\Media Player Embedded\MediaPlayer.exeDemos\Media Player Embedded\MediaPlayer.exe We can also get the normal media player GUI by We can also get the normal media player GUI by

calling the calling the openPlayer() openPlayer() methodmethodDemos\Media Player\MediaPlayer.exeDemos\Media Player\MediaPlayer.exe

Summary

We have seen how we can draw simple graphics such as We have seen how we can draw simple graphics such as basic shapes and textbasic shapes and text

We have looked at how graphics is drawn in an event We have looked at how graphics is drawn in an event handler for the handler for the PaintPaint event event

We have seen how colour is displayed using the alpha, red, We have seen how colour is displayed using the alpha, red, green and blue channel and how we can select our own green and blue channel and how we can select our own colour palette inside an applicationcolour 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 We have seen how we can embed the Windows Media

Player into an application to display multimedia objects such Player into an application to display multimedia objects such as videoas video

Documents

Object Oriented Programming Graphics and Multimedia Dr. Mike Spann [email protected]