 |
Getting Started |
Creating an Application using SDGWidgets
Source Code: [ Example Source
] [ SDG Widget Library
Source ]
This tutorial will take you step by step through creating an application that uses the three basic SDG Widgets. The end result will be a program
that uses SDGWidgets to control a shape for each user. Note that the program only supports up to 4 simultaneous users.
Here's a summary of the basic SDGWidgets we will be using:
- SDGCheckbox - maintains a checked/unchecked state for each SDGMouse that interacts with it.
- SDGRadiobutton - maintains a single selection for each SDGMouse that interacts with a group of SDGRadiobuttons.
- SDGTrackbar - maintains a numeric value for each SDGMouse that interacts with it.
Now let's go through the steps necessary to get this example working:
- Open Visual Studio .NET and create a new C# Windows Application. Open the form designer for Form1.
- Ensure that you have already added the SDGManager and SDGWidget components to your toolbox. If not, do so now.
- Drop an SDGManager component to the form, and set it's RelativeTo property to Form1.
- Create a similar interface to the one shown in the picture below using labels, SDGWidgets, and a Panel control. Name them as follows:
- Panel as pnlDisplay
- SDGRadiobuttons as sdgrbCircle and sdgrbSquare respectively
- SDGCheckbox as sdgcbFill
- SDGTrackbar as sdgtbSize
- Select all the SDGWidgets on the form simultaneously by holding down CTRL and clicking on each one. Find the Manager property
and select sdgManager1. NOTE: If the sdgManager1 component doesn't show up as an option in the dropdown menu, try again after you
save your project and restart Visual Studio .NET.
- Copy and paste the following code into the Form's constructor method, after the InitializeComponent() call:
// Initialize up to 4 mice, each with a unique name and color
if (sdgManager1.Mice.Count >=1)
{
sdgManager1.Mice[0].Text = "Rob";
sdgManager1.Mice[0].TextBrush = new SolidBrush(Color.Red);
}
if (sdgManager1.Mice.Count >=2)
{
sdgManager1.Mice[1].Text = "Ed";
sdgManager1.Mice[1].TextBrush = new SolidBrush(Color.Blue);
}
if (sdgManager1.Mice.Count >=3)
{
sdgManager1.Mice[2].Text = "Mike";
sdgManager1.Mice[2].TextBrush = new SolidBrush(Color.Lime);
}
if (sdgManager1.Mice.Count >=4)
{
sdgManager1.Mice[3].Text = "Saul";
sdgManager1.Mice[3].TextBrush = new SolidBrush(Color.Yellow);
}
if (sdgManager1.Mice.Count > 4)
{
// Disable any extra mice that we can't deal with
for (int i = 5; i < sdgManager1.Mice.Count; i++)
{
sdgManager1.Mice[i].Visible = false;
}
}
Because of the way the SDGWidgets work, it is necessary to initialize each SDGMouse in the sdgManager1.Mice array with a name
and a color. This is done by setting the Text and TextBrush properties as shown above. If these settings
are not in place, your program will crash. You should be able to compile and run your program at this stage, though you may need to use
ALT-F4 to close down the program afterward.
- Now for the core of this example. Don't get lost in the drawing technicalities - instead concentrate on how the values from the
SDGWidgets are used to control aspects of each user's shape. Copy this method somewhere into your Form1 class:
private void UpdateShapes()
{
Graphics g = pnlDisplay.CreateGraphics();
g.Clear( pnlDisplay.BackColor );
// Draw each user's shape
for (int i = 0; i < sdgManager1.Mice.Count; i++)
{
Point centroid = new Point( ((i % 2) * 2 + 1) * pnlDisplay.Width / 4, ((i/2) * 2 + 1) * pnlDisplay.Height / 4 );
Brush shapebrush = sdgManager1.Mice[i].TextBrush;
int shapesize = sdgtbSize[i];
// Choose which shape to draw
if ( sdgrbCircle[i] == CheckState.Checked )
{
// We're drawing a circle
// Choose whether to fill the shape or not
if ( sdgcbFill[i] == CheckState.Checked )
{
// Fill the circle
g.FillEllipse( shapebrush, centroid.X - shapesize, centroid.Y - shapesize, shapesize * 2, shapesize * 2);
}
else
{
// Don't fill the circle
g.DrawEllipse( new Pen(shapebrush, 1), centroid.X - shapesize, centroid.Y - shapesize, shapesize * 2, shapesize * 2);
}
}
else if ( sdgrbSquare[i] == CheckState.Checked )
{
// We're drawing a square
// Choose whether to fill the shape or not
if ( sdgcbFill[i] == CheckState.Checked )
{
// Fill the square
g.FillRectangle( shapebrush, centroid.X - shapesize, centroid.Y - shapesize, shapesize * 2, shapesize * 2);
}
else
{
// Don't fill the square
g.DrawRectangle( new Pen(shapebrush, 1), centroid.X - shapesize, centroid.Y - shapesize, shapesize * 2, shapesize * 2);
}
}
}
}
- Now all that's left is to update the user shapes by actually calling our UpdateShapes method from above. Naturally we
want this action to happen every time one of the SDGWidget values are changed. Select each of the SDGRadiobuttons in turn, and click on the
Events tab (shown as a lightning bolt). Find the CheckChanged event and double click to create a new event handler. Simply
place a call to UpdateShapes in the handler functions for each SDGRadiobutton. Do the same for the SDGCheckbox's CheckChanged
event, and the SDGTrackbar's Scroll event. Your code should look as follows:
private void sdgrbCircle_CheckChanged(object sender, int userID)
{
UpdateShapes();
}
private void sdgrbSquare_CheckChanged(object sender, int userID)
{
UpdateShapes();
}
private void sdgcbFill_CheckChanged(object sender, int userID)
{
UpdateShapes();
}
private void sdgtbSize_Scroll(object sender, Sdgt.SdgMouseEventArgs e)
{
UpdateShapes();
}
- The program is now complete! Compile and run it, it should look like the image below. Try it out with up to 4 mice attached to your computer at once. If you get stuck you can
download the complete source.
(NOTE: You may need to fix the DLL references depending on your
system configuration).
This demo was created by Rob Diaz-Marino. It was last updated
September 10, 2003 01:25 PM.
DiamondTouch is a trademark of Mitsubishi Electric Research Laboratories, Inc.
|
