SDG Widget Application

Toolkits.SDGWidgetApplication History

Hide minor edits - Show changes to output

January 17, 2006, at 03:41 PM by 136.159.7.228 -
Added lines 5-16:
(:table border=1 cellpadding=17 cellspacing=0 align=entre bgcolor=#eeeeee :)
(:cell:)
[+ '''SDG Widget Library''' +] \\
[+ '''Download: ''' [[(Attach:)SdgWidgetLibrary.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SdgWidgetLibrarySrc.zip]] +] \\\

[+ '''SDG Widget Application''' +] \\
[+ '''Download: ''' [[(Attach:)SdgWidgetApp.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SdgWidgetAppSrc.zip]] +] \\
Unzip all files (executables plus dependancies) into a single folder
(:tableend:)
Deleted lines 157-168:

(:table border=1 cellpadding=17 cellspacing=0 align=entre bgcolor=#eeeeee :)
(:cell:)
[+ '''SDG Widget Library''' +] \\
[+ '''Download: ''' [[(Attach:)SDGWidgetLibrary.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SDGWidgetLibrarySrc.zip]] +] \\\

[+ '''SDG Widget Application''' +] \\
[+ '''Download: ''' [[(Attach:)SdgWidgetApp.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SDGWidgetAppSrc.zip]] +] \\
Unzip all files (executables plus dependancies) into a single folder
(:tableend:)
January 11, 2006, at 03:16 PM by 136.159.7.228 -
Changed lines 30-31 from:
Attach: SDGWidgetApp.png
to:
Attach:SDGWidgetApp.png
January 11, 2006, at 03:14 PM by 136.159.7.228 -
Added lines 30-31:
Attach: SDGWidgetApp.png
January 09, 2006, at 03:47 PM by 136.159.7.228 -
Changed lines 151-153 from:
[+ '''SDG Widget Demo''' +] \\
[+ '''Download: ''' [[(Attach:)SdgWidgetDemo.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SDGWidgetDemoSrc.zip]] +] \\
to:
[+ '''SDG Widget Application''' +] \\
[+ '''Download: ''' [[(Attach:)SdgWidgetApp.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SDGWidgetAppSrc.zip]] +] \\
January 09, 2006, at 03:41 PM by 136.159.7.228 -
Changed lines 149-150 from:
[+ '''Source: ''' [[(Attach:)SDGWidgetLibrarySrc.zip]] +] \\
to:
[+ '''Source: ''' [[(Attach:)SDGWidgetLibrarySrc.zip]] +] \\\
January 09, 2006, at 03:40 PM by 136.159.7.228 -
Changed lines 143-154 from:
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.
to:
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.

(:table border=1 cellpadding=17 cellspacing=0 align=entre bgcolor=#eeeeee :)
(:cell:)
[+ '''SDG Widget Library''' +] \\
[+ '''Download: ''' [[(Attach:)SDGWidgetLibrary.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SDGWidgetLibrarySrc.zip]] +] \\
[+ '''SDG Widget Demo''' +] \\
[+ '''Download: ''' [[(Attach:)SdgWidgetDemo.zip]] +] \\
[+ '''Source: ''' [[(Attach:)SDGWidgetDemoSrc.zip]] +] \\
Unzip all files (executables plus dependancies) into a single folder
(:tableend:)
January 09, 2006, at 03:35 PM by 136.159.7.228 -
Added lines 1-143:
[[Toolkits.SDGToolkit | << Back to the SDG Toolkit page]]
\\
\\

!!!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:


(:source lang=csharp tabwidth=2 :) [=
// 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.

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:

(:source lang=csharp tabwidth=2 :) [=
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);
}
}
}
}
=]

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:

(:source lang=csharp tabwidth=2 :) [=
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();
}
=]

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.