Home

GDI+ Example: Metro System

     

Introduction

In our introduction to animations, we saw how to move an object from one side of the screen to another. Let's remind ourseleves how it was done.

ApplicationApplication: Introducing the Application

  1. Start Microsoft Visual Studio
  2. Create a new Windows Forms Application and name it MetroSystem
  3. From the Solution Explorer, change the name of the form to Exercise
  4. Using a file utility such as Windows Explorer, save the following pictures to the Debug sub-folder inside the bin folder of the current project:
     
    Metro System Map
     
    Red Line Train
  5. Click the body of the form to select it
  6. In the Properties window, change its characteristics as follows:
    Text: Metro System - Train Monitoring
    StartPosition: CenterScreen
    Size: 1310, 976
    MaximizeBox: False
  7. Double-click the middle of the form and change the document as follows:
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Forms;
    
    namespace MetroSystem
    {
        public enum MovingDirection { Right, Left, Down, Up };
    
        public partial class Exercise : Form
        {
            private Image imgRedTrain;
            private Image imgMetroMap;
            private MovingDirection Direction;
            private float xRedTrain, yRedTrain;
    
            public Exercise()
            {
                InitializeComponent();
            }
    
            private void Exercise_Load(object sender, EventArgs e)
            {
                xRedTrain = 30.00F;
                yRedTrain = 475.00F;
                Direction = MovingDirection.Right;
                imgRedTrain = Image.FromFile("RedTrain.png");
                imgMetroMap = Image.FromFile("MetroMap.jpg");
            }
        }
    }
  8. From the Common Controls section of the Toolbox, click PictureBox and click the form
  9. Change its characteristics as follows:
    Name: pbxMetroSystem
    Dock: Fill
  10. While the picture box is still selected, in the Properties window, click the Events button and double-click Paint
  11. Change the document as follows:
    private void pbxMetroSystem_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.DrawImage(imgMetroMap, 0, 0);
        e.Graphics.DrawImage(imgRedTrain, xRedTrain, yRedTrain);
    }
  12. Return to the form and, in the Properties window, click the Properties button
  13. Execute the application to see the result
  14. Close the form and return to your programming environment
  15. From the Components section of the Toolbox, click Timer and click the form
  16. Change its characteristics as follows:
    Name: tmrTrainsControl
    Enabled: True
    Interval: 10
  17. Double the timer under the form and implement its event as follows:
    private void ControlRedTrain()
    {
        if (xRedTrain < 30)
            Direction = MovingDirection.Right;
        if (xRedTrain > 1250)
            Direction = MovingDirection.Left;
    
        if (Direction == MovingDirection.Right)
        {
            xRedTrain +=   0.50F;
            yRedTrain  = 475.00F;
        }
        else // if (Direction == MovingDirection.Left )
        {
            xRedTrain -=   0.50F;
            yRedTrain  = 465.00F;
        }
    }
    
    private void tmrTrainsControl_Tick(object sender, EventArgs e)
    {
        ControlRedTrain();
        pbxMetroSystem.Invalidate();
    }
  18. Execute the application to see the result:
     
    Metro System Map
     
    Metro System
     
    Metro System
  19. One of the characteristics of moving objects is that they may change direction. To take care of that programmatically, you need as much information as possible. Information includes the starting point, the end point, the moving direction of the object (to the left, the right, top-left to down-right, top-right to down-left, etc), the moving speed, etc.
    Using a file utility such as Windows Explorer, save the following picture to the Debug sub-folder inside the bin folder of the current project:

    Red Train Blue Train Train Train Train Train Train Train Train
  20. Change the code file as follows:
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows.Forms;
    
    namespace MetroSystem
    {
        public enum MovingDirection { Right, Left, Down, Up };
    
        public partial class Exercise : Form
        {
            private Image imgMetroMap;
            private float xRedTrain, yRedTrain;
            private float xBlueTrain, yBlueTrain;
            private float xGreenTrain, yGreenTrain;
            private MovingDirection DirectionRedLine,
                                    DirectionBlueLine,
                                    DirectionYellowLine,
                                    DirectionGreenLine;
            private float xYellowTrain, yYellowTrain;
            private Image imgRedTrain, imgBlueTrain, imgGreenTrain, imgYellowTrain;
    
            public Exercise()
            {
                InitializeComponent();
            }
    
            private void Exercise_Load(object sender, EventArgs e)
            {
                // These are the starting positions of trains
                xRedTrain = 30.00F;
                yRedTrain = 475.00F;
    
                xBlueTrain = 160.00F;
                yBlueTrain = 278.00F;
    
                xGreenTrain = 733.00F;
                yGreenTrain =  20.00F;
    
                xYellowTrain = 175.00F;
                yYellowTrain = 668.00F;
    
                // These indicate that all trains start from left to right or up-down
                DirectionRedLine = MovingDirection.Right;
                DirectionBlueLine = MovingDirection.Right;
                DirectionGreenLine = MovingDirection.Down;
                DirectionYellowLine = MovingDirection.Right;
    
                imgRedTrain = Image.FromFile("RedTrain.png");
                imgMetroMap = Image.FromFile("MetroMap1.jpg");
                imgBlueTrain = Image.FromFile("BlueTrain1.png");
                imgGreenTrain = Image.FromFile("GreenTrain1.png");
                imgYellowTrain = Image.FromFile("YellowTrain1.png");
            }
    
            private void pbxMetroSystem_Paint(object sender, PaintEventArgs e)
            {
                // At any time, draw the background of the metro map...
                e.Graphics.DrawImage(imgMetroMap, 0, 0);
                // ... and refresh the positions of trains.
                // This is done by drawing each train 
                // based on its (current/refreshed) coordinates
                e.Graphics.DrawImage(imgRedTrain, xRedTrain, yRedTrain);
                e.Graphics.DrawImage(imgBlueTrain, xBlueTrain, yBlueTrain);
                e.Graphics.DrawImage(imgGreenTrain, xGreenTrain, yGreenTrain);
                e.Graphics.DrawImage(imgYellowTrain, xYellowTrain, yYellowTrain);
            }
    
            private void ControlRedTrain()
            {
                /* If the train is in the starting position, this code 
                   indicates that it must move in the Right direction */
                if (xRedTrain < 30)
                    DirectionRedLine = MovingDirection.Right;
                /* If the train is in the end position, this code 
                   indicates that it must move in the Left direction */
                if (xRedTrain > 1250)
                    DirectionRedLine = MovingDirection.Left;
    
                // If the train is currently moving in the Right direction,
                // or to move the train in the right direction, ...
                if (DirectionRedLine == MovingDirection.Right)
                {
                    // ...increment its X position
                    xRedTrain +=   0.50F;
                    // If the track is horizontal, keep a constant Y coordinate
                    yRedTrain  = 475.00F;
                }
                else // if (Direction == MovingDirection.Left )
                {
                    // To move a train in the Left direction, decrease its X position
                    xRedTrain -=   0.50F;
                    yRedTrain  = 465.00F;
                }
            }
    
            private void ControlBlueTrain()
            {
                /* During its movements, if the train tries to move out 
                   of screen, put it in the appropriate position*/
                if (xBlueTrain < 160.00F)
                {
                    /* These are the coordinates when the "Blue" train
                       is in its starting position*/
                    xBlueTrain = 160.00F;
                    yBlueTrain = 278.00F;
                    /* When the train in the starting position, indicate that 
                       it must next move in the Right direction*/
                    DirectionBlueLine = MovingDirection.Right;
                }
    
                if (yBlueTrain > 900.00F)
                {
                    /* These are the coordinates when the "Blue" train
                       is in its ending position*/
                    xBlueTrain = 562.00F;
                    yBlueTrain = 900.00F;
                    DirectionBlueLine = MovingDirection.Left;
                }
    
                // If the "Blue" train is currentlu moving in the "Right" direction, ...
                if (DirectionBlueLine == MovingDirection.Right)
                {
                    // find out it is currently in the first section
                    if ((xBlueTrain >= 30.00F) && (xBlueTrain < 453.00F))
                    {
                        /* If the "Blue" train is currently in the first section, 
                           move it to the Right*/
                        xBlueTrain +=   0.50F;
                        // Since the first section is horizontal, give it a constant Y value
                        yBlueTrain  = 278.00F;
                        // Specify the horizontal picture of the "Blue" train
                        imgBlueTrain = Image.FromFile("BlueTrain1.png");
                    }
                    else if ((xBlueTrain >= 453.00F) && (xBlueTrain < 568.00F))
                    {
                        // Next, the "Blue" train moves diagonally
                        xBlueTrain += 0.35F;
                        yBlueTrain += 0.35F;
                        // Specify its picture accordingly
                        imgBlueTrain = Image.FromFile("BlueTrain2.png");
                    }
                    else
                    {
                        // Finally, the "Blue" line is vertical.
                        // Use a constant X coordinate
                        xBlueTrain  = 568.00F;
                        // Increment its Y coordinate
                        yBlueTrain +=   0.50F;
                        // Specify its vertical picture
                        imgBlueTrain = Image.FromFile("BlueTrain3.png");
                    }
                }
                else if (DirectionBlueLine == MovingDirection.Left)
                {
                    if ((xBlueTrain >= 35.00F) && (xBlueTrain < 437.00F))
                    {
                        xBlueTrain -=   0.50F;
                        yBlueTrain  = 265.00F;
                        imgBlueTrain = Image.FromFile("BlueTrain1.png");
                    }
                    else
                    {
                        if ((yBlueTrain >= 104.00F) && (yBlueTrain < 395.00F))
                        {
                            xBlueTrain -= 0.35F;
                            yBlueTrain -= 0.35F;
                            imgBlueTrain = Image.FromFile("BlueTrain2.png");
                        }
                        else
                        {
                            xBlueTrain  = 581.00F;
                            yBlueTrain -=   0.50F;
                            imgBlueTrain = Image.FromFile("BlueTrain3.png");
                        }
                    }
                }
            }
    
            private void ControlYellowTrain()
            {
                if (xYellowTrain < 175.00F)
                {
                    xYellowTrain = 175.00F;
                    yYellowTrain = 680.00F;
                    DirectionYellowLine = MovingDirection.Right;
                }
                if (xYellowTrain > 1154.00F)
                {
                    xYellowTrain = 1154.00F;
                    yYellowTrain =  232.00F;
                    DirectionYellowLine = MovingDirection.Left;
                }
    
                if (DirectionYellowLine == MovingDirection.Right)
                {
                    if ((xYellowTrain >= 175.00F) && (xYellowTrain < 721))
                    {
                        xYellowTrain +=   0.50F;
                        yYellowTrain  = 680.00F;
                        imgYellowTrain = Image.FromFile("YellowTrain1.png");
                    }
                    else
                    {
                        xYellowTrain += 0.50F;
                        yYellowTrain -= 0.50F;
                        imgYellowTrain = Image.FromFile("YellowTrain2.png");
                    }
                }
                else
                {
                    if ((xYellowTrain >= 175.00F) && (xYellowTrain < 711))
                    {
                        xYellowTrain -=   0.50F;
                        yYellowTrain  = 668.00F;
                        imgYellowTrain = Image.FromFile("YellowTrain1.png");
                    }
                    else
                    {
                        xYellowTrain -= 0.50F;
                        yYellowTrain += 0.50F;
                        imgYellowTrain = Image.FromFile("YellowTrain2.png");
                    }
                }
            }
    
            private void ControlGreenTrain()
            {
                if (yGreenTrain < 20.00F)
                {
                    xGreenTrain = 733.00F;
                    yGreenTrain =  20.00F;
                    DirectionGreenLine = MovingDirection.Down;
                }
    
                if (yGreenTrain > 822.00F)
                {
                    xGreenTrain = 1186.00F;
                    yGreenTrain =  822.00F;
                    DirectionGreenLine = MovingDirection.Up;
                }
    
                if (DirectionGreenLine == MovingDirection.Down)
                {
                    if ((yGreenTrain >= 20.00F) && (yGreenTrain < 580.00F))
                    {
                        xGreenTrain  = 733.00F;
                        yGreenTrain +=   0.50F;
                        imgGreenTrain = Image.FromFile("GreenTrain1.png");
                    }
                    else
                    {
                        if ((xGreenTrain >= 715.00F) && (xGreenTrain < 928.00F))
                        {
                            xGreenTrain +=   0.50F;
                            yGreenTrain  = 580.00F;
                            imgGreenTrain = Image.FromFile("GreenTrain2.png");
                        }
                        else
                        {
                            xGreenTrain += 0.25F;
                            yGreenTrain += 0.25F;
                            imgGreenTrain = Image.FromFile("GreenTrain3.png");
                        }
                    }
                }
                else
                {
                    if (xGreenTrain == 745.00F)
                    {
                        xGreenTrain  = 745.00F;
                        yGreenTrain -=   0.50F;
                        imgGreenTrain = Image.FromFile("GreenTrain1.png");
                    }
                    else if ((xGreenTrain > 740.00F) && (xGreenTrain <= 910.00F))
                    {
                        xGreenTrain -=   0.50F;
                        yGreenTrain  = 568.00F;
                        imgGreenTrain = Image.FromFile("GreenTrain2.png");
                    }
                    else
                    {
                        xGreenTrain -= 0.25F;
                        yGreenTrain -= 0.25F;
                        imgGreenTrain = Image.FromFile("GreenTrain3.png");
                    }
                }
            }
    
            private void tmrTrainsControl_Tick(object sender, EventArgs e)
            {
                ControlRedTrain();
                ControlBlueTrain();
                ControlYellowTrain();
                ControlGreenTrain();
    
                pbxMetroSystem.Invalidate();
            }
        }
    }
  21. Execute the application to see the result
     
    Metro System Result
     
    Metro System Result
     
    Metro System Result
  22. Close the form and return to your programming environment

Project

 

Home Copyright © 2014 FunctionX