Click here to Skip to main content
12,702,455 members (35,789 online)
Click here to Skip to main content
Add your own
alternative version


130 bookmarked

Drawing a Radar Display Using C#

, 17 Aug 2007 CC (ASA 2.5)
Rate this:
Please Sign up or sign in to vote.
Plot symbols on a radar using the azimuth and elevation

Screenshot - Radar1.jpg


Originally, I implemented the idea of a radar-esque object as a UserControl for the purpose of parsing NMEA-structured GPS data and displaying the satellites in view. This worked well, but I've also wanted to write my first article for some time now, and this seemed like the time to do it. The Radar class internally maintains a structure of RadarItem implementations and draws them on radar. The position of the RadarItem is determined by translating two values: Azimuth and Elevation.

Using the code

Class Diagram

Screenshot - Radar2.jpg

Getting the Radar image

As shown in the Class Diagram, there are a few classes and an interface to work with in this implementation. First and foremost is the Radar class. This is the main class for display of the radar image. There are two ways to get the Image from the Radar class:

  1. Use the Radar.Image member
  2. Use the ImageUpdateEventArgs.Image passed by Radar.ImageUpdate

The following example demonstrates a combination of both for the purpose of showing the blank radar initially, not having to wait for an update to occur. The Radar.ImageUpdate event is fired every time a change is made to the drawable elements of the Radar class.

Radar radar;

private void frmMain_Load(object sender, EventArgs e)
    // create a new instance of the Radar class
    Radar radar = new Radar(pictureBox1.Width); 
    // hint: use a square PictureBox

    // display the base image initially
    pictureBox1.Image = radar.Image;

    // add a handler for the ImageUpdate event
    radar.ImageUpdate += new ImageUpdateHandler(radar_ImageUpdate);

void radar_ImageUpdate(object sender, ImageUpdateEventArgs e)
    // display the updated image
    pictureBox1.Image = e.Image;

Color Options

The Radar class has a few customizable colors in order to include the background colors (top and bottom of gradient) and the color of the lines drawn.

Radar radar = new Radar(pictureBox1.Width);

// change the colors of the radar
radar.CustomGradientColorTop = Color.FromArgb(0, 100, 0);
radar.CustomGradientColorBottom = Color.FromArgb(0, 40, 0);
radar.CustomLineColor = Color.FromArgb(0, 255, 0);

pictureBox1.Image = radar.Image;

Adding RadarItem objects to the Radar

There are three included classes that implement the RadarItem interface. They are the CircleRadarItem, SquareRadarItem and TriangleRadarItem objects. Feel free to create your own (see source code for examples) and email it to me!

RadarItems are differentiated from one another using the ID member. This also allows for the Radar object to update the position of a particular RadarItem. The Radar class contains an internal List<RadarItem> that you can add items to using the Radar.AddItem method. When you pass a RadarItem with a pre-existing ID, the RadarItem in the List is replaced with the new RadarItem.

Radar radar = new Radar(pictureBox1.Width);

// Arguments:
//   1. ID
//   2. Size
//   3. Azimuth
//   4. Elevation
RadarItem item = new CircleRadarItem(2, 8, 45, 45);

pictureBox1.Image = radar.Image;

Extending the RadarItem Interface

public interface RadarItem : IComparable<RadarItem>
    int ID { get; }
    int Azimuth { get; set; }
    int Elevation { get; set; }
    int Height { get; set; }
    int Width { get; set; }
    DateTime Created { get; }
    void DrawItem(Radar radar, Graphics g);

This is relatively straightforward. Just implement the interface and go to town! The DrawItem method is called from the Radar class. Supplied is the instance of the Radar class, because of the AzEl2XY method. In order to convert the Azimuth and Elevation to a PointF, the algorithm has to be aware of the size of the Radar. This method lives in the Radar class for logical reasons and to not duplicate the code.

Also exposed through the Radar class are the colors. I use Radar.CustomLineColor as the color of my custom RadarItem implementations. Also passed is an instance of Graphics. This is the Graphics that is used to draw directly on the Radar. Although the RadarItem interface requires the implementation of IComparable<RadarItem>, it is not used for anything yet. The Created member is also unused for the time being.

The Scan Line

Radar includes a minor implementation of a "Scan Line" with fade. NOTE: When using the ScanLine, you will want to use the Radar.ImageUpdate event to update the Image on screen. This is because the Image is constantly being updated.

Radar radar = new Radar(pictureBox1.Width);
radar.ImageUpdate += new ImageUpdateHandler(_radar_ImageUpdate);

radar.DrawScanInterval = 60; // in millisecs
radar.DrawScanLine = true;

Points of Interest

Particularly fun was adding the "Scan Line" to the Radar as suggested by Ali, a coworker. I learned all about the GraphicsPath object, as well as the PathGradientBrush. See the code for details.

Radar stores the background image separately in order to cut down on the drawing time. This image is updated every time the value of a background-related property is changed, i.e. CustomLineColor.


  • 17 August, 2007 -- Original version posted


This article, along with any associated source code and files, is licensed under The Creative Commons Attribution-ShareAlike 2.5 License


About the Author

Technical Lead
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionGAMES Pin
Member 1095317117-Jul-14 3:03
memberMember 1095317117-Jul-14 3:03 
QuestionHow to dispose of radar item? Pin
afs0012-Jul-14 12:05
memberafs0012-Jul-14 12:05 
Questionhow to add scale to the radar,track numbers to plots. also is it possible to show the full tracks in addition to plots Pin
gaurav47921-Nov-13 19:53
membergaurav47921-Nov-13 19:53 
Questionmultithread exception Pin
Member 1032943910-Oct-13 22:30
memberMember 1032943910-Oct-13 22:30 
AnswerRe: multithread exception Pin
Member 1032943910-Oct-13 23:08
memberMember 1032943910-Oct-13 23:08 
GeneralMy vote of 5 Pin
will_aha8-Jan-13 15:45
memberwill_aha8-Jan-13 15:45 
QuestionScan-line angle Pin
Member 952790820-Oct-12 0:42
memberMember 952790820-Oct-12 0:42 
GeneralMy vote of 5 Pin
syscom028614-Oct-10 3:12
membersyscom028614-Oct-10 3:12 
QuestionHow to use the source code Pin
kelvinjacobs14-Sep-10 16:49
memberkelvinjacobs14-Sep-10 16:49 
Questionhow to move the square on the radar sweep form point to point? Pin
P57018-Jul-10 19:09
memberP57018-Jul-10 19:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170118.1 | Last Updated 17 Aug 2007
Article Copyright 2007 by JimBlaney
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid