Mouse draw Using the mouse and a palette to make a picture

Lab completion is optional, but labs will help you understand the project Lab 1: Mouse draw (put dot on mousedown event) Lab 2: Modification of Lab 1. Now mouse draws two color dots: on mouseup or mousedown, put a dot Lab3: Revise lab two. only draw for mousemove event (preceded by mousedown) Project: Mousedraw with a draw panel, color and size radiobuttons

Lab1: Mouse draw dots

Click form.vb tab to expose form events

Pull down menu under Declarations to select a mouse event

In the code view: Under the menu bar icons and the view tabs there are two pull-down selectors. Select the component you want to add an event to in the left pull-down menu Select the event you want in the right pull- down menu. This will paste in a sub template Previous two slides added MouseDown event to the form itself.

MouseDown (on the form)…for example

For a draw dot on mousedown lab We select mousedown event on the form We define a colored circle (with a size)

Field declarations These two lines go in code view, below class declaration, above and not inside a sub: Private Const blobsize As Integer = 8 Private graphicsobj As Graphics = CreateGraphics() Notice that we did several things: 1.Declared constants whose values may not be changed 2.Initialized values at declaration time 3.Blobsize will be how many pixels wide your dot is 4.Graphicsobj is a Graphics thingy defined for your form.

Code View- recall entire statements must go on 1 line Public Class Form1 Private Const blobsize As Integer = 8 Private graphicsobj As Graphics = CreateGraphics() Private Sub Form1_MouseDown(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown graphicsobj.FillEllipse(New SolidBrush(Color.BlueViolet), e.X, e.Y, blobsize, blobsize) End Sub End Class Notice that e.x and e.y (mouseeventargs.x and mouseeventargs.y) return the current mouse position.

Lab1 completed – It is hard to draw a picture with purple dots

Lab2: Add a MouseUp event handler MouseUp event should put a green dot. It is still pretty hard to draw a picture in this environment

MouseUp event handler- Note that I renamed my form MouseDraw Private Sub frmMouseDraw_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseUp graphicsobj.FillEllipse(New SolidBrush(Color.Green), e.X, e.Y, blobsize, blobsize) End Sub

Boolean data type A boolean is a variable that is true or false. It could be declared with Dim okay as Boolean We will add a variable to our project so we can decide when to put dots. If mouse is up – no dot, when mouse is moved, put dot(s).

Lab3: Don’t draw for mouseup event only for mousemove: field variables Private Const blobsize As Integer = 8 Private graphicsobj As Graphics = CreateGraphics() Private ShouldPaint As Boolean = False

New MouseUp event handler: whenever mouse is up, stop painting Private Sub frmMouseDraw_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseUp shouldpaint=false End Sub

Lab3: Add mouse move event handler and adjust your other events Private Sub frmMouseDraw_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseDown ShouldPaint = True ‘paint when mouse down End Sub Private Sub frmMouseDraw_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseUp ShouldPaint = False ‘don’t paint for mouse up End Sub Private Sub frmMouseDraw_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseMove If ShouldPaint Then graphicsobj.FillEllipse(New SolidBrush(Color.BlueViolet), e.X, e.Y, blobsize, blobsize) End If End Sub

Lab3 completed: Is this art?

Project: a mouse paint palette

Components on your form Put a Panel on the right – It is not a “visible” component but it occupies the entire right side of form. Resize the form to make the panel large. Two Groups of radio buttons for size of brush and color. Individual radio buttons as for VB project 2 Not shown in previous image: You should have a clear button to clear the drawing panel.

About components Be sure to drop your radio buttons on the form before button groups. Be sure to rename all your radio buttons. Put a group around the size buttons and a group around the color buttons. Not shown in my screenshot – put a clear button on the form. Name it btnClear. Panel on the right.

Adding a panel… it is a container in the toolbox

Panel renamed pnlDraw on right side of form

Some notes on mouse painter: Fields If you built the previous lab(s), you will have to modify the Const blobsize variable. Const means “not allowed to change” but we want the size to be changed by the radiobutton selection. Remove the word Const.

Drawing: Fields In our labs we used: Private graphicsobj As Graphics = CreateGraphics() This needs to be modified. Change it to: Private graphics As Graphics

Colors and sizes: Fields Add a color field value. This will be set in the radio buttons that control color. Declare it above your subs with Dim theColor as Color

coloring When you draw in mouseMoved event it will be something like: graphics.FillEllipse(New SolidBrush(theColor), e.X, e.Y, blobsize, blobsize)

More Subs in this application After properly naming your radio buttons, systematically go through double-clicking each radio-button to create a sub event handler for it.

Changing color and size theColor will be changed in the color radiobuttons. Your color radio buttons will have code in theirs subs like: theColor=Color.red In size radio-buttons, set blobsize to 3 or 4 pixels for small, 5 or 6 pixels for medium and 8+ pixels for large “blobs”…for example, for medium: blobSize=7

Form load In your project, the panel, not the form, will have the graphics object. Double-click the form itself. This opens up a form load sub. In the formload sub add the code to create the graphics for the panel (put your panel name where it says pnlName): graphics =pnlName.creategraphics()

More notes on mouse painter subs: mouse events go on the panel! It uses a panel, and you’ll have to use get the correct graphics object instead of creategraphics() from Lab1. Similarly, you’ll have to add the mouseUp, mouseDown and MouseMove events associated with the panel, not the form. See screenshot in next slide.

Be sure to add the mouse events to the panel, not the form

Clear the panel Put a button on the form to clear the image. Use pnlDraw.refresh() to clear the panel. Here, I have named my panel pnlDraw