SDG Widget Application
<< Back to the SDG Toolkit page
|
SDG Widget Library |
Creating an Application using SDGWidgets
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:
1) Open Visual Studio .NET and create a new C# Windows Application. Open the form designer for Form1.
2) Ensure that you have already added the SDGManager and SDGWidget components to your toolbox. If not, do so now.
3) Drop an SDGManager component to the form, and set it's RelativeTo property to Form1.
4) 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
5) 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.
6) Copy and paste the following code into the Form's constructor method, after the InitializeComponent() call:
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.
7) 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:
{
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);
}
}
}
}
8) 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:
{
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();
}
9) 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.