Toolglass

<< Back to the SDG Toolkit page


In this tutorial you will learn how to use SdgForm to create a Toolglass. The Toolglass in this tutorial is a color palette which can be moved by one mouse, and you can use another mouse to click through the Toolglass for color selection and then draw the choosen colors. Of course, this application can be used by two people with one controls the Toolglass and the other one controls the mouse cursor.


Download: SdgToolglass.zip
Source: SdgToolglassSrc.zip
Unzip all files (executables plus dependancies) into a single folder

Introduction

Below is the full code required to make a minimal Toolglass program that works for up to two people with two mice (one controls the Toolglass, and the other one controls a mouse cursor that draws). What you will do is create a semi-transparent user control (an SDGForm) containing 9 colored buttons. A mouse down over a button will generate an event that indicates the selected color. The main application will use this event to color lines in a simple drawing package.

Note that the version shown here is for bimanual input by one person: one mouse controls the toolglass, while the other mouse does the drawing. You can easily change this program so that two people have their own toolglass for drawing (which would use four mice).

Tutorial

Part 1. Set up the main form

1) Create the empty project. As in the other tutorials, create a C# project (Windows Application). Call it Toolglass.

2) Add SdgManager to the Form. 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. In Properties (bottom right), change RelativeTo to Form1.

Part 2. Create the Toolglass Control

3) Add Inherited Form. In the Solution Explorer, right click Toolglass->Add->Add Inherited Form. Highlight Inherited Form and name it ToolglassForm. Click open, then Browse. Find the location where you saved the SDG Toolkit and double click the dll (needs to be version 2.0.1.0 or higher). Highlight SdgForm and then click OK.

4) Set the Toolglass to semi-transparent. In Properties, change Opacity to 50%.

5) Add buttons to ToolglassForm. In the Toolbox under Windows Forms, drag a button onto ToolglassForm. In Properties, change FlatStyle to Flat and Text to empty. Copy the button and paste it 8 times (9 buttons in total). Rearrange and resize them to fit ToolglassForm.

6) Add the SdgMouseDown event handler. Select ToolglassForm Design tap. In the Properties, select ToolglassForm in the drop down menu, click the lighting bolt, then double click SdgMouseDown.

7) Add code for ToolglassForm.

  • Add this before the line "public class ToolglassForm : Sdgt.SdgForm". This event handler will indicate when the user has selected a new color and what that color is.
//function declaration. The purpose of this event handler is to let Form1 know the change of colors.
public delegate void ColorChangedEventHandler(Color newColor);
  • Add several required storage variables before the line "public ToolglassForm()". Each button you created cooresponding to a color, so choose 9 different colors.
private ArrayList Buttons;
private Color[] ButtonColors = {Color.Red, Color.Blue, Color.Purple, Color.Yellow, Color.Pink, Color.Black, Color.Orange, Color.Cyan, Color.Magenta};
private int CurrentUser;

public event ColorChangedEventHandler ColorChanged; //declare the event handler
  • Change the following line of code. The Toolglass needs to know which SDG Mouse to listen to. We do this by passing the mouse ID into the constructor.

from

public ToolglassForm()

to

public ToolglassForm(int User)
  • Add initialization code after "InitializeComponent();. Create an array holding all the buttons so we can interate through them easily. Also, set each button's color to the corresponding entry in the color array.
Buttons = new ArrayList();
Buttons.Add((object)button1);
Buttons.Add((object)button2);
Buttons.Add((object)button3);
Buttons.Add((object)button4);
Buttons.Add((object)button5);
Buttons.Add((object)button6);
Buttons.Add((object)button7);
Buttons.Add((object)button8);
Buttons.Add((object)button9);

CurrentUser = User;

for (int i = 0; i < Buttons.Count; ++i){
  Button b = (Button)Buttons[i];
  b.BackColor = ButtonColors[i];
}
  • Add this code to the ToolglassForm_SdgMouseDown event handler. When the correct mouse (the CurrentUser) clicks on a button, find the color and fire the ColorChanged event.
if (e.ID == CurrentUser){
  for (int i = 0; i < Buttons.Count; ++i){
    if (Buttons[i] == sender){       
      if (null != ColorChanged) {
        //Fire the Color Changed event
        ColorChanged(ButtonColors[i]);
      }
    }

  }
}

Part 3. Create a Paint program in the main Form that uses the Toolglass control

8) Add the mouse move event of sdgManager1.

  • Go to the Form 1 Designer.
  • Click the Form1 Design tap.
  • In the Properties, select sdgManager1 in the drop down menu, click the lighting bolt, then double click MouseMove.

9) 'Add Variables before the line'' "public Form1()".

private Pen CurrentPen;
private Point LastPoint;
private ToolglassForm MyToolGlass;

10). Add Code for initialization after the line "InitializeComponent();" . This code remembers the last point clicked and sets up the pen (for painting), and creates the ToolGlass and sets it up. Like the previous tutorial, double tap after "+=" to add event handlers, so that empty functions are added automatically.

LastPoint = new Point(sdgManager1.Mice[0].X, sdgManager1.Mice[0].Y);
CurrentPen = new Pen(new SolidBrush(Color.Black), 5);

MyToolGlass = new ToolglassForm(0);
MyToolGlass.Show();
MyToolGlass.ColorChanged +=new ColorChangedEventHandler(MyToolGlass_ColorChanged);
sdgManager1.AttachEventSinkWidget(MyToolGlass, MyToolGlass);
sdgManager1.Mice[1].Visible = false;   //hide the cursor of the mouse that control the movement of the Toolglass

MyToolGlass.Closed += new EventHandler(MyToolGlass_Closed);

11) Add code for sdgManager1_MouseMove event handler. If its the first mouse, it draws a line joining the last point with the current one. If it is the 2nd mouse, it moves the toolglass.

// movement comes from the mouse that control the pen
if (e.ID == 0){
  if (MouseButtons.Left == e.Button){
    Graphics g = this.CreateGraphics();
    g.DrawLine(CurrentPen, new Point(e.X, e.Y), LastPoint);
  }
  LastPoint = new Point(e.X, e.Y);
// movement comes from the mouse that control the Toolglass
}else{
  MyToolGlass.Location = new Point(sdgManager1.Mice[e.ID].Xabs, sdgManager1.Mice[e.ID].Yabs);
}

12) Add code for MyToolGlass_ColorChanged event handler. This just changes the drawing color.

CurrentPen.Color = newColor;
  • Add code for MyToolGlass_Closed event handler.
this.Close();

13) Resize Form1. Click the Form1 Design tap and resize the form to about 6 times the size of the Toolglass to make room for drawing.

14) Compile. Now draw a picture with one mouse controlling the locations of the Toolglass and another mouse controlling the pen.

This SDG example is developed by: Nelson Wong and Edward Tse, 2006. Included with permission