Route Planning in C# – Setting up a Project

So after watching this video by Computerphile, I got inspired to make my own PC map solver. In the video they use Python, but I prefer C#, even if it takes a bit longer to set up and make. This Section is basically how I set up the system to import an image, turn it into a Bitmap, and then output the image to a file. Currently it is very rudimentary, and doesn’t do any mapping, but in the coming weeks, it will be improving with different algorithms and systems to integrate it into my university final year project.

This will be written similar to a tutorial, but some prior knowledge of Visual Studio and C# would be beneficial. As well as this, it is always good to read around the subject and watch videos. Experience with systems is what makes you a better engineer! For this tutorial I am using Visual Studio 2015.

  1. Open up Visual Studio, and start a new project by going to File->new->Project.
  2. On the left hand side under Visual C# choose Windows. And pick Windows Forms Application. Change the name to Route Planner (or whatever you want to call it) and pick the location you want to save the project to. Then Click OK.New project
  3. With the nice new form in front of you, drag the bottom left hand corner of the box, until it is about 750 x 450 pixels, this can be changed in the properties tab.
  4. In the properties tab, change the text value to Route Planner. The form should now have a title of Route Planner
  5. On the left hand side of the screens should be the Toolbox tab. In there find a Label. Drag this onto the form, I placed it in the bottom left corner. This will be the label we use to give us feedback on what is going on in the system.
  6. While the Label is still highlighted, go to the Properties tab, and change the name to lbl1. I also changed the text to lbl1, but this isn’t necessary.
  7. As with the label, drag a PictureBox onto the form. Make it as big as you want, it can always be changed later, but this is where the map is going to be shown as an output.
  8. in the top corner of the PictureBox is a small triangle, click on it, and change the size mode to zoom. This means that the image will be zoomed in to fit the box, as some of the images we will be using are small.
  9. While the PictureBox is still highlighted, change the name to pbMap.
  10. The box should now look similar to this:picturebox zoom mode
  11. This is the basic bit done, now to make it do something, we need an event. To start, we will set it up to do everything as soon as the program loads, in a later tutorial it will be triggered by buttons. But for now double click on the form. This should take you to a new page called form1.cs.
  12. There will now be a function in there called Form_Load() anything put in this function will be triggered as soon as the form loads up.The first look at code

The code posted below currently loads in an image, converts it to Bitmap, and then converts back to .png to save it again (under a different name).

final code

So what is going on here:

  • Firstly a new Bitmap variable is created, named startMap.
  • An image is loaded from a set filename is loaded into startMap.
  • For this project I used this image, yes it is very small:

  • The issue with leaving it at this point is that the image, although saved in a Bitmap, it’s not really one. The colours of each individual pixel are indexed in the .png format, meaning we cannot directly manipulate them, in the way we would a Bitmap. In Bitmap images, the colours are in ARGB format, meaning each colour has it’s own value, and can therefore be accessed.
  • To get the image in this format, a new Bitmap variable is created called routeMap, with the same width and height as startMap.
  • Using the Graphics class, the image from startMap is drawn onto routeMap in the new Bitmap format.
  • The pictureBox we created earlier is now used, by making it the same image as routeMap.
  • The label we created is also used, by updating the user that the file has been saved.
  • To prove it is the same image, routeMap is saved a .png file, and can be found in the directory that it is set to.

When run, and a map is named “normal.png” in the correct file directory (you can change this). The window should look something like this: Tutorial1 output

Notice how the image seems blurred, this is due to the picturebox zooming the image to fit the box. The blurring is anti-aliasing, and although slightly annoying demonstrates the image.