Etch A Sketch Basic
Posted: Mon Mar 31, 2014 7:59 am
Hello Codenstuffers,
I've been thinking of doing this all week and I'm finally doing it. "What?", you ask? I'll tell you, of course. It was to write a tutorial explaining the method using which I made my Etch A Sketch app was made. But in this tutorial, only the basics will be covered. In order to know the whole app, download the source code from The Showcase.
Now less talking and more coding.
Open up Visual Studio and create a new Windows Forms Application and name it whatever you want your app to be called, preferably "Etch A Sketch".
Set the Form's MaximizeBox property to False and the FormBorderStyle to FixedSingle. Change it's size to something suitable. The original Etch A Sketch toy's dimensions were in the ratio of 600,480 so that's what I will be using. I suggest you set the StartPosition to CenterScreen.
Add a Timer to the Form. This Timer will be used to move the pointer on the screen after determining in which direction to move. Set the Timer's Enabled property to True and Interval to 10.
Coding Time!!!
Right-click on the Form and press 'View Code'. Below the 'Public Class Form1', add the following declarations:
The Draw(Left, Right, Up, Down) Boolean values will determine in which direction the pointer should move depending on the keys pressed.
Now in the code window, at the top, select (Form1 Events) in the first combobox and in the adjacent combobox select the KeyDown event. This event will enable the Boolean values when a particular key is pressed while the Form is in focus. Type the following code in it:
Select the Form's KeyUp event this time from the same comboboxes as for the KeyDown event and type this code:
Go back to the designer window and double-click on the Timer you added to the Form earlier and type the following code. In this timer's code, we first declare the graphics i.e. the surface on which we shall be drawing. In our case, it is the Form itself. The code can be modified to draw on a PictureBox by using the Paint event but as this is a basic build, we won't get into the details. Leave them for next time. So the Timer checks which arrow key is pressed and moves the pointer 1 pixel in that direction. For example, if the Up arrow key was pressed, the pointer will move 1 pixel upward and so on.
Here is an extra piece of code that you should add to your Form_Load event. You can do it by returning to the designer window and double-clicking on the Form.
Now press Start Debugging from the Debug menu and test if it works. If all went well, then you'll be able to draw on the Form using the arrow keys.
Etch A Sketch Topic: viewtopic.php?f=70&t=11451
Source to Full Version: viewtopic.php?f=71&t=11512
I've been thinking of doing this all week and I'm finally doing it. "What?", you ask? I'll tell you, of course. It was to write a tutorial explaining the method using which I made my Etch A Sketch app was made. But in this tutorial, only the basics will be covered. In order to know the whole app, download the source code from The Showcase.
Now less talking and more coding.
Open up Visual Studio and create a new Windows Forms Application and name it whatever you want your app to be called, preferably "Etch A Sketch".
Set the Form's MaximizeBox property to False and the FormBorderStyle to FixedSingle. Change it's size to something suitable. The original Etch A Sketch toy's dimensions were in the ratio of 600,480 so that's what I will be using. I suggest you set the StartPosition to CenterScreen.
Add a Timer to the Form. This Timer will be used to move the pointer on the screen after determining in which direction to move. Set the Timer's Enabled property to True and Interval to 10.
Coding Time!!!
Right-click on the Form and press 'View Code'. Below the 'Public Class Form1', add the following declarations:
Code: Select all
The DrawPoint will be the point which will determine the position of the pointer. With further coding, this pointer will leave a trail behind wherever we move it.Dim DrawPoint As Point
Dim DrawLeft As Boolean
Dim DrawRight As Boolean
Dim DrawUp As Boolean
Dim DrawDown As BooleanThe Draw(Left, Right, Up, Down) Boolean values will determine in which direction the pointer should move depending on the keys pressed.
Now in the code window, at the top, select (Form1 Events) in the first combobox and in the adjacent combobox select the KeyDown event. This event will enable the Boolean values when a particular key is pressed while the Form is in focus. Type the following code in it:
Code: Select all
We're representing the arrow keys with the their codes. 37 is for left, 39 for right, 38 for up and 40 for down arrow keys. The Enter key is represented by Keys.Enter. This code tells the app to enable drawing in the direction of the arrow key(s) pressed. The Enter keys invalidates the Form, hence resetting the sketch.If e.KeyCode = Keys.Enter Then
DrawPoint.X = Me.Width / 2
DrawPoint.Y = Me.Height / 2
Me.Invalidate()
End If
If e.KeyCode = 37 Then
DrawLeft = True
End If
If e.KeyCode = 39 Then
DrawRight = True
End If
If e.KeyCode = 38 Then
DrawUp = True
End If
If e.KeyCode = 40 Then
DrawDown = True
End IfSelect the Form's KeyUp event this time from the same comboboxes as for the KeyDown event and type this code:
Code: Select all
This code disables drawing in the direction of the arrow key(s) when they are released.If e.KeyCode = 37 Then
DrawLeft = False
End If
If e.KeyCode = 39 Then
DrawRight = False
End If
If e.KeyCode = 38 Then
DrawUp = False
End If
If e.KeyCode = 40 Then
DrawDown = False
End IfGo back to the designer window and double-click on the Timer you added to the Form earlier and type the following code. In this timer's code, we first declare the graphics i.e. the surface on which we shall be drawing. In our case, it is the Form itself. The code can be modified to draw on a PictureBox by using the Paint event but as this is a basic build, we won't get into the details. Leave them for next time. So the Timer checks which arrow key is pressed and moves the pointer 1 pixel in that direction. For example, if the Up arrow key was pressed, the pointer will move 1 pixel upward and so on.
Code: Select all
The next part of the code tells the app that if the pointer tries to leave the Form's boundaries, reset it to it's most recent location within the boundaries. For example, if the pointer was leaving the left boundary then it will be reset to the same X coordinate as it was before leaving the boundary. You'll need to modify these values if you decide to use a custom Form as it would have different border sizes. This tutorial assumes you're using the default Form present in Windows 8.
Dim DrawSurface As Graphics
DrawSurface = Me.CreateGraphics
If DrawUp Then DrawPoint.Y = DrawPoint.Y - 1
If DrawDown Then DrawPoint.Y = DrawPoint.Y + 1
If DrawLeft Then DrawPoint.X = DrawPoint.X - 1
If DrawRight Then DrawPoint.X = DrawPoint.X + 1Code: Select all
The final part of the code checks if the surface on which it is going to draw is available or not. If it is available, then it will draw an ellipse with a black brush having a size of (2, 2) at the location of the pointer. As the size of the ellipse is very small, it will act as a pointer for drawing lines and not as a real ellipse.
If DrawPoint.X < 0 Then DrawPoint.X = 0
If DrawPoint.X > Me.Width - 18 Then DrawPoint.X = Me.Width - 18
If DrawPoint.Y < -1 Then DrawPoint.Y = -1
If DrawPoint.Y > Me.Height - 41 Then DrawPoint.Y = Me.Height - 41
Code: Select all
You can change the size of the pointer as well as the color of the brush by changing the values in the above code.If DrawSurface IsNot Nothing Then
DrawSurface.FillEllipse(Brushes.Black, DrawPoint.X, DrawPoint.Y, 2, 2)
End IfHere is an extra piece of code that you should add to your Form_Load event. You can do it by returning to the designer window and double-clicking on the Form.
Code: Select all
This code will center the point on the Form when the app opens. It won't be the exact center, though. And that's because when we divide the Form's size by 2, the border size is also included in it and it's not the same on the top and bottom of the Form.DrawPoint.X = Me.Width / 2
DrawPoint.Y = Me.Height / 2Now press Start Debugging from the Debug menu and test if it works. If all went well, then you'll be able to draw on the Form using the arrow keys.
Etch A Sketch Topic: viewtopic.php?f=70&t=11451
Source to Full Version: viewtopic.php?f=71&t=11512