Simple Sketch

<< Back to the SDG Toolkit page

Tutorial - SDGSketch

Below is the full code required to make the minimal sketch program. In this tutorial you will learn how to

  • Add an Sdg Control and make all coordinates relative to a form
  • Handle Sdg Mouse Events
  • Set Icons used
  • Set Cursor Text Captions
  • Set Cursor Rotations
  • Iterate through each mouse
  • Use the ID parameter to draw different colours on the screen

While we recommend you create this program from scratch, we also provide executables and source that you can download and try.

  • Unzip all files (executables plus dependancies) into a single folder.
  • The executable should run just by clicking the .exe
  • For recompiling the source, you may have to reset the sdgt reference to point to where you had put the SDGToolkit dll.

1) Before starting (and if you have not already done so), you should have downloaded and saved the SDG Toolkit files into a folder, and integrated it into the Visual Studio Toolbox. See Download instructions.

2) Open Visual Studio .NET and create a new C# Windows Application. Call it something like SDGSketch.

3) You should see an Sdg Manager Component in the Toolbox in the Tab where you had previously installed it. Click on the SdgManager component and drag an instance onto the form. Your screen should look like below.

4) Click on the sdgManager1 component instance and set its RelativeTo property to the Form. This makes all Sdg Mouse Events relative to the form and will be useful in our cool sdg drawing application

5) Now click on the event tab of the properties window (the lightning bolt) and in the MouseMove event type sdgMouseMove. This will create an sdgMouseMove event handler.

6) When you press enter you will be sent to the sdgMouseMove code. Type in the following code in the sdgMouseMove function:

Graphics g = this.CreateGraphics();
Pen penColour = Pens.Black;
if (e.ID > 0)
    penColour = Pens.Red;

if ((e.Button & MouseButtons.Left) > 0)
    g.DrawLine(penColour, new Point(e.X, e.Y), new Point(e.X+2, e.Y+2));

7) You should be able to compile your code now and draw little dots on the screen. Press <Alt-F4> to exit.

8) Let's play around with the toolkit a bit more. What we will do is add some code that will change the appearance of each cursor, add a text string to it, and change the orientation of each mouse (i.e., so mice/cursors would work if people were sitting around a square table).

9) Go to the Form1() function at the beginning of the class declaration. Add the following code after the InitializeComponent() call.

Cursor[] sdgCursors = {Cursors.Arrow, Cursors.Hand, Cursors.Cross, Cursors.IBeam};
String[] sdgText = {"Edward", "Saul", "Mike", "Sheelagh"};
int[] sdgDegreeRotations = {0, 90, 180, 270};

for (int i=0; i < sdgManager1.Mice.Count && i < 4; ++i)
    sdgManager1.Mice[i].Cursor = sdgCursors[i];
    sdgManager1.Mice[i].Text = sdgText[i];
    sdgManager1.Mice[i].DegreeRotation = sdgDegreeRotations[i];

9) Compile and run your cool new application. It should look something like below with two cursors. Note the offset orientation of the mouse labelled Saul'!.

10) Press <Alt-F4> to exit.