5.1. Graphical Interface

5.1.4.3.1. Using an exported sketch in Microsoft Visual Studio.NET

We are going to see the whole process of how you can integrate your sketch in a .NET application developed with Microsoft Visual Studio.NET.

1. Export your sketch to some folder on your system

2. Open Visual Studio

3. Create a new windows application project

4. Go to the toolbox - My User Controls

5. Right mouse click - Add/Remove Items

6. Under the .NET Framework Components tab browse to the generated DLL that contains your sketch. If you see more than one take the one that has the name you gave to the sketch.

7. Press the OK button and your sketch will be now on the toolbox

8. Drag the sketch to a form

9. Drag two buttons to the form

10. Call the sketch start method in the first button mouseclick event:

    sketchname1.Start(); // C# - substitute sketchname with the name of your sketch

11. Call the sketch stop method in the second button mouseclick event:

    sketchname1.Stop(); // C# - substitute sketchname with the name of your sketch

12. Run the program

5.1.4.3.2. Using an exported sketch in a .NET application (without Visual Studio)

Now let's suppose we don't have Visual Studio and we have to hard code our application with a simple editor and build it with the command line. The example EmbeededIterationModified.cs.pde will be used. Substitute everywhere with the name of your sketch.

1. Export your sketch to some folder on your system

2. In this folder create a file called EmbeddedIterationModified.cs with the following code:

   using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; namespace EmbeddedIterationModifiedNameSpace { public class EmbeddedIterationModifiedForm : System.Windows.Forms.Form { private DotNetProcessing.Running.EmbeddedIterationModified EmbeddedIterationModifiedSketch; private System.Windows.Forms.Button startButton; private System.Windows.Forms.Button stopButton; private System.ComponentModel.Container components = null; public EmbeddedIterationModifiedForm() { InitializeComponent(); } protected override void Dispose( bool disposing ) { if( disposing ) { if (components != null) { components.Dispose(); } } base.Dispose( disposing ); } private void InitializeComponent() { this.EmbeddedIterationModifiedSketch = new DotNetProcessing.Running.EmbeddedIterationModified(); this.startButton = new System.Windows.Forms.Button(); this.stopButton = new System.Windows.Forms.Button(); this.SuspendLayout(); this.startButton.Location = new System.Drawing.Point(5, 210); this.startButton.Name = "startButton"; this.startButton.TabIndex = 0; this.startButton.Text = "Start"; this.startButton.Click += new System.EventHandler(this.startButton_Click); this.stopButton.Location = new System.Drawing.Point(120, 210); this.stopButton.Name = "stopButton"; this.stopButton.TabIndex = 0; this.stopButton.Text = "Stop"; this.stopButton.Click += new System.EventHandler(this.stopButton_Click); this.AutoScaleBaseSize = new System.Drawing.Size(5, 13); this.ClientSize = new System.Drawing.Size(200, 240); this.Controls.Add(this.startButton); this.Controls.Add(this.stopButton); this.Controls.Add(this.EmbeddedIterationModifiedSketch); this.Name = "EmbeddedIterationModifiedForm"; this.Text = "EmbeddedIterationModified"; this.ResumeLayout(false); this.EmbeddedIterationModifiedSketch.Location = new System.Drawing.Point(0, 0); this.EmbeddedIterationModifiedSketch.Name = "EmbeddedIterationModifiedSketch"; this.EmbeddedIterationModifiedSketch.Size = new System.Drawing.Size(200, 200); this.EmbeddedIterationModifiedSketch.TabIndex = 0; } [STAThread] static void Main() { Application.Run(new EmbeddedIterationModifiedForm()); } private void startButton_Click(object sender, System.EventArgs e) { this.EmbeddedIterationModifiedSketch.Start(); } private void stopButton_Click(object sender, System.EventArgs e) { this.EmbeddedIterationModifiedSketch.Stop(); } } }

3. Build the code with the following command line:

   csc -target:winexe -out:EmbeddedIterationModified.exe -r:EmbeddedIterationModifiedSketch.dll EmbeddedIterationModified.cs

4. Run the generated executable file

   

   .NET User Control Sketch in your application

   
   
   

5.1.4.3.3. Going one step further (the full power of .NET on your hands)

Ok. You've exported your sketch to Visual Studio and have two cute methods: Start and Stop. But, what if you want more? There are a few tricks that will let you define your sketches specifally for being used from another .NET application. Basically thanks to Properties and Events. Take a sit.

Let's go for an example. We are going to take the Collision example. It's like a ping-pong game where you have to push a ball with a paddle. So how can we interact with this sketch? Imagine we want to have a variable paddle size. That means you are going to have the possibility of changing the paddle size even after the sketch has been exported. We can even do something everytime the ball touches the paddle. Follow this steps:

1. Open the "Collision.cs.pde" example.

2. Insert the following lines before the beginning of the sketch:

   public int PaddleHeight { get { return paddle_height; } set { paddle_height = value; } }

   Those lines convert the paddle_height variable in a property with its get and set method. The resulting property name is PaddleHeight and is what you will see in Visual Studio Propery Inspector.

3. Insert the following lines after the property definition:

   public delegate void PaddleTouchDelegate(); public event PaddleTouchDelegate PaddleTouch; private void FireAwayPaddleTouch() { if (PaddleTouch != null) PaddleTouch(); }

   That's a little more tricky. The first line is declaring a delegate called PaddleTouchDelegate. The second line is declaring an event of type PaddleTouchDelegate. And then there is the method which you will call inside your sketch to fire the event in case somebody is subscribed to it.

4. We are missing something yet. As we said before, the event has to be fired when the ball touches the paddle. Locate the following code and insert the line in bold:

   // Test to see if the ball is touching the paddle float py = width-dist_wall-paddle_width-ball_size; if(ball_x == py && ball_y > paddle_y - paddle_height - ball_size && ball_y < paddle_y + paddle_height + ball_size) { ball_dir *= -1; if(mouseY != pmouseY) { dy = (mouseY-pmouseY)/2.0; if(dy > 5) { dy = 5; } if(dy < -5) { dy = -5; } } FireAwayPaddleTouch(); }

   That's it. Our sketch is ready to be exported.

5. Export your sketch to somewhere on your system. Call it MyCollision

6. Create a new Visual studio project of type Windows Application and C# Syntax

7. Add the exported sketch to the toolbox and drop one instance to the form.

8. Now look at the property inspector and search for the PaddleHeight property. Change its value to 30.

9. Again in the property inspector open the events list and search for the PaddleTouch event. Double click and type the following:

   MessageBox.Show("Good!!");

10. Drop a button to the form and type the following in the click event:

    myCollision1.Start();

11. Execute the program. You'll see a bigger paddle and a congratulations message everytime you hit the paddle.